@font-face {
    font-family: "Geist-Regular";
    src: url(/fonts/Geist-Regular.ttf);
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f7f7f7;
    font-family: "Geist-Regular";
}

body.lock {
    overflow: hidden;
}

/* ---------- Хедер ---------- */

.site-header {
    margin: calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340)));
    padding: calc(16px + (21 - 16) * ((100vw - 340px) / (1600 - 340))) calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340)));
    background-color: #fff;
    border-radius: 16px;
    transition:
        all 0.5s ease-in-out,
        border-radius 0.5s ease-in-out,
        background-color 0.5s ease-in-out;
}

.site-header.scrolled {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    position: fixed;
    background-color: white;
    border-radius: 0px;
    padding: calc(16px + (21 - 16) * ((100vw - 340px) / (1600 - 340))) calc(40px + (53 - 40) * ((100vw - 340px) / (1600 - 340)));
    margin: 0;
}

.site-header ul,
.footer_navigation ul {
    list-style: none;
}

.container,
.legal-entity-docs {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navigation {
    gap: calc(5px + (51 - 5) * ((100vw - 340px) / (1600 - 340)));
}

.main-nav ul {
    gap: calc(6px + (32 - 6) * ((100vw - 340px) / (1600 - 340)));
}

.navigation,
.main-nav .nav,
.phone_lang {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-nav ul li a,
.services-select,
.services-toggle,
.footer-select,
.footer-toggle,
.lang-dropdown.show,
.phone_lang a,
.phone-mobile_menu,
#services,
.sub-menu .sub-item a,
.mobile-menu__nav a,
.mobile-menu__phone a,
.mobile-menu__phone p,
.swiper-mainButtons a,
.mainSection-buttons a,
.footer_navigation li a {
    text-decoration: none;
    color: #3A4342;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

.language-selector,
.services-select {
    position: relative;
    display: inline-block;
    text-wrap: nowrap;
}

.lang-btn,
.services-toggle {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: 1.5px solid #184B50;
    border-radius: 16px;
    background: white;
    cursor: pointer;
}

.services-toggle {
    text-wrap: nowrap;
    border: none;
}

.services-toggle:hover {
    background-color: #F7F7F7;
}

.lang-dropdown,
.services-dropdown,
.services {
    display: none;
    position: absolute;
    top: 160%;
    right: -30px;
    background: white;
    border: none;
    border-radius: 16px;
    padding: 16px 20px;
    z-index: 100;
    transition: max-height 0.8s ease-in-out, opacity 0.6s ease-in-out;
    width: max-content;
}

.services-dropdown,
.services {
    top: 170%;
    right: 0px;
}

.lang-dropdown div {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 6px 16px;
    cursor: pointer;
}

.main-nav ul li a:hover,
.lang-dropdown span:hover,
.mobile-menu__nav a:hover,
.mobile-menu__nav button:hover {
    color: #D1C29D;
    transition: 0.3s ease-in-out;
}

.lang-dropdown.show,
.services-dropdown.show {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.services-toggle,
.lang-btn {
    display: flex;
    gap: 20px;
}

.phone_lang a {
    background-color: #184B50;
    border-radius: 16px;
    padding: 16px 32px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(6px + (16 - 6) * ((100vw - 340px) / (1600 - 340)));
    text-wrap: nowrap;
}

.phone_lang {
    gap: calc(6px + (16 - 6) * ((100vw - 340px) / (1600 - 340)));
}

.phone_lang a:hover {
    background-color: #1d5a60;
}

/* Бургер скрыт по умолчанию */
.burger {
    display: none;
}

.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

/* Боковая панель */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 320px;
    height: 95%;
    background: white;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px 16px;
    transition: left 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-menu.show {
    left: 0;
}

.overlay.show {
    display: block;
}

.mobile-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 56px;
}

.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    flex-grow: 1;
}

.mobile-menu__bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-menu__langs img {
    width: 28px;
    cursor: pointer;
    padding: 11px;
    border: 1px solid #F7F7F7;
    border-radius: 13px;
}

.mobile-menu__langs img.active {
    border: 1px solid #184B50;
    border-radius: 12px;
}

.phone-mobile_menu {
    display: none;
}

.mobile-menu__phone a {
    font-weight: 700;
    font-size: 26px;
    line-height: 120%;
    letter-spacing: 1%;
    text-transform: uppercase;
}

.mobile-menu__phone p {
    color: #999D9C;
}

.close-btn {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.sub-menu {
    position: static;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

.sub-menu.open {
    opacity: 1;
    padding-top: 16px;
}

/* ---------- Виджет ---------- */
.connection-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.connection-container .main_img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #0c5959;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 4px solid #d2e3e3;
    transition: transform 0.3s ease;
}

.connection-container .main_img:hover {
    transform: scale(1.1);
}

.sub-buttons {
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}

.sub-buttons .email {
    bottom: 10px;
    right: 100px;
    position: absolute;
}

.sub-buttons .telegram {
    bottom: 70px;
    right: 75px;
    position: absolute;
}

.sub-buttons .phone {
    bottom: 100px;
    right: 15px;
    position: absolute;
}

.connection-container.open .sub-buttons {
    pointer-events: auto;
    opacity: 1;
}

.sub-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #d5c4a1;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
}

.sub-button:hover {
    transform: scale(1.1);
}

/* ---------- Главный слайдер ---------- */
#main-swiper,
.mainSection {
    margin: calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340))) 0;
    background: repeating-linear-gradient(60deg,
            #01575C,
            #4DA373 20%,
            #01575C,
            #01575C 80%);
    background-repeat: repeat;
    overflow: hidden;
    border-radius: 16px;
}

.error-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: calc(407px + (600 - 407) * ((100vw - 340px) / (1600 - 340)));
}

.swiper-content,
.mainSection-component {
    width: auto;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: clamp(50%, 10vw, 100%) auto;
}

.mainSection-component {
    background-image: url(/images/33.webp);
 

}

.mainSection-component2 {
    width: auto;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: clamp(50%, 10vw, 100%) auto;
}

.mainSection-component2 {
    background-image: url(/images/222.webp);
     background-position: 700px;
    background-size: 80%; /* Try values like 110%, 120%, 130% etc. */
    background-repeat: no-repeat;
    min-height: 200px;
    width: 100%;
   
}

.ijara-product {
    background-image: url(/images/main-img-ijara-product.svg);
}

.murabakha {
    background-image: url(/images/murabakha_main-img.svg);
}

.vacancies {
    background-image: url(/images/vacancies-img.webp);
    background-size: 50%;
    overflow: hidden;
}

.shariat-full {
    background-image: url(/images/shariat-img.webp);
    background-size: 40%;
    overflow: hidden;
    background-position: 1150px;
}

.about_company {
    background-image: url(/images/44.webp);
    overflow: hidden;
}

.textAndButtons,
.mainSection-container {
    padding: calc(40px + (88 - 40) * ((100vw - 340px) / (1600 - 340))) calc(16px + (39 - 16) * ((100vw - 340px) / (1600 - 340)));
    display: flex;
    flex-direction: column;
    gap: calc(48px + (64 - 48) * ((100vw - 340px) / (1600 - 340)));
}

