/*
=========================================================
Twin4Bin - Premium Website CSS
Version: 1.0
=========================================================
*/

/* =========================
   1. Root Variables
========================= */
:root{
    --primary:#0D47A1;
    --primary-light:#2563EB;
    --secondary:#FF8A00;
    --danger:#E53935;
    --success:#16A34A;
    --dark:#0F172A;
    --text:#475569;
    --light:#F8FAFC;
    --white:#ffffff;
    --border:#E5E7EB;
    --radius:16px;
    --shadow-sm:0 5px 15px rgba(0,0,0,.05);
    --shadow-md:0 15px 35px rgba(0,0,0,.08);
    --shadow-lg:0 25px 60px rgba(0,0,0,.12);
}
/* =====================================================
   PREMIUM NAVBAR
===================================================== */

.navbar {
    position: fixed;
    top: 48px;
    left: 0;
    width: 100%;
    z-index: 999;

    padding: 10px 0;

    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(15, 23, 42, 0.06);

    transition:
        top 0.35s ease,
        padding 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


/* =====================================================
   CONTAINER
===================================================== */

.navbar-container {
    display: flex;
    align-items: center;
    min-height: 76px;
}


/* =====================================================
   SCROLLED NAVBAR
===================================================== */

.navbar.scrolled {
    top: 0;

    padding: 6px 0;

    background: rgba(255, 255, 255, 0.98);

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.09);
}


/* =====================================================
   LOGO
===================================================== */

.navbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    margin-right: 28px;
}


.site-logo {
    height: 68px;
    width: auto;
    max-width: 180px;
    object-fit: contain;

    transition:
        height 0.35s ease,
        transform 0.35s ease;
}


.navbar.scrolled .site-logo {
    height: 56px;
}


.site-logo:hover {
    transform: scale(1.02);
}


/* =====================================================
   COLLAPSE AREA
===================================================== */

.navbar-collapse {
    display: flex;
    align-items: center;
    min-width: 0;
}


/* =====================================================
   CENTER MENU
===================================================== */

.navbar-menu {
    display: flex;
    align-items: center;

    gap: 28px;

    margin: 0 auto;

    padding: 0;
}

/* =====================================================
   NAVIGATION ACTIVE UNDERLINE
===================================================== */

.navbar-nav .nav-link {
    position: relative;
}


.navbar-nav .nav-link::after {
    content: "";

    position: absolute;

    bottom: 1px;
    left: 50%;

    width: 0;
    height: 2px;

    border-radius: 10px;

    background: #e8a62c;

    transform: translateX(-50%);

    transition: width 0.3s ease;
}


.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 100%;
}


/* =====================================================
   MENU UNDERLINE
===================================================== */

.navbar-nav .nav-link::after {
    content: "";

    position: absolute;

    bottom: 2px;
    left: 50%;

    width: 0;
    height: 2px;

    border-radius: 20px;

    background: var(--secondary);

    transform: translateX(-50%);

    transition: width 0.3s ease;
}


.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 100%;
}

/* =====================================================
   MOBILE NAVBAR - FINAL OVERRIDE
===================================================== */

