@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

/*body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: 'Nunito Sans', sans-serif;
    font-family: 'Noto Sans', sans-serif;
}*/

/*.container-main {
    max-width: 1320px;
    margin: auto;
}*/

.header-bar {
    background-color: #fff;
}

.header-grid {
    display: grid;
    grid-template-columns: 80% 20%;
}

.img-logo img {
    width: 8%;
}

.header-btn {
    margin: auto;
}

.logoImg img {
    width: 25%;
}

.header-btn button {
    border: none;
    border-radius: 5px;
    padding: 5px 15px;
    background-color: #ff8a00;
    color: #fff;
    font-family: avert-semibold;
    font-size: 18px;
}

.header-bg {
    background-image: url(../images/2000x525_bn.jpg);
    width: auto;
    height: 505px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /*padding-bottom: 30%;*/
    background-attachment: inherit;
}

.bonus-bg {
    background-image: url(../images/promo-banners-background.jpg);
    width: auto;
    height: 750px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /*padding-bottom: 30%;*/
    background-attachment: inherit;
}

.bonus-grid {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-gap: 2%;
}

.bonus-info img {
    width: 100%;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.bonus-bar.container {
    text-align: center;
}

.bonus-bar h2 {
    padding: 6% 0;
    margin: auto;
    color: #fff;
    font-family: avert-regular;
    font-size: 36px;
}

.bonus-info {
    background-color: #fff;
    border-radius: 8px;
}

.bonus-desc {
    padding: 25px 0 30px 0;
}

.bonus-desc button {
    border: none;
    background-image: linear-gradient(to right, #ff8a00 , #ff5a00);
    border-radius: 20px;
    padding: 10px 30px;
    color: #fff;
    margin: 35px 0 0px 0;
    font-family: avert-regular;
    font-size: 18px;
}

.bonus-desc h3 {
    font-size: 24px;
    font-family: avert-semibold;
    color: #0f161f;
}

.bonus-desc p {
    font-size: 18px;
    margin: 0;
    font-family: avert-regular;
    color: #8697a2;
}

.daftar-bg {
    padding: 5% 0;
    background-color: #f3f5f6;
}

.daftar-deposit{
    width: auto;
    margin: auto;
    overflow:hidden;
    height: 740px;
    text-align: center;
    padding: 0 50px;
    margin-bottom: 5%;
    
}

.but {
    border: none;
    border-radius: 6px;
    text-align: left;
}

.but h4 {
    font-size: 36px;
    color: #8697a2;
    margin: 0 0 10px 0;
    font-family: avert-regular;

}

.but.active h4,
.but.active p {
    color: #fff;
}

.but p {
    font-size: 18px;
    color: #8697a2;
    margin: 0;
    font-family: avert-regular;
}

#hidDen {
    visibility: hidden;
}


.tab-cont{
    float: left;
    width: 30%;
    /*background-color: #eee;*/
    height: 100%;
    /*border-right: 1px solid #d1d1d1;*/
    margin-right: 10%;

}
.tab-cont button{
    width: 100%;
    background-color: inherit;
    padding: 18px 18px 18px 35px;
    font-size: 16px;
    font-weight: 400;
    margin: 24% 0 0% 0;
}
.tab-cont button:hover{
    background-color: #cccccc36;
}
.tab-content{
    
    height: 100%;
    float: left;
    padding: 0;
    width: 60%;
    animation: anime 1s 

}

.tab-content h2{
    font-size: 24px;
    font-weight: 400;
    margin: 20px 0 10px 0;
    
}
.tab-content p{
    font-weight: 100;
    color: #666;
    margin-top: 20px
}
.tab-cont .but.active{
    background-color: #0152eb;
}
@keyframes anime {
    from{opacity: 0}
    to{opacity: 1}
}

.indo-section {
    background-color: #fff;
    padding: 30px 60px;
    text-align: center;
    border-radius: 10px;
}

.indo-section h3 {
    font-size: 36px;
    color: #0f161f;
    margin: 0;
    padding-bottom: 30px;
    font-family: avert-regular;
}

.indo-section p {
    font-size: 18px;
    color: #8697a2;
    text-align: left;
    margin: 0;
    padding-bottom: 30px;
    font-family: avert-regular;
}

.indo-section button {
    border: none;
    background-image: linear-gradient(to right, #ff8a00 , #ff5a00);
    border-radius: 20px;
    padding: 10px 30px;
    color: #fff;
    margin: 35px 0 0px 0;
    font-family: avert-regular;
    font-size: 18px;
}

.test-bar {
    background-color: #f3f5f6;
    padding-bottom: 10px;
}

.blog h2 {
    padding: 6% 0;
    margin: auto;
    font-family: avert-regular;
    font-size: 36px;
}

.blog .carousel-indicators {
  left: 0;
  top: auto;
    bottom: 0;
    margin: -15px 0;

}

/* The colour of the indicators */
.blog .carousel-indicators li {
    background: #e1e1e1 !important;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    margin: 0 15px !important;
    border-top: 0px solid transparent;
  border-bottom: 0px solid transparent;
}

.blog .carousel-indicators .active {
background: #ff8a00 !important;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 33% 0.06% 33% 0.06% 33%;
}

#vline {
    background-image: linear-gradient(#dde1e375, #dde1e3, #dde1e375);
}

.testimonials-info ol {
    display: block;
}

.testimonials-info li {
    display: contents;
}

.testimonials-info img {
    width: 8%;
}

.testimonials-info {
    padding: 0 25px;
    height: 360px;
}

/*.testimonials-info.info-vi h3 {
    font-family: Tahoma-BD;
}

.testimonials-info.info-kh h3 {
    font-family: Content-BD;
}

.testimonials-info.info-vi p {
    font-family: Tahoma-LF;
}

.testimonials-info.info-kh p {
    font-family: Content-LF;
}*/

.testimonials-info h3 {
    font-family: avert-semibold;
    margin: 0;
    padding-bottom: 25px;
    color: #0f161f;
    font-size: 24px;
    font-weight: bold;
}

.testimonials-info p {
    font-family: avert-regular;
    font-size: 18px;
    margin: 0;
    color: #8697a2;
}

.testimonials-info ol {
    padding: 0;
}

.blog {
    
  text-align: center;
  margin-bottom: 10%;
}

.hrStyle {
    margin: 100px 0 50px 0;
}

.hrCopy {
    margin: 50px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 25% 35% 20% 20%;
}

ul.logoImg {
    padding: 0;
    text-align: center;
}

.logoImg li {
    display: contents;
}

.sport-logo {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    text-align: center;
    margin: auto;
    padding: 0 40px;
}

.sport-info p {
    text-align: center;
}

.footer-info h5 {
    font-size: 13px;
    margin-bottom: 20px;
    font-family: avert-semibold;
}

#info-para {
    margin-top: 30px;
}

.footer-info p {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 11px;
    color: #8697a2;
    font-family: avert-semibold;
}

.copyright-info p {
    text-align: left;
    font-size: 11px !important;
    padding: 0;
    color: #8697a2;
    font-family: avert-semibold;
}


@media (min-width: 300px) and (max-width: 699px) {

    .header-grid {
    grid-template-columns: 60% 40%;
}

.sport-logo {
    padding: 0;
}

.header-btn button {
    font-size: 14px;
}

.img-logo img {
    width: 35%;
}

.header-bg {
    height: 130px;
}

.blog h2,
.bonus-bar h2,
.indo-section h3 {
    font-size: 25px;
}

.indo-section button {
    font-size: 14px;
}

.indo-section p {
    font-size: 14px;
    text-align: center;
}

.indo-section {
    padding: 30px;
    
}

.bonus-grid {
    grid-template-columns: auto;
    grid-gap: 2%;
}

.bonus-desc h3 {
    font-size: 20px;
}

.bonus-desc p {
    font-size: 14px;
}

.bonus-desc button {
    margin: 20px 0 0px 0;
    font-size: 14px;
}

.bonus-bg {
    height: 100%;
    
}

.bonus-bar.container {
    padding: 0 30px 100px;
}

#info-para {
    margin-top: 0;
}

.daftar-deposit {
    padding: 0 25px;
}

.tab-content img {
    width: 100%;
}

.tab-content {
    width: auto;
}

.tab-cont {
    width: auto;
    margin-right: 0;
    height: auto;
}

.but h4 {
    font-size: 25px;
}

.but p {
    font-size: 14px;
}

.tab-cont button {
    padding: 18px;
    text-align: center;
    margin: 0% 0 10% 0;
    
}

.footer-info p {
    text-align: center;
    
}


.footer-grid {
    grid-template-columns: auto;
    text-align: center;
    grid-gap: 10%;
    padding: 0 30px;
}

.hrCopy {
    margin: 150px 0 0 0;
}

.copyright-info p {
    text-align: center;
    font-size: 11px !important;
    padding: 0;
    color: #8697a2;
    font-family: avert-semibold;
    margin-top: 1rem;
}
 
.testimonials-grid {
   
    grid-template-columns: auto;
    grid-gap: 0%;
    
}

.carousel-inner {
    overflow: inherit;
}

.testimonials-info {
    padding: 0 25px;
    height: 300px;
}

.blog .carousel-indicators {
    bottom: 0;
}



.testimonial-bg img {
    width: 100%;
} 



.testimonials-info h3 {
    font-size: 20px;
    
}

.testimonials-info p {
    font-size: 16px;
    
}

.testimonials-info img {
    width: 6%;
}

    }

     @media (min-width: 700px) and (max-width: 1024px) {

        .testimonials-info img {
    width: 4%;
}

.testimonials-grid {
   
    grid-template-columns: auto;
    grid-gap: 0%;
    
}

        .header-btn button {
    font-size: 13px;
}

.img-logo img {
    width: 12%;
}

.blog h2,
.bonus-bar h2,
.indo-section h3{
    font-size: 30px;
}

.bonus-desc h3 {
    font-size: 16px;
}

.bonus-desc p {
    font-size: 12px;
}

.bonus-desc button {
    margin: 20px 0 0px 0;
    font-size: 14px;
}

.indo-section p {
    font-size: 14px;
}

.footer-grid {
    grid-template-columns: auto;
    text-align: center;
    grid-gap: 10%;
}

.hrCopy {
    margin: 150px 0 0 0;
}

.indo-section button {
    font-size: 14px;
}

.footer-info p {
    text-align: center;
    
}

.copyright-info p {
    text-align: center;
    margin-top: 1rem;
}

#info-para {
     margin-top: 0; 
}

