* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Righteous', sans-serif;
       background: #0a0e27;
       color: #CDD1DF;
   }

   main {
       width: 100%;
       min-height: 100vh;
   }

   .container {
       margin: 0 auto;
       padding: 60px 40px;
   }

   .section.buffer {
       background: #1a1f3a;
       padding: 60px 0;
   }

   .main-title {
       font-size: 48px;
       text-align: center;
       margin-bottom: 20px;
       font-weight: bold;
       letter-spacing: 3px;
       color: #F03FA5;
       text-transform: uppercase;
   }

   .sub-title {
       font-size: 24px;
       text-align: center;
       color: #9152F6;
       font-weight: normal;
       margin-bottom: 40px;
   }

   .no-margin-top {
       margin-top: 0;
   }

   /* Slideshow Styles */
   .slideshow-wrapper {
       width: 100%;
       background: #141829;
       padding: 40px;
       border-radius: 8px;
       box-shadow: 0 0 20px rgba(240, 63, 165, 0.2);
   }

   .slide {
       display: none;
       width: 100%;
       text-align: center;
   }

   .slide.active {
       display: block;
       animation: fadeIn 0.5s ease-in;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   .slide img {
       width: 100%;
       height: auto;
       object-fit: contain;
       border-radius: 4px;
   }

   .progress-bar {
       width: 100%;
       height: 3px;
       background: #2a2f4a;
       margin-bottom: 30px;
       border-radius: 2px;
   }

   .progress-fill {
       height: 100%;
       background: linear-gradient(90deg, #F03FA5, #9152F6);
       transition: width 0.3s ease;
       border-radius: 2px;
   }

   .controls {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 30px 0 0 0;
       gap: 20px;
   }

   button {
       background: #4689A7;
       color: white;
       border: 2px solid #9152F6;
       padding: 12px 28px;
       border-radius: 4px;
       cursor: pointer;
       font-size: 15px;
       font-family: 'Righteous', sans-serif;
       font-weight: bold;
       transition: background 0.3s ease, box-shadow 0.3s ease;
   }

   button:hover {
       background: #9152F6;
       box-shadow: 0 0 15px rgba(145, 82, 246, 0.6);
   }

   button:active {
       transform: scale(0.98);
   }

   .counter {
       font-size: 16px;
       color: #4689A7;
       min-width: 80px;
       text-align: center;
       font-family: 'Righteous', sans-serif;
   }

   @media (max-width: 768px) {
       .container {
           padding: 40px 20px;
       }

       .main-title {
           font-size: 36px;
       }

       .sub-title {
           font-size: 18px;
       }

       .slideshow-wrapper {
           padding: 30px 20px;
       }

       .controls {
           flex-direction: column;
           gap: 15px;
       }

       button {
           width: 100%;
       }
   }