*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
    scroll-behavior:smooth;
}

body{
    background:#071739;
    color:white;
}

/* NAVBAR */

.navbar{
    width:100%;
    padding:18px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    background:rgba(7,23,57,0.7);
    backdrop-filter:blur(10px);
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo img{
    width:45px;
}

.logo span{
    font-size:20px;
    font-weight:700;
}

.nav-links{
    display:flex;
    gap:30px;
    list-style:none;
}

.nav-links a{
    text-decoration:none;
    color:white;
    transition:0.3s;
}

.nav-links a:hover{
    color:#4DA8FF;
}

.btn-nav{
    padding:12px 24px;
    background:#4DA8FF;
    border-radius:50px;
    text-decoration:none;
    color:white;
}

/* HERO */

.hero{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:0 10%;
    background:
    linear-gradient(rgba(7,23,57,0.8),
    rgba(7,23,57,0.9)),
    url('../images/hero/bg.jpg');
    background-size:cover;
    background-position:center;
}

.hero-content h1{
    font-size:70px;
    margin-bottom:20px;
}

.hero-content p{
    color:#ccc;
    font-size:18px;
    line-height:1.8;
    max-width:800px;
    margin:auto;
}

.hero-buttons{
    margin-top:40px;
    display:flex;
    justify-content:center;
    gap:20px;
}

.btn-primary,
.btn-secondary{
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    transition:0.4s;
}

.btn-primary{
    background:#4DA8FF;
    color:white;
}

.btn-secondary{
    border:2px solid white;
    color:white;
}

.hero-cards{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
}

.hero-card{
    background:rgba(255,255,255,0.08);
    padding:25px;
    border-radius:20px;
    backdrop-filter:blur(10px);
}

.hero-card i{
    font-size:35px;
    color:#4DA8FF;
    margin-bottom:15px;
}

/* SECTION */

section{
    padding:100px 8%;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    font-size:45px;
    margin-bottom:15px;
}

.section-title p{
    color:#ccc;
}

/* ABOUT */
/* =========================
   ABOUT PREMIUM
========================= */

.about{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        to bottom,
        #071739,
        #0B254F
    );
}

/* GLOW */

.about-glow{

    position:absolute;

    width:500px;
    height:500px;

    background:
    rgba(77,168,255,0.12);

    border-radius:50%;

    top:-200px;
    left:-200px;

    filter:blur(100px);
}

/* WRAPPER */

.about-wrapper{

    margin-top:80px;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:70px;

    align-items:center;
}

/* IMAGE */

.about-image{

    position:relative;
}

.about-image img{

    width:100%;

    border-radius:35px;

    box-shadow:
    0 25px 50px rgba(0,0,0,0.25);
}

/* EXPERIENCE CARD */

.experience-card{

    position:absolute;

    bottom:30px;
    left:30px;

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

    backdrop-filter:blur(15px);

    border:
    1px solid rgba(255,255,255,0.1);

    padding:25px 35px;

    border-radius:25px;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.2);
}

@media(max-width:768px){

    .experience-card{

        display:none;

    }

}
.experience-card h3{

    font-size:40px;

    color:#4DA8FF;
}

.experience-card span{

    color:#ddd;
}

/* RIGHT */

.about-right{

    position:relative;
}

.about-tag{

    display:inline-block;

    padding:10px 22px;

    background:
    rgba(77,168,255,0.12);

    border:
    1px solid rgba(77,168,255,0.25);

    border-radius:50px;

    color:#4DA8FF;

    margin-bottom:25px;

    font-size:14px;

    font-weight:600;
}

/* TITLE */

.about-right h3{

    font-size:52px;

    line-height:1.3;

    margin-bottom:25px;
}

/* TEXT */

.about-right p{

    color:#c9d4e8;

    line-height:2;

    margin-bottom:20px;

    font-size:16px;
}

/* POINTS */

