html {
   scroll-behavior: smooth;
   max-width: 100%;
}

body {
   font-size: 15px;
   font-weight: 400;
   color: #000;
   background: #fff;
   font-family: 'Nova Round', cursive;
}

h1, h2, h3, h4, h5, h6 {
   color: #333;
   font-weight: 600;
   font-family: 'Philosopher', sans-serif;
}

strong {
   font-weight: 800;
   color: #000;
}

a {
   text-decoration: none !important;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
   color: #fff;
   font-weight: 400;
}

a:hover, a:focus {
   text-decoration: none;
   outline: none;
   cursor: pointer;
   color: inherit;
}

.btn.focus, .btn:focus {
   outline: 0;
   box-shadow: none;
}

button {
   color: inherit;
   border: none;
}

p {
   margin-bottom: 0.5rem;
   font-size: 20px;
   font-weight: 500;
   color: #fff;
   letter-spacing: 0.5px;
}

ul, li {
   margin: 0;
   padding: 0;
   list-style-type: none !important;
}

ul {
   padding-left: 0 !important;
}

hr {
   background-color: #041936;
   opacity: 1;
}

.form-select:focus, .form-control:focus {
   box-shadow: none !important;
   border-color: #ccc;
}

.dropdown-item:focus, .dropdown-item:hover {
   background-color: inherit;
   color: inherit;
}

label {
   margin-bottom: 5px;
}

textarea {
   resize: none;
}

input:focus, button:focus, textarea:focus {
   outline: none;
   box-shadow: none;
}