.contacts_section-container {
    padding: calc(40px + (88 - 40) * ((100vw - 340px) / (1600 - 340))) calc(16px + (39 - 16) * ((100vw - 340px) / (1600 - 340))) 0;

}

.swiper-mainText h1,
.mainSection-text h1,
.aboutUs_text h2 {
    font-weight: 700;
    font-size: calc(32px + (56 - 32) * ((100vw - 340px) / (1600 - 340)));
    line-height: 115%;
    letter-spacing: 1%;
    text-transform: uppercase;
    color: white;
    max-width: 56rem;
}

.swiper-mainText p,
.mainSection-text p,
.aboutUs_text p {
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 115%;
    letter-spacing: 1%;
    color: white;
    max-width: 40rem;
    margin-top: 16px;
}

.swiper-mainButtons,
.mainSection-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 40rem;
}

.swiper-mainButtons a,
.mainSection-buttons a {
    flex: 1 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 16px;
    white-space: nowrap;
    transition: 0.3s;
}

#request {
    background-color: #D1C29D;
    color: #fff;
}

#connect {
    background-color: #fff;
    color: #184B50;
    display: flex;
    gap: 16px;
}


#shariat,
#murabakhaBtn {
    background-color: #FFFFFF1A;
    color: #fff;
}

/* ---------- Услуги ---------- */
.main-services,
.trust-section,
.characteistics-section,
.partners,
.faq-block,
.products,
.deals-section,
.qualities,
.documents,
.news-infoFull,
.control-section,
.certificates-section {
    margin: calc(100px + (150 - 100) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340))) 0;
}

#calculator {
    margin: 0 calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340)));

}

.qualities,
.deals-section,
.policy_section {
    margin: calc(100px + (150 - 100) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340)));
}

.policy_section {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: calc(8px + (16 - 8) * ((100vw - 340px) / (1600 - 340)));
    max-width: 100vh;
}

.documents .documents_text h2,
.calculator h2,
.contacts_section-text {
    margin-bottom: calc(32px + (48 - 32) * ((100vw - 340px) / (1600 - 340)));
}

.main-services p,
.trust-section_breadcrumb p,
.characteistics-section_breadcrumb p,
.aboutUs_breadcrumb p,
.form-textAnd-phone .form-text p,
.form-phone p,
.doc-block p,
.file-name-display,
.footer_work_buttons a,
.news_breadcrumb p,
.swipe_Text p,
.partners_breadcrumb p,
.faq_breadcrumb p,
.products_breadcrumb p,
.deals-section_breadcrumb p,
.qualities_breadcrumb p,
.documents_breadcrumb p,
.contacts_section-breadcrumb p,
.control-section_breadcrumb p,
.calculator_breadcrumb p,
.anti-corruption_text p {
    flex: 1;
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 120%;
    letter-spacing: 0%;
    color: #999D9C;
    text-align: left;
}

.main-service_breadcrumb p,
.products_breadcrumb p,
.trust-section_breadcrumb p,
.characteistics-section_breadcrumb p,
.aboutUs_breadcrumb p,
.news_breadcrumb p,
.partners_breadcrumb p,
.faq_breadcrumb p,
.deals-section_breadcrumb p,
.qualities_breadcrumb p,
.documents_breadcrumb p,
.control-section_breadcrumb p,
.calculator_breadcrumb p {
    font-size: calc(14px + (16 - 14) * ((100vw - 340px) / (1600 - 340)));
    margin-bottom: calc(14px + (16 - 14) * ((100vw - 340px) / (1600 - 340)));
}

.aboutUs_breadcrumb,
.qualities_breadcrumb,
.products_breadcrumb,
.documents_breadcrumb {
    flex: 0.5;
}

.aboutUs_textAndButtons,
.qualities_text,
.products_card_maintext,
.documents_text {
    flex: 1;
}

.main-services_text,
.products_text,
.deals-heading,
.products_card_maintext {
    display: flex;
    gap: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    margin-bottom: calc(32px + (48 - 32) * ((100vw - 340px) / (1600 - 340)));
}

.main-services_text h2,
.products_text h2,
.form-textAnd-phone .form-text h2,
.form-phone h3,
.trust-heading h2,
.characteistics-heading h2,
.have_questions_text h2,
.news_textAnd_buttons h2,
.contacts_section-text h1,
.company h2,
.companyInfo h2,
.companyMap h2,
.partners_text h2,
.faq-block h2,
.banner h2,
.banner-small h2,
.deals-heading h2,
.products_card_maintext h2,
.aboutUs_text h2,
.control-section_textAnd_buttons h2,
.certificates-section_textAnd_buttons h2,
.anti-corruption_text h2,
.calculator h2 {
    flex: 1;
    font-weight: 700;
    font-size: calc(30px + (48 - 30) * ((100vw - 340px) / (1600 - 340)));
    line-height: 120%;
    letter-spacing: 1%;
    text-transform: uppercase;
    color: #184B50;
}

.contacts_section-text h1 {
    font-size: calc(26px + (48 - 26) * ((100vw - 340px) / (1600 - 340)));

}

.main-services_cards {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
}

.products_cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    align-items: stretch;
    gap: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
}

.main-service_card,
.products_card {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 16px;
    transition: 0.3s ease-in-out;
    min-height: calc(240px + (350 - 240) * ((100vw - 340px) / (1600 - 340)));
    padding: calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340)));

    &:hover {
        transform: translateY(-2px);
        z-index: 10;
        box-shadow: 0px 4px 12px 3px #838BB429;
    }
}

.main-service_card_text,
.products_card_text,
.deals-card-text,
.qualities-card-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
    gap: calc(8px + (16 - 8) * ((100vw - 340px) / (1600 - 340)));
}

.products_card_text h3,
.deals-card-text h3,
.qualities-card-text h3 {
    font-weight: 700;
    font-size: calc(20px + (24 - 20) * ((100vw - 340px) / (1600 - 340)));
    line-height: 110%;
    color: #3A4342;
}

.conditions_text h2 {
    margin-bottom: calc(30px + (48 - 30) * ((100vw - 340px) / (1600 - 340)));
}

.products_card_text p,
.deals-card-text p,
.products_card_text p,
.qualities-card-text p,
.info-text p,
.info-button-next-news,
.info-button-prev-news,
.calculator-form-group,
.policy-text p,
.calculator-result-boxes .result-box p {
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 120%;
    color: #3A4342;
}

.qualities-card-text span {
    font-weight: bold;
}

.main-service_card .btn,
.products_card .btn,
.shariat-card-footer .btn {
    width: 54px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #D1C29D;
    color: #184B50;
    background-color: #fff;

    &:hover {
        background-color: #D1C29D;
        color: white;
    }
}



