/* =========================================

   1. COLOR VARIABLES (60-30-10 Rule)

   ========================================= */

:root {

    /* 60% Dominant (Backgrounds) */

    --bg-white: #ffffff;

    --bg-light: #f4f8fb; /* Soft hint of blue for alternating sections */

    

    /* 30% Secondary (Text, Headings, Footer) - Logo Dark Navy */

    --text-main: #1a2a47; 

    --text-muted: #4a5568;

    

    /* 10% Accent (Buttons, Icons, Highlights) - Logo Blues */

    --accent-primary: #0073cf; /* Mid Blue */

    --accent-secondary: #38b6ff; /* Light Blue */

}



/* =========================================

   2. GENERAL SETUP & TYPOGRAPHY

   ========================================= */

* { 

    margin: 0; 

    padding: 0; 

    box-sizing: border-box; 

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 

}



body { 

    background-color: var(--bg-white); 

    color: var(--text-muted); 

    overflow-x: hidden; 

}



a {

    text-decoration: none;

}



/* =========================================

   3. NAVBAR & HEADER

   ========================================= */

.navbar { 

    display: flex; 

    justify-content: space-between; 

    align-items: center; 

    padding: 15px 5%; 

    background-color: var(--bg-white); 

    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 

    position: sticky; 

    top: 0; 

    z-index: 1000; 

}



.logo-img { 

    height: 90px; /* Aap isko 100px ya 110px tak bhi kar sakte hain apne hisab se */

    width: auto;  /* Taake logo stretch na ho aur apni original shape mein rahay */

    object-fit: contain;

}



nav a { 

    color: var(--text-main); 

    margin-left: 25px; 

    font-weight: 600; 

    transition: color 0.3s; 

}



nav a:hover, nav a.active { 

    color: var(--accent-primary); 

}



/* Buttons */

.btn-primary { 

    background-color: var(--accent-primary); 

    color: white !important; 

    padding: 10px 24px; 

    border-radius: 6px; 

    transition: 0.3s; 

    font-weight: bold; 

    border: 2px solid var(--accent-primary); 

}



.btn-primary:hover { 

    background-color: var(--text-main); 

    border-color: var(--text-main); 

    color: white; 

}



/* =========================================

   4. HERO BANNER SECTION

   ========================================= */

.hero { 

    text-align: center; 

    padding: 120px 5% 80px 5%; 

    background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%); 

}



.badge { 

    background-color: #e0f2fe; 

    color: var(--accent-primary); 

    padding: 8px 16px; 

    border-radius: 20px; 

    font-size: 14px; 

    font-weight: bold; 

    margin-bottom: 20px; 

    display: inline-block; 

}



.hero h1 { 

    font-size: 56px; 

    color: var(--text-main); 

    margin-bottom: 10px; 

    line-height: 1.2; 

}



.hero p { 

    font-size: 20px; 

    color: var(--text-muted); 

    max-width: 800px; 

    margin: 0 auto 40px auto; 

    line-height: 1.6; 

}



.hero-buttons { 

    display: flex; 

    gap: 20px; 

    justify-content: center; 

}



.btn-large { 

    padding: 15px 35px; 

    font-size: 18px; 

    border-radius: 8px; 

}



.btn-outline { 

    background-color: transparent; 

    color: var(--accent-primary); 

    border: 2px solid var(--accent-primary); 

    font-weight: bold; 

    transition: 0.3s; 

}



.btn-outline:hover { 

    background-color: var(--accent-primary); 

    color: white; 

}



/* =========================================

   5. PARTNERS & TRUST BANNER

   ========================================= */

.partners-banner { 

    background-color: white; 

    padding: 30px 5%; 

    text-align: center; 

    border-bottom: 1px solid #e2e8f0; 

    border-top: 1px solid #e2e8f0; 

}



