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

    display: flex;
    flex-direction: column;

     overflow-x: clip;

     background-color: rgb(240, 240, 234, 1);

}

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

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

    gap: clamp(1rem, 5vw, 4rem);

    width: 100%;
    position: fixed; 
    left: 0;
    top: 0;
    
    padding-top: clamp(12px, 2.5vw, 28px);
    padding-bottom: clamp(12px, 2.5vw, 28px);
    margin: 0;
    z-index: 1;    

    transition: top 0.7s;
}

.logo-alsa-text{
    display: flex;
    gap: clamp(5px, 1vw, 10px);
}

.logo {
    /* perbandingan 11:9*/
    width: clamp(44px, 6vw, 77px);
    height: clamp(36px, 5vw, 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;
    font-size: clamp(0.75rem, 1.2vw, 1rem);
}
.alsa-text-mini{
    color: var(--primary-color);
    font-size: clamp(0.6rem, 0.9vw, 0.875rem);
    margin: 0;
    text-decoration: none;
}

.nav-links{
    display: flex;
    gap: clamp(12px, 2.5vw, 30px);
    opacity: 1;
    visibility: visible;
    flex-wrap: wrap;
}

.nav-links a{
    color: var(--primary-color);
    text-decoration: none;
    font-weight: normal;
    position: relative;
    font-size: clamp(0.75rem, 1.1vw, 1rem);
}

/* 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: clamp(0.75rem, 1.1vw, 1rem);
}

.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: clamp(10px, 1.5vw, 20px);
    font-size: clamp(0.75rem, 1.1vw, 1rem);
}


.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: max(100vh, 600px);
    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: clamp(300px, 75vh, 80vh);
    width: min(90%, 1400px);
    margin: clamp(80px, 10vw, 122px) auto 0px auto;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    

    background: none;
    backdrop-filter: blur(10px);
    border-radius: clamp(12px, 2vw, 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: clamp(1rem, 5vw, 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: clamp(40px, 8vw, 90px);
    text-align: left;

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

.hero-h1{
    width: 100%;
    
    font-size: clamp(1.8rem, 6vw, 6rem);
    font-weight:bolder;

    color: var(--primary-color);

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

.hero-h2{

    font-size: clamp(1rem, 2.5vw, 2.2rem);

    color: var(--primary-color);
    margin-top: 10px;
    margin-left: clamp(0px, 1vw, 15px);

    white-space: nowrap;
    overflow: hidden;
}

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

.logo-melayang{
        width: clamp(150px, 25vw, 330px);
        height: clamp(150px, 25vw, 330px);

        z-index: 0;
        margin-top: clamp(40px, 8vw, 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: clamp(120px, 20vw, 40vh);
    width: auto;

    display: flex;
    justify-content: center;

    margin-top: clamp(-6rem, -10vw, -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{ 
    margin-top: clamp(1rem, 24vh, 13rem);
    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: clamp(20px, 8vw, 100px);
}

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

.board-button{
    color: var(--primary-color);
    background-color: var(--secondary-color);
    height: clamp(32px, 4vw, 40px);
    width: min(80vw, 900px);
    margin-bottom: clamp(12px, 2vw, 25px);

    border-radius: clamp(6px, 1vw, 10px);
}



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



.pilars{
    width: 100%;
    height: max-content;
    min-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: clamp(2rem, 4vw, 5rem);

}

.pilars h1{
    font-size: clamp(2.5rem, 8vw, 6.25rem);
    padding-top: clamp(0.5rem, 1.5vw, 1rem);

}

/* 
    setiap pilars-container-angka itu isinya copas semua dari pilars-container. cuma beda image background dan element aja, 
*/
.pilars-container{
    height: clamp(220px, 40vw, 50vh);
    width: min(90%, 1200px);

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

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

    border-radius: clamp(12px, 2vw, 20px);
}

.pilars-subcontainer-1{
    flex: 1;
    margin-left: clamp(1.5rem, 8vw, 13rem);
}

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

    height: clamp(7rem, 12vw, 13rem);
    width: clamp(14rem, 22vw, 26rem);
    margin-right: clamp(1.5rem, 7vw, 11rem);

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: clamp(12px, 2vw, 20px);

}

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

