/*
Theme Name: HubVision Child
Template: hubvision
Version: 1.0.13
*/

@import url("../hubvision/style.css"); 
#menu-languages-1 { 
    display: none;
}
header .vsh-header__desktop{
    display: none;
}
header .vsh-header__wrapper {
    position: relative;
}
header .vsh-header__mobile {
    display: block!important;
}
header .vsh-header__mobile .vsh-logo>img {
    max-height: 35px;
}
header .vsh-header__col:nth-child(2) {
    left: 133px;
    position: absolute;
}
header .vsh-btn-default {
    border-radius: 4px;
    background: linear-gradient(180deg, #FBC100 0%, #956E18 100%);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    line-height: 24px;
    padding: 10px 20px;
    border: 0px solid transparent;
}
header .vsh-btn:active,.vsh-btn:visited {
    color: #fff;
}
header .vsh-btn-border {
    border-radius: 4px;
    background: var(--sc_games_green_gradient, linear-gradient(180deg, #01C264 0%, #064223 100%));
    border: 0px solid transparent;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    line-height: 24px;
    padding: 10px 20px;
}
 header .vsh-header__col {
    gap: 20px;
}
header .vsh-header__desktop {
    padding: 11px 0;
}
header .vsh-logo>img {
    max-height: 64px;
}
body header {
    padding: 16px 0;
    display: block;
    max-width: 1190px;
    margin: 0 auto;
}
body .vsh-header__mobile {
    padding: 0 16px;
}
header .vsh-header__burger {
    background: linear-gradient(180deg, #fabe00, #d1a440 100%, #d2963c 0);
    border-radius: 50%;
}
header .vsh-header__burger>div span:before {
    top: -6px;
    width: 100%;
}
header .vsh-header__burger>div span:after {
    right: 0;
    top: 6px;
    width: 100%;
}
header .vsh-header__burger>div {
    height: 20px;
    width: 20px;

}
header .vsh-header__burger>div span,header .vsh-header__burger>div span:after,header .vsh-header__burger>div span:before {
    background-color: #000;
}

header .vsh-header__burger.is-active > div span {
    background-color: transparent; /* Колір спану */
}

header .vsh-header__burger.is-active > div span {
    background-color: transparent; /* Колір спану */
}

header .vsh-header__burger.is-active div span::after{
	top: 0;	
    transform: rotate(45deg);
}
header .vsh-header__burger.is-active div span::before{
	top: 0;	
    transform: rotate(-45deg);
}
/* all*/
body .container {
    max-width: 1190px;
    padding: 0;
    display: grid;
    gap: 16px;
}
/* slider*/
.promo-slider {
    border-radius: 16px;
    background: #0C0C0F;
    color: #fff;
    overflow: hidden;
    margin: 16px 0;
}
.promo-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.promo-text {
    padding-left: 100px;
    gap: 30px;
}
.promo-title {
    font-family: 'Roboto';
    font-size: 50px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 30px;
}

.promo-highlight {
    font-size: 60px;
    font-style: normal;
    font-weight: bold;
    line-height: 64px;
    color: #FBC100;
    margin: 0;
    margin-bottom: 30px;
}
body .container .promo-text a.promo-button {
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    background: linear-gradient(180deg, #FBC100 0%, #956E18 100%);
    padding: 12px 45px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 27px;
    text-decoration: none;
}
.promo-image {
    max-width: 50%;
}

.promo-image img {
    max-width: 100%;
    max-height: 357px;
}

.swiper-pagination {
    position: relative;
    bottom: 10px;
    text-align: center;
}

.swiper-button-prev, .swiper-button-next {
    color: #fff;
}
.vsh-slider__pagination::after{
    content: 'Акції для гравців';
    color: #333333;
    position: absolute;
    right: 40px;
    font-size: 8px;
}
body .vsh-slider__pagination {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 7px 40px;
    margin: 0;
    background-color: #151515;
    flex-wrap: wrap;
    gap: 4px;
    position: relative;
}
body .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {
    bottom: 19px;
}

body .vsh-slider__pagination .swiper-pagination-bullet {
    background-color: #EBEBEB;
    height: 2px;
    width: 16px;
    border-radius: var(--vsh-border-radius-sm);
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

body .vsh-slider__pagination .swiper-pagination-bullet-active {
    height: 2px;
    width: 32px;
    background-color: #FABE00;
}
/* text */
body h1{
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 35px;
    line-height: 35px;
    margin: 0;
}
body h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 32px;
    line-height: 35px;
    display: flex;
    align-items: center;
    margin: 0;
}

body h3{
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    line-height: 24px;
    color: #F1B739;
    margin: 0;
}
body p {
    font-family: 'Roboto';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin: 0;
}
ul li {
    font-family: 'Roboto';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin: 0;
}
body .vsh-page--wrapper .vsh-section__content a:not(.vsh-btn,.sch-button),.vsh-page--wrapper .vsh-section__content p>span {
    text-decoration: none;
}

body .welcom-bonus .promo-content p.promo-text {
    font-family: 'Roboto';
    padding: 0;
}
body ul li:before {
    background-color: var(--vsh-color-light-900);
    border-radius: 50%;
    content: "";
    display: block;
    height: 4px;
    left: -17px;
    position: absolute;
    top: 9px;
    width: 4px;
}
body table {
    border-radius: 12px;
    -webkit-box-shadow: 0 0 0 1px #4F4F4F;
    margin: 0;
    font-family: 'Roboto';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    overflow-x: auto; 
}
body table td:first-child {
    color: #FFD233;
}
body table tr td {
    border: none;
    border-right: 1px solid var(--table_grey, #4F4F4F);
    padding: 15px 20px;
    border-bottom: 1px solid var(--table_grey, #4F4F4F);
}
body table tr:nth-child(2n) td {
    background-color: #050508;
}
body tbody {
    border: 1px solid var(--table_grey, #4F4F4F);
}
/* Button */
body .vsh-btn-gradient{
    text-align: center;
    font-family: 'Roboto';
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    line-height: 24px;
    color: #F4F4F4;
    border-radius: 4px;
    background: var(--sc_games_green_gradient, linear-gradient(180deg, #01C264 0%, #064223 100%));
}
body .vsh-buttons-area {
    margin: 0;
}
button.sl_button {
    text-align: center;
    font-family: 'Roboto';
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    padding: 10px 20px;
    line-height: 24px;
    color: #F4F4F4;
    border-radius: 4px;
    background: var(--sc_games_green_gradient, linear-gradient(180deg, #01C264 0%, #064223 100%));
}
   /* welcome-bonus */ 
   .welcom-bonus {
    display: flex;
    background-color: #0C0C0F;
    color: #F4F4F4;
    border-radius: 8px;
  }
  .welcom-bonus .promo-content p.promo-title {
    font-family: 'Roboto';
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 16px;
  }

  .welcom-bonus .promo-content p.promo-text{
    color: #FFAA05;
    font-family: 'Roboto';
    font-size: 48px;
    font-weight: 900;
    font-style: normal;
    line-height: 90.7%;
    margin-bottom: 16px;

  }
  .welcom-bonus .promo-content p.promo-title::before{
    content: none;
  }
  .promo-content {
    flex: 1;
    max-width: 50%;
    padding: 21px 0 21px 50px;
  }
  
  .container .welcom-bonus .promo-content a.promo-button {
    color: #F4F4F4;
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 16px;
  }

  body .container .welcom-bonus a.promo-button-mob {
    color: #F4F4F4;
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 20px;
  }
  .promo-button {
    display: inline-block;
    background: linear-gradient(180deg, #FBC100 0%, #FBC100 100%);
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s;
    text-align: center;
    font-family: 'Roboto';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
  }
  .promo-button-mob {
    display: none;
  }
  
  .promo-button:hover {
    background-color: #e6b740;
  }
  
  .welcome-bonus-image {
    flex: 1;
    text-align: center;
  }
  
  .welcome-bonus-image img {
    max-height: 265px;
  }
  /* FAQ */

  .vsh-accordion .a-container:nth-child(odd) .a-btn {
    background: #0C0C0F;
}
body .vsh-accordion {
    gap: 0px;
}
 body .vsh-accordion .a-container .a-btn {
    padding: 20px 40px ;
    color: #fff;
    font-family: 'Roboto';
    font-size: 20px;
    background: #141414;
    font-weight: bold;
}

body .vsh-accordion .a-container .a-panel {
    background: #050508;
    color: #AEAEAE;
    font-family: 'Roboto';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.vsh-accordion .a-container .a-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vsh-accordion .a-container .a-panel {
    display: none;
    overflow: hidden;
}

.vsh-accordion .a-container.active .a-panel {
    display: block;
}

.vsh-accordion .a-container .a-btn svg {
    position: absolute;
    right: 40px;
    transition: transform 0.3s ease;
}

.vsh-accordion .a-container.active .a-btn svg {
    transform: rotate(180deg);
}
.app-banner {
    border-radius: 8px;
    border: 1px solid var(--grey_load, #333);
    background: rgba(5, 5, 8, 0.90);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 8px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1120px;
    width: 100%;
    z-index: 1000;
}

.app-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.app-image img {
    height: 100px;
    width: auto;
}
.app-text {
    padding: 0 50px;
}

.app-text p {
    text-align: center;
font-family: 'Roboto';
font-size: 36px;
font-style: normal;
font-weight: bold;
line-height: 43px;
}

.app-text p.titleApp {
    font-family: 'Roboto';
    font-size: 48px;
    line-height: 64px;
    font-weight: 900;
    font-style: normal;
    color: #FFAA05;
}
.app-text h2::before{
    content: none;
}

.app-buttons {
    display: flex;
    gap: 22px;
}

.app-buttons .btn {
    align-items: center;
}

.app-buttons .btn img {
    width: auto;
}

.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

header .vsh-header__col:first-child {
    z-index: 100;
}

/* Адаптивність */
@media (max-width: 1080px) {
    .app-image {
        display: none;
    }
}
@media (max-width: 970px) {
    .app-text {
        padding: 0 20px;
    }
    .app-content {
        gap: 10px;
    }
    .app-text h2 {
        font-size: 36px;
    }
    .app-text p {
        font-size: 26px;
    }
    #cookie-consent button {
        transition: background-color 0.3s ease;
        display: block;
        margin: 0 auto;
        margin-top: 5px;
        top: 10px;
        right: 7px;
      }
}
@media (max-width: 790px) {
    body .vsh-header__mobile .vsh-logo>img {
        max-height: 47px;
    }

    header .vsh-header__col:nth-child(2) {
    left: 140px;
    }
    .nav-menu {
        grid-template-columns: repeat(4, 1fr);
    }
    .promo-image {
        order: 1;
    }

    .promo-text {
        order: 2;
    }
    .promo-text {
        padding-left: 0px;
        gap: 0px;
        padding-bottom: 33px;
        width: 100%;
        z-index: 2;
    }
    .promo-highlight {
        margin-bottom: 16px;
        font-size: 48px;
    }
    body .container .promo-text a.promo-button {
        max-width: 780px;
        display: block;
        font-size: 25px;
    }
    .promo-title {
        font-size: 40px;
        margin-bottom: 0;
    }
    body .container {
        padding: 0 10px;
    }
    .promo-image{
        position: relative;
    }
        .promo-image::after {
            content: '';
        position: absolute;
        right: 0;
        bottom: -14px;
        height: 106px;
        width: 425px;
        background: #000000;
        filter: blur(15px);
        border-radius: 0;
        }
    }

@media (max-width: 768px) {
    .promo-block {
        flex-direction: column;
        text-align: center;
    }

    .promo-text, .promo-image {
        max-width: 100%;
    }

    .promo-image {
        margin-top: 20px;
    }
    .app-text h2 {
        font-size: 30px;
    }
    .app-text p {
        font-size: 20px;
    }
    /* welcom-bonus */
    .welcom-bonus {
        flex-direction: column;
        align-items: center;
    }
    .welcome-bonus-image {
        order: -1;
        margin-bottom: -50px;
        position: relative;
    }
        .welcome-bonus-image:after {
            content: '';
        position: absolute;
        right: 0;
        bottom: -10px;
        height: 80px;
        width: 425px;
        background: #000000;
        filter: blur(15px);
        border-radius: 0;
        }
    .promo-content {
        text-align: center;
        padding: 0;
        z-index: 2;
    }
    .welcom-bonus .promo-content p.promo-title {
        margin-bottom: 0;
    }
    .promo-button {
        display: none;
    }

    .promo-button-mob{
        display: inline-block;
        background: linear-gradient(180deg, #FBC100 0%, #FBC100 100%);
        padding: 10px 20px;
        border-radius: 5px;
        width: 100%;
        text-decoration: none;
        transition: 0.3s;
        text-align: center;
        font-family: 'Roboto';
        color: #F4F4F4;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
    }
    body .vsh-btn-gradient{
        padding: 10px 20px;
    }
}
@media (max-width: 470px) {
    .nav-menu {
        grid-template-columns: repeat(2, 1fr);
    }
    .promo-highlight {
        font-size: 40px;
    }
    .promo-title {
        font-size: 36px;
        margin-bottom: 0;
    }
    body .container .promo-text a.promo-button {
        font-size: 20px;
    }
    .promo-image::after {
        height: 80px;
    }
    .app-banner {
        flex-direction: column;
        padding: 10px;
    }

    .app-content {
        flex-direction: column;
        align-items: center;
    }

    .app-text {
        padding: 0;
        text-align: center;
    }

    .app-buttons {
        margin-top: 10px;
        justify-content: center;
    }
    .app-text h2 {
        font-size: 30px;
        line-height: 30px;
    }
    .app-text p {
        font-size: 20px;
        line-height: 30px;
    }
    .app-text p.titleApp {
        font-size: 30px;
        line-height: 40px;
    }
    #cookie-consent {
        flex-direction: column; 
        align-items: flex-start;
        text-align: left;
        padding: 10px 30px 10px 10px;
      }
      
      #accept-cookies {
        width: 100%;
        margin-top: 10px;
      }
      .promo-content{
        max-width: 80%;
      }
      .welcom-bonus .promo-content p.promo-title {
        font-size: 25px;
        }
    .welcom-bonus .promo-content p.promo-text {
            font-size: 40px;
        }
    .block img {
            width: 180px;
        }    
        .block {
            padding: 30px 8px;
        }
        body .vsh-btn-gradient{
            width: 100%;
            padding: 10px 0;
        }
        body table {
            display: block;
            overflow-x: auto; 
            padding: 0px 0px;
        }
        body h2{
            position: relative;
            
        }
}
@media (max-width: 375px) {
    .welcom-bonus .promo-content p.promo-title {
        font-size: 19px;
        }
    .welcom-bonus .promo-content p.promo-text {
            font-size: 32px;
        }
}
@media (max-width: 345px) {
    header .vsh-header__col:nth-child(2) {
        left: 110px;
    }
    body .vsh-header__mobile .vsh-logo>img {
        width: 120px;
    }
    .promo-highlight {
        font-size: 35px;
    }
}