@import url("bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --primary-color: #DFB853;
  --secondary-color: #000;
}

body {
  font-family: "Oswald", sans-serif;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #666;
  background-image: url(../images/body-bg.jpg);
  overflow-x: hidden;
  background-repeat: repeat;
}


ul,li,span,img,p,h1,h2,h3,h4,h5,h6,figure, figcaption{
  margin: 0px;
  padding: 0px;
}

a{
  text-decoration: none;
}
img{max-width:100%;}

.owl-theme .owl-dots .owl-dot span {
  width: 15px;
  height: 15px;
  margin: 7px;
  background: var(--secondary-color);
  border: 1px solid #fff;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: var(--primary-color);
}

.owl-nav button{
  background-color: var(--primary-color) !important;
  width: 40px;
  height: 40px;
  border-radius: 100% !important;
  margin: 0px 10px !important;
}

.owl-nav button span{
  opacity: 0;
}

.owl-nav button.owl-prev{
  background-image: url(../images/arrow-left.svg) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin-left: 20px;
  position: absolute;
  top: 50%; left: -8%;
	transform: translate(0%, -50%);

}

.owl-nav button.owl-next{
  background-image: url(../images/arrow-right.svg) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%; left: auto;
  right: -8%;
  transform: translate(0%, -50%);
}


.navbar-toggler-icon {
  background-image:url(../images/menu-icon.svg) !important;
}


/* ****************************************************** */

.logo-sec{
  width: 100%;
  text-align: center;
}


.header-logo {
  max-width: 10rem !important;
}
.logo-sec{
  display: flex;
  justify-content: center;
}
.Jannatpro-btn--sec{
  display: flex;
  align-items: center;
}