.partners-banner p { 

    color: #718096; 

    font-size: 14px; 

    text-transform: uppercase; 

    letter-spacing: 1px; 

    margin-bottom: 15px; 

}



.partner-logos { 

    display: flex; 

    justify-content: center; 

    gap: 40px; 

    flex-wrap: wrap; 

    color: #a0aec0; 

    font-size: 20px; 

    font-weight: bold; 

}



.partner-logos span { 

    display: flex; 

    align-items: center; 

    gap: 8px; 

}



/* =========================================

   6. LAYOUTS & CONTAINERS

   ========================================= */

.container { 

    padding: 80px 5%; 

    max-width: 1200px; 

    margin: 0 auto; 

}



.flex-row { 

    display: flex; 

    align-items: center; 

    gap: 50px; 

    flex-wrap: wrap; 

}



.bg-light { 

    background-color: var(--bg-light); 

}



.section-title { 

    text-align: center; 

    font-size: 38px; 

    color: var(--text-main); 

    margin-bottom: 50px; 

}



/* =========================================

   7. ABOUT SECTION

   ========================================= */

.about-text { 

    flex: 1; 

    min-width: 300px; 

}



.about-text h2 { 

    font-size: 34px; 

    color: var(--text-main); 

    margin-bottom: 20px; 

}



.about-text p { 

    line-height: 1.7; 

    color: var(--text-muted); 

    margin-bottom: 20px; 

    font-size: 18px; 

}



.check-list { 

    list-style: none; 

}



.check-list li { 

    margin-bottom: 12px; 

    font-size: 16px; 

    color: var(--text-main); 

    font-weight: 500; 

}



.check-list i { 

    color: var(--accent-primary); 

    margin-right: 10px; 

}



.about-image { 

    flex: 1; 

    min-width: 300px; 

}



.image-placeholder { 

    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary)); 

    height: 350px; 

    border-radius: 20px; 

    display: flex; 

    justify-content: center; 

    align-items: center; 

    color: white; 

    font-size: 100px; 

    opacity: 0.8; 

    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 

}



/* =========================================

   8. SERVICE CARDS GRID

   ========================================= */

.grid-cards { 

    display: grid; 

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 

    gap: 30px; 

}



.card { 

    background: var(--bg-white); 

    padding: 40px 30px; 

    border-radius: 16px; 

    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 

    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; 

    border: 1px solid #e2e8f0; 

    border-top: 4px solid var(--accent-primary); 

}



.card:hover { 

    transform: translateY(-10px); 

    box-shadow: 0 20px 30px rgba(0,0,0,0.08); 

    border-top-color: var(--accent-secondary); 

}



.card-icon { 

    font-size: 35px; 

    color: var(--accent-primary); 

    margin-bottom: 20px; 

}



.card h3 { 

    color: var(--text-main); 

    margin-bottom: 15px; 

    font-size: 22px; 

}



.card p { 

    color: var(--text-muted); 

    line-height: 1.6; 

}



.card a.read-more { 

    display: inline-block; 

    margin-top: 20px; 

    color: var(--accent-primary); 

    font-weight: bold; 

    transition: 0.3s; 

}



.card a.read-more:hover { 

    color: var(--text-main); 

}



/* =========================================

   9. STEPS / HOW IT WORKS

   ========================================= */

.how-it-works { 

    text-align: center; 

}



.steps-grid { 

    display: grid; 

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 

    gap: 30px; 

    margin-top: 40px; 

}



.step-box { 

    padding: 30px; 

    position: relative; 

}



.step-number { 

    background-color: var(--accent-primary); 

    color: white; 

    width: 50px; 

    height: 50px; 

    display: flex; 

    justify-content: center; 

    align-items: center; 

    border-radius: 50%; 

    font-size: 24px; 

    font-weight: bold; 

    margin: 0 auto 20px auto; 

}



.step-box h4 { 

    color: var(--text-main); 

    font-size: 20px; 

    margin-bottom: 15px; 

}



