body {
    font-family: "Montserrat", sans-serif;
}

header {
    position: absolute;
    width: 100%;
    top: 0px;
    padding: 20px 0px;
}

.container {
    max-width: 1350px !important;
}

.banner-sec {
    padding: 90px 0px;
    background-image: url('../images/banner-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.mobile-banner-sec {
    padding: 90px 0 0 0;
    background-image: url('../images/mobile/banner-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.ai-banner-sec {
    background-image: url('../images/ai/banner-bg.png');
}
.ar-banner-sec{
    background-image: url('../images/ar/banner-bg.png');
}

.banner-main-img {
    position: relative;
}

.banner-mob-img {
    position: absolute;
    top: 0;
}

.banner-mob-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-mob-img {
    width: 565px;
    position: absolute;
    height: 594px;
    overflow: hidden;
    top: 205px;
    left: 113px;
}

.banner-btn-wrapper {
    display: flex;
    gap: 17px;
    margin-top: 42px;
}

.navbar-fix {
    justify-content: end;
    margin-right: 38px;
}

header nav.navbar div#navbarNav ul li .nav-link {
    color: white;
}

.main-logo-adjust {
    width: 318px;
    height: 58px;
    overflow: hidden;
}

.main-logo-adjust img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.banner-sec .banner-content h1 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 68px;
    line-height: 76px;
    color: #FFFFFF;
}

.banner-sec .banner-content h2 {
    font-weight: 700;
    font-size: 49px;
    line-height: 70px;
    color: #FFFFFF;
}

.banner-sec .banner-content p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    color: #ffffff;
}



circle {
    transform-origin: 50% 50%;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.banner-sec .banner-brands-img-wrapper {
    margin-top: 60px;
    display: flex;
    gap: 20px;
}


.game-banner-main-img {
    mix-blend-mode: lighten;
    width: 850px;
    height: 750px;
    overflow: hidden;
}

.game-banner-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-content.pages-banner-content {
    font-weight: 700;
    font-style: Bold;
    font-size: 59px;
    line-height: 70px;
    letter-spacing: -5%;

}

.banner-btn {
    background: #096E4F;
    padding: 17px 50px;
    display: inline-block;
    border-radius: 50px;
}

.white-banner-btn {
    background: transparent;
    padding: 17px 50px;
    display: inline-block;
    border-radius: 50px;
    border: 1px solid #000000;

}

.main-white-btn {
    border: 1px solid white;
}

.white-banner-btn a {
    color: #000000;
    font-weight: 600;
    text-decoration: none;
}

.main-white-btn a {
    color: white;
}

.banner-btn a {

    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    color: white;
    text-decoration: none;
}

.banner-sec .banner-content h1 span {
    color: #ffffff;
}

.header-btn {
    background-color: #096E4F;
    padding: 9px 30px;
    border-radius: 50px;

}

.header-btn a {
    color: white;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
}

.flipster__item--future,
.flipster__item--future-1,
.flipster__item--future-2 {
    opacity: 0 !important;
    pointer-events: none;
}

.horizontal-line {
    border: 1px solid #DBDBDB;
    display: inline-block;
    height: 60px;
}

.banner-sec .banner-content {
    margin-top: 220px;
}

.mobile-banner-sec .banner-content {
    margin-top: 145px;
}

.marquee-wrapper .marquee .image-box {
    width: 153px;
    height: 142px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 31px 20px;
    gap: 20px;
    border-radius: 16px;
}

.partners-carousel-sec {
    padding: 35px 0px 20px 0px;
    background-color: #DAE9E5;
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.marquee {
    display: inline-flex;
    animation: scroll 40s linear infinite;
    gap: 50px;
}

.marquee img {
    height: 80px;
    margin: 0 20px;
}

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

    100% {
        transform: translateX(-50%);
    }
}

.my-slider ul li .flipster__item__content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.my-slider ul li .flipster__item__content {
    width: 320px;
    height: 650px;
}

.banner-sec .my-slider {
    margin-top: 90px;
}

.partners-carousel-sec .partners-content {
    border-right: 1.5px solid #8B8B8B;
    padding-right: 19px;
}

.partners-carousel-sec .partners-content h1 {

    font-weight: 700;
    font-size: 65px;
    line-height: 68.8px;
    text-align: center;
    color: #096E4F;
}

.partners-carousel-sec .partners-content h5 {
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    text-align: center;
}

.about-sec {
    padding: 105px 0px;
}

.about-sec .about-content h5 {
    font-family: Montserrat;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    color: #096E4F;
}

.about-sec .about-content h1 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 55px;
    line-height: 68.8px;
    color: #1D1D1D;
}

.about-sec .about-content p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #000000;
}

.about-sec .about-content {
    padding-left: 30px;
    padding-top: 20px;
}

