/* =========================================================
   SAFA - Contact Us Section (Contact-us-3-new)
   Bootstrap 5.3 RTL based
   ========================================================= */


:root{
    --yellow-9:      #ffd400;
    --yellow-10:     #ffe74c;
    --black-4:       #1e1e1e;
    --black-5:       #282828;
    --gray-200-2:    #7e7e7e;
    --gray-300:      #787878;
    --gray-50-2:     #a9a9a9;
    --gray-50-3:     #f5f5f5;
    --white:         #ffffff;

    --page-max: 1600px;
    --gutter: 20px;
    --font-main: 'Peyda', 'Vazirmatn', Tahoma, sans-serif;
    --edge-pad: calc((100vw - min(100vw, var(--page-max))) / 2 + var(--gutter));
}

*{ box-sizing:border-box; }

body{
    font-family: var(--font-main);
    color: var(--black-4);
    background: var(--white);
    direction: rtl;
    text-align: right;
    margin:0;
}
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

.h1{ font-size:32px; line-height:56px; font-weight:600; margin:0; }
.h3{ font-size:24px; line-height:40px; font-weight:600; margin:0; }
.h5{ font-size:18px; line-height:32px; font-weight:500; margin:0; }
.body-text{ font-size:16px; line-height:28px; font-weight:400; margin:0; }

.container-page{
    max-width: var(--page-max);
    margin-inline:auto;
    padding-inline: var(--gutter);
}

/* =========================================================
   SERVICE CARDS
   ========================================================= */
.contact-services{
    background: var(--black-4);
    width:100%;
    margin-top: 150px;
}
.contact-services-inner{
    display:flex;
    direction:rtl;
    max-width: var(--page-max);
    margin-inline:auto;
    flex-direction:row-reverse;
}
.service-card{
    flex:1 1 0;
    min-width:0;
    background: var(--white);
    display:flex;
    flex-direction:column;
}
.service-img{
    height:120px;
    position: relative;
    background:var(--black-4);
    display: flex;
    justify-content:center;
}
.service-img img{     height: 200px;
    position: absolute;
    top: -80%;
    object-fit: cover;}

.service-body{
    background: var(--black-4);
    padding: 40px;
    display:flex;
    flex-direction:column;
    gap:16px;
    flex:1;
}
.service-body h3{
    color: var(--white);
    font-size:24px;
    line-height:40px;
    font-weight:600;
    margin:0;
    text-align:right;
}
.service-body p{
    color: var(--gray-50-3);
    font-size:16px;
    line-height:28px;
    text-align:justify;
    margin:0;
}
.service-actions{
    display:flex;
    gap:16px;
    margin-top:8px;
    flex-wrap:wrap;
    flex-direction: row-reverse;
    justify-content: center;
}
.btn-contact{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 24px;
    font-size:14px;
    line-height:26px;
    font-weight:600;
    white-space:nowrap;
    border:1px solid transparent;
    transition: all .2s ease;
    flex-direction: row-reverse;
}
.btn-contact svg{ width:20px; height:20px; flex-shrink:0; }
.btn-contact--outline{
    flex:1 1 0;
    border-color: var(--yellow-9);
    background: rgba(255,212,0,.15);
    color: var(--yellow-9);
    padding-inline:40px;
}
.btn-contact--outline:hover{ background: rgba(255,212,0,.25); }
.btn-contact--solid{
    background: var(--yellow-9);
    color: var(--black-5);
}
.btn-contact--solid:hover{ background: var(--yellow-10); }

/* =========================================================
   CONTACT INFO HEAD
   ========================================================= */
.contact-info-head{
    position:relative;
    padding: 64px 0 40px;
    overflow:hidden;
}
.contact-info-head .container-page{ position:relative; }
.head-watermark{
    position:absolute;
    top:50%;
    left:-150px;
    transform: translateY(-50%);
    font-size:162px;
    font-weight:100;
    line-height:112px;
    color:#000;
    opacity:.05;
    white-space:nowrap;
    pointer-events:none;
    z-index:0;
    bottom: 0px;
}
.head-text{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:flex-start;
    text-align:right;
}
.head-text h2{ color: var(--black-4); }
.head-text p{ color: var(--black-4); }

/* =========================================================
   MAIN CONTACT GRID
   ========================================================= */
.contact-main{ padding-bottom: 40px; }

.contact-main-inner{ width:100%; }
.contact-grid{
    display:flex;
    align-items:flex-start;
    direction:rtl;
    width:100%;
    gap:0;
    flex-direction: row-reverse;
}
.contact-col-left{
    flex: 0 0 35%;
    max-width:35%;
}
.contact-col-right{
    flex: 1 1 65%;
    max-width:65%;
    display:flex;
    flex-direction:column;
}

