.contact-section {

    /* background: linear-gradient(91.02deg, rgba(0, 0, 0, 0.8) 0.83%, rgba(0, 0, 0, 0) 80.53%), url(../images/contact.png); */

    background: linear-gradient(91.02deg, rgba(0, 0, 0, 0.8) 0.83%, rgba(0, 0, 0, 0) 80.53%), url(../images/Contact\ us\ img.png);

    background-size: cover;

    height: 1000px;

    width: 100%;



}



.contact-container {

    background-color: rgba(0, 0, 0, 0.3);

    padding: 50px 20px 0px 20px;

    position: absolute;

    width: 1299px;

    height: 481px;

    left: calc(50% - 1299px / 2 + 0.5px);

    top: 480px;

    border-radius: 15px;

    text-align: center;

    backdrop-filter: blur(5px);

    /* padding-top:50px; */

}



.contact-container h2,

h2 {

    font-family: 'Oswald';

    font-style: normal;

    font-weight: 500;

    font-size: 55px;

    line-height: 67px;

    letter-spacing: 0.8px;

    color: rgba(255, 255, 255, 0.89);

}



.contact-container p {

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 400;

    font-size: 21.91px;

    line-height: 27px;

    text-align: center;

    color: #FFFFFF;

}



.contact-container h4 {

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 500;

    line-height: 67px;

    letter-spacing: 0.8px;

    color: rgba(255, 255, 255, 0.89);

}



.contact-container .bg {

    width: 60px;

    height: 60px;

    border-radius: 100%;

    background-color: #b9bdbe7d;

    justify-content: center;

    display: flex;

    align-items: center;

}



.box-bg {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.contact-container button {

    background-color: transparent;

    border-radius: 50px;

    color: rgba(71, 173, 162, 1);

    text-align: center;

    width: 100%;

    border: 1px solid rgba(71, 173, 162, 1);

    padding-block: 10px;

    cursor: pointer;

}



.accordion {

    margin: auto;

    border-radius: 5px;

    overflow: hidden;

}



.accordion-item {

    border-bottom: 1px solid #ddd;

}



.accordion-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px;

    background: #f1f1f1;

    cursor: pointer;

    font-weight: bold;

    position: relative;

    margin-top: 30px;

    border-radius: 8px;

}



.accordion-header::after {

    content: "";

    width: 0;

    height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 5px solid #000;

    transform: rotate(0deg);

    transition: transform 0.3s ease;

}



.accordion-content {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease-out;

}



.accordion-content p {

    padding: 15px 30px;

    margin: 0;

}



.accordion-header.active::after {

    transform: rotate(180deg);

}



.contact-popup .popup {

    background-color: transparent;

    padding: 20px;

    position: absolute;

    width: 1299px;

    height: 481px;

    top: 600px;

    border-radius: 8px;

    /* text-align: center; */

}



.contact-popup .popup-content {

    margin-top: 0px;

}



.contact-popup .form-div {

    position: absolute;

    /* left: 42.2%; */

    /* right: 9.66%; */

    left: 50%;

    right: 0%;

    /* top: 7.36%; */

    top:0%;

    bottom: 0%;

    background: rgba(0, 0, 0, 0.6);

    backdrop-filter: blur(5px);

    /* Note: backdrop-filter has minimal browser support */

    border-radius: 25px;

    height: 600px;

}



.contact-popup .get-in-div {

    padding: 20px;

    text-align: left;

}



.get-in-div h2 {

    font-family: Oswald;

    font-size: 55px;

    font-weight: 500;

    line-height: 67px;

    letter-spacing: 0.800000011920929px;

    text-align: left;



}



#getSelect {

    width: 354px;

    height: 63px;

    background: transparent;

    font-family: Montserrat;

    font-size: 24px;

    font-weight: 400;

    line-height: 29.26px;

    color: #fff;

    padding: 0px 20px;

    /* text-align: center; */



}



option {

    background-color: transparent;

    color: black;

}