.hover-sec {
    background: url('../images/hover-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 250px 0px;
}


.hover-sec .hover-content h2 {
    color: transparent;
    -webkit-text-stroke-width: 0.015em;
    -webkit-text-stroke-color: #ffffff;
    text-shadow: none;
    font-weight: 700;
    font-size: 55px;
    line-height: 68px;
    text-align: center;
    font-family: Arial;
    margin-bottom: 40px;
    transition: color .5s ease-in-out;
}

.heading-5 h2 {
    margin-bottom: 0px !important;
}

.hover-sec .hover-content h2:hover {
    cursor: pointer;
    color: white;
}

.hover-sec .hover-content h2:hover~.hover-img-1,
h2:hover~.hover-img-2 {
    display: block;
    width: 325px;
    height: 300px;
    overflow: hidden;
}

.hover-sec .hover-content .heading-1 .hover-img-1,
.heading-1 .hover-img-2 {
    display: none;
}

.hover-img-1 {
    position: absolute;
    top: -230px;
    left: -54px;
}

.hover-img-2 {
    position: absolute;
    right: -84px;
    top: 430px;
}


.hover-sec .hover-content h2:hover~.hover-img-3,
h2:hover~.hover-img-4 {
    display: block;
    width: 325px;
    height: 300px;
    overflow: hidden;
}

.hover-sec .hover-content .heading-2 .hover-img-3,
.heading-2 .hover-img-4 {
    display: none;
}

.hover-img-3 {
    position: absolute;
    top: -140px;
    left: -54px;
}

.hover-img-4 {
    position: absolute;
    right: -84px;
    top: 310px;
}




.hover-sec .hover-content h2:hover~.hover-img-5,
h2:hover~.hover-img-6 {
    display: block;
    width: 325px;
    height: 320px;
    overflow: hidden;
}

.hover-sec .hover-content .heading-3 .hover-img-5,
.heading-3 .hover-img-6 {
    display: none;
}

.hover-img-5 {
    position: absolute;
    top: 80px;
    left: -54px;
}

.hover-img-6 {
    position: absolute;
    right: -84px;
    top: 90px;
}



.hover-sec .hover-content h2:hover~.hover-img-7,
h2:hover~.hover-img-8 {
    display: block;
    width: 325px;
    height: 320px;
    overflow: hidden;
}

.hover-sec .hover-content .heading-4 .hover-img-7,
.heading-4 .hover-img-8 {
    display: none;
}

.hover-img-7 {
    position: absolute;
    top: 260px;
    left: -54px;
}

.hover-img-8 {
    position: absolute;
    right: -84px;
    top: 0px;
}




.hover-sec .hover-content h2:hover~.hover-img-9,
h2:hover~.hover-img-10 {
    display: block;
    width: 325px;
    height: 320px;
    overflow: hidden;
}

.hover-sec .hover-content .heading-5 .hover-img-9,
.heading-5 .hover-img-10 {
    display: none;
}

.hover-img-9 {
    position: absolute;
    top: 410px;
    left: -54px;
}

.hover-img-10 {
    position: absolute;
    right: -84px;
    top: -120px;
}



.demo-btns {
    display: flex;
    gap: 15px;
}

.demo-bg {
    background-color: #096E4F26;
    border-radius: 20px;
    padding: 70px 0px;
}

.demo-sec .demo-content h2 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    color: #0B0B0B;
}

.demo-sec .demo-content h2 span {
    color: #096E4F;
}

.demo-sec .demo-content p {
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    color: #000000;
}

.demo-sec {
    padding: 100px 0px;
}

.demo-sec .demo-img-wrapper {
    position: absolute;
    bottom: -149px;
    left: 60px;
}

.game-heading h1 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    color: #0B0B0B;
}

.game-heading h1 span {
    color: #096E4F;
}

.game-heading p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    color: #000000;
}

.game-sec-padding {
    padding: 105px 0px;
}

.section-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 360px;
    border-radius: 20px;
    overflow: hidden;
}

/* Common styles for both sections */
.character-section-wrapper,
.game-section-wrappers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    padding: 20px;
    transition: opacity 0.9s ease;
}

.game-section-wrappers {
    background: linear-gradient(148.69deg, #096E4F 17.48%, #003122 92.46%);
    opacity: 0;
}

/* Swap sections on hover of the parent */
.section-wrapper:hover .character-section-wrapper {
    opacity: 0;
}

.section-wrapper:hover .game-section-wrappers {
    opacity: 1;
}

.game-section-wrappers .game-icon-wrapper {
    display: inline-block;
    border-radius: 20px;
    background-color: white;
    padding: 10px;
    margin-bottom: 20px;
}

.game-section-wrappers .game-section-content h2 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 23px;
    line-height: 30px;
    color: white;
}

.game-section-wrappers .game-section-content p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 16px;
    line-height: 28.8px;
    color: white;
}

/* Character Section — visible by default */
.character-section-wrapper {
    background: url('../images/3d-bg.png') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    opacity: 1;
}


.character-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.arrow-img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #096e4f;
    padding: 13px;
}

.arrow-img img {
    filter: invert(1);
    width: 100%;
    height: 100%;
}

.character-icon-wrapper h3 {
    font-weight: 700;
    font-size: 23px;
    line-height: 26px;
    color: #242627;
}

.char-img {
    width: 250px;
    height: 250px;
}

.char-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.char-spacing {
    margin-top: 27px;
}

.fire-wrapper {
    position: relative;
    margin-left: 30px;
}

.fire-wrapper .fire-gif img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fire-wrapper .fire-img {
    width: 510px;
    height: 830px;
    overflow: hidden;
}

.fire-wrapper .fire-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fire-wrapper .fire-gif {
    width: 186px;
    height: 281px;
    overflow: hidden;
    position: absolute;
    bottom: 823px;
    left: 340px;
    transform: rotate(20deg);
}

.game-app-btn {
    margin-top: 55px;
}

.counter-sec {
    padding: 55px 0px;
    background: linear-gradient(0deg, rgba(213, 213, 213, 0.15) 0%, rgba(9, 110, 79, 0.15) 100%);
}

.counter-sec .counter-wrapper {
    box-shadow: 3px 8px 20px 0px #1B756B3D;
    padding: 50px 14px;
    background-color: white;
}

.counter-sec .counter-wrapper h1 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 52px;
    line-height: 30px;
    text-align: center;
    color: #096E4F;
}

.counter-sec .counter-wrapper p {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    color: #464646;
}

.vr-sec {
    padding: 81px 0px;
    background-color: #0B0B0B;
}

