@charset "UTF-8";
.hidden-section {
            display: none;
        }
		
        body {
            width: 1125px;
			width: 100%;
            background-color: black;
            font-family: 'Plus Jakarta Sans', sans-serif;
            margin: 0 auto;
            padding: 0;
            text-align: center;
            color: white;
        }

        .full-width-banner01 {
            width: 718px; 
            max-width: 100%;
			margin: 0 auto;
            height: auto;
            background-size:cover;
            position: relative;
            padding-top: 40px;
			background-position: top center;
            background-image: url('image/background-01.jpg');
        }
        
        .full-width-banner02 {
            width: 718px; 
            max-width: 100%;
			margin: 0 auto;
            height: auto;
            background-size:cover;
            position: relative;
			background-position: top center;
            background-image: url('image/background-02.jpg');
        }
        .full-width-banner03 {
            width: 718px; 
            max-width: 100%;
			margin: 0 auto;
            height: auto;
            background-size:cover;
            position: relative;
			padding-bottom: 30px;
			background-position: top center;
            background-image: url('image/background-03.jpg');
        }

        .block {
            max-width: 100%;
            height: auto;
        }
        
        
        .video{
            align-items: center;
            margin: 0 auto;
            position: relative;

            height: auto;
            padding: 0 20px;
        }
        
        .zoom-image {
            width: 200px;
            height: 100%;
            animation: zoomInOut 0.5s infinite ease-in-out;
        }
        
        .zoom-image-02 {
            width: 340px;
            height: 100%;
            animation: zoomInOut 0.5s infinite ease-in-out;
        }

        @keyframes zoomInOut {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.3);
            }
            100% {
                transform: scale(1);
            }
        }
        
 /* Testimonial styles */    
         .gallery-container {
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              margin: auto 10px;
            }
        .gallery {
              display: flex;
              overflow: hidden;
              width: 90%;
            }
       .gallery img {
              width: 33.33%;
              transition: transform 0.3s;
            }
        .gallery img:hover {
              transform: scale(1.1);
            }
        .nav-button {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              background-color: rgba(0, 0, 0, 0.5);
              color: #fff;
              border: none;
              padding: 10px;
              cursor: pointer;
              z-index: 2;
            }
            .nav-button.left {
              left: 10px;
            }
            .nav-button.right {
              right: 10px;
            }
        
    /* Lightbox styles */
     .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      z-index: 10;
    }
    .lightbox img {
      max-width: 90%;
      max-height: 90%;
    }
    .lightbox .close {
      position: absolute;
      top: 10px;
      right: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer; font-size: 31px;
    }
    .lightbox .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer;
    }
    .lightbox .arrow.left {
      left: 10px;
    }
    .lightbox .arrow.right {
      right: 10px;
    }
        
        
    /* Games styles */
        .gallery-container-game {
            display: flex;
            justify-content: center;
            align-items: center;         
            position: relative;
            margin: auto 20px;
        }   
        
        .gallery-game {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            width: fit-content;
        }
        .gallery-game img {
            width: 100%;
            height: auto;
            border: 2px solid #e0b718;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }
        .gallery-game img:hover {
            transform: scale(1.1);
        }
        
     
        
     /* Form styles */       
        .inputs table {
            max-width: 95%;
            padding: 0 0; 
            color: white!important; 
            border-collapse: collapse!important; 
            border: none!important;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            margin: auto 20px;
        }
        
        .inputs tr td {
	        padding: 0 0 15px; 
            color: #cccccc; 
            border: none!important;  
        }
        
        .inputs p { 
            line-height: 18px; 
            color: white; 
            margin: 5px 0 0; 
            padding: 0;
            text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
            font-size: 14px;
        }
        
        .inputs a { 
            color: #ccc; 
            text-decoration: none
        }

        .inputs span { 
            color: #ffa200
        }
        .signup-tf{ 
            width: 82%; 
            font-size: 14px; 
            background-color:#efefef; 
            color: #0d141b; 
            border: none; 
            padding: 4%; 
            -webkit-
            border-radius: 3px;
            -moz-
            border-radius: 3px;
            border-radius: 3px;
        }

        .signup-tf:focus{
            outline: none
        }
        .signup-tf:
        :-webkit-input-placeholder { /* Chrome/Opera/Safari */
         font-size: 14px
        }
        .signup-tf::-moz-placeholder { /* Firefox 19+ */
          font-size: 14px
        }
        .signup-tf:-ms-input-placeholder { /* IE 10+ */
          font-size: 14px
        }
        .signup-tf:-moz-placeholder { /* Firefox 18- */
          font-size: 14px
        }
        .signup-btn{
            width: 95%; 
            background-color: #f8c11a; 
            color: #000; 
            padding: 15px 0px; 
            margin-top: 10px; 
            border: none; 
            font-size: 18px; 
            font-weight: bold; 
            -webkit-
            border-radius: 3px; 
            -moz-
            border-radius: 3px;
            border-radius: 3px; 
            cursor: pointer; 
            -moz-
            transition: all .3s ease-in; 
            -o-
            transition: all .3s ease-in; 
            -webkit-
            transition: all .3s ease-in;
            transition: all .3s ease-in;
        }
        
        .signup-btn a{
            text-decoration: none; 
            color: #fff
        }
        .signup-btn:hover{
            background-color: #ffa200; 
            color: #000!important
        }
        .err{
            color:red
        }
        
        
 
        
        .container {
            display: flex;
            flex-wrap: wrap; /* Allows columns to stack on smaller screens */
            gap: 10px;
            margin: 0 15px;
        }

        .column {
            flex: 1;
            min-width: 280px; /* Ensures columns don't shrink too much */
            padding: 0 5px;
        }
        
        .column img {
            width: 100%;
        }
        

        
        ul {
            padding-left: 20px;
            text-align: left;
            letter-spacing: 0.5px;
        }

        li {
            margin-bottom: 10px;
        }
        
        h3 {
            letter-spacing: 0.5px;
            font-size: 26px;
            color: gold;
            margin-bottom: -20px;
        }
        
        h4 {
            letter-spacing: 0.5px;
            font-size: 20px;
            color: white;
        }
        
        p {
            font-size: 16px;
            color: white;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.1);
            margin-top: -1px;
        }
        
        
    .vimeoSliderX1_container {
      align-items: center;
      margin: 0 auto 10px;
      max-width: 510px;
      width: 90%;
      aspect-ratio: 16 / 9;
      position: relative;
      overflow: hidden;
      border: 2px solid gold; 
      box-shadow: 10px 10px 10px 2px rgba(0, 0, 0, 0.5);
    }

    .vimeoSliderX1_wrapper {
      display: flex;
      height: 100%;
      width: 200%; /* 2 slides side-by-side */
      transition: transform 0.8s ease-in-out;
    }

    .vimeoSliderX1_slide {
      width: 50%; /* half of wrapper = 1 full slide */
      height: 100%;
      flex-shrink: 0;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;  
    }

    .vimeoSliderX1_arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-40%);
      background: gold;
      color: black;
      border: none;
      font-size: 1.5rem;
      padding: 1rem 0.5rem;
      cursor: pointer;
      z-index: 10;
      border-radius: 999px;     
    }

    .vimeoSliderX1_left {
      left: 10px;
    }

    .vimeoSliderX1_right {
      right: 10px;
    }

    .vimeoSliderX1_arrow:disabled {
      opacity: 0.3;
      cursor: default;
    }

    .home-app { width:70%; padding-top:10px; }  
        
        /* Responsive design */
            @media (max-width: 768px) {
            .container {
                flex-direction: column; /* Stack columns on smaller screens */
            }
            .home-app { width:85%; padding-top:10px; }
        }