@media only screen and (min-width: 1950px) {
    nav {
        width: 1900px;
    }

    .mediaWidth {
        width: 1900px;
    }

    .slider {
        padding: 0;
        margin: 3rem auto;
    }

    .overlayBox {
        left: 0;
        background: linear-gradient(80deg, #ffffff, #ffffff, #ffffff, #fffffff0, #ffffff43, transparent);
    }
}

@media only screen and (max-width:1000px) {

    /* tab utils css starts here */
    .tabMauto {
        margin: auto;
    }

    .tabNone {
        display: none;
    }

    .tabBlock {
        display: block;
    }

    .tabFlexColumn {
        flex-direction: column;
    }

    .tabAlignStart {
        align-items: flex-start;
    }

    .tabJustifyCenter {
        justify-content: center;
    }

    .tabFlex {
        display: flex;
    }

    .tabFlexColumnReverse {
        flex-direction: column-reverse;
    }

    .tabLh-35 {
        line-height: 35px;
    }

    .tabGrid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .tabW-100 {
        width: 100%;
    }

    .tabW-90 {
        width: 90%;
    }

    .tabMt-0 {
        margin-top: 0rem;
    }

    .tabMt-1 {
        margin-top: 1rem;
    }

    .tabMt-2 {
        margin-top: 2rem;
    }

    .tabMt-3 {
        margin-top: 3rem;
    }

    .tabMt-4 {
        margin-top: 4rem;
    }

    .tabMt-5 {
        margin-top: 5rem;
    }

    .tabMt-7 {
        margin-top: 7rem;
    }

    .tabMt-8 {
        margin-top: 8rem;
    }

    .tabMl-0 {
        margin-left: 0;
    }

    .tabFs-3p2 {
        font-size: 3.2rem;
    }

    .tabTextLeft {
        text-align: left;
    }

    .tabTextCenter {
        text-align: center;
    }

    .tabBgPrimary {
        background-color: var(--primary);
    }

    .tabWhiteClr {
        color: var(--white);
    }

    .tabP-2 {
        padding: 2rem;
    }

    .tabP-0 {
        padding: 0;
    }

    /* tab utils css end here */

    /* navbar css starts here */
    #navbar {
        padding: .2rem 0;
    }

    .navMenu li a {
        font-size: 20px;
        font-weight: 600;
        color:#3d3d3d ;
    }
    .logo {
        display: block;
        width: 120px;
        position: relative;
        z-index: 70;
    }

    .tabMenuBtn {
        display: flex;
        flex-direction: column;
        gap: 7px;
        width: 30px;
        position: relative;
        z-index: 70;
    }

    .tabMenuBtn .line {
        width: 100%;
        height: 2px;
        border-radius: 10px;
        background-color: #666666;
        transition: all .2s;
    }

    #checkbox:checked~.tabMenuBtn {
        position: relative;
    }

    #checkbox:checked~.tabMenuBtn .line:nth-child(2) {
        display: none;
    }

    #checkbox:checked~.tabMenuBtn .line:nth-child(1) {
        transform: rotate(45deg);
        position: absolute;
    }

    #checkbox:checked~.tabMenuBtn .line:nth-child(3) {
        transform: rotate(-45deg);
        position: absolute;
    }

    .tabMenu {
        position: fixed;
        background-color: var(--white);
        top: 0;
        bottom: 0;
        left: -100%;
        transition: all .2s;
        width: 100%;
        z-index: 66;
        flex-direction: column;
        padding-top: 120px;
        padding-left: 25px ;
        /* justify-content: center; */
    }

    #checkbox:checked~.tabMenu {
        left: 0;
    }

    .contactBtn::after {
        border: none;
    }

    .navMenu {
        flex-direction: column;
        align-items: baseline;
        width: 100%;
        gap: 1rem;
    }
    .navMenu .socialIcons{
        margin-top: 1rem;
        justify-content: flex-start;
        gap: .8rem;
    }
    .navMenu .socialIcons img{
        width: 25px;
    }
    .navMenu .address{
        margin: .9rem 0 .2rem 0;
    }
    .navMenu .address h6{
        font-size: 14px;
        font-weight: 500;
        opacity: 0.9;
    }
    .navMenu .address p{
        color: #666666;
        font-size: 16px;
        line-height: 24px;
    }

    /* navbar css end here */
    .whatsappIcon {
        bottom: 20px;
        right: 20px;
    }

    .whatsappIcon img {
        width: 30px;
    }

    /* footer css starts here */
    footer {
        box-shadow: 0 0 6px rgba(0, 0, 0, .1);
        text-align: center;
        position: relative;
        z-index: 7;
        background-color: #ffffff;
    }

    footer .logo {
        margin: auto;
    }

    .footerMenu {
        margin: 3rem 0;
    }

    .socialIcons {
        justify-content: center;
        margin-top: 3rem;
    }

    /* footer css end here */
    .companiesLogo {
        padding: 1rem;
    }

    .slider {
        padding: 1rem 6rem;
    }

    .slide {
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
        border-radius: 4px;
    }
    
    .slide:hover {
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    }

    .slide .text {
        font-size: 17px;
        line-height: 30px;
    }

    .slide .image {
        width: 70px;
        height: 70px;
    }

    .textAimation {
        width: 100%;
        height: 500px;
    }

    .textAimation section {
        display: flex;
        justify-content: center;
    }

    .textAimation section .texts .text:first-child,
    .textAimation section .texts .text:last-child {
        font-size: 7rem;
    }

    .textAimation section .texts .text:nth-child(2) {
        font-size: 2rem;
        font-weight: 400;
    }

    @keyframes text1 {
        0% {
            transform: translateY(20px);
        }

        25% {
            transform: translateY(-53%);
        }

        50% {
            transform: translateY(20px);
        }

        75% {
            transform: translateY(-53%);
        }

        100% {
            transform: translateY(20px);
        }
    }

    @keyframes text2 {
        0% {
            transform: translateY(-50%);
        }

        25% {
            transform: translateY(20px);
        }

        50% {
            transform: translateY(-50%);
        }

        75% {
            transform: translateY(20px);
        }

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

    .tabButtons {
        width: 230px;
    }

    .tabcontent {
        grid-template-columns: repeat(2, 1fr);
        width: calc(100% - 230px);
    }

    .tablink {
        font-size: 15px;
    }

    .borderAnimation {
        left: -40%;
    }

    .logoImages {
        padding: 1.7rem;
    }

    .dotsImage {
        opacity: 0.4;
    }

    .whyWeAreDiferentImage {
        background-image: unset;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 0;
    }

    .localGlobalText,
    .overlayBox {
        position: static;
        transform: translateY(0);
        background: transparent;
    }

    .whyWeAreDiferentImage .textPosition {
        display: block;
    }

    .whyWeAreDiferentImage .textPosition .image {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }

    .whyWeAreDiferentImage .textPosition .image img {
        width: 100%;
        border-radius: 24px;
    }

    .keyFeaturesList {
        grid-template-columns: repeat(2, 1fr);
    }

}

