/* ======================================================================
   IMPORTS
   ====================================================================== */
   @import url("reset.css");
   @import url("variables.css");
   @import url("fonts.css");
   
   /* ======================================================================
      BASE STYLES
      ====================================================================== */
   
   /* HTML5 display definitions */
   header,
   nav,
   section,
   article,
   aside,
   footer {
       display: block;
   }
   
   /* Universal box-sizing */
   * {
       box-sizing: border-box;
   }
   
   /* Body and base typography */
   body {
       font: normal var(--font-size-sm)/var(--line-height-xs) 'Font-Base', Arial, Helvetica, sans-serif;
       color: var(--color-p);
       -webkit-text-size-adjust: none;
       background: var(--color-bg-body);
   }
   
   body.scroll {
       overflow-y: hidden;
   }
   
   body p {
       color: var(--color-p);
       
   }
   
   /* Links */
   a {
       color: var(--color-accent-2);
       text-decoration: none;
       outline: none;
   }
   
   a:focus,
   a:hover {
       outline: none;
       text-decoration: none;
   }
   
   /* Images */
   img {
       max-width: 100%;
       vertical-align: middle;
       outline: none;
   }
   
   /* ======================================================================
      LAYOUT COMPONENTS
      ====================================================================== */
   
   /* Container */
   .container {
       max-width: 1920px;
       width: 100%;
       padding: 0 var(--container-padding);
       margin: 0 auto;
       position: relative;
   }
   
   /* Main wrapper */
   .main {
       min-height: 100%;
       margin: 0 auto;
       width: 100%;
       position: relative;
   }
   
   /* ======================================================================
      UTILITY CLASSES
      ====================================================================== */
   
   .flex {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .hidden,
   input[type="text"].hidden {
       display: none !important;
   }
   
   .cnt {
       text-align: center;
   }
   
   .clear {
       clear: both;
   }
   
   /* ======================================================================
      TYPOGRAPHY
      ====================================================================== */
   
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       color: var(--color-white);
   }
   
   h1 {
       font: bold var(--font-size-3xl)/var(--line-height-xl) Font-Secondary, Arial, Helvetica, sans-serif;
       text-transform: uppercase;
       margin-bottom: var(--spacing-lg);
       letter-spacing: -0.02em;
   }
   
   h2 {
       font: bold var(--font-size-2xl)/var(--line-height-xl) Font-Secondary, Arial, Helvetica, sans-serif;
       text-transform: uppercase;
       margin-bottom: 25px;
       letter-spacing: -0.02em;
   }
   
   h3 {
       font: bold var(--font-size-xl)/var(--line-height-lg) Font-Secondary, Arial, Helvetica, sans-serif;
       text-transform: uppercase;
       margin-bottom: var(--spacing-md);
       letter-spacing: -0.02em;
   }
   
   h4 {
       font: bold var(--font-size-xl)/var(--line-height-lg) Font-Secondary, Arial, Helvetica, sans-serif;
       text-transform: uppercase;
       margin-bottom: var(--spacing-md);
       letter-spacing: -0.02em;
   }
   
   .p_big {
       font: normal var(--font-size-sm)/var(--line-height-xs) Font-Base, sans-serif;
   }
   
   section {
       padding: var(--spacing-xl) 0;
   }
   
   
   /* ======================================================================
      HEADER
      ====================================================================== */
   
   .header {
       background: var(--color-bg-header-footer);
       color: var(--color-white);
       position: fixed;
       z-index: var(--z-header);
       top: 0;
       left: 0;
       right: 0;
   }
   
   .header .container {
       padding: 0 var(--container-padding-mobile);
   }
   
   .header_top {
       height: var(--header-height-desktop);
   }
   
   .logo {
       max-width: 160px;
       height: auto;
   }
   
   /* ======================================================================
      NAVIGATION
      ====================================================================== */
   
   .nav {
       z-index: var(--z-nav);
       padding:0 30px;
   }
   
   .nav ul li {
       padding: 0 0 0 var(--spacing-lg);
       position: relative;
   }
   
   .nav ul li:first-child {
       padding: 0;
   }
   
   .nav ul li a {
       position: relative;
       display: block;
       color: var(--color-nav-menu-text);
       font: 700 var(--font-size-sm)/var(--line-height-xs) 'Font-Base', Arial, Helvetica, sans-serif;
       transition: var(--transition-fast);
       white-space: nowrap;
       opacity: 0.5;
       text-transform: uppercase;
       letter-spacing: 0.04em;
   }
   
   .nav ul.flex {
       row-gap: var(--spacing-sm);
       column-gap: var(--spacing-lg);
   
   }
   
   .nav ul.flex li {
       padding: 0;
   }
   
   .nav ul li.active a,
   .nav ul li:hover a {
       opacity: 1;
   }
   
   /* Mobile navigation toggle */
   .nav_open {
       cursor: pointer;
       transition: var(--transition-normal);
       z-index: var(--z-header);
       text-transform: uppercase;
       display: none;
       border: none;
       background: none;
   }
   
   .nav_open span {
       background: var(--color-white);
       height: 2px;
       width: 16px;
       margin-top: 3px;
       display: block;
       transition: var(--transition-fast);
   }
   
   .nav_open span:first-child {
       margin-top: 0;
   }
   
   .nav_open.active span {
       transform: rotate(45deg);
       margin-top: 0;
   }
   
   .nav_open.active span + span {
       transform: rotate(0deg);
       margin-top: 0;
       visibility: hidden;
   }
   
   .nav_open.active span + span + span {
       transform: rotate(-45deg);
       margin-top: -4px;
       visibility: visible;
   }
   
   /* ======================================================================
      BUTTONS
      ====================================================================== */
   
   .btn {
       height: auto;
       width: 100%;
       display: block;
       transition: var(--transition-fast);
       cursor: pointer;
       border-radius: var(--radius-xl);
       font: 700 var(--font-size-xl)/var(--line-height-relative) Font-Secondary, Arial, Helvetica, sans-serif;
       padding: var(--spacing-md) 0;
       text-align: center;
       color: var(--color-button-text);
       background: var(--green-gradient);
       text-transform: uppercase;
       position: relative;
       letter-spacing: -0.04em;
   }
   
   .btn_fixed {
       --fixed-btn-width: 222px;
       --fixed-btn-padding-y: var(--spacing-xs);
       --fixed-btn-font-size: var(--font-size-xl);
   
       width: var(--fixed-btn-width);
       padding: var(--fixed-btn-padding-y) 0;
       font-size: var(--fixed-btn-font-size);
       line-height: var(--line-height-relative);
   
       
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
       bottom: var(--spacing-md);
       
   }
   
   .header .btn {
       padding: var(--spacing-xs) 0;
       width: 222px;
   }
   
   .btn:hover {
       background: var(--green-gradient-hover);
   }
   
   /* Animated button variants */
   .btn.btn_1::before {
       content: '';
       background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
       position: absolute;
       top: -2px;
       left: -2px;
       background-size: 400%;
       z-index: -1;
       filter: blur(5px);
       width: calc(100% + 4px);
       height: calc(100% + 4px);
       animation: glowing 20s linear infinite;
       opacity: 1;
       transition: opacity 0.3s ease-in-out;
       border-radius: var(--radius-xl);
   }
   
   .btn.btn_1:active {
       color: var(--color-dark);
       background: transparent;
   }
   
   @keyframes glowing {
       0% { background-position: 0 0; }
       50% { background-position: 400% 0; }
       100% { background-position: 0 0; }
   }
   
   .btn_2 {
       border: none;
       transition: var(--transition-normal);
       overflow: hidden;
       background: transparent;
   }
   
   .btn_2 span {
       display: block;
       z-index: 5;
       position: relative;
   }
   
   .btn_2::after {
       position: absolute;
       content: " ";
       z-index: 1;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: var(--gradien-button);
       transition: var(--transition-normal);
   }
   
   .btn_2:hover {
       background: transparent;
       box-shadow: 
           4px 4px 6px 0 rgba(255, 255, 255, 0.5),
           -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
           inset -4px -4px 6px 0 rgba(255, 255, 255, 0.5),
           inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
       color: var(--color-white);
   }
   
   .btn_2:hover::after {
       transform: scale(2) rotate(180deg);
       box-shadow: 
           4px 4px 6px 0 rgba(255, 255, 255, 0.5),
           -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
           inset -4px -4px 6px 0 rgba(255, 255, 255, 0.5),
           inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
   }
   
   .btn_2::before {
       position: absolute;
       content: '';
       display: inline-block;
       top: -180px;
       left: 0;
       z-index: 3;
       width: var(--spacing-lg);
       height: 100%;
       background-color: var(--color-white);
       animation: shiny-btn1 3s ease-in-out infinite;
   }
   
   /* ======================================================================
      IMAGE LINKS & ANIMATIONS
      ====================================================================== */
      .pic_page{
       margin-bottom: 30px;
      }
   
   .link_pic {
       display: block;
       position: relative;
       overflow: hidden;
   }
   
   .link_pic::before,
   .btn_2::before {
       position: absolute;
       content: '';
       display: inline-block;
       top: -180px;
       left: 0;
       z-index: 3;
       width: var(--spacing-lg);
       height: 100%;
       background-color: var(--color-white);
       animation: shiny-btn1 3s ease-in-out infinite;
   }
   
   @keyframes shiny-btn1 {
       0% {
           transform: scale(0) rotate(45deg);
           opacity: 0;
       }
       80% {
           transform: scale(0) rotate(45deg);
           opacity: 0.5;
       }
       81% {
           transform: scale(4) rotate(45deg);
           opacity: 1;
       }
       100% {
           transform: scale(50) rotate(45deg);
           opacity: 0;
       }
   }
   
   .slider_item .link_pic {
       border-radius: var(--radius-md);
       transition: transform var(--transition-normal);
   }
   
   .slider_item .link_pic:hover {
       transform: scale(1.05);
   }
   
   .slider_item .link_pic img {
       width: 100%;
       height: auto;
       display: block;
       transition: filter var(--transition-normal);
   }
   
   .slider_item .link_pic:hover img {
       filter: brightness(1.1);
   }
   
   /* ======================================================================
      LAYOUT BLOCKS
      ====================================================================== */
   
   .div_block {
       margin: var(--header-height-desktop) auto 0;
       align-items: flex-start;
       max-width: 1920px;
       width: 100%;
   }
   
   .div_aside {
       width: var(--aside-width);
       position: relative;
   }
   
   .div_article {
       width: calc(100% - var(--aside-width));
   }
   
   /* ======================================================================
      SIDEBAR
      ====================================================================== */
   
   .aside_fixed {
       position: fixed;
       top: var(--header-height-desktop);
       width: var(--aside-width);
       left: 50%;
       margin-left: -960px;
       z-index: var(--z-aside);
       height: calc(100vh - var(--header-height-desktop));
       background-color: var(--color-accent);
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }
   
   .aside_fixed::before {
       position: absolute;
       display: block;
       content: '';
       top: 0;
       bottom: 0;
       background-color: var(--color-accent);
       right: 100%;
       width: 2000px;
   }
   
   .aside_nav {
       display: flex;
       padding: var(--spacing-xl) var(--spacing-md) 0;
   }
   
   .aside_nav .menuItem {
       padding-left: var(--spacing-xs);
       border-left: 2px solid white;
   }
   
   .aside_nav .menuItem.active ~ .menuItem {
       border-color: rgba(255, 255, 255, 0.2);
   }
   
   .aside_nav li a {
       color: var(--color-white);
       font: 700 var(--font-size-xs)/var(--line-height-xs) Font-Base, sans-serif;
       text-transform: uppercase;
       opacity: 0.6;
       padding: 3px 0;
       transition: var(--transition-fast);
       letter-spacing: 0.04em;
       display: inline-block;
   }
   
   .aside_nav li.active a,
   .aside_nav li a:hover {
       opacity: 1;
   }
   
   .aside_scroll {
       height: 100%;
       width: 1px;
       position: relative;
   }
   
   .aside_scroll span {
       display: block;
       opacity: 0.7;
       background: #D9D9D9;
       height: 100%;
   }
   
   .aside_scroll span + span {
       position: absolute;
       width: 1px;
       top: 0;
   }
   
   .aside_scroll span:first-child {
       opacity: 0.1;
   }
   
   .aside_bottom {
       background: var(--color-dark);
       padding: var(--spacing-xs) var(--spacing-md);
       position: relative;
   }
   
   .aside_bottom::before {
       position: absolute;
       display: block;
       content: '';
       top: 0;
       bottom: 0;
       background-color: var(--color-dark);
       right: 100%;
       width: 2000px;
   }
   
   .aside_bottom .btn {
       padding: 0;
       font-size: var(--font-size-md);
   }
   
   /* ======================================================================
      CONTENT SECTIONS
      ====================================================================== */
   
   .section_image {
       padding: 101px 0 91px;
       position: relative;
       overflow: hidden;
       background: var(--color-bg-header-footer) url(../images/bg.avif) no-repeat center top;
       background-size: cover;
       color: var(--color-white);
       width: 100%!important;
   }
   
   .section_pic {
       background: url(../images/pic_1.avif) no-repeat center;
       padding: 170px 0;
       /*margin: 0 var(--spacing-lg);*/
       background-size: cover;
       width: 100%;
   }
   
   .section_double .flex {
       align-items: flex-start;
   }
   
   .section_double .flex > div {
       width: 48%;
   }
   
   .section_double div > h3:not(:first-child) {
       margin-top: var(--spacing-lg);
   }
   
   .section_text ul {
       list-style: disc;
       line-height: var(--spacing-lg);
       margin: 26px 0 26px var(--spacing-md);
   }
   
   /* Limit single-column text blocks to 2/3 width */
   .section_text .container > h2,
   .section_text .container > .p_big,
   .top_title p,
   .section_faq > .container > p,
   .section_faq .faq_open,
   .footer_top > h4,
   .footer_top > p:not(.copy),
   .footer_single > p:not(.copy),
   .single > .container > p
   {
       max-width: 66.67%;
   }
   
   .section_details h3, 
   .section_details h4 {
       margin-top: var(--spacing-xl);
   }
   
   /* ======================================================================
      COMPONENTS - TOP SECTION
      ====================================================================== */
   
   .top_button {
       margin-left: 133px;
       width: 260px;
       text-align: center;
   }
   
   .span_bonus {
       display: block;
       background-color: var(--color-white);
       color: var(--color-accent);
       font: bold var(--font-size-md)/var(--line-height-md) Font-Base, sans-serif;
       border-radius: var(--radius-lg);
       letter-spacing: -0.02em;
       text-transform: uppercase;
       padding-top: 3px;
       margin-bottom: 3px;
   }
   
   .top_button h6 {
       padding: var(--spacing-xs) 0;
       font: bold var(--font-size-lg)/var(--line-height-lg) Font-Base, sans-serif;
       letter-spacing: -0.02em;
       text-transform: uppercase;
       color: var(--color-accent-2);
       text-shadow: 1px var(--color-dark);
       filter: drop-shadow(2px 2px 2px var(--color-dark));
   }
   
   .bg_mobile {
       display: none;
   }
   
   
   /* ======================================================================
      COMPONENTS - FAQ
      ====================================================================== */
   
   .section_faq p {
       margin-bottom: var(--spacing-md);
   }
   
   .faq_item {
       background: color-mix(in srgb, var(--color-accent) 100%, transparent);
       color: var(--color-white);
       margin-bottom: var(--spacing-xs);
       padding: var(--spacing-sm) var(--spacing-md);
       border: 1px solid color-mix(in srgb, var(--color-accent-2) 25%, transparent);
   }
   
   .faq_item:hover {
       background: color-mix(in srgb, var(--color-accent) 70%, transparent);
   }
   
   .faq_item h3 {
       font: bold var(--font-size-lg)/var(--line-height-xs) Font-Secondary, Arial, Helvetica, sans-serif;
       letter-spacing: 0;
       cursor: pointer;
       position: relative;
       margin: 0;
       padding-right: var(--spacing-md);
   }
   
   .faq_item h3::after {
       position: absolute;
       display: block;
       content: '+';
       top: 1px;
       right: 0;
   }
   
   .faq_item h3.active::after {
       content: '-';
   }
   
   .faq_open {
       padding: 25px 0 var(--spacing-xs);
       font: normal var(--font-size-md)/var(--line-height-xs) Font-Base, sans-serif;
       letter-spacing: -0.02em;
       display: none;
   }
   
   /* ======================================================================
      COMPONENTS - PROS/CONS
      ====================================================================== */
   
   .pros_body {
       align-items: flex-start;
   }
   
   .pros_body > div {
       width: calc(50% - var(--spacing-sm));
   }
   
   .pros_body h3 {
       color: var(--color-white);
       font: bold var(--font-size-lg)/var(--line-height-lg) Font-Secondary, Arial, Helvetica, sans-serif;
       text-transform: uppercase;
       background: var(--color-accent);
       padding: var(--spacing-xs) var(--spacing-md);
       margin: 0;
       border: 1px solid color-mix(in srgb, var(--color-accent-2) 25%, transparent);
   }
   
   .pros_body ul li {
       color: var(--color-white);
       margin-top: 1px;
       font: bold var(--font-size-md)/var(--line-height-xs) Font-Base, Arial, Helvetica, sans-serif;
       padding: var(--spacing-sm) var(--spacing-md);
       position: relative;
   }
   
   .div_pros li {
       background: green;
   }
   
   .div_cons li {
       background: red;
   }
   
   /* ======================================================================
      COMPONENTS - SLIDER
      ====================================================================== */
   .slider_item .btn,
   .div_bonus .btn,
   .div_pic .btn {
       margin-top: 12px;
       border-radius: var(--radius-sm);
       padding: var(--spacing-xs) 0;
       font-size: var(--font-size-md);
       line-height: var(--line-height-md);
   }
   
   /* ======================================================================
      COMPONENTS - BONUS SECTIONS
      ====================================================================== */
   
   .div_bonus {
       margin-top: var(--spacing-lg);
       align-items: flex-start;
       gap: var(--spacing-xs);
   }
   
   .div_bonus > div {
       width: 33.3%;
   }
   
   .div_bonus .link_pic {
       position: relative;
       display: block;
       border-radius: var(--radius-sm);
   }
   
   .div_bonus img {
       opacity: 0.5;
       width: 100%;
   }
   
   .div_bonus h6 {
       position: absolute;
       text-align: center;
       left: 0;
       right: 0;
       top: 100px;
       color: var(--color-accent-2);
       font: bold var(--font-size-sm)/var(--line-height-xs) Font-Base, Arial, Helvetica, sans-serif;
       letter-spacing: -0.02em;
       text-shadow: 1px var(--color-dark);
       filter: drop-shadow(2px 2px 2px var(--color-dark));
   }
   
   .div_bonus h6 span {
       color: var(--color-white);
       font-size: var(--font-size-lg);
       display: block;
   }
   
   /* ======================================================================
      COMPONENTS - PICTURE BLOCKS
      ====================================================================== */
   
   .div_pic {
       align-items: flex-start;
   }
   
   .div_pic > div {
       width: 48%;
   }
   
   .pic_block {
       position: relative;
   }
   
   .pic_block img {
       width: 100%;
       border-radius: var(--radius-md);
   }
   
   .div_pic_2 .pic_block {
       order: -1;
   }
   
   .div_pic .btn {
       position: absolute;
       bottom: var(--spacing-lg);
       left: 100px;
       right: 100px;
       width: auto;
       min-width: 160px;
   }
   
   .blog_page {
       flex-wrap: wrap;
   }
   .blog_item_size{
       width: 32%;
       margin-bottom: 30px;
       @media (max-width: 1023px) {
           width: 48%;
       }
       @media (max-width: 766px) {
           width: 100%;
       }
   }
   .blog_item h3{
       font: bold var(--font-size-lg)/var(--line-height-lg) Font-Secondary, Arial, Helvetica, sans-serif;
       text-transform: none;
       text-align: center;
       margin-top: 20px;
   }
   
   /* Blog Posts Grid */
   .blog_posts {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 30px;
       @media (max-width: 1199px) {
           grid-template-columns: 1fr;
           gap: 25px;
       }
       @media (max-width: 767px) {
           gap: 20px;
       }
   }
   
   /* Horizontal Blog Card */
   .blog_card {
       background: color-mix(in srgb, var(--color-accent) 100%, transparent);
       border-radius: 12px;
       overflow: hidden;
       transition: all 0.3s ease;
       border: 1px solid color-mix(in srgb, var(--color-accent-2) 15%, transparent);
   }
   
   .blog_card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
       border-color: color-mix(in srgb, var(--color-accent-2) 25%, transparent);
   }
   
   .blog_card_horizontal {
       display: grid;
       grid-template-columns: 250px 1fr;
       gap: 0;
       @media (max-width: 767px) {
           grid-template-columns: 1fr;
       }
   }
   
   .blog_card_horizontal .blog_card_image {
       display: block;
       width: 100%;
       height: 100%;
       min-height: 200px;
       overflow: hidden;
       position: relative;
   }
   
   .blog_card_horizontal .blog_card_image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }
   
   .blog_card_horizontal:hover .blog_card_image img {
       transform: scale(1.1);
   }
   
   .blog_card_horizontal .blog_card_content {
       padding: 20px;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }
   
   .blog_card_date {
       font-size: 12px;
       color: var(--color-green);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       font-weight: 600;
   }
   
   .blog_card_horizontal h3 {
       margin: 0;
       font: bold 18px/1.3 Font-Secondary, Arial, Helvetica, sans-serif;
       text-transform: none;
   }
   
   .blog_card_horizontal h3 a {
       color: #fff;
       text-decoration: none;
       transition: color 0.3s ease;
       display: inline;
       background: linear-gradient(to right, var(--color-green), var(--color-green)) no-repeat;
       background-size: 0% 2px;
       background-position: left bottom;
   }
   
   .blog_card_horizontal h3 a:hover {
       color: var(--color-green);
       background-size: 100% 2px;
       transition: color 0.3s ease, background-size 0.4s ease;
   }
   
   .blog_card_excerpt {
       color: rgba(255, 255, 255, 0.7);
       font-size: 14px;
       line-height: 1.5;
       margin: 0;
   }
   
   .blog_card_btn {
       margin-top: auto;
       align-self: flex-start;
       max-width: 200px;
       min-height: 38px;
       padding: 8px 20px;
       font: bold var(--font-size-sm)/var(--line-height-sm) Font-Base, Arial, Helvetica, sans-serif;
       @media (max-width: 767px) {
           max-width: none;
           width: 100%;
       }
   }
   
   .blog-cta{
       width: 300px;
       margin: 30px auto 0;
   }
   
   .breadcrumbs{
       margin-top: 20px;
       font : regular var(--font-size-sm)/var(--line-height-sm) Font-Base, Arial, Helvetica, sans-serif;
       color: color-mix(in srgb, var(--color-white) 60%, transparent);
   }
   .breadcrumbs a{
       color: color-mix(in srgb, var(--color-white) 100%, transparent);
       text-decoration: none;
       transition: color 0.3s ease-in-out;
   }
   .breadcrumbs a:hover{
       color: var(--color-accent-2);
   }
   .single_post table{
       margin: 30px 0;
       width: 100%;
   }
   .single_post table th, .single_post table td{
       padding: 5px;
       border: 1px solid var(--color-p);
   }
   .single.single_post{
       /*max-width: 1200px;*/
       margin: 0 auto;
       /*padding: 0 0 var(--spacing-2xl) var(--aside-width);*/
       @media (max-width: 1024px) {
           padding: var(--spacing-lg) 0;
       }
   }
   .single ol{
       list-style: decimal;
       margin-left: 20px;
       margin-bottom: 30px;
   }
   .single ol li{
       padding: 5px 0;
   }
   .single hr{
       margin: 20px 0;
   }
   @media (max-width: 1023px) {
       .div_table{
           overflow-x:scroll;
       }
   }
   /* ======================================================================
      COMPONENTS - DETAILS
      ====================================================================== */
   
   .ul_details {
       flex-wrap: wrap;
       margin-top: var(--spacing-lg);
   }
   
   .ul_details li {
       width: 33%;
       font: bold var(--font-size-xl)/var(--line-height-lg) Font-Base, Arial, Helvetica, sans-serif;
       text-transform: uppercase;
   }
   
   .ul_details li span {
       display: block;
       font: bold var(--font-size-md)/var(--line-height-xs) Font-Base, Arial, Helvetica, sans-serif;
       letter-spacing: -0.02em;
       margin-bottom: var(--spacing-xs);
       text-transform: none;
   }
   
   /* ======================================================================
      SINGLE PAGES
      ====================================================================== */
   
   .single_top { 
       margin-top: var(--header-height-desktop);
       /*padding: var(--spacing-2xl) 0 var(--spacing-2xl) var(--aside-width);*/
       @media (max-width: 1024px) {
           padding: var(--spacing-lg) 0;
       }
   }
   
   .single_top h1 {
       margin: 0;
   }
   
   .single {
       /*max-width: 1000px;*/
       /*padding: 0 0 var(--spacing-2xl) var(--aside-width);*/
   }
   
   .single p {
       margin-bottom: 26px;
   }
   
   .single ul {
       margin-bottom: 26px;
   }
   
   .single ul li {
       position: relative;
       padding-left: 25px;
       margin-top: var(--spacing-xs);
   }
   
   .single ul li:first-child {
       margin-top: 0;
   }
   
   .single ul li::after {
       position: absolute;
       display: block;
       content: '';
       width: 6px;
       height: 6px;
       border-radius: var(--radius-full);
       background: var(--color-accent-2);
       left: 0;
       top: 9px;
   }
   
   .div_404 {
       max-width: 450px;
   }
   
   /* ======================================================================
      FOOTER
      ====================================================================== */
   
   .footer {
       background: var(--color-bg-header-footer);
       transition: var(--transition-normal);
       color: var(--color-white);
       padding: 0 0 0;
   }
   
   .footer_top {
       padding: var(--spacing-lg) 0 var(--spacing-2xl) var(--aside-width);
       align-items: flex-start;
   }
   
   .footer_single {
       /*padding: var(--spacing-lg) 0 var(--spacing-lg) 0;*/
       align-items: flex-start;
   }
   
   .fixed_bottom {
       position: fixed;
       left: 0;
       right: 0;
       bottom: 0;
       z-index: var(--z-header);
       /* background: var(--color-dark); */
       /* padding: var(--spacing-sm) 0; */
       /* box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4); */
       transform: translateY(100%);
       opacity: 0;
       transition: transform 1500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 1500ms cubic-bezier(0.22, 1, 0.36, 1);
   }
   
   /* removed scroll-timeline progressive enhancement (using JS fallback instead) */
   
   .footer_content .nav ul {
       justify-content: flex-start;
   }
   
   .footer_content .nav {
       padding-top: var(--spacing-xl);
       padding-bottom: var(--spacing-xl);
   }
   
   .footer_content h4 {
       font: bold var(--font-size-xl)/var(--line-height-lg) Font-Base, sans-serif;
       text-transform: uppercase;
       letter-spacing: -0.02em;
       margin-bottom: var(--spacing-sm);
   }
   
   .footer_content p {
       line-height: var(--line-height-xs);
       max-width: 580px;
   }
   
   .footer_logo {
       max-width: 160px;
   }
   
   .copy {
       margin-top: var(--spacing-2xl);
       margin-bottom: var(--spacing-2xl);
   }
   
   /* ======================================================================
      MEDIA QUERIES
      ====================================================================== */
   
   /* Large screens */
   @media (max-width: 1920px) {
       .aside_fixed {
           left: 0;
           right: auto;
           margin-left: 0;
       }
   
       .div_article {
           width: auto;
           padding-left: var(--aside-width);
       }
   
       .footer_content .nav ul {
           flex-wrap: wrap;
       }
   
       .section_top {
           overflow: hidden;
       }
   
       .div_block {
           display: block;
       }
   
       .div_bonus h6 {
           top: 50%;
           transform: translateY(-50%);
       }
   }
   
   /* Slider responsive breakpoints */
   @media (max-width: 1440px) {
       .popular_slider .slider_item {
           width: calc(25% - var(--spacing-lg));
       }
   }
   
   @media (max-width: 1025px) {
       .popular_slider .slider_item {
           width: calc(33.333% - var(--spacing-lg));
       }
   }
   
   /* Tablet */
   @media (max-width: 1023px) {
       /* Full width text on tablets */
       .section_text .container > h2,
       .section_text .container > .p_big,
       .top_title p,
       .section_faq > .container > p,
       .section_faq .faq_open,
       .footer_top > h4,
       .footer_top > p:not(.copy) {
           max-width: 100%;
       }
   
       .div_bonus {
           flex-wrap: wrap;
       }
   
       .div_bonus > div {
           width: 100%;
           margin-top: var(--spacing-lg);
       }
   
       .div_bonus > div:first-child {
           margin-top: 0;
       }
   
       .div_pic {
           display: block;
       }
   
       .div_pic > div, 
       .section_double .flex > div {
           width: 100%;
       }
   
       .pic_block {
           margin-top: var(--spacing-lg);
       }
   
       .section_double .flex {
           display: block;
       }
   
       .section_double div > h3 {
           margin-top: var(--spacing-lg);
       }
   
       .ul_details li {
           width: 50%;
       }
   
       .pros_body {
           display: block;
       }
   
       .pros_body > div {
           width: 100%;
       }
   
       .div_cons {
           margin-top: var(--spacing-md);
       }
   
       .container {
           padding: 0 var(--container-padding-mobile);
       }
       .nav_open {
           display: block;
       }
   
       .nav {
           position: fixed;
           top: var(--header-height-mobile);
           left: 0;
           right: 0;
           height: calc(100vh - var(--header-height-mobile));
           background: var(--color-dark);
           transform: rotateY(-90deg);
           transition: var(--transition-fast);
           transform-origin: left;
       }
   
       .nav ul {
           display: block;
           padding: var(--spacing-2xl) var(--container-padding-mobile) 0;
       }
   
       .nav ul li {
           padding: 0;
       }
   
       .nav ul li a {
           font: 700 var(--font-size-md) / var(--line-height-xl) 'Font-Base', Arial, Helvetica, sans-serif;
       }
   
       .nav.active {
           transform: rotateY(0deg);
       }
   }
   
   @media (max-width: 769px) {
       .popular_slider .slider_item {
           width: calc(50% - var(--spacing-lg));
       }
   }
   
   @media (max-width: 480px) {
       .popular_slider .slider_item {
           width: calc(100% - var(--spacing-lg));
       }
   
   }
   
   /* Mobile */
   @media (max-width: 767px) {
   
   
       .header_top {
           height: var(--header-height-mobile);
       }
   
       .nav_open {
           display: block;
       }
   
       .nav {
           position: fixed;
           top: var(--header-height-mobile);
           left: 0;
           right: 0;
           height: calc(100vh - var(--header-height-mobile));
           background: var(--color-dark);
           transform: rotateY(-90deg);
           transition: var(--transition-fast);
           transform-origin: left;
       }
   
       .nav ul {
           display: block;
           padding: var(--spacing-2xl) var(--container-padding-mobile) 0;
       }
   
       .nav ul li {
           padding: 0;
       }
   
       .logo {
           width: auto;
       }
   
       .logo img {
           width: 100%;
           height: auto;
       }
   
       .nav ul li a {
           font: 700 var(--font-size-md) / var(--line-height-xl) 'Font-Base', Arial, Helvetica, sans-serif;
       }
   
       .nav.active {
           transform: rotateY(0deg);
       }
   
       .footer .nav {
           position: static;
           top: auto;
           left: auto;
           right: auto;
           height: auto;
           background: transparent;
           transform: none;
           transition: none;
       }
   
       .footer .nav ul {
           display: flex;
           padding: 0;
           justify-content: flex-start;
           flex-wrap: wrap;
           row-gap: var(--spacing-xs);
           column-gap: var(--spacing-md);
       }
   
       .footer .nav ul li a {
           font: 700 var(--font-size-sm) / var(--line-height-xs) 'Font-Base', Arial, Helvetica, sans-serif;
       }
   
       .aside_fixed {
           left: 0;
           right: 0;
           top: var(--header-height-mobile);
           width: 100%;
           height: var(--spacing-lg);
           overflow-x: hidden;
           background: var(--color-dark);
       }
   
       .aside_nav {
           flex-direction: column;
           padding: 0;
           overflow-x: scroll;
           scrollbar-width: none;
           -ms-overflow-style: none;
       }
   
       .aside_nav::-webkit-scrollbar {
           display: none;
       }
   
       .div_aside {
           z-index: var(--z-header);
       }
   
       .aside_nav ul {
           display: flex;
           white-space: nowrap;
       }
   
       .aside_nav ul li {
           padding: 0 var(--spacing-xs);
       }
   
       .aside_nav .menuItem {
           border-left: none;
           border-top: 2px solid #1432A0 !important;
       }
   
       .aside_nav .menuItem.active {
           border-color: #124EFE !important;
       }
   
       .aside_bottom {
           display: none;
       }
   
       .aside_scroll span:first-child {
           height: 1px !important;
           width: 100%;
           opacity: 0.5;
       }
   
       .aside_scroll span + span {
           height: 1px !important;
           width: 20%;
           background: var(--color-accent);
           opacity: 1;
       }
   
       .aside_scroll {
           height: 1px !important;
           width: 100% !important;
       }
   
       .aside_scroll span {
           background: var(--color-accent);
       }
   
       .aside_nav li a {
           font: 700 var(--font-size-xs) / var(--line-height-xs) Font-Base, sans-serif;
       }
   
       .div_article {
           padding: 0;
       }
   
       .ul_details li {
           width: 100%;
       }
   
       .footer_top {
           padding: var(--spacing-2xl) 0;
       }
   
       .btn { font-size: var(--font-size-lg); }
   
       .btn_fixed {
           /*--fixed-btn-width: 100%;*/
           --fixed-btn-padding-y: var(--spacing-sm);
           --fixed-btn-font-size: var(--font-size-lg);
       }
   
       .header .btn {
           padding: 5px 0;
           min-width: 160px;
       }
   
       .header .logo {
           margin-right: auto;
           margin-left: 20px;
           padding-right: 20px;
       }
   
       .section_image {
           background: none;
           padding: 0;
       }
   
       .bg_mobile {
           display: block;
           width: 100%;
       }
   
       .top_button {
           padding: var(--spacing-md) 0 0;
           margin: 10px auto 0 auto;
       }
   
       /* Mobile typography overrides */
       h1 {
           font: bold var(--font-size-xl) / var(--line-height-md) Font-Secondary, Arial, Helvetica, sans-serif;
       }
   
       .top_button h6 {
           font: bold var(--font-size-lg) / var(--line-height-xs) Font-Base, sans-serif;
       }
   
       body {
           font: normal var(--font-size-sm) / var(--line-height-xs) 'Font-Base', Arial, Helvetica, sans-serif;
       }
   
       h2 {
           font: bold var(--font-size-lg) / var(--line-height-md) Font-Secondary, Arial, Helvetica, sans-serif;
           margin-bottom: var(--spacing-md);
       }
   
       h3 {
           font: bold var(--font-size-sm) / var(--line-height-xs) Font-Secondary, Arial, Helvetica, sans-serif;
       }
   
       .p_big {
           font: normal var(--font-size-sm) / var(--line-height-xs) Font-Base, sans-serif;
       }
   
       .faq_item h3 {
           font: bold var(--font-size-md) / var(--line-height-xs) Font-Secondary, Arial, Helvetica, sans-serif;
       }
   
       .ul_details li span {
           font: bold var(--font-size-lg) / var(--line-height-xs) Font-Base, Arial, Helvetica, sans-serif;
       }
   
       h4 {
           font: bold var(--font-size-lg) / var(--line-height-md) Font-Secondary, Arial, Helvetica, sans-serif;
       }
   
       .footer_top, .single, .single_top {
           padding: var(--spacing-lg) 0;
       }
   
       .section_pic {
           padding: 60px 0;
       }
   
       .fixed_bottom p {
           display: none;
       }
   
       .copy {
           margin-bottom: 100px;
       }
   
       /* Full width text on mobile */
       .section_text .container > h2,
       .section_text .container > .p_big,
       .top_title p,
       .section_faq > .container > p,
       .section_faq .faq_open,
       .footer_top > h4,
       .footer_top > p:not(.copy),
       .footer_single > p:not(.copy),
       .single > .container > p
       {
           max-width: 100%;
       }
   }
   
   /* ======================================================================
      CONTENT TABLES
      ====================================================================== */
   
   .content-table {
       width: 100%;
       border-collapse: collapse;
       margin: 20px 0;
       font-size: var(--font-size-sm);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
       /*border-radius: 8px;*/
       overflow: hidden;
   }
   
   .content-table thead tr {
       /*background: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-accent-2) 100%);*/
       color: #ffffff;
       text-align: left;
       font-weight: bold;
   }
   
   .content-table thead th {
       padding: 14px 16px;
       font-family: 'Font-Secondary', Arial, Helvetica, sans-serif;
       font-weight: bold;
       text-align: left;
       border: none;
   }
   
   .content-table tbody tr {
       /*border-bottom: 1px solid #dddddd;*/
       transition: background-color 0.3s ease;
   }
   
   /*.content-table tbody tr:nth-of-type(even) {*/
   /*    background-color: #f8f9fa;*/
   /*}*/
   
   /*.content-table tbody tr:last-of-type {*/
   /*    border-bottom: 2px solid var(--color-accent-1);*/
   /*}*/
   
   .content-table tbody tr:hover {
       background-color: rgba(var(--color-accent-1-rgb, 255, 193, 7), 0.1);
       cursor: default;
   }
   
   .content-table tbody td {
       padding: 12px 16px;
       border: 1px solid #dddddd;
       color: var(--color-p);
   }
   
   .content-table tbody td b {
       color: var(--color-accent-2);
       font-weight: bold;
   }
   
   /* Mobile responsive tables */
   @media (max-width: 768px) {
       /* .content-table {
           font-size: var(--font-size-xs);
       } */
       
       .content-table thead th,
       .content-table tbody td {
           padding: 10px 12px;
       }
   }
   
   @media (max-width: 480px) {
       .content-table {
           display: block;
           overflow-x: auto;
           white-space: nowrap;
           -webkit-overflow-scrolling: touch;
       }
   }
   
   .anchorSection {
       border-bottom: 1px solid gray;
       scroll-margin-top: 80px;
   }
   
   .feature1 {
       display: flex;
       flex-flow: column;
       gap: 8px;
       padding: 12px;
       background-color: #124efe;
       border-top-left-radius: 8px;
       border-bottom-left-radius: 8px;
       width: 80px;
       height: auto;
       align-items: center;
       position: fixed;
       top: 150px;
       right: 0;
       z-index: 999;
       opacity: 0;
       transform: translateX(100%);
       transform-origin: right center;
       transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
   }
   
   .feature1-close {
       position: absolute;
       top: 10px;
       right: 10px;
       background: rgba(255, 255, 255, 0.2);
       border: none;
       cursor: pointer;
       padding: 0;
       width: 32px;
       height: 32px;
       border-radius: 50%;
       opacity: 0;
       pointer-events: none;
       transition: all 0.3s ease;
       z-index: 10;
       transform-origin: center center;
   }
   
   .feature1-close::before,
   .feature1-close::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 16px;
       height: 2px;
       background: white;
       transition: all 0.3s ease;
   }
   
   .feature1-close::before {
       transform: translate(-50%, -50%) rotate(45deg);
   }
   
   .feature1-close::after {
       transform: translate(-50%, -50%) rotate(-45deg);
   }
   
   .feature1-close:hover {
       background: rgba(255, 255, 255, 0.3);
       transform: rotate(90deg);
   }
   
   .box1-text {
       display: none;
       text-align: center;
   }
   
   .box1-emoji {
       font-size: 48px;
       margin-bottom: 10px;
   }
   
   .box1-title {
       color: white;
       font: bold var(--font-size-lg)/var(--line-height-md) Font-Secondary, Arial, Helvetica, sans-serif;
       text-transform: uppercase;
       margin: 10px 0;
       font-weight: 700;
   }
   
   .box1-description {
       color: white;
       font: normal var(--font-size-sm)/var(--line-height-xs) Font-Base, Arial, Helvetica, sans-serif;
       text-align: center;
       margin: 0;
   }
   
   .box1-bonus-numbers {
       color: var(--color-accent-2);
       font: bold var(--font-size-lg)/var(--line-height-sm) Font-Secondary, Arial, Helvetica, sans-serif;
       display: block;
       margin-top: 8px;
   }
   
   .feature1.show {
       opacity: 1;
       transform: translateX(0);
   }
   
   .feature1.box1 {
       position: fixed;
       top: 50% !important;
       left: 50% !important;
       right: auto !important;
       transform: translate(-50%, -50%) scale(1) !important;
       width: 350px;
       height: auto;
       padding: 30px;
       gap: 20px;
       border-radius: 16px;
       z-index: 10000;
       transform-origin: center center;
       transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   
   .feature1-overlay {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.7);
       z-index: 9999;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.6s ease-in-out;
   }
   
   .feature1-overlay.show {
       opacity: 1;
       pointer-events: all;
   }
   
   .feature1.box1 .title {
       font-size: 24px;
       line-height: 1.2;
   }
   
   .feature1.box1 .circle-container {
       width: 80px;
       height: 80px;
   }
   
   .feature1.box1 .full-circle {
       width: 80px;
       height: 80px;
   }
   
   .feature1.box1 .progress-ring {
       width: 88px;
       height: 88px;
       left: -4px;
       top: -4px;
   }
   
   .feature1.box1 .progress-ring-circle {
       r: 40;
       cx: 44;
       cy: 44;
       stroke-width: 3;
   }
   
   .feature1.box1 .number {
       font-size: 28px;
   }
   
   .feature1.box1 .btn_feature1 {
       max-width: 250px;
       padding: 16px 0;
       font-size: 18px;
   }
   
   .feature1.box1 .btn_feature1 span {
       font-size: 18px;
   }
   
   .feature1.box1 .title {
       display: none;
   }
   
   .feature1.box1 .circle-container {
       display: none;
   }
   
   .feature1.box1 .box1-text {
       display: block;
   }
   
   .feature1.box1 .feature1-close {
       opacity: 1;
       pointer-events: all;
   }
   
   .feature1.box1 .feature1-close:hover {
       opacity: 1 !important;
   }
   
   @keyframes expandTobox1 {
       0% {
           top: 150px;
           right: 0;
           left: auto;
           width: 80px;
           padding: 12px;
           gap: 8px;
           border-radius: 8px 0 0 8px;
           transform: translateX(0);
           max-height: 120px;
       }
       100% {
           top: 50%;
           left: 50%;
           right: auto;
           width: 350px;
           padding: 40px 30px;
           gap: 20px;
           border-radius: 16px;
           transform: translate(-50%, -50%);
           max-height: 500px;
       }
   }
   
   .feature1.expanding {
       animation: expandTobox1 0.6s linear forwards;
       padding: 12px;
       gap: 8px;
       overflow: hidden;
   }
   
   .feature1.expanding .title,
   .feature1.expanding .circle-container {
       opacity: 0;
       transition: opacity 0.3s ease-out;
   }
   
   .feature1.expanding .box1-text {
       display: block;
       opacity: 0;
       animation: fadeInText 0.4s ease-in 0.5s forwards;
   }
   
   .feature1.expanding .btn_feature1 {
       opacity: 0;
       animation: fadeInText 0.4s ease-in 0.6s forwards;
   }
   
   .feature1.expanding .feature1-close {
       opacity: 0;
       animation: fadeInText 0.3s ease-in 0.7s forwards;
       pointer-events: all;
   }
   
   @keyframes fadeInText {
       from {
           opacity: 0;
           transform: translateY(10px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   .feature1.expanding .box1-emoji {
       font-size: 48px;
   }
   
   .feature1.expanding .box1-title {
       font-size: 28px;
   }
   
   .feature1.expanding .box1-description {
       font-size: 20px;
   }
   
   .feature1.expanding .box1-description strong {
       font-size: 24px;
   }
   
   .feature1.expanding .btn_feature1 {
       max-width: 250px;
       padding: 16px 0;
       font-size: 18px;
   }
   
   .feature1.expanding .btn_feature1 span {
       font-size: 18px;
   }
   
   .title {
       position: relative;
       font-weight: 700;
       font-size: 12px;
       line-height: 11px;
       letter-spacing: -0.24px;
       text-transform: uppercase;
       color: white;
       text-align: center;
       font-style: normal;
   }
   
   .circle-container {
       position: relative;
       width: 40px;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .full-circle {
       position: absolute;
       width: 40px;
       height: 40px;
       border: 1px solid white;
       border-radius: 50%;
       opacity: 0.3;
   }
   
   .progress-ring {
       position: absolute;
       transform: rotate(-90deg);
       left: -2px;
       top: -2px;
   }
   
   .progress-ring-circle {
       transition: stroke-dashoffset 1s linear;
       stroke-dasharray: 125.664;
       stroke-dashoffset: 125.664;
   }
   
   .number {
       position: absolute;
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
       font-size: 14px;
       text-transform: uppercase;
       color: white;
       font-style: normal;
       z-index: 1;
   }
   
   .btn_feature1 {
       width: 100%;
       max-width: 60px;
       padding: 4px 0;
       font-size: 9px;
       line-height: 1.2;
       border-radius: 50px;
       text-transform: uppercase;
   }
   
   .btn_feature1 span {
       font-size: 9px;
       letter-spacing: -0.4px;
   }
   
   /* Game Providers Grid */
   .game_providers_grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
       gap: 15px;
       margin-top: 25px;
   }
   
   .game_providers_grid img {
       width: 100%;
       object-fit: contain;
       border-radius: 6px;
       /*border: 1px solid var(--color-accent-2);*/
       transition: transform 0.3s ease, opacity 0.3s ease;
   }
   
   /*.game_providers_grid img:hover {*/
   /*    transform: scale(1.05);*/
   /*    opacity: 0.9;*/
   /*}*/
   
   @media (max-width: 768px) {
       .game_providers_grid {
           grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
           gap: 10px;
           margin-top: 20px;
           padding: 15px 0;
       }
       
       .game_providers_grid img {
           max-height: 60px;
       }
   }