/*==================================================
NEXTEL NETWORK
Official Website Stylesheet
Part 1 - Global + Navbar
==================================================*/

/*=============================
ROOT VARIABLES
=============================*/

:root{

    /* Primary Brand */
    --primary:#064E3B;
    --primary-light:#10B981;
    --primary-dark:#0A4D3C;

    /* Gold Accent */
    --gold:#C8A951;
    --gold-light:#E0C872;
    --gold-dark:#B8941F;

    /* Backgrounds */
    --bg:#FFFFFF;
    --bg2:#F8FFFC;
    --bg3:#F0FDF4;

    /* Cards */
    --card:#FFFFFF;

    /* Text */
    --white:#FFFFFF;
    --text:#0F1F1A;
    --muted:#475569;

    /* Border */
    --border:#E5E7EB;

    /* Radius */
    --radius:22px;

    /* Shadows */
    --shadow:
        0 20px 60px rgba(6,78,59,.08);

    /* Animation */
    --transition:.35s ease;

    --heading:#0F172A;
--body:#475569;
--muted:#64748B;

}



/*=============================
RESET
=============================*/

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

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
    background:var(--bg);
    color:var(--text);
    font-family:'Poppins',sans-serif;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

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

/*=============================
BACKGROUND
=============================*/

body::before{

    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;

    background:

    radial-gradient(circle at 10% 10%,
    rgba(6,78,59,.05),
    transparent 35%),

    radial-gradient(circle at 90% 20%,
    rgba(200,169,81,.05),
    transparent 30%),

    radial-gradient(circle at 80% 90%,
    rgba(16,185,129,.05),
    transparent 35%);

}

/*=============================
SCROLLBAR
=============================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:var(--bg3);
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        var(--primary),
        var(--gold)
    );
    border-radius:100px;
}

::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(
        180deg,
        var(--primary-dark),
        var(--gold-dark)
    );
}


/*=============================
TYPOGRAPHY
=============================*/

.section-label{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    border-radius:100px;

    background:rgba(200,169,81,.12);

    color:var(--gold-dark);

    border:1px solid rgba(200,169,81,.25);

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.14em;

    margin-bottom:20px;

}

.section-heading{

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

    font-weight:800;

    line-height:1.12;

    color:var(--heading);

    margin-bottom:22px;

    letter-spacing:-.03em;

}

.section-heading span{

    color:var(--primary);

}

.section-text{

    font-size:1.08rem;

    color:var(--body);

    line-height:1.9;

    max-width:760px;

}

.text-muted{

    color:var(--muted);

}

.text-primary{

    color:var(--primary);

}

.text-gold{

    color:var(--gold-dark);

}


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

.container{

    position:relative;

    z-index:2;

}


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

/* Primary Brand Button */

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 36px;

    border-radius:14px;

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

    color:#fff;

    font-weight:700;

    transition:var(--transition);

    box-shadow:
    0 15px 40px rgba(6,78,59,.18);

}

.btn-primary:hover{

    color:#fff;

    transform:translateY(-4px);

    box-shadow:
    0 22px 50px rgba(6,78,59,.28);

}


/* Gold CTA */

.btn-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 36px;

    border-radius:14px;

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

    color:var(--heading);

    font-weight:700;

    transition:var(--transition);

    box-shadow:
    0 15px 40px rgba(200,169,81,.22);

}

.btn-gold:hover{

    color:var(--heading);

    transform:translateY(-4px);

    box-shadow:
    0 22px 50px rgba(200,169,81,.35);

}


/* Outline Primary */

.btn-outline-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 36px;

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

    border-radius:14px;

    background:#fff;

    color:var(--primary);

    font-weight:700;

    transition:var(--transition);

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:#fff;

}


/* Outline Gold */

.btn-outline-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 36px;

    border:2px solid var(--gold);

    border-radius:14px;

    background:#fff;

    color:var(--gold-dark);

    font-weight:700;

    transition:var(--transition);

}

.btn-outline-gold:hover{

    background:var(--gold);

    color:var(--heading);

}


/* Small Buttons */

.btn-sm-primary{

    padding:12px 24px;

    font-size:.9rem;

}

.btn-sm-gold{

    padding:12px 24px;

    font-size:.9rem;

}


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

.navbar{

    padding:18px 0;

    background:transparent;

    transition:all .35s ease;

}

.navbar.scrolled{

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

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(6,78,59,.08);

    box-shadow:0 10px 35px rgba(6,78,59,.06);

}

.navbar-brand{

    display:flex;

    align-items:center;

}

.navbar-brand img{

    height:48px;

}

.navbar-nav{

    gap:8px;

}

.navbar-nav .nav-link{

    color:var(--body);

    font-size:.96rem;

    font-weight:600;

    padding:10px 16px;

    border-radius:12px;

    transition:var(--transition);

}

.navbar-nav .nav-link:hover{

    color:var(--primary);

    background:rgba(6,78,59,.06);

}

.navbar-nav .nav-link.active{

    color:var(--primary);

    background:rgba(6,78,59,.08);

}


/* Mobile Toggle */