#avto {
    background-image: url('/images/image49.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

#avto2 {
    background-image: url('/images/image48.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

#avto3 {
    background-image: url('/images/image50.webp');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

#murabakha {
    background-image: url('/images/murabakha_main-img.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: clamp(50%, 10vw + 40%, 70%);
}

#house {
    background-image: url('/images/product-ijara2.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

#technic {
    background-image: url('/images/666.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: clamp(100%, 10vw + 30%, 80%);

}

#promtechnic {
    background-image: url('/images/product-ijara4.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: clamp(70%, 10vw + 30%, 80%);

}

#items {
    background-image: url('/images/product-murabakha2.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
}

#apartments {
    background-image: url('/images/0_3.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: clamp(70%, 10vw + 30%, 80%);
}



/* ---------- Форма одобрения---------- */
.form-approval_container {
    margin: calc(150px + (200 - 150) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340))) 0;
    background: repeating-linear-gradient(120deg,
            #01575C,
            #4DA373 20%,
            #01575C,
            #01575C 80%);
    background-repeat: repeat;
    border-radius: 16px;
}

.form-approval_container .form {
    display: flex;
    justify-content: space-between;
    padding: calc(24px + (40 - 24) * ((100vw - 340px) / (1600 - 340))) calc(24px + (48 - 24) * ((100vw - 340px) / (1600 - 340)));
}

.form-approval-mobile {
    display: none;
}

.form-approval {
    display: flex;
    width: 100%;
    max-width: 700px;
    flex-direction: column;
}

.form-item {
    margin-top: 20px;
}

.form-item::placeholder,
.have_questions_form-input input::placeholder {
    color: #FFFFFF80;
}

#documents {
    margin-top: 0;
}

.form-textAnd-phone,
.footer_work {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.form-textAnd-phone .form-text,
.footer_work_buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-textAnd-phone .form-text h2 {
    color: #fff;
}

.form-textAnd-phone .form-text p,
.form-phone p {
    color: #FFFFFF80;
}

.form-approval #typeOf,
.form-approval #contact-typeOf,
.form-approval-mobile #contact-typeOf-mobile,
.form-approval-mobile input,
.have_questions_form-input input,
.form-approval input,
.file-label,
#file,
.form-group input,
.have_questions_form-btn button {
    padding: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340))) calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340)));
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 120%;
    letter-spacing: 0%;
    color: #FFFFFF;
    background-color: #FFFFFF1A;
    outline: none;
    border: none;
    border-radius: 16px;
}

.doc-block {
    max-width: 37.5rem;
    margin-top: 0;
}

.doc-block p,
.doc-block ul li a {
    display: flex;
    gap: 20px;
    margin-top: 24px;
    align-items: center;
    color: white;
}

.doc-block #alert {
    font-size: calc(14px + (16 - 14) * ((100vw - 340px) / (1600 - 340)));
}

.doc-block ul li {
    display: flex;
    list-style: none;
    padding-left: 40px;
    color: #D1C29D;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    font-size: calc(14px + (18 - 14) * ((100vw - 340px) / (1600 - 340)));
    line-height: 110%;
    text-decoration: underline;
}

.doc-block ul li a {
    margin-top: 0;
    color: #D1C29D;
}

.custom-select {
    position: relative;
    background: #005B5B;
    color: white;
    padding: 12px 16px;
    border-radius: 16px;
    cursor: pointer;
}

.custom-select.open .select-options {
    max-height: 200px;
}

.select-options li {
    padding: 12px 16px;
    cursor: pointer;

    &:hover {
        background: #077979c2;
        color: #fff;
    }
}


.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    color: #01575C;
    border-radius: 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 100;
}

.custom-select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 25px;
    width: 16px;
    height: 16px;
    background-image: url('/images/icons/arrow-down_form.svg');
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-50%);
    pointer-events: none;
}


.form-socialMedia,
.footer-socialMedia,
.footer-socialMedia-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-socialMedia .social-media,
.footer-socialMedia .social-media,
.footer-socialMedia-mobile .social-media {
    width: calc(46px + (50 - 46) * ((100vw - 340px) / (1600 - 340)));
    height: calc(46px + (50 - 46) * ((100vw - 340px) / (1600 - 340)));
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF1A;
    border-radius: 50%;
    margin-bottom: 32px;
}

.form-phone {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-phone h3 {
    font-size: calc(26px + (32 - 26) * ((100vw - 340px) / (1600 - 340)));
    color: #fff;
}


#file {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #fff;
}

.file-label img {
    width: 20px;
    height: 20px;
}

.file-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-name-display {
    margin-top: 10px;
}

.submit-btn {
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 120%;
    margin-top: 30px;
    background-color: #D1C29D;
    color: #FFFFFF;
    outline: none;
    padding: calc(18px + (24 - 18) * ((100vw - 340px) / (1600 - 340)));
    border: 1px solid #D1C29D;
    border-radius: 16px;
    cursor: pointer;
}

.form-approval .note,
.form-approval .note a,
.form-approval-mobile .note,
.form-approval-mobile .note a,
.have_questions_form p,
.have_questions_form p a {
    margin-top: 16px;
    font-size: calc(12px + (16 - 12) * ((100vw - 340px) / (1600 - 340)));
    text-align: center;
    color: #FFFFFF80;
}

.have_questions_form p a,
.note a {
    text-decoration: underline;
}

/* ---------- Преимущества ---------- */
.trust-grid,
.characteistics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 24px;
    position: relative;
}

.trust-heading,
.characteistics-heading {
    grid-column: 1 / 3;
}

.trust-card,
.characteistics-card {
    display: flex;
    flex-direction: column;
    gap: calc(24px + (64 - 24) * ((100vw - 340px) / (1600 - 340)));
    background: #fff;
    border-radius: 16px;
    padding: calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340))) calc(24px + (30 - 24) * ((100vw - 340px) / (1600 - 340)));
    font-weight: 700;
    font-size: calc(20px + (22 - 20) * ((100vw - 340px) / (1600 - 340)));
    line-height: 110%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #3A4342;

    &:hover {
        background: #d8c29d;
        color: #fff;

        .icon {
            background-color: #fff;
            color: #d8c29d;
        }
    }
}

