.gbl-header{margin-bottom: 40px;}
.gbl-header h2{color: var(--color-primary);}
.gbl-header.med{max-width: 900px; margin: 0 auto 40px;}

.primary-btn{
    display: inline-block; padding: 14px 30px; border-radius: 12px; color: var(--color-white); font-weight: 600;
    background: #63B1DC; background: linear-gradient(90deg,rgba(99, 177, 220, 1) 0%, rgba(26, 118, 169, 1) 100%);
}
.primary-btn:hover{background: #63B1DC; background: linear-gradient(90deg,rgba(26, 118, 169, 1) 0%, rgba(99, 177, 220, 1) 100%);
}

.single_slider .owl-nav .owl-prev, .single_slider .owl-nav .owl-next,
.group_slider .owl-nav .owl-prev, .group_slider .owl-nav .owl-next{
    width: 48px; height: 48px; border-radius: 50%; background-color: #73c6d1; color: var(--color-white);
    display: flex; align-items: center; justify-content: center; position: absolute; top: 50%;
    cursor: pointer; margin-top: -24px;
}
.single_slider .owl-nav .owl-prev, .group_slider .owl-nav .owl-prev{left: 0px;}
.single_slider .owl-nav .owl-next, .group_slider .owl-nav .owl-next{right: 0px;}

.gradient-bg{
    background: #FFFFFF url(../images/gradient-bg.png) left top repeat-x;
}


/* Top Header CSS */
.page-header{position: absolute; top: 0; z-index: 99; width: 100%; padding: 20px 0;}
.page-header .container{display: flex; align-items: center; gap: 20px; justify-content: space-between; flex-direction: row-reverse;}
.page-header .container:after{display: none;}
.page-header .menu-wrap > ul{display: flex; gap: 60px;}
.page-header .menu-wrap > ul li{
    font-family: 'Supercell-Magic'; font-weight: 400; position: relative;
    font-size: 16px; line-height: 120%;
}
.page-header .menu-wrap > ul li a{color: var(--color-white);}
.page-header .menu-wrap > ul li a:hover{color: var(--color-478FE2);}

.page-header .dropdow-menu{
    /*position: absolute; 
    top: 100%; left: 0; 
    padding: 20px 0 0;*/
    
    position: absolute; left: 27px; z-index: 3; padding: 10px 0 0;
    -webkit-box-orient: vertical; -webkit-box-direction: normal;
    visibility: hidden; opacity: 0;
    transition: transform .5s ease, opacity .5s ease;
    transform: translateY(20px);
}
.page-header .dropdow-menu ul{background-color: rgba(0, 0, 0, 0.9); border-radius: 10px; padding: 5px 10px;}
.page-header .dropdow-menu ul li{white-space: nowrap; margin: 12px 0; font-size: 14px;}
.page-header .menu-wrap > ul li:hover .dropdow-menu {visibility: visible; opacity: 1; transform: translatey(0px);}
.page-header .dropdow-menu ul li img{max-width: 60px; border: 1px solid #fff;}

.page-header .menu-wrap > ul li:hover .dropdow-menu {
    visibility: visible;
    opacity: 1;
    transform: translatey(0px);
}

.inner-header{padding: 20px 0;}
/* TEnd CSS */


/* Banner CSS */
.banner_wrap{    
    background:#012249 url(../images/banner-image.png) center no-repeat;
    background-size: cover; min-height: 770px; position: relative; padding: 170px 0 50px;
}
.banner_wrap .banner-top-info {display: flex; flex-direction: column; gap: 25px; max-width: 500px; margin-bottom: 20px;}
.banner_wrap .banner-top-info h1{margin-bottom: 0;}
.banner_wrap .banner-top-info .group-fish-img{display: flex; align-items: center; gap: 10px;}

.banner_wrap .banner-bottom-info{display: flex; align-items: center; justify-content: space-between; gap: 25px;}
.banner_wrap .banner-bottom-info .group-btn{display: flex; gap: 25px;}

.connect-btn{
    display: inline-block; padding: 10px; border-radius: 80px; color: var(--color-3A3A3A); font-weight: 700;
    background: linear-gradient(0deg,rgba(180, 111, 31, 1) 0%, rgba(247, 158, 41, 1) 50%);
}
.connect-btn span{
    display: flex; align-items: center; justify-content: center;
    padding: 10px; border-radius: 80px; min-width: 150px; background: #FFF2E1;
    background: linear-gradient(90deg,rgba(255, 242, 225, 1) 0%, rgba(255, 178, 79, 1) 100%);
}
.connect-btn:hover span{background: #FFF2E1; background: linear-gradient(90deg,rgba(255, 178, 79, 1) 0%, rgba(255, 242, 225, 1) 100%);}
/* TEnd CSS */


/*  GET THE BEST SHIPS CSS */
.bestship_wrap{position: relative; padding: 100px 0 140px;}
.bestship_wrap .group_slider{padding: 0 0px 30px;}

.bestship_wrap .owl-nav .owl-prev{left: -50px;}
.bestship_wrap .owl-nav .owl-next{right: -50px;}

.bestship_wrap .bestship-cards{
    border: 1px solid #6dd5ef; border-radius: 30px; padding: 25px;
    box-shadow: 0 4px 8px 0 rgba(1, 152, 171, 0.2); margin: 8px;
}
.bestship_wrap .bestship-cards figure{
    background: url(../images/ship-slider-bg.png) center no-repeat;
}
.bestship_wrap .bestship-cards h6{margin: 20px 0 0;}
/* TEnd CSS */


/* BEST PRODUCT CSS */
.best-products_wrap{
    background: #BAEAFF; padding: 0px 0 240px;
    background: linear-gradient(0deg,rgba(186, 234, 255, 1) 0%, rgba(90, 195, 236, 1) 100%);
}
.best-products_wrap .mtb-80{margin: 100px 0 80px;}

.fishstick_wrap{
    display: flex; flex-wrap: wrap; justify-content: center ; 
    position: relative; top: -60px; margin-bottom: -60px; gap: 42px;
}
.fishstick_wrap .fishstick-box{
    background: var(--color-white); padding: 15px; border-radius: 15px; box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.35);  
    background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(179, 226, 255, 1) 100%); text-align: center;
}

