:root{

    --primary:#01241F;
    --secondary:#00584b;
    --light:#f5fffc;
    --white:#ffffff;
    --text:#062b25;

    --gold:#f8d56d;
    --gold-light:#ffe89a;

    --shadow:0 20px 50px rgba(0,57,48,.12);

}


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

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


/* =========================
   BODY + BACKGROUND IMAGE
========================= */

html,
body{

    width:100%;
    min-height:100%;

}


body{

    font-family:'Poppins',sans-serif;

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

    background-color:#003930;

    background-image:
        linear-gradient(
            rgba(0,57,48,.10),
            rgba(0,57,48,.10)
        ),
        url("../images/bg.png");

    background-repeat:no-repeat;

    background-position:center top;

    background-size:cover;

    background-attachment:fixed;

    overflow-x:hidden;

    position:relative;

}


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

.bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(30px);

    z-index:-1;

    pointer-events:none;

}


.one{

    width:300px;

    height:300px;

    background:#0c9f7d22;

    top:-120px;

    left:-120px;

}


.two{

    width:260px;

    height:260px;

    background:#00393022;

    right:-80px;

    top:180px;

}


.three{

    width:350px;

    height:350px;

    background:#00a88418;

    bottom:-120px;

    left:-150px;

}


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

.hero{

    width:100%;

    min-height:100vh;

    padding:30px 15px 60px;

    position:relative;

    z-index:1;

}


.main-card{

    text-align:center;

}


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

.top-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px 24px;

    border-radius:40px;

    background:
        linear-gradient(
            135deg,
            #003930,
            #006d5b
        );

    color:#fff;

    font-size:13px;

    font-weight:700;

    border:1px solid rgba(248,213,109,.65);

    box-shadow:

        0 10px 30px
        rgba(0,57,48,.35),

        0 0 15px
        rgba(248,213,109,.10);

    animation:float 3s infinite;

}


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

.logo-box{

    width:120px;

    height:120px;

    margin:30px auto;

    border-radius:20px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

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

    box-shadow:

        0 20px 60px
        rgba(0,57,48,.15),

        0 0 20px
        rgba(248,213,109,.15),

        inset 0 2px 6px
        rgba(255,255,255,.9);

    transition:.4s;

}


.logo-box:hover{

    transform:translateY(-8px);

    box-shadow:

        0 25px 65px
        rgba(0,57,48,.25),

        0 0 30px
        rgba(248,213,109,.25);

}


.logo-box img{

    width:85px;

    max-width:85%;

    height:auto;

    object-fit:contain;

}


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

h1{

    font-size:46px;

    font-weight:800;

    color:#f8d56d;

    margin-bottom:12px;

    text-shadow:

        0 3px 8px
        rgba(0,0,0,.35),

        0 0 15px
        rgba(248,213,109,.15);

}


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

.main-card p{

    color:#f0f5f3;

    font-size:16px;

    line-height:30px;

    margin-bottom:25px;

    text-shadow:
        0 2px 5px rgba(0,0,0,.25);

}


/* =========================
   DOWNLOAD BUTTON
========================= */

.download-btn{

    position:relative;

    overflow:visible;

    width:100%;

    height:64px;

    border:3px solid #f8d56d;

    border-radius:50px;

    cursor:pointer;

    background:

        linear-gradient(
            135deg,
            #270039,
            #8403ce
        );

    color:#fff;

    font-size:18px;

    font-weight:700;

    box-shadow:

        0 10px 30px
        rgba(0,57,48,.35),

        0 0 15px
        rgba(248,213,109,.12);

    animation:pulseGlow 2s infinite;

    transition:.3s ease;

}


.download-btn i{

    margin-right:7px;

    color:#f8d56d;

}


.download-btn:hover{

    transform:translateY(-4px) scale(1.03);

    animation-play-state:paused;

    box-shadow:

        0 15px 35px
        rgba(0,57,48,.45),

        0 0 30px
        rgba(0,184,148,.35),

        0 0 15px
        rgba(248,213,109,.25);

}


.download-btn:active{

    transform:scale(.97);

}


/* =========================
   DOWNLOAD PULSE
========================= */

@keyframes pulseGlow{

    0%{

        transform:scale(1);

        box-shadow:

            0 0 0 0
            rgba(248,213,109,.45),

            0 10px 30px
            rgba(0,57,48,.35);

    }


    70%{

        transform:scale(1.03);

        box-shadow:

            0 0 0 18px
            rgba(248,213,109,0),

            0 18px 40px
            rgba(0,57,48,.45);

    }


    100%{

        transform:scale(1);

        box-shadow:

            0 0 0 0
            rgba(248,213,109,0),

            0 10px 30px
            rgba(0,57,48,.35);

    }

}