.about-points{

    margin-top:35px;

    display:grid;

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

    gap:20px;
}

.point{

    display:flex;

    align-items:center;

    gap:12px;

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

    padding:18px 20px;

    border-radius:18px;

    backdrop-filter:blur(10px);
}

.point i{

    color:#4DA8FF;
}

/* STATS */

.about-stats{

    margin-top:45px;

    display:grid;

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

    gap:25px;
}

/* STAT BOX */

.stat-box{

    text-align:center;

    padding:30px 20px;

    border-radius:25px;

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

    backdrop-filter:blur(10px);

    border:
    1px solid rgba(255,255,255,0.08);

    transition:0.5s;
}

.stat-box:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 40px rgba(77,168,255,0.18);
}

.stat-box h4{

    font-size:38px;

    color:#4DA8FF;

    margin-bottom:10px;
}

.stat-box span{

    color:#ddd;

    font-size:15px;
}

/* RESPONSIVE */

@media(max-width:991px){

    .about-wrapper{

        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .about-right h3{

        font-size:38px;
    }

    .about-points{

        grid-template-columns:1fr;
    }

    .about-stats{

        grid-template-columns:1fr;
    }

}

/* SERVICES */

/* =========================
   SERVICES PREMIUM
========================= */

.services{

    background:
    linear-gradient(
        to bottom,
        #071739,
        #0B254F
    );

    position:relative;

    overflow:hidden;
}

/* MINI TITLE */

.mini-title{

    display:inline-block;

    padding:10px 22px;

    background:
    rgba(77,168,255,0.12);

    border:
    1px solid rgba(77,168,255,0.25);

    border-radius:50px;

    color:#4DA8FF;

    margin-bottom:25px;

    font-size:14px;

    letter-spacing:1px;

    font-weight:600;
}

/* TITLE */

.services .section-title h2{

    font-size:55px;

    line-height:1.3;

    margin-bottom:20px;
}

.services .section-title p{

    max-width:750px;

    margin:auto;

    color:#c9d4e8;

    line-height:1.9;

    font-size:17px;
}

/* WRAPPER */

.services-wrapper{

    margin-top:80px;

    display:grid;

    grid-template-columns:
    1fr 2fr;

    gap:40px;
}

/* FEATURE CARD */

.service-feature{

    position:relative;

    border-radius:35px;

    overflow:hidden;

    padding:50px 40px;

    background:
    linear-gradient(
        135deg,
        rgba(77,168,255,0.15),
        rgba(255,255,255,0.05)
    );

    backdrop-filter:blur(18px);

    border:
    1px solid rgba(255,255,255,0.1);

    box-shadow:
    0 20px 45px rgba(0,0,0,0.2);
}

/* GLOW */

.service-feature::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    background:
    rgba(77,168,255,0.18);

    border-radius:50%;

    top:-120px;
    right:-120px;
}

/* FEATURE */

.feature-content{

    position:relative;

    z-index:2;
}

.feature-content span{

    color:#4DA8FF;

    font-weight:600;

    font-size:15px;
}

.feature-content h3{

    margin:20px 0;

    font-size:42px;

    line-height:1.4;
}

.feature-content p{

    color:#c9d4e8;

    line-height:1.9;

    margin-bottom:35px;
}

/* POINTS */

.feature-points{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.point{

    display:flex;

    align-items:center;

    gap:12px;
}

.point i{

    color:#4DA8FF;
}

/* SERVICES GRID */

.services-container{

    display:grid;

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

    gap:30px;
}

/* CARD */

.service-card{

    position:relative;

    padding:40px 35px;

    border-radius:30px;

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

    backdrop-filter:blur(15px);

    border:
    1px solid rgba(255,255,255,0.08);

    transition:0.5s;

    overflow:hidden;
}

/* HOVER */

.service-card:hover{

    transform:
    translateY(-15px);

    box-shadow:
    0 20px 45px rgba(77,168,255,0.18);
}

/* LIGHT EFFECT */

.service-card::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:
    rgba(77,168,255,0.12);

    border-radius:50%;

    top:-80px;
    right:-80px;
}

