/* =====================================
   S.S SOLUTION PREMIUM WEBSITE
   STYLE.CSS
   NAVY BLUE + BLACK THEME
===================================== */


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

:root {

    --bg-black:#020617;

    --navy:#071a3d;

    --blue:#0066ff;

    --cyan:#00d9ff;

    --white:#ffffff;

    --gray:#94a3b8;

    --glass:
    rgba(255,255,255,0.08);

    --border:
    rgba(255,255,255,0.15);

    --gradient:
    linear-gradient(
        135deg,
        #0066ff,
        #00d9ff
    );

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    color:white;

    background:

    radial-gradient(
        circle at top left,
        #09245c,
        transparent 40%
    ),

    radial-gradient(
        circle at bottom right,
        #003b55,
        transparent 35%
    ),

    var(--bg-black);

    overflow-x:hidden;

}


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

body::before{

    content:"";

    position:fixed;

    width:450px;

    height:450px;

    background:#0066ff;

    filter:blur(160px);

    opacity:.25;

    top:-120px;

    left:-120px;

    z-index:-1;

    animation:
    glowMove 12s infinite alternate;

}

@keyframes glowMove{

    from{

        transform:
        translate(0,0);

    }

    to{

        transform:
        translate(300px,250px);

    }

}


/* =====================================
   FIXED PREMIUM NAVBAR
===================================== */

header{

    width:92%;

    padding:16px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    background:

    rgba(2,6,23,.78);

    backdrop-filter:
    blur(25px);

    border:
    1px solid rgba(0,217,255,.25);

    border-radius:25px;

    z-index:9999;

    box-shadow:

    0 15px 40px rgba(0,0,0,.45);

    animation:
    headerShow 1s ease;

}

@keyframes headerShow{

    from{

        opacity:0;

        transform:
        translate(-50%,-50px);

    }

    to{

        opacity:1;

        transform:
        translate(-50%,0);

    }

}

header:hover{

    border-color:#00d9ff;

    box-shadow:

    0 20px 60px rgba(0,150,255,.35);

}


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

.logo{

    font-size:32px;

    font-weight:800;

    letter-spacing:1px;

}

.logo span{

    background:
    var(--gradient);

    -webkit-background-clip:text;

    color:transparent;

}


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

nav ul{

    display:flex;

    gap:35px;

    list-style:none;

}

nav ul li a{

    text-decoration:none;

    color:#dbeafe;

    font-size:16px;

    font-weight:500;

    position:relative;

    transition:.3s;

}

nav ul li a:hover{

    color:#ffffff;

}

nav ul li a::after{

    content:"";

    position:absolute;

    width:0;

    height:2px;

    background:#00d9ff;

    left:0;

    bottom:-8px;

    transition:.3s;

}

nav ul li a:hover::after{

    width:100%;

}


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

.btn{

    display:inline-block;

    padding:
    14px 32px;

    border-radius:50px;

    text-decoration:none;

    color:white;

    font-weight:600;

    background:
    var(--gradient);

    box-shadow:
    0 10px 35px rgba(0,150,255,.35);

    transition:.4s;

}

.btn:hover{

    transform:
    translateY(-6px);

    box-shadow:
    0 25px 60px rgba(0,150,255,.6);

}

.btn2{

    display:inline-block;

    padding:
    14px 32px;

    border-radius:50px;

    text-decoration:none;

    color:white;

    border:
    1px solid #00d9ff;

    margin-left:15px;

    transition:.4s;

}

.btn2:hover{

    background:#0066ff;

    border-color:#0066ff;

}


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

.hero{

    width:90%;

    min-height:85vh;

    margin:
    170px auto 80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}

.hero-left{

    width:55%;

    animation:
    leftSlide 1.2s ease;

}