/* =========================
   FEATURE CARDS
========================= */

.feature{

    margin-top:22px;

    background:
        #01241F;

    backdrop-filter:blur(18px);

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

    border-radius:24px;

    padding:18px;

    display:flex;

    align-items:center;

    box-shadow:

        0 20px 50px
        rgba(0,20,15,.25);

    transition:.35s;

    border:

        2px solid
       #f8d56d;

    height:88px;

    

}


.feature:hover{

    transform:translateY(-8px);

    border-color:#f8d56d;

    box-shadow:

        0 25px 55px
        rgba(0,20,15,.32),

        0 0 20px
        rgba(248,213,109,.10);

}


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

.icon{

    width:65px;

    height:65px;

    min-width:65px;

    background:

        linear-gradient(
            135deg,
            #003930,
            #00896c
        );

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    color:#f8d56d;

    margin-right:18px;

    box-shadow:

        0 15px 30px
        rgba(0,57,48,.25),

        inset 0 0 10px
        rgba(248,213,109,.08);

}


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

.feature h5{

    margin:0;

    font-size:22px;

    font-weight:700;

    color:white;

    text-align:left;

}


.feature span{

    display:block;

    font-size:14px;

    margin-top:4px;

    color:#667b74;

    text-align:left;

}


/* =========================
   FEATURE ARROW
========================= */

.arrow{

    margin-left:auto;

    width:42px;

    height:42px;

    min-width:42px;

    border-radius:50%;

    background:#ecfaf5;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#003930;

    font-size:22px;

    border:1px solid
        rgba(0,57,48,.10);

}


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

.stats{

    margin-top:31px;

    display:flex;

    justify-content:space-between;

    background:

        linear-gradient(
            135deg,
            #003930,
            #00584b
        );

    padding:25px;

    border-radius:28px;

    color:#fff;

    border:2px solid
        rgba(248,213,109,.65);

    box-shadow:

        0 20px 40px
        rgba(0,57,48,.30),

        0 0 20px
        rgba(248,213,109,.08);

}


.stats > div{

    flex:1;

    text-align:center;

}


.stats h3{

    font-size:34px;

    font-weight:800;

    color:#f8d56d;

    margin-bottom:4px;

}


.stats p{

    margin:0;

    font-size:14px;

    color:#d8ebe6;

}


/* =========================
   BOTTOM PILL
========================= */

.bottom-pill{

    margin:30px auto;

    display:inline-flex;

    gap:10px;

    align-items:center;

    padding:14px 30px;

    background:#fff;

    border:1px solid
        rgba(248,213,109,.55);

    border-radius:40px;

    font-weight:600;

    color:#003930;

    box-shadow:

        0 12px 35px
        rgba(0,57,48,.20);

}


.bottom-pill i{

    color:#00745f;

}


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

@keyframes float{

    50%{

        transform:translateY(-5px);

    }

}


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

@media(max-width:576px){

    body{

        background-position:center top;

        background-size:auto 100%;

        background-attachment:scroll;

    }


    .hero{

        padding:

            22px 15px 45px;

    }


    h1{

        font-size:36px;

    }


    .main-card p{

        font-size:14px;

        line-height:25px;

    }


    .top-badge{

        font-size:11px;

        padding:8px 18px;

    }


    .logo-box{

        width:105px;

        height:105px;

        margin:24px auto;

    }


    .logo-box img{

        width:75px;

    }


    .download-btn{

        height:60px;

        font-size:18px;

    }


    .feature{

        height:78px;

        padding:10px;

        border-radius:18px;

    }


    .icon{

        width:52px;

        height:52px;

        min-width:52px;

        border-radius:15px;

        font-size:23px;

        margin-right:12px;

    }


    .feature h5{

        font-size:15px;

    }


    .feature span{

        font-size:10px;

        margin-top:2px;

    }


    .arrow{

        width:34px;

        height:34px;

        min-width:34px;

        font-size:17px;

    }


    .stats{

        padding:18px 10px;

        border-radius:22px;

        margin-top:25px;

    }


    .stats h3{

        font-size:24px;

    }


    .stats p{

        font-size:10px;

    }


    .bottom-pill{

        margin:22px auto;

        padding:10px 18px;

        font-size:11px;

    }

}


/* =========================
   VERY SMALL MOBILE
========================= */

@media(max-width:380px){

    h1{

        font-size:31px;

    }


    .feature{

        height:72px;

    }


    .feature h5{

        font-size:13px;

    }


    .feature span{

        font-size:9px;

    }


    .icon{

        width:47px;

        height:47px;

        min-width:47px;

        font-size:21px;

    }


    .arrow{

        width:30px;

        height:30px;

        min-width:30px;

        font-size:14px;

    }

}