@media (max-width: 991.98px) {

    /* ================================================
       NAVBAR
    ================================================= */

    .navbar {
        top: 48px;
        padding: 6px 0;
    }


    .navbar.scrolled {
        top: 0;
        padding: 6px 0;
    }


    .navbar-container {
        min-height: 64px;
        position: relative;
    }


    /* ================================================
       LOGO
    ================================================= */

    .navbar-brand {
        margin-right: 0;
    }


    .site-logo {
        height: 56px;
        max-width: 175px;
    }


    .navbar.scrolled .site-logo {
        height: 52px;
    }


    /* ================================================
       MOBILE TOGGLER
    ================================================= */

    .navbar-toggler {
        border: 2px solid rgba(15, 23, 42, 0.55);
        border-radius: 12px;

        padding: 8px 10px;

        box-shadow: none;
    }


    .navbar-toggler:focus {
        box-shadow: none;
    }


    .navbar-toggler-icon {
        width: 1.5em;
        height: 1.5em;
    }


    /* ================================================
       COLLAPSE AREA
    ================================================= */

    .navbar-collapse {
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100%;

        margin-top: 12px;

        padding: 14px 18px 20px;

        background: #ffffff;

        border-radius: 0 0 14px 14px;

        box-shadow:
            0 18px 35px rgba(15, 23, 42, 0.12);

        max-height: calc(100vh - 125px);
        overflow-y: auto;
    }


    /* Bootstrap hidden state */

    .navbar-collapse:not(.show) {
        display: none !important;
    }


    .navbar-collapse.show {
        display: flex !important;
    }


    /* ================================================
       MENU
    ================================================= */

    .navbar-menu {
        display: flex !important;

        flex-direction: column !important;
        align-items: stretch !important;

        width: 100%;

        gap: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .navbar-menu .nav-item {
        width: 100%;
    }


    .navbar-nav .nav-link {
        display: flex;

        align-items: center;

        width: 100%;

        padding: 14px 0 !important;

        font-size: 16px;
        font-weight: 600;
    }


    /* Remove desktop active underline on mobile */

    .navbar-nav .nav-link::after {
        display: none !important;
    }


    /* Mobile active link */

    .navbar-nav .nav-link.active {
        color: var(--primary);
    }


    /* ================================================
       SERVICES DROPDOWN
    ================================================= */

    .services-dropdown {
        width: 100%;
    }


    .services-dropdown > .nav-link {
        display: flex !important;
        justify-content: space-between;
    }


    /* MAIN MOBILE DROPDOWN */

    .services-dropdown > .dropdown-menu {
        display: none !important;

        position: static !important;

        float: none !important;

        width: 100%;

        min-width: 100%;

        margin: 2px 0 10px !important;

        padding: 8px;

        border: 0;

        border-radius: 10px;

        background: #f6f8fb;

        box-shadow: none;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }


    .services-dropdown.mobile-open > .dropdown-menu {
        display: block !important;
    }


    /* ================================================
       MOBILE SUBMENU
    ================================================= */

    .dropdown-submenu {
        width: 100%;
    }


    .dropdown-submenu > .dropdown-menu {
        display: none !important;

        position: static !important;

        float: none !important;

        width: calc(100% - 12px);

        min-width: auto;

        margin: 4px 0 6px 12px !important;

        padding: 6px;

        border: 0;

        border-radius: 8px;

        background: #eef2f7;

        box-shadow: none;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }


    .dropdown-submenu.mobile-open > .dropdown-menu {
        display: block !important;
    }


    /* Dropdown items */

    .services-dropdown .dropdown-item {
        display: flex;

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

        width: 100%;

        padding: 11px 12px;

        border-radius: 8px;

        white-space: normal;

        font-size: 14px;

        color: #374151;
    }


    /* ================================================
       ACTION BUTTON AREA
       IMPORTANT: ALWAYS BELOW MENU
    ================================================= */

    .header-login-actions {
        display: grid !important;

        grid-template-columns: 1fr !important;

        width: 100% !important;

        margin: 16px 0 0 !important;

        padding: 16px 0 0 !important;

        gap: 10px !important;

        border-top: 1px solid #e5e7eb;

        flex: none !important;

        order: 2;
    }


    /* Every button full width */

    .header-login-actions .btn {
        display: flex !important;

        align-items: center;
        justify-content: center;

        width: 100% !important;

        min-width: 0 !important;

        min-height: 48px;

        margin: 0 !important;

        padding: 12px 18px !important;

        border-radius: 10px;

        white-space: nowrap;
    }


    /* ================================================
       MENU MUST ALWAYS STAY ABOVE BUTTONS
    ================================================= */

    .navbar-menu {
        order: 1;
    }


    /* ================================================
       MOBILE BUTTON COLORS
    ================================================= */

    .btn-track-application {
        background: linear-gradient(
            135deg,
            #218c45,
            #167338
        );

        color: #ffffff;
    }


    .btn-track-application:hover {
        background: linear-gradient(
            135deg,
            #2da35a,
            #1b8744
        );

        color: #ffffff;
    }


    .btn-customer-login {
        background: linear-gradient(
            135deg,
            #f6c453,
            #e8a62c
        );

        color: #1f2937;
    }


    .btn-customer-login:hover {
        background: linear-gradient(
            135deg,
            #ffd56f,
            #f0ad36
        );

        color: #1f2937;
    }


    .btn-login {
        background: linear-gradient(
            135deg,
            #244a7c,
            #18355d
        );

        color: #ffffff;
    }


    .btn-login:hover {
        background: linear-gradient(
            135deg,
            #32609c,
            #214675
        );

        color: #ffffff;
    }

    /* PARTNER REGISTRATION */
    .btn-partner {
        background: linear-gradient(135deg, #FF8A00, #F97316);
        color: #ffffff;
        border: none;
    }

    .btn-partner:hover {
        background: linear-gradient(135deg, #F97316, #EA580C);
        color: #ffffff;
    }
}

/* =====================================================
   HEADER ACTIONS
===================================================== */

.header-login-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-left: 24px;

    flex-shrink: 0;
}


.header-login-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    border: 0;
    border-radius: 10px;

    padding: 10px 14px;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}


.header-login-actions .btn:hover {
    transform: translateY(-2px);
}

/* =========================
   2. Reset
========================= */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Manrope',sans-serif;
    font-size:16px;
    font-weight:500;
    line-height:1.75;
    color:var(--text);
    background:var(--light);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

/* Global Links */

a{

    color:inherit;

    text-decoration:none;

    transition:color .3s ease;

}

/* Normal content links */

main a:hover,
footer a:hover{

    color:var(--primary);

}

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

section{
    position:relative;
    padding:80px 0;
}

.container{
    position:relative;
}
/* =========================
   Typography
========================= */

h1,h2,h3,h4,h5,h6{

    color:var(--dark);

    font-weight:800;

    letter-spacing:-0.5px;

    line-height:1.2;

    margin-bottom:20px;

}

h1{

    font-size:58px;

}

h2{

    font-size:44px;

}

h3{

    font-size:32px;

}

h4{

    font-size:26px;

}

h5{

    font-size:22px;

}

h6{

    font-size:18px;

}

p{

    font-size:16px;

    font-weight:500;

    color:#64748B;

    line-height:1.9;

    margin-bottom:18px;

}

.section-title{

    font-size:44px;

    font-weight:800;

    color:var(--dark);

    margin-bottom:18px;

}

.section-subtitle{

    font-size:17px;

    color:#64748B;

    max-width:720px;

    margin:0 auto 45px;

    line-height:1.9;

}

/* =========================
   Buttons
========================= */
.btn-theme{
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:#fff;
    border:none;
    border-radius:50px;
    padding:14px 34px;
    font-weight:700;
    box-shadow:var(--shadow-md);
}
.btn-theme:hover{transform:translateY(-3px);color:#fff}

.btn-outline-theme{
    border:2px solid var(--primary);
    color:var(--primary);
    border-radius:50px;
    padding:12px 30px;
    font-weight:700;
}
.btn-outline-theme:hover{
    background:var(--primary);
    color:#fff;
}

/* =========================
   Top Bar
========================= */

.top-bar{

    background:linear-gradient(90deg,#0D47A1,#1565C0);

    color:#fff;

    padding:10px 0;

    font-size:14px;

}

.top-contact a,
.top-social a{

    color:#fff;

    text-decoration:none;

    transition:all .3s ease;

}

.top-contact a{

    margin-right:20px;

}

.top-social a{

    margin-left:14px;

    font-size:16px;

}

/* Hover */

.top-contact a:hover,
.top-social a:hover{

    color:var(--secondary);

}
.top-contact a i{

    margin-right:6px;

    transition:.3s;

}

.top-contact a:hover i{

    transform:rotate(-10deg);

}

/* =========================
   Header
========================= */
.navbar{
    background:#fff;
    margin-top:2px;
    border-radius:5px;
    box-shadow:var(--shadow-sm);
    padding:0px 0;
}
.site-logo{height:78px}
.navbar-nav .nav-link{
    color:#334155;
    font-weight:700;
    padding:12px 18px;
    border-radius:10px;
}
.navbar-nav .nav-link:hover{
    color:var(--primary);
}
.btn-login{

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

    color:#fff;

    padding:13px 28px;

    border-radius:40px;

    font-weight:700;

    transition:.35s;

    box-shadow:0 10px 25px rgba(13,71,161,.18);

}

.btn-login:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 20px 35px rgba(13,71,161,.25);

}

    /* PARTNER REGISTRATION */
    .btn-partner {
        background: linear-gradient(135deg, #FF8A00, #F97316);
        color: #ffffff;
        border: none;
    }

    .btn-partner:hover {
        background: linear-gradient(135deg, #F97316, #EA580C);
        color: #ffffff;
    }

 
/*=========================================================
 HERO SECTION
=========================================================*/

.hero{

    position:relative;

    overflow:hidden;

    padding:107px 0 28px;

    background:linear-gradient(135deg,#F7FAFF 0%,#EEF5FF 50%,#FFFFFF 100%);

}

/* Background Shapes */

.hero::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:rgba(13,71,161,.05);

    border-radius:50%;

    top:-180px;

    right:-120px;

}

.hero::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    background:rgba(255,138,0,.08);

    border-radius:50%;

    bottom:-80px;

    left:-80px;

}

/* Left Content */

.hero-badge{

    display:inline-block;

    background:#EAF3FF;

    color:var(--primary);

    padding:10px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}

.hero-title{

    font-size:58px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:25px;

    color:var(--dark);

}

.hero-title span{

    color:var(--primary);

}

.hero-desc{

    font-size:18px;

    color:#64748B;

    max-width:560px;

    line-height:1.9;

}

/* Buttons */

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    min-width:180px;

}

/*=========================================
 Hero Trust
=========================================*/

.hero-trust{

    display:flex;

    align-items:center;

    gap:30px;

    margin-top:45px;

    flex-wrap:nowrap;      /* Keep everything in one row */

}

.trust-item{

    display:flex;

    align-items:center;

    white-space:nowrap;    /* Prevent text from breaking */

    font-size:17px;

    font-weight:600;

    color:#334155;

}

.trust-item i{

    width:46px;

    height:46px;

    min-width:46px;

    border-radius:50%;

    background:#ffffff;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-right:12px;

    box-shadow:0 8px 20px rgba(13,71,161,.10);

    transition:.3s;

}

.trust-item:hover i{

    background:var(--primary);

    color:#fff;

    transform:translateY(-3px);

}

/*=========================================================
 Illustration
=========================================================*/

.hero-illustration{

    position:relative;

    text-align:center;

}

.hero-illustration img{

    max-width:95%;

    animation:floatImage 5s ease-in-out infinite;

}

/* Floating Cards */

.floating-card{

    position:absolute;

    background:#fff;

    border-radius:16px;

    padding:14px 18px;

    box-shadow:var(--shadow-lg);

    font-weight:700;

    color:#334155;

    display:flex;

    align-items:center;

    gap:10px;

    animation:floatCard 4s ease-in-out infinite;

}

.floating-card i{

    color:var(--primary);

    font-size:22px;

}

.card-one{

    top:40px;

    left:-10px;

}

.card-two{

    bottom:70px;

    right:0;

}

.card-three{

    top:55%;

    left:20px;

}

/*=========================================================
 Stats
=========================================================*/

.hero-stats{

    margin-top:-120px;

    position:relative;

    z-index:50;

}

.hero-stats .container{

    background:#fff;

    border-radius:20px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    padding:45px 25px;

}

.hero-stats h2{

    color:var(--primary);

    font-size:42px;

    margin-bottom:10px;

}

.hero-stats p{

    margin:0;

    font-weight:600;

    color:#64748B;

}

/*=========================================================
 Animation
=========================================================*/

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================================================
 Responsive
=========================================================*/

@media(max-width:991px){

.hero{

padding:120px 0 70px;

}

.hero-title{

font-size:42px;

text-align:center;

}

.hero-desc{

text-align:center;

max-width:100%;

}

.hero-badge{

display:table;

margin:0 auto 25px;

}

.hero-buttons{

justify-content:center;

}

.hero-trust{

justify-content:center;

}

.hero-illustration{

margin-top:60px;

}

.floating-card{

display:none;

}

.hero-stats{

margin-top:50px;

}

}

@media(max-width:576px){

.hero-title{

font-size:34px;

}

.hero-desc{

font-size:16px;

}

.hero-buttons .btn{

width:100%;

}

.hero-stats h2{

font-size:32px;

}

.hero-stats .col-6{

margin-bottom:25px;

}

}
/*=========================================================
 Features Box
=========================================================*/
.feature-box{

    text-align:center;

    display:block;

    padding:40px 25px;

    background:#fff;

    border-radius:18px;

    gap:20px;

    transition:.35s;

    box-shadow:var(--shadow-sm);

    height:100%;

}
.feature-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.feature-icon{

    margin:0 auto 25px;
    border-radius:18px;
    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:30px;

    flex-shrink:0;

}

.feature-content h4{

    font-size:20px;

    margin-bottom:12px;

}

.feature-content p{

    font-size:15px;

    line-height:1.7;

}

/* =========================
   Cards
========================= */
.card-theme{
    background:#fff;
    border:none;
    border-radius:18px;
    box-shadow:var(--shadow-sm);
    transition:.35s;
}
.card-theme:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}

/*=========================================================
 SERVICES SECTION
=========================================================*/

.services-section{
    padding:25px 0;
    background:#fff;
    position:relative;
}

.services-section .section-title{
    margin-bottom:15px;
}

.services-section .section-subtitle{
    max-width:650px;
    margin:0 auto 50px;
}

.service-card{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:22px;
    padding:35px 25px;
    text-align:center;
    height:100%;
    transition:.35s ease;
    box-shadow:0 8px 25px rgba(0,0,0,.04);
    position:relative;
    overflow:hidden;
}

.service-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.service-card:hover::before{
    transform:scaleX(1);
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(13,71,161,.12);
}

.service-card .icon{
    width:85px;
    height:85px;
    margin:0 auto 25px;
    border-radius:24px;
    background:#eef5ff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
}

.service-card .icon i{
    font-size:38px;
    color:var(--primary);
}

.service-card:hover .icon{
    background:var(--primary);
    transform:rotate(-8deg);
}

.service-card:hover .icon i{
    color:#fff;
}

.service-card h4{
    font-size:22px;
    margin-bottom:12px;
}

.service-card p{
    min-height:55px;
    margin-bottom:25px;
}

.service-card .btn{
    border-radius:40px;
}

@media(max-width:991px){
    .services-section{
        padding:80px 0;
    }
}

@media(max-width:576px){
    .service-card{
        padding:28px 20px;
    }

    .service-card h4{
        font-size:20px;
    }
}

/* =========================================================
   SERVICES DROPDOWN - COMPLETE SYSTEM
========================================================= */

.services-dropdown,
.dropdown-submenu {
    position: relative;
}


/* =========================================================
   SERVICES MAIN LINK
========================================================= */

.services-dropdown > .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* Custom dropdown arrow */

.service-dropdown-icon {
    font-size: 10px;
    line-height: 1;

    transition: transform 0.25s ease;
}


/* Rotate main arrow */

.services-dropdown:hover > .nav-link .service-dropdown-icon {
    transform: rotate(180deg);
}


/* =========================================================
   DESKTOP DROPDOWN
========================================================= */

@media (min-width: 992px) {

    /* =====================================================
       LEVEL 1 DROPDOWN
    ===================================================== */

    .services-dropdown > .dropdown-menu {
        display: block !important;

        position: absolute;

        /*
         * IMPORTANT:
         * No top gap between Services and dropdown
         */
        top: 100%;
        left: 50%;

        min-width: 240px;

        margin: 0;
        padding: 8px;

        border: 0;
        border-radius: 14px;

        background: #ffffff;

        opacity: 0;
        visibility: hidden;

        transform:
            translateX(-50%)
            translateY(6px);

        pointer-events: none;

        z-index: 1050;

        box-shadow:
            0 15px 40px rgba(15, 23, 42, 0.14);

        transition:
            opacity 0.22s ease,
            visibility 0.22s ease,
            transform 0.22s ease;
    }


    /* Keep dropdown open */

    .services-dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;

        transform:
            translateX(-50%)
            translateY(0);

        pointer-events: auto;
    }


    /* =====================================================
       HOVER BRIDGE - LEVEL 1
       Prevents dropdown disappearing while mouse moves down
    ===================================================== */

    .services-dropdown > .dropdown-menu::before {
        content: "";

        position: absolute;

        top: -12px;
        left: 0;

        width: 100%;
        height: 12px;

        background: transparent;
    }


    /* =====================================================
       DROPDOWN ITEMS
    ===================================================== */

    .services-dropdown .dropdown-item {
        display: flex;
        align-items: center;

        width: 100%;

        padding: 11px 14px;

        border-radius: 8px;

        font-size: 14px;
        font-weight: 500;

        color: #374151;

        white-space: nowrap;

        text-decoration: none;

        transition:
            background 0.2s ease,
            color 0.2s ease;
    }


    .services-dropdown .dropdown-item:hover {
        background: #f1f5ff;
        color: #1554c0;
    }


    /* =====================================================
       LEVEL 2 SUBMENU
    ===================================================== */

    .dropdown-submenu > .dropdown-menu {
        display: block !important;

        position: absolute;

        /*
         * IMPORTANT:
         * NO left gap
         */
        top: -8px;
        left: 100%;

        min-width: 240px;

        margin: 0;
        padding: 8px;

        border: 0;
        border-radius: 14px;

        background: #ffffff;

        opacity: 0;
        visibility: hidden;

        transform: translateX(6px);

        pointer-events: none;

        z-index: 1060;

        box-shadow:
            0 15px 40px rgba(15, 23, 42, 0.14);

        transition:
            opacity 0.22s ease,
            visibility 0.22s ease,
            transform 0.22s ease;
    }


    /* Open level 2 */

    .dropdown-submenu:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;

        transform: translateX(0);

        pointer-events: auto;
    }


    /* =====================================================
       HOVER BRIDGE - LEVEL 2
       This is the important fix for your second dropdown
    ===================================================== */

    .dropdown-submenu > .dropdown-menu::before {
        content: "";

        position: absolute;

        top: 0;
        left: -12px;

        width: 12px;
        height: 100%;

        background: transparent;
    }


    /* =====================================================
       SUBMENU ITEM WITH ARROW
    ===================================================== */

    .dropdown-submenu > .dropdown-item {
        justify-content: space-between;
    }


    /* Optional right arrow */

    .dropdown-submenu > .dropdown-item::after {
        content: "›";

        margin-left: 15px;

        font-size: 20px;
        line-height: 1;

        color: #64748b;
    }


    /* Hide Bootstrap default caret if present */

    .dropdown-submenu > .dropdown-item.dropdown-toggle::after {
        content: "›";

        border: 0;

        width: auto;
        height: auto;

        margin-left: 15px;

        font-size: 20px;
        line-height: 1;

        color: #64748b;
    }


    /* =====================================================
       LEVEL 3
       Same behavior automatically works for nested submenu
    ===================================================== */

    .dropdown-submenu .dropdown-submenu > .dropdown-menu {
        top: -8px;
        left: 100%;
    }


    /* =====================================================
       DIVIDER
    ===================================================== */

    .services-dropdown .dropdown-divider {
        margin: 7px 4px;

        border-color: #e5e7eb;
    }


    /* =====================================================
       VIEW ALL SERVICES
    ===================================================== */

    .view-all-services {
        color: #1554c0 !important;
        font-weight: 600 !important;
    }

}


