:root{
    --white-background : #F9FAFB;
    --black-bg : #2B303B;
    --full-white : #ffffff;
    --blue-umrah : #0066CB;
    --orange : #F47825;
    --black-dark : #2C2D30;
    --black-light : #5E636F;
    --gray-light :#F5F5F5;
}
* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins',sans-serif;
}

body{
    background-color: var(--white-background);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #a0a5af;
    opacity: 1; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #a0a5af;
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #a0a5af;
  }

  html {
    scroll-behavior: smooth;
  }
/* navigation section */
.container {
    margin-left: 10%;
    margin-right: 10%;
}
.container-hero {
    padding-left: 10%;
    padding-right: 10%;
    background-color: var(--black-bg);
}
.header{
    width: 100%;
    background-color: var(--black-bg);
    padding-bottom: 4.5rem;
    margin-bottom: -4.5rem
}

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

.nav-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}
.nav-title h1 {
    margin-left: 5px;
    font-weight: 600;
    font-size: 26px;
    line-height: 2.438rem;
    color: var(--full-white);
}
.nav-title img{
    width: 50px;
    height: 46.25px;;
}

.nav-item {
    margin-left: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 2.813rem;
}
.nav-item li {
    list-style: none;
}

.nav-item li a {
    text-decoration: none;
    font-weight: 500;
    font-size: 22px;
    line-height: 2.063rem;
    color: var(--full-white);
}
.nav-item li a:hover{
    transition: 0.5s;
    color: #979797;
}
.list-white{
    float: right;
    margin-right: 1rem;
    display: none;
 }
 
.nav-right {
    font-style: italic;
    font-weight: 600;
    font-size: 24px;
    line-height: 2.25rem;
    color: var(--full-white);
    cursor: default;
}




/* hero section */

.hero {
    height: 48.5rem;
    background-color: var(--black-bg);
    margin-top: 4.375rem;
    display: flex;
    justify-content: space-between;
}

.hero-left{
    width: 45rem;
    height: 7.5rem;
}

.hero-left-bolder{
    font-weight: 800;
}

.hero-left h3{
    font-weight: 600;
    font-size: 56px;
    line-height: 3.75rem;
    color: var(--full-white);
}

.hero-right {
    width: 29.438rem;
    height: 7.063rem;
}
.hero-right .desc p{
    font-weight: 400;
    font-size: 20px;    
    line-height: 2.25rem;
    color: var(--full-white);
}

.btn-hero {
    margin-top: 0.625rem;
    width: 11.75rem;
    height: 2.75rem;
    background-color: var(--blue-umrah);
    border: none;
    border-radius: 20px;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.875rem;
    color: var(--full-white);
    cursor: pointer;
}
.btn-hero:hover{
    transition: 0.3s;
    background-color: #0682fd;
}

/*video section*/


.video-ft{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -25rem;
}
.video-ft iframe{
    width: 78.813rem;
    height: 46.25rem;
}

/*stats section*/

.status-section{
    margin-top: 26px;
}


.status-section ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5.625rem;
}

.status-section ul li {
    list-style: none;
    text-align: center;
    font-weight: 600;
    font-size: 48px;
    line-height: 72px;
    color: var(--black-light);
}

.status-section ul li span{
    font-weight: 800;
    color: var(--orange);
}

/* Program studi section */
.program-studi{
    margin-top: 9.625rem;
}
.program-studi h4{
    color: var(--black-dark);
    text-align: center;
    font-weight: 600;
    font-size: 40px;
    line-height: 3.75rem;
}
.cards {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6.563rem;
}