.navbar-toggler{

    border:none;

    padding:8px;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler-icon{

background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(6,78,59,.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}

.navbar-custom.toggled{

    background:#fff;

}


/*=============================
GLOBAL CARDS
=============================*/

.glass-card{

    background:#fff;

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

    border-radius:var(--radius);

    box-shadow:0 15px 45px rgba(6,78,59,.06);

    transition:var(--transition);

}

.glass-card:hover{

    transform:translateY(-8px);

    border-color:rgba(6,78,59,.18);

    box-shadow:0 22px 55px rgba(6,78,59,.12);

}


/*=============================
IMAGE
=============================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}


/*=============================
TEXT COLORS
=============================*/

.text-primary{

    color:var(--primary)!important;

}

.text-gold{

    color:var(--gold-dark)!important;

}

.text-heading{

    color:var(--heading)!important;

}

.text-body{

    color:var(--body)!important;

}

.text-muted{

    color:var(--muted)!important;

}


/*=============================
SPACING
=============================*/

.py-lg{

    padding:120px 0;

}

.mb-lg{

    margin-bottom:80px;

}


/*=============================
SECTIONS
=============================*/

section{

    background:transparent;

}

section:not(#hero-section){

    border-top:1px solid rgba(6,78,59,.06);

}


/*=============================
SECTION BACKGROUNDS
=============================*/

.bg-light-green{

    background:var(--bg3);

}

.bg-white{

    background:#fff;

}


/*=============================
LINKS
=============================*/

a{

    color:inherit;

    transition:var(--transition);

}

a:hover{

    color:var(--primary);

}


/*=============================
SELECTION
=============================*/

::selection{

    background:var(--primary);

    color:#fff;

}


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

#hero-section{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:170px 0 90px;

    background:
        radial-gradient(circle at top left,
        rgba(6,78,59,.06),
        transparent 40%),

        radial-gradient(circle at bottom right,
        rgba(200,169,81,.08),
        transparent 35%),

        linear-gradient(
        180deg,
        #FFFFFF,
        var(--bg3));

}


/*============================
BACKGROUND EFFECTS
============================*/

#hero-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-220px;

    top:-180px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(6,78,59,.14),
        transparent 72%);

    filter:blur(40px);

    animation:floatGlow 12s linear infinite;

}

#hero-section::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(200,169,81,.12),
        transparent 72%);

    filter:blur(45px);

    animation:floatGlowReverse 15s linear infinite;

}


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

.hero-content{

    position:relative;

    z-index:2;

    text-align:center;

}


/*============================
BADGE
============================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:100px;

    background:rgba(6,78,59,.05);

    border:1px solid rgba(6,78,59,.12);

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    margin-bottom:30px;

    backdrop-filter:blur(15px);

}

.hero-badge i{

    color:var(--gold);

}


/*============================
TITLE
============================*/

.hero-title{

    font-size:clamp(3rem,8vw,6rem);

    font-weight:900;

    line-height:1.05;

    color:var(--heading);

    margin-bottom:25px;

    letter-spacing:-2px;

}

.hero-title span{

    display:block;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--gold)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}


/*============================
SUBTITLE
============================*/

.hero-subtitle{

    max-width:760px;

    margin:auto;

    color:var(--body);

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:45px;

}


/*============================
CTA
============================*/

.hero-cta-group{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}


/*============================
TRUST BADGES
============================*/

.hero-trust{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-top:50px;

}

.hero-trust span{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 18px;

    border-radius:100px;

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    color:var(--body);

    font-size:.86rem;

    font-weight:500;

    box-shadow:0 10px 25px rgba(6,78,59,.06);

    transition:var(--transition);

}

.hero-trust span:hover{

    transform:translateY(-4px);

    border-color:rgba(6,78,59,.18);

    box-shadow:0 15px 35px rgba(6,78,59,.10);

}

.hero-trust i{

    color:var(--gold);

}

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

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

.hero-stats{

    margin-top:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:50px;

    flex-wrap:wrap;

}

.hero-stat{

    text-align:center;

}

.hero-stat-value{

    font-size:2.8rem;

    font-weight:800;

    line-height:1;

    color:var(--primary);

}

.hero-stat-label{

    margin-top:10px;

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.1em;

    color:var(--muted);

    font-weight:600;

}

.hero-stat-divider{

    width:1px;

    height:70px;

    background:rgba(6,78,59,.10);

}


/*============================
IMAGE / VIDEO
============================*/

.hero-video-wrap{

    margin:80px auto 0;

    width:100%;

    max-width:1100px;

}

.video-container{

    position:relative;

    width:100%;

    overflow:hidden;

    padding-bottom:56.25%;

    border-radius:28px;

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    box-shadow:
        0 25px 60px rgba(6,78,59,.10);

}

.video-container::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    border-radius:28px;

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

}

.video-container img,

.video-container iframe,

.video-container video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    border:none;

}


/*============================
ANIMATION
============================*/

@keyframes floatGlow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(30px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatGlowReverse{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-30px);

    }

    100%{

        transform:translateY(0);

    }

}


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

@media(max-width:991px){

    #hero-section{

        padding:150px 0 80px;

    }

    .hero-title{

        font-size:3.5rem;

    }

    .hero-subtitle{

        font-size:1rem;

    }

    .hero-stats{

        gap:30px;

    }

    .hero-stat-divider{

        display:none;

    }

}

@media(max-width:768px){

    .hero-title{

        font-size:2.8rem;

    }

    .hero-subtitle{

        font-size:1rem;

    }

    .hero-cta-group{

        flex-direction:column;

        width:100%;

    }

    .hero-cta-group .btn-primary,

    .hero-cta-group .btn-gold,

    .hero-cta-group .btn-outline-primary,

    .hero-cta-group .btn-outline-gold{

        width:100%;

        justify-content:center;

    }

    .hero-video-wrap{

        margin-top:55px;

    }

}

