/* ===== Responsive Hero (صفحه اول) ===== */



/* ظرف متن تا وسط تصویر */

.full-pic {

    position: relative;

    min-height: 42vh;

    /* قدری کوتاه‌تر از 100vh که در موبایل‌های با نوار آدرس بهتر باشه */

    height: clamp(320px, 52vh, 560px);

    /* محدوده قد برای هرو */

    background: url("../img/contact/2.jpg") center/cover no-repeat;

    display: grid;

    place-items: center;

    padding-inline: clamp(12px, 4vw, 40px);

}



/* سایه */

.full-pic::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, .7);

}



/* محتوای وسط */

.top-img {

    position: relative;

    z-index: 1;

    text-align: center;

    color: #fff;

    padding: clamp(8px, 2vw, 20px);

    max-width: min(960px, 92vw);

    /* متن در نمایشگرهای خیلی عریض هم خوانا می‌مونه */

    margin-inline: auto;

}



/* تیتر سیال: از موبایل تا دسکتاپ */

.top-img h2 {

    font-weight: 800;

    line-height: 1.15;

    /* از 24px تا 56px بسته به عرض */

    font-size: clamp(1.5rem, 3.5vw + .5rem, 3.5rem);

    margin: 0 0 clamp(.5rem, 1.2vw, 1rem);

}



/* توضیح زیر تیتر سیال */

.top-img p {

    line-height: 1.7;

    opacity: .95;

    /* از 14px تا 20px */

    font-size: clamp(.875rem, 1.2vw + .4rem, 1.25rem);

    margin: 0 0 clamp(1rem, 2.2vw, 1.5rem);

    color: #fff;

}



/* گروه دکمه‌ها */

.btn-top {

    display: flex;

    justify-content: center;

    gap: clamp(8px, 4vw, 32px);

    flex-wrap: wrap;

}



/* دکمه سیال */

.bike-btn {

    display: inline-block;

    text-decoration: none;

    color: #f5f5f5;

    border: 1px solid #fff;

    border-radius: .375rem;

    font-weight: 600;

    /* اندازه و پدینگ سیال */

    font-size: clamp(.9rem, .6vw + .75rem, 1.1rem);

    padding: clamp(.5rem, .8vw, .75rem) clamp(1rem, 3.6vw, 2.5rem);

    background: none;

    position: relative;

    overflow: hidden;

    transition: color .2s linear, transform .2s ease;

}



.bike-btn::before {

    content: "";

    position: absolute;

    inset: 0 auto 0 0;

    width: 0;

    background: #f5f5f5;

    z-index: -1;

    transition: width .2s linear;

}



.bike-btn:hover::before {

    width: 100%;

}



.bike-btn:hover {

    color: #222;

    transform: translateY(-1px);

}



/* ===== Breakpoints ریزتنظیم ===== */



/* ≥ 1200px: متن کمی بازتر */

@media (min-width: 1200px) {

    .top-img p {

        max-width: 70ch;

        margin-inline: auto;

    }

}



/* ≤ 992px: جمع‌وجورتر */

@media (max-width: 992px) {

    .full-pic {

        height: clamp(320px, 48vh, 520px);

    }



    .top-img h2 {

        line-height: 1.2;

    }

}



/* ≤ 768px: تیتر کوچیک‌تر، فاصله‌ها کمتر */

@media (max-width: 768px) {

    .top-img {

        padding: 12px;

    }



    .top-img h2 {

        font-size: clamp(1.35rem, 5.2vw + .5rem, 2.2rem);

    }



    .top-img p {

        font-size: clamp(.9rem, 1.2vw + .6rem, 1.05rem);

    }



    .btn-top {

        gap: 10px;

    }

}



/* ≤ 480px: تک‌ستونه و کاملاً خوانا */

@media (max-width: 480px) {

    .full-pic {

        height: clamp(300px, 46vh, 480px);

    }



    .top-img h2 {

        font-size: clamp(1.2rem, 6vw, 1.8rem);

    }



    .top-img p {

        font-size: clamp(.875rem, 3.5vw, .98rem);

    }



    .bike-btn {

        width: 100%;

        text-align: center;

    }

}



/* احترام به کاربرانی که انیمیشن نمی‌خوان */

@media (prefers-reduced-motion: reduce) {



    .bike-btn,

    .bike-btn::before {

        transition: none;

    }

}





/* ////////////////////////////////// */



.header-contact {

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    margin-top: 15px;



}



.header-contact h2 {

    font-size: 2.5rem;

    font-weight: 800;

}



/* تنظیمات عمومی */

.full-box {

    display: flex;

    flex-direction: column;

    gap: 2rem;

    padding: 2rem;

}



.contact-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

}



/* استایل جعبه اطلاعات تماس */

.box-contact {

    border: 0.1rem solid rgba(255, 255, 255, 0.175);

    border-radius: 0.5rem;

    padding: 1rem;

    transition: 0.5s ease;

    width: 50%;

    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

    text-align: center;

}



.box-contact:hover {

    transform: translateY(-15px);

    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);

}



/* استایل تصویر، عنوان و توضیحات */

.box-contact img {

    height: 15rem;

    width: 100%;

    object-fit: contain;

    padding-bottom: 1.5rem;

    border-bottom: 0.1rem solid rgba(186, 183, 183, 0.377);

}