.card{
    width: 21.875rem;
    height: 25.25rem;
    background: var(--full-white);
    border: 1px solid var(--blue-umrah);
    box-sizing: border-box;
    border-radius: 20px;
}
.card:hover{
    transition: 0.5s;
    margin-top: -50px;
}
.card img {
    width: 21.875rem;
    height: 21.875rem;
}
.card p{
    text-align: center;
    font-weight: 600;
    font-size: 32px;
    line-height: 3rem;
    color: var(--black-light);
}
.tables{
    margin-top: 5.313rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
table {
    border-collapse: collapse;
    width: 100%;
    border-radius: 10px;
    border-style: hidden; 
    box-shadow: 0 0 0 1px var(--black-light); 
}
td, th {
    border: 1px solid var(--black-light);
    text-align: left;
    padding: 1.875rem;
    text-align: center;
}
th {
    font-weight: 400;
    font-size: 24px;
    line-height: 2.25rem;
}
td{
    font-weight: 300;
    font-size: 22px;
    line-height: 2.063rem;
}


/* Rektor Section */


.rektor {
    margin-top: 7.5rem;
}
.rektor h5{
    margin-bottom: 2.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 40px;
    line-height: 3.75rem;
}
.rektor-card{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22.125rem;
    height: 26.813rem;
    background: var(--full-white);
    box-shadow: 5px 4px 20px rgba(0, 0, 0, 0.25);
    border-radius: 40px;
}
.rektor-card img{
    width: 18.285rem;
    height: 24.653rem;
}
.rektor-group{
    height: 32.688rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--gray-light);
}
.rektor-desc{
    margin-left: 8.188rem;
    width: 34.938rem;
    height: 18.75rem;
}
.rektor-desc h6{
    width: 34.938rem;
    height: 2.029rem;
    font-weight: 500;
    font-size: 28px;
    line-height: 2.625rem;
}
.rektor-desc p {
    margin-top: 2.75rem;    
    width: 34.5rem;
    height: 14rem;
    font-weight: 400;
    font-size: 24px;
    line-height: 2.25rem;
}


/* Contact Section  */


.contact {
    margin-top: 5.625rem;
}
.contact h5 {
    text-align: center;
    font-weight: 600;
    font-size: 40px;
    line-height: 3.75rem;
    margin-bottom: 3.125rem;
}
.input-group{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}
.input-group label{
    font-weight: 400;
    font-size: 28px;
    line-height: 2.625rem;
    color: var(--black-light);
}

.input-group input{
    text-align: center;
    border: none;
    border-style: none;
    width: 66.938rem;
    height: 4.438rem;
    background: var(--gray-light);
    font-size: 28px;
    border-radius: 20px;
    color: var(--black-light);
    border: 1px solid var(--black-light);
}