@media(max-width:576px){

    .hero-title{

        font-size:2.25rem;

    }

    .hero-badge{

        font-size:.75rem;

    }

    .hero-stat-value{

        font-size:2.1rem;

    }

    .hero-stat-label{

        font-size:.75rem;

    }

    .hero-trust{

        gap:12px;

    }

    .hero-trust span{

        width:100%;

        justify-content:center;

    }

}

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

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

#about-section{

    position:relative;

    background:linear-gradient(
        180deg,
        #ffffff,
        var(--bg3)
    );

}


/*==============================
IMAGE
==============================*/

.about-img-wrap{

    position:relative;

    border-radius:30px;

    overflow:hidden;

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    box-shadow:
        0 25px 60px rgba(6,78,59,.10);

}

.about-img-wrap img{

    width:100%;

    display:block;

    transition:.7s ease;

}

.about-img-wrap:hover img{

    transform:scale(1.05);

}


/*==============================
IMAGE OVERLAY
==============================*/

.about-img-wrap::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(6,78,59,.25),
        transparent 65%
    );

    z-index:1;

}


/*==============================
BADGE
==============================*/

.about-img-badge{

    position:absolute;

    left:30px;

    bottom:30px;

    z-index:2;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-radius:18px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(6,78,59,.10);

    box-shadow:0 15px 35px rgba(6,78,59,.12);

}

.badge-icon{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    font-size:22px;

}

.badge-text strong{

    display:block;

    color:var(--heading);

    font-size:1rem;

    font-weight:700;

}

.badge-text span{

    display:block;

    color:var(--body);

    font-size:.85rem;

    margin-top:4px;

}


/*==============================
TEXT
==============================*/

.about-content{

    padding-left:30px;

}

.about-content h2{

    color:var(--heading);

    margin-bottom:25px;

}

.about-content p{

    color:var(--body);

    line-height:1.9;

    margin-bottom:20px;

}


/*==============================
FEATURE LIST
==============================*/

.about-bullets{

    margin:35px 0;

}

.about-bullets li{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:20px;

    color:var(--heading);

    font-size:1rem;

    font-weight:500;

}

.about-bullets li i{

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    background:rgba(6,78,59,.10);

    color:var(--gold-dark);

}


/*==============================
HIGHLIGHT BOXES
==============================*/

.about-highlights{

    display:grid;

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

    gap:22px;

    margin-top:45px;

}

.highlight-card{

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    border-radius:22px;

    padding:28px;

    transition:var(--transition);

    box-shadow:0 12px 30px rgba(6,78,59,.05);

}

.highlight-card:hover{

    transform:translateY(-8px);

    border-color:rgba(6,78,59,.18);

    box-shadow:0 20px 45px rgba(6,78,59,.10);

}

.highlight-card i{

    width:58px;

    height:58px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    font-size:22px;

    margin-bottom:18px;

}

.highlight-card h4{

    font-size:1.15rem;

    color:var(--heading);

    margin-bottom:12px;

    font-weight:700;

}

.highlight-card p{

    color:var(--body);

    font-size:.95rem;

    line-height:1.8;

    margin:0;

}


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

@media(max-width:991px){

    .about-content{

        padding-left:0;

        margin-top:60px;

    }

}

@media(max-width:768px){

    .about-highlights{

        grid-template-columns:1fr;

    }

    .about-img-badge{

        left:20px;

        right:20px;

        bottom:20px;

        padding:16px;

    }

    .badge-icon{

        width:50px;

        height:50px;

    }

}

@media(max-width:576px){

    .about-img-badge{

        position:relative;

        left:auto;

        right:auto;

        bottom:auto;

        margin:20px;

    }

}

/*==================================================
HOW IT WORKS
==================================================*/

/*=====================================
HOW IT WORKS SECTION
=====================================*/

#how-section{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #ffffff,
        var(--bg3)
    );

}


/*=====================================
BACKGROUND GLOW
=====================================*/

#how-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-250px;

    top:100px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(6,78,59,.05),
        transparent 70%);

    pointer-events:none;

}

#how-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-180px;

    bottom:-120px;

    border-radius:50%;

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

    pointer-events:none;

}


/*=====================================
STEP CARD
=====================================*/

.step-card{

    position:relative;

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    border-radius:28px;

    padding:40px 30px;

    height:100%;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:
        0 18px 40px rgba(6,78,59,.06);

}


/* Premium Border */

.step-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:28px;

    background:
        linear-gradient(
        135deg,
        rgba(200,169,81,.15),
        transparent,
        rgba(6,78,59,.12));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}


/* Hover */

.step-card:hover{

    transform:translateY(-12px);

    border-color:rgba(6,78,59,.18);

    box-shadow:
        0 28px 60px rgba(6,78,59,.12);

}


/*=====================================
STEP NUMBER
=====================================*/

.step-number{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    font-size:1.5rem;

    font-weight:800;

    margin-bottom:28px;

    position:relative;

    transition:.35s;

    box-shadow:
        0 15px 35px rgba(6,78,59,.18);

}


/* Gold Ring */

.step-number::after{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:26px;

    border:2px solid rgba(200,169,81,.25);

}


/*=====================================
ICON
=====================================*/

.step-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(6,78,59,.08);

    color:var(--primary);

    font-size:28px;

    margin-bottom:25px;

}


/*=====================================
TITLE
=====================================*/

