/* =========================================================
   TOPBAR
========================================================= */

.topbar{
    position:relative;
    z-index:1030;

    background:var(--brand-secondary);
    color:#fff;

    border-bottom:1px solid rgba(255,255,255,.08);

    font-size:.875rem;
}

.topbar .container{
    min-height:42px;

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

    gap:1rem;
}

.topbar-left,
.topbar-right{
    display:flex;
    align-items:center;
    gap:1rem;
}

.topbar-right a{
    color:#fff;
    text-decoration:none;

    transition:var(--transition);
}

.topbar-right a:hover{
    color:var(--brand-accent);
}

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

.navbar-app{

    position:sticky;
    top:0;

    z-index:1035;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid var(--border);

    transition:all .3s ease;

    min-height:84px;
}

html[data-theme="dark"] .navbar-app{

    background:rgba(17,24,39,.92);
}

.navbar-app.scrolled{

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

    border-color:
        rgba(200,29,79,.10);
}

/* =========================================================
   BRAND
========================================================= */

.navbar-brand{

    padding:.5rem 0;

    display:flex;
    align-items:center;
}

.navbar-brand img{

    height:58px;

    width:auto;

    transition:.3s;
}

.navbar-app.scrolled .navbar-brand img{

    height:52px;
}

/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav{

    width:100%;

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

    margin-left:2rem;
}

.navbar-nav{

    display:flex;
    align-items:center;

    gap:.35rem;
}

.nav-link{

    color:var(--text);

    font-weight:600;

    padding:.9rem 1rem !important;

    border-radius:14px;

    position:relative;

    transition:var(--transition);
}

.nav-link:hover{

    color:var(--brand-primary);

    background:rgba(200,29,79,.06);
}

.nav-link.active{

    color:var(--brand-primary);

    background:rgba(200,29,79,.08);
}

.nav-link.active::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:6px;

    width:22px;
    height:3px;

    transform:translateX(-50%);

    border-radius:50px;

    background:var(--brand-primary);
}

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

.nav-actions{

    display:flex;
    align-items:center;
    gap:1rem;
}

.theme-toggle-btn{

    width:48px;
    height:48px;

    border:none;

    border-radius:14px;

    background:var(--bg-soft);

    color:var(--text);

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

    transition:var(--transition);
}

.theme-toggle-btn:hover{

    color:var(--brand-primary);

    background:
        rgba(200,29,79,.08);
}

/* =========================================================
   MOBILE ACTIONS
========================================================= */

.mobile-actions{

    display:flex;
    align-items:center;

    gap:.75rem;
}

.navbar-toggler{

    width:48px;
    height:48px;

    border:none;

    border-radius:14px;

    background:var(--bg-soft);

    color:var(--text);

    display:flex;
    align-items:center;
    justify-content:center;
}

.navbar-toggler i{

    font-size:1.4rem;
}

/* =========================================================
   OFFCANVAS
========================================================= */

.offcanvas{

    width:320px !important;

    background:var(--bg);

    z-index:1080;
}

.offcanvas-backdrop{

    z-index:1075;
}

.offcanvas-header{

    border-bottom:1px solid var(--border);
}

.mobile-nav{

    display:flex;
    flex-direction:column;

    gap:.5rem;
}

.mobile-nav a{

    display:flex;
    align-items:center;

    gap:.75rem;

    padding:1rem;

    border-radius:14px;

    text-decoration:none;

    color:var(--text);

    font-weight:600;

    transition:var(--transition);
}

.mobile-nav a:hover{

    color:var(--brand-primary);

    background:
        rgba(200,29,79,.08);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:991.98px){

    .topbar{
        display:none;
    }

    .navbar-brand img{
        height:50px;
    }

    .navbar-app{
        min-height:72px;
    }
}

@media (max-width:575.98px){

    .navbar-brand img{
        height:42px;
    }

    .offcanvas{
        width:100% !important;
    }

    .theme-toggle-btn,
    .navbar-toggler{

        width:44px;
        height:44px;
    }
}

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

.hero{
    position:relative;

    overflow:hidden;

    padding:5rem 0 5rem;

    background:var(--hero-grad);

    color:#fff;

    min-height:700px;

    display:flex;
    align-items:center;
}

/* Background Decorations */

.hero::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-150px;
    right:-150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,138,61,.15),
            transparent 70%
        );

    pointer-events:none;
}

.hero::after{
    content:"";

    position:absolute;

    width:350px;
    height:350px;

    left:-120px;
    bottom:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.08),
            transparent 70%
        );

    pointer-events:none;
}

/* =========================================================
   CONTENT
========================================================= */

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

.hero .badge{

    background:rgba(255,255,255,.15) !important;

    color:#fff !important;

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(8px);

    padding:.7rem 1rem;

    font-weight:600;

    border-radius:999px;

    letter-spacing:.03em;
}

.hero h1{

    font-size:clamp(2.5rem,5vw,3.5rem);

    line-height:1.1;

    font-weight:800;

    margin-bottom:1.25rem;

    color:#fff;
}