.vr-sec .vr-content h1 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 48px;
    line-height: 54px;
    color: #FFFFFF;
}

.vr-sec .vr-content p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    color: white;
}

.test-btn {
    border: 1px solid white;
}

.test-btn a {
    color: white;
}

.vr-sec .vr-content {
    padding-top: 90px;
}

.vr-sec .vr-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vr-sec .vr-img {
    width: 817px;
    height: 461px;
}

.ai-sec .ai-content-wrapper {
    margin-top: 110px;
}

.text-sec {
    background: #096E4F;
    padding: 35px 0px;
}

.light-text-sec {
    margin: 85px 0px;
    background: none;

}

.bottom-text-sec {
    padding: 35px 28px;
    background-color: #096E4F33;
    border-radius: 20px;
}

.text-sec .text-content h2 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 40px;
    line-height: 49px;
    color: white;
}

.text-btn-wrapper {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 25px;
}

.text-btn-wrapper-1 {
    margin-top: 55px !important;
}


.text-btn-wrapper .text-btn {
    background: white;
    padding: 17px 65px;
    display: inline-block;
    border-radius: 50px;
    border: 1px solid #000000;
}

.text-btn-wrapper .text-btn a {
    color: #0B0B0B;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
}

.text-btn-wrapper .number-btn {
    background: transparent;
    padding: 17px 65px;
    display: inline-block;
    border-radius: 50px;
    border: 1px solid white;
}

.text-btn-wrapper .number-btn a {
    color: white;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
}

.ai-sec {
    padding: 76px 0px;
}

.ai-sec .robot-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-sec .robot-img {
    width: 800px;
    height: 483px;
}

.ai-sec .ai-content-wrapper h2 {
    font-weight: 700;
    font-size: 48px;
    line-height: 54px;
    color: #0B0B0B;

}

.ai-sec .ai-content-wrapper p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    color: #0B0B0B;
}

.promise-sec {
    padding-bottom: 50px;
}

.promise-content-wrapper h1 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    text-align: center;
    color: #0B0B0B;
}

.promise-content-wrapper h1 span {
    color: #096E4F;
}



.promise-content-wrapper p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    text-align: center;
    color: #000000;
}

.promise-sec .promise-box-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: url(../images/promise.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 20px 21px;
    border-radius: 20px;
    text-align: center;
}

.promise-sec .promise-box-wrapper .promise-box-content p {

    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: #0B0B0B;
    text-align: center;
}

.quote-bg {
    background-color: #1D1D1D;
    border-radius: 100px;
    padding: 14px;
}


.quote-sec .quote-content {
    margin-left: 20px;
}

.quote-sec .quote-content h2 {
    font-weight: 700;
    font-size: 36px;
    line-height: 60px;
    color: white;
}

.quote-sec .quote-btn {
    background: #096E4F;
    padding: 17px 159px;
    display: inline-block;
    border-radius: 50px;
    margin-top: 4px;
}

.quote-sec .quote-btn a {
    color: white;
}

.choose-us-sec {
    padding: 55px 0px;
}

.choose-box-content h3 {
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;
    color: #0B0B0B;
}

.choose-box-content p {

    font-weight: 400;
    font-size: 16px;
    line-height: 27px;
    color: #0B0B0B;
}

.choose-us-sec .choose-us-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.choose-us-sec .choose-us-img {
    width: 493px;
    height: 800px;
    border-radius: 20px;
    margin: 40px auto 0 auto;
}
.choose-us-sec .choose-us-img.choose-us-game-img {
    width: 697px;
    height: 750px;
    z-index: 5;
    position: relative;
}

.choose-us-sec .choose-box-content {
    margin-top: 50px;
    padding: 20px;

}

.choose-us-sec .choose-box-1:hover .choose-box-content {


    border-radius: 15px;
}

.choose-us-sec .choose-box-1:hover .choose-box-content h3 {
    color: white;
}

.choose-us-sec .choose-box-1:hover .choose-box-content p {
    color: white;
}

.choose-box-1 {
    position: relative;
}

.choose-box-1::before {
    background: linear-gradient(148.69deg, #096E4F 17.48%, #003122 92.46%);
    border-radius: 50%;
    content: "";
    height: 20px;
    left: -17px;
    position: absolute;
    top: 54px;
    transition: 1s;
    width: 20px;
    z-index: -1;
}

.choose-box-2::before {
    left: 298px;
}

.choose-box-1:hover:before {
    border-radius: 12px;
    height: 100%;
    top: 0px;
    width: 348px;
    left: 2px;
}

.choose-box-2:hover:before {
    left: -50px !important;
}

.dotted-img-wrapper {
    position: absolute;
    bottom: -17px;
    left: -8px;
}

.choose-us-sec .choose-box-1 svg {
    display: none;
}

.choose-us-sec .choose-box-1:hover svg {
    display: block;
    position: absolute;
    bottom: 14px;
    right: -165px;
    z-index: -2;
}

.choose-us-sec .choose-box-1 svg path {
    stroke-linecap: round;
    stroke-dasharray: 1180;
    /* exact working value for your path */
    stroke-dashoffset: 1180;
    /* start completely hidden */
    opacity: 0;
    transition: opacity .3s ease;
}

.choose-box-1:hover svg path {
    animation: dash 2s linear forwards;
    opacity: 1
}

@keyframes dash {
    to {
        stroke-dashoffset: 0
    }
}

.choose-us-sec .choose-box-content:hover p {
    color: white;
}


.process {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    /* background-color: var(--black); */
    position: relative;
}

.process-bg {
    width: 100% !important;
}

.process .left {
    flex: 1;
}

.process .step {
    padding-bottom: 40px;
    min-height: 40vh;
}

.process .step span {
    font-size: 14px;
    color: #aaa;
}

.process .step {
    font-size: 2.5rem;
    color: #2ed06e;
}

.process .step p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.process .right {
    width: 400px;
    height: 34rem;
    position: sticky;
    top: 15%;
    border-radius: 50%;
    border-radius: 14rem;
    overflow: hidden;
    display: block;
}

.process .right img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.process .right img.active {
    opacity: 1;
}

.process .right img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.progress-bar {
    position: absolute;
    left: -25px;
    top: 220px;
    width: 5px;
    height: 75%;
    background: #B9B9B9;
    overflow: hidden;
}

.progress-bar-fill {
    width: 100%;
    background: #010101;
    transition: height 0.1s ease-out;
    transform-origin: top;
    /* ✅ Fill grows from the top */
    position: absolute;
    top: 0;
}

.product-top h2 {
    color: #fff;
    text-align: center;
}


#progressLine {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: transparent;
    border: none;
    z-index: 9999;
    appearance: none;
}