.trust-card .icon,
.characteistics-card .icon,
.deals-card .icon,
.qualities-card .icon,
.legal-entity-docs_card .icon,
.legal-entity-docs_rightCard .icon,
.legal-entity-docs_leftCard .icon {
    background-color: #d8c29d;
    border-radius: 16px;
    margin-bottom: 16px;
    width: calc(50px + (70 - 50) * ((100vw - 340px) / (1600 - 340)));
    height: calc(50px + (70 - 50) * ((100vw - 340px) / (1600 - 340)));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

/* Расположение карточек по сетке */

.trust-grid .card-1 {
    grid-column: 4 / 5;
    grid-row: 1;
}

.trust-grid .card-2 {
    grid-column: 2 / 3;
    grid-row: 2;
}

.trust-grid .card-3 {
    grid-column: 3 / 4;
    grid-row: 2;
}

.trust-grid .card-4 {
    grid-column: 1 / 2;
    grid-row: 3;
    position: relative;
}

.trust-grid .card-5 {
    grid-column: 2 / 3;
    grid-row: 3;
}

.trust-grid .card-6 {
    grid-column: 4 / 5;
    grid-row: 3;
}

.characteistics-grid .card-1 {
    grid-column: 3 / 4;
    grid-row: 1;
}

.characteistics-grid .card-2 {
    grid-column: 4 / 5;
    grid-row: 1;
}

.characteistics-grid .card-3 {
    grid-column: 2 / 3;
    grid-row: 2;
}

.characteistics-grid .card-4 {
    grid-column: 4 / 5;
    grid-row: 2;
}

.characteistics-grid .card-5 {
    grid-column: 1 / 2;
    grid-row: 3;
}

.characteistics-grid .card-6 {
    grid-column: 3 / 4;
    grid-row: 3;
}

/* ---------- Немного о нас ---------- */
.short-aboutUs_content,
.qualities_content,
.short-aboutUs_content,
.murabakha_text-and-breadcrumbs,
.breadcrumbsAndText {
    display: flex;
    flex: 0.2 1;
    justify-content: space-between;
}

.aboutUs_text h2,
.qualities_text h2,
.documents_text h2 {
    font-size: calc(32px + (48 - 32) * ((100vw - 340px) / (1600 - 340)));
    color: #184B50;
}

.aboutUs_text h2,
.aboutUs_text p,
.qualities_text h2,
.qualities_text p,
.murabakha_text-and-breadcrumbs .products_card_maintext h2,
.documents_text h2 {
    max-width: 45rem;
    text-align: start;
}

.aboutUs_text p,
.qualities_text p {
    color: #999D9C;
    margin-top: 16px;
    margin-bottom: 32px;
}

.aboutUs_button {
    display: block;
    padding: 16px 32px;
    background-color: #D1C29D;
    border-radius: 16px;
    border: 1px solid #D1C29D;
    color: white;
    text-decoration: none;
    max-width: 285px;
    text-align: center;
    margin-bottom: calc(40px + (64 - 40) * ((100vw - 340px) / (1600 - 340)));
}

.aboutUs_button a {
    color: white;
    text-decoration: none;
}

.short-aboutUs_video {
    position: relative;
    max-width: 100%;
    height: calc(240px + (640 - 240) * ((100vw - 340px) / (1600 - 340)));
    overflow: hidden;
    border-radius: 16px;
}

.video-thumbnail-container {
    position: relative;
    cursor: pointer;
}

.video-thumbnail {
    width: 100%;
    height: calc(240px + (640 - 240) * ((100vw - 340px) / (1600 - 340)));
    display: block;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s;
    height: calc(240px + (640 - 240) * ((100vw - 340px) / (1600 - 340)));
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: #fff;
    border-radius: 50%;
    padding: calc(24px + (35 - 24) * ((100vw - 340px) / (1600 - 340)));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.video-player-container {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.short-aboutUs_video.playing .video-thumbnail-container {
    display: none;
}

.short-aboutUs_video.playing .video-player-container {
    display: block;
}

.video-player-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ---------- Новости ---------- */
.news,
.company,
.companyInfo,
.companyMap {
    margin: calc(150px + (200 - 150) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340))) 0;
    display: flex;
    flex-direction: column;
}

.news_textAnd_buttons,
.swiper-buttons,
.control-section_textAnd_buttons,
.certificates-section_textAnd_buttons {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: calc(22px + (38 - 22) * ((100vw - 340px) / (1600 - 340)));
}

.swiper-button-next-news,
.swiper-button-prev-news,
.swiper-button-prev-control,
.swiper-button-next-control,
.swiper-button-prev-certificate,
.swiper-button-next-certificate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 1px solid #D1C29D;
    border-radius: 16px;
    color: #3A4342;

    &:hover {
        color: #fff;
        background-color: #D1C29D;
    }
}

.swiper-button-prev-control.hidden,
.swiper-button-next-control.hidden,
.swiper-button-prev-certificate.hidden,
.swiper-button-next-certificate.hidden {
    display: none;
}

.newsSwiper {
    width: 100%;
    height: 100%;
}

.newsSwiper .swiper-slide {
    display: flex;
    height: auto;
    border-radius: 16px;
    overflow: visible;
    position: relative;
    z-index: 0;
}

.newsswiper-content,
.person-content {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    z-index: 1;
    text-decoration: none;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;

    &:hover {
        transform: translateY(-5px);
        z-index: 10;
        box-shadow: 0 8px 10px rgba(0, 0, 0, 0.12);
    }
}

.person-content {
    padding: calc(16px + (24 - 16) * ((100vw - 340px) / (1600 - 340)));
    display: flex;
    flex-direction: column;
}

.peopleSwiper .swiper-slide {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.peopleSwiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.shariat-card-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #eee;
}

.swipe_img {
    height: 200px;
    max-width: 440px;
    margin: 24px;
    border-radius: 16px;
    overflow: hidden;
}

.certificateSwiper .swiper-slide {
    display: flex;
    height: auto;
    border-radius: 16px;
    overflow: visible;
    position: relative;
    z-index: 0;
}

.person_img,
.certificate-img {
    width: 100%;
    height: 24rem;
    overflow: hidden;
}

.swipe_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.shariat-card-img img,
.person_img img,
.certificate-img img {
    width: 100%;
    height: 100%;
    max-height: 23.5rem;
    object-fit: cover;
    object-position: center;
    display: block;
}

.shariat-card-img img,
.person_img img,
.certificate-img img {
    border-radius: 16px;
}

.certificate-img img {
    object-fit: contain;
}

.swipe_Text,
.person-content .swipe_Text,
.control-section .swipe_Text {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.person-content .swipe_Text,
.control-section .swipe_Text {
    padding: 0;
}

.swipe_Text .text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 16px;
}

.swipe_Text h3,
.faq-question span {
    font-size: calc(20px + (24 - 20) * ((100vw - 340px) / (1600 - 340)));
    line-height: 1.4;
    font-weight: 700;
    line-height: 110%;
    color: #3A4342;
}

.certificateSwiper .swipe_Text h3,
.calculator-toggle-details-btn {
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));

}

.swipe_Text .data {
    margin-top: auto;
    font-size: 13px;
    color: #999;
    padding-top: 12px;
}

/* ---------- Партнеры ---------- */
.partners_text h2 {
    text-align: center;
    margin-bottom: calc(37px + (48 - 37) * ((100vw - 340px) / (1600 - 340)));
}

.partnersSwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    border-radius: 16px;
    background-color: #fff;
}

.partner-card {
    display: flex;
    max-width: 200px;
    height: 80px;
    padding: 10px;
    align-items: center;
}

.partner-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- Вопросы ---------- */
.faq-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-block h2 {
    margin-bottom: calc(32px + (48 - 32) * ((100vw - 340px) / (1600 - 340)))
}

.faq-item {
    border-radius: 16px;
    overflow: hidden;
    background-color: #fff;
    transition: all 0.3s ease;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    background-color: transparent;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
}

