* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* ================= HEADER ================= */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    flex-wrap: nowrap; /* keep everything in one line on desktop */
    gap: 15px;
}

/* Logo */
.logo img {
    height: 70px;
}

/* Location Dropdown */
.search-location {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    background: #f5f5f5;
    border-right: 1px solid #ccc;
    border-radius: 6px 0 0 6px; /* rounded only left side */

}

.search-location i {
    color: #00A699;
    font-size: 16px;
}

.search-location select {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    cursor: pointer;
}

/* Search Box Container */
.search-box {
    display: flex;
    flex: 1; /* take remaining space between logo and right menu */
    max-width: 600px; /* limit desktop width */
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}

/* Search Input */
.search-box input {
    flex: 1;
    border: none;
    padding: 10px;
    font-size: 14px;
    outline: none;
}

/* Search Button */
.search-box button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 15px;
    background: #00A699;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    
}

/* Right Menu (signin, cart, etc.) */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ================= MOBILE FIX FOR SEARCH BAR FULL HEIGHT COLORS ================= */
@media (max-width: 768px) {

    /* STACK FORM: city, input, button */
    .search-box {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    /* CITY BUTTON */
    .search-location {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 4px;        
        background: #f5f5f5;
        font-size: 14px;
        border: 1px solid #ccc;
        width: fit-content;
        height: 40px;
        box-sizing: border-box;
    }

    .search-location i {
        font-size: 16px;
        color: #00A699;
    }

    .search-location select {
        border: none;
        background: transparent;
        font-size: 14px;
        cursor: pointer;
        height: 100%;
        -webkit-appearance: none;
    }

    /* SEARCH INPUT - FULL WIDTH & MATCH BUTTON HEIGHT */
    .search-box input {
        width: 100%;
        padding: 10px 12px;      /* enough padding for taller input */
        border: 1px solid #ccc;
        height: 50px;             /* increased height */
        font-size: 14px;
        box-sizing: border-box;   /* include padding in height */
    }

    /* SEARCH BUTTON */
    .search-box button {
        width: 100%;
        border: 1px solid #00A699;
        background: #00A699;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 35px;             /* same as input */
        font-size: 16px;
        cursor: pointer;
        box-sizing: border-box;
    }

    .search-box button i {
        font-size: 18px;          /* visible icon */
    }

    .search-box button span {
        display: none;            /* hide text if needed */
    }
}
    .header-right {
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 10px;
    }

/* Location */
.location {
    font-size: 14px;
    margin: 0 15px;
    white-space: nowrap;
}


/* Right Menu */
.header-right {
    display: flex;
    gap: 15px;
    align-items: center;
}

.header-right a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.header-right i {
    margin-right: 5px;
}

/* 🔥 MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        align-items: stretch;
    }}

    .header-right {
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .location {
        margin: 5px 0;
    }

/* SIGNIN DROPDOWN */
.signin-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 55px;
    right: 0;
    width: 260px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    display: none;
    flex-direction: column;
    z-index: 9999;
    border-radius: 8px;
}

/* Show on click */
.signin-dropdown.active .dropdown-menu {
    display: flex;
}

/* Dropdown Items */
.dropdown-menu a {
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    border-bottom: 1px solid #f2f2f2;
}

.dropdown-menu a:hover {
    background: #f5f5f5;
}

.dropdown-menu i {
    margin-right: 8px;
}

.new {
    color: red;
    font-size: 11px;
    margin-left: 5px;
}

.new-user {
    padding: 12px 15px;
    font-size: 13px;
    background: #f9f9f9;
    text-align: center;
}

.new-user p {
    margin-bottom: 8px;
}

.join-btn {
    display: inline-block;
    background: #00A699;
    color: #fff !important;   /* 🔥 force white */
    padding: 6px 12px;
    font-size: 13px;
    text-decoration: none;
    border-radius: 4px;
}

.join-btn:hover {
    background: #008f84;
    color: #333 !important;   /* 🔥 keep white on hover */
}
.join-now-btn {
    background: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;

    font-size: 13px;
    color: #2e3192 !important;
    text-decoration: none;

    box-shadow: none !important;
}

/* Kill ALL hover effects */
.join-now-btn:hover,
.join-now-btn:focus,
.join-now-btn:active {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #2e3192 !important;
    text-decoration: underline;
}
.dropdown-menu small {
    display: block;
    font-size: 11px;
    color: #777;
}
/* HERO SECTION */
.hero {
    background: #f5f7fb;
    padding: 60px 0;
}