/* ICON */

.service-icon{

    width:80px;
    height:80px;

    border-radius:25px;

    display:flex;

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

    background:
    linear-gradient(
        135deg,
        #4DA8FF,
        #133E87
    );

    margin-bottom:30px;

    box-shadow:
    0 10px 30px rgba(77,168,255,0.3);
}

.service-icon i{

    font-size:34px;

    color:white;
}

/* TITLE */

.service-card h3{

    font-size:24px;

    margin-bottom:18px;
}

/* TEXT */

.service-card p{

    color:#c9d4e8;

    line-height:1.8;

    font-size:15px;
}

/* RESPONSIVE */

@media(max-width:991px){

    .services-wrapper{

        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .services .section-title h2{

        font-size:38px;
    }

    .feature-content h3{

        font-size:32px;
    }

}

/* PORTFOLIO */

/* =========================
   PORTFOLIO PREMIUM
========================= */

.portfolio{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        to bottom,
        #071739,
        #0B254F
    );
}

/* TITLE */

.portfolio .section-title h2{

    font-size:55px;

    line-height:1.3;

    margin-bottom:20px;
}

.portfolio .section-title p{

    max-width:700px;

    margin:auto;

    color:#c9d4e8;

    line-height:1.9;
}

/* GRID */

.portfolio-container{

    margin-top:80px;

    display:grid;

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

    gap:40px;
}

/* CARD */

.portfolio-card{

    position:relative;

    border-radius:35px;

    overflow:hidden;

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

    backdrop-filter:blur(15px);

    border:
    1px solid rgba(255,255,255,0.08);

    transition:0.6s;

    box-shadow:
    0 20px 45px rgba(0,0,0,0.15);
}

/* HOVER */

.portfolio-card:hover{

    transform:
    translateY(-18px);

    box-shadow:
    0 30px 60px rgba(77,168,255,0.2);
}

/* IMAGE */

.portfolio-image{

    overflow:hidden;

    height:260px;
}

.portfolio-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.7s;
}

/* IMAGE HOVER */

.portfolio-card:hover .portfolio-image img{

    transform:scale(1.12);
}

/* CONTENT */

.portfolio-content{

    padding:35px;
}

/* TOP */

.portfolio-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;
}

/* CATEGORY */

.portfolio-category{

    padding:10px 18px;

    border-radius:50px;

    background:
    rgba(77,168,255,0.12);

    color:#4DA8FF;

    font-size:13px;

    font-weight:600;

    border:
    1px solid rgba(77,168,255,0.2);
}

/* ICON */

.portfolio-icon{

    width:55px;
    height:55px;

    border-radius:18px;

    display:flex;

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

    background:
    linear-gradient(
        135deg,
        #4DA8FF,
        #133E87
    );

    box-shadow:
    0 10px 25px rgba(77,168,255,0.25);
}

.portfolio-icon i{

    color:white;

    font-size:20px;
}

/* TITLE */

.portfolio-content a{

    text-decoration:none;
}

.portfolio-content h3{

    font-size:32px;

    margin-bottom:18px;

    color:white;

    transition:0.4s;
}

/* TITLE HOVER */

.portfolio-content h3:hover{

    color:#4DA8FF;

    letter-spacing:1px;
}

/* TEXT */

.portfolio-content p{

    color:#c9d4e8;

    line-height:1.9;

    margin-bottom:30px;

    font-size:15px;
}

/* FOOTER */

.portfolio-footer{

    display:flex;

    gap:12px;

    flex-wrap:wrap;
}

.portfolio-footer span{

    padding:10px 16px;

    border-radius:50px;

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

    color:#ddd;

    font-size:13px;

    border:
    1px solid rgba(255,255,255,0.08);
}