.step-card h4{

    color:var(--heading);

    font-size:1.25rem;

    font-weight:700;

    margin-bottom:15px;

    transition:.35s;

}


/*=====================================
TEXT
=====================================*/

.step-card p{

    color:var(--body);

    font-size:.96rem;

    line-height:1.9;

    margin:0;

}


/*=====================================
BOTTOM ACCENT
=====================================*/

.step-card::after{

    content:"";

    position:absolute;

    left:30px;

    bottom:0;

    width:0;

    height:4px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--gold));

    transition:.4s ease;

}

.step-card:hover::after{

    width:calc(100% - 60px);

}


/*=====================================
CONNECTOR
=====================================*/

.step-connect{

    position:absolute;

    top:50%;

    right:-35px;

    width:70px;

    height:2px;

    background:linear-gradient(
        90deg,
        rgba(200,169,81,.40),
        transparent);

}


/*=====================================
FEATURE TAG
=====================================*/

.step-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:18px;

    color:var(--gold-dark);

    font-size:.78rem;

    text-transform:uppercase;

    font-weight:700;

    letter-spacing:.08em;

}


/*=====================================
HOVER EFFECTS
=====================================*/

.step-card:hover .step-number{

    transform:rotate(-5deg) scale(1.08);

}

.step-card:hover h4{

    color:var(--primary);

}

.step-card:hover .step-icon{

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

    color:#fff;

}


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

@media(max-width:991px){

    .step-card{

        padding:35px 25px;

    }

}

@media(max-width:768px){

    .step-card{

        text-align:center;

    }

    .step-number,
    .step-icon{

        margin-left:auto;

        margin-right:auto;

    }

    .step-connect{

        display:none;

    }

}

@media(max-width:576px){

    .step-card{

        padding:30px 22px;

        border-radius:22px;

    }

    .step-number{

        width:60px;

        height:60px;

        font-size:1.2rem;

    }

    .step-icon{

        width:60px;

        height:60px;

        font-size:24px;

    }

}

/*==================================================
SERVICES / INCOME STREAMS
==================================================*/

/*====================================
REVENUE STREAMS SECTION
====================================*/

#streams-section{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #ffffff,
        var(--bg3)
    );

}


/*====================================
BACKGROUND
====================================*/

#streams-section::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    right:-300px;

    top:-250px;

    border-radius:50%;

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

    pointer-events:none;

}

#streams-section::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-220px;

    bottom:-200px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(6,78,59,.06),
        transparent 70%);

}


/*====================================
CARD
====================================*/

.stream-card{

    position:relative;

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    border-radius:28px;

    padding:38px;

    overflow:hidden;

    transition:var(--transition);

    height:100%;

    box-shadow:0 18px 45px rgba(6,78,59,.06);

}


/* Premium Border */

.stream-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:28px;

    background:linear-gradient(
        145deg,
        rgba(200,169,81,.18),
        transparent,
        rgba(6,78,59,.12));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}


/* Hover */

.stream-card:hover{

    transform:translateY(-12px);

    border-color:rgba(6,78,59,.18);

    box-shadow:0 30px 70px rgba(6,78,59,.12);

}


/*====================================
ICON
====================================*/

.stream-icon{

    width:82px;

    height:82px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:28px;

    position:relative;

    transition:.35s;

}


/* Primary */

.stream-icon.green{

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

    color:#fff;

}


/* Gold */

.stream-icon.gold{

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

    color:var(--heading);

}


/* Secondary */

.stream-icon.teal{

    background:linear-gradient(
        135deg,
        #0F766E,
        #14B8A6);

    color:#fff;

}


/* Ring */

.stream-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:30px;

    border:2px solid rgba(200,169,81,.15);

}


/* Hover */

.stream-card:hover .stream-icon{

    transform:rotate(-6deg) scale(1.08);

}


/*====================================
TITLE
====================================*/

.stream-card h4{

    font-size:1.35rem;

    color:var(--heading);

    font-weight:700;

    margin-bottom:16px;

    transition:.3s;

}

.stream-card:hover h4{

    color:var(--primary);

}


/*====================================
TEXT
====================================*/

.stream-card p{

    color:var(--body);

    line-height:1.9;

    margin-bottom:30px;

    font-size:.96rem;

}


/*====================================
STAT BOX
====================================*/

.stream-stat{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 20px;

    border-radius:16px;

    background:var(--bg3);

    border:1px solid rgba(6,78,59,.08);

}

.stream-stat-label{

    color:var(--muted);

    font-size:.82rem;

}

.stream-stat-value{

    color:var(--primary);

    font-weight:700;

}


/*====================================
BOTTOM BAR
====================================*/

.stream-card::after{

    content:"";

    position:absolute;

    left:35px;

    bottom:0;

    width:0;

    height:4px;

    border-radius:100px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--gold));

    transition:.4s;

}

.stream-card:hover::after{

    width:calc(100% - 70px);

}


/*====================================
DASHBOARD IMAGE
====================================*/

.stream-dashboard{

    margin-top:90px;

    text-align:center;

}

.stream-dashboard img{

    border-radius:28px;

    border:1px solid rgba(6,78,59,.08);

    box-shadow:0 30px 70px rgba(6,78,59,.10);

    transition:.45s;

}

.stream-dashboard img:hover{

    transform:translateY(-8px);

    box-shadow:0 40px 80px rgba(6,78,59,.15);

}