.faq-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(15px + (20 - 15) * ((100vw - 340px) / (1600 - 340)));
    height: calc(15px + (20 - 15) * ((100vw - 340px) / (1600 - 340)));
    padding: 12px;
    border-radius: 50%;
    background-color: #D1C29D;
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    padding: 0 20px;
    background-color: transparent;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-answer p {
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    color: #FFFFFFCC;
    line-height: 100%;
}

.faq-item.active {
    background-color: #D1C29D;
}

.faq-item.active .faq-question span {
    color: #fff;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 16px 20px 20px;
}


.faq-item.active .faq-icon {
    background-color: #E5D6B1;
    transform: rotate(45deg);
}

/* ---------- Футер ---------- */

footer {
    margin-top: calc(150px + (200 - 150) * ((100vw - 340px) / (1600 - 340)));
    background: repeating-linear-gradient(120deg,
            #01575C 30%,
            #4DA373 40%,
            #01575C 70%,
            #01575C 90%);
}

.upperFooter_info,
.have_questions {
    padding: calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340)));
}

.have_questions_text h2 {
    color: #fff;
}

.questions_footer {
    background-color: #FFFFFF1A;
    border-radius: 16px;
    padding: calc(24px + (40 - 24) * ((100vw - 340px) / (1600 - 340))) calc(24px + (50 - 24) * ((100vw - 340px) / (1600 - 340)));
}

.upperFooter_info {
    display: flex;
    justify-content: space-between;
}

.upperFooter_info h3 {
    font-weight: 300;
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    color: #FFFFFFB2;
    line-height: 100%;
    text-transform: uppercase;
}

.lowerFooter {
    border-top: 1px solid #fff;
    margin: 0 !important;
}

.lowerFooter_info {
    display: flex;
    justify-content: space-between;
    padding: calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340)));
}

.have_questions_text p {
    margin-top: 8px;
    max-width: 26rem;
}

.have_questions_form-input,
.have_questions_form-btn {
    display: flex;
    gap: 20px;
    margin-top: calc(32px + (48 - 32) * ((100vw - 340px) / (1600 - 340)))
}

.have_questions_form-btn button {
    background-color: #D1C29D;
    border: 1px solid #D1C29D;
    display: flex;
    width: 100%;
    padding: calc(18px + (24 - 18) * ((100vw - 340px) / (1600 - 340)));
    border-radius: 16px;
    align-items: center;
    outline: none;
    justify-content: center;
}

.have_questions_form-btn button {
    text-decoration: none;
    color: #fff;
}

.have_questions_form-input input {
    width: 100%;
}

.footer-contacts_info,
.footer_work_text p {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contacts_and_social {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.footer_navigation ul li a {
    color: #fff;
}

.footer_navigation ul li {
    margin: 16px 0 14px 0;
    cursor: pointer;
}

.footer-dropdown {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.8s ease-in-out, opacity 0.6s ease-in-out;
}

/* При показе */
.footer-dropdown.show {
    max-height: 200px;
    opacity: 1;
}

.lowerFooter_info p,
.lowerFooter_info a,
.have_questions_text p,
.footer-contacts_info a,
.footer-contacts_info p,
.footer_work_text p {
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 120%;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.footer-select {
    margin-bottom: 14px;
}

.footer-toggle {
    background: none;
    border: none;
    display: flex;
    gap: 10px;
    color: #fff;
}

.footer-socialMedia-mobile {
    display: none;
}

.footer_work_buttons a {
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    padding: 16px 40px;
    background-color: #FFFFFF1A;
    border-radius: 16px;
    justify-content: center;
}

.footer_work_buttons #app {
    background-color: #D1C29D;
}

/* ---------- Иджара ---------- */
.mainSection-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: calc(16px + (39 - 16) * ((1399px - 340px) / (1600 - 340))) calc(32px + (48 - 32) * ((100vw - 340px) / (1600 - 340))) 0;
    gap: 12px;
}

.mainSection-breadcrumb .grey,
.mainSection-breadcrumb .grey p,
.mainSection-breadcrumb a {
    font-size: 18px;
    line-height: 120%;
    color: #FFFFFF80;
    text-decoration: none;
}

.mainSection-breadcrumb p {
    text-decoration: none;
    color: #FFFFFF;
    text-decoration: none;
}

/* ---------- Этапы заключения сделки ---------- */
#deals-desktop .deals-grid,
.cards,
.others {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 24px;
    position: relative;
}

#deals-mobile {
    display: none;
}

.deals-card,
.qualities-card {
    display: flex;
    flex-direction: column;
    gap: calc(24px + (64 - 24) * ((100vw - 340px) / (1600 - 340)));
    background: #fff;
    border-radius: 16px;
    padding: calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340))) calc(24px + (30 - 24) * ((100vw - 340px) / (1600 - 340)));
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #3A4342;
}

/* ---------- рекламный баннер ---------- */
.ads_banner_horisontal {
    height: 22rem;
    display: flex;
    margin: 0 calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340))) calc(100px + (150 - 100) * ((100vw - 340px) / (1600 - 340)));

}

 .ads_banner_vertical {
        width: 25%;
        height: auto; /* Changed from fixed height */
        margin: calc(100px + (50 - 50) * ((100vw - 340px) / (1600 - 340))) calc(16px + (10 - 16) * ((100vw - 340px) / (1600 - 340))) 0;
    }

    .ads_banner_vertical .banner {
        width: 100%;
        height: auto; /* Changed from fixed height */
        display: flex;
        flex-direction: column;
        gap: calc(24px + (64 - 24) * ((100vw - 340px) / (1600 - 340)));
       
        border-radius: 16px;
       
        text-align: center;
        align-items: center;
        justify-content: center;
        color: #3A4342;
        transition: all 0.3s ease-in-out;
        overflow: visible; /* Changed from hidden */
       
    }
     .ads_banner_vertical .banner-image {
        width: 100%;
        height: 350px; /* Fixed height for consistent appearance */
        object-fit: cover;
        border-radius: 12px;
       
    }

.ads_banner_vertical .banner-small {
    width: 100%;
    height: 42rem;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
    background-color: #D1C29D;
    border-radius: 16px;
}


.ads_banner_horisontal .banner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.banner-link {
    max-height: 350px;
    object-fit: cover;
}

.banner-image {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.banner h2,
.banner-small h2 {
    color: white;
    text-align: center;
}

/* ---------- особенности ---------- */
.qualities_cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cards {
    display: grid;
    gap: 20px;
}

/* ---------- документы ---------- */
.documents {
    display: flex;
    flex-direction: column;
    gap: calc(100px + (150 - 100) * ((100vw - 340px) / (1600 - 340)));
}

.legal-entity-docs {
    display: flex;
    align-items: stretch;
    gap: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
}

.legal-entity-docs_left,
.legal-entity-docs_right {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));

}

.legal-entity-docs_rightCard,
.legal-entity-docs_leftCard,
.legal-entity-docs_card {
    display: flex;
    flex: 1;
    gap: 32px;
    background-color: #fff;
    border-radius: 16px;
    align-items: center;
    padding: calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340)));
}