/* RESPONSIVE */

@media(max-width:768px){

    .portfolio .section-title h2{

        font-size:38px;
    }

    .portfolio-content h3{

        font-size:26px;
    }

}

/* CONTACT */


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

.contact{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        to bottom,
        #071739,
        #0B254F
    );
}

/* WRAPPER */

.contact-wrapper{

    margin-top:80px;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:40px;

    align-items:center;
}

/* LEFT */

.contact-left{

    display:flex;

    flex-direction:column;

    gap:25px;
}

/* CARD */

.contact-card{

    display:flex;

    align-items:center;

    gap:25px;

    padding:30px;

    border-radius:30px;

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

    backdrop-filter:blur(15px);

    border:
    1px solid rgba(255,255,255,0.08);

    transition:0.5s;
}

/* HOVER */

.contact-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 40px rgba(77,168,255,0.15);
}

/* ICON */

.contact-icon{

    width:80px;
    height:80px;

    border-radius:25px;

    display:flex;

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

    background:
    linear-gradient(
        135deg,
        #4DA8FF,
        #133E87
    );

    box-shadow:
    0 10px 30px rgba(77,168,255,0.25);
}

.contact-icon i{

    font-size:30px;

    color:white;
}

/* INFO */

.contact-info span{

    color:#4DA8FF;

    font-size:14px;
}

.contact-info h3{

    margin-top:8px;

    font-size:24px;
}

/* RIGHT */

.contact-box{

    position:relative;

    padding:60px;

    border-radius:35px;

    background:
    linear-gradient(
        135deg,
        rgba(77,168,255,0.12),
        rgba(255,255,255,0.04)
    );

    backdrop-filter:blur(18px);

    border:
    1px solid rgba(255,255,255,0.08);

    overflow:hidden;
}

/* GLOW */

.contact-box::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    background:
    rgba(77,168,255,0.12);

    border-radius:50%;

    top:-120px;
    right:-120px;
}

/* TAG */

.contact-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

    background:
    rgba(77,168,255,0.12);

    color:#4DA8FF;

    font-size:13px;

    font-weight:600;

    margin-bottom:25px;
}

/* TITLE */

.contact-box h3{

    font-size:42px;

    margin-bottom:20px;

    line-height:1.4;
}

/* TEXT */

.contact-box p{

    color:#c9d4e8;

    line-height:1.9;

    margin-bottom:40px;
}

/* BUTTON */

.contact-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 35px;

    border-radius:60px;

    text-decoration:none;

    background:
    linear-gradient(
        135deg,
        #25D366,
        #128C7E
    );

    color:white;

    font-weight:600;

    transition:0.5s;

    box-shadow:
    0 15px 35px rgba(37,211,102,0.3);
}

/* BUTTON HOVER */

.contact-btn:hover{

    transform:
    translateY(-6px);

    box-shadow:
    0 20px 40px rgba(37,211,102,0.4);
}

/* NOTE */

.contact-note{

    margin-top:35px;

    display:flex;

    flex-wrap:wrap;

    gap:15px;
}

.note-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:50px;

    background:
    rgba(255,255,255,0.05);
}

.note-item i{

    color:#4DA8FF;
}

/* RESPONSIVE */