@keyframes leftSlide{

    from{

        opacity:0;

        transform:
        translateX(-80px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}

.tag{

    display:inline-block;

    padding:
    10px 22px;

    border-radius:50px;

    background:
    rgba(0,140,255,.15);

    color:#00d9ff;

    border:
    1px solid rgba(0,200,255,.3);

    margin-bottom:25px;

}

.hero h1{

    font-size:70px;

    line-height:1.1;

    font-weight:800;

}

.hero h1 span{

    background:
    var(--gradient);

    -webkit-background-clip:text;

    color:transparent;

}

.hero p{

    margin-top:25px;

    max-width:650px;

    font-size:18px;

    line-height:1.8;

    color:#cbd5e1;

}

.hero-btn{

    margin-top:35px;

}


/* =====================================
   HERO RIGHT GLASS CARD
===================================== */

.hero-right{

    width:40%;

    display:flex;

    justify-content:center;

    animation:floating 5s infinite;

}

@keyframes floating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

}

.glass-card{

    width:350px;

    padding:45px;

    text-align:center;

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

    backdrop-filter:
    blur(25px);

    border-radius:35px;

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

    box-shadow:
    0 30px 80px rgba(0,100,255,.35);

}

.glass-card h3{

    font-size:25px;

    margin-bottom:30px;

}

.circle{

    width:180px;

    height:180px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    conic-gradient(
        #00d9ff 0deg 350deg,
        #111827 350deg
    );

}

.circle span{

    width:140px;

    height:140px;

    background:#020617;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

    font-weight:800;

}

.glass-card p{

    margin-top:20px;

    color:#94a3b8;

}


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

.counter{

    width:90%;

    margin:70px auto 120px;

    display:grid;

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

    gap:25px;

}

.counter .box{

    position:relative;

    overflow:hidden;

    padding:40px 25px;

    text-align:center;

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

    backdrop-filter:
    blur(20px);

    border-radius:30px;

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

    transition:.5s;

}

.counter .box::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:#0066ff;

    filter:blur(100px);

    opacity:.35;

    top:-90px;

    right:-90px;

}

.counter .box:hover{

    transform:
    translateY(-15px)
    scale(1.04);

    border-color:#00d9ff;

    box-shadow:
    0 30px 70px rgba(0,150,255,.45);

}

.counter h2{

    font-size:50px;

    font-weight:900;

    background:
    var(--gradient);

    -webkit-background-clip:text;

    color:transparent;

}

.counter p{

    margin-top:12px;

    color:#cbd5e1;

    font-size:17px;

}


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

.services{

    width:90%;

    margin:auto;

    padding-bottom:120px;

}

.title{

    text-align:center;

    margin-bottom:70px;

}

.title span{

    color:#00d9ff;

    letter-spacing:3px;

    font-size:14px;

    font-weight:600;

}

.title h2{

    margin-top:15px;

    font-size:48px;

    font-weight:800;

}


/* =====================================
   SERVICE GRID
===================================== */

.service-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    position:relative;

    overflow:hidden;

    padding:35px 30px;

    min-height:320px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.03)
    );

    border-radius:30px;

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

    backdrop-filter:
    blur(20px);

    transition:.5s;

}

.service-card::before{

    content:"";

    position:absolute;

    width:200px;

    height:200px;

    background:#0066ff;

    filter:blur(100px);

    opacity:.25;

    top:-100px;

    right:-100px;

}

.service-card:hover{

    transform:
    perspective(1000px)
    rotateX(8deg)
    translateY(-15px);

    border-color:#00d9ff;

    box-shadow:
    0 40px 90px rgba(0,140,255,.45);

}

.service-card i{

    width:75px;

    height:75px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

    font-size:32px;

    color:#00d9ff;

    background:
    rgba(0,140,255,.15);

    margin-bottom:25px;

    transition:.5s;

}

.service-card:hover i{

    transform:
    rotateY(360deg);

    background:#0066ff;

    color:white;

}

.service-card h3{

    font-size:22px;

    margin-bottom:15px;

}

.service-card p{

    color:#cbd5e1;

    line-height:1.7;

    font-size:15px;

}

.service-card:hover::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:3px;

    background:
    var(--gradient);

}


/* =====================================
   WHY CHOOSE US
===================================== */

.why{

    width:90%;

    margin:120px auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}

.why .left{

    width:55%;

}

.why h2{

    font-size:52px;

    line-height:1.2;

    font-weight:900;

}

.why h2 span{

    background:
    var(--gradient);

    -webkit-background-clip:text;

    color:transparent;

}

.why p{

    margin:25px 0;

    color:#cbd5e1;

    font-size:18px;

    line-height:1.8;

}

.why ul{

    list-style:none;

}

.why ul li{

    margin:18px 0;

    font-size:17px;

    color:#e2e8f0;

    transition:.3s;

}

.why ul li:hover{

    color:#00d9ff;

    transform:
    translateX(10px);

}

.why .right{

    width:40%;

    display:flex;

    justify-content:center;

}


