.contactBg {
     background: url(assets/aboutSectionData/get-in-touch.webp);
     background-repeat: no-repeat;
     background-attachment: fixed;
     width: 100vw;
     height: 70vh;
     background-size: cover;
     text-align: center;
     display: flex;
     /* justify-content: center; */
     align-items: flex-end;
 }

 .contactBg>p {
     background-color: rgba(0, 0, 0, 0.596);
     color: white;
     width: 100%;
     padding: 40px;
     font-size: 44px;
     line-height: 44px;
     font-weight: 400;
     font-family: "Marcellus", serif;
 }

 .contact {
     background: url(assets/aboutSectionData/contact-form-bg.webp);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
     padding: 60px 20px;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     /* position: relative; */
     flex-wrap: wrap;
     gap: 40px;
     /* color:white; */
 }

 /* content the the contact page  */
 .contacttext {
     text-align: center;
     padding: 30px;
     margin-top: 30px;
     margin-bottom: 50px;
 }

 .contacttext :nth-child(1) {
     font-size: 24px;
     line-height: 43px;
     font-weight: 400;
     color: rgb(187, 151, 59);
     font-family: Poppins, sans-serif;
 }

 .contacttext :nth-child(3) {
     font-size: 36px;
     line-height: 47px;
     font-weight: 400;
     font-family: "Marcellus", serif;
     /* margin: 10px; */
 }

 .contacttext :nth-child(4) {
     font-size: 18px;
     line-height: 29px;
     font-weight: 400;
     font-family: Poppins, sans-serif;
     /* margin: 10px; */
 }

 /* content the the contact page  ends here */
 form {
     display: flex;
     flex-direction: column;
     text-align: left;
     width: 100%;
     max-width: 600px;
     background-color: white;
     padding: 30px;
 }

 form>p {
     font-size: 34px;
     line-height: 47px;
     font-family: "Marcellus", serif;
 }

 form .inputs {
     flex-grow: 1;
     text-align: left;
     padding: 1.5rem;
     margin: 1px;
     border: none;
     border-bottom: 1px solid;
     color: rgb(18, 18, 18);
     transition: box-shadow .1s ease;
 }

 /* form .message {
     padding: 20px 10px 60px 10px;
 } */

 form .inputs::placeholder {
     font-weight: 500;
 }

 form .submitbtn {
     /* width: 150px; */
     border-radius: 20px;
     text-align: center;
     padding: 10px;
     background-color: #e7b126;
     font-size: 18px;
     line-height: 22px;
     color: black;
     cursor: pointer;
 }

 form .submitbtn:hover {
     color: #fff !important;
     background: linear-gradient(90deg, #d4af58, #e4cb3e 45%, #ecbe60 63%, #f1c85c);
     transition: .3s;
 }

 .formInfo {
     width: 100%;
     max-width: 600px;
     position: relative;
     color: white;
 }

 .contact .sec1::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #00000088;
     /* semi-transparent black */
     z-index: -22;
 }

 .formInfo>.sec1 {
     position: relative;
     z-index: 2;
     /* content appears above overlay */
     padding: 20px;
 }

 .contact .sec2 {
     width: 100%;
     max-width: 600px;
 }

 .sec1 {
     margin: 20px;

 }
 .sec1>p {
     font-family: "Marcellus", serif;
     font-size: 24px;
     line-height: 35px;
     font-weight: 400;
     text-align: left;
 }

 .contactList .contactHeadings {
     font-family: "Marcellus", serif;
     font-size: 22px;
     line-height: 35px;
     font-weight: 400;
     text-align: left;
 }

 .contactList {
     display: flex;
     align-items: start;
     gap: 20px;
     margin-bottom: 15px;
     text-align: left;
     padding: 10px;
 }

 .cta-button {
     background: var(--text-color);
     color: var(--main-color);
     padding: 15px 40px;
     border: none;
     border-radius: 30px;
     font-size: clamp(0.9rem, 2vw, 1.1rem);
     font-weight: bold;
     cursor: pointer;
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .cta-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
 }