* {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     font-family: 'Bebas Neue', sans-serif;
     scroll-behavior: smooth;
 }

 @font-face {
     font-family: 'Bebas Neue';
     src: url('../images/bebas-neue-cufonfonts-webfont/BebasNeue.woff');
 }

 .nav-container {
     width: 100vw;
     position: absolute;
     top: 5vh;
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
     align-items: center;
 }

 .header {
     display: flex;
     flex-direction: row;
     justify-content: center;
     height: 100vh;
 }

 .text-main {
     padding-top: 18vh;
     width: 50vw;
     font-size: 100px;
     text-align: center;
 }

 .image-main {
     background-color: black;
     width: 50vw;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .title-mini-text {
     font-size: 22px;
     font-family: 'Josefin Sans', sans-serif;
     opacity: 0.5;
     padding-top: 30px;
     z-index: 2;
 }

 .menu-link {
     font-family: 'Josefin Sans', sans-serif;
 }

 a:link,
 a:visited {
     color: white;
     text-decoration: none;
 }

 a:link:active,
 a:visited:active {
     color: white;
 }

 .title-button {
     border: 1px solid rgb(136, 136, 136);
     border-radius: 20px;
     font-family: 'Josefin Sans', sans-serif;
     margin: 0 30%;
     margin-top: 8%;
     display: flex;
     justify-content: center;
     align-items: baseline;
     font-size: 18px;
     padding: 20px 0;
 }
.para-container{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    opacity: 0.9;

}
 .para-text{
     font-family: 'Josefin Sans', sans-serif;
     line-height: 20px;
     text-align: center;
     font-size: 22px;
 }
 .black {
     color: black !important;
 }
 .black-container{
    background-color: black;
}

.black-container-1{
    background-color: black;
    height: auto !important;
}
 .white-container{
     background-color: white;
 }

 .white {
     color: white !important;
     font-weight: 400 !important;
 }

 .text-center{
     text-align: center !important;
 }
 .image-div {
     display: inline-block;
     width: 100%;
     padding-left: 25%;
 }

 #title-button{
    color: black !important;
}
.title-button:hover #title-button {
    color: white !important;
    font-weight: normal !important;
}

 @media (max-width: 500px){
    .image-div{
        width: 120%;
    }
  
 }

 .small-title{
     margin-top: 8%;
     font-size: 60px;
 }
 .small-img{  
    height: 55%;
    width: 75%;
    margin-left: 12.5%;
    margin-top: 20vh;
 }
 .small-img-1{  
    height: 50%;
    width: 70%;
    margin-left: 15%;
    margin-top: 8vh;
    margin-bottom: 6vh;
 }

 .main-image {
     width: 70%;
     height: 90%;
     padding-top: 2%;
 }

 .image-text {
     color: white;
     padding-top: 3%;
     font-size: 34px;
     font-family: 'Josefin Sans', sans-serif;
     text-align: center;
     line-height: 35px;
 }

 #image-text {
     font-size: 16px;
     opacity: 0.7 !important;
     font-family: 'Josefin Sans', sans-serif;
     letter-spacing: 4px;
 }

 .half-container{
     width: 50%;
     height: 90vh;
     color: black;
 }

 .container{
     display: flex;
     width: 100vw;
    }