/*=========================================================
 ABOUT SECTION
=========================================================*/

.about-section{

    position:relative;

    padding:110px 0;

    background:#fff;

    overflow:hidden;

}

/* Background Shape */

.about-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:linear-gradient(135deg,#EEF5FF,#FFFFFF);

    border-radius:50%;

    top:-250px;

    right:-180px;

    z-index:0;

}

.about-section .container{

    position:relative;

    z-index:2;

}

/*=========================================================
Image
=========================================================*/

.about-image{

    position:relative;

    padding-right:30px;

}

.about-image img{

    width:100%;

    border-radius:30px;

    box-shadow:0 30px 70px rgba(15,23,42,.12);

    transition:.5s;

}

.about-image:hover img{

    transform:translateY(-8px);

}

/* Floating Badge */

.about-image::after{

    content:"250+ Services";

    position:absolute;

    bottom:35px;

    right:0;

    background:#fff;

    color:var(--primary);

    font-weight:700;

    padding:14px 22px;

    border-radius:50px;

    box-shadow:0 20px 40px rgba(13,71,161,.12);

}

/*=========================================================
Content
=========================================================*/

.about-section .hero-badge{

    margin-bottom:20px;

}

.about-section .section-title{

    font-size:35px;

    line-height:1.15;

    margin-bottom:25px;

    max-width:620px;

}

