:root{
    --primary-color: #a11fcb;
    --secondary-color: #a11fcb;
}


body{
    background-color: #fff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}


header.site-header{
    min-height: 114px;
}

.dark-top{
    background-color: #333;
    color: #fff;
    width: 100%;
}
.list-top{
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: end;
    align-items: center;
    margin-bottom: 0;
}

.list-top li{
    padding: 0.5em;
    text-transform: uppercase;
    font-size: smaller;
    font-weight: 600;
    cursor: pointer;
}

.list-top li:hover{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #0092f4;
    transition: width .3s;

}

.list-top li:last-child{
    background: rgba(135,135,135,.3);
    border-radius: 500px;
    padding: 0 11px;
}

.navbar-nav{
    align-items: center;
}

.nav-item a.btn{
    background: linear-gradient(90deg,var(--primary-color) 0,var(--secondary-color) 49.37%,#844eb4 101.93%);
    border-radius: 500px;
    padding: 3px 24px;
    font-size: 16px;
    color: white;
    background-size: 300% 100%;
    border: 0;
    text-transform: unset !important;
}

/* how it works */
.how-it-works{
    background-image: linear-gradient(45deg,#a11fcb,#a11fcb);
    background-repeat: repeat-x;
    color: white;
}
.how-it-works .row {
    min-height: 500px !important;
    height:780px;
    background-color: white;
}

.how-it-works img {
    max-width: 100%;
    width: 100%;
    display: block;
    max-height: 100%;
    height: auto;
    transform: translateX(100%); /* Initial position for slide-in effect */
    animation: fromRight 1s ease-in-out forwards; /* Apply fromRight animation */
}
.how-it-works img {
    max-width: 100%;
    width: 100%;
    display: block;
    max-height: 90vh;
    height: auto;
    transform: translateX(100%); /* Initial position for slide-in effect */
    animation: fromRight 1s ease-in-out forwards; /* Apply fromRight animation */
}

.content-wrap {
    padding: 10%;
    opacity: 0; 
    animation: fadeIn 1s ease-in-out forwards; 
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fromRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.content-wrap h3{
    font-size: 3.0625rem;
    line-height: 1.0612244898;
}

.content-wrap p{
    font-size: 1.125rem;
    line-height: 1.5555555556;
}

.content-wrap .btn-warning, .imgs-container .btn-warning, .text .btn-warning{
    background-color: #a11fcb;
    color: white;
    text-transform: none;
}
.content-wrap .btn-warning:hover, .imgs-container .btn-warning:hover, .text .btn-warning:hover{
    background-color: #a11fcb !important;
    color: white;
    text-transform: none;
}

/* how it works 2 */
.works2{
    background-color: #fff;
    /* padding: 4em 32px; */
    width: 100%;
}

.vc{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vc h1{
    font-size: 3.0625rem;
    line-height: 1.0612244898;
    font-family: "Oswald", sans-serif;
    font-weight: 900;
    /* font-size: 75px; */
    color: #000;
}
.vc p{
    line-height: 26px;
    letter-spacing: .01em;
    font-size: clamp(1rem,calc((16/16 * 1rem) + (1vw - .62rem) * (100 * ((18/16) - (16/16))/(76.25 - 62))),1.125rem);
}

.imgs-container{
    gap: 1em;
}

.imgs-container img{
    height: 50px;
}



.form-card{
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 10px 32px 0 rgba(0,0,0,.15),0 40px 40px 0 rgba(0,0,0,.04);
    padding: 30px;
    /* width: 20vw; */
}

.input{
    border: 1px solid gray;
    padding: 10px;
    font-size: large;
    border-radius: 10px;    
}

.input:hover{
    border: 3px solid gray;
}

.input:focus{
    border: 3px solid #000;
    box-shadow: none;
}

.disclaimer{
    background: gainsboro;
    border-radius: 20px;
    padding: 16px;
    display: flex;
    justify-content: center;
    gap: 1em;
}
.fa-exclamation{
    background-color: #edc843;
    border-radius: 50%;
    padding: 5px;
    color: black;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.price{
    border: 1px solid #000;
    border-radius: 10px;
    font-weight: 500;
    background: white;
    padding: 8px;
    width: 48%;
    font-size: 14px;
}
.price:hover {
    background-color: var(--secondary-color);
    border: none;
    color: white;
}
.send {
    background-color: #a11fcb ;
    border: none;
    border-radius: 10px;
    width: 48%;    
    font-size: 14px;
    color: #fff;
}
.send:hover {
    background-color: var(--secondary-color);
}

.part3{
    background-image: linear-gradient(45deg,#a11fcb,#a11fcb);
    background-repeat: repeat-x;
    color: white;
}

.part3 .container{
    /* padding: 100px 30px; */
    width: 100%;
}

.part3 h1{
    line-height: 1.07;
    font-weight: 700;
    margin-bottom: .9rem;
    font-family: Montserrat,Helvetica,Arial,Microsoft Yahei,微软雅黑,STXihei,华文细黑,sans-serif;
}

.part3 p{
    font-size: 1.125rem;
    line-height: 1.5555555556;
}

.part3 .btn{
    background: #a11fcb;
    padding: 10px 24px;
    font-size: 16px;
    color: white;
    background-size: 300% 100%;
    border: 0;
    text-transform: unset !important;
}



.part4 .text{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.text h6{
    font-size: 1.6875rem;
    line-height: 1.3333333333;
    color: #1c3969;
    font-weight: 700;
}
.text p{
    color: #1c3969;
}

.our-customers h2{
    color: #000;
    font-weight: 700;

}
.our-customers hr{
    height: 2px !important;
    width: 70px;
    margin: auto;
    background: linear-gradient(270deg,#0092f4 -12.86%,#d054ce 105%) !important;
}

.our-customers .text2{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.our-customers video{
    max-width: 100%;
}

.text2 .btn{
    border-radius: 500px;
    font-size: 20px;
    color: white;
    background-size: 300% 100%;
    border: 0;
    text-transform: unset !important;
    width: 50%;
}

.text2 .btn:hover{
    background: var(--secondary-color);
}

.trust-pilot{
    background-color: #deebf7;
}


body {
    font-family: Arial, sans-serif;
}

.reviews-slider {
    display: flex;
    align-items: center;
    width: 100%;
    /* margin: auto; */
    overflow: hidden;
    position: relative;
}

.reviews-container {
    display: flex;
    transition: transform 0.5s ease;
    width: calc(100% * 2); /* 2 slides, each containing 3 reviews */
}

.review {
    flex: 1 0 33.333%; /* Show 3 reviews at a time */
    box-sizing: border-box;
    padding: 30px;
    margin: 0 5px;
}

.stars {
    color: #f39c12;
}

.arrow {
    background-color: transparent;
    border: 1px solid gray;
    color: gray;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.left {
    left: 0;
}

.right {
    right: 0;
}



.top-text{
    max-width: 540px;
    margin: auto;
}

.top-text h2{
    font-weight: 400;
    color: #000;
}
.top-text p{
    line-height: 30px;
}
.stars{
    justify-content: space-between;
}

.slider-wrapper {
    overflow: hidden;
    width: 100%;
}

.swiper-container {
    display: flex;
    gap: 1em;
    transition: transform 0.5s ease;
}

.swiper-container .img img {
    max-width: 140px;
    height: 50px !important;
    height: auto;
    cursor: pointer;
}



.fa-star{
    background: var(--secondary-color);
    color: white;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fa-star:last-child{
    background: gainsboro;
}

.carousel-item {
    display: flex;
    justify-content: center;
    transition: transform 0.6s ease;
  }
  
  .carousel-item.active,
  .carousel-item-next,
  .carousel-item-prev {
    display: flex;
    justify-content: center;
  }
  
  .carousel-item .card {
    flex: 0 0 30%;
    margin: 0 10px;
  }

  .partners{
    border-top: 2px solid linear-gradient(270deg,#0092f4 -12.86%,#d054ce 105%);
    border-bottom: 2px solid linear-gradient(270deg,#0092f4 -12.86%,#d054ce 105%);
    background: whitesmoke;
    padding: 50px 0;
  }
  .partners h6{
    font-size: 1.6875rem;
    line-height: 1.3333333333;
    color: #1c3969;
    font-weight: 700;
  }
  .partners p{
    color: gray;
  }

  .footer{
    background-color: #333;
    color: white;
    padding: 100px 0;
  }

  .footer h4{
    font-size: 20px;
    font-weight: 700;
  }

  .footer p{
    font-size: 14px;
    cursor: pointer;
  }

  .footer p:hover{
    color: var(--secondary-color);
  }

  .footer .fa-brands{
    font-size: 30px;
    margin: 0 10px;
    cursor: pointer;
  }
  
  .content-wrap {
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
    }
    .content-wrap.hidden {
        opacity: 0;
        display: none;
    }
    #slide-image {
        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }
    #slide-image.hidden {
        opacity: 0;
        transform: translateX(100%);
    }
  
  /*banner for mobile section*/
        .instruction-set {
            margin-bottom: 40px;
            display: inline-block; /* Make each set display in a row */
            vertical-align: top; /* Align the items at the top */
            text-align: left; /* Center align the text */
            margin-right: 20px; /* Add space between sets */
            margin-left: 50px;  /* Add space between sets */
        }
        .instruction-set img {
            border-radius: 15px;
            width: 150px; /* Adjust the image size if necessary */
            height: 50px;
            display: block; /* Ensure the image is treated as a block-level element */
            margin: 0 auto; /* Center the image horizontally */
        }
        .airtime_container {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 100px;
            margin-left: 50px;  /* Add space between sets */
            gap: 5px; /* Adjust the space between the text and the image */
        }
        
        .text-container {
            flex: 1;
            
        }
        
        .image-container {
            flex: 0 0 auto; /* Prevents the image container from growing or shrinking */
            margin: 0;
        }
        
          
        
   /*image text section*/
   
            .image-text {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            
        }
        

        .image-text:nth-child(even) {
            flex-direction: row-reverse;
        }

        .image-text img {
            width: 500px;
            height: auto;
            margin: 0px;
            border-radius: 15px;
        }