/* CONTAINER */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* FLEX LAYOUT */
.hero-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

/* LEFT (BANNER) */
.hero-left {
    flex: 0 0 55%;
}

/* RIGHT (PLANS) */
.hero-right {
    flex: 0 0 45%;
    width: 45%;
}

/* PLAN ROW (DESKTOP) */
.hero-right .row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* FORCE 3 CARDS IN ONE LINE (DESKTOP) */
@media (min-width: 768px) {
    .hero-right .col-md-4 {
        flex: 0 0 calc(33.33% - 10px);
        max-width: calc(33.33% - 10px);
    }
}
body {
    margin: 0;
}

.hero {
    padding: 20px 0; /* reduce from 60px */
}

.banner-slider img {
    display: block;
}
/* BANNER */
.banner-slider {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-radius: 13px;
}

.banner-slider img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.banner-slider img.active {
    opacity: 1;
}

/* ================= MOBILE FIX ================= */
@media (max-width: 768px) {

    /* STACK LAYOUT */
    .hero-flex {
        flex-direction: column;
        gap: 20px;
    }

    .hero-left,
    .hero-right {
        width: 100%;
        flex: 100%;
    }

    /* SMALLER BANNER */
    .banner-slider {
        height: 160px;
    }

    /* SLIDER ROW */
    .hero-right .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 15px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    /* EACH CARD */
    .hero-right .col-12 {
        flex: 0 0 80%;
        scroll-snap-align: center;
    }

    /* SIDE PEEK EFFECT */
    .hero-right .col-12:first-child {
        margin-left: 10%;
    }

    .hero-right .col-12:last-child {
        margin-right: 10%;
    }
}