.about-section p{

    font-size:17px;

    color:#64748B;

    line-height:1.9;

    max-width:560px;

    margin-bottom:20px;

}

/*=========================================================
Feature Points
=========================================================*/

.about-point{

    display:flex;

    align-items:center;

    gap:14px;

    background:#fff;

    padding:18px 22px;

    border-radius:18px;

    border:1px solid #EEF2F7;

    box-shadow:0 12px 25px rgba(0,0,0,.04);

    transition:.35s;

    font-size:16px;

    font-weight:700;

}

.about-point i{

    width:40px;

    height:40px;

    min-width:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#E8FFF1;

    color:#16A34A;

    font-size:18px;

}

.about-point:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(13,71,161,.10);

}

/*=========================================================
Buttons
=========================================================*/

.about-buttons{

    display:flex;

    gap:15px;

    margin-top:40px;

}

.about-buttons .btn{

    min-width:170px;

}

/*=========================================================
Responsive
=========================================================*/

@media(max-width:991px){

.about-section{

padding:80px 0;

}

.about-image{

padding-right:0;

margin-bottom:50px;

}

.about-image::after{

right:20px;

bottom:20px;

}

.about-section .section-title{

font-size:40px;

}

}

@media(max-width:576px){

.about-section .section-title{

font-size:32px;

}

.about-section p{

font-size:16px;

}

.about-image::after{

display:none;

}

.about-point{

font-size:15px;

padding:16px;

}

}


