@import "../css/reboot.css";



/* header */
.header-wrap{
    background-color: var(--purple-color);
    height: 100vh;
    width: 100%;
}
 .container-fluid{
    --bs-gutter-x:0px
 }

.header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-white);
    padding: 20px;
    z-index: 4;
}
.header .logo img{
    width: 100px;
}
.header.active{
    position: fixed;
}
.nav-toggle-btn{
    font-size: 30px;
    transition: all 2s;
}
.menu-icon,
.close-icon {
    color: #fff;
}

.nav-toggle-btn.active .menu-icon,
.nav-toggle-btn .close-icon {
    display: none;
}

.nav-toggle-btn .menu-icon,
.nav-toggle-btn.active .close-icon {
    display: block;
}

.header .action-btn {
    font-size: var(--fs-1);
    background-color: var(--text-color2);
    color: var( --purple-color);
    padding: 6px 12px;
    border-radius: 15px;
}

.navbar {
    position: fixed;
    top: 79px;
    left: -330px;
    bottom: 0;
    background-color: var(--bg-color);
    max-width: 320px;
    width: 100%;
    padding: 20px 10px;
    transition: 0.25s;
    overflow-x: hidden;
    overflow-y: auto;
}

.navbar.active {
    transform: translateX(320px);
    transition: all .8s;
}
.navbar-link {
    color: var(--purple-color);
    font-size: var(--fs-1);
    display: inline-block;
    font-weight: var(--fw-regular);
    padding: 10px 4px;
    opacity: 0.6;
}
.navbar-link.active{
    font-weight: var(--fw-medium2);
    opacity: 1;
}
.navbar-list{
   padding-left: 40px;
}

@media (min-width: 768px){
    .header-wrap{
        background-image: url("../images/bannerLeftLineIcon.png"), url("../images/bannerRightLineIcon.png");
        background-repeat: no-repeat;
        background-position: left 15%, right bottom -100%;
        background-size: auto;
    }
    
    .header .logo img{
        width: 230px;
    }
    .header .action-btn {
        padding: 8px 15px;
    }
}

@media (min-width: 992px){
    .header-wrap{
        background-image: url("../images/bannerLeftLineIcon.png");
        background-repeat: no-repeat;
        background-position: left 15%;
        background-size: auto;
    }
    .nav-toggle-btn {
        display: none;
    }
    .header {
        color: var(--text-color2);
        background: none;
        padding: 35px;
    }

    .header.active {
        color: var(--text-color1);
        background-color: var(--bg-white);
    }
    .header .action-btn {
        font-weight: var( --fw-large);
        padding: 10px 30px;

    }
    .navbar,
    .navbar.active {
      all: unset;
      
    }
    .navbar-list {
        display: flex;
        align-items: center;
        justify-content: end;
    }
    .navbar-link {
        font-size: var(--fs-1);
        font-weight: var(--fw-regular);
        margin-right: 35px;
        line-height:25.2px;
        color: var(--text-color2);

      }
}
@media (min-width:1200px) {
    .header-wrap{
        background-image: url("../images/bannerLeftLineIcon.png"), url("../images/bannerRightLineIcon.png");
        background-repeat: no-repeat;
        background-position: left 15%, right bottom -280%;
        background-size: auto;
    }
    .wrapper{
        scale: 0.9;
    }
}
@media (min-width:1400px) {
    .header-wrap{
        background-position: left 15%, right bottom -100%;
    }
}

/* hero */
.scale-item{
    scale: 0.9;
}
.hero .hero-left-side img{
    width: 320px;
}
.hero .hero-right-side .title{
    font-size: var(--fs-2);
    font-weight: var(--fw-large);
    letter-spacing: 0em;
    text-align: left;
    color: var(--text-color2);
}

.hero .hero-right-side .text{
    font-size: var(--fs);
    font-weight: 400;
    letter-spacing: 0em;
    text-align: left;
    color: var(--text-color2);
}
.btn-global{
    height: 36px;
    width: 132px;
    background-color: var(--text-color2);
    font-size: var(--fs);
    color: var(--purple-color);
    font-weight: var(--fw-regular);
    border-radius: 14px;
    text-align: center;
}
.btn-register{
    background-color:rgb(122,94,232);
    color: #fff;
}

.countries-small{
    position: absolute;
    bottom: 10px;
}

.countries-small span{
    font-size: var(--fs);
    color: #fff;
}

