/* 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-perspective-overseas/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: 1150px; 
 max-width: 140%; 
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: 50px;


}

/* 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: 15px;
  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) ;
}


.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;
}
/* this style is for page Financing History */
.loan-note {
  color:#FF0000;
  font-family: Poppins;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  text-decoration: underline solid;
}


/* RESPONSIVENESS STYLING AT DIFFRENT SCREEN SIXES */
/* ----------------------------------------------- */

  @media (max-width: 1024px) {
    /* .page-container{
      width: 103%;
      } */
  .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: 950px;
      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;
}
.form-container{
  width: 100%;
}
.form-container .text-container{
  padding-left: 12px !important;
  padding-right: 12px !important;
}
}

@media (max-width: 425px) {
  .page-container{
    width: 103%;
    }
  .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;
}
.action-buttons{
  gap: 15px;
}
.action-buttons .btn-light,
.action-buttons .btn-success{
  font-size: 16px;
  font-weight: 600;
}
/* .footer::before {
  width: 103%;
}
.footer::after {
  width: 103%;
} */
}
@media (max-width: 375px) {
  .page-container{
    width: 117%;
    }
  .form-container {
    max-width: 91%;
    padding: 15px;
    margin-right: 25vh;
    }
   

}
@media (max-width: 320px) {
  .form-container {

  max-width: 100%;
  }
 /* .form-container .text-container .container-fluid {
        padding-left: 53px;
        padding-right: 10px;
  } */
  .page-container{
  width: 137%;
  }
 

}



.progress-bar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-width: 800px;
  margin: 20px auto;
}

.progress-bar-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3%;
  width: 95%;
  height: 4px;
  background-color: #ccc;
  transform: translateY(-50%);
  z-index: 0;
}

.progress-step {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

.progress-step.active {
  background-color: green;
  color: white;
}

.progress-bar {
  position: absolute;
  top: 50%;
  left: 3%;
  width: 10%; /* Adjust dynamically via JS */
  height: 4px;
  background-color: green;
  transform: translateY(-50%);
  z-index: 0;
  transition: width 0.3s ease-in-out;
}

.form-label span {
  color: red;
}
.btn-success{
  background-color: rgba(61, 171, 50, 1) !important;
  border-radius: 10px;
  color: rgba(255,255,255,1);
  font-family: Poppins;
  font-weight: 700;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  border: none;
  padding: 12px;
}
.btn-light{
  background-color: rgba(248, 248, 248, 1) !important;
  color: rgba(195, 195, 195, 1) !important;
  border-radius: 10px;
  font-family: Poppins;
  font-weight: 700;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  padding: 12px;
}
.action-buttons .btn-success:hover, .action-buttons .btn-light:hover{
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}