/* ---- Left: form ---- */
.contact-form-panel{
    background: var(--black-4);
    padding: 24px 32px 24px var(--edge-pad);
}
.contact-form-panel h3{ color: var(--white); text-align:right; margin-bottom:43px; }

.contact-form{ display:flex; flex-direction:column; gap:24px; }
.form-field{ position:relative; }
.form-field input,
.form-field textarea{
    width:100%;
    background:transparent;
    border:1px solid var(--gray-200-2);
    color: var(--white);
    font-family:inherit;
    font-size:14px;
    padding:12px 16px;
    outline:none;
    text-align:right;
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color: var(--gray-50-2); }
.form-field--textarea textarea{ resize:vertical; min-height:150px; }

.form-field label{
    position:absolute;
    top:0;
    right:16px;
    transform:translateY(-50%);
    background:var(--black-4);
    color:var(--gray-50-2);
    padding:0 6px;
    font-size:14px;
    z-index:1;
}

.btn-submit{
    background: var(--yellow-9);
    color: var(--black-4);
    border:none;
    font-size:20px;
    font-weight:500;
    padding:16px;
    width:100%;
    transition: background .2s ease;
    justify-content: center;
}
.btn-submit:hover{ background: var(--yellow-10); }

/* ---- Left: social ---- */
.contact-social-panel{
    background: var(--black-4);
    padding: 24px 32px 58px var(--edge-pad);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:30px;
    text-align:center;
}
.contact-social-panel p{ color: var(--white); }
.social-icons{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center;flex-direction: row-reverse }
.social-icon{
    width:40px; height:40px;
    border-radius:50%;
    border: 1px solid var(--yellow-9);
    color: var(--yellow-9);
    display:flex; align-items:center; justify-content:center;
}
.social-icon svg{ width:20px; height:20px; }

/* ---- Right: yellow panel ---- */
.contact-yellow-panel{
    background: var(--yellow-9);
    padding: 32px var(--edge-pad) 32px 32px;
}
.yellow-panel-top{
    display:flex;
    align-items:center;
    gap:77px;
    flex-direction:row-reverse;
}
.phones-block{ flex:1; display:flex; flex-direction:column; gap:16px; min-width:0; }
.phones-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

.copy-item{
    display:flex;
    align-items:center;
    gap:8px;
    background:transparent;
    border:none;
    padding:0;
    color: var(--black-5);
    flex-direction:row-reverse;
}
.copy-icon{ width:16px; height:16px; display:flex; color: var(--black-5); flex-shrink:0; }
.copy-text{ font-size:14px; line-height:24px; font-weight:600; white-space:nowrap; }

.panel-divider--v{
    width:1px;
    align-self:stretch;
    background: rgb(255 255 255);
    flex-shrink:0;
    position: absolute;
    left: 0px;
    height: 100px;
}
.panel-divider--h{
    height:1px;
    width:100%;
    background: rgb(255 255 255);
    margin: 16px 0;
}

.call-center-block, .info-safa-block{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    flex-shrink:0;
    position: relative;
    width: 120px;
}
.info-safa-block{ flex-direction:column; align-items:center; gap:12px;height: 80px;}
.round-icon{
    width:64px; height:64px;
    border-radius:50%;
    background: var(--yellow-9);
    display:flex; align-items:center; justify-content:center;
    color: var(--black-4);
}
.round-icon svg{ width:32px; height:32px; }
.round-icon--sm{ width:36px; height:36px; }
.round-icon--sm svg{ width:20px; height:20px; }
.round-block-title{ font-size:20px; font-weight:500; color: var(--black-4); margin:4px 0 0; }
.round-block-sub{ display:flex; align-items:center; gap:4px; color: var(--gray-300); font-size:14px; }

.yellow-panel-bottom{
    display:flex;
    align-items:center;
    gap:24px;
    flex-direction:row-reverse;
}
.address-block{ flex:1; display:flex; flex-direction:column; gap:16px; min-width:0; }
.address-block .copy-item{ justify-content:flex-end; width:100%; }
.address-block .copy-text{ white-space:normal; font-size:16px; font-weight:500; }
.address-sub-row{ display:flex; gap:40px; flex-wrap:nowrap;flex-direction: row-reverse; }
.address-sub-row .copy-text{ font-size:16px; font-weight:500; white-space:nowrap; }

/* ---- Map ---- */
.contact-map{ position:relative; }
.map-img{ width:100%; height:448px; object-fit:cover; }
.map-social-buttons{
    position:absolute;
    top:50%;
    left:37px;
    transform: translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:8px;
}
.map-box {
    height: 235px;
}
.map-btn{
    width:48px; height:48px;
    background: var(--white);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 20px rgba(0,0,0,.2);
}
.map-btn img{ width:32px; height:32px;object-fit: contain; }