#progressLine::-webkit-progress-bar {
    background: rgba(255, 255, 255, 0.2);
}

#progressLine::-webkit-progress-value {
    background: #2196f3;
    transition: width 0.3s ease;
}

.process-content h1,
.process-content p {
    text-align: start;
}

.product-content {
    margin-bottom: 80px;
    max-width: 767px;
    transform: translateY(50px);
    transition: all 0.6s ease;
}

.product-content h3 {
    font-weight: 700;
    font-size: 35px;
    line-height: 54px;
    color: #A6A6A6;
}

.product-content p {
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    color: #A6A6A6;
}

.active h3 {
    color: #096E4F;
}

.active p {
    color: #0B0B0B;

}

.case-study-sec {
    background-image: url('../images/case-study-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 60px 0px;
}




.case-content-wrapper h1 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    color: #ffffff;
}

.case-content-wrapper h1 span {
    color: #096E4F;
}

.case-content-wrapper p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    color: #ffffff;
    margin-bottom: 30px;
}

.carousel-content {
    background-image: url('../images/case-card-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    backdrop-filter: blur(15px);
    height: 441px;
    width: 316px;
    padding: 20px;
    text-align: center;
}

.case-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-img-wrapper {
    width: 278px;
    height: 190px;
    margin: 0 auto;
}

.carousel-content h4 {
    font-weight: 700;
    font-size: 25px;
    line-height: 60px;
    text-align: center;
    color: white;
    margin: 0px;
}

.carousel-content p {
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
    color: white;
}

.carousel-bottom-btn {
    background: #096E4F;
    padding: 17px 50px;
    display: inline-block;
    border-radius: 50px;
    margin: 0 auto;
    color: white;
}

.carousel-bottom-btn a {

    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: center;

}

.testi-wrapper {
    border-radius: 20px;
    padding: 40px 40px 60px;
    position: relative;
}

.curvy-background {
    width: 747px;
    height: 369px;
    background-color: white;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%);
    border-top-right-radius: 15px;
    /* behind content */
    border-bottom-right-radius: 15px;
    margin-left: 30px;
    padding: 35px 35px 35px 135px;
}



.curvy-background .top-images {
    display: flex;
    justify-content: space-between;
}

.curvy-background .top-images .stars-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.curvy-background .top-images .stars-img {
    width: 90px;
    height: 18px;
}

.curvy-background .top-images .brand-img {
    background-color: #096E4F26;
    padding: 10px 27px;
    border-radius: 50px;
}

.curvy-background .testi-content p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    color: #0B0B0B;
}

.curvy-background .testi-content h3 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 22px;
    line-height: 28.8px;
    color: black;
}

.circle-img-wrapper {
    border: 1px solid white;
    height: 94px;
    width: 94px;
    border-radius: 50%;
    overflow: hidden;
    /* Important to clip the image */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}

.circle-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the circle without distortion */
    display: block;
    filter: grayscale(1);
}

.my-item {
    display: flex;
    justify-content: center;
}

.center .my-item .circle-img-wrapper {
    height: 121px !important;
    width: 121px !important;
    margin-top: 0px !important;
}

.center .my-item .circle-img-wrapper img {
    filter: grayscale(0) !important;
}

.custom-nav {
    position: absolute;
    right: 60px;
    display: flex;
    justify-content: center;
    text-align: center;
    bottom: -26px;
    gap: 20px;
}

