
/* Reset default margin and padding */
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;

}

/* Container for all content */
.page-container {
position: relative;
width: 100%;
min-height: 100vh; 
background: url("images-laptop-scheme/image\ 14.png") center center / contain repeat-y;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}




.header {
  position: relative;
  width: 100%;
  min-height: 100vh; 
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  z-index: 3;
  overflow: hidden;
}


.header img.logo {
  width: 16%; 
  max-width: 250px; 
  height: auto;
  position: absolute;
  top: 5%;
  left: 5%;
}

/* Logo Description */
.header img.logo-desc {
  width: 25%;
  max-width: 280px;
  height: auto;
  position: absolute;
  top: 37%;
  left: 3%;
}

/* Prime Minister Image */
.header img.pm-image {
width: 25%;
max-width: 350px;
height: auto;
}

/* Decoration Lines */
.header img.decoration-lines {
position: absolute;
width: 100%;
max-height: 40vh;
bottom: 46px;
left: 10px;
}

/* Form Container */
.form-container {
background-color: white;
padding: 0 0 20px 0 ;
border-radius: 10px;
position: relative;
z-index: 2; 
width: 112%;
margin-top: 0  !important;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
margin-top: -10% !important;
overflow-y: visible;
left: 50%;
transform: translateX(-50%);
margin-bottom: 25%;

}

.text-center {
  color: rgba(14, 118, 49, 1);
  font-family: Poppins;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 48px;
  margin-bottom: 30px;
  padding-top: 35px;


}

/* Section Title */
.section-title {
  background: linear-gradient(180deg, #D2FFA4 -27.16%, #3DAB32 50%);
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 50px;
  margin-bottom: 20px;
  font-family: Poppins;
  font-weight: 700;
  font-size: 24px;
  /* line-height: 42px; */

}
.form-container .container form{
  padding-left: 20px;
  padding-right: 20px;
}
form  .form-label{
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: rgba(51, 51, 51, 1);
}
form input::placeholder{
  color: rgba(117, 117, 117, 1);
  font-family: Poppins;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
}
form select  option:disabled{
  color:rgba(117, 117, 117, 1) ;
}
.text-center .btn-success{
  color: rgba(255, 255, 255, 1) !important;
  background: linear-gradient(180deg, #D2FFA4 -27.16%, #3DAB32 50%) !important;
  border-radius: 50px;
  font-family: Poppins;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 42px;
  border: none;
  padding: 12px 15vh;
}
.text-center .btn-success:hover{
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}
/* UNIVERSITY DROPDOWN */
/* Style for the dropdown container */
#universityDropdown {
  max-height: 200px; 
  overflow-y: auto ; 
  font-size: 14px; 
  padding: 8px; 
}

.footer {
  position: relative;
  max-height: 120px;
  width: 100%;
  text-align: center;
  z-index: 2;
  
}

.footer::before {
  content: "";
  position: absolute;
  bottom: -50px; /* Adjust this value to control the curve height */
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(90deg, #01702E 0%, #509542 50%, #006132 100%);
  height: 120px;
  border-radius: 50% 50% 0 0; 
  z-index: 2;
}

.footer::after {
  content: "";
  position: absolute;
  bottom: 10%; 
  left: 0;
  width: 100%;
  height: 80px;
  background: rgba(196, 224, 88, 1);
  border-radius: 50% 50% 0 0; 
 
  z-index: 1;
  box-sizing: border-box;
}


/* RESPONSIVENESS STYLING AT DIFFRENT SCREEN SIXES */
/* ----------------------------------------------- */

  @media (max-width: 1024px) {
  .header img.logo {
  width: 21%;
  }
  .header img.pm-image {
  width: 30%;
  }
  .header img.logo-desc {
  width: 30%;
  top: 54%;
  }
  .header img.decoration-lines {
    height: 40vh;
    bottom: -6vh;
    }
    .form-container{
      width: 98%;
      margin-top: -1% !important;
      margin-right: 15px;
    }
  }

@media (max-width: 768px) {
.header {
  display: flex;
flex-direction: row;
justify-content: space-between;
}
.header img.logo{
  width: 30%;
}
.header img.logo-desc{
  width: 34%;
  top: 54%;
  left: 2%;
  height: auto;
}
.header img.pm-image {
width: 40%;
margin: 10px ;
}
.header img.decoration-lines{
  bottom: -4vh;
}
}

@media (max-width: 425px) {
  .header{
    display: flex;
    flex-direction: column;
    height: auto;
    align-items: center;
    justify-content: center;
    gap: 20px
  }
  .logo-container{
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }
  .header img.logo,
  .header img.logo-desc,
  .header img.pm-image {
    position: static; 
    top: auto;
    left: auto;
    margin: 0;
  }
.header img.logo{
  width: 50%;
 
}
.header img.logo-desc{
  width: 70%;
 
}
.header img.pm-image {
  width: 50%;
}
.header img.decoration-lines {
height: 30vh;
bottom: -8vh;
left: 4vh;
z-index: 1;
}
.form-container {
max-width: 94%;
padding: 15px;
margin-right: 25vh;
}
}
@media (max-width: 375px) {
  .form-container {
    max-width: 91%;
    padding: 15px;
    margin-right: 25vh;
    }
}
@media (max-width: 320px) {
  .form-container {

  max-width: 100%;
  }

}
