/* 
    Author     : Abinandh MJ, Ayushi Yadav, Ashwini Kumar, Vaishnavi, Vinaydeep Ambati, Harshitha Reddy Gujja , Koppula Venkata Bharathi
    version    : v1.0
*/

 /*google font*/
 @import url(https://fonts.googleapis.com/css?family=Poppins:400,700,600,500,300);

 /* Global Styles */
 *,
 *::after,
 *::before {
     box-sizing: border-box;
 }

 body {
     font-family: "Poppins", sans-serif;
     margin: 0 auto;
     padding: 0;
     background-color: #fff;
     overflow-x: hidden;
 }

 hr.separator {
     border-top: 1px solid #e33333;
     margin: 10px auto;
     width: 250px;
 }

 /* Global Styles End */

 /* Navbar */


 .navbar input[type="checkbox"],
 .navbar .hamburger-lines {
     display: none;
 }

 .nav-container {
     max-width: 1200px;
     width: 90%;
     margin: auto;
 }

 .navbar {
     position: fixed;
     width: 100%;
     background: #000;
     color: #fff;
     opacity: 0.85;
     z-index: 100;
 }

 .navbar-container {
     display: flex;
     justify-content: space-between;
     height: 64px;
     align-items: center;
 }

 .menu-items {
     order: 2;
     display: flex;
 }

 .logo {
     order: 1;
 }

 .logo img:hover {
     text-decoration: none;
 }

 .menu-items li {
     list-style: none;
     /* margin: 0px 30px; */
     font-size: 12px;
     padding: 8px 30px;
 }

 .navbar a {
     color: #fff;
     text-decoration: none;
     font-weight: 700;
     transition: color 0.3s ease-in-out;
     text-transform: uppercase;


 }

 .navbar a:hover {
     color: #3388e3;
     border-bottom: red solid 1px;
     padding-bottom: 5px;
 }

 nav a.download-btn {
     border: 1px solid #fff;
     border-radius: 4px;
     margin-top: 10px;
     padding: 8px 30px;
     transition: .3s;
     font-size: 12px;
     margin: 0px 30px;
 }

 nav a.download-btn:hover {
     color: #3388e3;
     border-color: red;
 }

 /* Navbar End*/

 /* Hero Section */

 #hero-section {

     .carousel {
         position: relative;
         box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
     }

     .carousel-inner {
         position: relative;
         overflow: hidden;
         width: 100%;
     }

     .carousel-open:checked+.carousel-item {
         position: static;
         opacity: 100;
     }

     .carousel-item {
         position: absolute;
         opacity: 0;
         -webkit-transition: opacity 0.6s ease-out;
         transition: opacity 0.6s ease-out;
     }

     .carousel-item img {
         display: block;
         height: auto;
         max-width: 100%;
     }

     .carousel-control {
         background: rgba(0, 0, 0, 0.28);
         border-radius: 50%;
         color: #fff;
         cursor: pointer;
         display: none;
         font-size: 40px;
         height: 40px;
         line-height: 35px;
         position: absolute;
         top: 50%;
         -webkit-transform: translate(0, -50%);
         cursor: pointer;
         -ms-transform: translate(0, -50%);
         transform: translate(0, -50%);
         text-align: center;
         width: 40px;
         z-index: 10;
     }

     .carousel-control.prev {
         left: 2%;
     }

     .carousel-control.next {
         right: 2%;
     }

     .carousel-control:hover {
         background: rgba(0, 0, 0, 0.8);
         color: #aaaaaa;
     }

     #carousel-1:checked~.control-1,
     #carousel-2:checked~.control-2,
     #carousel-3:checked~.control-3 {
         display: block;
     }

     .carousel-indicators {
         list-style: none;
         margin: 0;
         padding: 0;
         position: absolute;
         bottom: 2%;
         left: 0;
         right: 0;
         text-align: center;
         z-index: 10;
     }

     .carousel-indicators li {
         display: inline-block;
         margin: 0 5px;
     }

     .carousel-bullet {
         color: #fff;
         cursor: pointer;
         display: block;
         font-size: 35px;
     }

     .carousel-bullet:hover {
         color: #aaaaaa;
     }

     #carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
     #carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
     #carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
         color: #428bca;
     }

     #title {
         width: 100%;
         position: absolute;
         padding: 0px;
         margin: 0px auto;
         text-align: center;
         font-size: 27px;
         color: rgba(255, 255, 255, 1);
         font-family: 'Open Sans', sans-serif;
         z-index: 9999;
         text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
     }
 }

 /* Hero Section End */

 /* About Section */

 #about-section {
     background: #e5b32d;
     padding: 100px;
 }

 .about-grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }

 .details hr.separator {
     margin: 25px 0;
 }

 .details h2 {
     color: #e33333;
     font-weight: bold;
     text-align: left;
     font-size: 30px;
 }

 .details p,
 .about-features-box li {
     color: #fff;
 }

 i.fa-solid.fa-dice-six {
     rotate: 45deg;
     color: red;
     box-shadow: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px;
     margin-right: 15px;
     animation: dice-animation 2s ease 0s infinite alternate-reverse forwards;
 }

 @keyframes dice-animation {

     0%,
     100% {
         transform: translateX(0);
     }

     10%,
     30%,
     50%,
     70% {
         transform: translateX(-10px);
     }

     20%,
     40%,
     60% {
         transform: translateX(10px);
     }

     80% {
         transform: translateX(8px);
     }

     90% {
         transform: translateX(-8px);
     }
 }
 
 .about-features-box ul li {
     list-style: none;
 }

 .about-features-box li {
     font-weight: bold;
 }


 .about-column.ludoking-poster img {
     transition: transform .5s ease;
     filter: brightness(0.8);
 }

 .about-column.ludoking-poster:hover img {
     filter: unset;
 }

 /* Play Now Intersection */

 .play-free-icons {
     padding-top: 3rem;
 }

 .play-free-icons-images {
     display: flex;
     justify-content: center;
     margin-right: 6rem;
     margin-left: 6rem;
 }

 .play-free-icons h2 {
     color: #e33333;
     font-weight: 500;
     text-align: center;
 }

 .centerfied-store img,
 .play-free-icons-images img {
     height: 7rem;
     width: 20rem;
     padding: 5px 70px 50px;
 }


 /* About Section End */

 /* Features Section */

 #features {
     background-color: #09b5c0;
 }

 #features-section {
     height: 600px;
     margin: 0;
     display: grid;
     grid-template-rows: 500px 100px;
     grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
     align-items: center;
     justify-items: center;
     background-color: #09b5c0;
 }

 div#features-carousel {
     grid-row: 1 / 2;
     grid-column: 1 / 8;
     width: 100vw;
     height: 500px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     transform-style: preserve-3d;
     perspective: 600px;
     --items: 5;
     --middle: 3;
     --position: 1;
     pointer-events: none;
 }

 div.item {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: absolute;
     top: 20%;
     bottom: 20%;
     padding: 10px;
     width: 300px;
     height: 400px;
     --r: calc(var(--position) - var(--offset));
     --abs: max(calc(var(--r) * -1), var(--r));
     transition: all 0.25s linear;
     transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-300px * var(--r)));
     z-index: calc((var(--position) - var(--abs)));
 }

 div.item:nth-of-type(1) {
     --offset: 1;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 16px;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 10px;
 }

 div.item:nth-of-type(2) {
     --offset: 2;
     background-color: #5bc0966c;
     border-radius: 16px;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 10px;
 }

 div.item:nth-of-type(3) {
     --offset: 3;
     background-color: #ff967086;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 10px;
 }

 div.item:nth-of-type(4) {
     --offset: 4;
     background-color: #ffd67070;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 10px;
 }

 div.item:nth-of-type(5) {
     --offset: 5;
     background-color: #eaff705d;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 10px;
 }

 input:nth-of-type(1) {
     grid-column: 2 / 3;
     grid-row: 2 / 3;
 }

 input:nth-of-type(1):checked~#features-carousel {
     --position: 1;
 }

 input:nth-of-type(2) {
     grid-column: 3 / 4;
     grid-row: 2 / 3;
 }

 input:nth-of-type(2):checked~#features-carousel {
     --position: 2;
 }

 input:nth-of-type(3) {
     grid-column: 4 /5;
     grid-row: 2 / 3;
 }

 input:nth-of-type(3):checked~#features-carousel {
     --position: 3;
 }

 input:nth-of-type(4) {
     grid-column: 5 / 6;
     grid-row: 2 / 3;
 }

 input:nth-of-type(4):checked~#features-carousel {
     --position: 4;
 }

 input:nth-of-type(5) {
     grid-column: 6 / 7;
     grid-row: 2 / 3;
 }

 input:nth-of-type(5):checked~#features-carousel {
     --position: 5;
 }

 .section_heading {
     text-align: center;
     color: #000;
     padding-top: 50px;
 }

 h3.features-heading {
     font-size: 35px;
     letter-spacing: 1px;
     text-transform: capitalize;
     margin-bottom: 5px;
     color: #000;
     font-weight: 500;
 }

 h3.item-title {
     color: #e33333;
     font-weight: 600;
     font-size: 20px;
     text-transform: capitalize;
     margin-bottom: 0;
     margin-top: 20px;
 }

 p.item-para {
     color: #fff;
     text-align: center;
     margin-top: 0;
 }

 .item .icon {
     margin-top: 10px;
     float: right;
     margin-left: 20px;
     width: 60px;
     height: 60px;
     line-height: 60px;
     text-align: center;
     border: 1px solid #e33333;
     -webkit-box-shadow: 0 0 0 2px #fff;
     -moz-box-shadow: 0 0 0 2px #fff;
     -ms-box-shadow: 0 0 0 2px #fff;
     box-shadow: 0 0 0 2px #fff;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     border-radius: 50%;
     -moz-transition: all ease-in 0.25s;
     -o-transition: all ease-in 0.25s;
     -webkit-transition: all ease-in 0.25s;
     transition: all ease-in 0.25s;
 }

 .item i.fa-regular.fa-face-smile,
 .item i.fa-solid.fa-globe,
 .item i.fa-solid.fa-gamepad,
 .item i.fa-brands.fa-teamspeak,
 .item i.fa-solid.fa-trophy {
     font-size: 30px;
     color: #e33333;
     margin-top: 14px;
 }

 .item .icon:hover {
     color: white;
     background: red;
 }

 /* Features Section End */

 /* Media Section */

 #media-section {
     align-items: center;
     background: #E3E3E3;
     display: flex;
     justify-content: center;
     overflow-x: hidden;
 }

 .white-gradient {
     background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
 }

 .slider {
     background: white;
     box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
     height: 100px;
     margin: auto;
     overflow: hidden;
     position: relative;
 }

 .slider::before,
 .slider::after {
     content: "";
     height: 100px;
     position: absolute;
     width: 200px;
     z-index: 2;
 }

 .slider::after {
     right: 0;
     top: 0;
     transform: rotateZ(180deg);
 }

 .slider::before {
     left: 0;
     top: 0;
 }

 .slide-track {
     animation: scroll 40s linear infinite;
     display: flex;
     width: calc(250px * 14);
 }

 .slide {
     height: 100px;
     width: 250px;
 }

 @keyframes scroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(calc(-250px * 7));
     }
 }

 /* Media Section End*/

 /* Inventory Section */
 #inventory-section {
     text-align: center;
     padding: 100px;
 }

 .inventory-content h3 {
     font-size: 35px;
     letter-spacing: 1px;
     text-transform: capitalize;
     margin-bottom: 5px;
     color: #000;
     font-weight: 500;
 }

 .inventory-content p font {
     font-weight: lighter;
 }

 /* Inventory Section End */

 /* Reviews Section */
 #review-section {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     width: 100%;
     padding: 100px 0;
 }

 .main {
     letter-spacing: 1px;
     margin: 30px 0px;
     padding: 10px 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .main h1 {
     font-size: 35px;
     font-weight: 500;
     letter-spacing: 1px;
     line-height: 40px;
 }

 .page-box-container {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
     width: 1300px;
 }

 .page-box {
     max-width: 310px;
     /* box-shadow: 2px 2px 30px rgba(0,0,0,0.1); */
     background-color: #ffffff;
     padding: 20px;
     margin: 15px;
     cursor: pointer;
 }

 .user-name {
     display: flex;
     flex-direction: column;
 }

 .review {
     color: #e33333;
 }

 .box-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     max-width: 300px;
 }

 i.fas.fa-star {
     font-size: 32px;
 }

 .review h3,
 .client-comment p {
     font-size: 24px;
     color: #4b4b4b;
     font-weight: 300;
 }

 /* Reviews Section End*/

 /* Contact Section */

 .footer {
     background-color: #333;
     padding: 40px 0;
     line-height: 3em;

 }

 .footer .section {
     text-align: center;
     padding-bottom: 25px;
     color: white;
     font-size: 25px
 }

 .section>span:nth-child(1) {
     font-size: 24px;
 }

 .section span:nth-child(3) {
     font-size: 18px;
     color: #fff;
 }

 .section span a {
     color: #fff;
 }

 .section span a:hover {
     color: #e33333;
 }

 .social {
     text-align: center;
 }

 .h {
     width: 50%;
     margin: 0 auto;
 }

 .footer .social {
     text-align: center;
     color: white;
     padding: 2px 0;
 }


 .footer .social a {
     font-size: 24px;
     background-color: #f3f3f3;
     color: black;
     border: 2px;
     width: 50px;
     height: 40px;
     line-height: 38px;
     display: inline-block;
     text-align: center;
     border-radius: 10%;
     margin: 20px;
     opacity: 0.75;
     font-weight: 100;
     font-size: 2em;
 }

 a:hover i {
     color: #e33333;
 }

 .lastsection p {
     font-size: 15px;
     color: white;
     text-align: center;
 }

 .lastsection .img {
     text-align: center;
 }

 /* Contact Section End */