.custom-nav .custom-prev {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #5D5D5D;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, rgba(75, 75, 75, 0.5), rgba(75, 75, 75, 0.5)),
        linear-gradient(180deg, rgba(9, 110, 79, 0) 74.47%, #1B1B1B 183.4%);
}

.custom-nav .custom-next {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #5D5D5D;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, rgba(75, 75, 75, 0.5), rgba(75, 75, 75, 0.5)),
        linear-gradient(180deg, rgba(9, 110, 79, 0) 74.47%, #1B1B1B 183.4%);
}

.custom-nav i {
    color: white;

}

.curvy-background .testi-content {
    margin-top: 44px;
}

.main-auto-testi::before {
    background: radial-gradient(78.78% 76.31% at 50% 128.92%, #096E4F 0%, #0B0B0B 100%);
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 20px;
    height: 91%;
}

.testimonial-section {
    padding: 85px 0px;
}

.testimonial-section .testi-header-text h1 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 50px;
    line-height: 68.8px;
    text-align: center;
    color: #0B0B0B;
}

.testimonial-section .testi-header-text p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    text-align: center;
    color: black;
}

.industy-clr-change h1 {
    color: white;
}

.industy-clr-change p {
    color: white;
    /* margin-bottom: 75px; */
}

.industries-sec {
    background-image: url('../images/industry-main-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 90px 0px;
}


.carousel-three .industry-content {
    background-image: url('../images/indsutry-bg-1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 17px;
    border-radius: 20px;
    position: relative;
    margin-top: 75px;
}

.carousel-three .industry-content h4 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    color: black;
}

.carousel-three .industry-content p {
    font-weight: 500;
    font-size: 10px;
    line-height: 17px;
    color: #1D1D1D;
}

.carousel-three .industry-bottom-btn a {
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-decoration: none;
    color: #1D1D1D;

}

.industry-inner-content {
    max-width: 170px;
}

.bottom-icon-sec {
    display: flex;
    gap: 6px;
    margin-top: 120px;
    align-items: center;
}


button.btn.btn-link.btn-block.text-left.collapsed.custom-accordion-btn {
    display: flex;
    justify-content: space-between;
    padding: 5px;
}



button.btn.btn-link.btn-block.text-left.custom-accordion-btn {
    display: flex;
    justify-content: space-between;
}

.custom-accordion-btn {
    color: #0B0B0B;
    text-decoration: none;
    font-weight: 500;
    font-size: 20px;
    line-height: 59.8px;
}

.custom-accordion-btn:hover {
    text-decoration: none;
    color: #0B0B0B;

}

.custom-accordion-btn:focus {
    box-shadow: none;
    text-decoration: none;

}

.card-body p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 16px;
    line-height: 28.8px;
    color: #0B0B0B;
    margin-bottom: 0;
}

.card-border-fix {
    border-bottom: none;
    padding: 0;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;

    background-color: transparent !important;
}

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

.main-card {
    margin-bottom: 22px;
    border: 1px solid #5D5D5D !important;
    border-radius: 10px !important;
}


/* Stylish form */

.custom-accordion-btn:not(.collapsed) .icon-wrapper {

    color: #ffffff;
    padding: 0px 21px;
    border-radius: 11px;
    background-color: #ffffff;
}

.custom-accordion-btn:not(.collapsed) .icon-wrapper i {
    color: #096E4F;
    transform: rotate(135deg);
}

.custom-accordion-btn.collapsed .icon-wrapper {
    color: #ffffff;
    padding: 0px 21px;
    border-radius: 11px;
    background-color: #096E4F;
}

.custom-accordion-btn.collapsed .icon-wrapper i {
    transform: rotate(45deg);
}

.icon-wrapper i {
    transition: transform 0.35s ease-in-out;
}


/* Container */
.multi-step-form {
    background: linear-gradient(56.29deg, #096E4F 23.89%, #003122 100.47%);
    padding: 2rem;
    border-radius: 16px;
    width: 100%;
    max-width: 660px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: height 0.5s ease;
}




/* Progress Bar */
.progressbar {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 65px 0px;
}

.progressbar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #d1d5db;
    transform: translateY(-50%);
    z-index: 0;
    border-radius: 4px;
}

.progress {
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    background: #010101;
    transform: translateY(-50%);
    width: 0%;
    border-radius: 4px;
    transition: width 0.6s ease;
    z-index: 0;
}

.step-1 {
    width: 29px;
    height: 29px;
    background: #d1d5db;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    font-weight: 600;
    color: #010101;
    transition: background 0.4s ease, transform 0.3s ease;
}

.step-1.active {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgb(0 0 0 / 50%);
    background: #010101;
    color: white;
}

/* Form Steps */
.form-step {
    display: none;
    flex-direction: column;
    gap: 42px;
    animation: fadeIn 0.4s ease;
}

.form-step.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

input {
    padding: 0.8rem;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 0.95rem;
    outline: none;
}

input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 5px rgba(79, 70, 229, 0.3);
}

/* Buttons Row */
.form-step .btns {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    align-items: center;
    gap: 10px;
}

.form-step .btns button {
    background-color: #0B0B0B;
    color: white;
    padding: 14px 69px;
    border-radius: 50px;
    border: none;
}

.bottom-text-sec .text-btn-wrapper .text-btn {
    background-color: #096E4F;
    border: none;
}

.bottom-text-sec .text-btn-wrapper .text-btn a {
    color: white;
}

.bottom-text-sec .text-btn-wrapper .number-btn {
    background-color: transparent;
    border: 1px solid #096E4F;
}

.bottom-text-sec .text-btn-wrapper .number-btn a {
    color: #096E4F;
}

.bottom-text-sec .text-content h2 {
    color: #0B0B0B;
}

.bottom-text-sec .text-content h2 span {
    color: #096E4F;

}

.industry-home-wrapper {
    position: absolute;
    bottom: 38px;
    width: 175px;
    height: 175px;
    left: 139px;
}

.industry-home-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.industry-mobile-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.industry-mobile-wrapper {
    width: 177px;
    height: 335px;
    position: absolute;
    top: -42px;
    left: 218px;
    right: 0;
    border-radius: 20px;
    z-index: 0;
}

