@media (max-width: 992px) {

    /* banner */
    .about-banner-section .banner-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: var(--fs30-m);
    }

    .about-banner-section .banner-header h1.banner-title {
        margin-bottom: var(--fs20-m);
        font-size: var(--fs40-m);
    }

    .about-banner-section .banner-header .para-container {
        align-self: flex-start;
    }

    .about-banner-section .banner-header .para-container p.info {
        font-size: var(--fs20-m);
        text-align: start;
    }

    .about-banner-section .banner-wrapper {
        padding: var(--fs35-m);
    }

    .about-banner-section .banner-wrapper .about-banner-tab {
        width: 100%;
    }

    .about-banner-section .banner-wrapper .img-container {
        display: none;
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .tab-content h2.tab-title {
        font-size: var(--fs22-m);
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .tab-content p.tab-subtitle {
        font-size: var(--fs34-m);
        width: 100%;
        margin-bottom: var(--fs30-m);
    }
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .about-tab .text-container, .about-banner-section .banner-wrapper .about-banner-tab .tab-container .mission-tab .text-container, .about-banner-section .banner-wrapper .about-banner-tab .tab-container .platform-tab .text-container{
          margin-left: 0;    
    }
      


    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .about-tab .text-container p,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .mission-tab .text-container p,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .platform-tab .text-container p {
        font-size: var(--fs22-m);
        margin-bottom: var(--fs25-m);
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .about-tab .text-container .pill-container,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .mission-tab .text-container .pill-container,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .platform-tab .text-container .pill-container {
        padding-bottom: var(--fs35-m);
        margin-bottom: var(--fs35-m);
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .about-tab .text-container .pill-container p.pill-title,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .mission-tab .text-container .pill-container p.pill-title,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .platform-tab .text-container .pill-container p.pill-title {
        margin-bottom: var(--fs35-m);
    }


    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .about-tab .text-container .pill-container .pills {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--fs30-m);
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .about-tab .text-container .pill-container .pills .pill,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .mission-tab .text-container .pill-container .pills .pill,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .platform-tab .text-container .pill-container .pills .pill {
        font-size: var(--fs21-m);
        flex-basis: 40%;
        text-align: center;
        padding: var(--fs15-m) var(--fs12-m);
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .mission-tab .text-container {
        font-size: var(--fs23-m);
        width: 95%;
    }


    .about-banner-section .banner-wrapper .about-banner-tab .tab-container {
        min-height: max(60vw, 600px);
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .platform-tab ul.lists {
        margin-top: var(--fs40-m);
        margin-bottom: var(--fs40-m);
        padding-left: var(--fs30-m);
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .platform-tab ul.lists li {
        font-size: var(--fs20-m);
        margin-bottom: var(--fs20-m);
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .platform-tab ul.lists li::marker {
        font-size: var(--fs18-m);
    }


    .about-banner-section .banner-wrapper .about-banner-tab .tab-btns {
        display: none;
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-btns.mobile {
        gap: var(--fs40-m);
        margin-top: var(--fs30-m);
        margin-left: var(--fs20-m);
        justify-content: start;
        margin-bottom: var(--fs40-m);
        display: flex;
        flex-wrap: nowrap;
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-btns .tab {
        font-size: var(--fs20-m);
        flex: 0 0 auto;
    }



    /* how-works */

    .how-works-section {
        margin: 0 auto var(--fs90-m);
    }

    .how-works-section .h-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: var(--fs35-m);
    }

    .how-works-section .h-header h1.h-title {
        font-size: var(--fs40-m);
        margin-bottom: var(--fs20-m);
    }

    .how-works-section .h-header p.h-subtitle {
        align-self: flex-start;
        font-size: var(--fs20-m);
        margin-left: 0;
        width: 75%;
        text-align: start;
    }

    .how-works-section .platform-img {
        width: 100%;
        margin: 0 auto;
    }

    /* principle */
    .principle-team-section .navigation-band {
        overflow: hidden;
    }

    .principle-team-section .navigation-band .nav-btn {
        padding: var(--fs30-m) var(--fs34-m);
        flex-basis: auto;
    }

    .principle-team-section .navigation-band .nav-btn .img-container-1 {
        width: var(--fs45-m);
        margin-bottom: var(--fs18-m);
    }

    .principle-team-section .navigation-band .nav-btn .img-container-2 {
        width: var(--fs55-m);
        margin-bottom: var(--fs18-m);
    }

    .principle-team-section .navigation-band .nav-btn p {
        font-size: var(--fs18-m);
    }

    .principle-team-section .principle-section {
        margin: var(--fs40-m) auto var(--fs50-m);
        padding: var(--fs40-m) var(--fs40-m);
        background: url("../../images/about/principle-bg.webp") right / cover no-repeat;

    }

    .principle-team-section .principle-section .principle-wrapper p.p-subtitle {
        font-size: var(--fs25-m);
        margin-bottom: var(--fs40-m);
        width: 100%;
    }

    .principle-team-section .principle-section .principle-wrapper .card-container {
        display: none;
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile {
        display: block;
        width: 100%;
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .swiper-wrapper {
        width: 100%;
        /* aspect-ratio: 491/390; */
        margin-bottom: var(--fs40-m);
        display: flex;
        align-items: stretch;
    }


    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .swiper-slide {
        width: 100%;
        height: auto;
        display: flex;
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card {
        padding: var(--fs40-m) var(--fs30-m);
        width: 100%;
        height: auto;

        flex-basis: auto;

        display: flex;
        flex-direction: column;
        height: 100%;

    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card:hover {
        backdrop-filter: blur(71.67px);
        background: unset;
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card:hover p.card-title {
        color: #fff;
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card:hover p.desc {
        color: rgba(255, 255, 255, 0.8);
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card:hover .icon-container {
        filter: unset;
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card .icon-container {
        filter: unset;
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card .icon-container {
        margin-bottom: var(--fs40-m);
        width: var(--fs70-m);
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card:hover .icon-container-1 {
        filter: invert(1);
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card .icon-container-1 {
        width: var(--fs70-m);
        margin-bottom: var(--fs40-m);
        filter: invert(1);
    }


    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card p.card-title {
        margin-bottom: var(--fs20-m);
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card p.card-title,
    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card p.desc {
        font-size: var(--fs24-m);
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .principle-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--fs20-m);
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .principle-nav .p-nav-btn {
        width: var(--fs60-m);
        height: var(--fs60-m);
        flex-shrink: 0;
        background: #fff;
        border-radius: 50%;
        padding: var(--fs15-m);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .principle-nav .p-nav-btn.prev img {
        transform: rotate(180deg);
    }

    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .principle-nav .p-nav-btn img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: invert(1);
    }

    /* teams */

    .principle-team-section .team-section .ourteam {
        margin-bottom: max(3.35vw, 2rem);
        flex-direction: column;
        align-items: flex-start;
    }

    .principle-team-section .team-section .ourteam h1.team-title {
        font-size: var(--fs40-m);
        margin-bottom: var(--fs20-m);
    }

    .principle-team-section .team-section .ourteam p.team-subtitle {
        font-size: var(--fs20-m);
        text-align: start;
        margin-left: 0;
        width: 85%;
        margin-bottom: var(--fs30-m);
    }

    .principle-team-section .team-section .team-container {
        display: none;
    }

    .principle-team-section .team-section .team-container.mobile {
        display: block;
    }

    .principle-team-section .team-section .team-container.mobile .team-card {
        flex-basis: auto;
    }

    .principle-team-section .team-section .team-container.mobile .team-card .caption {
        padding: var(--fs30-m) var(--fs20-m);
    }

    .principle-team-section .team-section .team-container.mobile .team-card .caption .details p.name {
        font-size: var(--fs25-m);
    }

    .principle-team-section .team-section .team-container .team-card .caption .details p.role {
        font-size: var(--fs18-m);
    }

    .principle-team-section .team-section .team-container .team-card .caption .plus-icon {
        width: var(--fs33-m);
        height: var(--fs33-m);
    }

    .principle-team-section .team-section .team-container .team-nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--fs20-m);
        margin-top: var(--fs40-m);
    }

    .principle-team-section .team-section .team-container .team-nav .t-nav-btn {
        width: var(--fs50-m);
        height: var(--fs50-m);
        flex-shrink: 0;
        background: var(--black);
        border-radius: 50%;
        padding: var(--fs15-m);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .principle-team-section .team-section .team-container .team-nav .t-nav-btn.swiper-button-disabled {
        opacity: .5;
        pointer-events: none;
        user-select: none;
    }

    .principle-team-section .team-section .team-container .team-nav .t-nav-btn.prev img {
        transform: rotate(180deg);
    }

    .principle-team-section .team-section .team-container .team-nav .t-nav-btn img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Team popup */

      .team-popup .team-popup-content {
        width: 80%;
        padding: var(--fs40-m) 0 var(--fs70);
    }

    .team-popup .team-popup-content .cross-icon {
        width: var(--fs20-m);
        height: var(--fs20-m);
        margin: 0 var(--fs30-m) var(--fs30-m) auto;
        cursor: pointer;
    }

    .team-popup .team-popup-content .team-swiper {
        width: 75%;
        /* padding-bottom: 20px; */
    }

    /* .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .popup-header {
        margin-bottom: var(--fs30-m);
        padding-bottom: var(--fs30-m);
    }

    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .popup-header .profile-detail {
        flex-direction: column;
        align-items: start;
    } */

    /* .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .popup-header .profile-detail .profile-img img {
        width: 100%;
        height: 100%;
    } */
/* 
    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .popup-header .profile-detail .profile-img {
        width: var(--fs160-m);
        height: var(--fs160-m);
    } */

/* 
    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .popup-header .profile-detail .detail h1.name {
        font-size: var(--fs32-m);
    } */

    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .popup-header .profile-detail .detail h2.role {
        font-size: 18px;
    }
    .team-popup .team-popup-content .btn-container {
        width: var(--fs60);
        height: var(--fs60);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .team-popup .team-popup-content .btn-container.prev img ,.team-popup .team-popup-content .btn-container img {
        width: 90%;
    }
    .team-popup .team-popup-content .btn-container.prev {
        margin-left: 4vw;
    }
    .team-popup .team-popup-content .btn-container {
        margin-right: 4vw;
    }
    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .popup-header .social-icons .icon-container {
        width: 25px;
        height: 25px;
    }

    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .pop-desc {
        font-size: 15px;
    }
    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .pop-desc::-webkit-scrollbar {
        width: 6px;
    }

}

@media screen and (max-width:768px){
    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .popup-header {
        margin-bottom: max(2vw, 20px);
        padding-bottom: max(2vw, 20px);
    }
    .team-popup .team-popup-content .btn-container.prev {
        margin-left: clamp(5px,3vw, 3vw);
    }
    .team-popup .team-popup-content .btn-container {
        margin-right: clamp(5px,3vw, 3vw);
    }
    .team-popup .team-popup-content {
        width: 85%;
        padding: var(--fs40-m) 0 var(--fs60);
        height: 85vh;
        border-top-left-radius: var(--fs30);
        border-top-right-radius: var(--fs30);
    }
    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .popup-header .profile-detail .detail h2.role {
        font-size: 17px;
    }

    .team-popup .team-popup-content .cross-icon {
        width: var(--fs20-m);
        height: var(--fs20-m);
        margin: 0 var(--fs30-m) var(--fs30-m) auto;
        cursor: pointer;
    }

    .team-popup .team-popup-content .team-swiper {
        width: 78%;
        padding-bottom: 20px;
    }
    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .pop-desc {
        font-size: 14px;
    }
}

@media (max-width: 578px) {

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .about-tab .text-container .pill-container .pills .pill,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .mission-tab .text-container .pill-container .pills .pill,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .platform-tab .text-container .pill-container .pills .pill {
        padding: var(--fs12-m) var(--fs12-m);
        font-size: var(--fs18-m);
    }

    /* .about-banner-section .banner-wrapper .about-banner-tab .tab-btns .tab {
        font-size: var(--fs18-m);
    } */

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .about-tab .text-container .pill-container .pills .pill,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .mission-tab .text-container .pill-container .pills .pill,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .platform-tab .text-container .pill-container .pills .pill {
        flex-basis: 55%;
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-btns.mobile {
        max-width: 95%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-btns.mobile::-webkit-scrollbar {
        display: none;
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-btns .tab::after {
        bottom: 0;
    }
        .principle-team-section .principle-section {
            padding-inline: 15px;
        }
    .principle-team-section .principle-section .principle-wrapper .card-container.mobile .p-card p.desc {
        font-size: 14px;
    }
    .principle-team-section .team-section .ourteam p.team-subtitle {
        width: 100%;
    }
    
    .team-popup .team-popup-content {
        width: 100%;
        padding: var(--fs40-m) 0 var(--fs50);
        height: 90vh;
    }
    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .pop-desc::-webkit-scrollbar {
        width: 4px;
    }

     .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .popup-header .profile-detail .detail h2.role {
        font-size: 15px;
    }
    .team-popup .team-popup-content .team-swiper .content-wrapper .team-details .popup-header .profile-detail {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 10px;
    }
         
}

@media (max-width: 390px) {


    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .about-tab .text-container .pill-container .pills .pill,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .mission-tab .text-container .pill-container .pills .pill,
    .about-banner-section .banner-wrapper .about-banner-tab .tab-container .platform-tab .text-container .pill-container .pills .pill {
        font-size: var(--fs21-m);
        flex-basis: 70%;
    }

    .about-banner-section .banner-wrapper .about-banner-tab .tab-container {
        min-height: max(60vw, 550px);
    }
}