* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --primary-color: #0284c7;
    --secondary-color: #0f172a;
    --font-family: 'Montserrat', sans-serif;
    --font-family: 'Montserrat', sans-serif;

    --bs-primary: var(--primary-color);
}
body {
    font-family: var(--font-family);
    background-color: #f9f9f9;
    color: #333;
    line-height: 1.6;
    font-family: var(--font-family);
    background-color: #f9f9f9;
    color: #333;
    line-height: 1.6;
}
.montserrat {
    font-family: var(--font-family);
}
.inter {
    font-family: 'Inter', sans-serif;
}
.secondary-color {
    color: var(--secondary-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
}

.heading {
    font-family: var(--font-family);
    font-weight: 700;
}

.heading-italic {
    font-family: var(--font-family);
    font-style: italic;
}

p,
span,
a,
li,
button,
input,
textarea,
select {
    font-family: var(--font-family);
    font-weight: 400;
}


.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-color);
    --bs-gradient: none;
}

@media (min-width: 1400px){
    .container{
        max-width: 1920px;
    }
}
.text-primary{
    color: var(--primary-color) !important;
}
.bg-primary{
    background-color: var(--primary-color) !important;
}
.text-colored{
    color: var(--secondary-color);
}
.btn{
    padding: 16px 32px;
    font-family: "Inter", sans-serif;
}
.owl-dots {
    display: block !important;
    margin-top: 20px;
    text-align: center;
}
.owl-dots .owl-dot {
    width: 12px;
    height: 12px;
    margin: 5px;
    background-color: var(--secondary-color) !important;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s;
}

/* header section  */
header .nav-link{
    color: var(--secondary-color);
}

header .nav-link.active{
    color: var(--primary-color) !important;
    font-weight: 600;
}
header .nav-link:hover{
    color: var(--primary-color);
    font-weight: 600;
}

/* page header  */
.page-header{
    padding: 106px 0 100px;
    background-image: url('../images/how-it-work-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* footer section */
footer {
    background-color: var(--secondary-color);
    color: #fff;
    padding: 64px 0 0 0;
}
footer .nav-link{
    color: #fff;
}
footer .nav-link.active{
    color: var(--primary-color);
}
footer .social-icons li{
    background-color: var(--primary-color);
    padding: 0px 4.5px;
    border-radius: 45px;
    margin-left: 12px;
}
footer .social-icons li:hover{
    background-color: #fff;
}

/* hero section  */
.hero-section{
    padding: 128px 0;
}

.hero-3{
    background-image: url('../images/hero-bg-3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (max-width: 767px) {
    .hero-3{
        background-position: left center;
    }
}
/* features section  */
.features-section {
    padding: 106px 0 100px;
}
.features-section .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.5s;
}
.text-shadow {
     text-shadow: 2px 2px 0 #000000;
}

/* how it works  */

.how-it-works{
    padding: 106px 0 100px;
    background-image: url('../images/how-it-work-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.how-it-works .icon-circle {
  width: 90px;
  height: 90px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.how-it-works .dashed-line {
  position: absolute;
  top: 45px;
  left: 10%;
  width: 80%;
  border-top: 2px dashed rgba(255, 255, 255, 0.6);
  z-index: 1;
}
.how-it-works .icon-circle:hover {
  transform: scale(1.05);
  transition: 0.3s;
}
.how-it-works .curve-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 65%;
    height: 120px;
    margin: 0 auto;
    z-index: 1;
}


/* winning section action  */
.actions-section{
    padding: 90px 0 100px;
    background-image: url('../images/winning-bg.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

/* contact form section */
.contact-section{
    padding: 106px 0 100px;
    background-image: url('../images/how-it-work-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.how-it-works-section{
    padding: 75px 0 100px;
}
.contact-form-section{
    padding: 75px 0 100px;
}
.faq-section{
    padding: 106px 0 100px;
}
.faq-section .accordion-item {
    border: none;
    border-bottom: 1px solid #e0e0e0;
}

.faq-section .accordion-button {
    padding: 20px 0;
    font-weight: 600;
    color: #333;
    background-color: transparent;
}

.faq-section .accordion-button:not(.collapsed) {
    color: #333;
    background-color: transparent;
    box-shadow: none;
}

.faq-section .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.faq-section .accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M11 7V15M7 11H15M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z' stroke='%230284C7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.faq-section .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M7 11H15M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z' stroke='%230284C7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.faq-section .accordion-body {
    padding: 0 0 20px 0;
}

.faq-section .avatar-box {
  border-radius: 30px;
}

.faq-section .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}


/* pricing section  */
.pricing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 15px;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-list li {
    margin-bottom: 0.8rem;
    color: #6c757d;
}
.feature-list li i.bi {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: #108bca17;
    text-align: center;
    border-radius: 45px;
    line-height: 2;
}

.popular-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    border-radius: 20px;
}

.gradient-custom {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}