/* .contact-headding-sec{
    padding: 2%;
     
}

.parallax {
background-image: url(../images/contact/mask.png);
    min-height: 100vh;
    background-attachment: fixed;
    background-position: 30% 50%;
    background-repeat: no-repeat;
    background-size: 12%;
}
.contact-headding{
    
    width: max-content;
    font-family: 'Red Hat Display', sans-serif;
    margin: auto;
color: #004071;
opacity: 1;

text-align: center;
font-style: normal;
    font-variant: normal;
    font-weight: 500; 
    font-size: 43px;
    line-height: 17px;
    font-family: 'Red Hat Display', sans-serif;
} */

.parallax,
.parallax1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
 
  z-index: 0;
}

/* .parallax {
  background-image: url(images/contact/mask.png);
  background-position: 30% 100%;
   background-size: 15%;
} */

.parallax1 {
  background-image: url(../images/contact/asset6.png);
  background-position: 70% 60%; /* Adjust position for better composition */
  z-index: 1;
    background-size: 30%;
     animation: floatLeft 5s ease-out 1 forwards ;
}
@keyframes floatLeft {
  0% {
    background-position: 100% 60%;
  }
  100% {
    background-position: 70% 60%;
  }
}

.contact-headding-sec {
  position: relative;
  z-index: 2;
}



    .parallax-wrapper {
      position: relative;
      height: 100vh;
      overflow: hidden;
    }

    .parallax {
      background-image: url(../images/contact/mask.png);
      background-attachment: fixed;
      background-position: 30% 100%;
      background-repeat: no-repeat;
      background-size: 15%;
      width: 100%;
      height: 100%;
    }
    /* .parallax1{
         background-image: url(images/contact/asset6.png);
      background-attachment: fixed;
      background-position: 30% 100%;
      background-repeat: no-repeat;
      background-size: 15%;
      width: 100%;
      height: 100%;
    } */

    .contact-headding-sec {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column; 
      align-items: center;
      justify-content: flex-start;
      padding-top: 100px;
      gap: 40px;
      box-sizing: border-box;
    }

div, input, textarea, p{
      font-family: 'Red Hat Display', sans-serif;

}

    .contact-headding {
      font-family: 'Red Hat Display', sans-serif;
      color: #004071;
      font-weight: 500;
      margin: unset;
          margin-top: 5%;
      font-size: 43px;
      text-align: center;
      line-height: 1.2;
      /* optional for readability */
      padding: 20px 40px;
      border-radius: 8px;
    }

  .flex-boxes {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: flex-start; /* default alignment */
}

.flex-box1,
.flex-box3 {
  align-self: flex-end; /* push these two to bottom of tallest (box2) */
}

.flex-box1 {
  width: 298px;
  /* height: 224px; */
  color: #004071;
  font-size: 18px;
  padding: 2%;
  background: #dee2e629;
  border-radius: 12px;
  opacity: 1;
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
}

.flex-box4, .flex-box5{
    background:#dee2e629 ;
        margin:2%;
        width: 298px;
  padding: 2%;
  color: #004071;
border-radius: 12px;
backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
      margin-bottom: 5%;
    /* height: 124px; */
}

.flex-box3 {
  width: 298px;
  height: 224px;
  /* background:#d8d8d86b ; */
  border-radius: 12px;
  opacity: 1;
  
}

.flex-box2 {
  width: 504px;
  /* height: 507px; */
  background: #dee2e629;
  border-radius: 12px;
  opacity: 1;
  padding: 2%;
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
}


.contact-form{
    padding: 5%;
}
.form-group {
      margin-bottom: 25px;
    }

    .form-group input{
      width: 100%;
      border: none;
      border-bottom: 1px solid #0000002b;
      background: transparent;
      padding: 8px 4px;
      font-size: 18px;
      color: #004071;
      text-transform: lowercase;
      outline: none;
    }
.form-group select,
    .form-group textarea {
      width: 100%;
         border-radius: 5px;
      border: none;
      border: 1px solid #0000002b;
      background: transparent;
      padding: 8px 4px;
      font-size: 18px;
      color: #004071;
      text-transform: lowercase;
      outline: none;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder,
    .form-group select {
      color: #004071;
      text-transform: lowercase;
      opacity: 0.7;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 100px;
    }

    .contact-form button {
      background-color: #002d52;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 5px 20px;
      font-size: 18px;
      text-transform: lowercase;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .contact-form button:hover {
      background-color: #002d52;
    }
@media (max-width:768px) {

.contact-headding {
    font-size: 25px;
padding: 0px 40px;
}
.flex-boxes {
      flex-direction: column;
}
.contact-headding-sec{
align-items: normal
}
.parallax-wrapper {
    height: 140vh;
}
.flex-box1 {
    width: 80%;
  
    font-size: 14px;
 padding: 5%;
    margin: auto;
}
.flex-box2 {
    width: 90%;
    /* height: 507px; */
    margin: auto;
}
.form-group input, .form-group select, .form-group textarea, .contact-form button{
    font-size: 14px;
}
.flex-box3{
      width: 80%;
    margin: auto;
    font-size: 14px;
}
.flex-box4, .flex-box5{
    /* width: 80%; */
    margin: auto;
    margin-bottom: 5%;
padding: 5%;
    font-size: 14px;
}
.parallax {
    background-position: 85% 100%;
    background-size: 50%;
}


   }

  @media only screen  and (min-width : 1224px) {
    .parallax-wrapper {
    height: 130vh;
    }
    .contact-headding {
    font-size: 30px;
    } .contact-form button, .form-group select,
    .form-group textarea, .form-group input, .flex-box1 {
        font-size: 14px;
    }
       }
@media only screen  and (min-width : 1800px) {
    .parallax-wrapper {
    height: 100vh;
    }
    .contact-headding {
    font-size: 43px;
    } 
    .contact-form button, .form-group select,
    .form-group textarea, .form-group input, .flex-box1 {
        font-size: 18px;
    }
}