@media (min-width: 768px){
    .hero .hero-left-side img{
        width: 600px;
    }
    .hero .hero-right-side .title{
        font-size: var(--fs-3);
    }
    .hero .hero-right-side .text{
        font-size: var(--fs-2);
        margin: 25px 0px;
    }
   
    .btn-global{
        height: 73px;
        width: 264px;
        background-color: var(--text-color2);
        font-size: var(--fs-2);
        color: var(--purple-color);
        border-radius: 24px;
        
    }
    .btn-register{
        background-color:rgb(122,94,232);
        color: #fff;
    }
    .countries-small span{
        font-size: var(--fs-2);
        color: #fff;
    }
}
@media (min-width: 992px){

   
    .hero .hero-right-side{
        margin-top: 100px;
    }
    .hero .hero-left-side img{
        width: 417px;
    }
    .hero .hero-right-side .text{
    margin: 45px 0px;
    font-size: var(--fs-1);
    }
    .hero .hero-right-side .title{
        font-size: var(--fs-3);
        line-height: 30.4px;
    }
    .countries-small{
        position: absolute;
        bottom: 7%;
        left: 50%;
        transform: translateX(-50%);
    }
    .button-wrap .countries-small{
        margin-left: 40px;
    }
    .btn-global{
        width: 202px;
        height: 65px;
    }
}
@media (min-width: 1200px){
    .btn-global{
        width: 242px;
    }
    .hero .hero-left-side{
        margin-top: 50px;
    }
    .hero .hero-left-side img{
        width: 600px;
    }
    .hero .hero-right-side .text{
        font-size: var(--fs-3);
        }
    .hero .hero-right-side .title{
        font-size: var(--fs-5);
        line-height: 50.4px;
    }
    
    
}
@media (min-width:1400px) {
    .btn-global{
        width: 264px;
    }
    
}
/************************************ main ****************************************/

.main-wrap{
    text-align: center;
    margin-top: 15px;
}
  .main-wrap .grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px; 
    margin-top: 40px;
    margin-bottom: 50px;
  }
.main-wrap  .grid-item{
    width: 310px;
    height: 89px;
    background-color: var(--bg-color2);
    padding: 10px;
    border-radius: 24px;
    margin: auto;
  }
  .main-wrap .grid-item p{
    font-weight: var(--fw-medium);
  }
 
.main-wrap h4{
    font-size: var(--fs-2);
    font-weight: var(--fw-large);
}
.warning{
    height: 89px;
    width: 100%;
    border: 1px solid rgba(108, 77, 230, 0.3) ;
    border-radius: 15px;
    background-color: rgba(108, 77, 230, .1) ;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs);
    padding: 10px;
}
.warning span{
    color: var(--purple-color);
}

@media (min-width: 768px){
    .main-wrap .grid-container {
        grid-template-columns: repeat(2, 1fr);
      }
 
}
@media (min-width: 992px){
    .main-wrap .grid-container {
        grid-template-columns: repeat(3, 1fr);
      }
     
}
@media (min-width:1200px) {
     .main-wrap{
        margin-top: 0px;
      }
}
@media (min-width: 1400px){
    .main-wrap .grid-container {
        grid-template-columns: repeat(4, 1fr);
      }
}




.social-wrap{
    margin-top: 50px;
    width: 100%;
}
.social-wrap col{
    width: 100%;
}
.social{
  background-color: var(--bg-color2);
 
}
.more-btn{
    color: var(--purple-color);
    font-size: var(--fs-1);
}

/******************************** neden onay tr *********************/
.content{
    text-align: center;
    margin-top: 15px;
}
.content h5{
    font-size: var(--fs);
    color: var(--text-color1);
    font-weight: var(--fw-medium);
    letter-spacing: 0.5em;
}
.content h4{
    font-size: var(--fs-3);
    color: var(--purple-color);
    font-weight: var(--fw-extralarge);
    line-height: 60px;
}
.total-wrap img{
    width: 30px;
}
.total-wrap .num{
    font-size: var(--fs-1);
    font-weight: var(--fw-large);
}
.total-wrap .num-p{
    color: var(--purple-color);
}
.total-wrap .text{
    font-size: var(--fs)
}

@media (min-width: 768px){
    .content h5{
        font-size: var(--fs-2);
    }
 
}
@media (min-width: 992px){
    .content h4{
        font-size: var(--fs-5);
    }
    .content{
        margin-top: 140px;
    }
   
    .total-wrap{
        margin-top: 50px;
    }
    .total-wrap img{
        width: 50px;
    }
    .total-wrap .num{
        font-size: var(--fs-3);
    }
    .total-wrap .text{
        font-size: var(--fs-1)
    }
}
@media (min-width: 1400px){
    .content h4{
        font-size: var(--fs-6);
    }
    .total-wrap .num{
        font-size: var(--fs-5);
    }
    .total-wrap img{
        width: 80px;
    }
}
.total-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}