.industry-game-content {
    background: url('../images/industry-bg-2.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

.industry-fitness-content {
    background: url('../images/industry-bg-3.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

.bottom-industry-text h4 {
    padding: 0px !important;
    margin: 0px !important;
}


.multi-step-form .multi-step-heading h2 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 38px;
    line-height: 58.8px;
    text-align: center;
    color: white;
    padding: 0px;
    margin: 0px;

}

.multi-step-form .multi-step-heading p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    color: white;
}

.step-number-1::before {
    content: 'About You';
    position: absolute;
    bottom: -26px;
    font-weight: 400;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    width: 70px;
    color: white;
}

.step-number-2::before {
    content: 'Number';
    position: absolute;
    bottom: -26px;
    font-weight: 400;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    width: 70px;
    color: white;
}

.step-number-3::before {
    content: 'Email';
    position: absolute;
    bottom: -26px;
    font-weight: 400;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    width: 70px;
    color: white;
}

.step-number-4::before {
    content: 'Message';
    position: absolute;
    bottom: -26px;
    font-weight: 400;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    width: 70px;
    color: white;
}

.estimation-sec {
    background: url('../images/estimation-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 64px 0;
}

.estimation-sec .estimation-content h1 {
    font-family: Montserrat;
    font-weight: 700;
    font-size: 56px;
    line-height: 61.6px;
    color: white;
}

.estimation-sec .estimation-content p {
    font-family: Montserrat;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: white;
}

.address-sec {
    background-color: #0B0B0B;
    padding: 50px;
}

.address-sec .building-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.address-sec .building-img {
    width: 176px;
    height: 114px;
    margin: 0 auto;
}

.address-sec .address-card h5 {
    font-weight: 700;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
    color: white;
}

.address-sec .address-card p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: white;
}

.address-sec .address-card {
    padding: 44px 73px;
    position: relative;
    background: linear-gradient(0deg, #1B1B1B, #1B1B1B),
        linear-gradient(180deg, #1B1B1B 26.67%, rgba(89, 89, 89, 0) 127.78%);
    border-radius: 20px;
    margin-top: 14px;
}

.address-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 20px;
    background:
        linear-gradient(360deg,
            rgba(255, 255, 255, 0.1) -2.28%,
            #5D5D5D 99.51%) border-box;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    background-clip: padding-box, border-box;
    background-origin: border-box;

    pointer-events: none;
}

footer {
    background-image: url('../images/footer-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.footer-logo {
    width: 540px;
    height: 98px;
    margin: 0 auto;
}

.footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-underline {
    border-bottom: 1px solid #FFFFFF33;
    margin: 33px 0px 76px;

}

.footer-listing {
    display: flex;
    flex-direction: column;

}

.info-footer-listing {

    gap: 20px;
}

.footer-listing h6 {
    font-weight: 700;
    font-size: 18px;
    line-height: 21.6px;
    color: white;
}

.footer-listing a {
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    color: #FFFFFFAD;
    text-decoration: none;
    display: flex;
    gap: 12px;
}

.footer-listing a i {
    width: 31px;
    height: 31px;
    background-color: white;
    color: #1D1D1D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icons {
    display: flex;
    gap: 17px;
    margin-top: 22px;
}

.social-icons a {
    text-decoration: none;
}

.company-icons {
    display: flex;
    gap: 17px;
    margin-top: 31px;
}

.social-icons a i {
    width: 31px;
    height: 31px;
    background-color: white;
    color: #1D1D1D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-line-text p {
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    color: white;
    margin-top: 118px;
    text-align: center;
}


.my-section {
    position: relative;
    padding-bottom: 20px;
}

.my-section::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100vw;
    /* full width of viewport */
    height: 1px;
    background: #FFFFFF14;
    /* your line color */
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 200px;
    padding: 30px 0;
}

.copyright-text p {
    font-weight: 400;
    font-size: 15px;
    line-height: 22.5px;
    padding: 0;
    margin: 0;
    color: white;
}

.protection {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

}

.protection .protection-text p {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: white;
    padding: 0;
    margin: 0;
}

.conditions {
    display: flex;
    gap: 16px;
}

.conditions a {
    color: white;
    font-weight: 400;
    font-size: 15px;
    line-height: 22.5px;
    text-decoration: none;
}

.blog-card-main {
    position: relative;
}

.blog-card {
    /* --r: 30px;
    --s: 40px;
    --x: 112px;
    --y: 5px;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    background-image: url('../images/first-blog-img.png');
    border-radius: 30px;
 --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  mask:
    calc(100% - var(--_d) - var(--x)) 100% var(--_m),
    100% calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px))
     calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask-repeat: no-repeat;
    padding: 12px 14px;
    border-top-left-radius: 8px; */


    height: 422px;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;

}

section.blog-section {
    padding: 90px 0px;
}

.blog-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-main .blog-card-btn {
    position: absolute;
    bottom: -10px;
    right: -10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 35px 0px 0px 0px;
}

.blog-card-main .blog-card-btn::before {
    content: '';
    position: absolute;
    bottom: 10px;
    left: -30px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-bottom-right-radius: 20px;
    box-shadow: 5px 5px 0px 5px #fff;
}

.blog-card-main .blog-card-btn::after {
    content: '';
    position: absolute;
    top: -30px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-bottom-right-radius: 20px;
    box-shadow: 5px 5px 0px 5px #fff;
}

.blog-card-main .blog-card-btn a {
    background-color: #096E4F;
    color: #fff;
    padding: 15px 45px;
    display: block;
    border-radius: 50px;
    text-decoration: none;
}

.blog-card-main .blog-bottom-text {
    position: absolute;
    bottom: 2px;
    left: 0px;
    max-width: 364px;
    background: linear-gradient(90deg, #0B0B0B 0%, rgba(11, 11, 11, 0) 100%);
    padding: 10px 22px;
    border-bottom-left-radius: 20px;
}

.blog-card-main .blog-bottom-text h3 {
    font-weight: 700;
    font-size: 21px;
    line-height: 100%;
    color: white;
}

.blog-card-main .blog-top-text h6 {
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
    color: #000;
    padding: 0px;
    margin: 0px;
}

.blog-card-main .blog-top-text {
    background-color: white;
    padding: 6px 12px;
    border-radius: 50px;
    position: absolute;
    right: 23px;
    top: 23px;
}

section.blog-section .blog-content h2 {
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    text-align: center;
    color: #0B0B0B;
}

section.blog-section .blog-content p {
    font-weight: 400;
    font-size: 18px;
    line-height: 28.8px;
    text-align: center;
    color: #000000;
    margin-bottom: 16px;
}

.typewriter {
    font-family: monospace;
    font-size: 2em;
    width: 10ch;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid black;
    animation: typing 6s steps(15), blink 0.7s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 10ch;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

.cursor-1 {
    display: inline-block;
    animation: blink 0.7s steps(2, start) infinite;
    font-weight: bold;
    color: #DBDBDB;
    /* Adjust to match your design */
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


span#typewriter2 {
    color: #096E4F;
}

.about-video {
    position: relative;
}

.about-video::before {
    content: '';
    position: absolute;
    border: 1px solid #096E4F;
    width: 521px;
    height: 464px;
    border-radius: 10px;
    z-index: -1;
    bottom: 15px;
    right: 29px;
}

.about-video::after {
    content: '';
    background-image: url(../images/about-mobile-img.png);
    position: absolute;
    width: 240px;
    height: 470px;
    right: 23px;
    bottom: -35px;
}

.about-video img {
    width: 522px;
    height: 463px;
    overflow: hidden;
    border-radius: 10px;
}

.dotted-img-wrapper-2 {
    position: absolute;
    bottom: -17px;
    left: -109px;
}


.transform-sec {
    padding: 100px 0;
}

.transform-sec .transform-img-wrapper {
    position: relative;
}

.transform-sec .ai-transform {
    margin-top: 170px;
}

.transform-sec .transform-img-wrapper .transform-ai-img {
    width: 393px !important;
    height: 766px !important;
    bottom: 1px !important;
    left: 43px !important;
}

.transform-sec .transform-img-wrapper .bar-img {
    width: 316px;
    height: 740px;
}

.transform-sec .transform-img-wrapper .bar-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.transform-sec .transform-img-wrapper .transform-main-img {
    position: absolute;
    width: 468px;
    height: 496px;
    border-radius: 20px;
    bottom: 130px;
    left: 53px;
}

.transform-sec .transform-img-wrapper .transform-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.trasnfrom-content h2 {
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    color: #1D1D1D;
    margin-bottom: 24px;
}

.trasnfrom-content h2 span {

    color: #096E4F;

}

.trasnfrom-content p {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #000;
    margin-bottom: 40px;
}

.trasnfrom-content {
    margin-top: 100px;
}

.icon-list-wrapper .icon-list {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 0px;
    margin-bottom: 20px;
}

.icon-list-wrapper .icon-list p {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    color: black;
}

/* Icon wrapper hidden by default */
.main-tabs-position li.nav-item a.nav-link.active span.tabs-icon-wrapper {
    display: flex;
}

.main-tabs-position li.nav-item a.nav-link span.tabs-icon-wrapper {
    width: 25px;
    height: 25px;
    background-color: #096E4F;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Rotate the icon */
.main-tabs-position li.nav-item a.nav-link span.tabs-icon-wrapper i {
    transform: rotate(45deg);
    color: white;
    font-size: 14px;
}

/* Show icon ONLY on active tab */
/* .custom-tabs-btn,
.custom-tabs-btn.active span.tabs-icon-wrapper {
    display: flex;
    gap: 10px;
} */

/* .custom-tabs-btn.active {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    padding: 15px 22px;
    display: flex;
    gap: 9px;
    font-size: 25px;
    line-height: 100%;
    max-height: 54px;
    font-weight: 600;
} */

/* .custom-tabs-btn.active {
    background-color: red !important;
    border: none;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    padding: 15px 22px;
    display: flex;
    gap: 17px;
    color: white !important;
    font-weight: 600;

} */

/* .custom-tabs-btn:hover {
    border: none;
    color: #6E6E6E;
    margin-bottom: 0px !important;
    border-color: none
}

.custom-tabs-btn,
.custom-tabs-btn:hover,
.custom-tabs-btn:focus {
    border: none !important;
    border-color: transparent !important;
}

.custom-tabs-btn {
    position: relative;
    padding: 15px 45px;
    border: none;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    color: #6E6E6E;
    display: flex;
    gap: 10px;
} */

.operations-mobile-img {
    width: 544px !important;
}

.tabs-main-bg {
    background-image: url(../images/mobile/tabs-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    padding: 0px;
}

.tabs-main-bg.game-tabs-main-bg {
    background-image: url(../images/game/tabs-bg.png);
}

.brand-details-bg.game-brand-details-bg {
    background-image: url('../images/game/brands-main-bg.png');
    position: relative;
    padding: 50px 38px;
}

.main-tabs-position {
    display: flex;
    justify-content: center;
    border-bottom: none;
    position: absolute;
    width: 100%;
    top: 0px;
}

/* .main-tabs-position li.nav-item:last-child a.nav-link {
    border-radius: 0px 0px 20px 0px;
}

.main-tabs-position li.nav-item:nth-child(2) a.nav-link {
    border-radius: 0px 0px 0px 20px;
} */

.main-tabs-position li.nav-item a.nav-link {
    background-color: #fff;
    border-radius: 0px;
    padding: 15px 45px;
    font-size: 18px;
    font-weight: 600;
    color: #6E6E6E;
    border: none;
}

.main-tabs-position li.nav-item a.nav-link.active {
    background-color: transparent;
    color: #fff;
    position: relative;
    display: flex;
    gap: 10px;

}


/*
.main-tabs-position li.nav-item a.nav-link.active::before {
    content: '';
    position: absolute;
    bottom: 27px;
    left: 0px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-top-left-radius: 20px;
    box-shadow: -5px -5px 0px 5px #ffffff;
}



.main-tabs-position li.nav-item a.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 27px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-top-right-radius: 20px;
    box-shadow: 5px -5px 0px 5px #fff;
}

a.nav-link.android-tab.active::after {
    left: 213px !important;
}

a.nav-link.ios-tab.active::after {
    left: 171px !important;
}

a.nav-link.cp-tab.active::after {
    left: 277px !important;
}

a.nav-link.hybrid-tab.active::after {
    left: 200px !important;
}

a.nav-link.support-tab.active::after {
    left: 200px !important;
} */

.inside-tab-content h2 {
    font-weight: 700;
    font-size: 50px;
    line-height: 53px;
    color: white;
}

.inside-tab-content p {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: white;
}

.tabs-padding-control {
    padding: 100px 60px;
    border-radius: 20px;
}

.tab-img-wrapper {
    position: relative;

}

.tab-img-wrapper::before {
    content: '';
    background-image: url('../images/mobile/android-logo.png');
    position: absolute;
    background-repeat: no-repeat;
    top: 248px;
    bottom: 0;
    left: -90px;
    right: 0;
}

.operations-sec {
    padding: 100px 0;

}


.operations-sec .operations-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.operations-sec .operations-main-img {
    width: 574px;
    height: 634px;
    overflow: hidden;

}

.operations-sec .operation-content {
    margin-top: 0px;
}

.brand-details-bg {
    background: url('../images/mobile/brand-details-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    position: relative;
    padding: 113px 33px;
}

section.brand-details-sec .brand-details-content h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: 40px;
    color: white;
}

section.brand-details-sec .brand-details-content h2 span {
    font-weight: 700;
    font-size: 40px;
    line-height: 40px;
    color: #096E4F;

}

section.brand-details-sec .brand-details-content p {
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: white;
}

section.brand-details-sec {
    padding-bottom: 90px;
    padding-top: 50px;
}

section.brand-details-sec .white-lines {
    width: 275px;
    height: 79px;
    overflow: hidden;
    margin: 0 auto;
}

section.brand-details-sec .white-lines img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

section.brand-details-sec .banner-btn-wrapper .brand-detail-banner-btn {
    padding: 17px 41px;
}

section.brand-details-sec .banner-btn-wrapper .brand-detail-number-btn {
    padding: 16px 28px;
}


section.brand-details-sec .brand-over-img {
    width: 267px;
    height: 525px;
    position: absolute;
    bottom: -170px;
    overflow: hidden;
}

section.brand-details-sec .brand-over-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.choose-us-sec.choose-us-mobile-sec {
    padding: 55px 0px 100px 0px;
}

.process-bg.mobile-process-bg {
    padding: 100px 0px;
}

.faq-sec.mobile-faq-sec {
    padding: 100px 0;
}

.faq-sec .faq-heading h2 {
    font-weight: 700;
    font-style: Bold;
    font-size: 50px;
    line-height: 68.8px;
    letter-spacing: 0%;
    text-align: center;
    color: #0B0B0B;


}

.game-banner-sec {
    padding: 90px 0 0 0;
    background-image: url('../images/game/banner-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.game-banner-sec .banner-content {
    margin-top: 145px;
}

.transform-sec .transform-img-wrapper .transform-main-img.transform-mobile-img {
    position: absolute;
    width: 542px;
    height: 627px;
    border-radius: 20px;
    bottom: 41px;
    left: -1px;
}


.brand-details-bg.game-brand-details-bg .thunder-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    bottom: 115px;
    left: 0px;
}

.brand-details-bg.game-brand-details-bg .thunder-img-wrapper {
    width: 886px;
    height: 568px;
    position: absolute;
    right: 0;
}

section.brand-details-sec .white-lines.game-white-lines {
    margin-left: 80px;
}

.dropdown-adjust {
    margin: 0px !important;
    padding: 0px 0px !important;
}

.dropdown-item-fix {
    padding: 10px 10px;
}

.dropdown-item-fix:hover {
    background-color: #096E4F;
    color: white;
}

.carousel-box-control {
    height: 360px;
    width: 305px;
}

.new-slider-sec {
    padding-bottom: 100px;
}

.carousel-four {
    margin-top: 60px;
}

.ai-main-img-wrapper {
    position: relative;
}

.robot-img-1 {
    width: 310px;
    height: 446px;
    overflow: hidden;
    position: absolute;
    bottom: 70px;
    left: 284px;
}

.robot-img-1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.transform-img-wrapper .ai-bar-img {
    width: 450px;
    height: 580px;
    overflow: hidden;
}

.transform-img-wrapper .ai-bar-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ai-tabs-main-bg {
    background: url(../images/ai/tabs-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.ai-tab-img-wrapper {
    width: 546px;
    height: 460px;
    overflow: hidden;
}

.ai-tab-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.operations-sec .operations-ai-img {
    width: 500px;
    height: 602px;
    overflow: hidden;
}

.operations-sec .operations-ai-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brands-list {
    background: url('../images/ai/companies-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 64px 0px;
}

.brands-list .brand-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brands-list .brand-wrapper {
    width: 160px;
    height: 160px;
    overflow: hidden;
    margin: 0 auto;
}

.brands-list .brand-bottom-text p {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: black;
    margin-top: 30px;
    margin-bottom: 0;
}

.ai-brand-details-bg {
    background-image: url('../images/ai/brand-details-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 47px 38px;
}

.ai-brand-details {
    padding: 115px 0px !important;
}

.ai-brand-details-bg .neuron-img-wrapper {
    width: 525px;
    height: 525px;
    overflow: hidden;
    position: absolute;
    bottom: -106px;
    right: 10px;
}

.ai-brand-details-bg .neuron-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.choose-us-sec .choose-us-ai-img {
    width: 627px;
    height: 810px;
}