@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/Poppins-ExtraBold.ttf") format("truetype");
  font-weight: 800;
}



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


html, body {
  height: 100%;
  width: 100%;
  font-family: Poppins;
  scroll-behavior:auto;
  background-color: var(--back-color);
  font-family: Poppins;
}

body {
  overflow-x: hidden;
}








:root {
  /* Primary brand colors */
  --primary-color: #00b600;   
  --accent-color: #007200;  
  --secondary-color: #fcc100;
  --border-color: #bbbbbb;  
  --card-color: #f0f0f0;  
  --back-color: #ffffff;           
  --text-color: #333;           
  --sub-text: #636363; 
}






/*NAVIGATIONS*/
.navigations{
  width: 100%;
  padding: 0.5rem 15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(78, 78, 78, 0.404);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  position: fixed;
  top: 0px;
  z-index: 9999;
}


.admContainer button{
  font-weight: 400;
  font-size: 0.9rem;
  font-family: Poppins;
  color: var(--back-color);
  outline: none;
  border: none;
  border-radius: 5px;
  padding: 0.4rem 1rem;
  background-color: var(--primary-color);
  cursor: pointer;
}


.admContainer button:hover{
  animation: btn_0_Popup 0.3s ease-in-out forwards;
}

@keyframes btn_0_Popup {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1.10);
  }
}

.aContainer{
  display: flex;
  justify-content: center;
  gap: 5rem;
}

.aContainer a{
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--back-color);
  text-decoration: none;

}











/*LOGIN STYLES*/

.loginWrapper{
  width: 100%;
  height: 100vh;

  display: flex;
}

.loginInner1,
.loginInner2{
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.loginInner2{
  padding: 15px;
}

.vnmContainer{
  width: 100%;
  height: 100%;

  overflow: hidden;
  position: relative;
  border-radius: 15px;
}

.vnmContainer img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loginformContainer{
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 1.5rem;
}

.loginformContainer .logo{
  width: 180px;
  height: 180px;
}

.loginForm{
 width: 400px;
 height: 420px;
 border-radius: 15px;
 padding: 3rem 1rem;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;

 background-color: var(--card-color);
 box-shadow: 5px 5px 5px var(--border-color);
}

.loginForm button{
  width: 100%;
  padding: 0.8rem;
  border: none;
  outline: none;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: Poppins;

  background-color: var(--accent-color);
  color: var(--back-color);

  transition: 0.3s ease-in-out;
}

.loginForm button:hover{
  cursor: pointer;
  transform: scale(1.05);
}

.inputHolder{
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;

}

.inputHolder h3{
  font-size: 1.1rem;
  color: var(--accent-color);
  font-weight: 600;
  font-family: Poppins;
  margin-bottom: 1.5rem;
}

.inputHolder input{
  padding: 0.8rem;
  border: none;
  outline: none;
  border-radius: 5px;
  font-family: Poppins;
}

.inputHolder input:focus{
  border: 1.5px solid var(--primary-color);
}


.inputHolder span p{
  font-size: 0.8rem;
  font-family: Poppins;
  color: var(--accent-color);
}

.inputHolder span p:hover{
  text-decoration: underline;
  cursor: pointer;
}

.lognMaskcon{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 0 5rem;
  color: var(--back-color);
  z-index: 10;
}

.lognMaskcon::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--accent-color);
  opacity: 0.8;
  z-index: -1;
}


.lognMaskcon h1{
  font-size: 3rem;
  margin-bottom: 2rem;
  text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
}

.lognMaskcon h3{
  font-size: 1.1rem;
  font-weight: 600;
}

.lognMaskcon p{
  font-size: 1.1rem;
  margin-bottom: 2rem;
  line-height: 1.7rem;
}












.logInBbtn{
  position: absolute;
  top: 1rem;
  left: 2rem;

  width: 35px;
  height: 35px;
  background-color: var(--primary-color);
  color: var(--back-color);
  font-size: 1rem;
  font-weight: 400;


  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 0.1rem;

  border-radius: 5px;
  cursor: pointer;

  border: none;
  outline: none;
}





.logInBbtn_faculty{

  width: 35px;
  height: 35px;
  background-color: var(--primary-color);
  color: var(--back-color);
  font-size: 1rem;
  font-weight: 400;


  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 0.1rem;

  border-radius: 5px;
  cursor: pointer;

  border: none;
  outline: none;
}














/*FACULTY*/

.faculty_loginWrapper{
  width: 100%;
  height: 100vh;
}

.faculty_Inner_Con .faculty_Img_Cover{
  width: 100%;
  height: 100vh;
  
  position: absolute;
  object-fit: cover;
  z-index: 5;
}

.faculty_Inner_Mask{
  width: 100%;
  height: 100%;

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

  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;

  opacity: 0.5;
}

.faculty_Inner_Con{
  width: 100%;
  height: 100vh;

  display: grid;
  flex-direction: column;

  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 1fr;

  grid-template-areas: "faculty_login_DescCon faculty_login_FormContainer";
}

/*CONTAINER 1*/

