/* on mobile devices below 600px
 */
 @media screen and (max-width: 600px) {
  :root {
      --header-height : 100px;
      --header-height-min   : 80px;
  }
}

/* Fonts */
:root {
  --body-font           : "Poppins", sans-serif;
  --heading-font        : "Poppins", sans-serif;
}

/*----------------------------------------------*/
/* 1 GENERAL TYPOGRAPHY */
/*----------------------------------------------*/

/* 1.1 General Styles
/*----------------------------------------------*/
*, *::before, *::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
box-sizing: border-box;
}
body {
font-family: var(--body-font);
font-size: 14px;
font-weight: 500;
line-height: 1.6;
margin: 0;
}
p {
font-size: 1.2em;
color: var(--gray-color-500);
}
ul.inner-list li {
 font-size: 1.2em;
}
a {
color: var(--dark-color);
text-decoration: none;
transition: 0.3s color ease-out;
}
a.light {
color: var(--light-color);
}
a:hover {
text-decoration: none;
color: var(--primary-color);
}


.padding-large {
    padding-top: 80px;
    padding-bottom: 80px;
}

.padding-games-top
{
    padding-top: 80px;
    padding-bottom: 40px;
}



/* no padding and margin */
.no-padding {
padding: 0 !important;
}
.no-margin {
margin: 0 !important;
}



.label-head
{
 
    color:#758B8E;
    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    padding-top: 0px;
    font-size: 28px;
    padding-bottom: 0px;
    margin-bottom: 0px;

}

#billboard
{
   
  display: flex;
  flex-direction: column;
  align-items: center;
  
  gap: 40px;

  width: 100%;
  height: auto;

  background: #FFFFFF;
  background-image: url(img/im_1s_bg_bottom.png);
  background-repeat: no-repeat;
  background-position: 0 100%;
  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  margin-top: 120px;
  padding-bottom: 80px;

}
#games-block
{
   
  display: flex;
  padding-bottom: 80px;

  width: 100%;
  height: auto;

  background: #008345;
  background-image: url(img/Vector.png);
  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

}

