/*--------------------------------------------------
    ## Custom Fonts
---------------------------------------------------*/

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fw-m,
.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

h1,
.anek-latin-regular{
  font-family: "Anek Latin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}



/*--------------------------------------------------
    ## Globals
---------------------------------------------------*/



.cc1{/* center center */         display: flex; justify-content: center; align-items: center; position: relative; }
.lb1{/* center center */         display: flex; justify-content: flex-start; align-items: flex-end; position: relative; }
.bb1{/* border-bottom */         border-bottom: 1px solid #2A2A2A; padding-bottom: 14px; margin-bottom: 14px; }

.bt1{/* border-bottom */         border-top: 1px solid #2A2A2A; padding-top: 14px; margin-top: 14px; }
.br-40{/* border-radius*/        border-radius: 40px}
.br-32{/* border-radius*/        border-radius: 32px}
.br-20{/* border-radius*/        border-radius: 20px}
.br-btm1{/*border-bottom*/       border-bottom: 1px solid  rgba(255, 255, 255, 0.20);}
.br-top1{/*border-bottom*/       border-top: 1px solid  rgba(255, 255, 255, 0.20);}
.text-right{ text-align: right}

.pd60{padding: 60px;}
.z10{ z-index: 10; position: relative}
.d-flex2{display: flex; justify-content: space-between; }
.d-flex3-bl{display: flex; justify-content: space-between; align-items: flex-end}
.lead{font-size: 18px;}

h1{ font-size: 65px}
h2{ font-size: 55px}
h3{ font-size: 45px}
h4{ font-size: 35px}
h5{ font-size: 25px}
h6{ font-size: 20px}

h1, h2, h3, h4, h5, h6{font-family: "Anek Latin", sans-serif;}

@media (max-width: 767.98px) {
h1{ font-size: 45px}
h2{ font-size: 35px}
h3{ font-size: 30px}
h4{ font-size: 25px}
h5{ font-size: 22px}
h6{ font-size: 20px}
 
}

a{ text-decoration: none; transition: 0.5s ease-in-out}
a.btn{ transition: 0.3s ease-in-out}

.gr-1{
background: linear-gradient(90deg, #FFF 0%, #D0592D 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* gradient border 2*/
.gr-br-2 {  position: relative;}

.fold4 .rhs .data:nth-child(2)::before,
.fold6 .box::before,
.gr-br-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(90deg,   rgba(80, 63, 58, 0.1) 0%, rgba(142, 142, 142, 0.4) 100%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
 
}

.gr-br-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(90deg, rgba(80, 63, 58, 0.1) 0%, #d0592d 100%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
 
}



.btn-gr-1{background: linear-gradient(90deg, #81D5F8 0%, #0691CA 100%);}

.gr-3{
background: linear-gradient(97deg, rgba(255, 255, 255, 0.60) 10.41%, #FFF 96.38%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}


/*--------------------------------------------------
    ## Sections 
---------------------------------------------------*/
body{  background:  #141414; color: #D0D0D0; }

.navbar{ position: fixed; left: 0px; right: 0px; top: 0px; z-index: 10; transition: 0.5s ease-in-out}
.navbar.scrolled-down{ background: #030303}


@media (max-width: 767.98px) {
.navbar{  background: #030303; position: fixed; left: 0px; right: 0px; top: 00px; z-index: 10; transition: 0.5s ease-in-out}
.scrolled-down{ position: fixed; left: 0px; right: 0px; top: 00px;}

button:focus:not(:focus-visible){box-shadow: none}
}



/* ------  fold1 ------  */
.hdr1{   background:  url("../assets/bg-hero.webp") no-repeat center -120px ;padding-top: calc(85px + 80px) } 

.panel1{padding: 50px 40px; border-radius: 25px; background: #D0592D; color: #fff;}
.panel1 hr{margin: 2rem 0px}
.panel1 .row-cols-lg-2 .col:nth-child(1) { border-bottom: 1px solid #E06335; border-right: 1px solid #E06335; padding: 0px 10px 0px 0px}
.panel1 .row-cols-lg-2 .col:nth-child(2) { border-bottom: 1px solid #E06335;padding: 0px 00px 0px 10px}
.panel1 .row-cols-lg-2 .col:nth-child(3) { border-right: 1px solid #E06335; margin-top: 0px; padding: 20px 10px 0px 0px}
.panel1 .row-cols-lg-2 .col:nth-child(4) { margin-top: 0px; padding: 20px 0px 0px 10px}
.panel1 .row-cols-lg-2 .data{ padding: 00px 10px 20px 10px}
.panel1 .btn-lg{ border-radius: 10px; font-size: 14px;padding: 15px;}


@media (max-width: 767.98px) {
    .panel1{padding: 20px; border-radius: 25px; background: #D0592D; color: #fff;}
    .panel1 .row-cols-lg-2 .col{ border: none!important}
}



/* ------  fold2 ------  */


.bg-trade{  background:  url("../assets/bg-trading.webp") no-repeat; background-size: cover; min-height: 900px; position: relative; z-index: -1; margin-top: -400px; }


@media (max-width: 767.98px) {
.bg-trade{  background:  url("../assets/bg-trading.webp") no-repeat; background-size: cover; min-height:auto; position: relative; z-index:0; margin-top: auto; }

}


.fold2 {
  background: url("../assets/bg-shape1.webp") no-repeat;
  background-size: cover;
  margin-top: -400px;
/*  margin-bottom: 400px;*/
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.fold2 .lhs {
  padding: 3rem;
}

.fold2 .lhs h2 {}

.fold2 .lhs a.btn {
  margin-top: 1rem;
}

.fold2 .rhs {
  text-align: right;
}

.fold2 .data {
  padding: 40px 30px 30px 30px;
  text-align: center;
}

.fold2 .cn-box {
  padding: 8.5rem 3rem 4rem 3rem;
}

.fold2 .box {
  border-radius: 30px;
  padding: 40px;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.fold2 .box h6,
.fold2 .box p,
.fold2 .box i {
  transition: transform 0.3s ease-in-out;
}

.fold2 .box .media {
  text-align: left;
  overflow: hidden;
  margin-bottom: 32px;
  position: relative;
  border-radius: 100px;
  display: flex;
  max-width: 210px;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Added transition for opacity */
}

.fold2 .box .media img {
  transition: transform 0.3s ease-in-out;
}

.fold2 .box .media::after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 2;
  background: linear-gradient(90deg, rgba(208, 89, 45, 0.00) 0%, #D0592D 100%);
  opacity: 1;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Added transition for opacity */
}

.fold2 .box:hover h6,
.fold2 .box:hover i {
  color: var(--bs-primary);
}

.fold2 .box:hover {
  background: #141414;
}

.fold2 .box:hover .media::after {
  opacity: 0;
}

.fold2 .box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  border: 1px solid transparent;
  background: linear-gradient(90deg, rgba(80, 63, 58, 0.1) 0%, #d0592d 100%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}


@media (max-width: 767.98px) {
 .fold2{  background: #141414;   margin-top:50px!important; border-radius: 20px;min-height: auto;}
.fold2 .cn-box{padding: 2rem 0rem}
    
}


/* FOLD 3 */
.fold3{ margin-top:10rem; margin-bottom: 6rem}

.fold3 .lhs{ display: flex; flex-direction: column; column-gap: 20px;}
.fold3 .lhs .one{ border-radius: 30px; background:  url("../assets/bg-shade.svg"); background-size: cover;padding: 50px;}
.fold3 .lhs .two{ background:  url("../assets/bg-fold3-img1.jpg") center center; background-size: cover; border-radius: 30px; margin-top: 12px;}

.fold3 .rhs{}
.fold3 .rhs .data{ padding: 20px; font-size: 14px;}
.fold3 .rhs i{margin-right: 8px;}



.fold3 .box{ border: 1px solid #202223; border-radius: 20px; background:  url("../assets/bg-rings.webp") center top no-repeat #0B0C10; padding: 40px;height: 100%;  }
.fold3 .box .media{ text-align: center; padding-bottom: 80px;}
.fold3 .box h6{ margin-bottom:20px}
.fold3 .col-lg-4{ margin-bottom: 2rem;}


@media (max-width: 767.98px) {
.fold3 {margin-top: 2rem}
.fold3 .col-lg-4{ margin-bottom: 2rem; padding-left: 2rem; padding-right: 2rem}
}


/* Fold 5 - Tab variant*/
.bg2{ background:  url("../assets/bg-shape2.svg") right -30px; padding-bottom: 10rem }

@media (max-width: 767.98px) {
.bg2{ background:  url("../assets/bg-shape2.svg") right -30px; padding-bottom: 2rem }


}
.fold5{ margin-top: 10rem;  }

.fold5 .tb1{ background: #242424; border: 1px solid #66666650; border-radius: 10px; padding: 6px;}
.fold5 .tb2{ }

.fold5.eq-tabs  h6{margin-bottom: 0px;}
.fold5.eq-tabs .strike{ text-decoration: line-through}
.fold5.eq-tabs .h80px{ height: 80px;}
.fold5.eq-tabs .h100px{ height: 100px;}
.fold5.eq-tabs .h120px{ height: 120px;}

.fold5.eq-tabs .nav.nav-tabs{  background: #242424; border-radius: 10px; padding: 6px; display: inline-flex; border: 1px solid #66666650; }
.fold5.eq-tabs .nav-item .nav-link{ border-radius: 6px; border-color: transparent}
.fold5.eq-tabs .nav-item .nav-link:hover{  border-color: var(--bs-primary);   }
.fold5.eq-tabs .nav-item .nav-link.active{ background: var(--bs-primary); color:#AFAFAF  }

.fold5.eq-tabs .list-group-item{ background: none; color: #AFAFAF; padding: 16px; border-bottom: 1px solid #323333; transition: 0.2s ease-in-out} 
.fold5.eq-tabs .list-group-item:hover{ background: #18191A; }
.fold5.eq-tabs .list-group-item.active{ background: var(--bs-primary);  font-weight: bold; color: #fff;}

.fold5.eq-tabs .plus {width: 60%; border-radius: 20px; background: linear-gradient(293deg, #252525 66.63%, #3A3A3A 100.6%);}
.fold5.eq-tabs .plus .list-group-item{ border-right: 0px; padding-right: 50px; }

.fold5.eq-tabs .minus{width:40%; margin-left: -30px; background: #D0D0D0; border-radius: 20px; position: relative; z-index: 10;}

.fold5.eq-tabs .minus .list-group-item{ color: #242424; border-bottom: 1px solid #E4E4E4;}
.fold5.eq-tabs .minus .list-group-item:hover{ background: #18191A; color: #fff }

.list-group.have-2kids .list-group-item{ display: flex; text-align: center; align-items: center}
.list-group.have-2kids .list-group-item > div { flex-shrink: 0; flex-grow: 1;}

.fold5.eq-tabs .list-group-item:last-child{border-bottom: 0px;}

.fold5.eq-tabs  a:hover{ }
.strike {
      text-decoration: line-through;
    }

@media (max-width: 767.98px) {
.fold5 {margin-bottom: 4rem; padding: 40px 10px; margin-top: 0px;}
.fold5.eq-tabs .nav.nav-tabs{ background: #000; margin-bottom: 12px;}
.fold5 .list-group .list-group-item:first-child{ background: #000000}
    
    .fold5.eq-tabs .d-flex{display: block!important;}
    .fold5.eq-tabs .d-flex2{display: block!important;}
    .fold5.eq-tabs .plus{width: 100%}
    .fold5.eq-tabs .plus .list-group-item{ border-right: 1px solid #242628; padding-right: 20px;display: flex;
    flex-wrap: wrap;
    gap: 16px; }

.fold5.eq-tabs .minus{width: 100%; margin-left: auto; margin-top: 16px}
.fold5.eq-tabs .h80px{ height: auto}
.fold5.eq-tabs .h100px{ height: auto}
.fold5.eq-tabs .h120px{ height: auto}
    

}



/* fold 4 --  */
.fold4{padding-bottom: 6rem}
.fold4 .lhs{  background:  url("../assets/bg-shape3.svg") left top  no-repeat #1E1E1E; background-size: cover;  border-radius: 30px 30px 0px 30px; padding: 40px;}

.fold4 .rhs{ display: flex; flex-direction: column; column-gap: 8px;}
.fold4 .rhs .data { margin-bottom: 12px; border-radius: 30px; padding: 50px 40px 30px 40px; margin-left: 12px; position: relative}
.fold4 .rhs .data h6 span{margin-right: 8px; color: var(--bs-primary)}
.fold4 .rhs .data h6{margin-bottom: 20px}
.fold4 .rhs .data:last-child{margin-bottom: 0px;}

.fold4 .rhs .data::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(270deg, rgba(80, 63, 58, 0.1) 0%, #d0592d 100%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
 
}


@media (max-width: 767.98px) {
.fold4 .lhs {margin-bottom: 4rem}
}



.bg3{   background:  url("../assets/bg-hero.webp") no-repeat center bottom  } 
.bg4{   background:  url("../assets/img-call-center.webp") no-repeat; background-size: cover; max-height: 600px;} 


@media (max-width: 767.98px) {
.bg4{   background: none;max-height:auto;} 

}



/* fold6 */
.fold6{}
.fold6 .title{ background: #141414; border-radius: 0px 0px 30px 30px; }
.fold6 .title .data{ padding: 30px 50px; }


/* fold8*/
.fold8{margin-top: 4rem; margin-bottom: 6rem; border-radius: 30px; background:  url("../assets/bg-discord.webp") no-repeat; background-size: cover; padding: 50px 30px;}

.fold8 .data{padding:  1rem 2rem; }
.fold8 .data h6{ padding-bottom: 1.25rem}
.fold8 .img-discord {max-width: 50%; margin-bottom: 2rem;}

@media (max-width: 767.98px) {

.fold8{
    margin-top: 0rem;
        margin-bottom: 0rem;
        padding: 30px;
        border-radius: 0px;
    border: 0px;
    
    }
.fold8 .data{ border-bottom: 1px solid #303030; padding: 10px; }
.fold8 .img-discord{ max-width: 50%; margin: 0 auto}
}





/* fold 7 laptop*/
.fold7{ 
    background: url(../assets/bg-hero.webp) no-repeat center top;
    background-size: cover;
     position: relative;
    z-index: -1;
}
.fold7 .title{padding-top: 18rem; text-align: center;    padding-bottom: 13rem; }

.fold7 .lhs{ padding: 50px; border-radius: 30px; height: 100%; position: relative; z-index: 1; background: url("../assets/bg-shade2.webp") no-repeat;
    background-size: cover; display: flex; justify-content: space-between; flex-direction: column;}



.fold7 .lhs .list-unstyled{margin-bottom: 30px;}
.fold7 .lhs .list-unstyled li{margin-bottom: 12px;}
.fold7 .social{ display: flex; column-gap: 12px; }
.fold7 .social a{  border-radius: 99px;  height: 40px; width: 40px; text-align: center; border: 1px solid #ffffff40; transition: 0.25s; line-height: 36px;}
.fold7 .social a:hover{ background: #000000}


.fold7 .rhs{ padding: 50px; background: #242424; border-radius: 30px; height: 100%; position: relative; z-index: 1;}
.fold7 .rhs .btn-lg{padding: 10px 20px;}

.fold7 .form-control { background: none; color: #D0D0D0; border-color: #434343!important}

@media (max-width: 767.98px) {
.fold7 .lhs{padding: 30px; }
.fold7 .rhs{padding: 30px; }
    
.fold7{  background:  url("../assets/bg-hero.webp") no-repeat center bottom; background-size: cover;  padding-top: 1rem; padding-bottom: 2rem }
.fold7  .social{justify-content: flex-start}
    
}



footer{    
    padding-top: 8rem; 
    position: relative;   
    padding-bottom: 2rem 

}

footer .links{ display: flex; column-gap: 12px;}
footer .links a{  text-align: center;  transition: 0.25s;  padding: 6px 12px;  text-decoration: none; }
footer .links a:hover{ background: #000000}


@media (max-width: 767.98px) {

footer{    
    padding-top: 2rem; 
    position: relative;   
    padding-bottom: 1rem 
}
  
footer .links{ 
    white-space: wrap;
        display: block;
        text-align: left;
        margin: 30px 0px;
    }  
footer .links a{width: 48%; display: inline-block; text-align: left;}  
footer .d-flex2{ display:block;}
    
}