.step-box p { 

    color: var(--text-muted); 

    line-height: 1.6; 

}



/* =========================================

   10. CALL TO ACTION (CTA) SECTION

   ========================================= */

.cta-section { 

    background-color: var(--text-main); 

    color: white; 

    text-align: center; 

    padding: 80px 5%; 

    margin: 40px 5%; 

    border-radius: 20px; 

}



.cta-section h2 { 

    font-size: 36px; 

    margin-bottom: 20px; 

}



.cta-section p { 

    font-size: 18px; 

    margin-bottom: 30px; 

    color: #cbd5e1; 

}



.cta-btn { 

    background-color: white; 

    color: var(--text-main) !important; 

    border-color: white; 

}



.cta-btn:hover { 

    background-color: var(--accent-secondary); 

    color: white !important; 

    border-color: var(--accent-secondary); 

}



/* =========================================

   11. FOOTER

   ========================================= */

footer { 

    background-color: var(--text-main); 

    color: #cbd5e1; 

    padding: 60px 5% 20px 5%; 

    margin-top: 50px; 

}



.footer-container { 

    display: flex; 

    justify-content: space-between; 

    flex-wrap: wrap; 

    gap: 40px; 

    max-width: 1200px; 

    margin: 0 auto; 

    border-bottom: 1px solid #334155; 

    padding-bottom: 40px; 

}



.footer-col { 

    flex: 1; 

    min-width: 250px; 

}



.footer-logo { 

    height: 40px; 

    margin-bottom: 20px; 

    filter: brightness(0) invert(1); 

}



.footer-col h4 { 

    color: white; 

    margin-bottom: 20px; 

    font-size: 18px; 

}



.footer-col a { 

    display: block; 

    color: #cbd5e1; 

    margin-bottom: 10px; 

    transition: 0.3s; 

}



.footer-col a:hover { 

    color: var(--accent-secondary); 

}



.footer-bottom { 

    text-align: center; 

    padding-top: 20px; 

    font-size: 14px; 

}



/* =========================================

   12. SCROLL ANIMATIONS

   ========================================= */

.fade-in { 

    opacity: 0; 

    transform: translateY(30px); 

    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 

}



.fade-in.appear { 

    opacity: 1; 

    transform: translateY(0); 

}



/* =========================================

   13. FAQ SECTION (Accordion)

   ========================================= */

.faq-section { 

    padding: 80px 5%; 

    background-color: var(--bg-white); 

}



.faq-container { 

    max-width: 800px; 

    margin: 0 auto; 

}



.faq-subtitle { 

    text-align: center; 

    color: #eab308; /* Yellowish accent color */ 

    font-size: 14px; 

    text-transform: uppercase; 

    letter-spacing: 1.5px; 

    margin-bottom: 10px; 

}



.faq-title { 

    text-align: center; 

    color: var(--text-main); 

    font-size: 36px; 

    margin-bottom: 50px; 

}



.faq-list { 

    border-top: 1px solid #e2e8f0; 

}



.faq-item { 

    border-bottom: 1px solid #e2e8f0; 

}



.faq-question { 

    width: 100%; 

    background: none; 

    border: none; 

    text-align: left; 

    padding: 24px 0; 

    font-size: 18px; 

    font-weight: 600; 

    color: var(--text-main); 

    cursor: pointer; 

    display: flex; 

    justify-content: space-between; 

    align-items: center; 

    transition: color 0.3s; 

}



.faq-question:hover { 

    color: var(--accent-primary); 

}



.faq-question i { 

    font-size: 16px; 

    color: var(--text-main); 

    transition: transform 0.3s ease; 

}



/* Jab box open ho, tab Plus icon Cross (X) ban jaye */

.faq-question.active i { 

    transform: rotate(45deg); 

    color: var(--accent-primary); 

}



.faq-answer { 

    max-height: 0; 

    overflow: hidden; 

    transition: max-height 0.3s ease-out; 

}