.total-success {
    width: 100%;
    max-width: 300px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.total-img {
    margin-right: 10px;
}
.total-num {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 768px) {
    .total-wrap {
        flex-direction: row;
        justify-content: space-between;
    }
    .total-success {
        width: unset;
    }
}
/********************************** countries ****************/

.countries-wrap{
    text-align: center;
    margin-top: -133px;
    width: 100%;
}
.countries-wrap .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px; 
    margin-top: 40px;
    margin-bottom: 50px;
  }
.countries-wrap  .grid-item{
    width:149px;
    height: 218px;
    margin: auto;
    background-color: transparent;
    border: 1px solid rgba(24, 24, 28, 0.2);
    border-radius: 40px;
    cursor: pointer;
    transition: .3s ease-in-out;
  }
  .countries-wrap  .grid-item:hover{
    background-color: var(--bg-color2);
  }
.countries-wrap h4{
    font-size: var(--fs-2);
    font-weight: var(--fw-large);
    color: var(--text-color1);
}
.countries-wrap .grid-container .grid-item .country-name,
.countries-wrap .grid-container .grid-item .area-code{
    font-size: var(--fs-1);
    font-weight: var(--fw-medium);
    color: var(--text-color1);
}
.countries-wrap .grid-container .grid-item .area-code{
    color: rgba(24, 24, 28, 0.4);
}

.countries-wrap .warning{
    height: 150px;
}
.countries-wrap .warning .warning-box{
    width: 850px;
    height: 60px;
    margin: auto;
}
.countries-wrap .warning .warning-box span{
    font-size: var(--fs);
    text-align: left;
    margin-left: 15px;
}

@media (min-width: 768px){
    .countries-wrap .grid-container {
        grid-template-columns: repeat(3, 1fr);
      }
      .countries-wrap{
        margin-top: -60px;
    }
    .countries-wrap .warning{
        height: 124px;
    }
    .countries-wrap .warning .warning-box span{
        margin-left:0px;
    }
 
}
@media (min-width: 992px){
    .countries-wrap .grid-container {
        grid-template-columns: repeat(6, 1fr);
      }
    .countries-wrap .warning .warning-box span{
        font-size: var(--fs-1);
    }
}
@media (min-width: 1400px){
    .countries-wrap .grid-container {
        grid-template-columns: repeat(8, 1fr);
      }
      .countries-wrap{
        margin-top: 140px;
    }
}

/**************************** info ********************/

.info-wrap{
    margin-top: -133px;
    background-color: var(--bg-color2);
    text-align: center;
}

.question .logo{
    margin-top: 25px;
}
.question h2{
    font-size: var(--fs-3);
    font-weight: var(--fw-large);
}

.question .plane-img{
    width: 300px;
}

.text-box .text-praf{
    font-size: var(--fs);
    font-weight: var(--fw-medium);
    color: var(--text-color1);
    padding: 10px;
}
.text-box span{
    color: var(--purple-color);
}

.step-box{
    width: 100%;
    height: auto;
    border-radius: 48px;
    padding: 15px;
    background-color: var(--bg-color2);
    border: 1px solid rgba(24, 24, 28, 0.3);
    transition: .5s ease-in-out;
    cursor: pointer;
}
.step-box:hover{
    background-color: rgba(108, 77, 230, .1);
    border: 1px solid rgba(108, 77, 230, 0.3);
}
.step-box:hover .step  span,
.step-box:hover .step  h6,
.step-box:hover .step  p{
    color: var(--purple-color);
}
.step-box path{
    transition: .5s;
}
.step-box:hover path {
    fill: var(--purple-color)
}

.step span{
    font-size: var(--fs);
    color: var(--text-color1);
    font-weight: var(--fw-regular);
    opacity: 0.6;
    transition: .5s ease-in-out;

}


.step h6{
    font-size: var(--fs-2);
    font-weight: var(--fw-medium2);
    color: var(--text-color1);
    transition: .5s ease-in-out;
}

.step p{
    font-size: var(--fs);
    font-weight: var(--fw-regular);
    color: var(--text-color1);
    opacity: 0.4;
    transition: .5s ease-in-out;
}
.step img{
    margin-top: 20px;
    margin-left: 10px;
}