/*====================================
FEATURE TAGS
====================================*/

.stream-tags{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-top:30px;

}

.stream-tags span{

    padding:10px 18px;

    border-radius:100px;

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    color:var(--body);

    font-size:.85rem;

    box-shadow:0 8px 20px rgba(6,78,59,.05);

}

.stream-tags i{

    color:var(--gold-dark);

    margin-right:8px;

}


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

@media(max-width:991px){

    .stream-card{

        padding:30px;

    }

}

@media(max-width:768px){

    .stream-card{

        text-align:center;

    }

    .stream-icon{

        margin:auto auto 25px;

    }

    .stream-stat{

        flex-direction:column;

        gap:8px;

        text-align:center;

    }

}

@media(max-width:576px){

    .stream-card{

        border-radius:22px;

        padding:28px 22px;

    }

    .stream-icon{

        width:70px;

        height:70px;

        font-size:28px;

    }

    .stream-card h4{

        font-size:1.15rem;

    }

}

/*==================================================
STATISTICS + FEATURES
==================================================*/


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

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

#stats-section{

    position:relative;

    padding:110px 0;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #ffffff,
        var(--bg3)
    );

}


/* Background Glow */

#stats-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-220px;

    top:-250px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(6,78,59,.06),
        transparent 70%);

}

#stats-section::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

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

}


/*========================================
STAT CARD
========================================*/

.stat-item{

    position:relative;

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    border-radius:24px;

    padding:45px 25px;

    overflow:hidden;

    transition:var(--transition);

    height:100%;

    box-shadow:0 18px 45px rgba(6,78,59,.06);

}

.stat-item:hover{

    transform:translateY(-10px);

    border-color:rgba(6,78,59,.18);

    box-shadow:0 25px 60px rgba(6,78,59,.12);

}


/* Bottom Gradient */

.stat-item::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--gold));

    transform:scaleX(0);

    transition:.35s;

}

.stat-item:hover::after{

    transform:scaleX(1);

}


/*========================================
NUMBER
========================================*/

.stat-big{

    font-size:3.2rem;

    font-weight:800;

    color:var(--primary);

    line-height:1;

    margin-bottom:15px;

}


/*========================================
LABEL
========================================*/

.stat-desc{

    color:var(--body);

    font-size:.95rem;

    line-height:1.8;

}


/*========================================
FEATURES SECTION
========================================*/

#features-section{

    position:relative;

    padding:120px 0;

    background:#fff;

}


/*========================================
FEATURE PANEL
========================================*/

.feature-panel{

    padding:80px 0;

    border-bottom:1px solid rgba(6,78,59,.08);

}

.feature-panel:last-child{

    border-bottom:none;

}


/*========================================
IMAGE
========================================*/

.feature-img-wrap{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    box-shadow:0 25px 60px rgba(6,78,59,.10);

}

.feature-img-wrap img{

    width:100%;

    display:block;

    transition:.8s;

}

.feature-img-wrap:hover img{

    transform:scale(1.06);

}


/* Soft Overlay */

.feature-img-wrap::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent,
        rgba(6,78,59,.08));

    z-index:2;

}


/* Premium Corner */

.feature-img-wrap::after{

    content:"";

    position:absolute;

    top:25px;

    right:25px;

    width:70px;

    height:70px;

    border-top:2px solid var(--gold);

    border-right:2px solid var(--gold);

    opacity:.8;

}


/*========================================
TEXT
========================================*/

.feature-text{

    padding:15px;

}

.feature-text h3{

    font-size:2.6rem;

    color:var(--heading);

    font-weight:800;

    margin-bottom:25px;

    line-height:1.2;

}

.feature-text h3 span{

    color:var(--primary);

}

.feature-text p{

    color:var(--body);

    line-height:2;

    font-size:1rem;

    margin-bottom:25px;

}


/*========================================
FEATURE LIST
========================================*/

.feature-list{

    list-style:none;

    padding:0;

    margin:0;

}

.feature-list li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:18px;

    color:var(--heading);

    line-height:1.8;

}

.feature-list i{

    color:var(--gold-dark);

    margin-top:6px;

    font-size:15px;

}


/*========================================
FEATURE BUTTON
========================================*/

.feature-btn{

    margin-top:30px;

}


/*========================================
ALTERNATE LAYOUT
========================================*/

.feature-panel:nth-child(even) .row{

    flex-direction:row-reverse;

}


/*========================================
FLOATING CARD
========================================*/

.feature-floating{

    position:absolute;

    right:-30px;

    bottom:35px;

    width:180px;

    border-radius:20px;

    overflow:hidden;

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    box-shadow:0 15px 40px rgba(6,78,59,.10);

}

.feature-floating img{

    width:100%;

}


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

@media(max-width:992px){

    .feature-panel{

        padding:60px 0;

    }

    .feature-text{

        margin-top:40px;

    }

    .feature-panel:nth-child(even) .row{

        flex-direction:column;

    }

    .feature-text h3{

        font-size:2.1rem;

    }

}

@media(max-width:768px){

    #stats-section{

        padding:80px 0;

    }

    .stat-item{

        padding:35px 20px;

    }

    .stat-big{

        font-size:2.5rem;

    }

    .feature-img-wrap{

        border-radius:22px;

    }

    .feature-text h3{

        font-size:1.9rem;

    }

    .feature-floating{

        display:none;

    }

}

@media(max-width:576px){

    .feature-panel{

        padding:45px 0;

    }

    .feature-text{

        text-align:center;

    }

    .feature-list li{

        text-align:left;

    }

}