/* ---- Legal info panel ---- */
.legal-panel{
    background: var(--gray-50-3);
    padding: 32px var(--edge-pad) 32px 32px;
}
.legal-header h3{ color: var(--black-4); text-align:right; margin-bottom:24px; }
.legal-grid{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:16px;
    flex-direction: row-reverse;
}
.legal-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding: 1px !important;
}
.legal-dot{
    width:8px; height:8px;
    border-radius:50%;
    background: var(--yellow-9);
    flex-shrink:0;
}
.legal-label{ font-size:16px; font-weight:500; color: var(--black-4); white-space:nowrap; }
.legal-value{ font-size:14px; font-weight:600; color: var(--black-5); white-space:nowrap; }
.panel-divider--legal{ margin:14px 0 14px; }

/* =========================================================
   COPY TOAST
   ========================================================= */
.copy-toast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--black-4);
    color: var(--white);
    padding:10px 20px;
    font-size:14px;
    border-radius:4px;
    opacity:0;
    pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
    z-index:999;
}
.copy-toast.show{
    opacity:1;
    transform: translateX(-50%) translateY(0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991.98px){
    .contact-services{ flex-direction:column; }
    .service-body{ padding:32px 24px; }

    .head-watermark{ font-size:90px; line-height:70px; }
    .contact-info-head{ padding:48px 0 24px; }

    .contact-grid{ flex-direction:column; }
    .contact-col-left, .contact-col-right{ flex:1 1 100%; max-width:100%; }

    .contact-form-panel{ padding:24px; }
    .contact-social-panel{ padding:24px; }

    .yellow-panel-top{ flex-direction:column-reverse; align-items:stretch; gap:24px; }
    .panel-divider--v{ display:none; }
    .phones-row{ justify-content:flex-start; gap:24px; }
    .call-center-block{ flex-direction:row; justify-content:flex-start; gap:16px;}

    .yellow-panel-bottom{ flex-direction:column-reverse; align-items:stretch; gap:16px; }
    .info-safa-block{ justify-content:flex-start;flex-direction: row;width: 100%;}

    .legal-panel{ padding:24px; }
    .legal-grid{ justify-content:flex-start; }

    .map-social-buttons{ right:16px; }
}

@media (max-width: 575.98px){
    .head-watermark{ display:none; }
    .head-text{ align-items:flex-start; text-align:right; }

    .service-actions{ flex-direction:column; }
    .btn-contact--outline{ padding-inline:24px; }

    .phones-row{ flex-direction:column; align-items:flex-start; gap:12px; }
    .copy-item{flex-direction: row}
    .address-sub-row{ flex-direction:column; align-items:flex-end; gap:12px; }

    .legal-grid{ flex-direction:column; align-items:flex-end; }
    .legal-item{ width:100%; justify-content:unset;padding: 0; }
    .panel-divider--legal {
        margin: 8px 0 8px;
    }
    .social-icons {
	gap: 10px;
}

    .map-img{ height:280px; }
}
@media (max-width: 767px){
    .contact-services-inner{
        flex-direction: column;
    }
    .service-img{
        height: 220px;
        display: flex;
    }
    .service-img img{
        height: 150px;
        position: unset;
        align-self: center;
    }
    .service-body h3{
        font-size: 21px;
    }
    .head-text h2{
        font-size: 21px;
        font-weight: 600;
    }
    .service-body p{
        font-size: 14px;
    }
    .contact-grid{
        align-items: normal;
        flex-direction: column-reverse;
    }
    .call-center-block {
        position: relative;
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
        margin-top: 0px;
        width: 100%;
    }
    .call-center-block svg , .info-safa-block svg{
        width: 24px;
    }
    .round-block-title{
        font-size: 18px;
        font-weight: 600;
    }

    .call-center-block .round-block-sub {
        position: absolute;
        left: 0;
    }
    .address-block{
        align-items: flex-start;
    }
    .address-block .copy-item{
        flex-direction: row-reverse;
    }
    .address-block .copy-text{
        text-align: right;
    }
    .contact-services{
        margin-top: 44px;
    }
    /*.title_page{*/
    /*    margin: 12px 16px 30px;*/
    /*}*/

}

.contact-services-inner {
    display: flex;
}

.service-card {
    position: relative;
}

.contact-services-inner .service-card:not(:last-child) {
    border-right: 1px solid #ddd;
}
a.btn-go-to-down{
    z-index:10;
}