@media(max-width:991px){

    .contact-wrapper{

        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .contact-box{

        padding:40px;
    }

    .contact-box h3{

        font-size:34px;
    }

}
/* =========================
   RESPONSIVE CONTACT FIX
========================= */

@media(max-width:991px){

    .contact{

        padding:90px 6%;
    }

    .contact-wrapper{

        grid-template-columns:1fr;

        gap:35px;
    }

    /* CARD */

    .contact-card{

        width:100%;

        padding:25px;

        border-radius:25px;

        flex-wrap:wrap;
    }

    /* ICON */

    .contact-icon{

        width:70px;
        height:70px;

        min-width:70px;
    }

    .contact-icon i{

        font-size:26px;
    }

    /* TEXT */

    .contact-info{

        flex:1;
    }

    .contact-info h3{

        font-size:20px;

        word-break:break-word;
    }

    /* BOX */

    .contact-box{

        width:100%;

        padding:45px 35px;

        border-radius:30px;
    }

    /* TITLE */

    .contact-box h3{

        font-size:36px;

        line-height:1.4;
    }

}

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

@media(max-width:768px){

    .contact{

        padding:80px 5%;
    }

    /* WRAPPER */

    .contact-wrapper{

        margin-top:60px;
    }

    /* CARD */

    .contact-card{

        gap:18px;

        padding:22px;

        border-radius:22px;
    }

    /* ICON */

    .contact-icon{

        width:60px;
        height:60px;

        border-radius:18px;
    }

    .contact-icon i{

        font-size:22px;
    }

    /* INFO */

    .contact-info span{

        font-size:13px;
    }

    .contact-info h3{

        font-size:18px;

        line-height:1.5;
    }

    /* BOX */

    .contact-box{

        padding:35px 25px;

        border-radius:25px;
    }

    /* TITLE */

    .contact-box h3{

        font-size:30px;
    }

    /* TEXT */

    .contact-box p{

        font-size:15px;

        line-height:1.8;
    }

    /* BUTTON */

    .contact-btn{

        width:100%;

        justify-content:center;

        padding:16px 20px;

        font-size:15px;

        text-align:center;
    }

    /* NOTE */

    .contact-note{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;
    }

    .note-item{

        width:100%;

        justify-content:flex-start;
    }

}

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

@media(max-width:480px){

    .contact{

        padding:70px 4%;
    }

    /* CARD */

    .contact-card{

        flex-direction:column;

        align-items:flex-start;

        text-align:left;
    }

    /* ICON */

    .contact-icon{

        width:55px;
        height:55px;
    }

    /* INFO */

    .contact-info h3{

        font-size:16px;
    }

    /* BOX */

    .contact-box{

        padding:30px 20px;
    }

    .contact-box h3{

        font-size:26px;
    }

    /* BUTTON */

    .contact-btn{

        font-size:14px;

        padding:15px;
    }

}






/* FOOTER */

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

.footer{

    position:relative;

    overflow:hidden;

    padding:100px 8% 40px;

    background:
    linear-gradient(
        180deg,
        #06142E 0%,
        #071739 100%
    );
}

/* GLOW */

.footer-glow{

    position:absolute;

    width:400px;
    height:400px;

    background:
    rgba(77,168,255,0.10);

    border-radius:50%;

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

    filter:blur(120px);
}

/* TOP */

.footer-top{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
    1.5fr 1fr 1fr 1.2fr;

    gap:50px;
}

/* BRAND */

.footer-brand h2{

    font-size:42px;

    margin:18px 0;

    color:white;
}

.footer-brand p{

    color:#c9d4e8;

    line-height:2;

    font-size:15px;

    max-width:350px;
}

/* TAG */

.footer-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:
    rgba(77,168,255,0.12);

    border:
    1px solid rgba(77,168,255,0.2);

    color:#4DA8FF;

    font-size:13px;

    font-weight:600;
}

/* LINKS */

.footer-links h3,
.footer-contact h3{

    margin-bottom:25px;

    font-size:22px;

    color:white;
}

.footer-links{

    display:flex;

    flex-direction:column;
}

.footer-links a{

    margin-bottom:15px;

    text-decoration:none;

    color:#c9d4e8;

    transition:0.4s;

    width:max-content;
}

/* HOVER */

.footer-links a:hover{

    color:#4DA8FF;

    transform:translateX(8px);
}

/* CONTACT */

.footer-contact p{

    color:#c9d4e8;

    line-height:1.9;

    margin-bottom:30px;
}

/* BUTTON */