.Jannatpro-btn {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  width: 150px;
  height: 48px;
  margin-right: 8px;
  background-color: transparent;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Jannatpro-btn-boder{  
 background-color: var(--secondary-color);
 border: 1px solid var(--primary-color);
 border-radius: 30px;
}

.navbar-light .navbar-nav .nav-link{
  font-size: 20px;
  font-weight: 600;
  color: #fff;

}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-item.active a, .Jannatpro-btn:hover{
color:var(--primary-color);
}
.Jannatpro-heading {
  text-align: center;
}
.Jannatpro-heading h2{
  font-size: 50px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}

.Jannatpro-heading p{
  font-size: 16px;
  color: #fff;
  line-height: 32px;

}

.Jannatpro-heading h2 span{
  color: var(--primary-color);
}

.sports-wrapper {
  background-image: url(../images/sports-bg.jpg);
  padding: 50px 0px;
  background-position: center;
  background-size: cover;
  background-repeat:no-repeat ;
  margin-top: -35px;
}
.sport-contant {
  border-radius: 5px;
  display: flex;
  justify-content: center;
  padding: 10px 0px;
  align-items: center;
  background-position: center;
  background-size: contain;
}
.cricket-sec{
  background-image: url(../images/cricket-bg.jpg);
  border: 6px solid #A3283A;
}

.Football-sec{
  background-image: url(../images/Football-bg.jpg);
  border: 6px solid #2B41A4;
}

.tennis-sec{
  background-image: url(../images/tennis-bg.jpg);
  border: 6px solid #1D602D;
}
.casino-sec{
  background-image: url(../images/casino-bg.jpg);
  border: 6px solid #7E4C03;
}
.sport-contant img {
  width: 150px;
  height: 150px;
  margin-top: 50px;
}
.sport-contant a{
  text-decoration: none;
  text-align: center;
}

.sport-contant p {
  text-decoration: none;
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  padding-top: 50px;
  display: inline-block;
  width: 100%;
  text-align: center;
}
.sport-sec {
  position: relative;
  margin-top: 30px;
}
.sport-sec a:hover .sport-contant p{color: var(--primary-color);}
.sport-sec a:hover .sport-contant{border: 6px solid var(--primary-color);}
.we-img img{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.we-are-wrapper{
  margin-top: 50px;
}

.we-content-heading .sub-heading{
  font-size: 20px;
  font-weight: 500;
  color: var(--primary-color);
  text-transform: uppercase;
}

.we-content-heading h2{
  font-size: 38px;
}


.service-img {
  width: 110px;
  height: 110px;
  border-radius: 100%;
  background-color: var(--primary-color);
  outline: 9px solid #fcc86980;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: -60px;
}

.service-content{
  background-color: #353537;
  padding: 10px 20px;
  border-radius: 5px ;
  border: 0.5px solid #4B453C;
  text-align: center;
  height: 100%;
}
.service-wrapper{
  margin-top: 110px;
}

.service-content h3{
  margin-top: 20px;
  
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;

}

.service-content p{
  margin: 10px 0px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  
}
.service-content:hover {
  border: 0.5px solid #ffc107;
  background-color: #000000;
}
.Casino-Live-content{
  position: relative;
  background-color: #000;
  border-radius: 5px;
  margin: 10px 0px;
}

.Casino-Live-content .Casino-Live-bg{
  border-radius: 5px;
}

.Live-img-content{
  display: none;
  position: absolute;
  top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}

.Casino-Live-content a:hover .Live-img-content {
  display: inline-block;
  text-align: center;
}

.Casino-Live-content span{
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}

.Casino-Live-content a:hover .Casino-Live-bg{
  opacity: 0.5;
 }

 .Live-img-content img{
  margin-bottom: 8px;
 }

 .Casino-Live-wrpper {
  background-image: url(../images/casino-live-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  padding: 30px 0 50px 0;
}
   
.default-video{width:100%;}
.service-mt{
  margin: 50px 0px;
}
 /* * ***********************************winners--warpper************************************* * */

 .winners-warpper{
   margin-top: 40px;
 }
 
 .img-frame{
   position: relative;
 }
 
 .img-frame img{
   max-width: 100% !important;
   width: auto !important;
 }
 
 .winners-user-img {
   position: absolute;
   top: 0;
   z-index: -1;
   left: 0;
 }
 
 .winners-user-img img {
   border-radius: 5%;
 }
 
 .winners-contant .owl-dots {
   position: absolute;
   right: 4%;
   bottom: 4%;
 }
 
 .Free-bonus-sec .banner-img img{
   border-radius: 30px;
 }
 
 .user-box{
   display: flex;
   align-items: center;
   margin-bottom: 10px;
   justify-content: space-between;
 }
 
 .user-box-img img{
   border-radius: 100%;
   margin-right: 10px;
 }
 
 .user-box-contant h5{
   color: #fff;
   font-size: 20px;
   font-weight: 500;
 }
 
 .user-box-contant p{
   color: var(--primary-color);
   font-size: 18px;
   font-weight: 400;
 }
 
 .user-box-img{
   margin-right: 10px;
 }
 
 .winners-sec{
   margin-top: 30px;
 }
 
 .promotion-img-warpper{
   margin-top: 260px;
 }
 
 
 .user-box-1{
   display: flex;
   align-items: center;
 }
 
 .video-wrapper{
  margin-top: 50px;
 }

 .video-contant {
  position: relative;
  background-color: #000;
  padding: 15px;
  text-align: center;
}

 .play-icon{
  position: absolute;
  top: 50%; left: 50%;
	transform: translate(-50%, -50%);
  cursor: pointer;
 }

 .owl-carousel .owl-item img {
  width: auto;
}


/* ****************************promotion-img-warpper*********************************** */


.promotion-img-sec{
  background-image: url(../images/promotion-img-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 30px 25px;
  border-radius: 20px;
}

.promotion-img-banner img{
  position: absolute;
  bottom: 0;
  width: 50%;
}

.Free-bonus-warpper .owl-theme .owl-nav .owl-prev {
  left: -30px;
}

.Free-bonus-warpper .owl-theme .owl-nav .owl-next {
  right: -30px;
}

/* ****************************Payment-warpper*********************************** */

.Payment-warpper{
  margin-top: 40px;
}
.providers-img img{
  border-radius: 6px;
  max-width: max-content !important;
}

.game-providers .owl-nav .owl-prev{
  position: absolute;
  top: 50%; left: -8%;
	transform: translate(0%, -50%);
 
}

.game-providers .owl-nav .owl-next{
  position: absolute;
  top: 50%; left: auto;
  right: -8%;
  transform: translate(0%, -50%);
}

.Providers-sec .owl-nav .owl-prev ,.Providers-sec .owl-nav .owl-next{
  top: 40%;
}


.payment-contant img{
  border-radius: 5px;
  height: 90%;
}

.payment-contant {
  width: auto;
  display: inline-flex;
  justify-content: space-around;
  overflow-x: auto;
}

.game-providers h2{
  font-size: 20px;
  margin-bottom: 0px;
}

.payment-methods h2{
  font-size: 20px;
  margin-bottom: 0px;
}

.promotion-wrapper{
  margin-top: 50px;
}

.promotion-wrapper{
  background-image: url(../images/Upcoming-bg.jpg);
  padding: 40px 0px;
}

.about-us-wrapper{
  margin-top: 30px;
}

.about-video{
  position: relative;
}

.about-video-play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}
.about-video-play img{
  width: 50%;
  margin: 0 auto;
}

.social-media ul {
  display: flex;
  align-items: center;
}

.footer-contant ul li {
  list-style: none;
  margin: 10px 0px;
}

.social-media ul li a {
  margin-right: 10px !important;
  list-style: none;
  padding: 8px;
  background-color: #fff;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social-media ul li a:hover{background-color: var(--primary-color);}
.social-media img {
  width: 18px;
  height: 18px;
}

.about-us-wrapper .sub-heading{
  text-transform: capitalize;
  margin-top: 10px;
  font-size: 18px;
}

.about-us-wrapper{
  background-image: url(../images/about-bg.svg);
  background-repeat:no-repeat;
  background-position: bottom right;
}
.Payment-warpper .game-providers .owl-item img {
  width: 100%;
  margin: 0 auto;
}
.payment-box{
  overflow: hidden;
}

.video-wrapper .video-contant .default-video {
  width: 100%;
  height: 100%;
  max-height:500px;
}

.sport-sec .owl-item .sport-contant img{width: 100%;}

a.Jannatpro-btn.Jannatpro-btn-boder {
  margin-right: 0;
}
.download-apk-btn {
  margin-top: 10px;
  background-color: #0b0803;
  display: inline-block;
  border: 5px;
}
.whatsapp-footer-lft a span {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  padding-right: 8px;
  margin-left: -7px;
}
.whatsapp-footer-lft {
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 999;
}
.whatsapp-footer-lft a {
  display: flex;
  align-items: center;
  background-color: #40c351;
  border-radius: 50px;
  padding-right: 22px;
  height:44px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.2);
}
.whatsapp-footer-lft i {
  position: relative;
  margin-left: -18px;
}
.whatsapp-footer-lft i {
  position: relative;
  margin-left: -18px;
}
.register-border {
  padding: 6px 18px;
  border-radius: 4px;
  outline: none;
  background-color: transparent;
  border: 2px solid green;
  animation: rotate 0.4s linear both infinite;
  color: #fff;
}
.banner-img .item img {
  width: 100%;
}
@keyframes rotate {
  100% {
    filter: hue-rotate(-360deg)
  }
} 

.whatsApp {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  width: 81px;
  height: 81px;
  z-index: 9999999;
}

.whatsApp_img {
  position: relative;
  z-index: 2
}

.whatsApp .circleIconPanel {
  width: 265px;
  height: 50px;
  border-radius: 25px;
  z-index: 1;
  position: absolute;
  left: 30px;
  bottom: 19px;
  opacity: 0;
  text-align: start;
  padding: 8px 20px 7px 50px;
  font: normal normal 600 12px/17px Poppins;
  letter-spacing: 0;
  color: #fff;
  background: #2db642 0 0 no-repeat padding-box;
  background-image: url(../images/WhatsAppMessage.png);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain
}
.whatsApp .circleIconPanel {
  opacity: 0;
  -webkit-animation: hideMessage 1s linear;
  /* animation: hideMessage 1s linear; */
  animation: hideMessage 6s infinite;
  width: 0
}

.whatsApp:hover .circleIconPanel{
  opacity: 1;
  -webkit-animation: showMessage 1s linear;
  animation: showMessage 1s linear;
  width: 270px;
}



@-webkit-keyframes showMessage {
  0%,25% {
      opacity: 0;
      width: 0
  }

  to {
      opacity: 1;
      width: 265px
  }
}

@keyframes showMessage {
  0%,25% {
      opacity: 0;
      width: 0
  }

  to {
      opacity: 1;
      width: 265px
  }
}

@-webkit-keyframes hideMessage {
  0% {
      opacity: 1;
      width: 265px
  }

  80%,to {
      opacity: 0;
      width: 0
  }
}

@keyframes hideMessage {
  0% {
      opacity: 1;
      width: 265px
  }

  80%,to {
      opacity: 0;
      width: 0
  }
}