main {
    padding-top: var(--base-padding);
    /* background-color: #f7f7f7; */
    /* background-image: url(../assets/contactUsBackgroundImage.svg); */
    /* background-image: url(../assets/painting-719319.jpg); */
    /* background-size: cover; */
    /* background-repeat: no-repeat; */
    /* background-position: 0; */
    /* color: rgba(255, 166, 0, 0.514); */
    background: linear-gradient(130deg, #f7f7f7 50%, var(--primary-bg-color) 50%);
    /* backdrop-filter: blur(40px); */
}

.mainContainer {
    /* min-height: 90dvh; */
    padding-bottom: 5rem;
    /* -webkit-backdrop-filter: blur(20px); */
    /* backdrop-filter: blur(3px); */

}

.hero {
    padding-top: 3rem;
}

.hero .headline {
    text-align: center;
    font-family: 'Yantramanav';
    font-size: var(--fs-700);
    color: var(--primary-font-color);
}

.hero .tagline {
    text-align: center;
    font-size: var(--fs-400);
    color: var(--accent-font-color);
    /* font-family:; */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: var(--fw-semi-bold);
    /* text-shadow: 0.5px 0.5px 1px rgb(22, 34, 17); */
    /* color: orange; */
}

.contactUsContainer {
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: 4rem;
}


.contactUsContainer .heading {
    font-size: var(--fs-600);
    font-family: "Arimo";
    color: var(--primary-font-color);
    margin-bottom: 3rem;
    padding: 0.4rem 0;
    /* background: linear-gradient(to right, transparent, var(--primary-bg-color), transparent); */
}

.contactUsContainer .left-container,
.contactUsContainer .right-container,
.contactUsContainer form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contactUsContainer .left-container {
    /* background: linear-gradient(120deg, rgba(0, 0, 0, 0.11), rgba(255, 255, 255, 0.445)) rgba(255, 255, 255, 0.685); */
    background-color: rgba(255, 255, 255, 0.603);
    /* backdrop-filter: fill(0.1);
    -webkit-backdrop-filter: fill(0.1); */
    border-radius: 0.8rem;
    padding: 2rem;
    box-shadow: 2px 3px 40px 2px var(--secondary-bg-color);
}

.contactUsContainer .right-container {
    background-color: rgba(255, 255, 255, 0.699);
    border-radius: 0.8rem;
    padding: 3rem 1rem;
    width: 100%;
    max-width: 35rem;
    box-shadow: 2px 3px 40px 2px var(--secondary-bg-color);
}

.contactUsContainer form {
    gap: 1rem;
    justify-content: space-between;
}

.contactUsContainer .left-container .contactOptions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1rem;
    justify-content: space-between;
    align-items: center;
}

.contactUsContainer .left-container .contactOptions div a {
    /* height: 50%; */
    /* width: 50%; */
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    flex-direction: column;
    gap: 1rem;
    /* background: linear-gradient(135deg, gray,10px, white); */
    /* text-align: center; */
}

.contactUsContainer .left-container .contactOptions div a i {
    font-size: 2rem;
    /* text-align: center; */
}
.contactUsContainer .left-container .contactOptions div a p{
    font-size: 0.8rem;
}

.contactUsContainer .left-container .contactOptions .phoneNumber a {
    color: rgb(44, 41, 41);
    text-wrap: nowrap;
}

.contactUsContainer .left-container .contactOptions .sms a {
    color: rgb(10, 100, 188);
    text-wrap: nowrap;
}

.contactUsContainer .left-container .contactOptions .whatsapp a {
    color: green;
    text-wrap: nowrap;
}

.contactUsContainer .left-container .contactOptions .email a {
    color: #bb001b;
    text-wrap: wrap;
}


.contactUsContainer .right-container .input {
    /* height: 2rem; */
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
}

form input {
    height: 1.6rem;
    min-width: 60%;
    border: 1px solid var(--secondary-bg-color);
    border-radius: 0.2rem;
    padding: 0 0.4rem;
}

form label {
    font-size: 1.1rem;
    font-family: "Yantramanav";
}

form textarea {
    /* height: 7rem; */
    min-width: 60%;
    border: 1px solid var(--secondary-bg-color);
    border-radius: 0.2rem;
    padding: 0.2rem 0.4rem;
    font-size: var(--fs-300);
}

form button {
    align-self: flex-end;
    min-width: 35%;
    height: 2rem;
    border-radius: 0.3rem;
    background-color: var(--secondary-bg-color);
    font-weight: bold;
    font-family: 'Arimo';
    color: #f7f7f7;
    font-size: 1.1rem;
    border: none;
}




@media(min-width:480px) {
    .contactUsContainer .left-container {
        max-width: 35rem;
        min-width: 25rem;
    }

    .contactUsContainer .right-container {
        padding: 3rem 2rem;
    }

    .contactUsContainer .left-container .contactOptions {
        gap: 2rem 2rem;
    }
}

@media(min-width: 700px) {}

@media(min-width:990px) {}

@media(min-width: 1024px) {
    main {
        padding-top: 7rem;
        background: linear-gradient(160deg, #f7f7f7 50%, var(--primary-bg-color) 50%);
        /* backdrop-filter: blur(40px); */
    }

    .mainContainer {
        /* min-height: 90dvh; */
        padding-bottom: 7rem;
        /* -webkit-backdrop-filter: blur(20px); */
        /* backdrop-filter: blur(3px); */

    }

    .contactUsContainer {
        padding-top: 5rem;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .contactUsContainer .left-container {
        /* border-radius: 0.4rem; */
        padding: 2rem;
    }
}

@media(min-width:1200px) {}