@media (min-width: 768px){
    .question h2{
        font-size: var(--fs-4);
    }
    .question .plane-img{
        width: 560px;
    }
    .question .logo{
        margin-top: 45px;
    }
    .text-box p{
        font-size: var(--fs-1);
        line-height: 24px;
    }
    .step h6{
        font-size: var(--fs-3);
    }
    .step p{
        font-size: var(--fs-1);
        line-height: 30px;
    }
   
}
@media (min-width: 992px){
    .question h2{
        font-size: var(--fs-5);
    }
    .info-wrap{
        padding: 55px;
    }
    .step-box{
        height: 200px;
    }
    .info-wrap{
        margin-top: 140px;
        text-align: left;
    }
}
@media (min-width: 1400px){
    .question h2{
        font-size: var(--fs-6);
    }
    .text-box .text-praf{
        font-size: var(--fs-2);
        font-weight: var(--fw-medium);
        line-height: 36px;
        color: var(--text-color1);
    }
    .info-wrap{
        margin-top: 60px;
    }
    
}
/*********************** blog*************/
.blog-wrap{
    margin-top: -60px;
}
.blog-wrap h3{
    font-size: var(--fs-4);
    color: var(--purple-color);
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px; 
    margin-top: 40px;
    margin-bottom: 50px;
  }
  .grid-item{
    width: 350px;
    height: 114px;
    background-color: var(--bg-color2);
    padding: 10px;
    border-radius: 32px;
    margin: auto;
  }

 .grid-item p{
    font-size: var(--fs);
    font-weight: var(--fw-regular);
 }
 .grid-item .new{
    width: 75px;
    height: 36px;
    background-color: rgba(108, 77, 230, 0.1);
    border-radius: 16px;
    color: var(--purple-color);
    font-size: var(--fs);
    font-weight: var(--fw-regular);
    line-height: 36px;
 }
 .grid-item .new span{
    display: inline-block;
 }
 @media (min-width: 768px){
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
      }
      .blog-wrap{
        margin-top: 0px;
    }
}
@media (min-width: 992px){
      .grid-item p{
        font-size: var(--fs-1);
     }
     .blog-wrap{
        margin-top: 5px;
    }
    
   
}
@media (min-width: 1200px){
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
      }
}

@media (min-width: 1400px){
    .grid-item{
        width: 420px;
      }
}
 /********************* service *********/
 .service-wrap{
    margin-top: -60px;
 }
 .highest-wrap{
  width: 100%;
  height: auto;
  border: 1px solid rgba(24, 24, 28, 0.2);
  border-radius:48px;
 
 }
 .flag{
    margin-left: 2rem;
 }
 table{
    border-collapse: unset;
 }
 td{
    padding: 10px;
 }
 .highest-wrap .highest-title{
    width: 100%;
    height: 123px;
    background-color: var(--bg-color2);
    border-top-right-radius: 48px;
    border-top-left-radius: 48px;
    padding: 25px;
 }
 .highest-wrap button{
    color: var(--purple-color);
    font-size: var(--fs-1);
 }
  .highest-title h5{
    font-size: var(--fs-2);
    color: var(--purple-color);
    font-weight: var(--fw-medium2);
 }
 .highest-table{
    padding: 25px;
    table-layout:unset;
 }
 .highest-table .table-title{
    width: 277.5px;
 }

 .highest-table .table-text{
    font-size: 14px;
    color: var(--text-color1);
    text-align: left;
    font-weight: var(--fw-medium);
 }
 .highest-table .table-text .flag{
    width: 28px;
    height: 28px;
 }
 .highest-table .table-text.num{
    font-weight: var(--fw-medium2);
 }
 .highest-table .table-text.num small{
    font-weight: var(--fw-regular);
    font-size: var(--fs);
 }
 .country-table-box .table-box{
    position: relative;
 }
 .country-table-box .table-box::after{
    content: "";
    position: absolute;
    bottom: -10px;
    border-bottom: 1px solid rgba(24, 24, 28, 0.15);
    width: 100%;
 }

@media (min-width: 768px){
    .highest-title h5{
        font-size: var(--fs-3);
     }
     .highest-table .table-text{
        font-size: var(--fs-1);
     }
     .highest-table{
        padding: 35px;
     }
    
}
@media (min-width: 992px){
    .service-wrap{
        margin-top: 0px;
     }
     .highest-wrap .highest-title{
        padding: 42px;
     }
}

 
 /********************** comment ***********/

 .comment-wrap{
    margin-top: 60px;
    text-align: center;
 }

 .comment-wrap h3{
    color: var(--purple-color);
    font-size: var(--fs-3);
    font-weight: var(--fw-large);
    line-height: 50.4px;
 }
 .comment-wrap p{
    font-size: var(--fs-1);
    color:rgba(24, 24, 28, 0.5);
 }