.box-contact h2 {

    margin: 1rem 0;

    font-size: 2rem;

    color: #2E8B57;

    padding-bottom: 1rem;

    border-bottom: 0.1rem solid rgba(186, 183, 183, 0.377);

}



.des {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.des h3 i {

    padding-left: 8px;

    font-size: 18px;

}



.des h3 {

    padding-right: 8px;

    flex: 1 1 30%;

    min-width: fit-content;

    box-sizing: border-box;

    padding: 12px;

    border-radius: 8px;

    border: var(--border);

    overflow: auto;

    max-height: 150px;



    line-height: 1.8;

    font-size: 1rem;

    color: #222;

    border: 0.1rem solid rgba(186, 183, 183, 0.377);

    border-radius: 0.5rem;

    transition: 0.2s linear;

}



.des h3:hover {

    background: #2E8B57;

    color: #eee;

}



/* استایل بخش لوکیشن */

.loc {

    width: 50%;

    border: 0.2rem solid rgba(255, 255, 255, 0.1);

    border-radius: 0.5rem;

    overflow: hidden;

    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

}



.loc iframe {

    width: 100%;

    height: 100%;

    min-height: 265px;

    border: none;

    display: block;

}



/* ریسپانسیو */

@media (max-width: 768px) {

    .contact-row {

        flex-direction: column;

    }



    .contact-row.reverse {

        flex-direction: column;

    }



    .box-contact,

    .loc {

        width: 100%;

    }



    .box-contact {

        padding: 1rem;

    }



    .box-contact h2 {

        font-size: 1.5rem;

        margin: 1.5rem 0;

    }



    .des h3 {

        font-size: 1rem;

        padding: 0.6rem;

    }

}



/* /////////// */

.img-q {

    position: relative;

    width: 100%;

    height: 200px;

    /* ارتفاع اصلی */

    background: url('../img/contact/1.jpg') center/cover no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 50px;

    margin-top: 50px;

}



/* لایه سایه نیمه شفاف */

.img-q::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

}



.img-qu {

    position: relative;

    text-align: center;

    color: #fff;

    z-index: 2;

    padding: 20px;

}







.img-qu h2 {

    font-size: 3.5rem;

    margin-bottom: 1rem;

    font-weight: 800;

}



.img-qu p {

    font-size: 1.5rem;

    margin-bottom: 1.5rem;

}



/* استایل ناحیه دکمه‌ها */

.btn-top-q {

    display: flex;

    justify-content: center;

    gap: 40px;

    flex-wrap: wrap;

}



/* استایل دکمه‌ها */

.bike-btn {

    display: inline-block;

    color: #f5f5f5;

    border-radius: 0.3rem;

    border: 0.1rem solid #fff;

    font-size: 20px;

    padding: 10px 60px;

    cursor: pointer;

    background: none;

    transition: 0.2s linear;

    position: relative;

    z-index: 1;

    overflow: hidden;

    font-weight: 500;

    text-decoration: none;

}



.bike-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 0;

    background: #f5f5f5;

    z-index: -1;

    transition: 0.2s linear;

}



.bike-btn:hover::before {

    width: 100%;

    right: 0;

}



.bike-btn:hover {

    color: #222;

}



/* تنظیمات ریسپانسیو برای موبایل */

@media (max-width: 768px) {

    .full-pic {

        height: 300px;

    }



    .img-qu h2 {

        font-size: 2.5rem;

    }



    .img-qu p {

        font-size: 1rem;

    }



    .btn-top {

        padding: 0;

        gap: 5px;

        flex-direction: column;

    }



    .bike-btn {

        padding: 8px 30px;

        font-size: 16px;

    }

}



/* ===== FAQ (Accordion) ===== */

.faq {

    direction: rtl;

    padding: 2rem 1rem 3rem;

    max-width: 1000px;

    margin: 0 auto 40px;

}



.faq-header {

    text-align: center;

    margin-bottom: 1.5rem;

}



.faq-header h2 {

    font-size: 2rem;

    font-weight: 800;

    margin-bottom: .5rem;

}



.faq-header p {

    color: #555;

    font-size: 1rem;

}



.faq-list {

    display: grid;

    gap: 12px;

}



.faq-item {

    border: 1px solid rgba(186, 183, 183, 0.377);

    border-radius: .5rem;

    background: #fff;

    overflow: hidden;

}



.faq-item summary {

    list-style: none;

    /* حذف نشانک پیش‌فرض */

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 14px 16px;

    font-weight: 600;

    font-size: 1rem;

    line-height: 1.6;

    user-select: none;

}



.faq-item summary::-webkit-details-marker {

    display: none;

}



.faq-item summary i {

    transition: transform .2s ease;

    font-size: .95rem;

}



.faq-item[open] summary i {

    transform: rotate(180deg);

}



.faq-content {

    padding: 0 16px 14px 16px;

    color: #333;

    line-height: 1.9;

    font-size: .95rem;

    border-top: 1px solid rgba(186, 183, 183, 0.25);

    background: #fafafa;

}



.faq-item:hover {

    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);

    transform: translateY(-2px);

    transition: .2s ease;

}



/* ریسپانسیو */

@media (max-width: 768px) {

    .faq {

        padding: 1.25rem 1rem 2rem;

    }



    .faq-header h2 {

        font-size: 1.6rem;

    }



    .faq-item summary {

        padding: 12px 14px;

    }



    .faq-content {

        padding: 0 14px 12px 14px;

    }

}



section{

    padding-block: 0;

}