@import "header.css";
@import "body.css";
@import "footer.css";
*{margin: 0;padding: 0; list-style:none; box-sizing: border-box; text-decoration: none; -webkit-tap-highlight-color: transparent;}
html{font-size: 15px;scroll-behavior: smooth;}
a{text-decoration: none; }
:root{
    --color1:#000;
    --color2:#fff; 
    --color3:#FFC332;
    --color4:#0C0127;
    --color5:#030202;
    --color6: #0E3665;
    --color7:#84B0FC;
    --font1:'Roboto', sans-serif;
    --font2:'Ropa Sans', sans-serif;  
}
.whiteC{color: var(--color2);}
.goldeC{color: var(--color3);}

.fontSize2{font-size: 2.6rem; line-height: 2.7rem;}
body{background-color: #000;}
.container{width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; overflow-x: hidden;}
.innerWrapper{padding: 0 3%; }
.bgBlack{width: 100%; height: auto; padding-top: 0%; padding-bottom: 0%; position:absolute; z-index: 11; display: flex; justify-content: center; align-items: flex-start;}
#loader{position: fixed; left: 0; top: 0; right: 0; bottom: 0; flex-direction: column; background:#12131a; z-index:1001; display: flex; justify-content: center; align-items: center;}
#loader h5{color: #fff; font-family: var(--font1); font-size: 1.2rem;}
#newsbtn{width: 50%; background-color: #FFC332; color: black; font-weight: 600; cursor: pointer;}
#newsbtn:hover{background-color:orange;}
.Bgcolor1{background: #245224;}

.col3{width: 30%;}
.col7{width: 70%;}

::placeholder{color: #fff;}
input:focus, select:focus, textarea:focus {
    outline: none;  
  }

h1{font-size:6rem; font-family: var(--font2); font-style: italic; text-transform: uppercase; line-height: 6.1rem;}
h2{font-size:4.7rem; margin-bottom: 5%; font-family: var(--font2); font-style: italic; text-transform: uppercase; color: #fff;}
h3{font-size:1.3rem; line-height: 2rem;  font-family: var(--font1); font-style: normal; font-weight: 400; text-transform: capitalize; line-height: 1.8rem; }
h6{font-size:1.2rem; line-height: 1.8rem; font-family: var(--font2); text-align: justify;  font-weight: 400;color: #fff;}
p{color: #E4E4E4; line-height: 1.5rem; font-weight: 300; font-family: var(--font1); font-size: 1.1rem;}
img{max-width: 100%;}
/* button 1 */
.btnContain{width: 100%; display: flex;}
.casinoBtn{font-family: var(--font2); cursor: pointer; font-style: italic; font-weight: 400; margin-right: 5%; font-size: 1.2rem; text-align: left; display: block; color: var(--color2); position: relative; padding:2% 12% 2% 10%; text-transform: uppercase; border-radius:5rem; border: 3px solid #FFC332; background-color: var(--color1);}
.casinoBtn::before{content: ''; width: 60px; height: 53px;  background-image: url(../img/BtnIcon.svg);  position: absolute; right: -13px; top: -7px; background-repeat: no-repeat;}
.casinoBtn:hover::before{left: -20px; top: -7px; transition: all 1s linear; }
.casinoBtn:hover{background: radial-gradient(circle, rgba(27,11,73,1) 1%, rgba(58,23,92,1) 98%);}
/* button 2 */
.btnContain02{width: 100%; display: flex; margin-top: 5%;}
.casinoBtn02{font-family: var(--font2); font-style: italic; cursor: pointer; text-transform: uppercase; font-weight: 500; margin-right: 5%; font-size: 1.2rem; text-align: left; display: block; color: var(--color2); position: relative; padding:2% 7% 2% 7%; text-transform: uppercase; border-radius:5px;  background-color: var(--color6); display: flex; align-items: center;}
.casinoBtn02>img{margin-left: 1rem;}
.casinoBtn02:hover{background-color:#130031;}





.sectionTitle{font-size: 1.8rem; margin-top: 2%; display: flex; align-items: center; border-radius: 3rem; font-weight: 400; border: 1px solid #84B0FC; position: relative; padding: .8rem 2rem; font-style: italic; font-family: var(--font2); color: #fff; text-transform: uppercase;}
.sectionTitle>img{padding-right: 13px;}
.sectionTitle::before{content: ''; width: 20rem; height: 1px; background-color: #84B0FC; position: absolute; left: -20rem; top: 50%;}
.sectionTitle::after{content: ''; width: 20rem; height: 1px; background-color: #84B0FC; position: absolute; right: -20rem; top: 50%;}

.sectionTitle2{font-size: 1.8rem; margin-top: 2%; display: flex; align-items: center; justify-content: center; border-radius: 3rem; font-weight: 400; position: relative; padding: .8rem 2rem; font-style: italic; font-family: var(--font2); color: #fff; text-transform: uppercase;}
.sectionTitle2>img{margin:0 1%;}
/* ////////////////////////////box layout/////////////////////// */
.boxLayout{width: 100%; height: 100%; display: flex;}
.boxLayout>li{width:100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}

/*scroll effect start*/
.animation-element {opacity: 0;}
.animation-element.slide-left {opacity: 0;transition: all 400ms linear;transform: translateX(-100px);}
.animation-element.slide-right {opacity: 0;transition: all 400ms linear;position: relative;transform: translateX(100px);}
.animation-element.scale-ele {opacity: 0;transition: all 400ms ease-in-out;transform: scale(.2, .2);}
.animation-element.scale-ele2 {opacity: 0;transition: all 800ms ease-in-out 200ms;transform: scale(.2, .2);}
.animation-element.slide-top {opacity: 0;transition: all 400ms linear;transform: translateY(100px);}
.animation-element.slide-bottom {opacity: 0;transition: all 400ms linear;transform: translateY(-100px);}
.animation-element.slide-left.in-view,.animation-element.slide-right.in-view,.animation-element.slide-bottom.in-view,.animation-element.scale-ele.in-view,.animation-element.slide-top.in-view,.animation-element.scale-ele2.in-view {opacity: 1;transform: scale(0);transform: translateY(0);transform: translateX(0);}
/*scroll effect End*/

/* ////////////////////////////////RESPONSIVE SECTION///////////////////////////////// */
@media screen and (max-width: 1200px) {
    h1{font-size: 5rem; line-height: 5.1rem;}
    .casinoBtn{font-size: 1rem; padding: 3% 16% 2% 5%;}
}
@media screen and (max-width: 991px) {
    h1{font-size: 4rem; line-height: 4.1rem;}
    .sectionTitle{font-size: 1.2rem; margin-top: 2%; display: flex; align-items: center; border-radius: 3rem; font-weight: 400; border: 1px solid #84B0FC; position: relative; padding: .8rem 2rem; font-style: italic; font-family: var(--font2); color: #fff; text-transform: uppercase;}
    .sectionTitle>img{padding-right: 13px;}
    .sectionTitle::before{content: ''; width: 10rem; height: 1px; background-color: #84B0FC; position: absolute; left: -10rem; top: 50%;}
    .sectionTitle::after{content: ''; width: 10rem; height: 1px; background-color: #84B0FC; position: absolute; right: -10rem; top: 50%;}
    .btnContain{flex-direction: column;}
    .casinoBtn{margin-bottom:5%; padding-top: 3%; padding-bottom: 3%;}
}

@media screen and (max-width: 767px) {
    html{font-size: 14px;}
    h1{font-size:5rem;}
    .casinoBtn{font-size: 1.5rem;}
    .sectionTitle{font-size: 1.9rem; width: 90%; display: flex; justify-content: center;}
    .sectionTitle::before{display: none!important;}
    .sectionTitle::after{display: none!important;}
    .boxLayout{width: 100%; height: 100%; display: flex; flex-direction: column;}
    p{font-size: 1.2rem; line-height: 1.5rem;}
    .footerContainer>p{text-align: center;}
}
@media screen and (max-width: 479px) {
    html{font-size: 13px;}
    .btnContain{align-items: center;}
    .innerWrapper{padding: 0 4%!important;}
    .gameContent img{width: 90%;}
    .sectionTitle2{flex-direction: column; font-size: 2.5rem; justify-content: center; width: 100%; text-align: center;}
    .sectionTitle2>img{margin-bottom: 5%;}
    .casinoBtn02{font-size: 1rem;}
    .titleSlider>h1{font-size: 3rem; line-height: 3.2rem;}
}