.footer-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 28px;

    border-radius:60px;

    background:
    linear-gradient(
        135deg,
        #25D366,
        #128C7E
    );

    text-decoration:none;

    color:white;

    font-weight:600;

    transition:0.5s;

    box-shadow:
    0 15px 35px rgba(37,211,102,0.3);
}

/* BUTTON HOVER */

.footer-btn:hover{

    transform:
    translateY(-6px);

    box-shadow:
    0 20px 45px rgba(37,211,102,0.4);
}

/* LINE */

.footer-line{

    margin:70px 0 35px;

    width:100%;
    height:1px;

    background:
    rgba(255,255,255,0.08);
}

/* BOTTOM */

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;
}

/* COPYRIGHT */

.copy{

    color:#c9d4e8;

    font-size:14px;
}

/* SOCIAL */

.socials{

    display:flex;

    gap:18px;
}

.socials a{

    width:52px;
    height:52px;

    border-radius:18px;

    display:flex;

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

    text-decoration:none;

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

    border:
    1px solid rgba(255,255,255,0.08);

    color:white;

    transition:0.5s;
}

/* HOVER */

.socials a:hover{

    transform:
    translateY(-8px);

    background:
    linear-gradient(
        135deg,
        #4DA8FF,
        #133E87
    );

    box-shadow:
    0 15px 35px rgba(77,168,255,0.25);
}

/* RESPONSIVE */

@media(max-width:1100px){

    .footer-top{

        grid-template-columns:
        1fr 1fr;
    }

}

@media(max-width:768px){

    .footer{

        padding:80px 6% 35px;
    }

    .footer-top{

        grid-template-columns:1fr;

        gap:45px;
    }

    .footer-brand h2{

        font-size:34px;
    }

    .footer-bottom{

        flex-direction:column;

        align-items:flex-start;
    }

}

@media(max-width:480px){

    .footer-brand h2{

        font-size:28px;
    }

    .socials{

        flex-wrap:wrap;
    }

}
/* =========================
   MAGIC SCROLL INDICATOR
========================= */

.scroll-indicator{

    position:fixed;

    bottom:30px;
    right:30px;

    z-index:99999;

    pointer-events:none;

    transition:0.5s;
}

/* TEXT */

.scroll-text{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:16px 26px;

    border-radius:60px;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    color:white;

    backdrop-filter:blur(20px);

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

    border:
    1px solid rgba(255,255,255,0.15);

    overflow:hidden;

    animation:
    floaty 2s ease-in-out infinite;
}

/* RAINBOW MAGIC */

.scroll-text::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:60px;

    background:
    linear-gradient(
        90deg,
        red,
        orange,
        yellow,
        lime,
        cyan,
        blue,
        violet,
        red
    );

    background-size:400%;

    z-index:-1;

    animation:
    rainbowMove 5s linear infinite;

    filter:blur(12px);

    opacity:0.9;
}

/* FLOAT */

@keyframes floaty{

    0%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(-8px);
    }

    100%{

        transform:
        translateY(0px);
    }

}

/* RAINBOW */

@keyframes rainbowMove{

    0%{

        background-position:0%;
    }

    100%{

        background-position:400%;
    }

}

/* HIDE */

.scroll-indicator.hide{

    opacity:0;

    transform:
    translateY(30px);
}

/* MOBILE */

@media(max-width:768px){

    .scroll-indicator{

        bottom:20px;
        right:20px;
    }

    .scroll-text{

        padding:14px 20px;

        font-size:12px;
    }

}


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

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

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

    overflow:hidden;

    padding:120px 8%;
}

/* =========================
   SLIDER
========================= */

.hero-slider{

    position:absolute;

    inset:0;

    z-index:-3;
}

/* SLIDE */

.slide{

    position:absolute;

    width:100%;
    height:100%;

    opacity:0;

    transition:1.5s ease-in-out;

    background-size:cover;

    background-position:center;
}

/* ACTIVE */

