* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a {
    color: inherit;
    text-decoration: none;
}
img {
    width: 100%;
}
label {
    font-size: var(--fs-p);
}
input, textarea {
    outline: none;
    border: none;
}    
textarea {
    resize: none;
}
button {
    all: unset;
    outline: none;
}

:root {
    --card-shadow : rgba(0,0,0,0.4);
    --header-bg : rgba(255,255,255,0.7);
    --main-bg : #Fafafa;
    --buttons-bg : #c06b8a;
    --buttons-bg : rgb(0, 119, 145);
    --section-bg : rgba(0, 119, 145, 0.2);
    --item-bg : rgba(0, 119, 145, 0.1);
    --product-card-bg : #f9f9f9;
    --footer-info-card-bg: #E3D6C9;
    --footer-navbar-menu-bg : #D7C2A3;
    --fs-p: clamp(0.9rem, 0.8rem + 0.3vw, 1.5rem);
    --fs-button: clamp(0.7rem, 0.8rem + 0.3vw, 1.2rem);
    --fs-h4: clamp(0.8rem, 0.8rem + 0.3vw, 1.5rem);
    --fs-h3: clamp(0.6rem, 1.1rem + 1vw, 1.25rem);
    --fs-h2: clamp(0.7rem, 1.1rem + 2vw, 1.7rem);
    --fs-h1: clamp(1.25rem, 1.6rem + 3.5vw, 2rem);
}
@font-face {
    font-family : "Vazir-Light";
    src : url("../fonts/Vazir-Light.ttf");
}
@font-face {
    font-family : "Vazir-Medium";
    src : url("../fonts/Vazir-Medium.ttf");
}
@font-face {
    font-family : "Vazir-Bold";
    src : url("../fonts/Vazir-Bold.ttf");
}
 

h1, h2, h3, p {
    line-height: 2;
}
h1 {
    font-size: var(--fs-h1);
}
h2 {
    font-size: var(--fs-h2);
}
h3 {
    font-size: var(--fs-h3);
}
h4 {
    font-size: var(--fs-h4);
}
p {
    font-size: var(--fs-p);
}

body {
    font-family: "Vazir-Light","sans-serif";
}
.contact-us-page {
    max-width: 1440px;
    margin: 0 auto;
    padding-block: 0px 150px;
    background: var(--main-bg);
    overflow: hidden;
    user-select: none;
}

.contact-us-container-1 {
    width: 85%;
    margin: 0 auto;
    padding-top: 150px;
    display: flex;
    gap: 80px;
    flex-direction: column;
    align-items: center;
}
.contact-us-content-1 {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-direction: column;
}
.contact-vactor-box {
    width: 100%;
}
.vactor-img {
    scale: 1.2;
    object-fit: cover;
    filter: drop-shadow(3px 7px 0 var(--section-bg));
}
.contact-text-box {
    display: flex;
    gap: 25px;
    align-items: center;
    flex-direction: column;
}
.contact-title {
    text-align: center;
    margin-bottom: 25px;
}
.contact-text {
    text-align: center;
}
.contact-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    /* flex-direction: column-reverse; */
    flex-direction: row-reverse;
    flex-wrap: wrap;
    margin-top: 20px;
}
.send-message-button, .faq-button {
    font-weight: 600;
    padding: 7px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2px solid var(--buttons-bg);
}
.send-message-button {
    color: #fff;
    background: var(--buttons-bg);
    transition: all 0.5s;
}
.send-message-button:hover,
.faq-button:hover {
    scale: 1.05;
    color: #fff;
    background: rgba(0, 119, 145, 0.93);
}
.faq-button {
    background: transparent;
    transition: all 0.5s;
}
.faq-button:hover + .send-message-button {
    opacity: 0.6;
    /* color: #000; */
    /* background: rgba(0,119,145,0.5); */
}



.contact-us-container-2 {
    width: 85%;
    margin: 0 auto;
    padding-top: 150px;
    display: flex;
    gap: 80px;
    flex-direction: column;
    align-items: center;
}
.contact-us-content-2 {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-direction: column;
}
.contact-us-inner-1 {
    display: flex;
    gap: 25px;
    align-items: center;
    flex-direction: column;
}
.contact-us-title {
    text-align: center;
}
.contact-us-text {
    text-align: center;
}
.contact-us-content-1 {
    width: 100%;
}
.contact-card {
    width: 100%;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-direction: column;
    border-radius: 16px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    padding: 25px 16px;
    transition: all 0.5s;
}
.contact-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 0 10px var(--buttons-bg);
}
.contact-card-icon-box {
    
}
.contact-card-icon{
    width: 50px;
    height: 50px;
    fill: var(--buttons-bg);
}
.contact-card-title {
    
}
.contact-card-link {
    font-weight: 600;
    color: var(--buttons-bg);
    padding: 6px 20px;
    border-radius: 999px;
    background: var(--item-bg);
    border-bottom: 2px solid var(--section-bg);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    scale: 0.9;
    transition: all 0.5s;
}
.contact-card-link:hover {
    scale: 0.97;
}
.contact-card-text {
    opacity: 0.9;
}





