html{
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  
  body {
      display: block;
      position: relative;
      width: 100%;
    background: #063B40;

      font-family: 'Open Sans', sans-serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      color: #F5F5F5;
      overflow-x: hidden;
    }
  
    
    .content {
      display: block;
      position: relative;
      width: 100%;
      max-width: 1020px;
      max-width: 100%;
      /* overflow: hidden; */
      border-radius: 6px;
      background: #2E5053;

      padding:32px 20px;
      margin: 0 auto 20px auto;
    }
    
    h1,
    h2,
    h3,
    h4,
    .title {
      display: block;
      position: relative;
      font-size: 36px;
      font-weight: 700;
      line-height: 40px;
      text-align: center;
      color: #ffffff;
    }
    
    h1,
    .title.general {
      text-transform: uppercase;
    }
    
    h2,
    .title.high {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 26px;
      line-height: 32px;
      color: #FFFFFF;
      text-transform: uppercase;
      font-family: 'Roboto Condensed', sans-serif;
  background: #07757F;
border-left: 6px solid #05B9A7;
    border-radius: 0 6px   6px 0;
padding: 12px 32px;
    }

    h3,
    title.medium {
      font-size: 15px;
      line-height: 22px;
      text-align: left;
      color: #F5F5F5;
      text-transform: uppercase;
    }
    
    article > *,
    .article > *,
    .desk > * {
      margin-top: 20px;
    }
    
    article > *:first-child,
    .article > *:first-child,
    .desk > *:first-child {
      margin-top: 0 !important;
    }
    
    article > h2,
    .article > h2,
    .desk > h2 {
      margin-top: 32px;
    }
    
    article > h3,
    .article > h3,
    .desk > h3 {
      margin-top: 16px;
    }
    
    .button {
      
      position: relative;
    display: inline-block;
      min-width: 200px;
      height: 48px;
      border-radius: 50px;
      background: #DE594C;

      overflow: hidden;
      font-size: 15px;
      font-weight: 700;
      line-height: 22px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      color: #ffffff;
      white-space: nowrap;
      cursor: pointer;
      padding: 13px 24px;
      margin: 0 auto;
    
      transition: all 0.5s;
    }
    
    .button:hover {
      background: #2DB155;

    }
    
    
    .header,
    .main ,.footer {
      display: flex;
      position: relative;
      justify-content: space-between;
      align-items: center;
     
      max-width: 1600px;
      max-width: 100%;
      
      margin: 0 auto;
    }
    
    .background{
      display: block;
      position: absolute;
      bottom: 0;left: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    
    .background img{
      position: relative;
      width: 100%;height: 100%;object-fit: cover;
      
    }

    .background-page img{
      border-radius: 0;
    }
    
    .images img{
      border-radius: 6px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: block;
    }

    .faq {
      overflow-anchor: none;
    }
    
    /* -------------------HEADER---------------- */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 100;
      background: #054146;
      
    }
    
    .header__content {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      max-width: 1540px;
      max-height: 80px;
      border-radius: 0;
      background: #054146;
      padding: 16px 30px;
      margin: 0 auto;
    }
    
    .logo {
      display: block;
      position: relative;
      flex: 0 0 182px;
      margin-right: 72px;
    }
    
    .logo img {
      display: block;
      position: relative;
      width: auto;
      max-height: 56px;
    }
    
    .logo:hover{
      transform: scale(1.1);
    }
    .header__menu {
      display: flex;
      white-space: nowrap;
      max-height: calc(100vh - 70px);
    /* overflow-y: auto; */
    }
    
    
    
    .header__menu-list {
      display: flex;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
      flex: 1 1 auto;
      
     background: #274B50;
      border-radius: 50px;
     


    }
    .header__menu-list li {
      display: block;
      padding:  13px 20px;
    }
    
    .header__menu-list li a {
      display: inline-flex;
      position: relative;
      align-items: center;
      font-weight: 400;
      font-size: 15px;
      line-height: 22px;
      text-transform: uppercase;
      color:#FFFFFF;
      transition: all 0.5s;
     
    }
    
    .header__menu-list li:hover {
     background: #3D5D62;
border-radius: 50px;
      
    }
    
    .menu a{
      display: none;
    }
    
  
    span {
      display: inline-block;
    }
    
    .header__menu-list a img,
    .header__flag img {
      width: 24px;
      height: 24px;
      vertical-align: middle;
    }
    
    /* .header__menu-list a span:last-child {
      margin-left: 16px;
    } */
    
    .header__flag span:first-child {
      flex: 0 1 24px;
      margin-right: 8px;
      
    }

    .header__menu-wrap {
    display: none;
    display: block;
    position: absolute;
    left: 0;
    top: 55px;
    min-width: 120px;
    height: auto;
    background: #102C30;
    border-radius: 6px;
    padding: 8px 16px;
    z-index: 100;
    overflow-y: hidden;
}

.header__menu-wrap ul{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.header__menu-wrap ul li{
  padding: 0;
}

.header__menu-wrap ul li:hover{
  background: none;
  
}
.header__menu-list li:first-child a ,.header__menu-list li:nth-child(3) a{
    position: relative;
    padding-right: 25px;
}

.header__menu-list .header__menu-item {
    display: none;
}

.header__menu-list li:first-child .header__menu-item {
    padding-left: 0;
}


.header__menu-list > li {
  position: relative;
}

.header__menu-wrap ul li:nth-last-child(-n+4){
  display: block;
}

.header__menu-list li:nth-last-child(-n+5) {
    display: none;
}

.header__menu-list li .header__menu-wrap ul li a{
  color:#FFFFFF !important;
  padding-right: 12px;
}

.header__menu-list li .header__menu-wrap ul li a:hover{
text-decoration: underline !important;
}

.header__menu-list li .header__menu-wrap ul li a::after{
  display: none;
}

.header__menu-wrap.js-expand-content.expanded {
  height: auto;
}
.header__menu-list li:first-child a::after, .header__menu-list li:nth-child(3) a::after{
  content: '';
  display: block;position: absolute;
  width: 20px;height: 20px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(../images/menu-arrowDown.svg) no-repeat center center / contain;
  transition: transform 0.5s ease;
}

.header__menu-list li:first-child.active a::after,.header__menu-list li:nth-child(3).active a::after{
transform: translateY(-50%) rotate(180deg);
}

.header__menu-list li:first-child:hover a::after,.header__menu-list li:nth-child(3):hover a::after{
transform: translateY(-50%) rotate(180deg);
}

li.active .header__menu-wrap{
display: flex;
  gap: 8px;
}
    .header__flag {
      display: flex
;
    align-items: center;
      margin-left: 24px;
      color:#ffffff;
      text-transform: uppercase;
    }

    .button__login{
        margin-left: auto;
    }

    .button__login{
      line-height: 22px;
        min-width: 101px;
       background: #2D5A61;
        padding: 13px 24px;
        margin: 0 16px 0 auto;
    }
    
 .button__singup{
  line-height: 22px;
  min-width: 158px;
  padding: 13px 24px;
  background: #5AB060;

    margin: 0;
 }

 .button__singup:hover{
  background: #185A61;
 }
    .header__time{
        color:#FFFFFF;
        position: relative;
        padding-left: 28px;
        margin-left: 24px;
    }

    .header__time::before{
      content: '';
      display: block;position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;height: 18px;
      left: 1px;
      background: url(../images/clock.svg) no-repeat center center / contain;
    }

   
    .button__login:hover {
      background: #2DB155;
    }
    
    .header__btn-menu{
      display: block;
      flex: 0 1 auto;
      min-width: 0;
      border:1px solid #ffffff; 
      border-radius: 10px;
      background: #054146;

      padding: 12px;
      margin-left: 12px;
      order: 3;
     
      
    }
    
    
    svg {
      position: relative;
      fill: #ffffff;
      line-height: 1;
      vertical-align: 1;
    }
    
     
    
     
    
    
    /* ------------------ MAIN------------- */
    .main.home{
      display: flex;
     
    }
    
    .main__wrap {
      display: flex;
      position: relative;
      flex: 1 1 100%;
      justify-content: center;
      align-items: stretch;
      max-width: 1540px;
      padding: 20px 30px;
      margin: 0 auto;
    }
    
    
    
   
    .menu__review-content::after {
      content: "";
      position: absolute;
      right: 20px;
      top:50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
     background: url(../images/faq-plus.svg) no-repeat center center / contain;
      transition:  all 0.5s;
    }

   
    
   
    
    .menu__review-content.active::after {
      background: url(../images/faq-minus.svg) no-repeat center center / contain;
      transform: translateY(-50%) rotate(180deg);
    }
    
    .menu-review__content{
     
      padding: 2px;
      margin-bottom: 20px;
      overflow: hidden;
      background: #ffffff;
      border-radius: 8px;
      
    }
  
    .menu__review-content{
      position: relative;
      padding:17px 60px 17px 20px;
      color: #ffffff;
      font-weight: 700;
      text-transform: uppercase;
   background: linear-gradient(270deg, #018E98 0%, #0F535C 100%);


    }
    .menu-review__content::before,.bonuses__desc::after{
      content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px;
    background:linear-gradient(270deg, #018E98 0%, #0F535C 100%);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    border-radius: 6px;

    }

.bonuses__desc::after{
background: linear-gradient(180deg, rgba(0, 234, 206, 0) 14.75%, rgba(0, 234, 206, 0.7) 100%);


}

    
    .menu__review-content.active{
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    
    .menu__review li a {
     color: #3C404B;
      position: relative;
      white-space: nowrap;
    }
  
    .menu__review li:hover a{
      color: #1A4045;
      font-weight: 700;
      font-size: 15px;
      
    }


     
    .menu__review.active{
      display: block;
      background: #ffffff;
      border-radius: 0 0 6px 6px;
    }
    .menu__review-list{
      padding: 0;
    }
    .menu__review-list li{
      padding: 8px 16px;
    }
    .content__wrapper {
      
    
      flex: 0 1 100% ;
    }

    
  
      
    /* -----------hero ----------- */
    .content__wrapper{
      position: relative;
       
     
    
    }
    
    .hero{
      padding: 0;
      min-height: 360px;
      display: flex;
      background:none;
  
      align-items: center;
      padding: 24px 24px 24px 0;
  }
    
    .hero__wrapper {
     
      display: flex;
      align-items: center;
     
    }
    
  
    .hero__data{
    display: block;
      position: relative;
        max-width: 480px;
      padding: 12px; 
    }
    
    .hero__title{
      margin-bottom: 8px;
      text-align: start;
      font-family: 'Roboto Condensed', sans-serif;
      
    }
  
    .hero__data p{
      color:#ffffff;
      font-weight: 700;
      text-transform: none;
      margin-bottom: 16px;
    }
    
    
    .hero__rating {
      display: flex;
      font-weight: 700;
      align-items: center;
      text-transform: uppercase;
      color:#ffffff;
      margin-bottom: 8px;
    }
    
    .hero__rating p{
       text-transform: uppercase;
     margin-right: 10px;
     margin-bottom: 0;
    
     
    }
    .hero__button{
      display: inline-block;
    
      
      
      
      
    }

    .hero__data  li:nth-child(1) span{
      font-weight: 400;
      padding-left: 0;
    }
    .hero__data span{
      font-size: 15px;
      font-weight: 700;
      line-height: 18px;
     
        color:#FFFFFF;
        white-space: nowrap;
    }

    
    
   .hero__data .hero__span{
      font-weight: 400;
      font-size: 12px;line-height: 18px;
      color:#ffffff;
    }
    
    
    
 

/* ------------features------ */
.section__wrap{
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.features{
  width: 100%;
  
  background: none;
  
  padding: 0;
}
  
.features__wrap {
  display: flex;
  gap:20px;
}
.features__list,
.features__table {
  
  border-radius: 6px;
  

}

.features__title{
  margin-bottom: 16px;

}

.features__list li {
  display: flex;
  gap: 8px;
  position: relative;
   padding: 8px 16px ;
}



.features__table tr,.features__list li{
background: linear-gradient(270deg, #018E98 0%, #0F535C 100%);

border-radius: 6px;
  color:#ffffff;
}


.features__table {
border-collapse: separate;
width: 100%;

}

.features__table tbody{
  width: 100%;
  display: grid;
grid-template-columns: repeat(3,1fr);
gap: 20px;
}

.features__table tr {
  position: relative;
  flex-direction: column;
  font-weight: 700;
  display: flex;
  padding:  30px 12px 30px 200px;
  gap: 20px;
}

.features__table tr::before{
  content: '';
  display: block;position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
  width: 80px;height: 80px;
  background: url(../images/main/features-icon1.svg) no-repeat center center / contain;
}

.features__table tr:nth-child(2):before{
  background: url(../images/main/features-icon2.svg) no-repeat center center / contain;
}
.features__table tr:nth-child(4):before{
  background: url(../images/main/features-icon4.svg) no-repeat center center / contain;
}
.features__table tr:nth-child(5):before{
  background: url(../images/main/features-icon5.svg) no-repeat center center / contain;
}

.features__table tr:nth-child(6):before{
  background: url(../images/main/features-icon6.svg) no-repeat center center / contain;
}

.features__table tr td:last-child{
  font-weight: 400;
  
}

.features__table tr td:first-child{
  position: relative;
  font-weight: 700;
 text-transform: uppercase;
}


.features__table td:first-child {
 width: 100%;
}
.features__table td:last-child{
  width: 100%;
  text-align: left;
  
}



/* -------------banner---------------- */

.banner {
  display: flex;
  align-items: center;
  justify-content:flex-start;
  overflow: hidden;
  width: 100%;
  
  min-height: 380px;
  padding:  20px 20px 20px 150px;
  background: transparent;
    border-radius: 6px;
    margin-bottom: 20px;

  
}

.banner__info {
  display: flex;
 
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 468px;
 background: linear-gradient(270deg, rgba(1, 142, 152, 0.6) 0%, rgba(15, 83, 92, 0.6) 100%);
backdrop-filter: blur(10px);

border-radius: 6px;
  text-align: center;
 
  padding: 20px;
}

.banner .banner__title-main {
  flex-direction: column;
  align-items:center;
  width: auto;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  line-height: 40px;
  font-size: 36px;
  
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-left: 0;
  padding-right: 0;
  border-left: none;
  background: none;
}

.banner .banner__title::after,.banner .banner__title-main::before, .banner .banner__title-main::after {
  display: none;
  
}

.banner__subtitle{
  position: relative;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 22px;
  font-weight: 700;
  text-align: left;
  text-transform: none;
  
  margin-bottom: 12px;
  
}



.banner__button {
  
 margin-left:auto;
}


.banner-page{
  max-width: 100%;
  justify-content: flex-start;
  min-height: 380px;
  padding-left: 150px;
}


   
        /* ----------------review------------- */
    
      
        .article {
          display: flex;
          flex-direction: column;
        }
        .article ul li{
          position: relative;
          padding-left: 38px;
            line-height: 28px;
          background: #07757F;
border-radius: 6px;
  padding:8px 8px 8px 50px;
        }
    
        .article ul li + li,.article ol li + li{
          margin-top: 8px;
        }
       
    
        .article ul li::before{
          content:'';
          position: absolute;
          left: 8px;
          top:50%;
          transform: translateY(-50%);
          width: 30px;height: 30px;
          border-radius: 4px;
          ;
background:url(../images/before-item.svg) no-repeat center center / contain

        }

        .article-page ul li::before{

          background:#054146;
        }

       

       
    
    
        .article  .button{
          margin: 20px auto 0 0;
          

        }

        .article__background .article__button:hover{
          background: #2E9344;

        }
  
    

        .article a:not(.button){
            color:#DE594C; 
            font-weight: 700;
        }

        /* для нумерованного списка */

.article ol {
  
  counter-reset: ol;
  position: relative;
  
}

.article ol li {
  /* display: flex;
  align-items: center; */
  counter-increment: ol; 
  position: relative; 
  line-height: 28px;
  background: #07757F;
border-radius: 6px;
  padding:8px 8px 8px 50px;}

.article ol li::before {
  content: counter(ol) " "; 
  display: inline-block;
  position: absolute;
  font: inherit;
  font-weight: 700;
  color: #ffffff;
  left: 8px;
  display: flex;
  justify-content: center;align-items: center;
  background: #05B9A7;

width: 30px;height: 30px;
border-radius: 4px;
   
}

/* .article ul li::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
} */
/*  */
    
     
     
    /* ----------faq----------------------- */
    
    .faq__subtitle {
      position: relative;
      font-weight: 700;
      font-size: 15px;
      line-height: 22px;
      text-align: left;
      color: #ffffff;
   background: #07757F;

      border-radius: 6px;
      text-transform: none;
      cursor: pointer;
      padding: 12px 56px 12px 16px;
    }
    
    
  
    .faq__title{
      margin-bottom: 20px;
    }
    
    .faq__subtitle::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 16px;
      width: 20px;
      height: 20px;
      background: url(../images/faq-plus.svg) no-repeat center center / contain;
      transition: transform 0.3s ease-in-out;
    }
    
    .faq__subtitle.active::after {
        background: url(../images/faq-minus.svg) no-repeat center center / contain;
      transform: translateY(-50%) rotate(180deg); 
    }
    
    .faq__item{
      position: relative;
      
    }
    
    .faq__item + .faq__item{
      margin-top: 8px;
    }
    .faq__subtitle.active {
     border-bottom: none;
    border-radius: 6px 6px 0  0;
    }
    
    .faq__answer {
      position: relative;
    background: #0A5761B2;

      color: #FFFFFF;
      border-top: none;
     border-radius:0 0 6px 6px;
      padding:  12px 16px;
      margin-top: 2px;
      
    }
    
    .js-expand-content {
      display: none;
      overflow: hidden;
    }
    
    .js-expand-content.expanded {
      height: 100%;
    }
    
    
    /* ---------main__arrow------ */
    .main__arrow {
      display: block;
      position: fixed;
      width: 40px;
      height: 40px;
      right: 20px;
      bottom: 20px;
      box-shadow: 0px 4px 25px 0px #054146CC;
border-radius: 20px;
      background: url(../images/ArrowUp.svg) no-repeat center center / contain;
      z-index: 100;
  
      
  }

  .content:last-child{
    margin-bottom: 0;
  }
    
    /* ------------footer----------------- */
    .footer{
       display: flex;
      position: relative;
     
    background: #063B40;


      
    }
    
    .footer__content{
      display: flex
;
    flex-direction: column;
    align-items: center;
      gap:32px;
      max-width: 1480px;
      padding: 30px 20px;
      /* padding: 30px 10px 10px 30px; */
      background: transparent;
      margin-bottom: 0;
      
    }
    .footer__menu{
      display: flex;
      justify-content:center;
      gap: 32px;
      flex-wrap: wrap;
    }
    
   

    .footer__menu li a{
      font-weight: 700;text-transform: uppercase;
        position: relative;
        color:#ffffff;
        transition: all 0.5s;
    
    }

    .footer__menu li:hover a{
color: #5AB060;
    }
    .footer__info{
        position: relative;
    }

    
    .footer__info a{
     
      color: inherit;
    
    } 
    
    .footer__cards-list {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      gap:32px;
      
    }
    
    
    
    .footer__cards-list li img {
      width: 100%;
      
      height: auto;
      display: block;
    }

    .footer__cards-list li{
      transition:  all 0.5s;
    }
    .footer__cards-list li:hover{
      transform: scale(1.1);
    }
    
    .footer__text{
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      
    }
    
    .footer__text p{
      color: #ffffff;
      font-size: 15px;
      font-weight: 400;
      line-height: 22px;
    }
    
    .footer__text p + p {
      margin-top: 8px;
    }
    
    .footer__wrapp{
      display: flex;
      width: 100%;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }
    
    
    
    .footer__age img{
     max-width: 40px;
     max-height: 40px;
    }
    
    .footer__information{
      display: flex;
      justify-content: center;
    }
    
    .footer__information li + li{
      margin-left: 24px;
    }

    .footer__copy{
color: #ffffff;
font-size: 14px;
line-height: 16.41px;
text-align: center;
    }
    
/* --------------bonus page------------- */


    .breadcrumbs {
      display: flex;
      text-align: center;
      margin-bottom: 8px;
      white-space: nowrap;
    }
    
    .breadcrumbs li:not(:last-child) a {
      padding-left: 0;
    }
    
    .breadcrumbs li a span{
      /* font-weight: 400; */
      color: #ffffff;
      padding: 10px;
    }
    
    .breadcrumbs li:first-child a:hover span{
      color: #EB5851;
    }
    
    .breadcrumbs li:last-child a {
      font-weight: 400;
      cursor: default;
    }
    
    .breadcrumbs > li:not(:last-child):after {
      content: "|";
      position: relative;
      color: #ffffff;
      
    }
    
    .main-page.home{
   
      padding-top: 80px;
      display: block;
    }
    
    .main__wrap-page{
      justify-content: flex-start
    }
    
    .home .hero__page{
     
      position: relative;
        width: 100vw;
        display: flex
    ;
        justify-content: start;
        align-items: center;
        background: linear-gradient(to right, rgba(23, 25, 35, 0.8) 100%, rgba(23, 25, 35, 0.6) 40%, rgba(23, 25, 35, 0.2) 70%, rgba(23, 25, 35, 0.8) 80%);
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: calc(50% - 500px);
        padding-right: calc(50% - 600px);
       
    }

    .hero__data-page{
      max-width: 600px;
      padding: 32px;
    }
    
    .hero__data .hero__text-page{
      font-size: 15px;
      text-transform: none;
      margin-bottom: 32px;

    }

    
    
    .content__wrapper-page{
      top:0;
    }
    
    .content.bonuses {
      padding: 0;
      background: none;
    }
    
    .bonuses__list {
  
      gap: 20px;
      display: grid;
      grid-template-columns: repeat(1, 1fr);}

            
    
    .bonuses__item {
      display: flex;
      align-items: center;
      justify-content: center;
   position: relative;
      border-radius: 12px;
      padding: 0;
      min-height: 320px;
      overflow: hidden;
    }
    
    .bonuses__item > * {
      position: relative;
    }
    
    .bonuses__item + .bonuses__item {
      margin-top: 0;
    }
    
    .bonuses__item:before {
      display: none;
    }
    
    
    .bonuses__img img {
      display: block;
      width: 100%;
  height: 100%;
 object-fit: cover;

    }
    
    .bonuses__desc {
     position: relative;
    height: max-content;
    background: linear-gradient(180deg, rgba(15, 83, 92, 0.7) 0%, rgba(1, 142, 152, 0.7) 100%);
backdrop-filter: blur(10px);

max-width: 880px;
      border-radius: 6px;
     
      padding: 20px;
   
    }
    
    .bonuses__desc .wrap {
     
      color: #3C404B;
   
      text-align: center;
    }

    .images__wrap{
      width: 100%;height: 100%;padding: 20px;
     display: flex;justify-content: center;
     align-items: center;
    }
    
    .bonuses__icon {
      background-color: #fff;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      position: absolute;
      top: -40px;
      left: 0;
      right: 0;
      margin: auto;
     
      display: flex;
      
      align-items: center;
      
      justify-content: center;
    }
    
    .title.bonuses__title {
      flex-direction: column;
      color: #FFFFFF;
      font-size: 26px;
      line-height: 32px;
      border: none;
      background: none;
      padding-left: 0;
      padding: 0;
      position: relative;
    }
  .title.bonuses__title::after{
    display: none;
  }
    
    .bonuses__text {
      margin-top: 20px;
      color: #ffffff;
    }
    
    .bonuses__text p {
      margin-top: 0;
      color:#ffffff;
    }
    
    .bonuses__buttons {
     position: relative;
      display: flex;
     flex-wrap: wrap;
      justify-content: center;
     
      gap: 20px;
      margin-top: 20px;
      z-index: 1;
    }
    
    .bonuses__button {
      
      height: 48px;
      width: max-content;
      
      min-width: 151px;
      font-size: 13px;
      line-height: 22px;
      font-weight: 700;
      padding: 13.5px 24px;
      /* width: calc(50% - 8px); */
      margin: 0;
    }
    
    .bonuses__button:first-child {
     background: #2DAF55;


     
    }
    
    .bonuses__button:first-child:hover {
   background: #FF4949;


    }
    
    .bonuses__button:last-child {
    background: #FF4949;
    min-width: 121px;



    }
    
    .bonuses__button:last-child:hover {
       background: #2DAF55;


    }
    
    .hero__button-page{
      display: block;
    margin-top: 0;
    margin-left: 0;
    width: 185px;
    margin-right: auto;

    }

    .hero__button-page:hover{
      background:#2E9344;
    }
   
    

    /* --------------------app-page------------- */

    .hero__page-app{
      /* min-height: 650px; */
      height: auto;
    }

    .hero__img{
      
      z-index: 1;
      position: relative;
      
    }

    .hero__images-decor{
      position: absolute;
      bottom:-40px;right: 0;
     
      
    }
    .banner__app {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      border-radius: 16px;
      padding: 30px;
    }
    .banner__logo {
      max-width: 243px;
      flex: 0 0 243px;
      margin-right: 106px;
      margin-left: 106px;
      z-index: 3;
    }
    
    .banner__logo img {
      max-height: 91px;
    }
    
    .banner__content-app {
      display: flex;
      
      flex-direction: row;
      align-items: center;
      width: 650px;
      gap:16px;
     
      

    }
    .banner__btn {
      display: flex;
      flex-direction: row ;
      position: relative;
      min-width: 200px;
      height: 62px;
      font-size: 15px;
      font-weight: 700;
      align-items: center;
      line-height:18px;
      text-align: center;
      text-decoration: none;
      justify-content: flex-start;
      border-radius: 50px;
      background: transparent;
      color: #ffffff;
     background: #DE594C;
gap: 8px;
      text-transform: uppercase;
        cursor: pointer;
        text-align: left;
      padding:  16px 38px;
      padding: 13px 24px;
      /* margin: 0 auto; */
      transition: all 0.3s ease;
      overflow: hidden;
      z-index: 3;
      
    }
    
    .banner__btn:hover {
     background: #5AB060;

      border:none;

    }

    .banner__btn:last-child{
      background: #5AB060;

    }
    
    .banner__btn:last-child:hover{
 background: #DE594C;
    }
   
 
    
    .button__wrap-app {
      display: flex;
      flex-direction: column;
      gap: 16px;
      z-index: 3;
      ;
    }
    
    
    .banner__btn-app img,
    .banner__btn-android img {
     
      width: 24px;
      height: 24px;
      
    }
    
  

    .hero__list{
      position: relative;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      flex-direction: row;
      gap:20px;
      margin-bottom: 32px;
    }

    .hero__list li{
      display: flex;
      flex-direction: column;
      position: relative;
      justify-content: center;
      color:#ffffff;
      align-items: center;
      flex: 0 0 112px;
      gap: 8px;
      text-align: center;
      
    }

      .hero__list li img{
        width: 40px;height: 40px;
      }
    /* -------------casino-page------------- */
    .casino__hover-link {
  color: #4da533;
  font-weight: 700;
}
.casino__item h3 {
  display: flex;align-items: center;
  font-weight: 700;
  justify-content: center;
  color: #1a2930;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
}

.casino__hover p {
  color: #ffffff;
  font-weight: 700;
}

.casino__buttons {
  min-width: 113px;
  height: 38px;
  line-height: 22px;
  padding: 8px 14px;
  background: #5AB060;

  
}

.casino__buttons:hover{
background: #DE594C;
}
.casino__hover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 background: #000000CC;
  border-radius: 6px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    gap: 16px;
}


.casino__hover-casino{
justify-content: center;
padding: 24px;
}
.casino__item {
  position: relative;
  border-radius: 6px;
  
  box-shadow: 0px 4px 10px 0px #00000040;
  width: 100%;

  overflow: hidden;
}

.casino__item:hover .casino__hover {
  transform: translateY(0);
  opacity: 1;
  z-index: 1;
}
.casino__img {
  display: block;
  width: 220px;
  height: 220px;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.casino__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
 
  display: inline-grid;
  grid-template-columns: auto auto auto auto auto;
}

.casino__list-page{
  grid-template-columns: auto auto auto auto
}

.casino__wrapper {
  /* position: relative; */
  overflow: hidden;
}

.casino__hover h3{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
line-height: 22px;
padding: 0;
}
.casino-box{
  display: flex;flex-direction: column;
  align-items: center;
  gap: 12px;
}

.casino__hover-links{
  color: #FDFDFD;
  text-transform: uppercase
  ;
  
}

.casino{
  background: transparent;
  padding: 0;
}
/*  */
.casino__hover .live__subtitle{
  font-size: 24px;
  line-height: 32px;
}

background: #00000080;