body{
    margin: 0;
    min-height: 100vh;

    display: flex;
    flex-direction: column;

     overflow-x: clip;
}

#headerNavbar {
    background-color: rgb(240, 240, 234, 0.8);
    backdrop-filter: blur(5px);

    display: flex;
    justify-content: space-evenly;  
    align-items: center;

    gap: 70 vh;

    width: 100%;
    position: fixed; 
    left: 0;
    top: 0;
    
    padding-top: 28px;
    padding-bottom: 28px;
    margin: 0;
    z-index: 1;    

    transition: top 0.7s;
}

.logo-alsa-text{
    display: flex;
    gap: 10px;
}

.logo {
    /* perbandingan 11:9*/
    width: 77px;
    height: 63px;

}

.all-text{
    display: flex;
    flex-direction: column;
    
    /* karena flex-direction: column, ketengahin objek secara vertikal pake justify-content, bukan align-items*/
    justify-content: center;
    
}

.alsa-text{
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 1.5px;
    text-decoration: none;
    letter-spacing: 0.3px;
}
.alsa-text-mini{
    color: var(--primary-color);
    font-size: small;
    margin: 0;
    text-decoration: none;
}

.nav-links{
    display: flex;
    gap: 30px;
    opacity: 1;
    visibility: visible;
}

.nav-links a{
    color: var(--primary-color);
    text-decoration: none;
    font-weight: normal;
    position: relative;
}

/* tambah animasi garis dibawah tulisan kuncinya disini */
/* source: deepsite */

.nav-links a::after{
    background: var(--primary-color);

    content: '';
    position: absolute;

    width: 0;
    height: 2px; 
    bottom: -5px;
    left: 0;

    transition: width 0.7s ease;
}

.nav-links a:hover::after{
    width: 100%;
}

.dropdown{
    position: relative;
}

.dropdown-btn{
    border: none;
    background-color: rgb(240, 240, 234, 0.0);
    color: var(--primary-color);
    font-size: 16px;
}

.dropdown-content{

    /*display: none; itu gak bisa di animasiin/transisiin, cara akalin pake opacity dan visibility supaya ada animasi smooth pas hover*/
    /* source:  google search AI extraction*/

    opacity : 0;
    visibility: hidden;
    
    background-color: var(--secondary-color);
    
    position: absolute;
    z-index: 1;

    border-radius: 12px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
    transition: opacity 0.3s ease, box-shadow 0.3s ease, /* buat transisi fade in*/
                visibility 0.2s ease; /* buat transisi fade out*/

}


.dropdown-content a{
    color: var(--primary-color);
    text-decoration: none;
    display: block;
    margin: 20px;
}


.dropdown:hover .dropdown-content {
    /* display: block; jangan dipake,  mencegah dia ada animasi (kayaknya)*/
    visibility: visible;
    opacity: 1;

    border-radius: 12px;
    box-shadow:  0px 3px 4px 0px rgba(0,0,0,0.2);   
}

.dropdown:hover::after .dropdown-content {
    /* display: block; jangan dipake, mencegah dia ada animasi (kayaknya)*/
    visibility: hidden;
    opacity: 0;

    border-radius: 12px;
    box-shadow:  0px 0px 0px 0px rgba(0,0,0,0.0);
}

/* ================================================================================================================================================================================== */

.hero{
    height: 130vh;
    background: radial-gradient(circle at 50% 50% , rgb(245, 245, 243) 0%, var(--secondary-color) 60%, var(--secondary-color) 100%);
    perspective: 1000px;
} 

.hero-container-1{
    height: 80vh;
    width: 90%;
    margin: 122px auto 0px auto;

    display: flex;
    justify-content: center;
    

    background: none;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    
    box-shadow: inset 15px 15px 20px rgba(0, 0, 0, 0.1), inset -5px -5px 10px rgba(222, 222, 222, 0.5),
    10px 15px 20px rgba(0, 0, 0, 0.1);

    gap: 6rem;

    transition: transform 0.15s ease-out; /* Smooths the tilt movement */
    transform-style: preserve-3d;
    will-change: transform;

    animation:  2.5s entry-blurp-square;
    animation-range: start;

}

.hero-text{
    /* margin-top: 170px; */
    margin-top: 90px;
    text-align: left;

    animation: 2.5s fade-in;
        animation-range: start;
}