.but h4 {
    font-size: 22px;
}

.but p {
    font-size: 12px;
}

.tab-content img {
    width: 100%;
}

.daftar-deposit {
    padding: 0;
    height: 500px;
   
}

.header-bg {
    height: 205px;
   
}

.bonus-bg {
    height: 550px;
    
}

      .testimonials-info {
    padding: 0 25px;
    height: 200px;
}

.blog .carousel-indicators {
    bottom: -20px;
}


     }

     @media (min-width: 1500px) and (max-width: 1599px) {

        .header-bg {
    height: 405px;
   
}


     }

     @media (min-width: 1400px) and (max-width: 1499px) {

        .header-bg {
    height: 380px;
   
}

.tab-content img {
    width: 100%;
}


     }




     @media (min-width: 1300px) and (max-width: 1399px) { 

        .header-bg {
    height: 360px;
    
}

.tab-content img {
    width: 100%;
}

      .testimonial-bg img {
    width: 100%;
}

.testimonials-info {
    padding: 0 25px;
    height: 400px;
}

     }


     @media (min-width: 1200px) and (max-width: 1299px) {

        .header-bg {
    height: 335px;
    
}

.tab-content img {
    width: 100%;
}


.testimonial-bg img {
    width: 100%;
}

.testimonials-info {
    padding: 0 25px;
    height: 400px;
}

     }