.comment-box{
    position: relative;
}

 .comment-main{
    width: 100%;
    height: 390px;
    border-radius: 40px;
    border: 1px solid rgba(24, 24, 28, 0.15);
    margin-top: 50px;
    text-align: left;
    padding: 20px;
    position: relative;
    transition: .5s ease-in-out;
 }
 .comment-main::after{
  content: "";
  position: absolute;
  bottom:20%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color:rgba(24, 24, 28, 0.15)
 }
 .comment-main:hover{
    background-color: var(--bg-color2);
 }
 .owl-carousel .owl-item img{
    display:unset;
    width:unset;
 }
 .comment-main h5{
    font-size: var(--fs-2);
    font-weight: var(--fw-medium2);
    color: var(--text-color1);
    transition: .5s ease-in-out;
 }
 .comment-main:hover h5{
    color: var(--purple-color);
 }
 .comment-main p{
    font-size: var(--fs);
    line-height: 24px;
    font-weight: var(--fw-regular);
    color: rgba(24, 24, 28, 0.8);
 }

 .comment-footer{
    margin-top: 20px;
 }
 .comment-footer .user-wrap span,
 .comment-footer .user-wrap .date{
    font-size: var(--fs);
    color: var(--text-color1);
    font-weight: var(--fw-medium);
 }
 .comment-footer .user-wrap .date{
    font-weight: var(--fw-regular);
    color: rgba(24, 24, 28, 0.4); ;
 }
 /* .owl-prev{
    position: absolute;
    left: 0;
 }
 .owl-prev:before{
    content: url("../images/prevArrow.svg");
    margin-left: -30px;
 }
 .owl-next:after{
    content: url("../images/nextArrow.svg");
    margin-right: -30px;
 } */

 @media (min-width: 768px){
    .highest-title h5{
        font-size: var(--fs-3);
     }
     .highest-table .table-text{
        font-size: var(--fs-1);
     }
     .comment-wrap h3{
        font-size: var(--fs-4);
     }
     .comment-main{
       width: 100%;
    }
    .comment-main::after{
        bottom:27%;
    }
    .comment-footer{
        margin-top: 75px;
    }
    
}
@media (min-width: 992px){
    .comment-wrap{
        margin-top: 0px;
     }
     .comment-wrap h3{
        font-size: var(--fs-5);
     }
     .comment-main::after{
        bottom:20%;
    }
    .comment-footer{
        margin-top: 55px;
    }
    .comment-box::after{
        content: url("../images/nextArrow.svg");
        position: absolute;
        top:50%;
        right: -1.5%;
        cursor: pointer;
    }
    .comment-box::before{
        content: url("../images/prevArrow.svg");
        position: absolute;
        top:50%;
        left:-4%;
        cursor: pointer;
    }
}
@media (min-width: 1400px){
   
  .comment-main{
    width: 400px;
    padding: 30px;
  }
}

 /*********************** SSS ******************/
 .sss-wrap{
    margin-top: 60px;
 }
 
 .sss-wrap h4{
    color: var(--purple-color);
    font-size: var(--fs-2);
    font-weight: var(--fw-large);
    line-height: 40.32px;
    margin-bottom: 50px;
    text-align: center;
 }
 .accordion-wrap{
    margin-top: 60px;
 }
 .accordion{
    --bs-accordion-bg:var(--bg-color2)
 }
 .accordion-button:not(.collapsed){
    background-color: transparent;
    box-shadow: none;
 }
 .accordion-button:focus{
    outline: none;
    border: none;
    box-shadow: none;
 }
 .accordion-item:first-of-type{
    border-top-left-radius:40px;
    border-top-right-radius:40px;
 }
 .accordion-item:last-of-type{
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
 }

 .accordion-item .accordion-header button{
    font-size: var(--fs-2);
    color: var(--text-color1);
    font-weight: var(--fw-medium);
 }
 .accordion-item .accordion-collapse .accordion-body strong{
    font-size: var(--fs-2);
    color: var(--purple-color);
    font-weight: var(--fw-medium2);
 }
 .accordion-item .accordion-collapse .accordion-body p{
    font-size: var(--fs);
    color: rgba(24, 24, 28, 0.8);
    font-weight: var(--fw-regular);
 }
 .accordion-item .accordion-collapse .accordion-body{
    border-top: 1px solid rgba(24, 24, 28, 0.1);
 }
 @media (min-width: 768px){
    .sss-wrap h4{
        font-size: var(--fs-3);
     }
    
}
@media (min-width: 992px){
    .sss-wrap{
        margin-top: 0px;
     }
     .sss-wrap h4{
        font-size: var(--fs-4);
        text-align: left;
     }
}


