body {
               margin: 0;
               padding: 0;
               font-family: 'Segoe UI', sans-serif;
           }

           .hero-section {
               background: linear-gradient(135deg, #ff0033 0%, #ff3366 100%);
               color: white;
               padding: 60px 0;
               position: relative;
               overflow: hidden;
           }

           .hero-title {
               font-size: 2rem;
               font-weight: 600;
           }

           .hero-subtitle {
               font-size: 3rem;
               font-weight: 800;
               line-height: 1.2;
           }

           .hero-subtitle span {
               color: white;
           }

           .btn-slingo {
               background-color: #ffc800;
               color: black;
               font-weight: 700;
               font-size: 1.2rem;
               padding: 12px 24px;
               border: none;
               border-radius: 30px;
               box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
               transition: all 0.2s ease-in-out;
           }

           .btn-slingo:hover {
               background-color: #ffdf32;
           }

           .small-note {
               font-size: 0.75rem;
               color: rgba(255, 255, 255, 0.7);
               margin-top: 20px;
           }

           .hero-image {
               max-height: 440px;
               border-radius: 50%;
               box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
           }

           @media (max-width: 768px) {
               .hero-subtitle {
                   font-size: 2rem;
               }
           }

           body {
               margin: 0;
               font-family: 'Segoe UI', sans-serif;
           }

           .custom-header {
               background-color: #f2f2f2;
               height: 70px;
               border-bottom: 2px solid #e5e5e5;
               z-index: 1030;
           }

           .logo {
               font-weight: bold;
               font-size: 28px;
               color: #f53e64;
           }

           .btn-outline-danger {
               border: 2px solid #f53e64 !important;
               color: #f53e64 !important;
               font-weight: 700;
           }

           .btn-outline-danger:hover {
               background-color: #f53e64 !important;
               color: white !important;
           }

           .btn-danger {
               background-color: #f53e64 !important;
               font-weight: 700;
               border: none;
           }

           .search-box {
               border: 2px solid #00bcd4;
               border-radius: 999px;
               overflow: hidden;
           }

           .search-box input {
               border: none;
               font-size: 0.9rem;
           }

           .search-box input:focus {
               box-shadow: none;
           }

           .search-icon {
               background-color: white;
               border: none;
           }

           .gift-icon {
               position: relative;
               margin-right: 10px;
           }

           .gift-badge {
               position: absolute;
               top: -5px;
               right: -5px;
               font-size: 10px;
           }

           .bg-custom-nav {
               background-color: #00b7c5;
           }

           .bg-payment {
               background-color: #9e93af;
           }



           .promo-banner {
               min-height: auto;
               position: relative;
           }

           @media (max-width: 768px) {
               .promo-note p {
                   font-size: 0.68rem;
                   line-height: 1.2;
               }
           }

           .promo-section {
               position: relative;
               overflow: hidden;
           }

           .promo-overlay {
               position: absolute;
               bottom: 0;
               left: 0;
               right: 0;
               background: rgba(0, 0, 0, 0.75);
               font-size: 0.75rem;
           }

           /* Мобільна адаптація */
           @media (max-width: 576px) {
               .promo-overlay {
                   font-size: 0.68rem;
                   line-height: 1.2;
                   padding: 10px 12px;
               }
           }

           .bg-yellow-tab {
               background-color: #f4b400 !important;
               border: none !important;
               border-radius: 0;
           }

           .nav-tabs .nav-link.active {
               background-color: #f4b400 !important;
               color: #000 !important;
               border: none !important;
           }

           .nav-tabs .nav-link {
               border: none;
               border-radius: 0;
           }

           .modal-content {
               border: none;
           }