.input-text{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.input-text p{
    font-weight: 400;
    font-size: 28px;
    line-height: 2.625rem;
}

.input-text textarea{
    width: 100%;
    height: 32.125rem;
    background: var(--gray-light);
    border: none;
    border-radius: 20px;
    border: 1px solid var(--black-light);
    padding: 5rem;
    font-size: 28px;
    color: var(--black-light);
}
.center-btn{
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-contact{
    border: none;
    border-style: none;
    width: 23.313rem;
    height: 5.813rem;
    background: var(--blue-umrah);
    border-radius: 40px;
    color: var(--full-white);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.875rem;
    text-align: center;
}

.btn-contact:hover{
    transition: 0.3s;
    background-color: #0682fd;
}

/* Footer Section */

footer{
    margin-top: 5rem;
    background-color: var(--black-bg);
    padding: 3.125rem;
    font-size: 28px;
    color: var(--full-white);
    text-align: center;
}
/*RESPONSIVE STARTS*/
/* X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
    .hero{
        margin-top: 2rem !important;
    }
    .container{
        margin: 0;
        margin-left: 5%;
        margin-right: 5%;
    }
    .nav-right{
        display: none;
    }
    .nav-item{
        margin: 0;
    }
  }

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
    .rektor-desc{
        margin: 0 auto;
        margin-top: 2rem;
        text-align: center;
    }
    .rektor-group {
        background-color: var(--white-background);
    }
    .contact{
        margin-top: 15rem;
    }
    .input-group{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .input-group label{
        font-size: 26px;
    }
    .input-group input{
        width: 46.938rem;
        height: 4.438rem;
        font-size: 24px;
    }
    .input-text p{
        font-size: 26px;
    }
    .input-text textarea{
        width: 90%;
        height: 20rem;
        padding: 1rem;
        font-size: 20px;
    }
    .center-btn{
        margin-top: 2rem;
    }
    .btn-contact{
        width: 15.313rem;
        height: 5.813rem;
        font-size: 24px;
    }

}
/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
    .input-group{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .input-group label{
        font-size: 26px;
    }
    .input-group input{
        width: 33.938rem !important;
        height: 4.438rem;
        font-size: 23px;
    }
    .input-text p{
        font-size: 24px;
    }
    .input-text textarea{
        width: 90%;
        height: 20rem;
        padding: 1rem;
        font-size: 18px;
    }
    .center-btn{
        margin-top: 2rem;
    }
    .btn-contact{
        width: 13.313rem;
        height: 5.813rem;
        font-size: 20px;
    }
 }

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    .container{
        margin: 0;
        margin-left: 3%;
        margin-right: 3%;
    }
    header {
        position: sticky;
        top: 0;
    }
    .header{
        width: 100%;
        background-color: var(--black-bg);
        padding-bottom: 2rem;
        margin-bottom: -2rem
    }
    .navbar{
        display: flex;
        position: sticky;
        padding-top: 2rem;
        top: 0;
        background-color: var(--black-bg);
    }
    .nav-item{
        display: none;
    }
    .list-white{
        display: block;
    }
    .list-white img{
        width: 50px;
        cursor: pointer;
    }
    .nav-item{
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        position: fixed;
        width: 100%;
        height: 100%;
        background: #343F56;
        top: 7rem;
        left: -200%;
        
        transition: all .5s;
    }
    .nav-item li{
        text-align: center;
        margin-top: 3rem;
        line-height: 30px;
    }
    .nav-item li a{
        font-size: 30px;
    }
    
    
    .nav-item.show{
        left: 0;
    }
    .hero-left h3{
        font-size: 42px;
    }
    .hero-right .desc p{
        font-size: 20px;
    }
    .btn-hero{
        width: 10rem;
        height: 3rem;
    }
    table{
        width:90%;
    }
    td, th {
        padding: 0.5rem;
    }
    th{
        font-size: 20px;
    }
    td{
        font-size: 18px;
    }
    .input-group{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .input-group label{
        font-size: 24px ;
    }
    .input-group input{
        width: 28.938rem !important;
        height: 4.438rem;
        font-size: 20px;
    }
    .input-text p{
        font-size: 22px;
    }
    .input-text textarea{
        width: 90%;
        height: 20rem;
        padding: 1rem;
        font-size: 16px;
    }
    .center-btn{
        margin-top: 2rem;
    }
    .btn-contact{
        width: 10.313rem;
        height: 4.813rem;
        font-size: 18px;
    }
 }
 @media (max-width: 633.98px) {
    .nav-item{
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        position: fixed;
        width: 100%;
        height: 100%;
        background: #343F56;
        top: 7rem;
        left: -200%;
        
        transition: all .5s;
    }
    .nav-item li{
        text-align: center;
        margin-top: 3rem;
        line-height: 30px;
    }
    .nav-item li a{
        font-size: 30px;
    }
    
    
    .nav-item.show{
        left: 0;
    }
    .hero-left h3{
        font-size: 40px;
    }
    .hero{
        flex-wrap: wrap;
    }
    .hero-right .desc p{
        margin-top: 2rem
    }
    .video-ft{
        margin-top: -18rem;
    }
    .video-ft iframe{
        width: 44.513rem;
        height: 30.25rem;
    }
    .status-section ul {
        gap: 4rem;
    }
    .status-section ul li{
        font-size: 34px;
    }
    .rektor h5{
        margin-bottom: -15rem;
    }
    .rektor-card{
        margin: 0;
        width: 20.125rem;
        height: 19.813rem;
    }
    .rektor-group{
        height: 100%;
        background-color: var(--white-background);
    }
    .rektor-card img{
        width: 13.285rem;
        height: 15.653rem;
    }
    .rektor-desc{
        margin: 0;
        margin-top: -40rem;
        width: 21.938rem;
        height: 25rem;
        text-align: center;
    }
    .rektor-desc h6{
        margin: 0;
        width: 20.938rem;
        height: 2.029rem;
        font-size: 28px;
    }
    .rektor-desc p {
        margin: 0;
        margin-top: 4rem;
        width: 19.5rem;
        height: 100%;
        font-size: 26px;
    }
    .contact{
        margin-top: -15rem;
    }
    .input-group{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .input-group label{
        font-size: 22px ;
    }
    .input-group input{
        width: 22.938rem !important;
        height: 3.438rem;
        font-size: 19px;
    }
    .input-text p{
        font-size: 22px;
    }
    .input-text textarea{
        width: 90%;
        height: 20rem;
        padding: 1rem;
        font-size: 16px;
    }
    .center-btn{
        margin-top: 2rem;
    }
    .btn-contact{
        width: 10.313rem;
        height: 3.813rem;
        font-size: 17px;
    }
 }

/* X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 475.98px) {
    .nav-item{
        display: flex !important;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        position: fixed;
        width: 100% !important;
        height: 100% !important;
        background: #343F56;
        top: 6rem;
        left: -200%;
        transition: all .5s;
    }
    .nav-item li{
        text-align: center;
        margin-top: 3rem;
        line-height: 30px;
    }
    .nav-item li a{
        font-size: 30px;
    }
    
    
    .nav-item.show{
        left: 0;
    }
    .container{
        margin: 0;
        margin-left: 1.5%;
        margin-right: 1.5%;
    }
    
    .nav-item{
        display: none;
    }
    .nav-right{
        display: none;
    }
    .hero{
        margin-top: 2rem;
        flex-wrap: wrap;
        
    }
    .hero-left h3{
        font-size: 40px;
        line-height: 3rem;
    }
    .hero-right .desc p{

        margin-top: -15rem;
    }
    .btn-hero{
        width: 7.75rem;
        height: 2.75rem;
        
        font-size: 18px;
    }
    .video-ft{
        margin-top: -18rem;
    }
    .video-ft iframe{
        width: 24.513rem;
        height: 20.25rem;
    }
    .status-section ul {
        gap: 3rem;
    }
    .status-section ul li{
        font-size: 32px;
    }
    .card p{
        font-size: 26px;
    }
    table{
        width:80%;
    }
    td, th {
        padding: 0.3rem;
    }
    th{
        font-size: 15px;
    }
    td{
        font-size: 14px;
    }

    .rektor h5{
        margin-bottom: -5rem;
    }
    .rektor-card{
        margin: 0;
        width: 16.125rem;
        height: 19.813rem;
    }
    .rektor-group{
        height: 100%;
        background-color: var(--white-background);
    }
    .rektor-card img{
        width: 13.285rem;
        height: 15.653rem;
    }
    .rektor-desc{
        margin: 0 auto;
        margin-top: -11rem;
        width: 15.938rem;
        height: 18.75rem;
        text-align: center;
    }
    .rektor-desc h6{
        margin: 0;
        width: 14.938rem;
        height: 2.029rem;
        font-size: 24px;
    }
    .rektor-desc p {
        margin: 0;
        margin-top: 7rem;    
        width: 14.5rem;
        height: 100%;
        font-size: 22px;
    }

    .contact {
        margin-top:10.625rem ;
    }


    .input-group{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .input-group label{
        font-size: 18px;
    }
    .input-group input{
        width: 16.938rem !important;
        height: 2.438rem !important;
        font-size: 16px !important;
    }
    .input-text p{
        font-size: 18px;
    }
    .input-text textarea{
        width: 90%;
        height: 20rem;
        padding: 1rem;
        font-size: 16px;
    }
    .center-btn{
        margin-top: 2rem;
    }
    .btn-contact{
        width: 10.313rem;
        height: 3.813rem;
        font-size: 15px;
    }

    footer{
        margin-top: 3rem;
        padding: 1rem;
        font-size: 16px;
    }
 }
 @media (max-width: 405.98px){
    .nav-item{
        display: block !important;
        justify-content: start !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        flex-direction: column !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        background: #343F56 !important;
        top: 6rem !important;
        left: -200% !important;
        
        transition: all .5s;
    }
    .nav-item li{
        text-align: center;
        margin-top: 3rem;
        line-height: 30px;
    }
    .nav-item li a{
        font-size: 30px;
    }
    
    
    .nav-item.show{
        left: 0 !important;
    }
     .rektor-card{
         margin-top: 3rem;
     }
    .rektor h5 {
        margin-bottom: 0;
    }
    .rektor-desc{
        margin-top: 3rem;

    }
    .contact{
        margin-top: 20rem;
    }
 }