.faculty_login_DescCon{
  grid-area: faculty_login_DescCon;
  z-index: 25;

  padding: 15px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.faculty_login_DescCon h1{
  font-size: 5rem;
  color: var(--back-color);
  font-weight: 600;
  line-height: 1;

  padding: 1rem;
  margin-bottom: 5rem;
  animation: lpageh1Entry 1.5s ease forwards;
  transform: translateY(100px)
}


@keyframes lpageh1Entry {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}





/*CONTAINER 2*/

.faculty_login_FormContainer{
  grid-area: faculty_login_FormContainer;
  z-index: 25;

  padding: 1rem;
}

.faculty_Form{
  width: 100%;
  height: 100%;

  padding: 1rem;

  border-radius: 15px;
  background-color: var(--back-color);

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


.form_Inner_faculty{
  max-width: 350px;
  height: 100%;

  display: flex;
  flex-direction: column;
}


.form_Inner_faculty{
 width: 400px;
 height: 500px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;
}

.form_Inner_faculty button{
  width: 100%;
  padding: 0.8rem;
  border: none;
  outline: none;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: Poppins;

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

  transition: 0.3s ease-in-out;
}

.form_Inner_faculty button:hover{
  cursor: pointer;

  transform: scale(1.05);
}


.inputHolder_faculty{
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1rem;

}

.form_Inner_faculty h3{
  font-size: 1.4rem;
  color: var(--primary-color);
  font-weight: 600;
  font-family: Poppins;
}

.form_Inner_faculty input{
  padding: 0.8rem;

  border: 1.5px solid var(--primary-color);

  border-radius: 5px;
  font-family: Poppins;
}

.form_Inner_faculty input:focus{
  border: 1.5px solid var(--primary-color) !important;
}

.form_Inner_faculty p{
  font-size: 0.8rem;
  font-family: Poppins;
  color: var(--sub-text);
  text-align: center;

  margin-bottom: 1.5rem;
}

.form_Inner_faculty a{
  text-decoration: none;
  color: var(--primary-color);
}

.form_Inner_faculty p a:hover{
  text-decoration: underline;
  cursor: pointer;
}









/*FACULTY LOGO CONTAINER*/
.facultyLogo_Cotainer{
  width: 100%;
  height: 7vh;

  padding: 1rem;

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

  z-index: 20;
}

.facultyLogo_Cotainer img{
  height: 100%;
  cursor: pointer;
}





.cr_socialsCon_faculty{
  width: 100%;
  padding: 1rem;

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

  position: inherit;
  z-index: 10;
}

.cr_socialsCon_faculty .crTxt_faculty{
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 0.9rem;
  color: var(--sub-text);

  color: var(--back-color);
}










/* SOCIALS */

.social_wapper_faculty{
  display: flex;
  gap: 10px;

  justify-content: flex-end;
}

.socials_faculty{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background-color: var(--primary-color);

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

  color: var(--primary-color);
  transition: 0.3s ease;
}

.socials_faculty:hover{
  animation: btn_0_Popup 0.3s ease-in-out forwards;
}

@keyframes btn_0_Popup {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1.10);
  }
}

.socials_faculty i{
  font-size:small;
  color: var(--back-color);
}











/*FOOTER SECTION STYLES*/

.footerWrapper{
  display: flex;
  flex-direction: column;
} 

.footerColcon{
  display: flex;
  justify-content: space-between;
  padding: 5rem 15rem;
  border-top: solid 1px var(--border-color);
}

.footerColumn{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footerColumn h3{
  font-weight: 600;
  font-size: 0.9rem;
}

.footerColumn a{
  text-decoration: none;
  color: var(--sub-text);
  font-size: 0.9rem;
}

.footerColumn a:hover{
  text-decoration: underline;
  color: var(--primary-color);
}

.cr_socialsCon{
  width: 100%;
  padding: 5rem 15rem;

  display: flex;
  align-items: end;
  justify-content: space-between;
}


.cr_socialsCon .crTxt{
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 0.9rem;
  color: var(--sub-text);
}




















/*MEDIA QUERY*/



@media (max-width: 900px) { 

  /*STUDENT LOGIN*/

  .loginWrapper {
   flex-direction: column;
  }

  .loginInner1{
    padding: 2rem;
  }

  .loginInner2 {
    display: none;
  }

  .loginformContainer {
    width: 100%;
    min-height: 400px;
  }

  .loginForm {
    width: 100%;
    box-shadow: none;
    padding: 0rem 1rem;
    background-color: var(--back-color);
    height: 100%;
  }

  .inputHolder {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .inputHolder input {
    padding: 0.5rem;
    border: 1px solid var(--primary-color);
    font-size: 0.7rem;
  }


  .inputHolder h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
  }

  .inputHolder span p {
    font-size: 0.6rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
  }

  .loginForm  p {
    font-size: 0.6rem;
    font-family: Poppins;
    color: var(--primary-color);
  }

  .loginformContainer .logo {
    width: 100px;
    height: 100px;
  }

  .loginForm button {
    padding: 0.5rem;
    background-color: var(--primary-color);
  }


  .logInBbtn {
    top: 1.5rem;
    left: 1.5rem;
  }




  /*FACULTY*/
  
  
  .faculty_loginWrapper,
  .faculty_Inner_Con{
    height: 100%;
    min-height: 100vh;
    display: flex;
  }

  .facultyLogo_Cotainer {
    display: none;
  }

  .faculty_login_DescCon{
    justify-content: center;
    text-align: center;

    height: 100%;
  }

  .faculty_login_DescCon h1{
    font-size: 2.5rem;
    margin-top: 5rem;
    margin-bottom: 3rem;

    display: flex;
    text-align: left;
  }

  .faculty_login_FormContainer{
    padding: 0rem;
  }

  .form_Inner_faculty h3 {
    font-size: 1.2rem;
    color: var(--primary-color);
  }

  .form_Inner_faculty{
    width: 100%;
    height: auto;
    gap: 1.5rem;
  }

  .form_Inner_faculty input {
    font-size: 0.7rem;
    padding: 0.5rem;
  }

  .form_Inner_faculty button {
    padding: 0.5rem;
  }

  .form_Inner_faculty p {
    font-size: 0.6rem;
  }

  .faculty_Form{
    padding: 3rem 2rem;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .cr_socialsCon_faculty {
    display: none;
  }

}