@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");


body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.slick-prev ,.slick-next{
    display: none !important;
}

.slider {
    width: 100%;
    margin: 0 auto;
    background-color: #fdfdfd;
    padding: 48px 0px;
    border: 1px solid ghostwhite;
}

.slider img {
    width: 70%;
    /* border: 1px solid rgb(243, 243, 243); */
    /* background-color: #F9F9F9; */
    /* border-radius: 16px; */
    
}

.slider .slick-slide {
    height: auto !important;
}

/* Center the play button on the thumbnail */
.video-wrapper {
    object-fit: contain;
    height: 100%; 
    position: relative;
    padding: 12px 0;
    
    

}

.imgthumbnail{
    /* border: 1px solid red; */
    border-radius: 8px;
    
    /* border-radius: 16px !important; */
}



/* Ensure the YouTube video is responsive */
#videoContainer iframe {
    width: 100%;
    height: 100%;
}


.navbar {
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #EBECF2;
    box-shadow: rgba(175, 175, 175, 0.15) 0px 7px 29px 0px;
    background-color: white;
}


.navbar-nav .nav-link,
.btn {
    font-weight: 400;
    font-size: 16px;
}

.navbar-nav .nav-link.active {
    font-weight: 600;
    color: #131313;
}

.btn-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 16px;
}

.banner-section-heading {
    display: inline-flex;
    padding: 8px 16px 8px 8px;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    border: 1px solid #EEF0FF;
    background: #FCFCFF;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(2px);
}