.contact-popup .bg {

    width: 40px;

    height: 40px;

    border-radius: 100%;

    background-color: #b9bdbe7d;

    justify-content: center;

    display: flex;

    align-items: center;

}



.contact-popup h4 {

    color: #fff;

    display: flex;

    align-items: center;

    padding-left: 15px;

}



.contact-popup p {

    color: #fff;

    padding-left: 15px;



}



.form-fields {

    display: flex;

    flex-direction: column;

    gap: 20px;

    width: 45%;

    margin: 2%;

}



.form-fields label {

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 20px;

    color: #D3D3D3;

}



.form-fields select, .form-fields input[type=text], .form-fields input[type=number], .form-fields textarea {

    background: rgba(255, 255, 255, 0.05);

    border-radius: 8px;

    height: 55px;

    font-family: 'Montserrat';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 17px;

    color: #D3D3D3;

    opacity: 0.5;

}



.contact-popup .form-button {

    background-color: rgba(71, 173, 162, 1);

    border-radius: 50px;

    color: rgba(255, 255, 255, 1);

    font-family: 'Manrope', sans-serif;

    font-weight: 600;

    font-size: 18px;

    line-height: 24px;

    text-align: center;

    /* width: 100%; */

    border: none;

    /* padding-block: 17px; */

    margin-top: 20px;

    cursor: pointer;

    padding: 10px 30px;

}



.mobile-number-section {

    display: flex;

    align-items: center;

    /* justify-content: space-between; */

    padding: 10px;

    /* background-color: #f9f9f9; */

    border-radius: 5px;

    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */

}



/* Styles for the select element container */

.select-div {

    /* display: flex; */

    align-items: center;

    margin-right: 10px;

    width: auto;

    background: none;

    /* margin-bottom: 0px; */

}



/* Optional icon styling inside the select container */

.icon-select-div {

    width: 20px;

    height: 20px;

    margin-right: 5px;

    background: url('path-to-icon.png') no-repeat center center;

    background-size: contain;

}



/* Styles for the select element */

.select-div select {

    padding: 5px 10px;

    /* border: 1px solid #ccc; */

    border-radius: 4px;

    background-color: #fff;

    font-size: 16px;

    cursor: pointer;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 8px;

    height: 55px;

    color: #fff;

}



/* Styles for the input field */

.number {

    flex: 1;

    padding: 5px 10px;

    /* border: 1px solid #ccc; */

    border-radius: 4px;

    font-size: 16px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 8px;

    height: 55px;

    width: 470px;

}



@media only screen and (max-width: 768px) { 



    .contact-section {

        /* background: linear-gradient(91.02deg, rgba(0, 0, 0, 0.8) 0.83%, rgba(0, 0, 0, 0) 80.53%), url(../images/Rectangle3.png); */

        background: linear-gradient(91.02deg, rgba(0, 0, 0, 0.8) 0.83%, rgba(0, 0, 0, 0) 80.53%), url(../images/Contact\ us\ mobile.png);

        background-size: cover;

        /* height: 1000px; */

        width: 100%;

    }

    .contact-container {

        width: 300px;

        left: 55px;

        top:150px;

        height: auto;

    }

    .contact-container h2 {

        font-size: 30px !important;

        line-height: 50px !important; 

    }

}





  /* Desktop layout */

  .contact-container .flex-container {

    display: flex;

    justify-content: space-evenly;

    flex-wrap: wrap;

    margin-top: 50px;

  }



  .contact-container .box-bg {

    flex: 1;

    min-width: 150px; /* Ensure minimum size for boxes */

    max-width: 150px; /* Adjust to fit container on desktop */

  }



@media (max-width: 768px) {

    .contact-container .flex-container {

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

    }



    .contact-container .box-bg {

      width: 48%; /* Two boxes per row */

      margin-bottom: 20px;

    }

    .contact-container .box-bg {

        min-width: 150px; 

        padding: 10px;

    }

    .contact-container {

        background: none;

        padding: 0px;

    }

  }



  footer h2{

    font-size: 1.5em;

  }



  .sticky {

    bottom:80px;

  }