img {
   max-width: 100%;
   height: auto;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

input[type=number] {
   -moz-appearance: textfield;
}

.pdng {
   padding-top: 70px;
   padding-bottom: 70px;
}

.thm-btn {
   display: inline-block;
   padding: 10px 34px;
   background: linear-gradient(261.24deg, #983A88 4.61%, #175CC2 95.11%);
   box-shadow: 0px 2px 10px rgba(29, 90, 192, 0.28);
   clip-path: polygon(15% 0, 100% 0, 83% 100%, 0 100%);
   color: #fff;
   font-size: 20px;
   font-weight: 400;
   transition: 0.3s;
   margin-top: 1rem;
}

.thm-btn:hover {
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
   color: #fff;
}

.head-innr {
   font-size: 40px;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-fill-color: transparent;
   font-weight: 700;
   margin-bottom: 2rem;
}

.heading p {
   margin-bottom: 1rem;
}

@import url('https://fonts.googleapis.com/css2?family=Nova+Round&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Saira+Stencil+One&display=swap');

.theame-header .custom_navabr {
   background-color: transparent;
}

.theame-header .custom_navabr .navbar-brand img {
   width: 100px;
}

.theame-header .custom_navabr .nav-item {
   margin-left: 20px;
}

.theame-header .custom_navabr .nav-item .nav-link {
   font-weight: 400;
   font-size: 20px;
   color: #fff;
   text-transform: capitalize;
   letter-spacing: 0.2px;
   position: relative;
   padding: 5px 15px;
   clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
   transition: 0.3s;
}

.theame-header .custom_navabr .nav-item .nav-link.active, .theame-header .custom_navabr .nav-item .nav-link:hover {
   background: linear-gradient(261.24deg, #983A88 4.61%, #175CC2 95.11%);
   box-shadow: 0px 2px 10px rgba(29, 90, 192, 0.28);
}

.sticky-header {
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
   box-shadow: 0px 0px 5px 0px rgb(72 72 72 / 50%);
   animation: 0.75s ease 0s normal forwards 1 running headerSlideDown;
   transition: 0.1s;
}

.sticky-header .custom_navabr .navbar-brand img {
   width: 60px;
}

.sticky-header .custom_navabr .nav-item .nav-link {
   color: #fff !important;
}

.sticky-header .custom_navabr .nav-item .nav-link:hover {
   background: #10003A;
}

.sticky-header .custom_navabr .nav-item .nav-link {
   color: #2F019E;
}

@keyframes headerSlideDown {
   0% {
      margin-top: -150px;
   }

   100% {
      margin-top: 0;
   }

}

.banner-sec {
   background-image: url(../images/banner-bg.png);
   background-repeat: no-repeat;
   background-size: cover;
   height: 969px;
   display: flex;
   align-items: center;
}

.banner-content h1 {
   font-size: 50px;
   font-weight: 400;
   color: #fff;
   font-family: 'Saira Stencil One', cursive;
   text-transform: uppercase;
   margin-bottom: 3rem;
   line-height: 65px;
}

.game-sec {
   background-color: #10003A;
}

.games-card {
   background: linear-gradient(267.63deg, #B945A5 3.26%, #2458BD 100%);
   border-radius: 15px;
   transition: 0.3s;
   margin-top: 12px;
}

.games-card:hover {
   transform: translateY(-10px);
}

.games-card img {
   width: 100%;
   border-radius: 15px 15px 0 0;
}

.games-card h4 {
   padding: 14px 0;
   font-size: 24px;
   font-weight: 400;
   color: #fff;
   text-transform: capitalize;
}

.game-sec .owl-theme .owl-dots .owl-dot span {
   background-color: #2D0C81;
   height: 12px;
   width: 12px;
   margin: 5px;
   transition: 0.3s;
}

.game-sec .owl-theme .owl-dots .owl-dot:hover span {
   background-color: #FB3AFF;
}

.game-sec .owl-theme .owl-dots .owl-dot.active span {
   background-color: #FB3AFF;
   width: 40px;
}

.about-sec {
   background-image: url(../images/about-bg.png);
   background-repeat: no-repeat;
   background-size: cover;
}

.about-sec .head-innr {
   background: linear-gradient(181deg, #FF17D7 4.61%, #1F78FF 95.11%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-fill-color: transparent;
}

.about-content-card {
   padding: 15px;
   background: #1A015B;
   box-shadow: 0px 6px 14px rgba(255, 255, 255, 0.25);
   border-radius: 15px;
   text-align: center;
   position: relative;
   z-index: 99;
   margin-bottom: 10px;
}

.about-content-card::after {
   content: "";
   position: absolute;
   height: 5px;
   width: 100%;
   top: 0;
   left: 0;
   background: linear-gradient(267.63deg, #FF17D7 3.26%, #1F78FF 100%);
   border-radius: 10px 10px 0 0;
   z-index: -9;
   transition: 0.3s;
}

.about-content-card:hover::after {
   height: 100%;
   border-radius: 10px;
}

.about-content-card span.icon {
   display: inline-block;
   background: linear-gradient(267.63deg, #1F78FF 3.26%, #FF17D7 100%);
   height: 50px;
   width: 50px;
   line-height: 50px;
   text-align: center;
   color: #fff;
   border-radius: 50px;
   margin-bottom: 10px;
   font-size: 18px;
}

.about-content-card h3 {
   font-size: 24px;
   font-weight: 400;
}

.about-content-card h4 {
   font-size: 40px;
   font-weight: 400;
   font-family: 'Nova Round', cursive;
}

.about-img {
   position: relative;
}

.about-img .about-icon {
   position: absolute;
   left: 50%;
   top: 0;
   animation: rotate 5s linear infinite;
}

/*rotate-animation-css-start*/
@keyframes rotate {
   0% {
      transform: rotate(0deg);
      margin-top: 20rem;
   }

   100% {
      transform: rotate(360deg);
      margin-top: 0;
   }

}

/*rotate-animation-css-end*/
.games-play {
   background-image: url(../images/play-bg.png);
   background-repeat: no-repeat;
   background-size: cover;
}

.games-play-innr {
   background: rgba(255, 255, 255, 0.19);
   border-radius: 24px;
   padding: 40px 0;
}

.games-play-innr li {
   text-align: center;
   color: #fff;
   font-size: 30px;
   font-family: 'Philosopher', sans-serif;
   display: inline-block;
   position: relative;
   text-transform: capitalize;
}

.games-play-innr li::after {
   content: '';
   position: absolute;
   right: -40%;
   bottom: 22%;
   background-image: url(../images/line-01.png);
   width: 371px;
   height: 149px;
   background-repeat: no-repeat;
   z-index: 9;
}

.games-play-innr li:nth-child(2)::after {
   transform: rotate(130deg);
   bottom: 35%;
}

.games-play-innr li:nth-child(3)::after {
   display: none;
}

.games-play-innr li:nth-child(2) {
   margin-top: 8rem;
}

.games-play-innr li .icon {
   display: block;
   margin: 12px 0;
   position: relative;
   z-index: 99;
}

.games-play-innr li .icon img {
   width: 140px;
}

.appview {
   background: linear-gradient(89.92deg, #10003A 0.08%, #090028 103.22%);
}

.testimonial-sec {
   background-color: #10003A;
}

.testimonial-sec .heading {
   margin-bottom: 6rem;
}

.testmonial-innr {
   background-color: #2C295C;
   padding: 20px;
   border-radius: 20px;
}

.testmonial-innr .testmonial-img {
   display: inline-block;
   height: 170px;
   width: 170px;
   border-radius: 50%;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
   text-align: center;
   padding: 10px;
}

.testmonial-innr img {
   height: 150px;
   width: 150px !important;
   border-radius: 50%;
}

.testi-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 1rem 0;
}

.testi-title h4 {
   font-size: 32px;
   font-weight: 400;
}

.testi-title p span {
   display: inline-block;
   color: #FF9D0A;
}

.testimonial-sec .owl-theme .owl-nav [class*=owl-] {
   padding: 0;
   border-radius: 0;
   background-color: transparent;
}

.testimonial-sec .owl-theme .owl-nav [class*=owl-]:hover {
   background-color: transparent;
}

.testimonial-sec .owl-arrows {
   height: 30px;
   width: 30px;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%) !important;
   line-height: 30px;
   text-align: center;
   border-radius: 50px !important;
   color: #000 !important;
   transition: 0.3s;
}

.bubbles_wrap {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;
   overflow: hidden;
   pointer-events: none;
}

@-webkit-keyframes animateBubble {
   0% {
      margin-top: 20%
   }

   to {
      margin-top: -30%
   }

}

@-moz-keyframes animateBubble {
   0% {
      margin-top: 20%
   }

   to {
      margin-top: -30%
   }

}

@keyframes animateBubble {
   0% {
      margin-top: 20%
   }

   to {
      margin-top: -30%
   }

}

@-webkit-keyframes sideWays {
   0% {
      margin-left: 0
   }

   to {
      margin-left: 25px
   }

}

@-moz-keyframes sideWays {
   0% {
      margin-left: 0
   }

   to {
      margin-left: 25px
   }

}

@keyframes sideWays {
   0% {
      margin-left: 0
   }

   to {
      margin-left: 25px
   }

}

.x1 {
   -webkit-animation: animateBubble 15s linear infinite, sideWays 2s ease-in-out infinite alternate;
   animation: animateBubble 15s linear infinite, sideWays 2s ease-in-out infinite alternate;
   left: 6%;
   top: 45%;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
}

.x2 {
   -webkit-animation: animateBubble 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
   animation: animateBubble 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
   left: 5%;
   top: 80%;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
}

.x3 {
   -webkit-animation: animateBubble 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
   animation: animateBubble 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
   left: 10%;
   top: 40%;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
}

.x4 {
   -webkit-animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
   animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
   left: 20%;
   top: 0;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
}

.x5 {
   -webkit-animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
   animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
   left: 30%;
   top: 50%;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
}

.x6 {
   -webkit-animation: animateBubble 11s linear infinite, sideWays 2s ease-in-out infinite alternate;
   animation: animateBubble 11s linear infinite, sideWays 2s ease-in-out infinite alternate;
   left: 50%;
   top: 0;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
}

.x7 {
   -webkit-animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate;
   animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate;
   left: 65%;
   top: 70%;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
}

.x8 {
   -webkit-animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
   animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
   left: 80%;
   top: 10%;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
}

.x9 {
   -webkit-animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
   animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
   left: 90%;
   top: 50%;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
}

.x10 {
   -webkit-animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate;
   animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate;
   left: 80%;
   top: 80%;
   background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
}

.bubble {
   position: absolute;
   border-radius: 25px;
   box-shadow: none;
   width: 8px;
   height: 8px;
}

.bubble.x2, .bubble.x1, .bubble.x3, .bubble.x4, .bubble.x5 {
   border-radius: 0px !important;
   transform: rotate(45deg);
}

.contact-sec {
   background-image: url(../images/contact-bg.png);
   background-repeat: no-repeat;
   background-size: cover;
}

.contact-sec .head-innr{
   background: linear-gradient(1deg, #FF17D7 4.61%, #1F78FF 95.11%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.contact-rgt {
   padding: 15px;
   border: solid;
   border-image-slice: 1;
   border-width: 2px;
   border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}

.contact-rgt label{
   color: #fff;
   text-transform: capitalize;
}
.contact-rgt input{
   height: 54px;
}
.contact-rgt .form-control{
   background-color: #2E3266;
   border: none;
   border-radius: 2px;
   color: #fff;
}
.cta-sec{
   margin-top: -7rem;
   margin-bottom: 5rem;
}
.cta-sec-innr{
   padding: 20px 15px;
   background-color: #38338A;
   border: solid;
   border-image-slice: 1;
   border-width: 2px;
   border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
   
}

.cta-sec .cta-sec-innr .head-innr{
   font-size: 30px;
   margin-bottom: 10px;
}
.cta-sec .cta-sec-innr .social-media{
   border-right: 2px solid #fff;
}
.cta-sec .cta-sec-innr .social-media a{
   display: inline-block;
   height: 35px;
   width: 35px;
   line-height: 35px;
   text-align: center;
   background: #fff;
   color: #38338A;
   font-size: 18px;
   border-radius: 50px;
   margin-right: 15px;
   transition: 0.3s;
}
.cta-sec .cta-sec-innr .social-media a:hover{
      background: linear-gradient(261.24deg, #FF17D7 4.61%, #1F78FF 95.11%);
      color: #fff;
}
.thm-footer{
   background-image: url(../images/footer-bg.png);
   background-repeat: no-repeat;
   background-size: cover;
   padding-bottom: 0;
}
.thm-footer .head-innr{
   margin-bottom: 1rem;
}

.thm-footer .quick-lnk li{
   margin-bottom: 15px;
}
.thm-footer .quick-lnk li a{
   display: inline-block;
   font-size: 18px;
   font-weight: 400;
   color: #fff;
}
.thm-footer .quick-lnk a:hover{
   text-decoration: underline!important;
}
.copyright {
   background-color: #110D59;
   padding: 5px 0;
   margin-top: 2rem;
}