@import url("https://fonts.googleapis.com/css2?family=poppins:wght@400;500&display=swap");

* {
    box-sizing: border-box;
    font-family: "poppins", sans-serif;
  }
   
.contact-title {
    text-align: center;
    margin-bottom: 0.52vw;
    font-size: 3vw;
    font-weight: 600;
    color: #000000;
    padding-top: 40px;
    
}

.red-line {
    width: 30%;
    height: 4px; 
    background-color: red; 
    margin: 3px auto; 
    border-radius: 10vw;
}

.container {
    display: left;
    justify-content: space-between;
    text-align: left;
    font-weight: bold;

    
}

.container p {
font-weight: 300;

  
}
.contact-info  {
    flex: 1;
    padding-top: 3vh;
    padding-left: 5vw;
    border: 1px solid transparent;

}

.contact-info img {
    width: 2%;
    text-align: left;
  

}

.contact-info h1 {
    font-size: 1vw;
    
}

.contact-info h2 {
    font-size: 1.8vw;
}

p{
font-weight: 100;
}

.social-media {
    flex: 1;
    padding: 2vw;
    border: 1px solid transparent;
    border-radius: 5px;
    text-align: center;
    
}

.map-container {
    flex: 1;
    padding: 2vw;
    border: 1px solid transparent;
    border-radius: 5px;
    text-align: center;
    
}


.map-container h2{
    text-align: center;
    font-size: 2vw;
}
.map-container img {
    width: 5%;
}

.social-media h2 {
    font-size: 2vw;
}
.social-media p{
    font-size: 2.5vw;
    
    }

.social-media a{
width: 10vw;
height: 1vh;
padding-left: 2.5vw;
text-decoration: none;
color: #000000;

}

.social-media img{
    width: 3vw;
    height: auto;

    }

 .social-media li {
        display: flex;
        align-items: center;
        justify-content: center;
       height:6vh;
       width:auto;
       
    }

.map-container iframe {
    width: 100%;
    height: 70%;
    border-radius: 2vw;
}


.form-container-firstform {
    margin: 2vw;
    background-color: #F2f2f2;
    align-items: center;
    border-radius: 2vw;
    padding: 2vw;
    border: 1px solid #8E9CA1;
}


.form-row {
    display: flex;
    justify-content: space-between;
    gap: 4vw;
    width: 90%;
    margin-left: 4.4vw;
}

.form-group {
    margin: 0 auto;
    width: 90%;
    align-items: center; 
    padding: 1%;
    
}

label {
    margin-bottom: 0.1vw;
}

input, select, textarea {
    width: 100%; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 10px; 
    background-color: white; 
}

option:first-child {
    color: #999; 
    font-style: italic; 
}

.checkbox-group {
    display: flex;
    align-items: center; 
}

input[type="checkbox"] {
    -webkit-appearance: none; /* Remove default checkbox appearance */
    appearance: none;
    border: 1px solid #ccc; 
    border-radius: 5px; 
    width: 1vw; 
    height: 2vh; 
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

input[type="checkbox"]:checked {
    background-color: red;
    border: none;
    background-image: url('../Media/tick.jpeg'); 
}
.form-group button {
    background-color: red;
    color: white;
    border: none;
    padding: 1vw 2vh;
    border-radius: 10vw;
    cursor: pointer;
    margin-left: 45%;
}
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid #ccc;
    padding: 5vw;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);  
border-radius: 2vw;
    z-index: 9999;
}

.popup img{
    width: 5vw;
    height: auto;
}

.popup-content {
    text-align: center;
}

.popup-close {
   position: absolute;
    cursor: pointer;
    top: 1.5vw;
    right: 2vw;
}

/* Media Queries */

@media (max-width: 768px) {
    .contact-title {
      font-size: 6vw;
      margin-bottom: 2vw;
    }
  
    .red-line {
      width: 50%;
      height: 2px;
      margin: 5px auto;
    }
  
    .container {
      flex-direction: column;
      padding: 2vw;
    }
  
    .contact-info, .social-media, .map-container {
      padding: 2vw;
      text-align: center;
    }
  
    .contact-info img, .map-container img {
      width: 10%;
    }
  
    .contact-info h1, .contact-info h2, .map-container h2, .social-media h2 {
      font-size: 4vw;
    }

    .social-media h2 {
      font-size: 5vw;
      margin-bottom: 3vh;
  }
  
    .social-media img {
      width: 8vw;
      height: auto;
      margin-right: 3vw;
    }
  
    .social-media p {
      font-size: 4vw;
    }
  
    .social-media a {
      font-size: 4vw;
    }

   
  
    .social-media li {
      justify-content: flex-start;
        height: auto;
        margin-bottom: 2vh;
    }
  
    .map-container iframe {
      width: 100%;
      height: 50%;
    }
  
    .form-container-firstform {
      margin: 4vw;
      padding: 3vw;
    }
  
    .form-row {
      flex-direction: column;
      gap: 2vw;
      width: 100%;
      margin-left: 0;
    }
  
    .form-group {
      width: 100%;
      padding: 2%;
    }
  
    input, select, textarea {
      padding: 8px;
      font-size: 3vw;
    }
  
    .checkbox-group {
      justify-content: center;
    }
  
    input[type="checkbox"] {
      width: 5vw;
      height: 3vh;
    }
  
    .form-group button {
      margin-left: 0;
      width: 100%;
      padding: 3vw 2vh;
    }
  
    .popup {
      width: 90%;
      padding: 4vw;
    }
  
    .popup img {
      width: 10vw;
    }
  
    .popup-close {
      top: 2vw;
      right: 2vw;
    }
  }