.hero-h1{
    width: 100%;
    
    font-size: 100px;
    font-weight:bolder;

    color: var(--primary-color);

    margin-bottom: 5px;
    
    white-space: nowrap;
    overflow: hidden;
}  

.hero-h2{

    font-size: 35;

    color: var(--primary-color);
    margin-top: 10px;
    margin-left: 15;

    white-space: nowrap;
    overflow: hidden;
}

.hero-h1::after{
    border-right: 0;
}

.logo-melayang{
        width: 330px;
        height: 330px;

        z-index: 0;
        margin-top: 90px;
        display: flex;        
        align-items: center;
        justify-content: center;

        animation: 2.5s fade-in;
        animation-range: start;
    
} 

.hero-container-1 {
    transition: transform 0.1s ease-out; 
    will-change: transform;
}


.hero-container-2{
    height: 40vh;
    width: auto;

    display: flex;
    justify-content: center;

    margin-top: -9rem;

    /* wajib ada overflow: clip supaya animasi pas scroll aktif */
    overflow: clip;
}
/* 
rasio batik
width : height = 20: 4.85 
*/

.hero-batik-kiri{
    width: 100%;
    height: 100%;

     animation: 2s slide-left, slide-left-scroll linear;
     animation-timeline: auto, scroll();
     animation-delay: 0s, 1s; 
     animation-range: normal, exit;
    }
    
    
.hero-batik-kanan{
    width: 100%;
    height: 100%;
    

    animation: 2s slide-right, slide-right-scroll linear ; 
    animation-timeline: auto, scroll();
    animation-delay: 0s, 1s;
    animation-range: normal, exit;

}

@keyframes entry-blurp-square {
    from{border-radius: 15%; box-shadow: none;}
    to{border-radius: 20px;}
}
@keyframes slide-right {
    from{transform: translateX(1000px);}
    to{transform: translateX(0px);}
    
}

@keyframes slide-left {
    from{transform: translateX(-1000px);}
    to{transform: translateX(0px)}
    
}

@keyframes slide-right-scroll {
    0% {transform: translateX(0px);}
    25% {transform: translateX(500px);}
    
}

@keyframes slide-left-scroll {
    0% {transform: translateX(0px);}
    25% {transform: translateX(-500px);}
    
}




/*====================================================================================================================*/

.board-preview{ 

    width: auto;
    height: 100vh;
    display: flex;
    justify-content: center;
    overflow: hidden;

    background-image: url("./asset/board_of_directors.png");
    background-size: cover;
    background-repeat: none;
    background-position: 40% 50%;
}

.board-image{
    object-fit: cover;
    margin-left: 100px;
}

.div-button{
    display: flex;
    align-items: flex-end;
    z-index: 1;
}

.board-button{
    color: var(--primary-color);
    background-color: var(--secondary-color);
    height: 40px;
    width: 80vw;
    margin-bottom: 25px;

    border-radius: 10px;
}



/*====================================================================================================================*/



