.circle-container {
            position: absolute;
            bottom: -20%;
            right: -20%;
            width: 140%;
            height: 140%;
            clip-path: circle(50% at 80% 80%);
            overflow: visible;
        }

        .circle-outline {
            position: absolute;
            bottom: -20%;
            right: -20%;
            width: 140%;
            height: 140%;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            clip-path: circle(50% at 80% 80%);
            pointer-events: none;
        }


        /* Анимации */
        @keyframes slideInText {
            0% {
                opacity: 0;
                transform: translateX(100px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes scaleInEntity {
            0% {
                opacity: 0;
                transform: scale(1.2);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }


        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-10px) rotate(2deg);
            }
        }

        extrim-container {
            display: block;
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            position: relative;
            height: 600px;
            overflow: hidden;
        }
        extrim-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%; /* 1/10 контейнера */
    background: linear-gradient(to right,
        rgba(255, 0, 0, 0.409),
        rgba(0, 0, 255, 0.55), 
        rgba(243, 243, 243, 0.251));
    mask: linear-gradient(to top,
        black 0%,
        transparent 100%);
    -webkit-mask: linear-gradient(to top,
        black 0%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

        extrim-background {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        extrim-content {
            display: flex;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            justify-content: center;
            align-items: flex-end;
            padding: 40px 20px;
            box-sizing: border-box;
        }

        .extrim-title {
            display: block;
            color: white;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            font-family: Arial, sans-serif;
            font-size: 2.5rem;
            line-height: 1.2;
            margin: 0;
            padding-top: 8px;
        }
        .frishka{
           font-size: 1.5rem; 
        }
        .extr-titl {
            display: block;
            color: white;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            font-family: Arial, sans-serif;
            font-size: 1.5rem;
            line-height: 1.2;
            margin: 0;
            padding-top: 40px;
        }

        /* Мобильная версия */
        @media (max-width: 768px) {
            extrim-container {
                max-width: 100%;
                height: 400px;
            }

            extrim-title {
                font-size: 1.8rem;
            }

            extrim-content {
                padding: 20px 15px;
            }
        }

        @media (max-width: 480px) {
            extrim-container {
                height: 300px;
            }

            extrim-title {
                font-size: 1.4rem;
            }

            extrim-content {
                padding: 15px 10px;
            }
        }

            .circle-container {
                clip-path: circle(45% at 80% 80%);
            }
            
            .circle-outline {
                clip-path: circle(45% at 80% 80%);
            }
       

        @media (max-width: 480px) {    
            .circle-container {
                clip-path: circle(40% at 85% 85%);
            }
            
            .circle-outline {
                clip-path: circle(40% at 85% 85%);
            }

        }

        @supports not (clip-path: circle(50% at 50% 50%)) {
            .circle-container {
                overflow: hidden;
                border-radius: 50%;
                width: 100%;
                height: 100%;
                bottom: 0;
                right: 0;
            }
            
            .snowboarder-image {
                bottom: -30%;
                right: -30%;
                transform: scale(1.3);
            }
        }


        .season-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 15px;
            font-family: Arial, sans-serif;
        }

        .season-scale {
            display: flex;
            height: 10px;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .season-period {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            font-size: 12px;
            font-weight: bold;
            color: #333;
            text-align: center;
            padding: 0 5px;
            transition: all 0.3s ease;
        }

        .season-period:hover {
            transform: scale(1.05);
            z-index: 2;
        }

        .low-season { background-color: #4CAF50; } 
        .high-season { background-color: #FFEB3B; } 
        .peak-season { background-color: #FF9800; } 

        .dates-container {
            display: flex;
            margin-top: 10px;
        }

        .date-range {
            flex: 1;
            text-align: center;
            font-size: 11px;
            color: #f0f0f2;
            padding: 5px;
        }
        @media (max-width: 768px) {


            .season-period {
                height: 10px;
                font-size: 8px;               
            }
            
        .date-range {
            font-size: 8px;
        }
        }

        @media (max-width: 480px) {


            .season-period {
                font-size: 6px;
            }

  
        }