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

.hero-bg{

    position: relative;

    min-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: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;

}

/* Glow biru */

.hero-bg::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    background:#18BFFF;

    filter:blur(220px);

    opacity:.18;

    top:-250px;
    right:-200px;

}

/* Glow bawah */

.hero-bg::after{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    background:#18BFFF;

    filter:blur(180px);

    opacity:.12;

    bottom:-250px;
    left:-150px;

}

/* Hero Content */

.hero-content{

    position:relative;

    z-index:2;

    max-width:1280px;

    width:100%;

    margin:auto;

    padding:0 100px;

}



/* Heading */

.hero-title{
    font-size:64px;
    line-height:100px;
    font-weight:700;
    color:#3FD2FF;

    max-width:1200px;
}

.hero-white{
    color:#ffffff;
}

/* Description */

.hero-description{
    width:720px;
    color:rgba(255,255,255,.75);
    font-size:25px;
    line-height:35px;

    margin-top:20px;      /* Tambahkan ini */
    margin-bottom:50px;
}

/* Button */

.hero-button{

    display:flex;

    gap:20px;

}

.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;

}

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

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

    .hero-content{

        padding:0 60px;

    }

    .hero-title{

        font-size:54px;

        line-height:78px;

    }

    .hero-description{

        width:620px;

        font-size:22px;

        line-height:33px;

    }

}


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

    .hero-content{

        padding:0 40px;

    }

    .hero-title{

        font-size:46px;

        line-height:64px;

    }

    .hero-description{

        width:100%;

        max-width:600px;

        font-size:20px;

        line-height:32px;

    }

}


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

    .hero-content{

        padding:0 28px;

        text-align:left;

    }

    .hero-title{

        font-size:38px;

        line-height:52px;

    }

    .hero-description{

        width:100%;

        font-size:17px;

        line-height:29px;

        margin-bottom:35px;

    }

    .hero-button{

        justify-content:flex-start;

        flex-wrap:wrap;

        gap:15px;

    }

    .btn-primary,
    .btn-secondary{

        width:220px;

        text-align:center;

    }

}


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

    .hero-content{

        padding:0 22px;

    }

    .hero-title{

        font-size:30px;

        line-height:42px;

    }

    .hero-description{

        font-size:15px;

        line-height:26px;

    }

    .hero-button{

        flex-direction:column;

        align-items:flex-start;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:260px;

        padding:15px 24px;

    }

}


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

    .hero-content{

        padding:0 18px;

    }

    .hero-title{

        font-size:27px;

        line-height:38px;

    }

    .hero-description{

        font-size:14px;

        line-height:24px;

    }

    .btn-primary,
    .btn-secondary{

        max-width:100%;

    }

}