/*==================================================
PACKAGES • FAQ • CTA • FOOTER
==================================================*/


/*========================================
PACKAGES
========================================*/

/*========================================
PACKAGES SECTION
========================================*/

#packages-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #ffffff,
        var(--bg3)
    );

}

#packages-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-250px;

    top:-220px;

    border-radius:50%;

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

}

#packages-section::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    left:-200px;

    bottom:-200px;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(6,78,59,.06),
        transparent 70%);

}


/*========================================
PACKAGE CARD
========================================*/

.package-card{

    position:relative;

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    border-radius:30px;

    padding:45px;

    overflow:hidden;

    transition:var(--transition);

    height:100%;

    box-shadow:0 20px 45px rgba(6,78,59,.06);

}

.package-card:hover{

    transform:translateY(-12px);

    border-color:rgba(6,78,59,.18);

    box-shadow:0 30px 70px rgba(6,78,59,.12);

}

.package-card.popular{

    border:2px solid var(--gold);

    box-shadow:
        0 0 0 4px rgba(200,169,81,.10),
        0 25px 70px rgba(200,169,81,.15);

}


/* Premium Glow */

.package-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(200,169,81,.08),
        transparent 45%);

    pointer-events:none;

}


/*========================================
POPULAR TAG
========================================*/

.popular-tag{

    display:inline-block;

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

    color:var(--heading);

    font-weight:700;

    font-size:.78rem;

    padding:8px 18px;

    border-radius:100px;

    margin-bottom:25px;

}


/*========================================
PACKAGE TITLE
========================================*/

.package-tier{

    color:var(--primary);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.82rem;

}

.package-name{

    font-size:2rem;

    font-weight:800;

    margin:15px 0;

    color:var(--heading);

}


/*========================================
PRICE
========================================*/

.package-price{

    font-size:3.5rem;

    color:var(--primary);

    font-weight:800;

    margin:20px 0;

}

.package-price sup{

    font-size:1.3rem;

    top:-18px;

}


/*========================================
DESCRIPTION
========================================*/

.package-desc{

    color:var(--body);

    line-height:1.9;

    margin-bottom:30px;

}


/*========================================
FEATURES
========================================*/

.package-features{

    list-style:none;

    padding:0;

    margin:0 0 35px;

}

.package-features li{

    display:flex;

    gap:15px;

    align-items:flex-start;

    margin-bottom:18px;

    color:var(--heading);

}

.package-features i{

    color:var(--gold-dark);

    margin-top:5px;

}


/*========================================
FAQ
========================================*/

#faq-section{

    padding:120px 0;

    background:#fff;

}


/* Accordion */

.accordion-item{

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    border-radius:18px !important;

    margin-bottom:18px;

    overflow:hidden;

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

}

.accordion-button{

    background:#fff;

    color:var(--heading);

    font-weight:600;

    padding:25px;

    box-shadow:none !important;

}

.accordion-button:not(.collapsed){

    background:linear-gradient(
        90deg,
        rgba(6,78,59,.08),
        rgba(200,169,81,.08));

    color:var(--primary);

}

.accordion-button::after{

    filter:none;

}

.accordion-body{

    color:var(--body);

    line-height:1.9;

    padding:0 25px 25px;

}


/*========================================
TESTIMONIALS
========================================*/

.testimonial-card{

    background:#fff;

    border:1px solid rgba(6,78,59,.08);

    border-radius:25px;

    padding:35px;

    transition:var(--transition);

    height:100%;

    box-shadow:0 15px 35px rgba(6,78,59,.05);

}

.testimonial-card:hover{

    transform:translateY(-8px);

    border-color:rgba(6,78,59,.18);

    box-shadow:0 20px 45px rgba(6,78,59,.10);

}

.testimonial-stars{

    color:var(--gold);

    margin-bottom:18px;

}

.testimonial-text{

    color:var(--body);

    line-height:1.9;

    font-style:italic;

    margin-bottom:30px;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:15px;

}

.testimonial-user img{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-user h5{

    margin:0;

    color:var(--heading);

    font-size:1rem;

}

.testimonial-user span{

    color:var(--muted);

    font-size:.85rem;

}


/*========================================
FINAL CTA
========================================*/

#cta-section{

    padding:120px 0;

    position:relative;

    background:linear-gradient(
        180deg,
        var(--bg3),
        #ffffff);

}

.cta-box{

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

    border:1px solid rgba(200,169,81,.25);

    border-radius:35px;

    padding:70px;

    text-align:center;

    overflow:hidden;

    position:relative;

    box-shadow:0 30px 70px rgba(6,78,59,.20);

}

.cta-box::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    right:-180px;

    top:-180px;

    background:
        radial-gradient(circle,
        rgba(200,169,81,.15),
        transparent);

}

.cta-box h2{

    font-size:3rem;

    color:#fff;

    font-weight:800;

    margin-bottom:25px;

}

.cta-box h2 span{

    color:var(--gold-light);

}

.cta-box p{

    max-width:700px;

    margin:auto auto 35px;

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

    line-height:2;

}

/*========================================
FOOTER
========================================*/

/*=========================================================
FOOTER
=========================================================*/

#footer{

    background:linear-gradient(
        180deg,
        var(--primary-dark),
        #03281d);

    padding:90px 0 30px;

    border-top:1px solid rgba(200,169,81,.15);

    position:relative;

    overflow:hidden;

}