/* =====================================
   FOUNDERS SECTION
===================================== */

.founders{

    width:90%;

    margin:120px auto;

    position:relative;

}

.founders .title{

    text-align:center;

    margin-bottom:70px;

}

.founders .title span{

    color:#00d9ff;

    font-size:14px;

    font-weight:600;

    letter-spacing:3px;

}

.founders .title h2{

    margin-top:15px;

    font-size:50px;

    font-weight:900;

    background:
    linear-gradient(
        90deg,
        #ffffff,
        #00d9ff
    );

    -webkit-background-clip:text;

    color:transparent;

}


/* =====================================
   FOUNDER GRID
===================================== */

.founder-grid{

    display:grid;

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

    gap:35px;

}


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

.founder-card{

    position:relative;

    overflow:hidden;

    padding:40px 30px;

    text-align:center;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.03)
    );

    border-radius:35px;

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

    backdrop-filter:
    blur(25px);

    transition:.6s;

    transform-style:preserve-3d;

    opacity:0;

    animation:
    founderShow 1s forwards;

}

.founder-card:nth-child(1){

    animation-delay:.2s;

}

.founder-card:nth-child(2){

    animation-delay:.5s;

}

.founder-card:nth-child(3){

    animation-delay:.8s;

}

@keyframes founderShow{

    from{

        opacity:0;

        transform:
        translateY(80px)
        scale(.8)
        rotateX(30deg);

    }

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1)
        rotateX(0);

    }

}


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

.founder-card:hover{

    transform:
    translateY(-20px)
    rotateY(8deg);

    border-color:#00d9ff;

    box-shadow:
    0 40px 90px rgba(0,150,255,.5);

}


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

.founder-img{

    width:160px;

    height:160px;

    margin:auto;

    padding:5px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #0066ff,
        #00d9ff
    );

    position:relative;

    animation:
    imgGlow 4s infinite;

}

.founder-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:50%;

    border:
    5px solid #020617;

}

@keyframes imgGlow{

    0%,100%{

        box-shadow:
        0 0 20px rgba(0,217,255,.4);

    }

    50%{

        box-shadow:
        0 0 70px rgba(0,217,255,.9);

    }

}


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

.founder-card h3{

    margin-top:25px;

    font-size:26px;

    font-weight:800;

}

.founder-card .role{

    margin-top:8px;

    color:#00d9ff;

    font-weight:600;

    font-size:16px;

}

.founder-card h4{

    margin-top:8px;

    color:#00d9ff;

    font-weight:600;

    font-size:16px;

}

.founder-card p{

    color:#cbd5e1;

    line-height:1.7;

    margin-top:15px;

}


/* =====================================
   LINKEDIN BUTTON
===================================== */

.social-founder{

    margin-top:25px;

}

.social-founder a{

    display:inline-block;

    padding:10px 25px;

    border-radius:50px;

    text-decoration:none;

    color:white;

    border:
    1px solid #00d9ff;

    transition:.4s;

}

.social-founder a:hover{

    background:#0066ff;

    transform:
    translateY(-5px);

    box-shadow:
    0 15px 40px rgba(0,150,255,.5);

}


/* =====================================
   SHINE EFFECT
===================================== */

.founder-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.8s;

}

.founder-card:hover::before{

    left:130%;

}


/* =====================================
   FLOATING EFFECT
===================================== */

.founder-card:nth-child(1){

    animation:
    founderShow 1s forwards,
    founderFloat 5s infinite ease-in-out 1s;

}

.founder-card:nth-child(2){

    animation:
    founderShow 1s forwards,
    founderFloat 6s infinite ease-in-out 1.2s;

}

.founder-card:nth-child(3){

    animation:
    founderShow 1s forwards,
    founderFloat 7s infinite ease-in-out 1.5s;

}

@keyframes founderFloat{

    0%,100%{

        margin-top:0;

    }

    50%{

        margin-top:-15px;

    }

}


/* =====================================
   EXPERIENCE
===================================== */

.experience{

    width:300px;

    height:300px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:
    radial-gradient(
        circle,
        #0066ff,
        #020617
    );

    border:
    5px solid rgba(0,217,255,.4);

    box-shadow:
    0 0 80px rgba(0,150,255,.6);

    animation:
    pulse 3s infinite;

}

.experience h1{

    font-size:80px;

    font-weight:900;

}