/*=========================================================
 WHY CHOOSE US
=========================================================*/
.why-section{
    padding:80px 0;
    background:#fff;
}
.why-card{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:22px;
    padding:35px 28px;
    text-align:center;
    height:100%;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.04);
}
.why-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(13,71,161,.10);
}
.why-icon{
    width:80px;
    height:80px;
    margin:0 auto 20px;
    border-radius:50%;
    background:#eef5ff;
    display:flex;
    align-items:center;
    justify-content:center;
}
.why-icon i{
    font-size:34px;
    color:var(--primary);
}
.why-card h4{
    font-size:22px;
    margin-bottom:12px;
}
@media(max-width:991px){
.why-section{padding:80px 0;}
}
/* =========================
   Counter
========================= */
.counter{
    background:var(--primary);
    color:#fff;
    border-radius:18px;
    padding:50px 20px;
}
.counter h2{color:#fff}

/* =========================
   CTA Banner
========================= */
.cta-banner{
    background:linear-gradient(135deg,var(--primary),#0b63ce);
    color:#fff;
    border-radius:22px;
    padding:60px;
}

/* =========================
   Testimonials
========================= */
.testimonial{
    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:var(--shadow-sm);
}

/*=========================================================
PROCESS SECTION
=========================================================*/
.process-section{
    padding:80px 0;
    background:linear-gradient(180deg,#f8fbff,#ffffff);
}
.process-card{
    position:relative;
    background:#fff;
    border-radius:22px;
    padding:35px 25px;
    text-align:center;
    height:100%;
    border:1px solid #edf2f7;
    box-shadow:0 10px 25px rgba(0,0,0,.04);
    transition:.35s;
}
.process-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(13,71,161,.10);
}
.process-number{
    position:absolute;
    top:18px;
    right:18px;
    font-size:42px;
    font-weight:800;
    color:#eef3fb;
}
.process-icon{
    width:80px;
    height:80px;
    margin:0 auto 20px;
    border-radius:50%;
    background:#eef5ff;
    display:flex;
    align-items:center;
    justify-content:center;
}
.process-icon i{
    font-size:34px;
    color:var(--primary);
}
.process-card h4{margin-bottom:12px;}
@media(max-width:991px){
.process-section{padding:80px 0;}
}

/*=========================================================
COUNTER
=========================================================*/

.counter-section{

    padding:120px 0;

    background:linear-gradient(135deg,#0D47A1,#1565C0);

}

.counter-wrapper{

    border-radius:25px;

}

.counter-box{

    color:#fff;

    padding:30px;

}

.counter-box i{

    font-size:55px;

    color:#fff;

    margin-bottom:20px;

}

.counter-box h2{

    font-size:52px;

    font-weight:800;

    color:#fff;

    margin-bottom:10px;

}

.counter-box p{

    color:rgba(255,255,255,.9);

    font-size:18px;

    margin:0;

}


/*=========================================================
TESTIMONIAL SECTION
=========================================================*/
.testimonial-section{
    padding:80px 0;
    background:#fff;
}
.testimonial-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    border:1px solid #edf2f7;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    width:100%;

    height:100%;

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-8px);

}
.testimonialSwiper{

    overflow:hidden;

    padding:20px 5px 60px;

}

.testimonialSwiper .swiper-slide{

    height:auto;

    display:flex;

}

.testimonial-card{

    width:100%;

}
.stars{
color:#f59e0b;
margin-bottom:20px;
}
.client{
display:flex;
align-items:center;
margin-top:25px;
gap:15px;
}
.avatar{
width:58px;
height:58px;
border-radius:50%;
background:var(--primary);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:22px;
}
.client h5{margin:0;}
.client span{font-size:14px;color:#64748B;}
@media(max-width:991px){
.testimonial-section{padding:80px 0;}
}
/*==========================
PAGE BANNER
==========================*/

.page-banner{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 100%);
}

.page-banner .container{
    position:relative;
    z-index:2;
}

.page-banner h1{
    font-size:52px;
    font-weight:700;
    color:#12213d;
    margin:15px 0;
}

.page-banner p{
    font-size:17px;
    color:#5d6b82;
    max-width:700px;
    line-height:30px;
    margin-bottom:20px;
}

.page-breadcrumb{
    margin-bottom:20px;
}

.page-breadcrumb a{
    color:#0d6efd;
    text-decoration:none;
    font-weight:600;
}

.page-breadcrumb span{
    margin:0 10px;
    color:#9aa7b8;
}

.page-breadcrumb strong{
    color:#12213d;
    font-weight:700;
}

.banner-icon{
    text-align:center;
    animation:bannerFloat 4s ease-in-out infinite;
}

.banner-icon img{
    max-width:280px;
}

.banner-shape{
    position:absolute;
    border-radius:50%;
}

.shape-1{
    width:320px;
    height:320px;
    background:rgba(13,110,253,.08);
    top:-120px;
    right:-80px;
}

.shape-2{
    width:180px;
    height:180px;
    background:rgba(255,153,0,.10);
    bottom:-70px;
    left:-60px;
}

@keyframes bannerFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0px);
    }

}