.hero .lead{

    max-width:650px;

    font-size:1.15rem;

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

    margin-bottom:2rem;
}

/* =========================================================
   BUTTONS
========================================================= */

.hero .btn-brand{

    min-height:58px;

    padding:0 2rem;

    font-weight:700;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--brand-accent),
            #ff6f1f
        );

    border:none;

    color:#fff;

    transition:.35s ease;
}

.hero .btn-brand:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 24px rgba(255,138,61,.35);
}

.hero .btn-outline-light{

    min-height:58px;

    padding:0 2rem;

    border-radius:14px;

    border:2px solid rgba(255,255,255,.25);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    transition:.35s ease;
}

.hero .btn-outline-light:hover{

    background:#fff;

    color:var(--brand-primary);

    border-color:#fff;
}

/* =========================================================
   QUICK FORM CARD
========================================================= */

.hero-form{

    background:rgba(255,255,255,.96);

    border-radius:24px;

    padding:2rem;

    box-shadow:
        0 30px 60px rgba(0,0,0,.18);

    position:relative;

    overflow:hidden;
}

.hero-form::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:
        linear-gradient(
            90deg,
            var(--brand-primary),
            var(--brand-accent)
        );
}

.hero-form h5{

    color:var(--brand-secondary);

    font-size:1.35rem;

    margin-bottom:1.5rem;
}

.hero-form .form-label{

    font-weight:600;

    color:var(--brand-secondary);

    margin-bottom:.5rem;
}

.hero-form .form-control,
.hero-form .form-select{

    min-height:54px;

    border:1px solid var(--brand-border);

    border-radius:14px;

    padding:0 .9rem;

    transition:.3s;
}

.hero-form .form-control:focus,
.hero-form .form-select:focus{

    border-color:var(--brand-primary);

    box-shadow:
        0 0 0 .25rem rgba(200,29,79,.15);
}

.hero-form .btn-brand{

    min-height:56px;

    border-radius:14px;
}

/* =========================================================
   STATS
========================================================= */

.hero-stats{

    display:flex;

    gap:2rem;

    margin-top:2rem;
}

.hero-stat strong{

    display:block;

    font-size:1.8rem;

    font-weight:800;

    color:#fff;
}

.hero-stat span{

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

    font-size:.95rem;
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .hero-form{

    background:var(--brand-surface);

    color:var(--brand-text);
}

html[data-theme="dark"] .hero-form h5,
html[data-theme="dark"] .hero-form .form-label{

    color:var(--brand-text);
}

html[data-theme="dark"] .hero-form .form-control,
html[data-theme="dark"] .hero-form .form-select{

    background:#0f172a;

    border-color:var(--brand-border);

    color:var(--brand-text);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:991.98px){

    .hero{

        text-align:center;

        min-height:auto;

        padding:5rem 0;
    }

    .hero .lead{

        margin-left:auto;
        margin-right:auto;
    }

    .hero-form{

        margin-top:2rem;
    }

    .hero-stats{

        justify-content:center;
    }
}

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

@media (max-width:575.98px){

    .hero{

        padding:4rem 0;
    }

    .hero h1{

        font-size:2.2rem;
    }

    .hero .lead{

        font-size:1rem;
    }

    .hero .btn{

        width:100%;
    }

    .hero-form{

        padding:1.5rem;
    }

    .hero-stats{

        flex-direction:row;

        gap:1rem;
    }
}
/**/
/* =========================================================
   MICRO ABOUT SECTION
========================================================= */

.about-mini{

    padding:100px 0;

    background:var(--bg);
}

.about-mini-image{

    position:relative;

    border-radius:24px;

    overflow:hidden;

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

.about-mini-image img{

    width:100%;

    height:100%;

    min-height:420px;

    object-fit:cover;

    display:block;
}

.about-mini-badge{

    position:absolute;

    left:20px;
    bottom:20px;

    background:#fff;

    padding:1rem 1.25rem;

    border-radius:18px;

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

    color:var(--brand-secondary);

    font-size:.9rem;
}

.about-mini-badge strong{

    display:block;

    font-size:1.75rem;

    color:var(--brand-primary);

    line-height:1;
}

.about-mini h2{

    font-size:clamp(2rem,4vw,3rem);

    font-weight:800;

    color:var(--text);

    margin:1rem 0;
}

.about-mini p{

    color:var(--text-soft);

    line-height:1.8;

    margin-bottom:1rem;
}

.about-mini-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1rem;

    margin-top:2rem;
}

.feature-item{

    display:flex;

    align-items:center;

    gap:.75rem;

    font-weight:600;

    color:var(--text);
}

.feature-item i{

    color:var(--success);

    font-size:1.1rem;
}

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

@media(max-width:991px){

    .about-mini{

        padding:70px 0;
    }

    .about-mini-image img{

        min-height:320px;
    }

    .about-mini-features{

        grid-template-columns:1fr;
    }
}