.staff-container{
    background-color: black;
    height: max-content;
    padding-bottom: 30px;
}

   .span {
       display: block;
       font-family: 'Josefin Sans', sans-serif;

   }

   .span:after {
       content: ' ';
       position: absolute;
       left: 0;
       width: 100%;
       height: 100%;
       background: black;
       z-index: 1;
       transform-origin: 100% 0;
   }

   .padma-maintitle-1 {
       display: block;
   }

   .padma-maintitle-1:after {
       content: ' ';
       position: absolute;
       left: 0;
       width: 50%;
       height: 20%;
       background: white;
       z-index: 1;
       transform-origin: 100% 0;
   }

   .padma-maintitle-2 {
       display: block;
   }

   .padma-maintitle-2:after {
       content: ' ';
       position: absolute;
       left: 0;
       width: 50%;
       height: 20%;
       background: white;
       z-index: 1;
       transform-origin: 100% 0;
   }

    .staff-title{
        color: white;
        font-size: 50px;
        text-align: center;
        width: 100%;
        margin-top: 3%;
    }

    .staff-card{
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 70vh;
        width: 24%;
        background-color: white;
        border-radius: 20px;
    }
    .staff-card-container{
        margin-top: 3%;
        display: flex;
        justify-content: space-evenly;
    }

    .staff-image{
        margin-top: 10%;
        margin-bottom: 10%;
        width: 45%;
        height: 30%;
        border: 1px solid black;
        border-radius: 50px;
        overflow: hidden;
    }

    .staff-image img{
        width: 100%;
        height: 100%;
        }

    .staff-title-name{
        font-size: 28px;
    }
    .staff-qualifications{
        opacity: 0.8;
        font-size: 16px;
        margin-bottom: 2%;
    }
    .staff-details{
        font-family: 'Josefin Sans', sans-serif;
        font-size: 15px;
        text-align: center;
        opacity: 0.7;
        margin: 8%;
    }

    .text-main{
        overflow: hidden;
    }

    .title-button:hover{
        background-color: black;
        font-weight: 600;
        color: white;
        cursor: pointer;
    }

    .menu-link:hover{
        font-weight: 700;
    }

    .contact-container{
        margin: 2% 0;
        font-size: 50px;
        text-align: center;
        width: 100vw;
    }
    .contact-info-container{
        width: 80vw;
        display: flex;
        flex-direction: row;                
        justify-content: space-around;
        font-size: 18px;
    }
    .block{
        width: 50%;
        padding-left: 20%;
        font-family: 'Josefin Sans',sans-serif !important;
    }
    .container-2{
        width: 100vw;
        margin-bottom: 6vh;
    }
    .address-a{        
        font-family: 'Josefin Sans', sans-serif !important;
        color: black !important;
    }

    .phone-numbers{
        display: flex;
        flex-direction: column;
    }
    .address{
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 18px;
    }
    #header{
        display: none;
    }
    .menu-smol{
        /* height: 0; */
        display: none;
    }
.para-text{
            padding: 0 30px;
            line-height: 30px;

}
    @media only screen and (max-width: 600px) {
        .header{
            display: block;
            height: max-content;
        }
        .text-main{
            width: 100vw;
            padding-top: 15vh;
            height: max-content;
            font-size: 22vw;
        }
        .image-main{
            height: 75vh;
            width: 100vw;
        }
        .para-text{
            padding: 0 30px;
            line-height: 20px;
            font-size: 16px;
            height: max-content;
        }
        .padma-maintitle-1::after{
            width: 100%;
            height: 14%;
        }
        .staff-details{
            height: max-content;
        }
        .padma-maintitle-2::after {
            width: 100%;
            height: 14%;
        }
        .title-mini-text{
            padding-top: 40px;
        }
        .title-button{
            margin-top: 50px;
        }
        .container{
            display: block;
        }
        .half-container{
            width: 100%;
            height: auto;
            color: black !important;
            background-color: white;
        }
        .small-title{
        color: black !important;
        }
        .staff-card{
            width: 80vw;
            margin: 10vw;
            margin-top: 0vw;
        }
        .staff-container{
            height: max-content;
        }
        }
        #about-us{
            display: none;
        }
     @media (max-width: 600px) {
        .staff-card{
            width: 80vw;
            margin: 10vw;
            margin-top: 0vw;
            height: auto;
        }
         .menu-smol {
             position: absolute;
             height: 100vh;
             width: 100vw;
             transform: translate(-100vh);
             top: 0;
             left: 0;
             background-color: black;
             z-index: 4;
             display: flex;
             flex-direction: column;
             justify-content: space-around;
             align-items: center;
         }
         #about{
             margin-top: 5vh;
         }
         #about-us-1{
            display: none;
         }
         .nav-container {
             display: none;
         }

         .small-img{
            margin-top: 10vh;
            margin-bottom: 10vh;
            height: auto;
        }

         #header {
             display: flex;
             justify-content: flex-end;
             align-items: center;
             z-index: 6;
             margin: 8px 0 0 0;
         }  
         .contact-info-container{
            flex-direction: column;
            align-items: center;
            margin-left: 10vw;
        }
        .block{
            padding-left: 0;
            width: inherit;
        }
        #about-us{
            display: inline-block;
            width: 100vw;
            text-align: center;
        }

        .phone-numbers{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .address{
            margin-top: 20px;
            display: flex;
            flex-direction: column;
        }
         #menu {
             width: 70%;
         }

         .menu-link {
             font-size: 30px;
             opacity: 0;
         }
     }