#games-block-mobile
{
    background: #008345;
    background-image: url(img/Vector.png);
    background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.top-game
{
  /* ContentBlock */

/* Auto layout */

flex-direction: row;
align-items: flex-start;

gap: 80px;

width: 100%;
max-width: 100%;
height: auto;


/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;

}
.game-head
{
 /* 30+ games */

width: 100%;
height: 72px;

/* Header/heading-5xl */
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 64px;
line-height: 72px;
/* identical to box height, or 112% */
letter-spacing: -2px;
font-feature-settings: 'ss04' on;

color: #FFFFFF;


/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
 
}
.game-h3
{
    /* For all categories */

    width:100%;
    height: 32px;

    /* Header/heading-2xl */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 32px;
    /* identical to box height, or 114% */
    letter-spacing: -0.2px;
    font-feature-settings: 'ss04' on;

    color: rgba(255, 255, 255, 0.4);


    /* Inside auto layout */

    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.game-block
{
    padding: 80px;
    max-width: 100%;
    height: auto;

    background: #FFFFFF;
    border-radius: 48px;

    
    
    width: calc(100% - 20px);
    margin: 0 auto;

}

.g-tile
{
  /* tile */

/* Auto layout */
display: flex;
flex-direction: column;
align-items: center;
padding: 24px;
gap: 12px;

width: 211.2px;
min-width: 180px;
max-width: 312px;
height: 204px;

background: #EEE2FC;
border-radius: 24px;

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 1;
z-index: 0;

}

.game-view-button 
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
    gap: 8px;

    width: 162px;
    height: 48px;


    border-radius: 12px;

    color: #273435;
    background-color: white;
    border: 1px solid black;
}

.how-to-play
{
 
padding: 24px;

width: 100%;
height: 156px;

background: #F5F9F9;
border-radius: 16px;
background-image: url(img/heart.svg);
background-position: 100%;
background-repeat: no-repeat;


}
#company-services
{
  /* 2_sreen */

/* Auto layout */
display: flex;
flex-direction: column;
align-items: center;
padding: 80px;
gap: 40px;

width: 100%;
height: auto;

background: #EEE2FC;


}
#features .f-tile
{
  /* Tile1 */

/* Auto layout */

flex-direction: column;
align-items: flex-start;
padding: 40px 40px 0px;
isolation: isolate;



background-image: url(img/Intersect.png);
border-radius: 48px;

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 1;


}
.gp1
{
/* Tile1 */

background: #FCE4EE;


}
.gp2
{

background: #D1E9FF;

}
.gp3
{
  background: #D3F8DF;
}
.gp4
{
  background: #EEE2FC;
}
.block
{
  /* Block */

/* Auto layout */
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
width: 100%;
max-width: 100%;


background-color: #FFFFFF;
border-radius: 48px;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;

}
.tile
{
    /* Tile1 */

  box-sizing: border-box;

  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
  gap: 24px;

  min-width: 325px;


  border-right: 4px solid #EEE2FC;


}

.tile:nth-child(3)
{
    border-right: none;
}

.improve-section-main-block
{
    min-width: 975px;
}

.improve-section-main-block-row
{
        overflow: auto;
    width: calc(100% + 102px);
}

.banner-head1
{
 

/* Header/heading-5xl */
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 64px;
line-height: 72px;


color: #273435;


/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;

}
.banner-para
{
  

/* Body/body-xl/regular */
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 28px;
color: #273435;

padding-bottom: 20px;
padding-top: 20px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 1;

}
.button-fill
{
  
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
    gap: 8px;

    height: 48px;

    background: #273435;
    border-radius: 12px;

    /* Inside auto layout */
    flex: none;
    order: 2;
    flex-grow: 0;

    /* Button Label */

    /* Label/lg-semibold */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    color: #FFFFFF;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
    border-color: transparent;

}



.site-header {
  position: fixed;
  width: 100%;
  z-index: 10;
  transition: background 0.3s ease-out;
  top: 0px;
  
}
.navbar-toggler svg.navbar-icon {
  width: 50px;
  height: 50px;
}
.navbar-nav .nav-item a.nav-link {
  color: var(--accent-color);
  /* MenuText */


/* Body/body-lg/medium */
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */

color: #273435;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;

}
.navbar-nav .nav-item a.nav-link.active, 
.navbar-nav .nav-item a.nav-link:focus, 
.navbar-nav .nav-item a.nav-link:hover {
  color: var(--primary-color);
}

/*------------ Offcanvas -------------- */
#header-nav .navbar-toggler:focus {
  box-shadow: none;
}
#header-nav .offcanvas.show {
  z-index: 9999;
  background-color: white;
}
#header-nav .offcanvas-end {
  width: 500px;
}
.offcanvas.show .nav-item a.nav-link {
  font-size: 2em;
}
.offcanvas.show .offcanvas-body .navbar-nav {
  align-items: unset!important;
  padding-left: 20px;
}

.site-header .user-items svg {
  width: 18px;
  height: 18px;
  cursor: pointer;
}



.icon-box .icon-box-icon svg {
  width: 26px;
  height: 26px;
  fill: var(--primary-color);
}

@media only screen and (max-width: 991px) {
#company-services .icon-box {
  flex-wrap: wrap;
}
}

.swiper-pagination span.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
}





.social-links svg {
  width: 20px;
  height: 20px;
  color: var(--light-gray-color);
}
.social-links svg:hover {
  color: var(--primary-color);
}
.social-links li {
padding-left: 16px;
}





.container-fluid{
    max-width: 1280px;
}


@media screen and (max-width: 1439px)
{
    .container-fluid{
        max-width: 1359px;
    }
}


#navbar li
{
    margin-right: 40px;
}

#navbar li:nth-last-child(1)
{
    margin-right: 0px;
}

.download-app-container-banner img{
    margin-right: 8px;
    margin-bottom: 5px;
}

.section-title
{
    color: #273435;
    font-size: 64px;
    padding-bottom : 40px;
    font-weight: 600;
    margin-bottom: 0px;
}

.tile-head{
    font-size: 40px;
    padding-bottom: 16px;
    margin-bottom: 0px;
}

