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


.hero-bg{

    position:relative;

    width:100%;

    height:100vh;

    display:flex;

    align-items:center;


    background-image:
    linear-gradient(
        rgba(0,0,0,.70),
        rgba(0,0,0,.70)
    ),
    url("../assets/herobg.jpg");


    background-size:100% 100%;

    background-position:center;

    background-repeat:no-repeat;


    overflow:hidden;


    animation:heroZoom 18s infinite alternate ease-in-out;

}


/* Background cinematic movement */

@keyframes heroZoom{

    0%{

        background-size:100% 100%;

        background-position:center;

    }


    100%{

        background-size:110% 110%;

        background-position:center;

    }

}



/* Glow biru atas */

.hero-bg::before{

    content:"";


    position:absolute;


    width:700px;

    height:700px;


    background:#18BFFF;


    filter:blur(220px);


    opacity:.18;


    top:-250px;

    right:-200px;


    animation:glowMove 10s infinite alternate ease-in-out;


}



/* Glow bawah */

.hero-bg::after{


    content:"";


    position:absolute;


    width:600px;

    height:600px;


    background:#18BFFF;


    filter:blur(180px);


    opacity:.12;


    bottom:-250px;

    left:-150px;


    animation:glowMove2 12s infinite alternate ease-in-out;


}





@keyframes glowMove{


    from{

        transform:translate(0,0);

    }


    to{

        transform:translate(-100px,80px);

    }


}




@keyframes glowMove2{


    from{

        transform:translate(0,0);

    }


    to{

        transform:translate(120px,-80px);

    }


}






/* Hero Content */


.hero-content{


    position:relative;


    z-index:2;


    max-width:1280px;


    width:100%;


    margin:auto;


    padding:0 32px;


}





/* Subtitle */

.hero-subtitle{


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


    text-transform:uppercase;


    letter-spacing:4px;


    font-size:15px;


    font-weight:600;


    margin-bottom:20px;



    opacity:0;


    animation:fadeUp .8s ease forwards;


}




/* Heading */


.hero-title{


    font-size:64px;


    line-height:62px;


    font-weight:700;


    color:#3FD2FF;


    max-width:1200px;



    opacity:0;


    transform:translateY(40px);


    animation:fadeUp .9s ease forwards;


    animation-delay:.3s;


}




.hero-white{


    color:#ffffff;


}




/* Description */


.hero-description{


    width:720px;


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


    font-size:18px;


    line-height:25px;


    margin-top:20px;


    margin-bottom:50px;



    opacity:0;


    transform:translateY(40px);


    animation:fadeUp .9s ease forwards;


    animation-delay:.6s;



}





/* Button */


.hero-button{


    display:flex;


    gap:20px;



    opacity:0;


    transform:translateY(40px);


    animation:fadeUp .9s ease forwards;


    animation-delay:.9s;



}




.btn-primary{


    background:#18BFFF;


    color:white;


    padding:16px 36px;


    border-radius:12px;


    font-weight:600;


    transition:.3s;


}



.btn-primary:hover{


    background:#35c9ff;


    transform:translateY(-2px);


}




.btn-secondary{


    border:1px solid white;


    color:white;


    padding:16px 36px;


    border-radius:12px;


    font-weight:600;


    transition:.3s;


}



.btn-secondary:hover{


    background:white;


    color:black;


}




/* Animation Text */


@keyframes fadeUp{


    from{


        opacity:0;


        transform:translateY(40px);


    }


    to{


        opacity:1;


        transform:translateY(0);


    }


}

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

/* Laptop Besar */
@media (max-width:1400px){

    .hero-content{

        max-width:1200px;
        padding:0 50px;

    }

    .hero-title{

        font-size:58px;
        line-height:58px;

    }

    .hero-description{

        width:650px;

    }

}


/* Laptop */
@media (max-width:1200px){

    .hero-content{

        padding:0 45px;

    }

    .hero-title{

        font-size:52px;
        line-height:54px;

    }

    .hero-description{

        width:600px;
        font-size:17px;

    }

}


/* Tablet */
@media (max-width:992px){

    .hero-bg{

        height:100vh;
        min-height:750px;

        background-position:center center;

    }

    .hero-content{

        padding:0 40px;

    }

    .hero-title{

        font-size:46px;
        line-height:50px;

    }

    .hero-description{

        width:100%;
        max-width:600px;

        font-size:17px;
        line-height:28px;

        margin-bottom:40px;

    }

}


/* Mobile */
/* Mobile */
@media (max-width:768px){

    .hero-bg{

        height:100vh;
        min-height:700px;

        background-position:center;

    }

    .hero-content{

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

        text-align:left;

        padding:0 28px;

    }

    .hero-content .max-w-\[950px\]{

        width:100%;

    }

    .hero-subtitle{

        font-size:13px;

        letter-spacing:3px;

    }

    .hero-title{

        font-size:38px;

        line-height:44px;

    }

    .hero-description{

        width:100%;

        font-size:16px;

        line-height:28px;

        margin-left:0;
        margin-right:0;

    }

    .hero-button{

        justify-content:flex-start;

        flex-wrap:wrap;

        gap:15px;

    }

    .btn-primary,
    .btn-secondary{

        width:220px;

        text-align:center;

        padding:15px 25px;

    }

}

/* Small Mobile */
/* Small Mobile */
@media (max-width:576px){

    .hero-content{

        padding:0 22px;

    }

    .hero-subtitle{

        font-size:12px;

        margin-bottom:18px;

    }

    .hero-title{

        font-size:32px;

        line-height:38px;

    }

    .hero-description{

        font-size:15px;

        line-height:26px;

        margin-top:18px;
        margin-bottom:35px;

    }

    .hero-button{

        flex-direction:column;

        align-items:flex-start;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;
        max-width:280px;

        text-align:center;

    }

}


/* iPhone SE & Android kecil */
/* iPhone SE & Android kecil */
@media (max-width:380px){

    .hero-content{

        padding:0 18px;

    }

    .hero-title{

        font-size:28px;

        line-height:34px;

    }

    .hero-description{

        font-size:14px;

        line-height:24px;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;
        max-width:100%;

        padding:14px 20px;

        text-align:center;

    }

}