.product-card{display: flex; flex-direction: column; text-align: center; gap: 15px; height: 100%;}
.product-card h4{color: var(--color-white); max-width: 380px; margin: 0 auto;}
.product-card .product-card-box{
    background: var(--color-white); padding: 25px; border-radius: 30px;
    box-shadow: 0 4px 8px 0 rgba(1, 152, 171, 0.2); margin-top: auto;
}
.product-card .product-card-box .items{
    background: #E6FAFF; border-radius: 25px; min-height: 350px;
    background: linear-gradient(180deg,rgba(230, 250, 255, 0) 0%, rgba(1, 152, 171, 0.16) 100%);
}
.product-card .product-card-box .items figure{
    width: 230px; height: 240px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; padding: 20px; margin: auto;
}
.product-card .product-card-box .items.selected figure{
    border: 1px solid var(--color-0198AB); background: #E5F5F7;
    background: linear-gradient(180deg,rgba(229, 245, 247, 1) 0%, rgba(201, 233, 237, 1) 100%);
}
.product-card .product-card-box .check-item{
    display: flex; align-items: center; justify-content: center; 
    color: var(--color-0198AB); font-weight: 500; margin-top: 20px; padding: 15px;
    border: 1px solid var(--color-0198AB); border-radius:10px; font-family: 'Supercell-Magic';
}
.product-card .product-card-box .check-item input[type="checkbox"]{
    width: 20px; height: 20px; border: 1px solid var(--color-0198AB);
} 
.product-card .product-card-box .check-item.select{    
    background: #89CCF0; color: var(--color-white);
    background: linear-gradient(90deg,rgba(137, 204, 240, 1) 0%, rgba(56, 153, 206, 1) 100%);
}


.product-card .product-card-box .owl-nav .owl-prev, 
.product-card .product-card-box .owl-nav .owl-next{
    background-color: var(--color-0198AB);
}
/* TEnd CSS */


/* HOW THE GAME WORK CSS */
.game-work_wrap{position: relative; background: var(--color-white); padding: 50px 0;}
.game-work_wrap:before,
.game-work_wrap:after{
    content: ''; position: absolute; left: 0; height: 190px; width: 100%;
    background: url(../images/cloud-top-img.png) top center repeat-x; z-index: 1;
}
.game-work_wrap:before{top: -190px;}
.game-work_wrap:after{bottom: -190px; transform: scaleY(-1);}

.game-work_wrap.has-arrow{padding-bottom: 150px;}
.game-work_wrap.has-arrow .with-arrow{position: relative;}
.game-work_wrap.has-arrow .with-arrow:after{
    content: ''; position: absolute; right: -80px; bottom: -80px; height: 40px; width: 134px;
    background: url(../images/bottom-arrow-img.png) top center repeat-x; z-index: 1;
}

.game-cards{border: 1px solid var(--color-0198AB); border-radius: 30px; padding: 30px; height: 100%;}
.game-cards figure{height: 130px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;}
.game-cards p{margin: 0px;}
.game-cards h4{min-height: 45px;}
/* TEnd CSS */


/*  BIG BONUS CSS */
.big-bonus_wrap{
    position: relative; padding: 300px 0 150px; background: #ECAE41;
    background: linear-gradient(0deg,rgba(236, 174, 65, 1) 0%, rgba(254, 227, 158, 1) 100%);
}
.bigbonus-block{display: flex; align-items: flex-start; justify-content: space-between;}
.bigbonus-block .details{font-size: 18px;}
.bigbonus-block .details ul{list-style: disc; margin: 0 0 0 20px;}
.bigbonus-block .details ul li{margin: 15px 0;}
/* TEnd CSS */