#footer::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    right:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(200,169,81,.12),
    transparent 70%);

    pointer-events:none;

}

#footer::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(16,185,129,.10),
    transparent 70%);

    pointer-events:none;

}


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

.footer-logo img{

    max-height:58px;

    margin-bottom:20px;

}

.footer-tagline{

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

    line-height:1.9;

    max-width:320px;

}


/*========================================
HEADINGS
========================================*/

.footer-links h5{

    color:#fff;

    font-size:1.05rem;

    font-weight:700;

    margin-bottom:22px;

    position:relative;

}

.footer-links h5::after{

    content:"";

    display:block;

    width:45px;

    height:3px;

    margin-top:10px;

    border-radius:20px;

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

}


/*========================================
LINKS
========================================*/

.footer-links ul{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:14px;

}

.footer-links a{

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

    text-decoration:none;

    transition:var(--transition);

}

.footer-links a:hover{

    color:var(--gold-light);

    padding-left:8px;

}


/*========================================
CONTACT
========================================*/

.footer-contact-item{

    display:flex;

    gap:14px;

    margin-bottom:18px;

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

}

.footer-contact-item i{

    color:var(--gold);

    font-size:17px;

    margin-top:3px;

}


/*========================================
SOCIAL
========================================*/

.social-links{

    display:flex;

    gap:15px;

    margin-top:28px;

}

.social-links a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

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

    color:#fff;

    transition:var(--transition);

    text-decoration:none;

}

.social-links a:hover{

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

    color:var(--heading);

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(200,169,81,.30);

}


/*========================================
COPYRIGHT
========================================*/

.copyright{

    margin-top:65px;

    padding-top:30px;

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

    text-align:center;

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

    font-size:.92rem;

}

.copyright span{

    color:var(--gold-light);

    font-weight:700;

}


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

@media(max-width:992px){

    .package-card{

        padding:35px;

    }

    .cta-box{

        padding:55px 35px;

    }

    .cta-box h2{

        font-size:2.4rem;

    }

}

@media(max-width:768px){

    #packages-section,

    #faq-section,

    #cta-section{

        padding:90px 0;

    }

    .package-price{

        font-size:2.8rem;

    }

    .cta-box{

        border-radius:25px;

        padding:45px 25px;

    }

    .cta-box h2{

        font-size:2rem;

    }

    .footer-links{

        margin-top:35px;

    }

}

@media(max-width:576px){

    .package-card{

        padding:28px 22px;

    }

    .package-name{

        font-size:1.6rem;

    }

    .package-price{

        font-size:2.4rem;

    }

    .accordion-button{

        padding:18px;

        font-size:.95rem;

    }

    .accordion-body{

        padding:0 18px 18px;

    }

    .social-links{

        justify-content:center;

    }

    #footer{

        text-align:center;

    }

    .footer-tagline{

        margin:0 auto;

    }

    .footer-contact-item{

        justify-content:center;

    }

}


/*======================================================
PREMIUM EFFECTS & MICRO ANIMATIONS
======================================================*/

/* Smooth Scroll */

html{

    scroll-behavior:smooth;

}

body{

    overflow-x:hidden;

}


/* Universal Hover */

.glass-card,
.package-card,
.stream-card,
.step-card,
.highlight-card,
.stat-item,
.testimonial-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.glass-card:hover,
.package-card:hover,
.stream-card:hover,
.step-card:hover,
.highlight-card:hover,
.stat-item:hover,
.testimonial-card:hover{

    transform:translateY(-8px);

}


/* Button Animation */

.btn-gold,
.btn-outline-gold{

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}

.btn-gold:hover{

    transform:translateY(-4px);

}

.btn-outline-gold:hover{

    transform:translateY(-4px);

}


/* Image Hover */

img{

    transition:transform .45s ease;

}

.feature-img-wrap:hover img,
.about-img-wrap:hover img,
.stream-dashboard img:hover{

    transform:scale(1.04);

}


/* Fade In */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade-up.active{

    opacity:1;

    transform:none;

}

/*=====================================
GLOBAL TRANSITIONS
=====================================*/

/*======================================================
PREMIUM EFFECTS & MICRO ANIMATIONS
(Updated for the New Nextel Connect Brand)
======================================================*/

/*=====================================
GLOBAL TRANSITIONS
=====================================*/

*{

    transition:
        color .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .35s ease,
        transform .35s ease;

}


/*=====================================
SECTION DIVIDERS
=====================================*/

section{

    position:relative;

    overflow:hidden;

}

section::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:1px;

    background:
        linear-gradient(
        90deg,
        transparent,
        rgba(6,78,59,.10),
        transparent);

}


/*=====================================
PREMIUM PRIMARY BUTTON
=====================================*/

.btn-gold{

    position:relative;

    overflow:hidden;

}

.btn-gold::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    transform:skewX(-25deg);

    background:
        linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent);

}

.btn-gold:hover::before{

    animation:goldshine 1s ease;

}

@keyframes goldshine{

    100%{

        left:180%;

    }

}


/*=====================================
OUTLINE BUTTON
=====================================*/

.btn-outline-gold{

    position:relative;

    overflow:hidden;

    z-index:1;

}

.btn-outline-gold::before{

    content:"";

    position:absolute;

    inset:0;

    width:0;

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

    z-index:-1;

    transition:.35s;

}

.btn-outline-gold:hover{

    color:#fff;

    border-color:var(--primary);

}