/* ==================================== */
.pilars-container-2{
    height: clamp(220px, 40vw, 50vh);
    width: min(90%, 1200px);

    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: clamp(12px, 2vw, 20px);
}

.pilars-2-subcontainer-1{
    flex: 1;
    margin-left: clamp(1.5rem, 8vw, 13rem);
}

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

    height: clamp(7rem, 12vw, 13rem);
    width: clamp(14rem, 22vw, 26rem);
    margin-right: clamp(1.5rem, 7vw, 11rem);

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: clamp(12px, 2vw, 20px);

}

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

/* ==================================== */
.pilars-container-3{
    height: clamp(220px, 40vw, 50vh);
    width: min(90%, 1200px);

    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: clamp(12px, 2vw, 20px);
}

.pilars-3-subcontainer-1{
    flex: 1;
    margin-left: clamp(1.5rem, 8vw, 13rem);
}

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

    height: clamp(7rem, 12vw, 13rem);
    width: clamp(14rem, 22vw, 26rem);
    margin-right: clamp(1.5rem, 7vw, 11rem);

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: clamp(12px, 2vw, 20px);

}

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

/* ==================================== */
.pilars-container-4{
    height: clamp(220px, 40vw, 50vh);
    width: min(90%, 1200px);

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

    background-image: url("./asset/socially-responsible-image-bg.png");
    background-size: cover;
    
    border-radius: clamp(12px, 2vw, 20px);
}

.pilars-4-subcontainer-1{
    flex: 1;
    margin-left: clamp(1.5rem, 8vw, 13rem);
}

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

    height: clamp(7rem, 12vw, 13rem);
    width: clamp(14rem, 22vw, 26rem);
    margin-right: clamp(1.5rem, 7vw, 11rem);

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: clamp(12px, 2vw, 20px);

}

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


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

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


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

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

.visi-title{
    color: var(--secondary-color);
    font-size: clamp(2.5rem, 8vw, 6.25rem);
    text-align: center;

    margin-top: clamp(20px, 4vw, 60px);
    margin-right: clamp(1rem, 5vw, 7rem);
}

.visi-content{
    color: var(--secondary-color);
    font-size: clamp(1rem, 2vw, 1.875rem);
    text-align: justify;

    margin-top: clamp(2rem, 8vw, 11rem);
    margin-right: clamp(1.5rem, 6vw, 9rem);
    margin-left: clamp(1.5rem, 5vw, 7rem);
}

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

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

.misi-title{
    color: var(--primary-color);
    font-size: clamp(2.5rem, 8vw, 6.25rem);
    text-align: center;

    margin-top: clamp(20px, 3vw, 40px);
    margin-right: clamp(1rem, 5vw, 7rem);
}

.misi-content{
    color: var(--primary-color);
    font-size: clamp(1rem, 2vw, 1.875rem);
    text-align: justify;

    margin-top: clamp(2rem, 8vw, 11rem);
    margin-right: clamp(1.5rem, 4vw, 5rem);
    margin-left: clamp(1.5rem, 5vw, 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: clamp(2.5rem, 8vw, 6.25rem);
    margin-top: clamp(24px, 4vw, 60px);
}

.event-container{
    width: min(90%, 1100px);
    position: relative;
    display: flex;
    justify-content: center;
}


.eventSlides{
    display: none;  
}


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

.eventSlides img{
    height: clamp(220px, 40vw, 60vh);
    width: 100%;
    object-fit: cover;
    border-radius: clamp(10px, 2vw, 20px);
    overflow: hidden;

}

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

    width: auto;
    margin-top: -22px;
    padding: clamp(8px, 1.5vw, 16px);

    color: var(--secondary-color);
    font-weight: bold;
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);

    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: clamp(1rem, 2.5vw, 1.875rem);
    padding: 8px 12px;
    
    position: absolute;
    bottom: 8px;
    width: 100%;

    text-align: center;
}

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




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



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

