/* ========== SMOOTH SCROLL ========== */
    html {
      scroll-behavior: smooth;
    }

    .smooth-scroll {
      scroll-behavior: smooth;
    }

    /* ========== SNOWFLAKES ANIMATION ========== */
    .snowflakes {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
      pointer-events: none;
    }

    .snowflake {
      position: absolute;
      top: -10%;
      color: rgba(255, 255, 255, 0.8);
      font-size: 1.5em;
      animation: snowfall linear infinite;
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }

    @keyframes snowfall {
      0% {
        top: -10%;
        transform: translateX(0) rotate(0deg);
      }
      100% {
        top: 110%;
        transform: translateX(100px) rotate(360deg);
      }
    }

    .snowflake:nth-child(1) { left: 10%; animation-duration: 10s; animation-delay: 0s; }
    .snowflake:nth-child(2) { left: 20%; animation-duration: 12s; animation-delay: 1s; }
    .snowflake:nth-child(3) { left: 30%; animation-duration: 9s; animation-delay: 2s; }
    .snowflake:nth-child(4) { left: 40%; animation-duration: 11s; animation-delay: 0.5s; }
    .snowflake:nth-child(5) { left: 50%; animation-duration: 13s; animation-delay: 1.5s; }
    .snowflake:nth-child(6) { left: 60%; animation-duration: 10s; animation-delay: 2.5s; }
    .snowflake:nth-child(7) { left: 70%; animation-duration: 12s; animation-delay: 0s; }
    .snowflake:nth-child(8) { left: 80%; animation-duration: 11s; animation-delay: 3s; }
    .snowflake:nth-child(9) { left: 90%; animation-duration: 9s; animation-delay: 1s; }
    .snowflake:nth-child(10) { left: 15%; animation-duration: 14s; animation-delay: 2s; }
    .snowflake:nth-child(11) { left: 65%; animation-duration: 10s; animation-delay: 0s; }
    .snowflake:nth-child(12) { left: 85%; animation-duration: 13s; animation-delay: 1.5s; }

    /* ========== SPARKLES EFFECT ========== */
    .sparkles-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .sparkle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: white;
      border-radius: 50%;
      box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
      animation: sparkle 3s ease-in-out infinite;
    }

    @keyframes sparkle {
      0%, 100% {
        opacity: 0;
        transform: scale(0);
      }
      50% {
        opacity: 1;
        transform: scale(1);
      }
    }

    .sparkle:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
    .sparkle:nth-child(2) { top: 40%; left: 85%; animation-delay: 1s; }
    .sparkle:nth-child(3) { top: 60%; left: 25%; animation-delay: 2s; }
    .sparkle:nth-child(4) { top: 80%; left: 75%; animation-delay: 0.5s; }
    .sparkle:nth-child(5) { top: 30%; left: 50%; animation-delay: 1.5s; }

    /* ========== FLOATING ICONS ANIMATIONS ========== */
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
        filter: brightness(1);
      }
      50% {
        transform: scale(1.1);
        filter: brightness(1.3);
      }
    }

    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    @keyframes flicker {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

    /* ========== ANIMATED GRADIENT OVERLAY ========== */
    .animated-gradient-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0) 100%);
      background-size: 200% 200%;
      animation: gradientShift 5s ease infinite;
      z-index: 1;
      pointer-events: none;
    }

    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* ========== ANIMATED PATTERN ========== */
    .animated-pattern {
      animation: patternMove 20s linear infinite;
    }

    @keyframes patternMove {
      0% { transform: translate(0, 0); }
      100% { transform: translate(60px, 60px); }
    }

    /* ========== WINTER BANNER EFFECTS ========== */
    .winter-camping-banner {
      position: relative;
      overflow: hidden;
    }

    .winter-camping-banner::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
      animation: shimmer 8s infinite linear;
      z-index: 1;
    }

    @keyframes shimmer {
      0% { transform: translate(-25%, -25%) rotate(0deg); }
      100% { transform: translate(-25%, -25%) rotate(360deg); }
    }

    /* ========== WINTER TITLE TEXT EFFECTS ========== */
    .winter-title {
      animation: titleGlow 3s ease-in-out infinite;
    }

    @keyframes titleGlow {
      0%, 100% {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 20px rgba(255,255,255,0.2);
      }
      50% {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3), 0 0 30px rgba(255,255,255,0.4);
      }
    }

    /* ========== CTA BUTTON EFFECTS ========== */
    .winter-cta-btn {
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .winter-cta-btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }

    .winter-cta-btn:hover::before {
      width: 300px;
      height: 300px;
    }

    .winter-cta-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    /* ========== PRODUCT CARDS EFFECTS ========== */
    .winter-product-card {
      position: relative;
      overflow: hidden;
    }

    .winter-product-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 8px 25px rgba(39, 168, 225, 0.05) !important;
      border-color: #27A8E1 !important;
    }

    /* Frost Overlay Effect */
    .frost-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0) 100%);
      transform: translateX(-100%);
      transition: transform 0.6s ease;
      pointer-events: none;
      z-index: 10;
    }

    .winter-product-card:hover .frost-overlay {
      transform: translateX(100%);
    }

    /* ========== SEASONAL CAROUSEL STYLES ========== */
    .seasonal-products-carousel {
      padding: 0 50px;
      margin: 0 -50px;
    }

    .seasonal-swiper-next,
    .seasonal-swiper-prev {
      width: 45px;
      height: 45px;
      background: #27A8E1;
      border-radius: 50%;
      color: white !important;
      transition: all 0.3s ease;
      box-shadow: 0 4px 10px rgba(39, 168, 225, 0.3);
    }

    .seasonal-swiper-next:hover,
    .seasonal-swiper-prev:hover {
      background: #1B8AB8;
      transform: scale(1.1);
      box-shadow: 0 6px 15px rgba(39, 168, 225, 0.4);
    }

    .seasonal-swiper-next::after,
    .seasonal-swiper-prev::after {
      font-size: 18px;
      font-weight: bold;
    }

    .seasonal-swiper-pagination {
      bottom: -35px !important;
    }

    .seasonal-swiper-pagination .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      background: #27A8E1;
      opacity: 0.5;
      transition: all 0.3s ease;
    }

    .seasonal-swiper-pagination .swiper-pagination-bullet-active {
      opacity: 1;
      background: #1B8AB8;
      width: 25px;
      border-radius: 5px;
    }

    @media (max-width: 768px) {
      .seasonal-products-carousel {
        padding: 0 35px;
        margin: 0 -35px;
      }

      .seasonal-swiper-next,
      .seasonal-swiper-prev {
        width: 35px;
        height: 35px;
      }

      .seasonal-swiper-next::after,
      .seasonal-swiper-prev::after {
        font-size: 14px;
      }
    }

    /* ========== FADE IN ELEMENTS ========== */
    .fade-in-element {
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ========== SHINE EFFECT ========== */
    .shine-effect {
      position: relative;
      overflow: hidden;
    }

    .shine-effect::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
      );
      transform: translateX(-100%) translateY(-100%);
      transition: transform 0.6s;
    }

    .shine-effect:hover::after {
      transform: translateX(100%) translateY(100%);
    }

    /* ========== PARALLAX IMAGE ========== */
    .parallax-image {
      transition: transform 0.5s ease-out;
    }

    .winter-camping-banner:hover .parallax-image {
      transform: translateX(20px) scale(1.1);
    }

    /* ========== RESPONSIVE DESIGN ========== */
    @media (max-width: 768px) {
      .floating-icon {
        font-size: 24px !important;
      }
      .winter-camping-banner {
        min-height: 220px !important;
      }
      .winter-camping-banner h2 {
        font-size: 1.8rem !important;
      }
      .winter-camping-banner p {
        font-size: 0.9rem !important;
      }
      .snowflake {
        font-size: 1em;
      }
      /* Reduce animations on mobile for performance */
      .animated-gradient-overlay,
      .animated-pattern {
        animation: none;
      }
    }

    /* ========== ACCESSIBILITY ========== */
    @media (prefers-reduced-motion: reduce) {
      .snowflake,
      .sparkle,
      .floating-icon,
      .animated-gradient-overlay,
      .animated-pattern,
      .winter-title,
      .fade-in-element {
        animation: none !important;
      }
    }