@medIA only screen and (max-width:800px) {
    .tabHorizontalScroll {
        display: flex;
        align-items: center;
        width: 100%;
        overflow-x: scroll;
        padding: 1rem;
        margin: 0;
    }

    .tabHorizontalScroll::-webkit-scrollbar {
        display: none;
    }

    .card {
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        width: 260px;
        height: 280px;
    }

    .card:hover {
        box-shadow: unset;
    }

    .card::before,
    .card::after {
        position: absolute;
        content: '';
        width: 150px;
        height: 0;
        border-radius: 50%;
        transition: all .5s;
        z-index: -1;
        height: 130px;
    }

    .card::before {
        top: -30px;
        right: -14px;
        transform: rotate(40deg);
        background: linear-gradient(to bottom, rgba(255, 219, 87, 0.124), rgba(255, 219, 87, 0.119), rgba(255, 219, 87, 0.073), #ffffff);
    }

    .card::after {
        bottom: -30px;
        left: -14px;
        transform: rotate(-140deg);
        background: linear-gradient(to bottom, rgba(87, 224, 255, 0.133), rgba(87, 224, 255, 0.071), rgba(87, 224, 255, 0.099), #ffffff);
    }

    .aboutCounterList {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .teamMembers {
        display: flex;
        overflow: scroll;
    }

    .teamMembers .card {
        height: unset;
    }

    .teamMembers::-webkit-scrollbar {
        display: none;
    }

    .teamMembers .card .img {
        width: 100%;
        height: 240px;
    }

    .detailsText {
        text-align: center;
    }

    .detailsImg {
        height: 300px;
    }

    .contactBox {
        padding: 0;
        box-shadow: unset;
    }

    .selectTypeLabel {
        position: static;
        border-radius: 4px;
        padding: 12px 22px !important;
        font-size: 14px;
    }
}

@media only screen and (max-width:500px) {
    .btn {
        padding: 18px 60px;
    }

    /* utils css starts here */
    .mobBlock {
        display: block;
    }

    .mobColumn {
        flex-direction: column;
    }

    .mobJcenter {
        justify-content: center;
    }

    .mobW-100 {
        width: 100%;
    }

    .mobMt-0p5 {
        margin-top: 0.5rem;
    }

    .mobMb-0p5 {
        margin-bottom: 0.5rem;
    }

    .mobMt-1 {
        margin-top: 1rem;
    }

    .mobFs-0p7 {
        font-size: 0.7rem;
    }

    .mobFs-0p8 {
        font-size: 0.8rem;
    }

    .mobFs-0p9 {
        font-size: 0.9rem;
    }

    .mobFs-1 {
        font-size: 1rem;
    }

    .mobFs-1p2 {
        font-size: 1.2rem;
    }

    .mobFs-1p4 {
        font-size: 1.4rem;
    }

    .mobFs-1p6 {
        font-size: 1.6rem;
    }

    .mobFs-2 {
        font-size: 2rem;
    }

    .mobFs-2p2 {
        font-size: 2.2rem;
    }

    .mobFs-2p3 {
        font-size: 2.3rem;
    }

    .mobGap-1 {
        gap: 1rem;
    }

    .mobGap-2 {
        gap: 2rem;
    }

    .mobLh-25 {
        line-height: 25px;
    }

    .mobLh-30 {
        line-height: 30px;
    }

    .mobLh-45 {
        line-height: 45px;
    }

    .mobMb-0p5 {
        margin-bottom: 0.5rem;
    }

    .mobMb-0 {
        margin-bottom: 0;
    }

    .mobMt-3 {
        margin-top: 3rem;
    }

    .mobFw-500 {
        font-weight: 500;
    }

    .mobPl-2 {
        padding-left: 2rem;
    }

    .mobGrid-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .mobGrid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* utils css end here */
    .mainImgText {
        font-size: 10px;
        padding: 1rem;
    }

    .mainImgText img {
        width: 13px;
        margin-right: 7px;
    }

    .subHeading {
        font-size: 11px;
    }

    .mobAutoScroll {
        display: flex;
        align-items: center;
        width: 100%;
        animation: autoScroll 35s linear infinite;
    }

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

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

    .companiesLogo {
        padding: 1rem;
        display: flex;
        flex-shrink: 0;
        width: 100px;
    }

    .scrollProgressBar {
        width: 90%;
    }

    .slider {
        padding: 1rem;
        margin-top: 1rem;
    }

    .slide {
        width: 75%;
        padding: 1rem;
        gap: 1rem;
    }

    .slide .text {
        font-size: 15px;
        line-height: 25px;
    }

    .slide .image {
        width: 60px;
        height: 60px;
    }

    .slide .name h6 {
        font-size: 16px;
    }

    .roundBg {
        display: none;
    }

    .mobHorizontalScroll {
        display: flex;
        align-items: center;
        width: 100%;
        overflow-x: scroll;
    }

    .mobHorizontalScroll::-webkit-scrollbar {
        display: none;
    }

    .card .icon {
        width: 50px;
        height: 50px;
        padding: 13px;
    }

    .card span {
        font-size: 22px;
    }

    /* text animation */
    .textAimation {
        height: 350px;
    }

    .textAimation section .texts .text:first-child,
    .textAimation section .texts .text:last-child {
        font-size: 5rem;
    }

    .textAimation section .texts .text:nth-child(2) {
        font-size: 2rem;
        font-weight: 400;
    }


    @keyframes text1 {
        0% {
            transform: translateY(20px);
        }

        25% {
            transform: translateY(-110%);
        }

        50% {
            transform: translateY(20px);
        }

        75% {
            transform: translateY(-110%);
        }

        100% {
            transform: translateY(20px);
        }
    }


    @keyframes text2 {
        0% {
            transform: translateY(-145%);
        }

        25% {
            transform: translateY(20px);
        }

        50% {
            transform: translateY(-145%);
        }

        75% {
            transform: translateY(20px);
        }

        100% {
            transform: translateY(-145%);
        }
    }

    .tabButtons {
        width: 100%;
        display: flex;
        flex-direction: row;
        overflow: scroll;
        padding-bottom: .5rem;
    }

    .tabButtons::-webkit-scrollbar {
        display: none;
    }

    .tabcontent {
        width: 100%;
        margin-top: 1rem;
    }

    .tablink {
        font-size: 15px;
        display: flex;
        flex-shrink: 0;
    }

    .tablink.active {
        padding: .3rem .5rem;
    }

    .tablink.active::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 2px;
        background-color: var(--primary);
        left: 0;
        top: unset;
        bottom: 0;
    }

    .borderAnimation {
        display: none;
    }

    .contactBg {
        padding: 3rem 0rem 0 0rem;
        background-image: linear-gradient(180deg, #ffffff00, #ffffff00), url(/assets/jpg/what-we-do-bg.jpg);
    }

    .differentCounterList .listItem {
        text-align: center;
    }

    .differentCounterList .listItem h3::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .keyFeaturesList {
        grid-template-columns: repeat(1, 1fr);
    }
    .detailsText h2{
        line-height: 40px;
        font-size: 30px;
    }
}