/*  TEXT PAGE CSS */
.text-page{min-height: 600px;}
.text-page h2{font-size: 24px;}
.text-topbox{margin-bottom: 50px;}

.txtbox{margin-bottom: 50px;}
.txtbox a{color: var(--color-primary);}
.txtbox a:hover{text-decoration: underline;}
.txtbox ul{margin-left: 20px;}
.txtbox ol li{position: relative; margin: 10px 0;}
.txtbox ul li{position: relative; padding-left: 20px; margin: 10px 0;}
.txtbox ul li:before {
    content: ""; position: absolute; left: 0; top: 11px;
    width: 6px; height: 6px; background: #000; border-radius: 50%;
}

/* TEnd CSS */

/* FOOTER CSS */
.page-footer{background-color: var(--color-black); position: relative;}
.page-footer .footer-top{
    padding: 70px 0; color: var(--color-white); display: flex; gap: 20px; 
    justify-content: center; flex-direction: column; align-items: center;
}
.page-footer .social-media{display: flex; align-items: center; gap: 20px;}
.page-footer .social-media li{position: relative;}
.page-footer .social-media li a{
    display: flex; align-items: center; justify-content: center; gap: 16px;
    background: var(--color-white); color: var(--color-162C79); width: 36px; height: 36px; border-radius: 50%; padding: 6px;
}

.page-footer  .footer-link{display: flex; flex-wrap: wrap; justify-content: center;}
.page-footer  .footer-link li{border-right: 1px solid var(--color-white); padding: 0 20px; margin: 5px 0; line-height: 1;}
.page-footer  .footer-link li:last-child{border: 0;}
.page-footer  .footer-link li a:hover{color: var(--color-478FE2);}



.page-footer .footer-bottom{background-color: var(--color-06185E); padding: 15px 0; color: var(--color-white);}
.page-footer .footer-bottom .container{display: flex; align-items: center; gap: 20px; justify-content: space-between;}
.page-footer .footer-bottom .container::after{display: none;}
.page-footer .footer-bottom p{margin: 0px;}
.page-footer .footer-bottom .contact-link{display: flex; gap: 10px; font-size: 14px;}
.page-footer .footer-bottom .contact-link:hover{color: var(--color-478FE2);}
/* TEnd CSS */

@media (max-width:1500px) {
    .bestship_wrap .group_slider {padding: 0 50px 30px;}
    .bestship_wrap .owl-nav .owl-prev {left: 0px;}
    .bestship_wrap .owl-nav .owl-next {right: 0px;}
}

@media (max-width:1024px) {
    .fishstick_wrap{gap: 30px;}
    .fishstick_wrap li{width: calc((100% - 60px) / 3);}

    .game-work_wrap.has-arrow{padding-bottom: 50px;}
    .game-work_wrap.has-arrow .with-arrow:after{display: none;}

    .big-bonus_wrap{padding: 250px 0 100px;}

    .page-footer .footer-top{padding: 50px 0;}
    .page-footer .footer-bottom .container {flex-direction: column; gap: 5px; font-size: 14px;}

}

@media (max-width:767px) {
    .banner_wrap{padding-top: 190px;}
    .banner_wrap .banner-top-info{max-width: 100%;}
    .banner_wrap .banner-top-info figure{margin: auto;}
    .banner_wrap .banner-top-info h1{text-align: center;}
    .banner_wrap .banner-top-info .group-fish-img{justify-content: center;}

    .banner_wrap .banner-bottom-info{flex-direction: column; justify-content: center;}

    .page-header .container{flex-direction: column; gap: 10px;}
    .page-header .menu-wrap > ul {gap: 30px;}

    .fishstick_wrap{gap: 15px;}
    .fishstick_wrap li{width: calc((100% - 30px) / 3);}

    .bigbonus-block {flex-direction: column-reverse; align-items: center; gap: 30px;}

    .bestship_wrap {padding: 50px 0 120px;}

    .big-bonus_wrap{padding: 250px 0 50px;}

    .best-products_wrap .mtb-80 {margin: 50px 0;}

    .game-work_wrap{padding: 0px;}
    .game-work_wrap.has-arrow {padding-bottom: 0px;}
       
    
    .page-footer .footer-top{padding: 30px 0;}    
}

@media (max-width:600px) {
    .page-header .logo-wrap img{max-width: 110px;}
    .banner_wrap{    
        background:#012249 url(../images/mob-banner-image.png) left bottom no-repeat;
        padding: 170px 0 20px; background-size: cover;
    }

    .banner_wrap {padding-top: 160px;}
    .banner_wrap .banner-top-info {gap: 15px; margin-bottom: 0px;}
    .banner_wrap .banner-top-info h1 {font-size: 24px;}        
    .banner_wrap .banner-top-info figure img{max-width: 200px;}
    .banner_wrap .banner-bottom-info {margin-top: 300px; gap: 10px;}    
    .banner_wrap .banner-bottom-info .group-btn img{max-width: 150px;}
    
    .connect-btn {padding: 5px; border-radius: 80px;}
}