/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
     /* Colors */
     --green-color: #095754;
     --cream-color: #F0F2C3;
     --grey-color: #5C5C5C;
     --dark-color: #434242;
     --black-color: #2A2A2A;
     --white-color: white;
 
     /* Font and Typography */
     --font-poppins: "Poppins", sans-serif;
 
     /* Font size */
     --xxl-font-size: 48px;
     --xl-font-size: 40px;
     --l-font-size: 24px;
     --m-font-size: 20px;
     --s-font-size: 16px;
     --xs-font-size: 14px;
     
     /* Font weight */
     --font-regular: 400;
     --font-medium: 500;
     --font-semibold: 600;
     --font-bold: 700;
     --font-extrabold: 800;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%;
    -webkit-tap-highlight-color: transparent; //menghilangkan highlight ketika klik button
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none; // chrome and Opera
    -moz-user-select: none; // Firefox
    -webkit-text-select: none; // IOS Safari
    -webkit-user-select: none; // Safari

}

body {
    font-family: var(--font-poppins);
    background-color: var(--white-color);
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

::-webkit-scrollbar{
	width: 10px;
}

::-webkit-scrollbar-track-piece{
	background-color: #FFF;
}

::-webkit-scrollbar-thumb{
	background-color: #CBCBCB;
	outline: 2px solid #FFF;
	outline-offset: -2px;
	border: .1px solid #B7B7B7;
}

::-webkit-scrollbar-thumb:hover{
	background-color: #909090;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* apply untuk body */
.container-home {
    width: 100%;
}

.home-top{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3% 6%;
    gap: 6em;
}

.title-1{
    font-size: var(--xl-font-size);
    line-height: 60px;
    font-weight: var(--font-semibold);
    font-style: italic;
    color: var(--grey-color);
}

.title-2{
    margin-top: 7px;
    color: var(--black-color);
    font-weight: var(--font-extrabold);
    font-size: var(--xl-font-size);
    line-height: 72px;
}

.title-2 .title-green{
    color: #19A89D;
}

.title-linear{
    margin-top: 38px;
    width: 528px;
    height: 125px;
    border: 5px solid transparent;
    border-radius: 30px;
    background: linear-gradient(var(--white-color), var(--white-color)) padding-box, 
                linear-gradient(to right, #19A89D, #F0F3AD) border-box;
}

.container-linear{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.linear-left{
    text-align: center;
}

.linear-mid{
    text-align: center;
}

.linear-right{
    text-align: center;
}

.green-bold{
    font-size: 30px;
    font-weight: var(--font-extrabold);
    line-height: 54px;
    color: #19A89D;
}

.regular{
    color: var(--dark-color);
    font-weight: var(--font-regular);
    font-size: var(--m-font-size);
    line-height: 30px;
    
}

.img-home{
    max-width: 567px;
    height: auto;
}

.home-bottom{
    width: 100%;
    background-color: #095754;
    height: 100%;
    padding: 4% 6%;
    display: flex;
    justify-content: center;
    gap: 9em;
    align-items: center;
}

.faculty-title{
    color: var(--white-color);
    font-size: var(--xl-font-size);
    line-height: 60px;
    font-weight: var(--font-bold);
    max-width: 330px;
}
.form-group {
    width: 100%; 
    height: auto;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
    background-color: white;
}
.custom-select {
    height: 100%;
    padding: 20px;
    font-size: var(--l-font-size);
    font-weight: 300;
    border-radius: 30px; 
    background-color: var(--white-color);
    font-family: var(--font-poppins);
    color: var(--grey-color);
    appearance: none; 
    outline: none;
    background: url('data:image/svg+xml,%3Csvg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cmask id="mask0_4_352" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="44" height="44"%3E%3Cpath d="M22 42C33.046 42 42 33.046 42 22C42 10.954 33.046 2 22 2C10.954 2 2 10.954 2 22C2 33.046 10.954 42 22 42Z" fill="white" stroke="white" stroke-width="4" stroke-linejoin="round"/%3E%3Cpath d="M31 19L22 28L13 19" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/mask%3E%3Cg mask="url(%23mask0_4_352)"%3E%3Cpath d="M-2 -2H46V46H-2V-2Z" fill="%23095754"/%3E%3C/g%3E%3C/svg%3E') no-repeat right 10px center;
    background-size: 2rem;
}

.search-bar{
    width: 163px;
    height: 56px;
    border-radius: 30px;
    background-color: var(--white-color);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.search-bar a p{
    color: var(--dark-color);
    font-weight: var(--font-bold);
    font-size: var(--m-font-size);
    line-height: 36px;
    margin-top: 10px;
    transition: all 0.3s ease-in-out;
}

.search-bar:hover p {
    color: var(--green-color);
}

.disabled {
    pointer-events: none;
}


@media (min-width: 0px) {

    .title-right-home{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .home-desktop{
        display: none;
    }
    .home-mobile .home-top{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        padding: 6% 6%;
        min-height: 55vh;
        gap: 0;
    }
    .home-mobile .title-right-home{
        margin-top: 0px;
        margin-left: 0px;
    }
    .home-mobile .title-1{
        font-size: var(--m-font-size);
        line-height: 30px;
        font-weight: var(--font-semibold);
        font-style: italic;
        color: var(--grey-color);
        margin-top: 43px;
    }
    .home-mobile .title-2{
        margin-top: 17px;
        color: var(--black-color);
        font-weight: var(--font-extrabold);
        font-size: var(--l-font-size);
        line-height: 36px;
        text-align: center;
    }
    .home-mobile .title-linear{
        margin-top: 29px;
        width: 121px;
        height: 272px;
        border: 5px solid transparent;
        border-radius: 30px;
        background: linear-gradient(var(--white-color), var(--white-color)) padding-box, 
                    linear-gradient(to top, #19A89D, var(--cream-color)) border-box;
    }
    .home-mobile .container-linear{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .home-mobile .green-bold{
        font-size: 18px;
        line-height: 27px;
    }
    .home-mobile .regular{
        font-size: 10px;
        line-height: 15px;
    }
    .home-mobile .linear-left{
        margin-left: 0px;
        margin-top: 38px;
    }
    .home-mobile .linear-mid{
        margin-left: 0px;
        margin-top: 35px;
    }
    .home-mobile .linear-right{
        margin-left: 0px;
        margin-top: 35px;
    }
    .home-mobile .img-home{
        width: 221px;
        height: 222px;
    }
    .home-mobile .home-bottom{
        width: 100%;
        padding: 6% 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 20vh;
        gap: 1%;
    }
    .home-mobile .faculty-title{
        font-size: var(--m-font-size);
        font-weight: var(--font-bold);
        margin-bottom: 22px;
        text-align: center;
    }
    .home-mobile .list-faculty .custom-list{
        position: relative;
        max-width: 20rem;
    }
    .home-mobile .list-faculty .custom-list select{
        height: 33px;
        font-size: 10px;
        font-weight: var(--font-medium);
    }
    .home-mobile .list-faculty .custom-list::before{
        margin-right: 1px;
    }
    .home-mobile .list-faculty .custom-list::after{
      margin: -1px 7px 0px 0px ;
    }
    .home-mobile .search-bar{
        width: 72px;
        height: 25px;
        margin-top: 30px;
        margin-right: 0px;
        border-radius: 30px;
        cursor: pointer;
    }
    
    .home-mobile .search-bar a p{
        font-size: 10px;
        line-height: 15px;
        text-align: center;
        margin-top: 5px;
    }
    .form-group {
        width: 13.5rem;
        height: auto;
    }
    .custom-select {
        width: 100%;
        font-size: 10px;
        padding: 12px;
        background-size: 1.2rem;
    }    
}

@media (min-width: 640px) {
    .container-home {
        max-width: 640vw;
    }
    .home-mobile{
        display: none;
    }
    .home-desktop{
        display: block;
    }
    .title-right-home {
        display: flex;
        align-items: flex-start;
    }

    .home-desktop .title-1{
        font-size: 100%;
        line-height: 30px;
        font-weight: var(--font-semibold);
        font-style: italic;
    }
    .home-desktop .title-2{
        margin-top: 7px;
        font-weight: var(--font-extrabold);
        font-size: 1em;
        line-height: 32px;
        width: 100%;
    }
    .home-desktop .title-linear{
        margin-top: 18px;
        width: 90%;
        height: auto;
        padding: 4% 6%;
        border: 5px solid transparent;
        border-radius: 20px;
    }
    .home-desktop .container-linear{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
   
    .home-desktop .green-bold{
        font-size: 1em;
        line-height: 16px;
    }
    .home-desktop .regular{
        font-size: 60%;
    }
    .home-desktop .home-top{
        min-height: 50vh;
    }
    .home-desktop .img-home{
        width: 15em;
        height: auto;
    }
    .home-desktop .home-bottom{
        min-height: 25vh;
        gap: 11%;
    }
    .home-desktop .faculty-title{
        font-size: 1em;
        line-height: 26px;
        font-weight: var(--font-bold);  
    }
    .home-desktop .search-bar{
        width: 143px;
        height: 46px;
        border-radius: 20px;
        cursor: pointer;
    }
    .home-desktop .search-bar a p{
        font-weight: var(--font-bold);
        font-size: var(--xs-font-size);
        text-align: center;
        margin-top: 4px;
    }

    .form-group {
        width: 18em; 
        height: auto;
    }
    .custom-select {
        width: 100%;
        padding: 20px;
        font-size: 0.8rem;
        background-size: 1.5rem;
    }
}

@media (min-width: 800px){
    .home-desktop .title-1{
        font-size: 1.2em;
        line-height: 30px;
        font-weight: var(--font-semibold);
    }
    .home-desktop .title-2{
        margin-top: 7px;
        font-weight: var(--font-extrabold);
        font-size: 1.5em;
        line-height: 32px;
        width: 100%;
    }
    .home-desktop .title-linear{
        margin-top: 18px;
        width: 70%;
        height: auto;
        padding: 4% 6%;
        border-radius: 20px;
    }
    .home-desktop .green-bold{
        font-size: 1.2em;
        line-height: 16px;
    }
    .home-desktop .regular{
        font-size: 70%;
    }
    .home-desktop .img-home{
        width: 16em;
        height: auto;
    }
    .home-desktop .faculty-title{
        font-size: x-large;
        line-height: 26px;
        font-weight: var(--font-bold);  
    }
}

@media (min-width: 1024px) {
    .container-home {
        max-width: 1024vw;
    }
    .home-mobile{
        display: none;
    }
    .home-desktop{
        display: block;
    }
    .home-desktop .home-top{
        min-height: 50vh;
    }
    .home-desktop .title-1{
        font-size: var(--l-font-size);
        font-weight: var(--font-semibold);
        font-style: italic;
        color: var(--grey-color);
    }
    .home-desktop .title-2{
        color: var(--black-color);
        font-weight: var(--font-extrabold);
        font-size: 1.8em;
        line-height: 52px;
        width: 100%;
    }
    .home-desktop .title-linear{
        margin-top: 38px;
        width: 70%;
        height: auto;
        border: 5px solid transparent;
        border-radius: 30px;
        background: linear-gradient(var(--white-color), var(--white-color)) padding-box, 
                    linear-gradient(to right, #19A89D, #F0F3AD) border-box;
    }
    .home-desktop .container-linear{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }    
    
    .home-desktop .green-bold{
        font-size: 1.5rem;
        font-weight: var(--font-extrabold);
        line-height: 54px;
    }
    .home-desktop .regular{
        color: var(--dark-color);
        font-weight: var(--font-regular);
        font-size: 1.15em;
        line-height: 30px;
        
    }
    .home-desktop .img-home{
        width: 20em;
    }
    .home-desktop .home-bottom{
        min-height: 25vh;
        gap: 11%;
    }
    .home-desktop .faculty-title{
        font-size: 2rem;
        font-weight: var(--font-bold);
        line-height: 45px;
    }
    .home-desktop .search-bar a p{
        font-weight: var(--font-bold);
        font-size: var(--m-font-size);
        line-height: 36px;
        margin-top: 10px;
    }
    .home-desktop .search-bar{
        width: 193px;
        height: 56px;
        border-radius: 30px;
        text-align: center;
        cursor: pointer;
    }

    .form-group {
        width: 25em; 
        height: auto;
    }
    .custom-select {
        width: 100%;
        padding: 20px;
        font-size: 1.1rem;
        background-size: 1.5rem;
    }
}
@media (min-width: 1280px) {
    .container-home {
        max-width: 1280vw;
    } 
    .home-mobile{
        display: none;
    }
    .home-desktop{
        display: block;
    }
    .home-desktop .home-top {
        min-height: 70vh;
        gap: 11em;
    }
    .home-desktop .title-1{
        font-size: 32px;
        line-height: 60px;
        font-weight: var(--font-semibold);
        font-style: italic;
        color: var(--grey-color);
    }
    .home-desktop .title-2{
        margin-top: 7px;
        color: var(--black-color);
        font-weight: var(--font-extrabold);
        font-size: 2em;
        line-height: 72px;
        max-width: 757px;
    }

    .home-desktop .green-bold{
        font-size: 30px;
        font-weight: var(--font-extrabold);
        line-height: 54px;
    }
    .home-desktop .regular{
        color: var(--dark-color);
        font-weight: var(--font-regular);
        font-size: var(--m-font-size);
        line-height: 30px;
        
    }
    .home-desktop .img-home{
        width: 25em;
        height: auto;
    }
    .home-desktop .home-bottom{
        min-height: 25vh;
        gap: 11%;
    }
    .home-desktop .faculty-title{
        font-size: var(--xl-font-size);
        line-height: 60px;
        font-weight: var(--font-bold);
    }
    .home-desktop .search-bar{
        width: 163px;
        height: 56px;
        border-radius: 30px;
        text-align: center;
        cursor: pointer;
    }
    .home-desktop .search-bar a p{
        font-weight: var(--font-bold);
        font-size: var(--m-font-size);
        line-height: 36px;
        margin-top: 10px;
    }

    .form-group {
        width: 32rem; 
        height: auto;
    }
    .custom-select {
        width: 100%;
        padding: 20px;
        font-size: 1.5rem;
        background: url('data:image/svg+xml,%3Csvg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cmask id="mask0_4_352" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="44" height="44"%3E%3Cpath d="M22 42C33.046 42 42 33.046 42 22C42 10.954 33.046 2 22 2C10.954 2 2 10.954 2 22C2 33.046 10.954 42 22 42Z" fill="white" stroke="white" stroke-width="4" stroke-linejoin="round"/%3E%3Cpath d="M31 19L22 28L13 19" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/mask%3E%3Cg mask="url(%23mask0_4_352)"%3E%3Cpath d="M-2 -2H46V46H-2V-2Z" fill="%23095754"/%3E%3C/g%3E%3C/svg%3E') no-repeat right 20px center;
        background-size: 2.2rem;
    }
}
@media (min-width: 1536px) {
    .container-home {
        max-width: 1536vw;
    }
    .home-mobile{
        display: none;
    }
    .home-desktop{
        display: block;
    }
    .home-desktop .home-top {
        min-height: 83vh;
        gap: 11em;
        padding: 3% 6%;
    }
    .home-desktop .title-1{
        font-size: 2em;
        line-height: 60px;
        font-weight: var(--font-semibold);
        font-style: italic;
        color: var(--grey-color);
    }
    .home-desktop .title-2{
        margin-top: 7px;
        color: var(--black-color);
        font-weight: var(--font-extrabold);
        font-size: 3em;
        line-height: 72px;
        width: 100%;
    }
    .home-desktop .title-linear{
        width: 70%;
    }
    .home-desktop .green-bold{
        font-size: 1.6em;
        font-weight: var(--font-extrabold);
        line-height: 54px;
    }
    .home-desktop .regular{
        color: var(--dark-color);
        font-weight: var(--font-regular);
        font-size: var(--m-font-size);
        line-height: 30px;
        
    }
    .home-desktop .img-home{
        width: 30em;
        height: auto;
    }
    .home-desktop .home-bottom{
        gap: 11em;
    }
    .home-desktop .faculty-title{
        font-size: var(--xxl-font-size);
        line-height: 60px;
        font-weight: var(--font-bold);
    }
    
    .home-desktop .search-bar{
        width: 183px;
        height: 76px;
        border-radius: 30px;
        cursor: pointer;
    }
    .home-desktop .search-bar a p{
        font-weight: var(--font-bold);
        font-size: var(--l-font-size);
        line-height: 36px;
        margin-top: 20px;
        text-align: center;
    }
}

@media (min-width: 1920px){
    .home-desktop .home-top {
        min-height: 55vh;
    }
    .home-desktop .home-bottom{
        min-height: 25vh;
    }
}

/* Animation */
/*.home-desktop .home-top {*/
/*    transform: translateY(50%);*/
/*    opacity: 0;*/
/*    transition: transform 0.6s ease-out, opacity 0.6s ease-out;*/
/*}*/

/* Triggering the animation when the page loads */
/*.home-desktop .home-top.animate-in {*/
/*    transform: translateY(0);*/
/*    opacity: 1;*/
/*}*/

/*.home-desktop .home-top.animate-in {*/
/*    animation: slideInFromBottom 0.6s ease-out;*/
/*}*/