.box-p-text
{
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 24px;
}

.f-tile-image
{
    padding-left: 40px;
    padding-right: 40px;
}

.f-tile-container:nth-child(1), .f-tile-container:nth-child(2)
{
    margin-bottom: 80px;
}

#games
{
    background-color: #008345;
}

.text-right
{
    text-align: right;
}

.footer-top-text
{
    color: #758B8E;
    font-size: 28px;
    line-height: 32px;
}

.footer-bottom-text{
    color: #273435;
    font-size: 64px;
    line-height: 72px;
}

.footer-download-button-container{
    float: right;
}


.menu-item
{
    color: #758B8E;
    font-size: 16px;
}

.menu-list-title
{
    color: #273435;
    font-size: 18px;
}

.footer-menu span
{
    padding-right: 24px;
    display: inline-block;
}

.footer-line
{
    color:#E9EEEF;
    height:2px;
        margin-bottom : 40px;
}

.games-social-media-icon-container a
{
    margin-right: 16px;
        margin-right: 16px;
    display: inline-block;
    background-color: white;
    padding: 15px;
    border-radius: 100%;
}

.align-left
{
    text-align: left;
}

.center
{
    text-align: center;
}

.copyright p, .copyright_right_text span{
    color: #758B8E;
    font-size: 14px;
}

.copyright_right_text
{
    text-align: right;
}

.copyright_right_text a
{
    margin-left: 32px;
   
}

.toggle-button
{
    cursor: pointer;
    background-color: transparent;
    border-color: transparent;
}


.hcenter
{
    text-align: center;
}

.bg-grape{
    background-color: #EEE2FC;
    
}

.bg-blue
{
    background-color: #D1E9FF;
}

.bg-green{
    background-color: #D3F8DF;
}

.bg-brown
{
    background-color: #FFE3DB;
}

.bg-game-tile
{
    border-radius: 24px;
    padding-top: 24px;
}

.game-tile
{
    height: 204px;
    
}

.icon-box-text
{
    font-size: 14px;
}

.game-block-inside-container{
    height: 525px;
    overflow: hidden;
    position: relative;
 
}

.game-block-inside-container.full-height{
    height:  816px;
    transition: height 0.5s ease-in;
}

.see_all_games_button
{
   position: absolute;
   bottom : 66px;
   left: calc((100% - 112px)/2);
   background-color: transparent;
   font-weight: bold;
}




.game-tile:nth-child(n+11)
{
    opacity: 0.3;
}

.game-block-inside-container.full-height .game-tile
{
    opacity: 1;
}

.mobile-fixed-game-section
{
    display: none;
}

#features img, #company-services img
{
    max-width: 100%;
}

@media screen and (max-width: 1200px)
{
    .footer-menu span.menu-item
    {
        display: block;
        width: 100%;
    }
    
}

