@media only screen and (max-width : 1400px) {
    .recent-work-inner-main {
        display: flex
    ;
        /* overflow-x: auto; */
        scroll-behavior: smooth;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    body {
        overflow-x: hidden;
      }


    .login-wrap {
        padding: 50px 0px;
        
    }



    .login-form {
        padding: 10px 27px;
    }

    .profile-left ul li {
        padding: 10px 7px;
    }

    .infotext {
        left: unset;
        right: 10px;
    }

    .fot_text ul {
        margin-bottom: 0px;
        padding-left: 0rem;
    }


}


@media only screen and (max-width : 1199px) {
    .recent-work-inner-main {
        display: flex
    ;
        /* overflow-x: auto; */
        scroll-behavior: smooth;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    body {
        overflow-x: hidden;
      }


    .login-wrap {
        padding: 50px 0px;
        
    }



    .login-form {
        padding: 10px 27px;
    }

    .profile-left ul li {
        padding: 10px 7px;
    }

    .infotext {
        left: unset;
        right: 10px;
    }

    .fot_text ul {
        margin-bottom: 0px;
        padding-left: 0rem;
    }


}

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

    .recent-work-inner-main {
        display: flex
    ;
        /* overflow-x: auto; */
        scroll-behavior: smooth;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
 body {
        overflow-x: hidden;
      }
    .Connect {
        margin-top: 60px;
    }

    .profile-right {
        padding: 19px;
    }
}

@media only screen and (max-width : 1024px) {
    .recent-work-inner-main {
        display: flex
    ;
        /* overflow-x: auto; */
        scroll-behavior: smooth;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    body {
        overflow-x: hidden;
      }
    .recent-work-inner-main {
        display: flex
    ;
        /* overflow-x: auto; */
        scroll-behavior: smooth;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .toggle-table-main.active {
        max-height: fit-content;
        opacity: 1;
    }
    .toggle-table-main {
        width: 100%;
        border-radius: 7px 0px 0px 0px;
        display: flex;
        background: #121416;
        border-radius: 5px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
        opacity: 0;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .white_bg {
        background: #fff;
        padding: 15px 0px 0px 0px;
    }

    .out-space {
        padding: 50px 67px 0px 67px;
    }

    .influ-search {
        width: 157px;
    }

    .info-popup {
        left: unset;
        right: 10px;
    }
}


@media only screen and (max-width : 991px) {
    .recent-work-inner-main {
        display: flex
    ;
        /* overflow-x: auto; */
        scroll-behavior: smooth;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center !important;
    }

    body {
        overflow-x: hidden;
      }

    .card-grid {
        display: grid
    ;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        /* width: 100%; */
        /* max-width: 1168px; */
    }
    .pic-detail-main {
        gap: 30px;
        display: flex
    ;
        align-items: flex-start;
        margin: 100px 0 60px 0;
        flex-direction: column;
    }
    .column-single3 {
        transform: translateX(0px);
    }
    section.showcase h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 44px;
        font-weight: 500;
        line-height: 45px;
        text-align: left;
        padding: 0 0 12px 0;
    }
    .footername {
        font-family: SF Pro Display;
        font-size: 16px;
        font-weight: 500;
        line-height: 25.06px;
        color: white;
    }
    .recent-work-sec h1 {
        font-size: 33px !important;
    }
    .heading-icon img {
        width: 66px !important;
        height: 52px !important;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .banner-content-wrap {
        display: flex
;
        align-content: flex-end;
        align-items: flex-end;
        justify-content: space-between;
        margin: 0px 0;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .banner-left h6 {
        color: #666666;
        font-size: 20px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .about-right p {
        font-size: 19px;
    }
    .domain-wrap p {
        font-size: 17px;
        margin: 0;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .left-domain-heading h6 {
        font-size: 43px;
        font-weight: 500;
    }

    .domain-wrap h6 {
        font-size: 24px;
        width: fit-content;
    }
    
    
    .banner-left span {
        font-family: SF Pro Display;
        font-size: 40px !important;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: transparent !important;
        color: #ff4d00;
    }
    .right-links-wrap h6 {
        color: #b2b2b2;
        font-size: 15px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 3s ease-out forwards;
    }
    .right-links-wrap a {
        color: black;
        font-size: 13px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .banner-left {
        /* top: 26%; */
        /* left: 7%; */
        margin: 7rem 0 0 0;
        width: 100%;
    }.experiancewrap {
        display: flex
    ;
        gap: 11px;
        justify-content: flex-start;
        padding-right: 100px;
        /* position: absolute; */
        /* bottom: 10%; */
        /* right: 5%; */
        margin: 25px 0;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        flex-direction: column;
    }

    .exp-1 p {
        padding: o;
        margin: 0;
        font-size: 15px;
    }
    .exp-2 p {
        padding: o;
        margin: 0;
        font-size: 15px
    }
    .navbar-nav {
        background: transparent;
        /* box-shadow: 0px 0px 4px 1px #c5c5c5; */
        border-radius: 5px;
        padding: 10px;
        margin-top: 5px;
    }
    .exp-1 {
        width: 227px;}

        .about-section {
            display: flex
        ;
            justify-content: space-between;
            margin: 160px 0;
            flex-direction: column;
        }

        .section-3-domains-wrap {
            display: flex
        ;
            justify-content: space-between;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            flex-direction: column;
        }

        .domain-wrap {
            width: 100%;
        }

        .right-domains {
            display: flex
        ;
            width: 100%;
            gap: 25px;
            margin-top: 46px;
            /* justify-content: flex-end; */
            flex-wrap: wrap;
        }


        .section-tools-main h1 {
            font-size: 24px !important;
        }


        img.xd-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 29% !important;
            left: 14% !important;
        }

        img.vs-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 31% !important;
            left: 49% !important;
        }

        img.ps-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 20% !important;
            right: 3% !important;
            left: inherit !important;
        }

        img.figma-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 16% !important;
            left: 32% !important;
        }

        img.sketch-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 60% !important;
            right: 7% !important;
            left: inherit !important;
        }

        img.asana-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 59% !important;
            left: 2% !important;
        }

        img.microsoft-icon {
            width: 60px !important;
            height: 60px !important;
            position: absolute !important;
            top: inherit !important;
            right: 27% !important;
            bottom: 30% !important;
            left: inherit !important;
        }

        img.ai-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 65% !important;
            left: 8% !important;
        }

        .expertise-heading h2 {
            font-family: SF Pro Display;
            font-size: 23px;
            font-weight: 500;
            text-align: left;
            color: white;
            padding: 0px 0 0px;
        }

      
        .three-column-wrap{
            display: flex !important
        ;
            justify-content: space-between !important;
            gap: 32px !important;
            flex-direction: column !important;
            
        }
        .column-single {
            width: 100% !important;
            height: 450px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise1.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single2 {
            width: 100% !important;
            height: 490px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise3.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single3 {
            width: 100% !important;
            height: 458px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise2.jpeg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .toggle-table-main {
            width: 100%;
            border-radius: 7px 0px 0px 0px;
            display: flex
        ;
            background: #121416;
            border-radius: 5px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
            opacity: 0;
            flex-direction: column;
        }

        .toggle-table-main.active {
            max-height: 384px;
            opacity: 1;
        }

        .toggle-table-main.active {
            max-height: max-content;
            opacity: 1;
        }

        .recent-work-sec h1 {
            font-family: SF Pro Display;
            font-size: 40px !important;
            line-height: 42px !important;
        }

        .recent-work-sec {
            padding: 51px 0 33px 0px;
        }
        .contact-text h1 {
            font-size: 37px !important;
        }.contact-text p {
            font-size: 24px !important;
        }
        .contact-content-main {
            display: flex
    ;
            gap: 2rem;
            flex-direction: column;
        }

        .contact-detail-main h1 {
            font-size: 20px !important;
            padding: 0 !important;
        }
        .contact-detail-main h2 {
            color: white !important;
            font-size: 18px;
        }     .contact-detail-main p {
            
            font-size: 18px !important;
        }

        .changing-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
            color: white;
        }

        .contact-detail-main p {
            color: white !important;
            font-size: 18px !important;
        }
        .recent-work-inner-main {
            display: flex
        ;
            /* overflow-x: auto; */
            scroll-behavior: smooth;
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }
}


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

    body {
        overflow-x: hidden;
      }


    .card-grid {
        display: grid
    ;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        /* width: 100%; */
        /* max-width: 1168px; */
    }
    .recent-work-inner-main {
        display: flex
    ;
        /* overflow-x: auto; */
        scroll-behavior: smooth;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pic-detail-main {
        gap: 30px;
        display: flex
    ;
        align-items: flex-start;
        margin: 100px 0 60px 0;
        flex-direction: column;
    }
    .left-img img {
        width: 100%;
        height: 409px;
        top: 630px;
        border-radius: 6px;
    }

    .column-single3 {
        transform: translateX(0px);
    }
    section.showcase h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 44px;
        font-weight: 500;
        line-height: 45px;
        text-align: left;
        padding: 0 0 12px 0;
    }
    .footername {
        font-family: SF Pro Display;
        font-size: 16px;
        font-weight: 500;
        line-height: 25.06px;
        color: white;
    }
    .recent-work-sec h1 {
        font-size: 33px !important;
    }
    .heading-icon img {
        width: 66px !important;
        height: 52px !important;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .banner-content-wrap {
        display: flex
;
        align-content: flex-end;
        align-items: flex-end;
        justify-content: space-between;
        margin: 0px 0;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .banner-left h6 {
        color: #666666;
        font-size: 20px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .about-right p {
        font-size: 19px;
    }
    .domain-wrap p {
        font-size: 17px;
        margin: 0;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .left-domain-heading h6 {
        font-size: 43px;
        font-weight: 500;
    }

    .domain-wrap h6 {
        font-size: 24px;
        width: fit-content;
    }
    
    
    .banner-left span {
        font-family: SF Pro Display;
        font-size: 40px !important;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: transparent !important;
        color: #ff4d00;
    }
    .right-links-wrap h6 {
        color: #b2b2b2;
        font-size: 15px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 3s ease-out forwards;
    }
    .right-links-wrap a {
        color: black;
        font-size: 13px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .banner-left {
        /* top: 26%; */
        /* left: 7%; */
        margin: 7rem 0 0 0;
        width: 100%;
    }.experiancewrap {
        display: flex
    ;
        gap: 11px;
        justify-content: flex-start;
        padding-right: 100px;
        /* position: absolute; */
        /* bottom: 10%; */
        /* right: 5%; */
        margin: 25px 0;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        flex-direction: column;
    }

    .exp-1 p {
        padding: o;
        margin: 0;
        font-size: 15px;
    }
    .exp-2 p {
        padding: o;
        margin: 0;
        font-size: 15px
    }
    .navbar-nav {
        background: transparent;
        /* box-shadow: 0px 0px 4px 1px #c5c5c5; */
        border-radius: 5px;
        padding: 10px;
        margin-top: 5px;
    }
    .exp-1 {
        width: 227px;}

        .about-section {
            display: flex
        ;
            justify-content: space-between;
            margin: 160px 0;
            flex-direction: column;
        }

        .section-3-domains-wrap {
            display: flex
        ;
            justify-content: space-between;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            flex-direction: column;
        }

        .domain-wrap {
            width: 100%;
        }

        .right-domains {
            display: flex
        ;
            width: 100%;
            gap: 25px;
            margin-top: 46px;
            /* justify-content: flex-end; */
            flex-wrap: wrap;
        }


        .section-tools-main h1 {
            font-size: 24px !important;
        }


        img.xd-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 29% !important;
            left: 14% !important;
        }

        img.vs-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 31% !important;
            left: 49% !important;
        }

        img.ps-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 20% !important;
            right: 3% !important;
            left: inherit !important;
        }

        img.figma-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 16% !important;
            left: 32% !important;
        }

        img.sketch-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 60% !important;
            right: 7% !important;
            left: inherit !important;
        }

        img.asana-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 59% !important;
            left: 2% !important;
        }

        img.microsoft-icon {
            width: 60px !important;
            height: 60px !important;
            position: absolute !important;
            top: inherit !important;
            right: 27% !important;
            bottom: 30% !important;
            left: inherit !important;
        }

        img.ai-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 65% !important;
            left: 8% !important;
        }

        .expertise-heading h2 {
            font-family: SF Pro Display;
            font-size: 23px;
            font-weight: 500;
            text-align: left;
            color: white;
            padding: 0px 0 0px;
        }

      
        .three-column-wrap{
            display: flex !important
        ;
            justify-content: space-between !important;
            gap: 32px !important;
            flex-direction: column !important;
            
        }
        .column-single {
            width: 100% !important;
            height: 450px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise1.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single2 {
            width: 100% !important;
            height: 490px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise3.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single3 {
            width: 100% !important;
            height: 458px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise2.jpeg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .toggle-table-main {
            width: 100%;
            border-radius: 7px 0px 0px 0px;
            display: flex
        ;
            background: #121416;
            border-radius: 5px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
            opacity: 0;
            flex-direction: column;
        }

        .toggle-table-main.active {
            max-height: 384px;
            opacity: 1;
        }

        .toggle-table-main.active {
            max-height: max-content;
            opacity: 1;
        }

        .recent-work-sec h1 {
            font-family: SF Pro Display;
            font-size: 40px !important;
            line-height: 42px !important;
        }

        .recent-work-sec {
            padding: 51px 0 33px 0px;
        }
        .contact-text h1 {
            font-size: 37px !important;
        }.contact-text p {
            font-size: 24px !important;
        }
        .contact-content-main {
            display: flex
    ;
            gap: 2rem;
            flex-direction: column;
        }

        .contact-detail-main h1 {
            font-size: 20px !important;
            padding: 0 !important;
        }
        .contact-detail-main h2 {
            color: white !important;
            font-size: 18px;
        }     .contact-detail-main p {
            
            font-size: 18px !important;
        }

        .changing-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
            color: white;
        }

        .contact-detail-main p {
            color: white !important;
            font-size: 18px !important;
        }
}


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



    body {
        overflow-x: hidden;
      }


    .single-project-detail-wrap h1 {
        margin: 0 !important;
        padding: 0 0 10px 0 !important;
        line-height: 28px !important;
    }
    .card-grid {
        display: grid
    ;
        grid-template-columns: repeat(1, 1fr);
        gap: 4px;
        width: 100%;
        /* max-width: 1168px; */
    }
    .skill-sec {
        display: flex
    ;
        margin: 66px 0;
        flex-direction: column;
        gap: 15px;
    }

    .skill-right {
        display: flex
    ;
        gap: 4rem;
        margin: 0% 0 0 0;
        padding-left: 30px;
    }

    .left-img img {
        width: 100%;
        height: 409px;
        top: 630px;
        border-radius: 6px;
    }
    .pic-detail-main {
        gap: 30px;
        display: flex
    ;
        align-items: flex-start;
        margin: 100px 0 60px 0;
        flex-direction: column;
    }
    .about-page-section1 h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 65px !important;
        font-weight: 500;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        margin: 0 0 0px 0;
    }
    .about-page-section1 span {
        font-family: SF Pro Display;
        font-size: 55px;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: #FF4D00;
        color: white;
        line-height: 68px;
    }
    .column-single3 {
        transform: translateX(0px);
    }
    section.showcase h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 44px;
        font-weight: 500;
        line-height: 45px;
        text-align: left;
        padding: 0 0 12px 0;
    }
    .footername {
        font-family: SF Pro Display;
        font-size: 16px;
        font-weight: 500;
        line-height: 25.06px;
        color: white;
    }
    .recent-work-sec h1 {
        font-size: 33px !important;
    }
    .heading-icon img {
        width: 66px !important;
        height: 52px !important;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .banner-content-wrap {
        display: flex
;
        align-content: flex-end;
        align-items: flex-end;
        justify-content: space-between;
        margin: 0px 0;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .banner-left h6 {
        color: #666666;
        font-size: 20px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .about-right p {
        font-size: 19px;
    }
    .domain-wrap p {
        font-size: 17px;
        margin: 0;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .left-domain-heading h6 {
        font-size: 43px;
        font-weight: 500;
    }

    .domain-wrap h6 {
        font-size: 24px;
        width: fit-content;
    }
    
    
    .banner-left span {
        font-family: SF Pro Display;
        font-size: 40px !important;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: transparent !important;
        color: #ff4d00;
    }
    .right-links-wrap h6 {
        color: #b2b2b2;
        font-size: 15px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 3s ease-out forwards;
    }
    .right-links-wrap a {
        color: black;
        font-size: 13px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .banner-left {
        /* top: 26%; */
        /* left: 7%; */
        margin: 7rem 0 0 0;
        width: 100%;
    }.experiancewrap {
        display: flex
    ;
        gap: 11px;
        justify-content: flex-start;
        padding-right: 100px;
        /* position: absolute; */
        /* bottom: 10%; */
        /* right: 5%; */
        margin: 25px 0;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        flex-direction: column;
    }

    .exp-1 p {
        padding: o;
        margin: 0;
        font-size: 15px;
    }
    .exp-2 p {
        padding: o;
        margin: 0;
        font-size: 15px
    }
    .navbar-nav {
        background: transparent;
        /* box-shadow: 0px 0px 4px 1px #c5c5c5; */
        border-radius: 5px;
        padding: 10px;
        margin-top: 5px;
    }
    .exp-1 {
        width: 227px;}

        .about-section {
            display: flex
        ;
            justify-content: space-between;
            margin: 160px 0;
            flex-direction: column;
        }

        .section-3-domains-wrap {
            display: flex
        ;
            justify-content: space-between;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            flex-direction: column;
        }

        .domain-wrap {
            width: 100%;
        }

        .right-domains {
            display: flex
        ;
            width: 100%;
            gap: 25px;
            margin-top: 46px;
            /* justify-content: flex-end; */
            flex-wrap: wrap;
        }


        .section-tools-main h1 {
            font-size: 24px !important;
        }


        img.xd-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 29% !important;
            left: 14% !important;
        }

        img.vs-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 31% !important;
            left: 49% !important;
        }

        img.ps-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 20% !important;
            right: 3% !important;
            left: inherit !important;
        }

        img.figma-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 16% !important;
            left: 32% !important;
        }

        img.sketch-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 60% !important;
            right: 7% !important;
            left: inherit !important;
        }

        img.asana-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 59% !important;
            left: 2% !important;
        }

        img.microsoft-icon {
            width: 60px !important;
            height: 60px !important;
            position: absolute !important;
            top: inherit !important;
            right: 27% !important;
            bottom: 30% !important;
            left: inherit !important;
        }

        img.ai-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 65% !important;
            left: 8% !important;
        }

        .expertise-heading h2 {
            font-family: SF Pro Display;
            font-size: 23px;
            font-weight: 500;
            text-align: left;
            color: white;
            padding: 0px 0 0px;
        }

      
        .three-column-wrap{
            display: flex !important
        ;
            justify-content: space-between !important;
            gap: 32px !important;
            flex-direction: column !important;
            
        }
        .column-single {
            width: 100% !important;
            height: 450px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise1.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single2 {
            width: 100% !important;
            height: 490px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise3.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single3 {
            width: 100% !important;
            height: 458px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise2.jpeg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .toggle-table-main {
            width: 100%;
            border-radius: 7px 0px 0px 0px;
            display: flex
        ;
            background: #121416;
            border-radius: 5px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
            opacity: 0;
            flex-direction: column;
        }

        .toggle-table-main.active {
            max-height: 384px;
            opacity: 1;
        }

        .toggle-table-main.active {
            max-height: max-content;
            opacity: 1;
        }

        .recent-work-sec h1 {
            font-family: SF Pro Display;
            font-size: 40px !important;
            line-height: 42px !important;
        }

        .recent-work-sec {
            padding: 51px 0 33px 0px;
        }
        .contact-text h1 {
            font-size: 37px !important;
        }.contact-text p {
            font-size: 24px !important;
        }
        .contact-content-main {
            display: flex
    ;
            gap: 2rem;
            flex-direction: column;
        }

        .contact-detail-main h1 {
            font-size: 20px !important;
            padding: 0 !important;
        }
        .contact-detail-main h2 {
            color: white !important;
            font-size: 18px;
        }     .contact-detail-main p {
            
            font-size: 18px !important;
        }

        .changing-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
            color: white;
        }

        .contact-detail-main p {
            color: white !important;
            font-size: 18px !important;
        }
}

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

    .tag-1 {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.0075) 0%, rgba(255, 255, 255, 0.0075) 100%);
        backdrop-filter: blur(150px);
        padding: 7px 53px;
        gap: 10px;
        border-radius: 12px;
        width: 94%;
        position: absolute;
        bottom: 18px;
        left: 0;
        display: flex
    ;
        justify-content: center;
        margin: 0px 10px;
    }
    .section-tools-main.active h1 {
        line-height: 28px !important;
    }

    body {
        overflow-x: hidden;
    }

    .single-project-detail-wrap h1 {
        margin: 0 !important;
        padding: 0 0 10px 0 !important;
        line-height: 28px !important;
    }

    .card-grid {
        display: grid
    ;
        grid-template-columns: repeat(1, 1fr);
        gap: 4px;
        width: 100%;
        /* max-width: 1168px; */
    }
    .skill-sec {
        display: flex
    ;
        margin: 66px 0;
        flex-direction: column;
        gap: 15px;
    }

    .skill-right {
        display: flex
    ;
        gap: 4rem;
        margin: 0% 0 0 0;
        padding-left: 30px;
    }
    .left-img img {
        width: 100%;
        height: 409px;
        top: 630px;
        border-radius: 6px;
    }
    .pic-detail-main {
        gap: 30px;
        display: flex
    ;
        align-items: flex-start;
        margin: 100px 0 60px 0;
        flex-direction: column;
    }
    .about-page-section1 h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 65px !important;
        font-weight: 500;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        margin: 0 0 0px 0;
    }
    .about-page-section1 span {
        font-family: SF Pro Display;
        font-size: 55px;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: #FF4D00;
        color: white;
        line-height: 71px;
    }
    .column-single3 {
        transform: translateX(0px);
    }
    section.showcase h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 44px;
        font-weight: 500;
        line-height: 45px;
        text-align: left;
        padding: 0 0 12px 0;
    }
    .footername {
        font-family: SF Pro Display;
        font-size: 16px;
        font-weight: 500;
        line-height: 25.06px;
        color: white;
    }
    .recent-work-sec h1 {
        font-size: 33px !important;
    }
    .heading-icon img {
        width: 66px !important;
        height: 52px !important;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .banner-content-wrap {
        display: flex
;
        align-content: flex-end;
        align-items: flex-end;
        justify-content: space-between;
        margin: 0px 0;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .banner-left h6 {
        color: #666666;
        font-size: 20px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .about-right p {
        font-size: 19px;
    }
    .domain-wrap p {
        font-size: 17px;
        margin: 0;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .left-domain-heading h6 {
        font-size: 43px;
        font-weight: 500;
    }

    .domain-wrap h6 {
        font-size: 24px;
        width: fit-content;
    }
    
    
    .banner-left span {
        font-family: SF Pro Display;
        font-size: 40px !important;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: transparent !important;
        color: #ff4d00;
    }
    .right-links-wrap h6 {
        color: #b2b2b2;
        font-size: 15px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 3s ease-out forwards;
    }
    .right-links-wrap a {
        color: black;
        font-size: 13px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .banner-left {
        /* top: 26%; */
        /* left: 7%; */
        margin: 7rem 0 0 0;
        width: 100%;
    }.experiancewrap {
        display: flex
    ;
        gap: 11px;
        justify-content: flex-start;
        padding-right: 100px;
        /* position: absolute; */
        /* bottom: 10%; */
        /* right: 5%; */
        margin: 25px 0;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        flex-direction: column;
    }

    .exp-1 p {
        padding: o;
        margin: 0;
        font-size: 15px;
    }
    .exp-2 p {
        padding: o;
        margin: 0;
        font-size: 15px
    }
    .navbar-nav {
        background: transparent;
        /* box-shadow: 0px 0px 4px 1px #c5c5c5; */
        border-radius: 5px;
        padding: 10px;
        margin-top: 5px;
    }
    .exp-1 {
        width: 227px;}

        .about-section {
            display: flex
        ;
            justify-content: space-between;
            margin: 160px 0;
            flex-direction: column;
        }

        .section-3-domains-wrap {
            display: flex
        ;
            justify-content: space-between;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            flex-direction: column;
        }

        .domain-wrap {
            width: 100%;
        }

        .right-domains {
            display: flex
        ;
            width: 100%;
            gap: 25px;
            margin-top: 46px;
            /* justify-content: flex-end; */
            flex-wrap: wrap;
        }


        .section-tools-main h1 {
            font-size: 24px !important;
        }


               img.xd-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 29% !important;
            left: 14% !important;
        }

        img.vs-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 31% !important;
            left: 49% !important;
        }

        img.ps-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 20% !important;
            right: 3% !important;
            left: inherit !important;
        }

        img.figma-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 16% !important;
            left: 32% !important;
        }

        img.sketch-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 60% !important;
            right: 7% !important;
            left: inherit !important;
        }

        img.asana-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 59% !important;
            left: 2% !important;
        }

        img.microsoft-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: inherit !important;
            right: 27% !important;
            bottom: 30% !important;
            left: inherit !important;
        }

        img.ai-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 68% !important;
            left: 13% !important;
        }

        .expertise-heading h2 {
            font-family: SF Pro Display;
            font-size: 23px;
            font-weight: 500;
            text-align: left;
            color: white;
            padding: 0px 0 0px;
        }

      
        .three-column-wrap{
            display: flex !important
        ;
            justify-content: space-between !important;
            gap: 32px !important;
            flex-direction: column !important;
            
        }
        .column-single {
            width: 100% !important;
            height: 450px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise1.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single2 {
            width: 100% !important;
            height: 490px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise3.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single3 {
            width: 100% !important;
            height: 458px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise2.jpeg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .toggle-table-main {
            width: 100%;
            border-radius: 7px 0px 0px 0px;
            display: flex
        ;
            background: #121416;
            border-radius: 5px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
            opacity: 0;
            flex-direction: column;
        }

        .toggle-table-main.active {
            max-height: 384px;
            opacity: 1;
        }

        .toggle-table-main.active {
            max-height: max-content;
            opacity: 1;
        }

        .recent-work-sec h1 {
            font-family: SF Pro Display;
            font-size: 40px !important;
            line-height: 42px !important;
        }

        .recent-work-sec {
            padding: 51px 0 33px 0px;
        }
        .contact-text h1 {
            font-size: 37px !important;
        }.contact-text p {
            font-size: 24px !important;
        }
        .contact-content-main {
            display: flex
    ;
            gap: 2rem;
            flex-direction: column;
        }

        .contact-detail-main h1 {
            font-size: 20px !important;
            padding: 0 !important;
        }
        .contact-detail-main h2 {
            color: white !important;
            font-size: 18px;
        }     .contact-detail-main p {
            
            font-size: 18px !important;
        }

        .changing-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
            color: white;
        }

        .contact-detail-main p {
            color: white !important;
            font-size: 18px !important;
        }
}


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

    .tag-1 {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.0075) 0%, rgba(255, 255, 255, 0.0075) 100%);
        backdrop-filter: blur(150px);
        padding: 7px 53px;
        gap: 10px;
        border-radius: 12px;
        width: 94%;
        position: absolute;
        bottom: 18px;
        left: 0;
        display: flex
    ;
        justify-content: center;
        margin: 0px 10px;
    }
    .section-tools-main.active h1 {
        line-height: 28px !important;
    }

    body {
        overflow-x: hidden;
    }

    .single-project-detail-wrap h1 {
        margin: 0 !important;
        padding: 0 0 10px 0 !important;
        line-height: 28px !important;
    }
    .card-grid {
        display: grid
    ;
        grid-template-columns: repeat(1, 1fr);
        gap: 4px;
        width: 100%;
        /* max-width: 1168px; */
    }
    .skill-sec {
        display: flex
    ;
        margin: 66px 0;
        flex-direction: column;
        gap: 15px;
    }

    .skill-right {
        display: flex
    ;
        gap: 4rem;
        margin: 0% 0 0 0;
        padding-left: 30px;
    }
    .left-img img {
        width: 100%;
        height: 409px;
        top: 630px;
        border-radius: 6px;
    }
    .pic-detail-main {
        gap: 30px;
        display: flex
    ;
        align-items: flex-start;
        margin: 100px 0 60px 0;
        flex-direction: column;
    }
    .about-page-section1 h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 65px !important;
        font-weight: 500;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        margin: 0 0 0px 0;
    }
    .about-page-section1 span {
        font-family: SF Pro Display;
        font-size: 55px;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: #FF4D00;
        color: white;
        line-height: 72px;
    }

    .column-single3 {
        transform: translateX(0px);
    }
    section.showcase h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 44px;
        font-weight: 500;
        line-height: 45px;
        text-align: left;
        padding: 0 0 12px 0;
    }
    .footername {
        font-family: SF Pro Display;
        font-size: 16px;
        font-weight: 500;
        line-height: 25.06px;
        color: white;
    }
    .recent-work-sec h1 {
        font-size: 33px !important;
    }
    .heading-icon img {
        width: 66px !important;
        height: 52px !important;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .banner-content-wrap {
        display: flex
;
        align-content: flex-end;
        align-items: flex-end;
        justify-content: space-between;
        margin: 0px 0;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .banner-left h6 {
        color: #666666;
        font-size: 20px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .about-right p {
        font-size: 19px;
    }
    .domain-wrap p {
        font-size: 17px;
        margin: 0;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .left-domain-heading h6 {
        font-size: 43px;
        font-weight: 500;
    }

    .domain-wrap h6 {
        font-size: 24px;
        width: fit-content;
    }
    
    
    .banner-left span {
        font-family: SF Pro Display;
        font-size: 40px !important;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: transparent !important;
        color: #ff4d00;
    }
    .right-links-wrap h6 {
        color: #b2b2b2;
        font-size: 15px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 3s ease-out forwards;
    }
    .right-links-wrap a {
        color: black;
        font-size: 13px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .banner-left {
        /* top: 26%; */
        /* left: 7%; */
        margin: 7rem 0 0 0;
        width: 100%;
    }.experiancewrap {
        display: flex
    ;
        gap: 11px;
        justify-content: flex-start;
        padding-right: 100px;
        /* position: absolute; */
        /* bottom: 10%; */
        /* right: 5%; */
        margin: 25px 0;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        flex-direction: column;
    }

    .exp-1 p {
        padding: o;
        margin: 0;
        font-size: 15px;
    }
    .exp-2 p {
        padding: o;
        margin: 0;
        font-size: 15px
    }
    .navbar-nav {
        background: transparent;
        /* box-shadow: 0px 0px 4px 1px #c5c5c5; */
        border-radius: 5px;
        padding: 10px;
        margin-top: 5px;
    }
    .exp-1 {
        width: 227px;}

        .about-section {
            display: flex
        ;
            justify-content: space-between;
            margin: 160px 0;
            flex-direction: column;
        }

        .section-3-domains-wrap {
            display: flex
        ;
            justify-content: space-between;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            flex-direction: column;
        }

        .domain-wrap {
            width: 100%;
        }

        .right-domains {
            display: flex
        ;
            width: 100%;
            gap: 25px;
            margin-top: 46px;
            /* justify-content: flex-end; */
            flex-wrap: wrap;
        }


        .section-tools-main h1 {
            font-size: 24px !important;
        }


        img.xd-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 29% !important;
            left: 14% !important;
        }

        img.vs-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 31% !important;
            left: 49% !important;
        }

        img.ps-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 20% !important;
            right: 3% !important;
            left: inherit !important;
        }

        img.figma-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 16% !important;
            left: 32% !important;
        }

        img.sketch-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 60% !important;
            right: 7% !important;
            left: inherit !important;
        }

        img.asana-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 59% !important;
            left: 2% !important;
        }

        img.microsoft-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: inherit !important;
            right: 27% !important;
            bottom: 30% !important;
            left: inherit !important;
        }

        img.ai-icon {
            width: 65px !important;
            height: 65px !important;
            position: absolute !important;
            top: 68% !important;
            left: 13% !important;
        }

        .expertise-heading h2 {
            font-family: SF Pro Display;
            font-size: 23px;
            font-weight: 500;
            text-align: left;
            color: white;
            padding: 0px 0 0px;
        }

      
        .three-column-wrap{
            display: flex !important
        ;
            justify-content: space-between !important;
            gap: 32px !important;
            flex-direction: column !important;
            
        }
        .column-single {
            width: 100% !important;
            height: 450px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise1.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single2 {
            width: 100% !important;
            height: 490px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise3.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single3 {
            width: 100% !important;
            height: 458px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise2.jpeg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .toggle-table-main {
            width: 100%;
            border-radius: 7px 0px 0px 0px;
            display: flex
        ;
            background: #121416;
            border-radius: 5px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
            opacity: 0;
            flex-direction: column;
        }

        .toggle-table-main.active {
            max-height: 384px;
            opacity: 1;
        }

        .toggle-table-main.active {
            max-height: max-content;
            opacity: 1;
        }

        .recent-work-sec h1 {
            font-family: SF Pro Display;
            font-size: 40px !important;
            line-height: 42px !important;
        }

        .recent-work-sec {
            padding: 51px 0 33px 0px;
        }
        .contact-text h1 {
            font-size: 37px !important;
        }.contact-text p {
            font-size: 24px !important;
        }
        .contact-content-main {
            display: flex
    ;
            gap: 2rem;
            flex-direction: column;
        }

        .contact-detail-main h1 {
            font-size: 20px !important;
            padding: 0 !important;
        }
        .contact-detail-main h2 {
            color: white !important;
            font-size: 18px;
        }     .contact-detail-main p {
            
            font-size: 18px !important;
        }

        .changing-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
            color: white;
        }

        .contact-detail-main p {
            color: white !important;
            font-size: 18px !important;
        }
}




@media only screen and (max-width : 340px)  {
    .tag-1 {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.0075) 0%, rgba(255, 255, 255, 0.0075) 100%);
        backdrop-filter: blur(150px);
        padding: 7px 53px;
        gap: 10px;
        border-radius: 12px;
        width: 94%;
        position: absolute;
        bottom: 18px;
        left: 0;
        display: flex
    ;
        justify-content: center;
        margin: 0px 10px;
    }
    .section-tools-main.active h1 {
        line-height: 28px !important;
    }
    body {
        overflow-x: hidden;
    }

    .card-grid {
        display: grid
    ;
        grid-template-columns: repeat(1, 1fr);
        gap: 4px;
        width: 100%;
        /* max-width: 1168px; */
    }
    .skill-sec {
        display: flex
    ;
        margin: 66px 0;
        flex-direction: column;
        gap: 15px;
    }
    .skill-right {
        display: flex
    ;
        gap: 4rem;
        margin: 0% 0 0 0;
        padding-left: 30px;
    }
    .left-img img {
        width: 100%;
        height: 409px;
        top: 630px;
        border-radius: 6px;
    }
    .pic-detail-main {
        gap: 30px;
        display: flex
    ;
        align-items: flex-start;
        margin: 100px 0 60px 0;
        flex-direction: column;
    }
    .about-page-section1 h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 65px !important;
        font-weight: 500;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        margin: 0 0 0px 0;
    }
    .about-page-section1 span {
        font-family: SF Pro Display;
        font-size: 55px;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: #FF4D00;
        color: white;
        line-height: 68px;
    }
    section.showcase h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 30px;
        font-weight: 500;
        line-height: 29px;
        text-align: left;
        padding: 0 0 12px 0;
    }
    .footername {
        font-family: SF Pro Display;
        font-size: 16px;
        font-weight: 500;
        line-height: 25.06px;
        color: white;
    }
    .recent-work-sec h1 {
        font-size: 33px !important;
    }
    .heading-icon img {
        width: 66px !important;
        height: 52px !important;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .banner-content-wrap {
        display: flex
;
        align-content: flex-end;
        align-items: flex-end;
        justify-content: space-between;
        margin: 0px 0;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .banner-left h6 {
        color: #666666;
        font-size: 18px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }

    .banner-left span {
        font-family: SF Pro Display;
        font-size: 30px !important;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: transparent !important;
        color: #000000;
    }

    .right-links-wrap h6 {
        color: #b2b2b2;
        font-size: 15px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 3s ease-out forwards;
    }
    .right-links-wrap a {
        color: black;
        font-size: 13px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .banner-left {
        /* top: 26%; */
        /* left: 7%; */
        margin: 7rem 0 0 0;
        width: 100%;
    }.experiancewrap {
        display: flex
    ;
        gap: 11px;
        justify-content: flex-start;
        padding-right: 100px;
        /* position: absolute; */
        /* bottom: 10%; */
        /* right: 5%; */
        margin: 25px 0;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        flex-direction: column;
    }

    .exp-1 p {
        padding: o;
        margin: 0;
        font-size: 15px;
    }
    .exp-2 p {
        padding: o;
        margin: 0;
        font-size: 15px
    }
    .navbar-nav {
        background: transparent;
        /* box-shadow: 0px 0px 4px 1px #c5c5c5; */
        border-radius: 5px;
        padding: 10px;
        margin-top: 5px;
    }
    .exp-1 {
        width: 227px;}

        .about-section {
            display: flex
        ;
            justify-content: space-between;
            margin: 160px 0;
            flex-direction: column;
        }

        .section-3-domains-wrap {
            display: flex
        ;
            justify-content: space-between;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            flex-direction: column;
        }

        .domain-wrap {
            width: 100%;
        }

        .right-domains {
            display: flex
        ;
            width: 100%;
            gap: 25px;
            margin-top: 46px;
            /* justify-content: flex-end; */
            flex-wrap: wrap;
        }


        .section-tools-main h1 {
            font-size: 24px !important;
        }

        .expertise-heading h2 {
            font-family: SF Pro Display;
            font-size: 23px;
            font-weight: 500;
            text-align: left;
            color: white;
            padding: 0px 0 0px;
        }

      
        .three-column-wrap{
            display: flex !important
        ;
            justify-content: space-between !important;
            gap: 32px !important;
            flex-direction: column !important;
            
        }
        .column-single {
            width: 100% !important;
            height: 450px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise1.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single2 {
            width: 100% !important;
            height: 490px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise3.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single3 {
            width: 100% !important;
            height: 458px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise2.jpeg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .toggle-table-main {
            width: 100%;
            border-radius: 7px 0px 0px 0px;
            display: flex
        ;
            background: #121416;
            border-radius: 5px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
            opacity: 0;
            flex-direction: column;
        }

        .toggle-table-main.active {
            max-height: 384px;
            opacity: 1;
        }

        .toggle-table-main.active {
            max-height: max-content;
            opacity: 1;
        }

        .recent-work-sec h1 {
            font-family: SF Pro Display;
            font-size: 40px !important;
            line-height: 42px !important;
        }

        .recent-work-sec {
            padding: 51px 0 33px 0px;
        }
        .contact-text h1 {
            font-size: 37px !important;
        }.contact-text p {
            font-size: 24px !important;
        }
        .contact-content-main {
            display: flex
    ;
            gap: 2rem;
            flex-direction: column;
        }

        .contact-detail-main h1 {
            font-size: 20px !important;
            padding: 0 !important;
        }
        .contact-detail-main h2 {
            color: white !important;
            font-size: 18px;
        }     .contact-detail-main p {
            
            font-size: 18px !important;
        }

        .changing-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
            color: white;
        }

        .contact-detail-main p {
            color: white !important;
            font-size: 18px !important;
        }
        .single-project-detail-wrap h1 {
            margin: 0 !important;
            padding: 0 0 10px 0 !important;
            line-height: 28px !important;
        }
}



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

    .tag-1 {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.0075) 0%, rgba(255, 255, 255, 0.0075) 100%);
        backdrop-filter: blur(150px);
        padding: 7px 53px;
        gap: 10px;
        border-radius: 12px;
        width: 94%;
        position: absolute;
        bottom: 18px;
        left: 0;
        display: flex
    ;
        justify-content: center;
        margin: 0px 10px;
    }

    .section-tools-main.active h1 {
        line-height: 28px !important;
    }
    body {
        overflow-x: hidden;
    }

    .single-project-detail-wrap h1 {
        margin: 0 !important;
        padding: 0 0 10px 0 !important;
        line-height: 28px !important;
    }
    .card-grid {
        display: grid
    ;
        grid-template-columns: repeat(1, 1fr);
        gap: 4px;
        width: 100%;
        /* max-width: 1168px; */
    }
    .skill-sec {
        display: flex
    ;
        margin: 66px 0;
        flex-direction: column;
        gap: 15px;
    }
    .skill-right {
        display: flex
    ;
        gap: 4rem;
        margin: 0% 0 0 0;
        padding-left: 30px;
    }
    .left-img img {
        width: 100%;
        height: 409px;
        top: 630px;
        border-radius: 6px;
    }
    .pic-detail-main {
        gap: 30px;
        display: flex
    ;
        align-items: flex-start;
        margin: 100px 0 60px 0;
        flex-direction: column;
    }
    .about-page-section1 h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 65px !important;
        font-weight: 500;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        margin: 0 0 0px 0;
    }
    .about-page-section1 span {
        font-family: SF Pro Display;
        font-size: 55px;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: #FF4D00;
        color: white;
        line-height: 68px;
    }
    section.showcase h1 {
        color: #000000;
        font-family: SF Pro Display;
        font-size: 30px;
        font-weight: 500;
        line-height: 29px;
        text-align: left;
        padding: 0 0 12px 0;
    }
    .footername {
        font-family: SF Pro Display;
        font-size: 16px;
        font-weight: 500;
        line-height: 25.06px;
        color: white;
    }
    .recent-work-sec h1 {
        font-size: 33px !important;
    }
    .heading-icon img {
        width: 66px !important;
        height: 52px !important;
    }
    .toggle-section {
        height: fit-content;
        width: 100%;
        padding: 26px 17px;
    }
    .banner-content-wrap {
        display: flex
;
        align-content: flex-end;
        align-items: flex-end;
        justify-content: space-between;
        margin: 0px 0;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .banner-left h6 {
        color: #666666;
        font-size: 18px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }

    .banner-left span {
        font-family: SF Pro Display;
        font-size: 30px !important;
        font-weight: 500;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        background: transparent !important;
        color: #000000;
    }

    .right-links-wrap h6 {
        color: #b2b2b2;
        font-size: 15px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 3s ease-out forwards;
    }
    .right-links-wrap a {
        color: black;
        font-size: 13px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
    }
    .banner-left {
        /* top: 26%; */
        /* left: 7%; */
        margin: 7rem 0 0 0;
        width: 100%;
    }.experiancewrap {
        display: flex
    ;
        gap: 11px;
        justify-content: flex-start;
        padding-right: 100px;
        /* position: absolute; */
        /* bottom: 10%; */
        /* right: 5%; */
        margin: 25px 0;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out forwards;
        flex-direction: column;
    }

    .exp-1 p {
        padding: o;
        margin: 0;
        font-size: 15px;
    }
    .exp-2 p {
        padding: o;
        margin: 0;
        font-size: 15px
    }
    .navbar-nav {
        background: transparent;
        /* box-shadow: 0px 0px 4px 1px #c5c5c5; */
        border-radius: 5px;
        padding: 10px;
        margin-top: 5px;
    }
    .exp-1 {
        width: 227px;}

        .about-section {
            display: flex
        ;
            justify-content: space-between;
            margin: 160px 0;
            flex-direction: column;
        }

        .section-3-domains-wrap {
            display: flex
        ;
            justify-content: space-between;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            flex-direction: column;
        }

        .domain-wrap {
            width: 100%;
        }

        .right-domains {
            display: flex
        ;
            width: 100%;
            gap: 25px;
            margin-top: 46px;
            /* justify-content: flex-end; */
            flex-wrap: wrap;
        }


        .section-tools-main h1 {
            font-size: 24px !important;
        }


        img.xd-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 29% !important;
            left: 14% !important;
        }

        img.vs-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 31% !important;
            left: 49% !important;
        }

        img.ps-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 20% !important;
            right: 3% !important;
            left: inherit !important;
        }

        img.figma-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 16% !important;
            left: 32% !important;
        }

        img.sketch-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 60% !important;
            right: 7% !important;
            left: inherit !important;
        }

        img.asana-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 59% !important;
            left: 2% !important;
        }

        img.microsoft-icon {
            width: 60px !important;
            height: 60px !important;
            position: absolute !important;
            top: inherit !important;
            right: 27% !important;
            bottom: 30% !important;
            left: inherit !important;
        }

        img.ai-icon {
            width: 50px !important;
            height: 50px !important;
            position: absolute !important;
            top: 65% !important;
            left: 8% !important;
        }

        .expertise-heading h2 {
            font-family: SF Pro Display;
            font-size: 23px;
            font-weight: 500;
            text-align: left;
            color: white;
            padding: 0px 0 0px;
        }

      
        .three-column-wrap{
            display: flex !important
        ;
            justify-content: space-between !important;
            gap: 32px !important;
            flex-direction: column !important;
            
        }
        .column-single {
            width: 100% !important;
            height: 450px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise1.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single2 {
            width: 100% !important;
            height: 490px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise3.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .column-single3 {
            width: 100% !important;
            height: 458px;
            border-radius: 19px;
            border: 1px solid #232323;
            box-shadow: 0px 2px 4px 0px #FFFFFF0D;
            background: url(/images/expertise2.jpeg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }

        .toggle-table-main {
            width: 100%;
            border-radius: 7px 0px 0px 0px;
            display: flex
        ;
            background: #121416;
            border-radius: 5px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
            opacity: 0;
            flex-direction: column;
        }

        .toggle-table-main.active {
            max-height: 384px;
            opacity: 1;
        }

        .toggle-table-main.active {
            max-height: max-content;
            opacity: 1;
        }

        .recent-work-sec h1 {
            font-family: SF Pro Display;
            font-size: 40px !important;
            line-height: 42px !important;
        }

        .recent-work-sec {
            padding: 51px 0 33px 0px;
        }
        .contact-text h1 {
            font-size: 37px !important;
        }.contact-text p {
            font-size: 24px !important;
        }
        .contact-content-main {
            display: flex
    ;
            gap: 2rem;
            flex-direction: column;
        }

        .contact-detail-main h1 {
            font-size: 20px !important;
            padding: 0 !important;
        }
        .contact-detail-main h2 {
            color: white !important;
            font-size: 18px;
        }     .contact-detail-main p {
            
            font-size: 18px !important;
        }

        .changing-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
            color: white;
        }

        .contact-detail-main p {
            color: white !important;
            font-size: 18px !important;
        }
}