.faq-answer p { 

    padding-bottom: 24px; 

    color: var(--text-muted); 

    line-height: 1.7; 

    font-size: 16px; 

}



/* =========================================

   14. PROMOTIONAL COUNTDOWN BANNER

   ========================================= */

.promo-banner {

    background: linear-gradient(90deg, #1d4ed8, #3b82f6); /* Bright Blue Gradient */

    color: white;

    padding: 12px 5%;

    position: relative;

    z-index: 1001; /* Taake yeh navbar ke upar nazar aaye */

}



.promo-content {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    max-width: 1200px;

    margin: 0 auto;

}



.promo-text {

    display: flex;

    flex-direction: column;

    text-align: left;

}



.promo-text strong {

    font-size: 16px;

    margin-bottom: 4px;

}



.promo-text span {

    font-size: 14px;

    opacity: 0.9;

}



.promo-timer {

    display: flex;

    gap: 8px;

}



.time-box {

    background-color: white;

    color: #1d4ed8;

    border-radius: 6px;

    padding: 6px 12px;

    text-align: center;

    min-width: 55px;

    display: flex;

    flex-direction: column;

    box-shadow: 0 2px 5px rgba(0,0,0,0.15);

}



.time-box span {

    font-size: 20px;

    font-weight: 800;

    line-height: 1;

}



.time-box small {

    font-size: 10px;

    text-transform: uppercase;

    font-weight: 700;

    margin-top: 3px;

    color: #64748b;

}



.promo-btn {

    background-color: white;

    color: #1d4ed8 !important;

    padding: 10px 24px;

    border-radius: 30px;

    text-decoration: none;

    font-weight: bold;

    font-size: 15px;

    transition: all 0.3s ease;

}



.promo-btn:hover {

    background-color: #f1f5f9;

    transform: scale(1.05);

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}



/* Mobile Screen Adjustments */

@media (max-width: 768px) {

    .promo-content { flex-direction: column; text-align: center; gap: 15px; }

    .promo-text { text-align: center; }

}

/* =========================================

   15. PROMO POP-UP MODAL

   ========================================= */

.popup-overlay {

    position: fixed;

    top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(0, 0, 0, 0.7); /* Peechay ka dark background */

    display: none; /* Shuru mein chupa hoga */

    justify-content: center;

    align-items: center;

    z-index: 99999; /* Sab se upar show karne ke liye */

    opacity: 0;

    transition: opacity 0.3s ease;

}



.popup-overlay.show {

    display: flex;

    opacity: 1;

}



.popup-content {

    background-color: #fde047; /* Yellow color for bottom */

    width: 90%;

    max-width: 500px;

    border-radius: 20px;

    position: relative;

    box-shadow: 0 10px 40px rgba(0,0,0,0.5);

    text-align: center;

    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

}



@keyframes popIn {

    0% { transform: scale(0.8) translateY(50px); opacity: 0; }

    100% { transform: scale(1) translateY(0); opacity: 1; }

}



.close-popup {

    position: absolute;

    top: 15px; right: 20px;

    background: none; border: none;

    color: white; font-size: 28px;

    cursor: pointer; z-index: 10;

}



.popup-top {

    background-color: #2563eb; /* Blue top */

    color: white;

    padding: 50px 30px 40px;

    position: relative;

    /* Yeh line neechay wala curve banati hai */

    border-bottom-left-radius: 50% 30px;

    border-bottom-right-radius: 50% 30px;

}



.popup-tag {

    background-color: #fde047;

    color: #1a1a1a;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 15px;

    border-radius: 8px;

    transform: rotate(-10deg);

    position: absolute;

    top: -20px; left: 50%;

    transform: translateX(-50%) rotate(-10deg);

    box-shadow: 2px 4px 10px rgba(0,0,0,0.2);

}



.popup-tag small { font-size: 11px; font-weight: 800; text-transform: uppercase; text-align: right; line-height: 1.1;}

.popup-tag strong { font-size: 24px; font-weight: 900; line-height: 1; }



.popup-top h2 { font-size: 28px; margin: 20px 0 10px; line-height: 1.3; font-weight: bold;}

.popup-top p { font-size: 15px; opacity: 0.9; margin-bottom: 25px; }



.popup-timer-text { font-weight: bold; margin-bottom: 15px; font-size: 16px; }

.popup-timer { display: flex; justify-content: center; gap: 10px; }



.popup-bottom {

    padding: 30px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

}



.popup-btn {

    background-color: #000;

    color: #fff !important;

    padding: 14px 35px;

    border-radius: 30px;

    font-weight: bold;

    font-size: 16px;

    text-decoration: none;

    transition: transform 0.3s;

}



.popup-btn:hover { transform: scale(1.05); }



.no-thanks {

    background: none; border: none;

    color: #1a1a1a; font-size: 14px;

    cursor: pointer; text-decoration: none;

}

.no-thanks:hover { text-decoration: underline; }

/* =========================================

   16. SOCIAL MEDIA ICONS (Footer)

   ========================================= */

.social-links {

    margin-top: 20px;

    display: flex;

    gap: 15px;

}



.social-links a {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    width: 40px;

    height: 40px;

    background-color: #334155; /* Footer se match karta hua dark color */

    color: white;

    border-radius: 50%; /* Gol shape ke liye */

    text-decoration: none;

    font-size: 18px;

    transition: all 0.3s ease;

}



/* Mouse laane par kya hoga */

.social-links a:hover {

    background-color: var(--accent-secondary); /* Light Blue color */

    color: white;

    transform: translateY(-5px); /* Thora upar ki taraf uchlega */

    box-shadow: 0 5px 15px rgba(0, 115, 207, 0.4);

}

/* =========================================

   17. NAVBAR DROPDOWN MENU

   ========================================= */

.dropdown {

    position: relative;

    display: inline-block;

    margin-left: 25px; /* Dusre links ke barabar space */

}



.dropdown .dropbtn {

    color: var(--text-main);

    font-weight: 600;

    transition: color 0.3s;

    cursor: pointer;

}



.dropdown:hover .dropbtn {

    color: var(--accent-primary);

}



.dropdown-content {

    display: none;

    position: absolute;

    background-color: var(--bg-white);

    min-width: 220px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.1);

    border-radius: 8px;

    top: 150%;

    left: -20px;

    z-index: 2000;

    border: 1px solid #e2e8f0;

    overflow: hidden;

}