/********************* register *************/

 .register-wrap{
    margin-top: 60px;
    background-color: var(--purple-color);
    width: 100%;
    height: auto;
    padding: 15px;

 }
 .register-question h4{
    font-size: var(--fs-5);
    color: #fff;
    font-weight: var(--fw-large);
    text-align: left;
 }
 
 .register-box{
    margin-top: 60px;
 } 
 .rg-box .button-wrap{
    margin-top: 60px;
 }
 .rg-box .button-wrap span{
    margin-top: -30px;
 }
 .rg-box .button-wrap .btn-register{
    width: 264px;
    height: 73px;
    border-radius: 24px;
    font-size: var(--fs-1);
 }
 .rg-box .register-question p{
    font-size: var(--fs-1);
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, 0.4);
    width: 100%;
    height: auto;
 }

 @media (min-width: 992px){
     .register-wrap{
         margin-top: 0px;
         height: 347px;
      }
      .register-question {
         width: 512px;
         height: 200px;
      }
      .rg-box .register-question p{
         width: 512px;
         height: 100px;
      }
 }
/********************* text ****************/

 .text-wrap{
    margin-top: -60px;
    padding: 15px;
 }
 .text-line .text-box h6{
    font-size: var(--fs-1);
    font-weight: var(--fw-medium);
    color: var(--text-color1);
    line-height: 25px;
 }
 .text-line .text-box p{
    font-size: var(--fs);
    font-weight: var(--fw-regular);
    color: rgba(24, 24, 28, 0.8);
    line-height: 24px;
 }

@media (min-width: 768px){
    .text-wrap{
        margin-top:0px;
    }
}
@media (min-width: 992px){
    .text-wrap{
        margin-top: 200px;
     }
     .up-btn{
        position: fixed;
        width: 80px;
        height: 80px;
        bottom: 55%;
        right: 10%;
        background-color: var(--purple-color);
        border-radius: 50%;
        transition: .5s;
        cursor: pointer;
        visibility: hidden;
     }
    .up-btn:is(:hover, :focus) { 
        opacity: .8; 
    }
    .text-wrap{
        margin-top: 8px;
        margin-bottom: 60px;
     }
}

/**************** footer **********/

.footer{
    background-color: var(--bg-color2);
    padding: 15px;
    margin-top: -60px;

 }
 .footer-top{
    padding-block: 60px ;
    margin-top: -60px;

}
.footer-btn .btn-global{
    width:208px;
    border: 1px solid rgba(108, 77, 230, 0.3);
    border-radius: 20px;
    background-color: transparent;
}
.footer-list li{
    font-size: var(--fs-1);
    color: var(--purple-color);
    font-weight: var(--fw-medium);
    line-height: 25px;
}
.footer-list li .footer-list-title{
    font-weight: var(--fw-large);
}
.footer-bottom{
    border-top: 1px solid rgba(24, 24, 28, 0.15);
    width: 100%;
}

.footer-bottom .footer-text{
    color: rgba(24, 24, 28, 0.4);
    font-size: var(--fs);
    font-weight: var(--fw-medium);
    text-align: left;
}

.footer-bottom span b,
.footer-bottom span{
    color: rgba(24, 24, 28, 0.4);
    font-size: var(--fs);
    font-weight: var(--fw-medium2);
}
.footer-bottom span{
    font-weight: var(--fw-regular);
}

@media (min-width: 768px){
    
    
}
@media (min-width: 992px){
    
    .footer{
    padding: 0px;
    margin-top: 0px;
    }
    .footer-bottom .footer-text{
        height: 60px;
        width: 800px;
    }
    
}
@media (min-width: 1400px){
    .footer-bottom .footer-text{
        height: 60px;
        width: 1050px;
    }
}



/* [data-section] > * {
    transform: translateY(300px);
    opacity: 0;
    transition: .5s ease-in-out;
}

[data-section].active > * {
    transform: translateY(0);
    opacity: 1;
} */