.legal-entity-docs_rightCard p,
.legal-entity-docs_leftCard li,
.legal-entity-docs_leftCard p,
.legal-entity-docs_card p {
    font-size: 20px;
    line-height: 120%;
    color: #3A4342;
}

.others-murabakha {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
}

/* ---------- 404 ---------- */
.error-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.error-text h1 {
    font-weight: 700;
    font-size: calc(140px + (250 - 140) * ((100vw - 340px) / (1600 - 340)));
    line-height: 80%;
    letter-spacing: 1%;
    text-transform: uppercase;
    color: #FFFFFF;
}

.error-text p {
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 110%;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 48px;
}

.error-buttons {
    padding: 16px 32px;
    background-color: #FFFFFF1A;
    border-radius: 16px;
}

.error-buttons a {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
}

/* ---------- Контакты ---------- */
.contacts_section-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0 calc(32px + (48 - 32) * ((100vw - 340px) / (1600 - 340))) 0;
    gap: 12px;
    align-items: baseline;
}

.contacts_section-breadcrumb .grey,
.data p {
    font-size: 18px;
    line-height: 120%;
    color: #999D9C;
}

.contacts_section-breadcrumb a,
.contacts_section-breadcrumb #active p {
    text-decoration: none;
    color: #3A4342;
}

.contacts_section-images {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.image-wrapper {
    flex: 1;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.info-box {
    background-color: #fff;
    padding: 0 40px;
    border-radius: 16px;
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 110%;
    margin-top: 40px;
}

.info-row {
    display: flex;
    padding: 32px 0;
    justify-content: space-between;
    align-items: flex-start;
    justify-content: center;
}

.info-label {
    flex: 1;
    min-width: 180px;
    color: #999D9C;
}

.info-value {
    text-align: right;
    flex: 2;
    font-weight: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 120%;
    color: #3A4342;
    min-width: 200px;
}

.info-text ul,
.info-text ol {
    padding-left: 20px;
}

.info-text span {
    font-weight: 600;
}

.info-text ul li,
.info-text ol li,
.form-group::placeholder,
.file-label,
.comments textarea::placeholder {
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 120%;
    color: #999D9C;
}

.divider {
    border-top: 1px solid #D9D9D9;
}

/* ---------- Новости полная информация ---------- */
.news-infoFull {
    display: flex;
    gap: 50px;
}

.full-info {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.full-info-textImg {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 48px;
}

.info-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex-grow: 1;
    align-items: stretch;
}

.full-info-img {
    width: 100%;
    height: calc(200px + (400 - 200) * ((100vw - 340px) / (1600 - 340)));
}

.full-info-img img {
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
    height: calc(200px + (400 - 200) * ((100vw - 340px) / (1600 - 340)));
}

#ads {
    display: flex;
    flex: 0.5;
}

.full-info-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: calc(30px + (120 - 30) * ((100vw - 340px) / (1600 - 340)));
}

.info-button-prev-news,
.info-button-next-news {
    display: flex;
    align-items: center;
    gap: 20px;

    &:hover {
        text-decoration: underline;
    }
}

/* ---------- Вакансии ---------- */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    flex: 1 1 30%;
    position: relative;
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-row .file-label {
    width: 100%;
    padding: 14px 16px;
    border: none;
    color: #999D9C;
    border-radius: 12px;
    background-color: #fff;
    font-size: 16px;
    box-sizing: border-box;

    &::placeholder {
        color: #999D9C;
    }
}

.form-row .file-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-label input[type="file"] {
    display: none;
}

.file-name-display {
    flex: 1 1 100%;
    font-size: 14px;
    color: #3A4342;
    margin-top: -8px;
    margin-left: 4px;
}

.contact-form textarea {
    width: 100%;
    height: 120px;
    padding: 14px 16px;
    border: none;
    color: #999D9C;
    border-radius: 12px;
    background-color: #fff;
    font-size: 16px;
    resize: none;
    box-sizing: border-box;
}

.form-button {
    margin-top: 24px;
    text-align: center;
}

.vacancy-form .submit-btn {
    width: 100%;
}

.note {
    margin-top: 12px;
    font-size: 13px;
    color: #3A4342;
}

.note a {
    color: #3A4342;
    text-decoration: underline;
}

/* ---------- Шариат ---------- */
.shariat-articles {
    margin: calc(100px + (150 - 100) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340))) 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.shariat-articles_cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.shariat-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    border-radius: 16px;
    padding: 32px;
    background: #fff;
    text-decoration: none;
    z-index: 1;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;

    &:hover {
        transform: translateY(-5px);
        z-index: 10;
        box-shadow: 0 8px 10px rgba(0, 0, 0, 0.12);
    }
}

.shariat-card h4,
.calculator-result-boxes .result-box .number {
    font-weight: 700;
    font-size: calc(20px + (24 - 20) * ((100vw - 340px) / (1600 - 340)));
    line-height: 110%;
    color: #3A4342;
}

.shariat-card p,
.shariat-card span {
    flex: 1;
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 120%;
    color: #999D9C;
}

.shariat-card-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#paginationControls {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 10px;
    margin-top: 48px;
    flex-wrap: wrap;
}

#paginationControls button {
    background: #fff;
    color: #01575C;
    outline: none;
    border: 1px solid #01575C;
    padding: 16px 20px;
    font-size: 20px;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#paginationControls button.active {
    background: #01575C;
    color: #fff;
}

#paginationControls button:disabled {
    background: #d4d2d2;
    color: #fff;
    border: 1px solid #fff;
    cursor: not-allowed;
}

#paginationControls .pagination-page {
    font-weight: bold;
    font-size: 16px;
}


/* ---------- Карта ---------- */

.map-section {
    padding: 40px 0;
}

.map-container {
    width: 100%;
    max-width: 100%;
    height: 650px;
    border-radius: 16px;
    overflow: hidden;
}

#mapOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
    cursor: pointer;
    border-radius: 16px;
}

#map {
    pointer-events: none;
    transition: 0.3s ease;
    border-radius: 16px;
    width: 100%;
    height: calc(340px + (650 - 340) * ((100vw - 340px) / (1600 - 340)));
    max-width: 100%;
    overflow: hidden;
    margin-top: calc(32px + (48 - 32) * ((100vw - 340px) / (1600 - 340)));
}

#map.active {
    pointer-events: auto;
}

/* ---------- О компании слайдер ---------- */
.short-aboutUs_content {
    margin: calc(100px + (150 - 100) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340))) 0;
}

.short-aboutUs_video,
.vacancy-form {
    margin: 0 calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340))) 0;

}

#yearContentSwiper {
    width: 100%;
    height: 100%;
    max-width: 65rem;
}

.year-content .year-text {
    margin-top: calc(16px + (24 - 16) * ((100vw - 340px) / (1600 - 340)));
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 110%;
    color: #999D9C;
}

.year-content .year-img {
    display: flex;
    gap: 21px;
    margin-top: calc(32px + (40 - 32) * ((100vw - 340px) / (1600 - 340)));
}

.year-content .year-img img {
    width: calc(340px + (486 - 340) * ((100vw - 340px) / (1600 - 340)));
    height: calc(220px + (271 - 220) * ((100vw - 340px) / (1600 - 340)));
    ;
    border-radius: 16px;
    object-fit: cover;
}