.experience p{

    margin:0;

    color:white;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}


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

.cta{

    width:90%;

    margin:100px auto;

    padding:80px 40px;

    text-align:center;

    border-radius:40px;

    background:
    linear-gradient(
        135deg,
        rgba(0,102,255,.35),
        rgba(0,217,255,.15)
    );

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

    backdrop-filter:
    blur(20px);

    box-shadow:
    0 30px 80px rgba(0,100,255,.25);

}

.cta h2{

    font-size:48px;

    font-weight:900;

}

.cta p{

    margin:20px 0 35px;

    color:#dbeafe;

    font-size:20px;

}


/* =====================================
   OFFICE LOCATION SECTION
===================================== */

.office-section{

    padding:80px 5%;

    background:transparent;

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

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    color:#1b63d6;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-title h2{

    font-size:48px;

    color:#fff;

    margin:10px 0;

    font-weight:700;

}

.section-title p{

    color:#cbd5e1;

    max-width:650px;

    margin:auto;

    font-size:18px;

}

.office-grid{

    display:grid;

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

    gap:35px;

}

.office-card{

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

    backdrop-filter:
    blur(18px);

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

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

    border-radius:22px;

    overflow:hidden;

    box-shadow:
    0 15px 40px rgba(0,0,0,.30);

    transition:.35s;

}

.office-card:hover{

    transform:translateY(-8px);

    border-color:#1b63d6;

    box-shadow:
    0 20px 50px rgba(27,99,214,.35);

}

.office-image{

    height:260px;

    position:relative;

}

.office-image iframe{

    width:100%;

    height:100%;

    border:0;

}

.office-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:#1b63d6;

    color:#fff;

    padding:10px 18px;

    border-radius:8px;

    font-size:13px;

    font-weight:600;

}

.office-content{

    padding:60px 30px 35px;

    position:relative;

}

.office-icon{

    width:82px;

    height:82px;

    background:#1b63d6;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    position:absolute;

    top:-42px;

    left:50%;

    transform:translateX(-50%);

    border:
    5px solid rgba(2,6,23,.9);

}

.office-content h3{

    text-align:center;

    font-size:30px;

    color:#fff;

}

.office-content h4{

    text-align:center;

    color:#1b63d6;

    margin-bottom:30px;

}

.office-content ul{

    list-style:none;

    padding:0;

    margin:0;

}

.office-content li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:18px;

    color:#d1d5db;

    line-height:1.7;

}

.office-content li i{

    color:#1b63d6;

    width:22px;

    font-size:18px;

    margin-top:4px;

}

.office-btn{

    display:block;

    width:180px;

    margin:30px auto 0;

    text-align:center;

    background:#1b63d6;

    color:#fff;

    text-decoration:none;

    padding:13px;

    border-radius:40px;

    transition:.3s;

}

.office-btn:hover{

    background:#123b8b;

}

.office-stats{

    margin-top:70px;

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

    backdrop-filter:
    blur(18px);

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

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

    border-radius:20px;

    color:#fff;

    display:grid;

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

    overflow:hidden;

}

.stat-box{

    padding:35px;

    text-align:center;

    border-right:
    1px solid rgba(255,255,255,.12);

}

.stat-box:last-child{

    border:none;

}

.stat-box i{

    font-size:42px;

    color:#2f8cff;

    margin-bottom:15px;

}

.stat-box h3{

    font-size:42px;

    margin:0;

    color:#fff;

}

.stat-box p{

    margin-top:8px;

    color:#cbd5e1;

}


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

footer{

    padding:
    60px 20px 30px;

    text-align:center;

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

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

}

footer h2{

    font-size:35px;

    font-weight:900;

}

footer p{

    color:#94a3b8;

    margin:15px 0;

}


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

.social{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:30px 0;

}

.social a{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

    color:white;

    font-size:22px;

    transition:.4s;

}

.social a:hover{

    background:#0066ff;

    transform:
    translateY(-10px)
    rotate(10deg);

    box-shadow:
    0 20px 50px rgba(0,150,255,.5);

}

.copy{

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

    padding-top:20px;

    margin-top:30px;

}


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

@media(max-width:1200px){

    .service-grid{

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

    }

    .counter{

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

    }

    .founder-grid{

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

    }

    .hero h1{

        font-size:58px;

    }

}


/* =====================================
   TABLET / SMALL LAPTOP
===================================== */