.form-contact-us-container-3 {
    width: 100%;
    margin: 0 auto;
    padding-block: 100px;
    margin-top: 150px;
    display: flex;
    gap: 80px;
    flex-direction: column;
    align-items: center;
    background: var(--buttons-bg);
}
.form-contact-us-content-3 {
    width: 85%;
    /* max-width: 800px; */
    display: flex;
    gap: 60px;
    align-items: center;
    flex-direction: column;
    /* background: var(--buttons-bg); */
    color: #fff;
    /* padding: 45px 25px 32px; */
    /* padding-block: 100px; */
    /* padding-inline: 25px; */
    /* border-radius: 16px; */
}
.contact-us-inner {
    display: flex;
    gap: 25px;
    align-items: center;
    flex-direction: column;
}
.contact-us-inner-title {
    text-align: center;
}
.contact-us-inner-text {
    text-align: center;
}
.form {
    width: 100%;
    display: flex;
    gap: 25px;
    align-items: center;
    flex-direction: column;
}
.form-content-1 {
    width: 100%;
    display: flex;
    gap: 25px;
    align-items: center;
    flex-direction: column;
}
.get-name,
.get-phone-number,
.get-email,
.get-message {
    width: 100%;
    display: flex;
    gap: 16px;
    flex-direction: column;
}
.get-name input,
.get-phone-number input,
.get-email input,
.get-message textarea {
    width: 100%;
    padding: 8px 16px;
    font-size: 15px;
    font-family: "Vazir-Medium";
    border-radius: 999px;
    color: rgba(0,0,0,0.85);
}
.get-message textarea {
    font-size: 15px;
    padding-block: 16px;
}
input::placeholder,
textarea::placeholder {
    font-family: "Vazir-Light";
    color: var(--buttons-bg);
    
}
.get-phone-number {
    
}
.get-email {
    
}
.get-message {
    
}
.get-message textarea {
    width: 100%;
    height: 150px;
    border-radius: 10px;
}
.button-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 25px;
    margin-top: 32px;
}
.submit-button {
    font-weight: 800;
    font-family: "Vazir-Bold";
    padding: 8px 30px;
    border-radius: 999px;
    background: #fff;
    color: var(--buttons-bg);
    transition: all 0.5s;
}
.submit-button:hover {
    scale: 1.05;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.form-text {
    font-size: 12px;
    text-align: center;
}




.contact-us-container-4 {
    width: 85%;
    margin: 0 auto;
    padding-top: 150px;
    display: flex;
    gap: 80px;
    flex-direction: column;
    align-items: center;
}
.contact-us-content-4 {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-direction: column;
}
.response-time-content {
    width: 100%;
    padding: 35px 20px;
    display: flex;
    gap: 20px;
    /* align-items: center; */
    flex-direction: column;
    text-align: center;
    border-radius: 16px;
    border: 2px solid var(--buttons-bg);
    background: var(--item-bg);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.response-time-text {
    font-weight: 600;
    display: flex;
    gap: 7px;
    align-items: center;
    align-self: center;
    padding: 6px 20px;
    border-radius: 999px;
    border-inline: 5px solid var(--buttons-bg);
    box-shadow: 0 0 5px var(--section-bg);
    /* text-align: center; */
}
.circle {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--buttons-bg);
}
.response-time-title {
    /* text-align: center; */
}
.response-time-box {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-direction: column;
    font-weight: 500;
}
.response-time {
    width: 100%;
    color: #000;
    padding-block: 5px;
    padding-inline: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--section-bg);
}
.response-time:last-child {
    border-bottom: none;
}
.response-time span {
    color: rgb(1,59,72);
}



.follow-us-content {
    width: 100%;
    padding: 35px 20px;
    display: flex;
    gap: 40px;
    align-items: center;
    flex-direction: column;
    border-radius: 16px;
    border: 2px solid var(--buttons-bg);
    background: var(--item-bg);
}
.follow-us-title {
    scale: 0.8;
    padding: 6px 20px;
    /* display: inline; */
    /* text-align: center; */
    border-radius: 999px;
    border-inline: 5px solid var(--buttons-bg);
    box-shadow: 0 0 5px var(--section-bg);
}
.social-media-content {
    width: 100%;
    display: flex;
    gap: 10px;
    /* align-items: center; */
    flex-direction: column;
}
.social-media-card {
    padding-block: 16px;
    padding-inline: 10px;
    display: flex;
    gap: 16px;
    flex-direction: column;
    border-radius: 10px;
    border: 2px solid var(--section-bg);
    background: rgba(255, 255, 255, 0.93);
    transition: all 0.5s;
}
.social-media-card:hover {
    transform: translate(-5px, -5px);
}
.social-media-title {
    font-weight: 800;
}
.social-media-text {
    opacity: 0.8;
}



.contact-us-container-5 {
    width: 85%;
    margin: 0 auto;
    padding-top: 150px;
    display: flex;
    gap: 80px;
    flex-direction: column;
    align-items: center;
}
.contact-us-content-5 {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-direction: column;
}
.faq-text-box {
    width: 100%;
    display: flex;
    gap: 25px;
    align-items: center;
    flex-direction: column;
    
}
.faq-text-box-title {
    
}
.faq-text-box-text {
    
}
.faq-list {
    width: 100%;
    display: flex;
    gap: 20px;
    /* align-items: center; */
    flex-direction: column;
    margin-top: 30px;
}
.faq-item {
    /* padding: 10px; */
    /* display: flex;
    gap: 16px;
    flex-direction: column; */
    transform: all 0.5s;
    border-radius: 16px;
    /* border: 1px solid rgba(0, 119, 145, 0.3); */
    transition: all 0.8s;
}
.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.faq-title {
    /* display: flex;
    gap: 20px;
    flex-direction: row-reverse; */
    /* justify-content: space-between; */
    font-weight: 600;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.5s;
    border: 1px solid rgba(0, 119, 145, 0.3);
    border-radius: 16px 16px 0 0;
    background: var(--section-bg);
}
.plus {
    font-weight: 800;
}
.faq-answer {
    /* text-align: center; */
    padding: 20px 16px;
    border-radius: 0 0 16px 16px;
    border: 1px solid rgba(0, 119, 145, 0.3);
    background: var(--item-bg);
}