.publication-preview h1{
    color: var(--primary-color);
    font-size: clamp(2.5rem, 8vw, 6.25rem);
    margin-bottom: clamp(4px, 1vw, 10px);
}

.publication-preview a{
    color: var(--primary-color);
    text-decoration: none;
    font-size: clamp(1rem, 2vw, 1.875rem);
    font-weight: bold;
}

.publication-carousel{
    margin: clamp(20px, 4vw, 60px) auto;
    width: min(90%, 1200px);

    border-radius: clamp(10px, 2vw, 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: 1em; 
    animation: spin 30s infinite linear;

}

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

.publication-card{
    flex: 0 0 clamp(4em, 6vw, 5em);
    height: clamp(4em, 6vw, 5em);
    padding: 1em;

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

    font-size: clamp(1.5rem, 3vw, 3rem);
    border-radius: clamp(10px, 2vw, 20px);
    text-align: center;

    align-content: center;
}




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

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

.testimonies h1{
    font-size: clamp(2.5rem, 8vw, 6.25rem);
}

.testimonies-carousel{
    margin: 5px auto;
    width: min(95%, 1300px);
    
    border-radius: clamp(10px, 2vw, 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 clamp(5em, 8vw, 7em);
    height: clamp(7rem, 12vw, 10rem);
    padding: 1em;
    
    border: 5px solid var(--secondary-color);
    
    font-size: clamp(1.5rem, 3vw, 3rem);
    border-radius: clamp(10px, 2vw, 20px);
    text-align: center;
    
    align-content: center;
}


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


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

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

    display: flex;
    justify-content: center;
}

.partners-preview h1{
    font-size: clamp(2.5rem, 8vw, 6.25rem);
}

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

.merchandise-preview{
    min-height: 100vh;

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

    display: flex;
    justify-content: center;
}

.merchandise-preview h1{
    font-size: clamp(2.5rem, 8vw, 6.25rem);
    color: var(--primary-color);
}

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

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

    width: 100%;
    height: max-content;
    min-height: clamp(260px, 30vw, 400px);

    bottom: 0;
    left: 0;
}

.footer-group0{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: clamp(6px, 1vw, 12px);
}

.footer-contact{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.footer-contact-header{
    font-weight: normal;
    text-align: left;
    font-size: clamp(0.875rem, 1.2vw, 1rem);
}

.footer-contact p{
    margin: clamp(5px, 1vw, 10px) clamp(5px, 1vw, 10px) clamp(5px, 1vw, 10px) 0%;
    font-size: clamp(0.8rem, 1.1vw, 1rem);
}


.footer-social-header{
    font-weight: normal;
    text-align: right;
    margin-bottom: 1.2em;
    font-size: clamp(0.875rem, 1.2vw, 1rem);
}

.footer-social-links{
    text-decoration: none;
    gap: clamp(8px, 1.2vw, 15px);
    display: flex;
    justify-content: flex-end;
    align-items: center;

    margin: clamp(5px, 1vw, 10px) 0 clamp(10px, 1.5vw, 20px) clamp(5px, 1vw, 10px);
}

.footer-social-links i{
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    transition: color .25s ease;
}
.footer-social-links i:hover{
    color: #fd000d;
}

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

.footer-group-logo{
    width: clamp(60px, 9vw, 115px);
    height: clamp(63px, 9.5vw, 120px);
}

.footer-group-copyright-p1{
    font-weight: bold;
    font-size: clamp(0.8rem, 1.1vw, 1rem);
}
.footer-group-copyright-p2{
    font-weight: normal;
    font-size: clamp(0.7rem, 0.9vw, 0.875rem);
}