@media(max-width:992px){

    header{

        width:95%;

    }

    nav ul{

        gap:15px;

    }

    .hero{

        flex-direction:column;

        text-align:center;

    }

    .hero-left,
    .hero-right,
    .why .left,
    .why .right{

        width:100%;

    }

    .hero p{

        margin-left:auto;

        margin-right:auto;

    }

    .why{

        flex-direction:column;

        text-align:center;

    }

    .why h2{

        font-size:40px;

    }

    .service-grid{

        grid-template-columns:1fr;

    }

    .counter{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:600px){

    header{

        width:94%;

        top:10px;

        padding:14px 18px;

        flex-direction:column;

        gap:15px;

    }

    .logo{

        font-size:28px;

    }

    nav ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:12px 18px;

    }

    nav ul li a{

        font-size:13px;

    }

    .hero{

        width:92%;

        margin-top:140px;

        margin-bottom:60px;

    }

    .hero h1{

        font-size:38px;

    }

    .hero p{

        font-size:16px;

    }

    .btn,
    .btn2{

        padding:12px 22px;

    }

    .glass-card{

        width:280px;

        padding:30px;

    }

    .circle{

        width:150px;

        height:150px;

    }

    .circle span{

        width:115px;

        height:115px;

    }

    .title h2{

        font-size:35px;

    }

    .founders{

        width:92%;

        margin:80px auto;

    }

    .founders .title{

        margin-bottom:40px;

    }

    .founders .title h2{

        font-size:32px;

        line-height:1.2;

    }

    .founders .title span{

        font-size:12px;

        letter-spacing:2px;

    }

    .founder-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .founder-card{

        width:100%;

        padding:30px 20px;

        min-height:auto;

        border-radius:28px;

    }

    .founder-img{

        width:135px;

        height:135px;

    }

    .founder-card h3{

        font-size:22px;

        margin-top:20px;

        word-break:break-word;

    }

    .founder-card h4{

        font-size:15px;

        margin-top:8px;

    }

    .founder-card p{

        font-size:14px;

        line-height:1.6;

        margin-top:12px;

    }

    .social-founder{

        margin-top:20px;

    }

    .social-founder a{

        padding:9px 22px;

        font-size:14px;

    }

    .cta{

        padding:50px 20px;

    }

    .cta h2{

        font-size:32px;

    }

    .experience{

        width:240px;

        height:240px;

    }

    .experience h1{

        font-size:60px;

    }

    .office-section{

        padding:60px 5%;

    }

    .office-grid{

        grid-template-columns:1fr;

    }

    .office-card{

        width:100%;

    }

    .office-image{

        height:220px;

    }

    .section-title h2{

        font-size:36px;

    }

    .office-content{

        padding:
        60px 20px 30px;

    }

    .office-content h3{

        font-size:26px;

    }

    .office-stats{

        grid-template-columns:1fr;

    }

    .stat-box{

        border-right:none;

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

    }

    .stat-box:last-child{

        border-bottom:none;

    }

}


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

@media(max-width:380px){

    header{

        width:94%;

    }

    .founders{

        width:94%;

    }

    .founder-card{

        padding:25px 15px;

    }

    .founder-img{

        width:120px;

        height:120px;

    }

    .founder-card h3{

        font-size:20px;

    }

    .founder-card p{

        font-size:13px;

    }

    nav ul{

        gap:8px 12px;

    }

    nav ul li a{

        font-size:12px;

    }

}


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

.fade-up{

    animation:
    fadeUp 1s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(40px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}


/* =====================================
   JS EFFECT CSS
===================================== */

.mouse-glow{

    position:fixed;

    width:250px;

    height:250px;

    background:#0066ff;

    filter:blur(120px);

    opacity:.25;

    pointer-events:none;

    z-index:-1;

    transform:
    translate(-50%,-50%);

}

.particle{

    position:fixed;

    bottom:-20px;

    width:6px;

    height:6px;

    background:#00d9ff;

    border-radius:50%;

    opacity:.5;

    animation:
    particleMove linear infinite;

    z-index:-1;

}

@keyframes particleMove{

    from{

        transform:
        translateY(0);

    }

    to{

        transform:
        translateY(-110vh);

    }

}

.ripple{

    position:absolute;

    width:100px;

    height:100px;

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

    border-radius:50%;

    transform:scale(0);

    animation:
    ripple .6s linear;

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}