.banner-section-heading-icon {
    display: flex;
    height: 32px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1px solid #F2F2F2;
    background: #FFF;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
    background: linear-gradient(127deg, #3A4EFF 17.53%, #A966FF 71.65%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.banner-section-heading-text {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
}



.subpage-header {
    background-color: #F8F9FA;
}


.banner-content h1 {
    font-size:50px;
    margin-top: 36px;
     font-weight:bold;
    line-height: 70px;
    letter-spacing: -1.68px;
}

.banner-content span {
    background: linear-gradient(130deg, #3A4EFF 19.98%, #BEADFF 98.28%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}


.banner-content p {
    font-size: 18px;
    margin-top: 36px;
    font-weight: 500;
    color: #494849;
    line-height: 150%;
}

.banner-achievement {
    margin-top: 48px;
}

.banner-achievement p {
    margin-top: 0px;
    font-weight: 500 !important;
    color: #B1B7CB;
}

.primary-btn {
    margin-top: 36px;
}

.primary-btn .primary-btn-custom {
    padding: 18px 32px;
    height: 60px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 12px;
}

.banner {
    background: url('../images/banner-backgorund.svg') no-repeat center center;
    background-size: cover;
    padding:100px 0;
}




.section-title {
    text-align: center;
    font-size: 50px;
    font-weight: 600;
    line-height: normal;
    margin-top: 24px;
}

.section-subtitle {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
    margin-top: 32px;
}

.section-icon-bar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    background-color: #131313;
    color: white;
}



.product-col,
.services-col {
    padding: 16px 16px 0 16px;
    border-radius: 16px;
    border: 1px solid #EBECF2;
    background: #FFF;
}

.solutions-col {
    padding: 16px 16px 16px 16px;
    border-radius: 16px;
    border: 1px solid #EBECF2;
    background: #FFF;
}

.product-col h2,
.services-col h2,
.solutions-col h2 {
    background: linear-gradient(180deg, #3A4EFF 0%, #C275FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}



.feature-section,
.testimonial-section,
.whitepaper-section {
    background: linear-gradient(94deg, #F2F5FA 4.45%, #FFF 114.76%);
}

.feature-demo {
    border-radius: 16px;
    border: 1px solid #EBECF2;
    background: linear-gradient(219deg, #FFF -41.86%, #FFF 139.69%);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
}


.features-cards .card {
    border-radius: 16px;
    border: 1px solid #EBECF2;
    background: linear-gradient(219deg, #FFF -41.86%, #FFF 139.69%);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
}

.features-cards .card p {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0.28px;
    margin-top: 16px;
}


.features-cards .card h5 {
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
}

.testimonialCard .card {
    border-radius: 24px;
    background: #FFF;
    border: 1px #EBECF2;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
}

.testimonialName {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.testimonialDesignation {
    color: #928D8D;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 6px;

}



.product-container {
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
    padding: 48px 48px;
}

.product-container:hover {
    border-radius: 16px;
    border: 1px solid #D9DDFF;
    background: #F3F8FF;
    cursor: pointer;
    transition: 300ms;
}

.product-container h1 {
    color: red;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}


.content-detail {
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
}

.downloadContainer {
    border-radius: 12px;
    background: #F2F5FA;
}

.downloadBtn {
    border-radius: 6px;
    background: #3A4EFF;
    display: flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.timeSheet-list-content {
    border-radius: 12px;
    background: #E8F2FF;
}

.timeSheet-list {
    border-radius: 16px;
    border: 1px solid #EBECF2;
    background: #FFF;
}

.recruitment-list {
    border-radius: 16px;
    border: 1px solid #EBECF2;
    background: linear-gradient(219deg, #F5F7FA -41.86%, #FFF 139.69%);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
}

.recruitment-list-content {
    border-radius: 8px;
    border: 1px solid #EBECF2;
    background: #FFF;
    margin-bottom: 10px;
}

.recruitment-list-content p {

    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: 0.26px;
}


.content-detail img {
    border-radius: 16px;
}


.aboutUs-banner {
    border-radius: 12px;
}


.showMore-btn a {
    padding: 16px 24px;
    gap: 6px;
    border-radius: 12px;
}

input[type=text],
input[type=email],
input[type=form-select] {
    height: 60px;
}

.form-control {
    border-radius: 12px !important;
    border: 1px solid rgba(19, 19, 19, 0.10) !important;
    background: #FAFAFA !important;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.input-group-text {
    border-radius: 12px !important;
    border: 1px solid rgba(19, 19, 19, 0.10) !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

#floatingTextarea2 {
    border-radius: 12px !important;
}

.form-select {
    height: 60px;
    border-radius: 12px !important;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}


.getStarted-content-heading {
    font-size: 50px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}


.nav-pills .active {
    background-color: #3A4EFF !important;
}

.contact-pilltab {
    border: 1px solid #EBECF2 !important;
    border-radius: 16px;
}

.nav-pills .nav-link {
    border-radius: 0px !important;
    padding: 16px 20px;
    color: #494849;
    border: 1px solid #EBECF2 !important;
    width: 190px;
    text-align: center;
    background-color: #F9F9F9;
    height: 80px;
}


.australiaTab .nav-link {
    border-top-left-radius: 16px !important;
}

.americaTab .nav-link {
    border-top-right-radius: 16px !important;
}



.custom-footer {
    background-color: #020A15;
    color: #fff;
}


.text-light {
    color: #DEDEDE;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    margin-bottom: 24px !important;
}

.list-unstyled li {
    margin-bottom: 24px;
}

.footer-social-links a:hover {
    color: #ccc;
    cursor: pointer;
}

.footer-copyright {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 16px 0 16px 0;
    align-items: center;
    flex-shrink: 0;
    border-top: 0.5px solid #595959;
}


.custom-whitepaper-card {
    border-radius: 16px;
    border: 1px solid #EBECF2;
    background: #FFF;
}

.custom-whitepaper-card .card-body {
    padding: 0px 12px 12px 12px;
}


.custom-whitepaper-card:hover {
    border: 1px solid #b9b9b9;
    cursor: pointer;
}



.custom-whitepaper-card-title {
    color: #131313;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.custom-whitepaper-card img {
    border-radius: 10px;
}



.accordion-item {
    border: 1px solid #e3e3e3;
    margin-bottom: 16px;
    border-radius: 8px !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 24px;
    font-size: 16px;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 32px;
    border-radius: 8px;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
    font-weight: 500;
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
    border-radius: 8px;
}



.accordion-button {
    background-color: #F2F5FA;
}


.contact-officeLocation {
    border-radius: 16px;
}

.primary-btn .service-btn-custom {
    padding: 16px 16px;
    height: 50px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* Animation */


.heading-element {
    --animate-duration: 1s;
}

.first-element {
    --animate-duration: 0.7s;
}

.second-element {
    --animate-duration: 0.9s;
}

.third-element {
    --animate-duration: 1.1s;
}

.fourth-element {
    --animate-duration: 1.3s;
}

.fifth-element {
    --animate-duration: 1.5s;
}

.sixth-element {
    --animate-duration: 1.7s;
}



@media (max-width: 992px) {
    .banner {
        padding: 50px 0 100px 0;
    }

    .product-container {
        padding: 24px 24px;
    }

    .footer-logo {
        text-align: center;
    }

    .footer-info {
        text-align: center;
        margin: 0 auto;
    }

    .footer-social-links {
        text-align: center !important;
        margin-bottom: 24px;
    }

    .features-cards {
        padding: 0;
    }
    .main h1 span {
      
        text-align: center !important;
    }
    
}


@media (max-width: 768px) {
    .slider img {
        width: 100%;
        /* padding: none; */
    }
    .mobile-slide {
        flex-basis: 100%;
        flex-grow: 1;
        /* align-items: center; */
        position: fixed;
        left: 0px !important;
        height: 100%;
        background: #ffffff;
        width: 218px;
        top:59px;
        transition: ease-in-out all 300ms;
        
    }
    .collapse:not(.show) {
        display: block !important;
        position: fixed;
        left:-280px;
        height: 100%;
        background: #ffffff;
        width: 218px;
        top:59px;
        transition:all 300ms ease-in-out;
     }
     .overlay {
        display: none;
     }
     .navbar-nav {
        padding: 0px;
        text-align: left !important;
     }
     .nav-item {
        border-bottom: solid 1px #e3e3e3;
        padding-left: 15px;
     }
}

@media (max-width: 576px) {
    .banner-content h1 {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -1.68px;
    }

    .section-title {
        text-align: center;
        font-size: 36px;
        font-weight: 600;
        line-height: normal;
        margin-top: 24px;
    }

   
    .header-main-heading {
        font-size: 28px;
    }

    .footer-page-col {
        text-align: center;
    }

    .banner-btn :first-child {
        margin-bottom: 5px;
    }

    .custom-heading {
        font-size: 40px;
        font-weight: 900;
        margin-top: 24px;
    }
}


@media (max-width: 330px) {

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        color: var(--bs-nav-pills-link-active-color);
        background-color: var(--bs-nav-pills-link-active-bg);
        padding: 0px 4px;
    }

    .nav-pills .nav-link {
        padding: 0px 4px;
    }
}

.main h1.active {
     line-height: 72px;
 }

.main h1 span {
    display: block;
    position: absolute;
    font-size:39px;
    left: 0;
    bottom: 3px;
    transform: translateY(-100%);
      transition-duration: .6s;
    width: 100%;
    text-align: left;
}

.main h1 span.active {
    display: block;
    transform: translateY(0%)
}

.main h1 span.removed {
    display: block;
    transform: translateY(100%)
    
}

.main h1 span.hidden {
    display: none
}

.main h1 b.rotation-wrapper {
    position: relative;
    display:block;
    height: 70px;
     overflow: hidden;
     margin-bottom: -10px;
 }
.hero__wallet {
    
    animation: shake 2s linear infinite;
    -moz-animation: shake 2s linear infinite;
    -webkit-animation: shake 2s linear infinite;
  }
 @keyframes shake {
    0% {
      transform: translate(13px, 0);
    }
  
    50% {
      transform: translate(-13px, 5px);
    }
  
    100% {
      transform: translate(13px, 0);
    }
  }
  
  @-moz-keyframes shake {
    0% {
      -moz-transform: translate(13px, 0);
    }
  
    50% {
      -moz-transform: translate(-13px, 5px);
    }
  
    100% {
      -moz-transform: translate(13px, 0);
    }
  }
  
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: translate(13px, 0);
    }
  
    50% {
      -webkit-transform: translate(-13px, 5px);
    }
  
    100% {
      -webkit-transform: translate(13px, 0);
    }
  }
  .navbar-toggler:focus {
    box-shadow:none;
  }
  .overlay {
    background:#0000004f;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    z-index:1;
  }
  /* .navbar-toggler {
    z-index: 11111;
    position: absolute;
  } */

  .overlay {
    display: none;
 }