.yearsPaginationSwiper {
    width: 100%;
    overflow: hidden;
    margin-top: calc(50px + (64 - 50) * ((100vw - 340px) / (1600 - 340)));
    margin-bottom: calc(100px + (150 - 100) * ((100vw - 340px) / (1600 - 340)));
    position: relative;
}

.yearsPagination-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 75px;
    height: 3px;
    background: #184B50;
    z-index: 0;
}

.yearsPaginationSwiper .swiper-wrapper {
    position: relative;
    width: max-content;
}

.yearsPaginationSwiper .swiper-slide {
    position: relative;
}

.yearsPaginationSwiper .circle-pag {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #0C4342;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.yearsPagination-content {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.yearsPagination-content p {
    padding: 16px 24px;
    border: 1px solid #184B50;
    border-radius: 16px;
    margin-bottom: 26px;
    text-wrap: nowrap;
}

.yearsPagination-content p.active {
    background-color: #184B50;
    color: #fff;
}

/* ---------- Анти-коррупция---------- */
.anti-corruption-section {
    display: flex;
    gap: 20px;
    margin: calc(100px + (150 - 100) * ((100vw - 340px) / (1600 - 340))) 0 0 calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340)));

}


.anti-corruption-fulltextAndImg {
    display: flex;
    justify-content: space-between;
    flex: 1 1;
}

.anti-corruption-fullText,
.anti-corruption-img {
    flex: 1;
}

.anti-corruption-section .anti-corruption_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.anti-corruption-img img {
    object-fit: contain;
    width: 100%;
    object-position: center right;
}

/* ---------- Калькулятор---------- */
.calculator-info {
    display: flex;
    flex: 1 1;
    gap: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
}

.calculator-form-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
}

.calculator-result-boxes {
    display: flex;
    flex: 0.5;
    gap: 10px;
    flex-direction: column;
    justify-content: space-between;
}

.percentage-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: #3A4342;
    margin-bottom: calc(8px + (64 - 8) * ((100vw - 340px) / (1600 - 340)));
}

.percentage-section p {
    padding: calc(14px + (16 - 14) * ((100vw - 340px) / (1600 - 340))) calc(18px + (24 - 18) * ((100vw - 340px) / (1600 - 340)));
    border: 1px solid #D1C29D;
    border-radius: 16px;
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 110%;
    display: flex;
    gap: 8px;
}

.percentage-section p span {
    color: #D1C29D;
}

.calculator-form-group {
    display: flex;
    flex-direction: column;
    padding: calc(18px + (20 - 18) * ((100vw - 340px) / (1600 - 340))) calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340)));
    background-color: #fff;
    border-radius: 16px;
}

.calculator-form-group input::placeholder,
.calculator-form-group input,
.calculator-form-group select {
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 120%;
    color: #999D9C;
}

.custom-select-wrapper {
    position: relative;
    cursor: pointer;
}

.calculator-form-group input,
.calculator-form-group select {
    outline: none;
    background-color: white;
    padding-top: 8px;
    border: none;
    appearance: none;
    cursor: pointer;
}

.calculator-form-group select option {
    padding: calc(18px + (20 - 18) * ((100vw - 340px) / (1600 - 340))) calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340)));
}

.calculator-form-group select option:hover {
    background-color: #184B50;
}

.custom-arrow {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.calculator-result-boxes .result-box {
    background-color: #D1C29D;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 8px;
    padding: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340))) calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340)));
    border-radius: 16px;

}

.calculator-result-boxes .result-box p,
.calculator-result-boxes .result-box .number {
    color: #fff;
}

.calculator-toggle-details-btn {
    width: 100%;
    background-color: #184B50;
    color: white;
    outline: none;
    border: none;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: calc(32px + (40 - 32) * ((100vw - 340px) / (1600 - 340)));
}

.calculator-toggle-details-btn .btn-icon {
    display: flex;
    align-items: center;
}

.rotate-up {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.calculator-details-section {
    margin-top: 32px;
}

/* Обёртка для горизонтального скролла */
.table-container {
    overflow-x: auto;
    margin-top: 24px;
    border-radius: 12px;
    background: #ffffff;
}

/* Основная таблица */
.calculator-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 768px;
    background: #ffffff;
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    color: #3A4342;
    border-radius: 16px;
}

.calculator-table thead {
    background: #ffffff;

}

.calculator-table thead th {
    background: #fff;
    font-weight: 600;
    text-align: left;
    padding: 24px 40px;
    white-space: nowrap;
    text-align: center;
    border-bottom: 1px solid #F7F7F7;
}

.calculator-table td {
    padding: 24px 40px;
    white-space: nowrap;
    text-align: center;

}

.calculator-table .even {
    background-color: #F7F7F7;
}

.calculator-table tfoot {
    background: #fff;
    border-bottom: none;
    font-weight: 600;
}


/* Скрытие скроллбара */
.table-container::-webkit-scrollbar {
    height: 6px;
}

.table-container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

/*------ Кнопки под таблицей ------*/
.calculator-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
    justify-content: center;
    flex: 1 1;
}

.calculator-actions-btn {
    flex: 0.3;
    padding: 16px 24px;
    border-radius: 16px;
    border: none;
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 120%;
    cursor: pointer;
    justify-content: center;
    background: #184B50;
    color: white;
    text-decoration: none;
    display: flex;
    gap: 8px;
}

.calculator-actions-btn-pdf {
    background: #D1C29D;
    justify-content: center;
    align-items: center;
}

.summary {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #fff;
    align-items: center;
    border-radius: 16px;
    color: #3A4342;
    padding: calc(24px + (40 - 24) * ((100vw - 340px) / (1600 - 340)));
}

