/* ============================================
   ОБЛАКА — Великаны Дагестана
   Белые пышные облака через div-элементы
   ============================================ */
/* Скрыть фоновое фото на первой секции */
.hero-bg-image {
    display: none !important;
}
/* Обёртка — фиксированная, на весь экран */
.clouds-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    overflow: hidden !important;
}
/* Анимация движения */
@keyframes cloudDrift {
    0%   { transform: translateX(-900px); }
    100% { transform: translateX(110vw); }
}
/* Базовое облако */
.cloud {
    position: absolute !important;
    pointer-events: none !important;
    animation: cloudDrift linear infinite !important;
    filter: none !important;
    -webkit-filter: none !important;
}
/* Части облака — белые круги */
.cloud .cp {
    position: absolute !important;
    background: rgba(255, 255, 255, 0.21) !important;
    border-radius: 50% !important;
    display: block !important;
}

/* ============ ОБЛАКО 1 — большое ============ */
.cloud-1 {
    top: 5% !important;
    animation-duration: 80s !important;
    animation-delay: -15s !important;
}
.cloud-1 .cp1 { width: 200px !important; height: 70px !important; top: 50px !important; left: 0 !important; border-radius: 35px !important; }
.cloud-1 .cp2 { width: 110px !important; height: 110px !important; top: 0 !important; left: 30px !important; }
.cloud-1 .cp3 { width: 90px !important;  height: 90px !important;  top: 8px !important; left: 95px !important; }
.cloud-1 .cp4 { width: 65px !important;  height: 65px !important;  top: 20px !important; left: 160px !important; }

/* ============ ОБЛАКО 2 — среднее ============ */
.cloud-2 {
    top: 18% !important;
    animation-duration: 60s !important;
    animation-delay: -30s !important;
}
.cloud-2 .cp1 { width: 160px !important; height: 55px !important; top: 40px !important; left: 0 !important; border-radius: 28px !important; }
.cloud-2 .cp2 { width: 85px !important;  height: 85px !important;  top: 0 !important; left: 20px !important; }
.cloud-2 .cp3 { width: 70px !important;  height: 70px !important;  top: 6px !important; left: 75px !important; }
.cloud-2 .cp4 { width: 52px !important;  height: 52px !important;  top: 15px !important; left: 130px !important; }

/* ============ ОБЛАКО 3 — маленькое ============ */
.cloud-3 {
    top: 32% !important;
    animation-duration: 50s !important;
    animation-delay: -5s !important;
}
.cloud-3 .cp1 { width: 120px !important; height: 42px !important; top: 30px !important; left: 0 !important; border-radius: 21px !important; }
.cloud-3 .cp2 { width: 65px !important;  height: 65px !important;  top: 0 !important; left: 15px !important; }
.cloud-3 .cp3 { width: 52px !important;  height: 52px !important;  top: 6px !important; left: 58px !important; }

/* ============ ОБЛАКО 4 — очень большое ============ */
.cloud-4 {
    top: 45% !important;
    animation-duration: 95s !important;
    animation-delay: -40s !important;
}
.cloud-4 .cp1 { width: 270px !important; height: 90px !important; top: 60px !important; left: 0 !important; border-radius: 45px !important; }
.cloud-4 .cp2 { width: 140px !important; height: 140px !important; top: 0 !important; left: 40px !important; }
.cloud-4 .cp3 { width: 115px !important; height: 115px !important; top: 12px !important; left: 125px !important; }
.cloud-4 .cp4 { width: 90px !important;  height: 90px !important;  top: 25px !important; left: 210px !important; }
.cloud-4 .cp5 { width: 68px !important;  height: 68px !important;  top: 38px !important; left: 270px !important; }

/* ============ ОБЛАКО 5 — среднее ============ */
.cloud-5 {
    top: 58% !important;
    animation-duration: 70s !important;
    animation-delay: -20s !important;
}
.cloud-5 .cp1 { width: 175px !important; height: 60px !important; top: 42px !important; left: 0 !important; border-radius: 30px !important; }
.cloud-5 .cp2 { width: 92px !important;  height: 92px !important;  top: 0 !important; left: 25px !important; }
.cloud-5 .cp3 { width: 76px !important;  height: 76px !important;  top: 7px !important; left: 85px !important; }
.cloud-5 .cp4 { width: 58px !important;  height: 58px !important;  top: 18px !important; left: 148px !important; }

/* ============ ОБЛАКО 6 — большое ============ */
.cloud-6 {
    top: 70% !important;
    animation-duration: 85s !important;
    animation-delay: -55s !important;
}
.cloud-6 .cp1 { width: 215px !important; height: 72px !important; top: 48px !important; left: 0 !important; border-radius: 36px !important; }
.cloud-6 .cp2 { width: 112px !important; height: 112px !important; top: 0 !important; left: 35px !important; }
.cloud-6 .cp3 { width: 92px !important;  height: 92px !important;  top: 10px !important; left: 112px !important; }
.cloud-6 .cp4 { width: 70px !important;  height: 70px !important;  top: 22px !important; left: 182px !important; }

/* ============ ОБЛАКО 7 — маленькое ============ */
.cloud-7 {
    top: 80% !important;
    animation-duration: 55s !important;
    animation-delay: -35s !important;
}
.cloud-7 .cp1 { width: 130px !important; height: 45px !important; top: 32px !important; left: 0 !important; border-radius: 22px !important; }
.cloud-7 .cp2 { width: 68px !important;  height: 68px !important;  top: 0 !important; left: 18px !important; }
.cloud-7 .cp3 { width: 55px !important;  height: 55px !important;  top: 6px !important; left: 62px !important; }

/* ============ ОБЛАКО 8 — среднее ============ */
.cloud-8 {
    top: 90% !important;
    animation-duration: 65s !important;
    animation-delay: -45s !important;
}
.cloud-8 .cp1 { width: 168px !important; height: 58px !important; top: 38px !important; left: 0 !important; border-radius: 29px !important; }
.cloud-8 .cp2 { width: 88px !important;  height: 88px !important;  top: 0 !important; left: 22px !important; }
.cloud-8 .cp3 { width: 72px !important;  height: 72px !important;  top: 7px !important; left: 80px !important; }
.cloud-8 .cp4 { width: 55px !important;  height: 55px !important;  top: 16px !important; left: 140px !important; }

/* Навбар и прелоадер поверх облаков */
.navbar,
#navbar,
.preloader {
    z-index: 1000 !important;
}