@media(max-width:991px){

    .page-banner{
        padding:70px 0;
        text-align:center;
    }

    .page-banner h1{
        font-size:38px;
    }

    .page-banner p{
        font-size:16px;
    }

}

.banner-service-icon{
    width:220px;
    height:220px;
    object-fit:contain;
    filter:drop-shadow(0 20px 30px rgba(0,0,0,.12));
    animation:bannerFloat 4s ease-in-out infinite;
}

.banner-default-icon{
    font-size:170px;
    color:#0d6efd;
    opacity:.12;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 22px;
    border-radius:50px;
    background:#eaf3ff;
    color:#0d6efd;
    font-weight:600;
    font-size:15px;
    margin-bottom:20px;
}

.hero-badge i{
    font-size:16px;
}
.page-banner-wave{
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    line-height:0;
    z-index:1;
}

.page-banner-wave svg{
    width:100%;
    height:70px;
    display:block;
}
.service-card{
    height:100%;
    padding:35px 25px;
}

.service-card h4{
    min-height:70px;
}

.service-desc{
    margin:20px 0;
    color:#6c757d;
    line-height:28px;
}

.price-card{
    background:linear-gradient(135deg,#0ea5b7,#0f8aa6);
    color:#fff;
    border-radius:18px;
    padding:28px;
    margin-top:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.price-card h5{
    font-weight:700;
    margin-bottom:20px;
}

.price-amount{
    font-size:54px;
    font-weight:700;
    letter-spacing:1px;
    text-shadow:0 2px 10px rgba(0,0,0,.15);
}

.price-card hr{
    opacity:.25;
}

.price-list{
    list-style:none;
    padding:0;
    margin:0;
}

.price-list li{
    margin:12px 0;
}

.price-list i{
    color:#b8ffb8;
    margin-right:10px;
}

.success-icon{

    width:120px;

    height:120px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e9f9ef;

}

.success-icon i{

    font-size:65px;

    color:#22c55e;

}

.table th{

    color:#555;

    font-weight:600;

}

.table td{

    font-weight:500;

}

/*=========================================================
FOOTER
=========================================================*/
.footer{
background:#081A34;
color:#d7deef;
padding:90px 0 20px;
}
.footer h5{
color:#fff;
margin-bottom:20px;
}
.footer p{
color:#cfd8e6;
}
.footer ul{
padding:0;
margin:0;
}
.footer li{
margin-bottom:12px;
}
.footer a{
color:#cfd8e6;
transition:.3s;
}
.footer a:hover{
color:#fff;
padding-left:4px;
}
.footer-social{
display:flex;
gap:12px;
margin-top:20px;
}
.footer-social a{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.08);
border-radius:50%;
font-size:18px;
}
.footer-social a:hover{
background:var(--primary);
padding-left:0;
}
.footer-bottom{
margin-top:50px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.08);
font-size:15px;
}