.dropdown-content a {

    color: var(--text-main);

    padding: 15px 20px;

    text-decoration: none;

    display: block;

    margin: 0;

    font-size: 15px;

    border-bottom: 1px solid #f1f5f9;

}



.dropdown-content a i {

    color: var(--accent-primary);

    margin-right: 10px;

    font-size: 18px;

}



.dropdown-content a:hover {

    background-color: var(--bg-light);

    color: var(--accent-primary);

}



.dropdown:hover .dropdown-content {

    display: block;

}

/* =========================================

   18. NAVBAR FIX & MOBILE RESPONSIVE MENU

   ========================================= */



/* Desktop Fix: Buttons ke darmiyan proper faasla */

.navbar nav {

    display: flex;

    align-items: center;

    gap: 20px; /* Yeh buttons ko mix hone se rokay ga */

}



.navbar nav a {

    margin-left: 0 !important; /* Purani margin hata di */

}



.menu-toggle {

    display: none; /* Desktop par button chupa rahega */

    font-size: 28px;

    color: var(--text-main);

    cursor: pointer;

}



/* MOBILE SCREEN DESIGN (Jab screen choti ho jaye) */

@media screen and (max-width: 992px) {

    .menu-toggle {

        display: block; /* Mobile par Menu Icon show hoga */

    }



    .navbar nav {

        display: none; /* Default menu hide ho jayega */

        flex-direction: column;

        align-items: flex-start;

        position: absolute;

        top: 100%; /* Navbar ke theek neechay */

        left: 0;

        width: 100%;

        background-color: var(--bg-white);

        padding: 20px 5%;

        box-shadow: 0 10px 20px rgba(0,0,0,0.1);

        gap: 15px;

        z-index: 9999;

    }



    .navbar nav.active {

        display: flex; /* Button dabane par menu khulega */

    }



    .navbar nav a {

        width: 100%;

        padding: 10px 0;

        border-bottom: 1px solid #f1f5f9;

    }



    .dropdown {

        margin-left: 0;

        width: 100%;

    }



    .dropdown-content {

        position: relative; /* Mobile par dropdown popup ki bajaye list mein khulega */

        top: 0;

        left: 0;

        box-shadow: none;

        border: none;

        padding-left: 15px;

        min-width: 100%;

        display: none;

    }

    

    .dropdown:hover .dropdown-content, 

    .dropdown:active .dropdown-content {

        display: block;

    }

}

