html{
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-color: #333333;
}
body{
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
}
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("img/back.png");
    background-size: cover;
    background-position: top;
    opacity: 0.5;
}
body { position: relative; } /* на всякий случай для корректной иерархии */
body::before{
    pointer-events: none;   /* ✨ ключевая строка — не перехватывать клики */
    z-index: -1;            /* уходит под контент */
}



.fade-in-on-load {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.fade-in-on-load.animate {
    opacity: 1;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-up.show {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-left.show {
    opacity: 1;
    transform: translateX(0);
}

.hero {
    background-image: url('img/main.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
}

.experience-section {
    background-image: url('img/second.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.btn {
    padding: 1rem 3rem;
    font-weight: 500;
    color: white;
    background: linear-gradient(135deg, #c48a3a, #d2ac79);
    border: none;
    border-radius: 9999px; /* full pill shape */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.highlight {
    background: linear-gradient(135deg, #d49537, #fcc881, #d28422);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* for Firefox */
    color: transparent;
    letter-spacing: -1px; /* уменьшает расстояние между буквами */
}


/* Optional: hover effects */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}


.swiper {
    position: relative; /* важно */
    overflow: visible !important;
}

/* Стрелки — вылезают за .swiper, но не за body */
.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
}

/* Смещаем стрелки */
.swiper-button-prev {
    left: -50px; /* или -40px, если нужно дальше */
}
.swiper-button-next {
    right: -50px;
}

/* Стиль иконок */
.swiper-button-next::after,
.swiper-button-prev::after {
    color: white;
    font-size: 20px;
}


/* 🌐 Общие настройки */
* {
    box-sizing: border-box;
}

/* ✅ Контейнер поля телефона */
.iti {
    width: 100%;
}

/* 📱 Список стран */
.iti__country-list {
    color: #333;
    max-height: 250px;
}

/* 🔘 Страна (одна строка) */
.iti__country {
    padding: 10px 16px;
    transition: background 0.2s ease;
    cursor: pointer;
}

/* ☎ Код страны */
.iti__dial-code {
    margin-left: 8px;
    color: #6b7280;
    font-weight: 400;
}





.collapsible {
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    max-height: 0;
    opacity: 0;
}
.collapsible.open {
    max-height: 1000px;
    opacity: 1;
}

.lang-option {
    color: #ffffff; /* gray-300 */
    transition: color 0.2s ease;
}

.lang-option:hover {
    text-decoration: underline;
}

.active-lang {
    background: linear-gradient(135deg, #d49537, #fcc881, #d28422);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* for Firefox */
    color: transparent;
    font-weight: bold;
}




@media (max-width: 768px) {
    .hero {
        background-image: url('img/mob-1.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .experience-section {
        background-image: url('img/mob-2.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

}