/* =========================
   Utilities
========================= */
.bg-white{background:#fff}
.radius{border-radius:var(--radius)}
.shadow-theme{box-shadow:var(--shadow-md)}
.text-primary-theme{color:var(--primary)}
.mt-80{margin-top:80px}
.mb-80{margin-bottom:80px}

/* =========================
   Responsive
========================= */
@media (max-width:991px){
    h1{font-size:40px}
    h2{font-size:34px}
    section{padding:60px 0}
    .site-logo{height:58px}
    .navbar-nav{padding-top:20px}
    .btn-login{margin-top:15px;display:inline-block}
    .top-contact,.top-social{text-align:center}
}
@media (max-width:576px){
    h1{font-size:32px}
    h2{font-size:28px}
    .hero{padding:70px 0}
    .section-title{font-size:30px}
}
/* =====================================================
   HEADER ACTION BUTTONS
===================================================== */

.header-login-actions {
    flex-wrap: nowrap;
}

/* =====================================================
   TRACK APPLICATION - GREEN
===================================================== */

.btn-track-application {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #28a745,
        #16883a
    );

    color: #ffffff;

    border: 1px solid transparent;
    border-radius: 10px;

    padding: 10px 16px;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    box-shadow: 0 5px 15px rgba(22, 136, 58, 0.28);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.btn-track-application:hover {
    background: linear-gradient(
        135deg,
        #3fc85f,
        #20a046
    );

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 9px 24px rgba(22, 136, 58, 0.42);
}


/* =====================================================
   CUSTOMER LOGIN - GOLD
===================================================== */

.btn-customer-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #f6c453,
        #e8a62c
    );

    color: #18261f;

    border: 1px solid transparent;
    border-radius: 10px;

    padding: 10px 17px;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    box-shadow: 0 5px 15px rgba(232, 166, 44, 0.28);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.btn-customer-login:hover {
    background: linear-gradient(
        135deg,
        #ffd56f,
        #f0ad36
    );

    color: #111111;

    transform: translateY(-2px);

    box-shadow: 0 9px 24px rgba(232, 166, 44, 0.42);
}


/* =====================================================
   AGENT LOGIN - NAVY BLUE
===================================================== */

.btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #1f4e8c,
        #102f5e
    );

    color: #ffffff;

    border: 1px solid transparent;
    border-radius: 10px;

    padding: 10px 16px;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    box-shadow: 0 5px 15px rgba(16, 47, 94, 0.28);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.btn-login:hover {
    background: linear-gradient(
        135deg,
        #2d65ad,
        #174582
    );

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 9px 24px rgba(16, 47, 94, 0.42);
}