/* ========================================================

   MOBILE RESPONSIVENESS FIX (FOR ALL PAGES)

   ======================================================== */

@media screen and (max-width: 768px) {

    

    /* 1. Body & Screen ko bahar nikalne (Horizontal Scroll) se rokna */

    body, html {

        overflow-x: hidden;

        width: 100%;

    }



    /* 2. Headings ko Mobile ke hisaab se chota karna */

    h1 {

        font-size: 32px !important; /* Bara text chota ho jayega */

        line-height: 1.3 !important;

        margin-top: 20px !important;

    }

    h2 {

        font-size: 26px !important;

        line-height: 1.4 !important;

    }

    h3 {

        font-size: 20px !important;

    }

    p {

        font-size: 16px !important;

        line-height: 1.6 !important;

    }



    /* 3. Hero Section (First Section) ka Top margin theek karna taake text navbar ke neechay na chupe */

    .hero, .hero-section, .main-header {

        padding-top: 120px !important; /* Navbar ke liye jagah chorna */

        padding-bottom: 40px !important;

        padding-left: 15px !important;

        padding-right: 15px !important;

    }



    /* 4. Container aur Spacing Fix */

    .container {

        width: 100% !important;

        padding-left: 20px !important;

        padding-right: 20px !important;

    }



    /* 5. Agar 2 ya 3 columns hain (jaise services ya footer mein), toh unhein Mobile par ek ke neechay ek (stack) karna */

    .grid, .flex, .services-container, .footer-container {

        display: flex !important;

        flex-direction: column !important;

        gap: 20px !important;

    }



    /* 6. Buttons ko mobile par poori width (100%) ka karna taake click karna asaan ho */

    .btn-primary, .btn-secondary {

        width: 100% !important;

        text-align: center !important;

        display: block !important;

        margin-bottom: 10px !important;

    }



    /* 7. Images ko screen se bahar jane se rokna */

    img {

        max-width: 100% !important;

        height: auto !important;

    }

    /* 8. Mobile par Logo ka perfect size */

    .navbar .logo-img, 

    .navbar img {

        max-height: 55px !important; /* Aap isay 50px se 60px ke darmiyan adjust kar sakte hain */

        width: auto !important;

        margin-top: 5px !important;

    }

}
@media screen and (max-width: 768px) {
    /* Footer logo ka size fix karne ke liye */
    .footer-logo {
        max-height: 50px !important; /* Header ki tarah chota aur pyara nazar aaye ga */
        width: auto !important;
        margin-bottom: 20px !important;
    }
    
    /* Pehle wale mobile fixes bhi isi ke andar rahein ge */
    h1 { font-size: 32px !important; }
    .navbar .logo-img { max-height: 55px !important; }
}