.btn-outline-gold:hover::before{

    width:100%;

}


/*=====================================
PREMIUM CARD HOVER
=====================================*/

.step-card,
.stream-card,
.package-card,
.stat-item,
.testimonial-card,
.highlight-card{

    position:relative;

}

.step-card:hover,
.stream-card:hover,
.package-card:hover,
.stat-item:hover,
.testimonial-card:hover,
.highlight-card:hover{

    box-shadow:
        0 0 0 1px rgba(6,78,59,.08),
        0 25px 60px rgba(6,78,59,.12),
        0 0 25px rgba(200,169,81,.08);

}


/*=====================================
IMAGE ZOOM
=====================================*/

.about-img-wrap,
.feature-img-wrap{

    overflow:hidden;

}

.about-img-wrap img,
.feature-img-wrap img{

    transition:1s;

}

.about-img-wrap:hover img,
.feature-img-wrap:hover img{

    transform:scale(1.06);

}


/*=====================================
NAVBAR LINK EFFECT
=====================================*/

.navbar-nav .nav-link{

    position:relative;

}

.navbar-nav .nav-link::after{

    content:"";

    position:absolute;

    left:12px;

    bottom:6px;

    width:0;

    height:3px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--gold));

    transition:.35s;

}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{

    width:calc(100% - 24px);

}


/*=====================================
SOCIAL ICONS
=====================================*/

.social-links a{

    position:relative;

    overflow:hidden;

}

.social-links a::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:50%;

    background:
        linear-gradient(
        45deg,
        transparent,
        rgba(200,169,81,.35),
        transparent);

    opacity:0;

    transition:.35s;

}

.social-links a:hover::before{

    opacity:1;

}


/*=====================================
STAT NUMBERS
=====================================*/

.stat-big{

    text-shadow:
        0 0 18px rgba(6,78,59,.15);

}


/*=====================================
SECTION HEADINGS
=====================================*/

.section-heading{

    position:relative;

}

.section-heading span{

    position:relative;

    color:var(--primary);

}

.section-heading span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:4px;

    width:100%;

    height:10px;

    background:rgba(200,169,81,.18);

    border-radius:20px;

    z-index:-1;

}


/*=====================================
FLOATING LABELS
=====================================*/

.hero-badge,
.section-label{

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

}

@keyframes floatbadge{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

}


/*=====================================
MEDIA SHADOW
=====================================*/

.video-container,
.hero-image-wrap{

    position:relative;

}

.video-container::after,
.hero-image-wrap::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-35px;

    transform:translateX(-50%);

    width:70%;

    height:45px;

    background:
        radial-gradient(
        ellipse,
        rgba(6,78,59,.20),
        transparent);

}


/*=====================================
SOFT FLOATING ANIMATION
=====================================*/

@keyframes floatSlow{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.hero-image,
.about-img-wrap,
.feature-floating{

    animation:floatSlow 8s ease-in-out infinite;

}


/*=====================================
PREMIUM GLOW
=====================================*/

.package-card.popular{

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

}

@keyframes premiumGlow{

    0%,100%{

        box-shadow:
            0 20px 45px rgba(6,78,59,.10);

    }

    50%{

        box-shadow:
            0 25px 60px rgba(200,169,81,.20);

    }

}


/*=====================================
SCROLLBAR
=====================================*/

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        180deg,
        var(--primary),
        var(--gold));

    border-radius:100px;

}

/*=====================================
PREMIUM SCROLLBAR
=====================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08150e;

}

::-webkit-scrollbar-thumb{

    border-radius:30px;

    background:

    linear-gradient(

    var(--primary),

    var(--gold));

}

::-webkit-scrollbar-thumb:hover{

    background:

    linear-gradient(

    var(--gold),

    var(--primary));

}


/*=====================================
TEXT SELECTION
=====================================*/

::selection{

    background:rgba(212,175,55,.30);

    color:#fff;

}


/*=====================================
INPUTS
=====================================*/

input,

select,

textarea{

    transition:.3s;

}

input:focus,

textarea:focus,

select:focus{

    border-color:var(--gold)!important;

    box-shadow:

    0 0 0 .2rem rgba(212,175,55,.12)!important;

}


/*=====================================
LOADING ANIMATION
=====================================*/

[data-aos]{

    transition-duration:900ms!important;

}


/*=====================================
FLOATING GLOW
=====================================*/

.glow-circle{

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

    radial-gradient(

    circle,

    rgba(24,134,75,.12),

    transparent);

    filter:blur(60px);

    pointer-events:none;

}


/*=====================================
PREMIUM BADGES
=====================================*/

.badge-premium{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:100px;

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

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

    color:#ddd;

    font-size:.9rem;

}

.badge-premium i{

    color:var(--gold);

}


/*=====================================
CARD BORDER ANIMATION
=====================================*/

.step-card::before,

.stream-card::before,

.package-card::before{

    animation:borderGlow 6s linear infinite;

}

@keyframes borderGlow{

    0%{

        opacity:.25;

    }

    50%{

        opacity:.9;

    }

    100%{

        opacity:.25;

    }

}


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

.hero-stat{

    transition:.3s;

}

.hero-stat:hover{

    transform:translateY(-8px);

}

.hero-stat-value{

    transition:.3s;

}

.hero-stat:hover .hero-stat-value{

    color:#fff;

}


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

@media(max-width:768px){

    .section-heading span::after{

        display:none;

    }

}