@media screen and (max-width: 991px)
{
    .games-social-media-icon-container{
        text-align:center;
        margin-top: 24px;
        padding-bottom: 36px;
    }
    
    .games-social-media-icon-container label
    {
        margin-bottom: 16px;
    }
    
    .games-social-media-icon-container img
    {
        max-width: 40px;
    }
    
    .copyright, .copyright_right_text
    {
        text-align: center;
    }
    
    #footer
    {
        padding-bottom: 24px;
    }
    
    .copyright
    {
        margin-top: 24px;
    }
    
    .join_our_community_text
    {
        padding-bottom: 16px;
        display: block;
    }
    
    .footer-download-button-container
    {
        float: left;
        margin-top: 16px;
        display:block !important;
        
    }
    
    .footer-download-button-container li
    {
        margin-top: 5px;
    }
    
    .social-links li
    {
        padding-left: 0px;
        padding-right: 16px;
    }
    
    .footer-line
    {
        margin-bottom: 24px;
    }
    
    .footer-initial-area
    {
        margin-bottom: 24px !important;
        padding-bottom: 0px !important;
    }
    
    .f-tile-image
    {
        text-align: center
    }
    
    .f-tile-image img
    {
        max-width: 404px;
    }
    
    .icon-box-content
    {
        width: 100%;
    }
    
    #company-services
    {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .offcanvas.show .nav-item a.nav-link {
        font-size: 20px;
        
      }
      
      #navbar li
      {
          padding: 24px;
      }
      
      .offcanvas.show .offcanvas-body .navbar-nav{
          padding-left: 0px;
      }
      
      .offcanvas-body
      {
          padding : 0px;
          position: relative;
      }
      
      .close-button-menu-mobile
      {
          position: absolute;
          bottom : 24px;
          right: 24px;
      }
      
      .offcanvas.show .nav-item a.nav-link.menu-mobile-text
      {
          font-size: 40px;
      }
      
      .game-tile
      {
          max-width: 140px;
          float: left;
          margin-right: 8px;
          height: 152px;
          transition: transform .2s;
      }
      
      .mobile-fixed-game-section .game-tile
      {
          max-width: unset;
          margin-right: unset;
      }
      
      
      
      .game-tile img
      {
          width: 76px;
      }
      
      .game-block
      {
          padding: 0px;
          padding-top: 24px;
          padding-bottom: 24px;
          border-radius: 24px;
          overflow:hidden;
      }
      
      .game-tile
      {
          opacity: 1 !important;
      }
      
     .mobile-game-block-1 .js-marquee:nth-child(1)
     {
         margin-left: -700px;
     }
     
     .mobile-game-block-2 .js-marquee:nth-child(1)
     {
         margin-left: -900px;
     }
     
     .see_all_games_button_mobile
     {
         position: unset;
         width: calc(100% - 48px);
         margin-left: 24px;
     }
     
     .mobile-fixed-game-section
     {
       
        position: fixed;
        right: 0px;
        background-color: white;
        max-width: 500px;
        width: 100%;
        height: 100vh;
        z-index: 10;
        top: 0px;
        overflow: auto;
        padding: 44px 24px;
       
        
     }
     
     .all_games_text
     {
         font-size: 40px;
         font-weight: 600;
         padding-bottom: 24px;
     }
     
     .icon-box-text
     {
         font-size: 12px;
     }
     
     .close_games_mobile
     {
         position: fixed;
         right: 24px;
         bottom : 24px;
     }
     
     #company-services
    {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    
    .padding-large
    {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    
    .section-title{
        font-size: 40px;
        padding-bottom: 24px;
    }
    
    .f-tile-container
    {
        margin-bottom: 24px !important;
        padding-bottom: 0px !important;
    }
    
    .padding-games-top
    {
        padding-top: 32px;
        padding-bottom: 24px;
    }
    
    .game-h3, .footer-top-text
    {
        font-size: 24px;
        line-height: 28px;
    }
    
    .game-head, .footer-bottom-text
    {
        font-size: 40px;
        line-height: 48px;
    }
    
    .label-head
    {
        font-size: 24px;
    }
    
    .tile-head
    {
        font-size: 32px;
    }
    .box-p-text
    {
        font-size: 16px;
        line-height: 24px;
    }
    
    .footer-top-area
    {
        margin-top: 8px !important;
    }
    
     .improve-section-main-block-row
    {
        width: calc(100% + 39px);
    }
}

@media screen and (max-width: 768px)
{
    .image-holder
    {
        margin-top: 32px;
    }
    
    
   
}


@media screen and (min-width: 576px)
{
    .image-holder
    {
        min-width:404px;
        overflow:hidden;
    }
}


@media screen and (max-width: 500px)
{
    .tile{
        min-width: 250px;
        padding: 24px;
    }
    
    .improve-section-main-block
    {
        width: 760px;
    }
    
    
    
    .section-2-tile-body
    {
        min-height: 115px;
    }
    
    .section-2-label-head{
        font-size: 24px;
    }
    
    .section-2-tile-head
    {
        font-size: 32px;
    }
    
    #header-nav .offcanvas{
        height: 524px;
    }
    
    
    
}

/*bootstrap extend */
@media (min-width: 1440px) {
    .row-cols-large-5>* {
        flex: 0 0 auto;
        width: 20%;
    }
}