/* CARD */
.custom-directory .website-card {
    position: relative;
    border-radius: 12px;
    padding: 18px;
    height: 220px;
    width: 100%;
    overflow: hidden;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.custom-directory .website-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

/* TEXT */
.custom-directory .website-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.custom-directory .website-desc {
    font-size: 13px;
    color: #666;
}

/* IMAGE */
.custom-directory .website-img {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 70px;
}

/* BUTTON */
.custom-directory .card-link {
    position: absolute;
    bottom: 15px;
    left: 10px;
    height: 32px;
    min-width: 32px;
    background: #635cdb;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    overflow: hidden;
    padding: 0 8px;
    font-size: 12px;
    transition: all 0.3s ease;
}

.custom-directory .card-link span {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: 0.3s;
}

.custom-directory .website-card:hover .card-link span {
    opacity: 1;
    width: auto;
}

/* COLORS */
.custom-directory .silver-card {
    background: linear-gradient(135deg, #f5f6ff, #e6e8ff);
    
}

.custom-directory .gold-card {
    background: linear-gradient(135deg, #fff4d6, #ffe8a3);
}

.custom-directory .platinum-card {
    background: linear-gradient(135deg, #635cdb, #8a84ff);
    color: #fff;
}

.custom-directory .platinum-card .website-title,
.custom-directory .platinum-card .website-desc {
    color: #fff;
    
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {

    .hero-flex {
        flex-direction: column;
        gap: 20px;
    }

    .hero-left,
    .hero-right {
        width: 100%;
        flex: 100%;
    }

    .banner-slider {
        height: 160px;
    }

    /* SLIDER */
    .hero-right .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 15px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .hero-right .col-12 {
        flex: 0 0 60%;
        scroll-snap-align: center;
    }

    .hero-right .col-12:first-child {
        margin-left: 1%;
    }

    .hero-right .col-12:last-child {
        margin-right: 1%;
    }
}
    .custom-directory .website-card {
        height: 240px;  /* reduce height */
        padding: 14px;
    }
/* HIDE HORIZONTAL SCROLLBAR */
.hero-right .row::-webkit-scrollbar {
    display: none;
}

.hero-right .row {
    -ms-overflow-style: none;   /* IE/Edge */
    scrollbar-width: none;      /* Firefox */
}

.categories {
    padding: 40px;
    background: #f5f7fb;
}

/* GRID */
.category-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

/* BOX STYLE */
.category-box {
    background: #fff;
    padding: 12px;
    border-radius: 6px;
    
    border-top: 4px solid #2e3192; /* BLUE TOP BORDER */
    
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: 0.3s;
    overflow: hidden; /* important for image */
}

/* IMAGE */
.category-box img {
     width: 100%;
    height: 200px;
    border-radius: 4px;
    display: block;
    margin: 0 auto 10px;
    transition: 0.3s;
}

/* IMAGE HOVER ZOOM */
.category-box:hover img {
    transform: scale(1.05);
}

/* HOVER EFFECT */
.category-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* TITLE */
.category-box h3 {
    font-size: 15px;
    margin-bottom: 10px;
    color: #2e3192;
}

/* LIST */
.category-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-box ul li {
    font-size: 13px;
    padding: 5px 0;
    color: #444;
    cursor: pointer;
    transition: 0.2s;
}

/* HOVER ITEM */
.category-box ul li:hover {
    color: #ff6a00;
    padding-left: 5px;
}
/* ================= FREE QUOTE SECTION ================= */
.free-quote {
    padding: 40px 20px;   /* reduced gap */
    background: #f5f7fb;
}

/* HEADING */
.category-title {
    text-align: center;
    font-size: 24px;
    color: #2e3192;
    margin-bottom: 20px;   /* reduced */
}

.category-title strong {
    color: #ff6a00;
}

/* ================= MAIN LAYOUT ================= */
.quote-wrapper {
    max-width: 1200px;          /* 🔥 little wider */
    margin: auto;
    display: flex;
    justify-content: center;    /* 🔥 center content */
    align-items: center;        /* 🔥 vertical center */
    gap: 50px;                  /* better spacing */
}
/* ================= LEFT SIDE (STEPS) ================= */
/* LEFT SIDE */
.quote-steps {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    padding-left: 20px;
    margin-top: 20px !important;  /* 🔥 PUSH DOWN */
}

/* REMOVE OLD BORDER */
.quote-steps {
    border-left: none !important;
}

/* NEW LINE */
.quote-steps::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 60px;   /* 🔥 BIG CHANGE (start below first step) */
    bottom: 10px;
    width: 2px;
    background: #ddd;
}

/* STEP BOX */
.step-box {
   display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
}

/* ICON */
.step-icon {
    width: 50px;
    height: 50px;
    background: #fff;
    color: #666666;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    z-index: 1;
    transition: 0.3s;
    border: 1px solid #00a699;
}


/* TEXT */
.step-box h3 {
    color: #333;
    font-size: 16px;
    font-weight: 500;
}
.title-get-quote {
    max-width: 1200px;   /* same as quote-wrapper */
    margin: 0 auto 20px; /* center it */
    text-align: left;
}
/* ================= RIGHT SIDE (FORM) ================= */
/* RIGHT FORM */
.quote-form {
    width: 100%;
    max-width: 420px;   /* 🔥 perfect professional width */
    background: #fff;
    padding: 25px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* ✅ NEW FLEX ITEM */
.quote-form-container {
    flex: 1.2;
    max-width: none;   /* 🔥 remove limit */
     display: flex;
    flex-direction: column;
    align-items: center;   /* 🔥 center form */
}
/* INPUT BOX */
.quote-form input {
    width: 100%;
    height: 48px;              /* 🔥 FIX HEIGHT FOR ALL */
    padding: 0 14px;           /* remove vertical padding */
    margin-bottom: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: 0.3s;
}

.quote-form input:focus {
    outline: none;
}


/* BUTTON */
.quote-form button {
    width: 60%;
    padding: 14px;
    background: #007a6e;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}



.form-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 12px;
    text-align: left;   /* or center if you want */
    width: 100%;
    max-width: 420px;
    font-weight:550;
}
.mobile-input {
    display: flex;
    height: 48px;              /* 🔥 SAME HEIGHT */
    margin-bottom: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

/* +91 */
.country-code {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: #f7f7f7;
    font-size: 14px;
    position: relative;
}
.mobile-input input:focus {
    outline: none;
    box-shadow: inset 2px 0 0 #ff6a00;   /* 🔥 line after +91 */
}
.mobile-input input:focus {
    border: none !important;
    box-shadow: none !important;
}
/* INPUT */
.mobile-input input {
    flex: 1;
    height: 100%;
    padding: 0 14px !important;   /* 🔥 OVERRIDE */
    border: none !important;
}
/* MOBILE */
@media (max-width: 768px) {
    .quote-form {
        max-width: 100%;
    }
}
@media (max-width: 768px) {

    /* STACK LEFT + RIGHT */
    .quote-wrapper {
        flex-direction: column;
        gap: 20px;
        padding: 0 10px;
    }

    /* HEADING */
    .category-title {
        font-size: 20px;
        margin-bottom: 15px;
        text-align: left;
    }

    /* STEPS */
    .quote-steps {
        padding-left: 0;
        margin-top: 0;
    }

    /* REMOVE LINE */
    .quote-steps::before {
        display: none;
    }

    /* STEP BOX */
    .step-box {
        gap: 12px;
    }

    .step-icon {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .step-box h3 {
        font-size: 14px;
    }

    /* FORM CONTAINER */
    .quote-form-container {
        width: 100%;
        align-items: stretch;
    }

    /* FORM BOX */
    .quote-form {
        width: 100%;
        max-width: 100%;
        padding: 18px;
    }

    /* INPUTS */
    .quote-form input {
        height: 45px;
        font-size: 14px;
    }

    /* MOBILE INPUT (+91) */
    .mobile-input {
        height: 45px;
    }

    .country-code {
        font-size: 13px;
        padding: 0 10px;
    }

    .mobile-input input {
        font-size: 14px;
        padding: 0 10px !important;
    }

    /* BUTTON */
    .quote-form button {
        height: 45px;
        font-size: 15px;
    }
     /* STEPS CONTAINER */
/* FORCE LEFT ALIGN CONTAINER */
    .quote-steps {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
    }

    /* EACH STEP FULL WIDTH */
    .step-box {
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
        width: 100%;
        text-align: left !important;
    }

    /* ICON FIX */
    .step-icon {
        margin: 0 !important;
        flex-shrink: 0;
    }

    /* TEXT FIX */
    .step-box h3 {
        text-align: left !important;
        width: 100%;
    }
    /* REMOVE ANY CENTER ALIGN FROM PARENTS */
    .quote-wrapper,
    .quote-steps {
        text-align: left !important;
        align-items: flex-start !important;
    }

    /* FORCE STEP ROW LEFT */
    .step-box {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center;
        width: 100%;
        margin: 0;
        padding-left: 0;
    }

    /* ICON */
    .step-icon {
        margin: 0 !important;
        display: flex;
    }

    /* TEXT */
    .step-box h3 {
        text-align: left !important;
        margin: 0;
    }
     /* STEP BOX spacing */
    .step-box {
        gap: 15px;
        padding: 10px 0;
    }

    /* ICON BIGGER */
    .step-icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    /* TEXT BIGGER */
    .step-box h3 {
        font-size: 16px;
        line-height: 1.4;
    }
}
.products {
    padding: 40px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* responsive columns */
    gap: 20px;  /* space between products */
}

.product {
    border: 1px solid #ddd;
    text-align: center;
    border-radius: 8px;
    padding: 10px; /* optional inner spacing */
}

.product img {
    width: 100%;      /* fills the product container */
    height: 120px;    /* keeps images uniform */
    object-fit: cover;
    border-radius: 5px;
}

.product button {
    background: #ff6a00;
    color: #fff;
    border: none;
    padding: 10px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

.product button:hover {
    background: #e65c00;
}

a.whatsapp-icon {
    display: inline-flex;      
    align-items: center;       
    justify-content: center;
    font-size: 28px;           /* increase size (was 20px) */
    color: #25D366;            
    text-decoration: none;
    margin-right: 10px;        /* gap between icon and button */
    cursor: pointer;
    transition: transform 0.2s, color 0.3s;
}

a.whatsapp-icon:hover {
    color: #128C7E;
    transform: scale(1.1);
}

/* FOOTER */
footer {
    background: #2e3192;
    color: white;
    text-align: center;
    padding: 15px;
}
.top-cities {
    padding: 50px 20px;
    background: #f9f9f9;
    text-align: center;
}

.top-cities h2 {
    font-size: 24px;
    color: #2e3192;
    margin-bottom: 30px;
}

.city-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 cities per row */

    gap: 25px;
    justify-items: center;
}
.top-cities {
    padding: 10px;
    background: #ffffff;
}

.top-cities h2 {
    text-align: left;
    margin-bottom: 20px;
    font-size: 26px;
    color: #333;
    font-weight:550;
}
/* CIRCLE IMAGE BOX */
.city-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100px;   /* box stays same */
    height: 140px;  /* optional (for spacing) */
}

.city-box img {
    width: 70px;    /* 👈 reduce image size */
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #7e7e7e;
    transition: 0.3s;
}

.city-box p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.city-box p a {
    text-decoration: none;
    color: #333;
}

.city-box p a:hover {
    color: #2e3192;
}
/* TABLET */
@media (max-width: 992px) {
    .city-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .city-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .top-cities h2 {
        font-size: 22px;
    }

    .city-box {
        width: 100%;
        height: auto;
    }

    .city-box img {
        width: 65px;
        height: 65px;
    }

    .city-box p {
        font-size: 13px;
    }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
    .city-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .city-box img {
        width: 60px;
        height: 60px;
    }

    .top-cities {
        padding: 10px 5px;
    }
}
/* MORE FOR YOU SECTION */
.more-for-you {
    padding: 60px 20px;
    background: #f5f7fb;
}

.more-for-you h2 {
    font-size: 26px;
    color: #333;
    margin-bottom: 40px;
    font-weight: 550;
}

/* CARDS GRID */
.cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    justify-items: center;
}

/* INDIVIDUAL CARD */
.card {
    background: #fff;
    padding: 25px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    text-align: center;
    transition: 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* ICON IMAGE */
.card img {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    display: block;
}

/* TITLE */
.card h3 {
    font-size: 15px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 550;   /* 👈 makes text bold */
}

/* DESCRIPTION */
.card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

/* BUTTON */
.card .btn {
    display: block;
    width: fit-content;
    margin: 10px auto;

    padding: 6px 16px;   /* ↑ left-right space increased */
    
    background: transparent;
    color: #2e3192;
    border: 1px solid #2e3192;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}

.card .btn:hover {
    background: #2e3192;
    color:#fff;
}
.site-footer {
    background: #f1f4f9; /* soft light blue/gray background */
    color: #333; /* dark text for readability */
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.site-footer a {
    color: #2e3192; /* primary blue links */
    text-decoration: none;
}

.site-footer a:hover {
    color: #ff6a00; /* highlight on hover */
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 50px 20px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

.footer-column {
    flex: 1 1 200px;
    min-width: 180px;
}

.footer-column h4 {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #2e3192; /* category headings in blue */
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-bottom {
    border-top: 1px solid #d6dbe3;
    padding: 15px 20px;
    text-align: center;
    font-size: 13px;
    color: #555; /* lighter gray text */
}

/* RESPONSIVE */
@media(max-width:900px){
    .footer-top {
        flex-direction: column;
    }

    .footer-column {
        margin-bottom: 25px;
    }
}
/* FOOTER TOP STRIP WITH CONTAINER */
.footer-top-strip {
    width: 100%;
    background-color: #cfd6eb; /* slightly darker than footer */
    padding: 10px 0;
    font-size: 18px;
    font-weight: 500;
}

.footer-top-strip .container {
    max-width: 1200px; /* same as your site container */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.footer-top-strip a {
    margin-left: 8px;
    display: inline-block;
}

.footer-top-strip img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    transition: 0.3s;
}

.footer-top-strip img:hover {
    transform: scale(1.2);
}

/* RESPONSIVE */
@media(max-width:768px){
    .footer-top-strip .container {
        flex-direction: column;
        gap: 8px;
    }
.footer-top-strip .strip-right a {
    margin-left: 12px;
    font-size: 16px;
    color: #2e3192;
    transition: 0.3s;
}

.footer-top-strip .strip-right a:hover {
    color: #ff6a00;
}
    .footer-top-strip .strip-right {
        justify-content: center;
    }
}
/* MOBILE FIX */
@media (max-width: 768px) {

    .header {
        flex-direction: column;
        align-items: stretch;
    }

    .logo {
        text-align: center;
    }

    .location {
        text-align: center;
        margin: 5px 0;
    }
    .header-right {
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 10px;
    }
/* DESKTOP */
.dropdown-menu {
    position: absolute;
    top: 55px;
    right: 0;
}
     /* MOBILE FIX */
@media (max-width: 768px) {


    .dropdown-menu {
        position: fixed !important;

        width: 95%;
        left: 2.5%;

        max-height: 80vh;
        overflow-y: auto;

        background: #fff;
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);

        z-index: 999999;
    }
}

/* Prevent background scroll when dropdown open */
body.dropdown-open {
    overflow: hidden;
}
/* Remove blue tap highlight on mobile */
a, button {
    -webkit-tap-highlight-color: transparent;
}

/* Remove blue focus outline */
a:focus,
button:focus {
    outline: none;
}

/* Keep your link color consistent */
a {
    color: inherit;
}}
.signin-dropdown i.fa-chevron-down {
    font-size: 11px;      /* increase size */
    margin-left: 4px;     /* space from text */
    color: #333;          /* icon color */
    transition: 0.3s;     /* smooth animation */
}
.user-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;          /* circle width */
  height: 20px;         /* circle height */
  border-radius: 50%;   /* makes it circular */
  border: 1px solid #333;
  background-color: #fff;  /* light gray background */
  color: #333;          /* icon color */
  text-decoration: none;
  transition: background 0.3s;
}


/* icon sizing inside circle */
.user-icon i {
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {

    .category-wrapper {
        grid-template-columns: 1fr; /* one box per row */
    }

    .category-box {
        padding: 15px; /* keep same spacing */
        text-align: left; /* IMPORTANT - same as desktop */
    }

    /* image full width */
    .category-box img {
        width: 100%;
        height: auto;   /* 🔥 change this */
    }

    /* keep text same style */
    .category-box h3 {
        font-size: 16px;
        text-align: left;
    }

    .category-box ul {
        text-align: left;
    }

    .category-box ul li {
        font-size: 13px;
    }
}
.category-title {
    margin-bottom: 20px;
    font-weight: 550;
    color: #333;
    font-size: 26px;
    text-align: left; /* force left align */
}
.view-all {
    text-align: right;
    margin-top: 15px;
}

.view-all a {
    color: #2e3192;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
}

.view-all a::after {
    content: " \2192";   /* right arrow */
    transition: 0.3s;
}

.view-all a:hover::after {
    margin-left: 5px;
}
/* 🔥 FORCE FIX GAP */
.free-quote {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
}

.category-title {
    margin-bottom: 10px !important;
}
.category-strip {
    width: 100%;
    background: #f5f7fa;
    padding: 15px 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.category-strip {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    width: 100%;
    border-radius: 10px;
    padding: 15px;
    justify-content: space-between;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, .1);
    border: solid 1px #d3d8fd;
    background-color: #ebedfd;
    align-items: center;
    margin-bottom: 20px;
}

.strip-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 15px;
    margin-bottom: 20px;
}

/* LEFT SIDE TEXT */
.strip-title {
    flex: 1.5;
}

.strip-title h4 {
    font-size: 26px;
    color: #1b1d1d;
    font-weight: 550;
    margin: 0;
    text-align:left;
}

/* RIGHT BOXES */
.strip-item {
    flex: 2;  
    background: #fff;
    padding: 32px 20px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e6ecf5;
    transition: 0.3s;
     width: 400px;   /* increase as needed */
}
/* arrow button */
.strip-item i {
    background: #e8f2ff;
    color: #2e3192;

    width: 38px;
    height: 38px;
    line-height: 38px;   /* center icon vertically */

    text-align: center;  /* center icon horizontally */

    border-radius: 50%;
    font-size: 14px;
    transition: 0.3s;
}

@media (max-width: 768px) {
    .strip-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .strip-title {
        width: 100%;
        margin-bottom: 10px;
    }

    .strip-item {
        width: 100%;
    }
}
/* left side (image + text) */
.item-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* small image */
.item-left img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* text */
.strip-item h4 {
    font-size: 22px;
    margin: 0;
    color: #2e3192;
}

/* keep arrow on right */
.strip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.strip-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* keep hover working on full box */
.strip-link:hover .strip-item {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-color: #d6e4ff;
}
@media (max-width: 768px) {

    .view-all a {
        font-size: 16px;   /* increase text size */
    }

    .view-all a::after {
        font-size: 18px;   /* 🔥 bigger arrow */
        margin-left: 2px;  /* spacing from text */
    }
}
.brand-cities {
    padding: 50px 20px;
    background: #f9f9f9;
    text-align: center;
}

.brand-cities h2 {
    font-size: 24px;
    color: #2e3192;
    margin-bottom: 30px;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 cities per row */

    gap: 25px;
    justify-items: center;
}
.brand-cities {
    padding: 10px;
    background: #ffffff;
}

.brand-cities h2 {
    text-align: left;
    margin-bottom: 20px;
    font-size: 26px;
    color: #333;
    font-weight:550;
}
/* CIRCLE IMAGE BOX */
.brand-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100px;   /* box stays same */
    height: 150px;  /* optional (for spacing) */
}

.brand-box img {
    width: 130px;    /* 👈 reduce image size */
    height: 130px;
    transition: 0.3s;
}

.brand-box p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.brand-box p a {
    text-decoration: none;
    color: #333;
}

.brand-box p a:hover {
    color: #2e3192;
}
/* TABLET */
@media (max-width: 992px) {
    .brand-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .brand-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .brand-cities h2 {
        font-size: 22px;
    }

    .brand-box {
        width: 100%;
        height: auto;
    }

    .brand-box img {
        width: 65px;
        height: 65px;
    }

    .brand-box p {
        font-size: 13px;
    }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
    .brand-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .brand-box img {
        width: 60px;
        height: 60px;
    }

    .brand-cities {
        padding: 10px 5px;
    }
}

/* ================= FLY ASH LISTING PAGE ================= */

/* MAIN LAYOUT */
.container {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

/* SIDEBAR FILTER */
.filters {
    width: 260px;
    background: #fff;
    padding: 15px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    height: fit-content;
}

.filters h3 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #333;
}

/* FILTER BOX */
.filter-box {
    margin-bottom: 20px;
}

.filter-box h4 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #2e3192;
}

.filter-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-box li {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.filter-box li:hover {
    color: #2e3192;
    padding-left: 4px;
}

/* PRODUCT SECTION */
.products {
    flex: 1;
}

.products h2 {
    font-size: 22px;
    color: #2e3192;
    margin-bottom: 20px;
}

/* PRODUCT CARD */
.product-card {
    display: flex;
    gap: 15px;
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #e0e6ed;
    transition: 0.3s;
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* IMAGE */
.product-card img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
}

/* INFO */
.product-info {
    flex: 1;
}

.product-info h3 {
    font-size: 16px;
    margin: 0;
    color: #222;
}

.price {
    font-size: 16px;
    font-weight: bold;
    margin: 8px 0;
    color: #000;
}

.company {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

/* BUTTON */
.product-info button {
    display: inline-block;
    padding: 7px 14px;
    font-size: 13px;
    border: 1px solid #2e3192;
    color: #2e3192;
    background: transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.product-info button:hover {
    background: #2e3192;
    color: #fff;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {

    .container {
        flex-direction: column;
        padding: 10px;
    }

    .filters {
        width: 100%;
    }

    .product-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .product-card img {
        width: 100%;
        height: auto;
    }
}
/* Overlay */
.signin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 999;
}

/* Popup */
.signin-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    display: none;
    z-index: 1000;
}

/* Box */
.popup-box {
    background: #fff;
    padding: 60px;          /* increased */
    width: 560px;           /* increased */
    border-radius: 1px;
    text-align: center;
    position: relative;
}

/* Close */
.close-btn {
    position: static;
    right: 14px;            /* slightly adjusted */
    top: 12px;
    font-size: 30px;        /* increased */
    cursor: pointer;
    line-height: 1;
}

/* Heading */
.popup-box h3 {
    margin-bottom: 8px;
    font-size: 20px;        /* increased */
    color: #2e3192;
}

.subtitle {
    font-size: 19px;        /* increased */
    color: #333;
    margin-bottom: 10px;
    text-align:left;
}

/* Input */
.popup-box input {
    width: 100%;
    padding: 15px;          /* increased */
    font-size: 17px;        /* added */
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 14px;
}
.popup-box input:hover,
.popup-box input:focus,
.popup-box input:active {
    border: 1px solid #ccc;     /* same as normal */
    box-shadow: none;           /* remove glow */
    outline: none;              /* remove blue outline */
    background: #fff;           /* no color change */
}
.popup-box .mobile-input input {
    font-size: 18px !important;
    margin-top:15px;
}

/* Button */
.otp-btn {
    width: 50%;
    padding: 12px;          /* increased */
    font-size: 17px;        /* added */
    background: #ff6a00;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.otp-btn:hover {
    background: #e65c00;
}
/* Button */
.resendotp-btn {
    width: 50%;
    padding: 12px;          /* increased */
    font-size: 17px;        /* added */
    background: #00a699;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.resendotp-btn:hover {
    background: #00a699;
}


/* Terms */
.terms {
    font-size: 12px;        /* increased */
    color: #888;
    margin-top: 12px;
}

/* Remove padding from main box */
.popup-box {
    padding: 0;
}

/* Header full width */
.popup-header {
    background: #2e3192;
    color: #fff;
    padding: 20px 15px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    
}
.popup-header .close-btn {
    font-size: 22px !important;   /* 🔥 force size */
    font-weight: bold;
    cursor: pointer;

    display: flex;                /* ensures proper scaling */
    align-items: center;
    justify-content: center;

    width: 30px;                  /* control size */
    height: 30px;
}
/* Content area (normal padding) */
.popup-content {
    padding: 25px;
}

/* Header text */
.popup-header h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
}

/* Close button */
.popup-header .close-btn {
    font-size: 18px;
    cursor: pointer;
    color: #fff;
}
.mobile-input {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

/* Left side (flag + code) */
.country-code {
    background: #f5f5f5;
    padding: 15px 12px;
    font-size: 18px;
    color: #333;
    border-right: 1px solid #ccc;
    white-space: nowrap;
}

/* Input */
.mobile-input input {
    border: none;
    outline: none;
    padding: 10px;
    flex: 1;
    font-size: 14px;
}
.country-code img {
    width: 16px;
    margin-right: 5px;
    vertical-align: middle;
}
/* 📱 Mobile devices */
@media (max-width: 480px) {

    .signin-popup {
        width: 100%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);  /* remove shrink */
    }

    .popup-box {
        width: 90%;              /* fit screen */
        margin: auto;
        border-radius: 8px;
    }

    .popup-content {
        padding: 20px;           /* slightly reduced */
    }

    .popup-header {
        padding: 12px;
    }

    .popup-header h3 {
        font-size: 15px;
    }

    .close-btn {
        font-size: 22px;
    }

    .popup-box input {
        padding: 12px;
        font-size: 14px;
    }

    .otp-btn {
        padding: 12px;
        font-size: 14px;
    }

    .country-code {
        padding: 10px;
        font-size: 12px;
    }
}
@media (max-width: 480px) {

    .signin-popup {
        top: auto;                 /* remove top center */
        bottom: 0;                 /* 🔥 stick to bottom */
        left: 0;
        width: 100%;
        transform: none;           /* remove translate */
    }

    .popup-box {
        width: 100%;
        border-radius: 12px 12px 0 0;   /* rounded top only */
        animation: slideUp 0.3s ease;   /* smooth entry */
    }

    .popup-content {
        padding: 20px;
    }
}
    .popup-header {
        padding: 14px;
    }

    .popup-header h3 {
        font-size: 16px;
    }

    .close-btn {
        font-size: 24px;
    }

    .popup-box input {
        padding: 14px;
        font-size: 16px;   /* 🔥 important for mobile */
    }

    .otp-btn {
        padding: 14px;
        font-size: 16px;
    }

    .country-code {
        padding: 12px;
        font-size: 14px;
    }

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
/* When popup is open → force hide menu */
body.popup-open .dropdown-menu {
    display: none !important;
}
#otpSection input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.chat-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    height: 400px;
    background: #fff;
    display: none;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 10px;

    z-index: 9999; /* 🔥 IMPORTANT */
}
.chat-header {
    padding: 10px;
    background: #2e3192;
    color: #fff;
    display: flex;
    justify-content: space-between;
}

.chat-body {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    background: #f5f7fb;
}

.msg {
    padding: 8px 10px;
    margin: 5px 0;
    border-radius: 10px;
    max-width: 70%;
}

.sent {
    background: #2e3192;
    color: #fff;
    margin-left: auto;
}

.received {
    background: #e6ecf5;
}

.chat-footer {
    display: flex;
    border-top: 1px solid #ddd;
}

.chat-footer input {
    flex: 1;
    padding: 10px;
    border: none;
    outline: none;
}

.chat-footer button {
    padding: 10px;
    background: #2e3192;
    color: #fff;
    border: none;
}
.send-btn {
    background: #2e3192;
    border: none;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.send-btn i {
    width: 14px;
    height: 14px;
    color: #fff;
}