.slide.active{

    opacity:1;

    transform:scale(1.05);
}

/* IMAGES */

.slide:nth-child(1){

    background-image:
    url("../images/bg/bg-1.png");
}

.slide:nth-child(2){

    background-image:
    url("../images/bg/bg-2.png");
}

.slide:nth-child(3){

    background-image:
    url("../images/bg/bg-3.png");
}

/* OVERLAY */

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to right,
        rgba(3,10,25,0.92),
        rgba(3,10,25,0.75)
    );

    z-index:-2;
}

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

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:-1;
}

.hero-glow-1{

    width:400px;
    height:400px;

    background:
    rgba(77,168,255,0.18);

    top:-120px;
    left:-120px;
}

.hero-glow-2{

    width:350px;
    height:350px;

    background:
    rgba(77,168,255,0.12);

    bottom:-120px;
    right:-120px;
}

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

.hero-content{

    max-width:850px;

    position:relative;

    z-index:2;
}

/* TAG */

.hero-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:
    rgba(77,168,255,0.12);

    border:
    1px solid rgba(77,168,255,0.25);

    color:#4DA8FF;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:28px;

    backdrop-filter:blur(12px);
}

/* TITLE */

.hero-content h1{

    font-size:78px;

    line-height:1.15;

    margin-bottom:30px;

    font-weight:800;

    color:white;
}

/* HIGHLIGHT */

.hero-content h1 span{

    background:
    linear-gradient(
        90deg,
        #4DA8FF,
        #8ED6FF
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

/* DESCRIPTION */

.hero-content p{

    max-width:700px;

    color:#d6e3f5;

    line-height:2;

    font-size:18px;

    margin-bottom:45px;
}

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

.hero-stats{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

    margin-bottom:45px;
}

/* ITEM */

.hero-stat{

    padding:22px 30px;

    border-radius:25px;

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

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(15px);

    min-width:170px;
}

/* NUMBER */

.hero-stat h3{

    font-size:30px;

    color:#4DA8FF;

    margin-bottom:8px;
}

/* TEXT */

.hero-stat span{

    color:#dbe7ff;

    font-size:15px;
}

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

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

/* PRIMARY */

.btn-primary{

    padding:18px 34px;

    border-radius:60px;

    background:
    linear-gradient(
        135deg,
        #4DA8FF,
        #133E87
    );

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:0.5s;

    box-shadow:
    0 18px 40px rgba(77,168,255,0.3);
}

/* HOVER */

.btn-primary:hover{

    transform:
    translateY(-6px);

    box-shadow:
    0 25px 50px rgba(77,168,255,0.35);
}

/* SECONDARY */

.btn-secondary{

    padding:18px 34px;

    border-radius:60px;

    border:
    1px solid rgba(255,255,255,0.15);

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

    backdrop-filter:blur(12px);

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:0.5s;
}

/* HOVER */

.btn-secondary:hover{

    transform:
    translateY(-6px);

    background:
    rgba(255,255,255,0.12);
}

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

@media(max-width:991px){

    .hero-content h1{

        font-size:58px;
    }

}

@media(max-width:768px){

    .hero{

        padding:120px 6%;
    }

    .hero-content h1{

        font-size:42px;
    }

    .hero-content p{

        font-size:16px;
    }

    .hero-stat{

        width:100%;
    }

}

@media(max-width:480px){

    .hero-content h1{

        font-size:34px;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        text-align:center;
    }

}







.portfolio-overlay a{
    text-decoration:none;
}

.portfolio-overlay h3{
    color:white;
    transition:0.4s;
}

.portfolio-overlay h3:hover{
    color:#4DA8FF;
    letter-spacing:1px;
}




/* RESPONSIVE */

@media(max-width:768px){

    .nav-links{
        display:none;
    }

    .btn-nav{
        display:none;
    }

    .hero-content h1{
        font-size:45px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .about-boxes{
        flex-direction:column;
    }

}