.summary p {
    font-weight: 700;
    font-size: calc(16px + (24 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 110%;
}

.summary ul,
.summary ul p {
    font-weight: 300;
    font-size: calc(16px + (20 - 16) * ((100vw - 340px) / (1600 - 340)));
    line-height: 130%;
    text-align: center;
    list-style: none;
}


@media (max-width: 1360px) {
    /* ---------- Хедер ---------- */

    .navigation,
    .phone_lang {
        display: none;
    }

    .phone-mobile_menu {
        display: block;
    }

    .header-left {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .burger {
        display: inline-block;
        background: none;
        outline: none;
        border: none;
        cursor: pointer;
    }

    .site-header .container {
        justify-content: space-between;
        align-items: center;
    }

    .mobile-menu__nav .services-select {
        display: block;
        width: 100%;
    }

    .mobile-menu__nav .services-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        background: none;
        border: none;
        font-size: 18px;
        cursor: pointer;
        padding: 0%;
    }

    .sub-menu.open {
        max-height: 200px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px 0 0 10px;
        border-radius: 0;
    }

    .mobile-menu__phone {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width:1280px) {
    /* ---------- Главный слайдер ---------- */

    .swiper-content,
    .mainSection-component {
        background-image: none !important;
    }

    .textAndButtons,
    .mainSection-container {
        text-align: center;
        align-items: center;
    }

    .swiper-mainButtons,
    .mainSection-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    #shariat {
        display: none;
    }

    .short-aboutUs_content {
        display: flex;
        flex-direction: column;
    }

    #yearContentSwiper {
        max-width: 100%;
    }

}

@media (max-width:1024px) {

    /* Mobile version of ads_banner_horisontal */
@media (max-width: 1024px) {
    .ads_banner_vertical {display: none;}
    .ads_banner_horisontal {
        height: auto;
        margin: calc(100px + (150 - 100) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340))) 0;
    }

    .ads_banner_horisontal .banner {
        display: flex;
        flex-direction: column;
        gap: calc(24px + (64 - 24) * ((100vw - 340px) / (1600 - 340)));
        background: #fff;
        border-radius: 16px;
        padding: calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340))) calc(24px + (30 - 24) * ((100vw - 340px) / (1600 - 340)));
        text-align: center;
        align-items: center;
        justify-content: center;
        color: #3A4342;
        transition: all 0.3s ease-in-out;
        height: auto;
        overflow: visible;
    }

    .ads_banner_horisontal .banner:hover {
        background: #d8c29d;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0px 4px 12px 3px #838BB429;
    }

    .ads_banner_horisontal .banner-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 12px;
    }

    .ads_banner_horisontal .banner h2 {
        font-weight: 700;
        font-size: calc(20px + (22 - 20) * ((100vw - 340px) / (1600 - 340)));
        line-height: 110%;
        margin: 0;
        color: inherit;
    }
}
    .main-services_text,
    .main-services_cards {
        flex-direction: column;
    }

    .products_cards,
    .others-murabakha {
        grid-template-columns: 1fr;
    }

    /* ---------- Форма одобрение за 1 час  ---------- */

    .form-approval {
        display: none;
    }

    .form-approval-mobile {
        display: flex;
        flex-direction: column;
    }

    .form-mediaAndphone {
        display: flex;
        flex-direction: column-reverse;
        gap: 32px;
        margin-top: 64px;
    }

    .form-row {
        flex-direction: column;
    }

    .form-textAnd-phone {
        width: 100%;
    }

    /* ---------- Преимущества  ---------- */

    .trust-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .trust-heading,
    .trust-card,
    .trust-card.highlighted {
        grid-column: 1 / -1 !important;
        display: flex;
        flex-direction: column-reverse;
        align-items: start;
        text-align: start;
    }

    .card-1,
    .card-2,
    .card-3,
    .card-4,
    .card-5,
    .card-6 {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    /* ---------- О нас  ---------- */

    .short-aboutUs_content,
    .breadcrumbsAndText,
    .murabakha_text-and-breadcrumbs {
        flex-direction: column;
    }

    .aboutUs_button {
        max-width: 100%;
    }

    .anti-corruption-fullText {
        margin: calc(100px + (150 - 100) * ((100vw - 340px) / (1600 - 340))) calc(16px + (50 - 16) * ((100vw - 340px) / (1600 - 340)));

    }

    /* ---------- Новости  ---------- */
    .news_textAnd_buttons,
    .certificates-section_textAnd_buttons,
    .control-section_textAnd_buttons {
        flex-direction: column;
        gap: 20px;
    }

    .swiper-buttons {
        justify-content: left;
    }

    /* ---------- Слайдер о компании  ---------- */
    .year-img img:nth-child(2) {
        display: none;
    }

    /* ---------- Партнеры  ---------- */
    .partners_text h2 {
        text-align: left;
    }

    /* ---------- Иджара этапы сделки  ---------- */
    #deals-desktop {
        display: none;
    }

    #deals-mobile,
    .anti-corruption-fulltextAndImg {
        display: flex;
        flex-direction: column;
    }

    #deals-mobile .deals-grid,
    .cards {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
    }

    /* ---------- особенности ---------- */
    .qualities_cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .qualities_content {
        flex-direction: column;
    }

    .percentage-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---------- Документы  ---------- */
    .legal-entity-docs {
        display: flex;
        flex-direction: column;
    }

    .legal-entity-docs_rightCard,
    .legal-entity-docs_leftCard,
    .legal-entity-docs_card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        padding: calc(24px + (32 - 24) * ((100vw - 340px) / (1600 - 340)));
    }

    /* ---------- Контакты  ---------- */
    .contacts_section-images {
        flex-direction: column;
    }

    .info-row,
    .info-value {
        flex-direction: column;
        text-align: start;
        gap: 8px;
    }


    /* ---------- полная информация новости  ---------- */
    #ads {
        display: none;
    }

    .info-button-prev-news {
        display: none;
    }

    .full-info-buttons {
        justify-content: end;
    }

    .shariat-articles_cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---------- Футер  ---------- */

    .lowerFooter_info {
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .have_questions_form-input {
        flex-direction: column;
    }

    .have_questions_form-input input {
        width: auto;
    }

    .footer-socialMedia {
        display: none;
    }

    .footer-socialMedia-mobile {
        display: flex;
        margin-top: 40px;
    }

    .upperFooter_info {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        gap: 56px;
    }



    /* ---------- Калькулятор  ---------- */
    .percent-input {
        display: flex;
        gap: 10px;
    }

    .calculator-info {
        flex-direction: column;
    }

    .calculator-result-boxes {
        gap: 16px;
    }

    .calculator-actions {
        flex-direction: column;
    }
}

@media (max-width:780px) {
    /* ---------- Слайдер о компании  ---------- */

    .year-content .year-img img {
        width: 100%;
    }


}

@media (max-width:680px) {


    /* ---------- Иджара этапы сделки  ---------- */
    #deals-mobile .deals-grid,
    .cards {
        display: grid;
        grid-template-columns: 1fr;
    }

    .shariat-articles_cards {
        grid-template-columns: 1fr;
    }

    .connection-container .main_img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: #0c5959;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 4px solid #d2e3e3;
        transition: transform 0.3s ease;
    }

    .percentage-section {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .connection-container .main_img img,
    .sub-button img,
    .video-play-button svg {
        width: 24px;
        height: 24px;
    }

    .sub-buttons .email {
        bottom: 10px;
        right: 75px;
    }

    .sub-buttons .telegram {
        bottom: 55px;
        right: 55px;
    }

    .sub-buttons .phone {
        bottom: 75px;
        right: 10px;
    }

    .sub-button {
        width: 32px;
        height: 32px;
    }

    #paginationControls {
        justify-content: center;
    }

    /* ---------- особенности ---------- */
    .qualities_cards {
        grid-template-columns: 1fr;
    }

}


.field-error {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5 !important;
}

.custom-select-wrapper.field-error .calculator-form-group-custom-select {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5 !important;
}

.error-message {
    color: #dc3545;
    font-size: 14px;
    margin: 15px 0;
    padding: 15px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    display: none;
}

.error-message ul {
    margin: 10px 0 0 20px;
    padding: 0;
}

.error-message li {
    margin: 5px 0;
}

.validation-error {
    display: block !important;
}