.pilars{
    width: 100%;
    height: 300vh;
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;

    background: linear-gradient(to bottom, #76030A 0%, var(--primary-color) 3%, var(--primary-color) 100%);

    gap: 5rem;

}

.pilars h1{
    font-size: 100px;
    padding-top: 10;

}

/* 
    setiap pilars-container-angka itu isinya copas semua dari pilars-container. cuma beda image background dan element aja, 
*/
.pilars-container{
    height: 50vh;
    width: 80%;


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

    background-image: url("./asset/internationally-minded-image-bg.png");
    background-size: cover;
    /* background-repeat: no-repeat; */
    background-position: -0px 60%;

    border-radius: 20px;
}

.pilars-subcontainer-1{
    flex: 1;
    margin-left: 13rem;
}

.pilars-subcontainer-2{
    background-color: var(--secondary-color);

    height: 13rem;
    width: 26rem;
    margin-right: 11rem;



    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;

}

.pilars-subcontainer-2 h1{
    color: var(--primary-color);
    font-size: 3rem;
    text-align: center;
} 

/* ==================================== */
.pilars-container-2{
    height: 50vh;
    width: 80%;


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

    background-image: url("./asset/academically-commited-image-bg.png");
    background-size: cover;
    background-position: 50% 50%;

    border-radius: 20px;
}

.pilars-2-subcontainer-1{
    flex: 1;
    margin-left: 13rem;
}

.pilars-2-subcontainer-2{
    background-color: var(--secondary-color);

    height: 13rem;
    width: 26rem;
    margin-right: 11rem;



    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;

}

.pilars-2-subcontainer-2 h1{
    color: var(--primary-color);
    font-size: 3rem;
    text-align: center;
}    

/* ==================================== */
.pilars-container-3{
    height: 50vh;
    width: 80%;


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

    background-image: url("./asset/legally-skilled-image-bg.png");
    background-size: cover;
    background-position: 50% 50%;

    border-radius: 20px;
}

.pilars-3-subcontainer-1{
    flex: 1;
    margin-left: 13rem;
}

.pilars-3-subcontainer-2{
    background-color: var(--secondary-color);

    height: 13rem;
    width: 26rem;
    margin-right: 11rem;



    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;

}

.pilars-3-subcontainer-2 h1{
    color: var(--primary-color);
    font-size: 3rem;
    text-align: center;
}    

/* ==================================== */
.pilars-container-4{
    height: 50vh;
    width: 80%;


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

    background-image: url("./asset/socially-responsible-image-bg.png");
    background-size: cover;

    border-radius: 20px;
}

.pilars-4-subcontainer-1{
    flex: 1;
    margin-left: 13rem;
}

.pilars-4-subcontainer-2{
    background-color: var(--secondary-color);

    height: 13rem;
    width: 26rem;
    margin-right: 11rem;



    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;

}

.pilars-4-subcontainer-2 h1{
    color: var(--primary-color);
    font-size: 3rem;
    text-align: center;
}    


/*================================================================================================================*/

.visi-misi{
    height: 170vh;
    width: 100%;
    background-color: var(--primary-color);
}


.visi-misi-container-1{
    margin-top: 0rem;
    display: flex;
    flex-direction: row-reverse;

    background-color: var(--primary-color);
}

.visi-title{
    color: var(--secondary-color);
    font-size: 100px;
    text-align: center;

    margin-top: 60px;
    /* margin-right: 70px; */
    margin-right: 7rem;
}

.visi-content{
    color: var(--secondary-color);
    font-size: 30px;
    text-align: justify;

    margin-top: 11rem;
    margin-right: 9rem;
    /* margin-left: 5rem; */
    margin-left: 7rem;
}

.visi-misi-container-2{
    margin-top: 2rem;
    display: flex;
    flex-direction: row-reverse;

    background-color: var(--secondary-color);
}

.misi-title{
    color: var(--primary-color);
    font-size: 100px;
    text-align: center;

    margin-top: 40px;
    /* margin-right: 70px; */
    margin-right: 7rem;
}

.misi-content{
    color: var(--primary-color);
    font-size: 30px;
    text-align: justify;

    margin-top: 11rem;
    margin-right: 5rem;
    /* margin-left: 5rem; */
    margin-left: 7rem;
}

/*====================================================================================================================*/

.event-preview{
    min-height: 100vh;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: var(--secondary-color);
}

.event-preview h1{
    color: var(--primary-color);
    font-size: 100px;
    margin-top: 60px;
}

.event-container{
    width: 80%;
    position: relative;
    display: flex;
    justify-content: center;
    /* margin: auto; */
}

.eventSlides{
    display: none;
    
}

.event-overlay{
    background: rgba(116, 1, 7, .5);
    border-radius: 20px;
}

.eventSlides img{
    height: 60vh;
    border-radius: 20px;
    overflow: hidden;

}

.prev, .next{
    cursor: pointer;
    position: absolute;
    top: 50%;

    width: auto;
    margin-top: -22px;
    padding: 16px;

    color: var(--secondary-color);
    font-weight: bold;
    font-size: 18px;

    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next{
    right: 0;
    border-radius: 3px 0 0 3px;

}

.prev:hover, .next:hover{
    background-color: rgba(116, 1, 7, 0.81);
}

.event-text{
    color: var(--secondary-color);
    font-size: 30px;
    padding: 8px 12px;
    
    position: absolute;
    bottom: 8px;
    /* right: 8px; */
    width: 100%;

    text-align: center;
}

/* .fade{
    animation-name: fade-in;
    animation-duration: 1.5s;

} */

@keyframes fade-in {
    from {opacity: 0}
    to {opacity: 1;}
    
}





/*====================================================================================================================*/



.publication-preview{
    height: 100vh;
    background-color: var(--secondary-color);
    display: flex;
    align-items: center;
    flex-direction: column;
}

.publication-preview h1{
    color: var(--primary-color);
    font-size: 100px;
    margin-bottom: 10;
}

.publication-preview a{
    color: var(--primary-color);
    text-decoration: none;
    font-size: 30px;
    font-weight: bold;
}

.publication-carousel{
    margin: 60px auto;
    width: 80%;
    /* border: 5px solid var(--primary-color); */

    border-radius: 20px;
    display: flex;
    overflow-x: hidden;
}

.publication-carousel::-webkit-scrollbar{
    display: none;
}

.publication-group{
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 1em;
    /* padding-right perlu supaya ada gap antara card asli dan duplikasi */
    padding-right: 1em; 
    animation: spin 30s infinite linear;

}

.publication-carousel:hover .publication-group{
    animation-play-state: paused;
}

.publication-card{
    flex: 0 0 5em;
    height: 5em;
    padding: 1em;

    color: var(--primary-color);
    background: var(--secondary-color);
    border: 5px solid var(--primary-color);

    font-size: 3rem;
    border-radius: 20px;
    text-align: center;

    align-content: center;
}




/*====================================================================================================================*/

.testimonies{
    background-color: var(--primary-color);
    height: 120vh;
    display: flex;
    
    flex-direction: column;
    align-items: center;
    gap: .7em;
    
}

.testimonies h1{
    font-size: 100px;
}

.testimonies-carousel{
    margin: 5px auto;
    width: 90%;
    /* border: 5px solid var(--secondary-color); */
    
    border-radius: 20px;
    display: flex;
    overflow-x: hidden;

}
.testimonies-carousel::-webkit-scrollbar{
    display: none;
}

.testimonies-group{
    display: flex;
    align-items: center;
    justify-content: center;
    
    gap: 1em;
    padding-right: .8em;
    animation: spin 200s infinite linear;
}
.testimonies-group-2{
    display: flex;
    align-items: center;
    justify-content: center;
    
    gap: 1em;
    padding-right: .8em;
    animation: spin 200s reverse infinite linear;
}

.testimonies-carousel:hover .testimonies-group {
    animation-play-state: paused;
}
.testimonies-carousel:hover .testimonies-group-2 {
    animation-play-state: paused;
}

.testimonies-card{
    flex: 0 0 7em;
    height: 10rem;
    padding: 1em;
    
    border: 5px solid var(--secondary-color);
    
    font-size: 3rem;
    border-radius: 20px;
    text-align: center;
    
    align-content: center;
}


@keyframes spin{
    from{translate: 0;}
    to{translate: -100%;}
}


/*====================================================================================================================*/
.partners-preview{
    height: 100vh;

    background-color: var(--primary-color);

    display: flex;
    justify-content: center;
}

.partners-preview h1{
    font-size: 100px;
}

/*====================================================================================================================*/

.merchandise-preview{
    height: 100vh;

    background-color: var(--secondary-color);

    display: flex;
    justify-content: center;
}

.merchandise-preview h1{
    font-size: 100px;
    color: var(--primary-color);
}

/*====================================================================================================================*/

footer{
    background-color: var(--bg-color-primary);
    
    display: flex;
    justify-content:center;
    flex-direction: column;

    width: 100%;
    height: 400px;


    /* position: fixed;  ini jangan pasang karena dia jadi floating, depan elemen lain 
                         , sedangkan kita pengen dia pakem dibawah persis elemen lain
                          */
    bottom: 0;
    left: 0;
}

.footer-group0{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-bottom: 12px;
}

.footer-contact{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* align-items: center; */
}

.footer-contact-header{
    font-weight: normal;
    text-align: left;
}

.footer-contact p{
    margin: 10px 10px 10px 0%;
}


.footer-social-header{
    font-weight: normal;
    text-align: right;
    margin-bottom: 1.2em;
}

.footer-social-links{
    text-decoration: none;
    gap: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    margin: 10px 0 20px 10px;
}

.footer-social-links i{
    font-size: larger;
    transition: color .25s ease;
}
.footer-social-links i:hover{
    color: #fd000d;
}

.footer-group{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
    border-top: 1px solid rgba(240, 240, 234, 0.1) ;
}

.footer-group-logo{
    width: 115px;
    height: 120px;
}

/* .footer-group-copyright{
    tidak kepake, cuma buat namain grouping biar gak pusing
} */

.footer-group-copyright-p1{
    font-weight: bold;
    font-size: normal;
}
.footer-group-copyright-p2{
    font-weight: normal;
    font-size: small;
}