@media (min-width: 992px) {
    .menu-toggle-btn {
        display: none;
    }

    .sidebar-menu-wrapper {
        display: block !important;
    }

    .mobile-title-show{
        display: none;
    }

    .caption-info.desktop-caption,
    .desktop-footer-text{
        display: inline-flex;
    }

    .contact-footer-caption-design{
        display: none;
    }

    .show-only-project-title .project-name,
    .show-only-project-title .sidebar-menu a,
    .show-only-project-title .next-project-title,
    .show-only-project-title .footer-name,
    .show-only-project-title .arch-text{
        color: #fff;
    }

    .show-only-project-title .page-nav-arrow svg{
        stroke: #fff;
    }

    .show-only-project-title .sidebar-menu a:before{
        background-color: #fff;
    }
}

@media (max-width: 1800px){
    .inner-page-content{
        max-width: calc(100% - 60px);
    }

    .sidebar-navigation-wrapper{
        padding: 45px 0px 10px;
        max-width: 156px;
        right: 20px;
    }

    .banner-sidebar{
        max-width: 156px;
    }

    .sidebar-min-width{
        min-width: 116px;
    }

    .page-nav-arrow {
        width: 44px;
        height: 18px;
    }

    .single-work .page-nav-arrow{
        height: 44px;
        width: 18px;
    }
    
    .footer-name {
        font-size: 18px;
        line-height: 24px;
    }

    .about-welcome-content-wrapper{
        column-gap: 64px;
    }

    .welcome-content{
        font-size: 27px;
        line-height: 32px;
        max-width: 440px;
    }

    .approach-content-wrap .welcome-content{
        max-width: 380px;
    }

    .about-welcome-image{
        max-width: calc(100% - 973px);
    }

    .cmn-section-title{
        font-size: 26px;
        margin: 0 0 30px 0;
    }

    .two-column-section {
        column-gap: 100px;
    }

    .cmn-section-spacing{
        height: calc(100vh - 164px);
        margin: auto 0 auto 94px;
    }

    .cmn-alt-sections-spacing{
        height: calc(100vh - 124px);
        margin-bottom: 47px;
    }

    .cmn-alt-sections-spacing .caption-info {
        bottom: -25px;
    }

    .about-page-spacing{
        max-width: 825px;
        margin: auto 0 auto 84px;
    }

    .two-column-section .common-two-column-image {
        width: calc(100% - 820px);
    }

    .two-column-section .common-web-content{
        column-gap: 30px;
    }

    .cmn-lft-content{
        row-gap: 15px;
    }

    .vision-main-image {
        max-width: 782px;
    }

    .team-member-order p:not(:last-child) {
        margin-bottom: 15px;
    }

    .architecture-image {
        width: 274px;
        height: 274px;
    }

    .multiple-column-image-wrap{
        column-gap: 120px;
    }

    .multi-column-content{
        column-gap: 25px;
    }

    .cmn-rgt-content{
        row-gap: 15px;
    }

    .multiple-column-content .team-description-wrap {
        max-width: 836px;
    }

    .multiple-column-content .team-content-section{
        column-gap: 100px;
    }

    .single-column-content{
        column-gap: 100px;
    }
    
    .single-column-content .section-main-image{
        width: calc(100% - 484px);
    }

    .cmn-bg-full-image-wrap {
        width: calc(100% + 156px);
    }

    .full-bleed-multi-img{
        column-gap: 52px;
    }

    .full-bleed-multi-img .bleed-first-img {
        max-width: 388px;
    }

    .full-bleed-multi-img .bleed-sec-img {
        max-width: 458px;
    }

    .work-page-listing-wrap {
        margin: 45px 0 0px 84px;
        max-width: 1174px;
    }

    .work-listing-wrapper{
        column-gap: 102px;
        row-gap: 38px;
    }

    .work-item {
        row-gap: 18px;
    }

    .work-item img {
        width: 322px;
        height: 303px;
    }

    .project-details-wrapper {
        padding: 84px 0 30px 84px;
        max-width: 350px;
    }

    .project-image-details{
        width: calc(100% - 656px);
    }

    .scroll-down-arrow {
        width: 54px;
        height: 54px;
    }

    .scroll-down-arrow .arrow-icon{
        width: 42px;
        height: 16px;
        display: inline-flex;
    }

    .footer-designby-text{
        right: 177px;
        bottom: -24px;
    }
}

@media (max-width: 1600px){
    .about-welcome-content-wrapper {
        column-gap: 52px;
    }

    .cmn-section-spacing {
        height: calc(100vh - 124px);
        margin: auto 0 auto 68px;
    }

    .cmn-alt-sections-spacing{
        height: calc(100vh - 108px);
        margin-bottom: 45px;
    }

    .about-page-spacing{
        margin: auto 0 auto 58px;
        max-width: 785px;
    }

    .welcome-content {
        font-size: 24px;
        line-height: 29px;
        max-width: 420px;
    }

    .about-welcome-image {
        max-width: calc(100% - 895px);
    }

    .caption-info{
        bottom: -38px;
    }

    .sidebar-menu a{
        font-size: 16px;
        line-height: 26px;
    }

    .sidebar-section-navigation{
        gap: 20px;
    }

    .cmn-section-title {
        font-size: 24px;
        margin: 0 0 25px 0;
    }

    .two-column-section {
        column-gap: 60px;
    }

    .sidebar-navigation-wrapper{
        max-width: 144px;
    }

    .banner-sidebar{
        max-width: 144px;
    }

    .sidebar-section-navigation{
        min-width: 88px;
    }

    .two-column-section .cmn-section-spacing{
        max-width: 534px;
    }

    .two-column-section .common-web-content {
        column-gap: 20px;
    }

    .two-column-section .common-two-column-image {
        width: calc(100% - 752px);
    }

    .two-column-section .common-two-column-image {
        width: calc(100% - 662px);
    }

    .single-column-content {
        column-gap: 75px;
    }

    .single-column-content .section-main-image {
        width: calc(100% - 433px);
    }

    .full-bleed-right{
        max-width: 660px;
    }

    .architecture-image {
        width: 224px;
        height: 224px;
    }

    .multi-column-content {
        column-gap: 20px;
    }

    .multiple-column-content .team-content-section {
        column-gap: 60px;
    }

    .multiple-column-content .team-description-wrap {
        max-width: 782px;
    }

    .center-bleed-image{
        max-width: 640px;
    }

    .cmn-bg-full-image-wrap {
        width: calc(100% + 144px);
    }

    .approach-content-wrap .welcome-content {
        max-width: 340px;
    }

    .full-bleed-multi-img {
        column-gap: 42px;
    }

    .full-bleed-multi-img .bleed-first-img {
        max-width: 323px;
    }

    .full-bleed-multi-img .bleed-sec-img {
        max-width: 393px;
    }

    .work-page-listing-wrap {
        margin: 45px 0 0px 58px;
        max-width: 1054px;
    }

    .work-listing-wrapper {
        column-gap: 82px;
        row-gap: 32px;
    }

    .work-item img {
        width: 296px;
        height: 270px;
    }

    .project-title {
        font-size: 24px;
        line-height: 20px;
    }

    .project-location {
        font-size: 18px;
        line-height: 20px;
    }

    .project-details-wrapper {
        padding: 58px 0 30px 58px;
        max-width: 320px;
    }

    .project-image-details {
        width: calc(100% - 594px);
    }

    .project-name {
        font-size: 26px;
        line-height: 20px;
    }

    .project-type{
        font-size: 13px;
        line-height: 15px;
    }

    .project-spec-list:not(:last-child) {
        margin-bottom: 16px;
    }

    .spec-value{
        font-size: 18px;
        line-height: 20px;
    }

    .footer-designby-text{
        right: 126px;
    }
}

@media (max-width: 1399px){

    .main-content{
        min-height: auto;
    }

    .common-web-content,
    .cmn-loc-title{
        font-size: 15px;
        line-height: 22px;
    }

    .about-welcome-content-wrapper {
        column-gap: 25px;
    }

    .cmn-section-spacing {
        height: calc(100vh - 100px);
        margin: auto 0 auto 48px;
    }

    .cmn-alt-sections-spacing{
        height: calc(100vh - 88px);
        margin-bottom: 35px;
    }
    
    .about-page-spacing {
        max-width: 620px;
        margin: auto 0 auto 38px;
    }

    .welcome-content {
        font-size: 22px;
        line-height: 27px;
        max-width: 380px;
    }

    .about-welcome-image {
        max-width: calc(100% - 683px);
    }

    .caption-info {
        bottom: -28px;
    }

    .sidebar-navigation-wrapper{
        padding: 35px 0px 10px;
    }

    .footer-name {
        font-size: 16px;
        line-height: 22px;
    }

    .sidebar-section-navigation {
        gap: 16px;
    }

    .page-nav-arrow {
        width: 40px;
        height: 16px;
    }

    .single-work .page-nav-arrow{
        height: 40px;
        width: 16px;
    }

    .two-column-section {
        column-gap: 45px;
    }

    .two-column-section .common-two-column-image {
        width: calc(100% - 577px);
    }

    .cmn-section-title {
        font-size: 22px;
        margin: 0 0 20px 0;
    }

    .two-column-section .common-web-content {
        column-gap: 15px;
    }

    .vision-content-section{
        row-gap: 15px
    }

    .two-column-section .cmn-section-spacing {
        max-width: 484px;
    }

    .cmn-lft-content,
    .single-column-content .cmn-section-spacing {
        max-width: 230px;
    }

    .single-column-content {
        column-gap: 55px;
    }

    .single-column-content .section-main-image {
        width: calc(100% - 333px);
    }

    .full-bleed-right{
        max-width: 540px;
    }

    .full-bleed-right img{
        object-fit: cover;
    }

    .center-bleed-image {
        max-width: 600px;
    }

    .multi-column-content {
        column-gap: 15px;
    }

    .get-in-touch-info{
        row-gap: 15px;
    }

    .contact-links {
        margin-top: 15px;
    }

    .architecture-image {
        width: 204px;
        height: 204px;
    }

    .multiple-column-content .team-content-section {
        column-gap: 45px;
    }

    .multiple-column-content .team-description-wrap {
        max-width: 654px;
    }

    .cmn-separator {
        margin: 15px auto 5px;
    }

    .full-bleed-multi-img {
        column-gap: 36px;
    }

    .full-bleed-multi-img .bleed-first-img {
        max-width: 278px;
    }

    .full-bleed-multi-img .bleed-sec-img {
        max-width: 348px;
    }

    .work-page-listing-wrap {
        margin: 35px 0 0px 38px;
        max-width: 952px;
    }

    .work-item {
        row-gap: 16px;
    }

    .work-listing-wrapper {
        column-gap: 62px;
        row-gap: 24px;
    }

    .work-item img {
        width: 276px;
        height: 252px;
    }

    .project-title {
        font-size: 22px;
        line-height: 18px;
    }

    .project-details-wrapper {
        padding: 38px 0 25px 38px;
        max-width: 300px;
    }

    .project-details-wrapper-section-wrap{
        row-gap: 30px;
    }

    .project-image-details {
        width: calc(100% - 544px);
    }

    .project-details-head{
        padding: 0 2px 8px;
        margin-bottom: 18px;
    }

    .project-name {
        font-size: 24px;
        line-height: 18px;
    }

    .project-spec-list:not(:last-child) {
        margin-bottom: 14px;
    }

    .alt-work-full-img.left-ranged-image{
        max-width: 470px;
    }
   
    .scroll-down-arrow {
        width: 50px;
        height: 50px;
    }

    .scroll-down-arrow .arrow-icon{
        width: 36px;
        height: 14px;
        display: inline-flex;
    }

    .footer-designby-text {
        right: 105px;
    }
}

@media (max-width: 1199px){
    .inner-page-content {
        max-width: calc(100% - 30px);
    }

    .sidebar-navigation-wrapper {
        max-width: 125px;
        padding: 30px 0px 6px;
        right: 10px;
    }

    .banner-sidebar{
        max-width: 125px;
    }

    .sidebar-menu{
        row-gap: 8px;
    }

    .sidebar-menu a {
        font-size: 15px;
        line-height: 24px;
    }

    .two-column-section {
        column-gap: 30px;
    }

    .cmn-section-spacing {
        height: calc(100vh - 80px);
        margin: auto 0 auto 28px;
    }

    .cmn-alt-sections-spacing{
        height: calc(100vh - 68px);
        margin-bottom: 40px;
    }

    .about-page-spacing{
        max-width: 540px;
        margin: auto 0 auto 18px;
    }

    .about-banner-img{
        margin: auto 0;
    }

    .caption-info {
        bottom: -22px;
        font-size: 12px;
        line-height: 21px;
    }

    .about-welcome-image {
        max-width: calc(100% - 593px);
    }

    .two-column-section .cmn-section-spacing {
        max-width: 424px;
    }

    .two-column-section .common-two-column-image {
        width: calc(100% - 480px);
    }

    .single-column-content {
        column-gap: 40px;
    }

    .single-column-content .section-main-image {
        width: calc(100% - 298px);
    }

    .full-bleed-right {
        max-width: 460px;
    }

    .full-bleed-left{
        max-width: 460px;
    }

    .team-member-order p:not(:last-child) {
        margin-bottom: 10px;
    }

    .multiple-column-content .team-content-section {
        column-gap: 25px;
    }

    .architecture-image {
        width: 178px;
        height: 178px;
    }

    .multiple-column-content .team-description-wrap {
        max-width: 614px;
    }

    .center-bleed-image {
        max-width: 520px;
    }

    .sidebar-min-width {
        min-width: 104px;
    }

    .sidebar-section-navigation {
        min-width: 83px;
    }

    .cmn-bg-full-image-wrap {
        width: calc(100% + 125px);
    }

    .full-bleed-multi-img {
        column-gap: 22px;
    }

    .full-bleed-multi-img .bleed-first-img {
        max-width: 223px;
    }

    .full-bleed-multi-img .bleed-sec-img {
        max-width: 293px;
    }

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

    .work-page-listing-wrap{
        max-width: 614px;
    }

    .project-details-wrapper {
        padding: 28px 0 20px 28px;
        max-width: 280px;
    }

    .project-details-wrapper-section-wrap{
        row-gap: 25px;
    }

    .project-name {
        font-size: 20px;
        line-height: 16px;
    }

    .project-type {
        font-size: 12px;
        line-height: 14px;
    }

    .project-details-head {
        margin-bottom: 16px;
        row-gap: 6px;
    }

    .project-team-description-detail{
        row-gap: 20px;
    }

    .project-image-details {
        width: calc(100% - 475px);
    }

    .alt-work-full-img.left-ranged-image {
        max-width: 400px;
    }

    .footer-designby-text {
        right: 74px;
    }

    .scroll-instruction-text{
        font-size: 18px;
        line-height: 20px;
    }
}

@media (max-width: 991px){

    .mobile-title-show{
        display: flex;
    }

    .desktop-title-show{
        display: none;
    }

    .language-switcher{
        margin-top: 0;
    }

    .single-work{
        overflow: hidden;
    }

    .inner-body-pages .sidebar-navigation-wrapper,
    .single-work .sidebar-navigation-wrapper{
        max-width: 100%;
        position: fixed;
        height: auto;
        right: auto;
        top: 0;
        left: auto;
        bottom: auto;
        padding: 0;
        transition: all 0.5s ease-in-out;
    }

    .sidebar-navigation-wrapper.sticky-menu,
    .sidebar-navigation-wrapper.sticky-show{
        top: -69px;
    }

    .single-work .sidebar-navigation-wrapper{
        z-index: 99;
    }
    
    .inner-body-pages .sidebar-min-width,
    .single-work .sidebar-min-width{
        min-width: auto;
        width: 100%;
    }

    .mobile-inner-menu{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 25px 30px 0;
        color: #fff;
    }

    .mobile-inner-menu .sidebar-menu li{
        align-items: center;
    }

    .mobile-inner-menu .sidebar-menu a{
        text-align: center;
        color: #fff;
    }

    .work-page-wrap .mobile-inner-menu .sidebar-menu a,
    .single-work .mobile-inner-menu .sidebar-menu a{
        color: #1E252B;
    }

    .mobile-inner-menu .sidebar-menu a:before{
        background-color: #fff;
    }

    .work-page-wrap .mobile-inner-menu .sidebar-menu a:before,
    .single-work .mobile-inner-menu .sidebar-menu a:before{
        background-color: #1E252B;
    }

    .inner-body-pages .sidebar-menu-wrapper,
    .single-work .sidebar-menu-wrapper{
        transition: all 0.3s ease-in-out;
        overflow: hidden;
    }

    .inner-body-pages .sidebar-menu-wrapper,
    .single-work .sidebar-menu-wrapper{
        max-height: 0;
        opacity: 0;
        pointer-events: none;
    }

    .inner-body-pages .sidebar-menu-wrapper.menu-visible,
    .single-work .sidebar-menu-wrapper.menu-visible{
        max-height: 1000px; /* Should be large enough to accommodate content */
        opacity: 1;
        pointer-events: auto;
        justify-content: center;
    }

    .toggle-content {
        text-align: center;
        margin-top: 2px;
    }

    .single-work .toggle-content{
        transition: all 0.3s ease-in-out;
    }

    .sidebar-page-title{
        display: flex; /* instead of inline-flex */
        justify-content: center;
        font-size: 22px;
        line-height: 30px;
        font-family: 'Greycliff CF';
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        text-align: center;
        max-height: 30px;
        opacity: 1;
        visibility: visible;
        overflow: hidden;  /* IMPORTANT: hide content when max-height shrinks */
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }

    .sidebar-page-title span{
        position: relative;
        display: inline-flex;
    }

    .sidebar-page-title span:before{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0px;
        width: 100%;
        height: 2px;
        background-color: #fff;
    }

    /* Page title fades out and shifts up */
    .inner-body-pages .sidebar-page-title.title-hidden,
    .single-work .sidebar-page-title.title-hidden{
        max-height: 0;
        opacity: 0;
        padding: 0;
        margin: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .desktop-icon{
        display: none;
    }

    .mobile-icon{
        display: inline-flex;
    }

    .toggle-menu-icon{
        min-width: 36px;
        margin-top: 6px;
    }

    .single-work .toggle-menu-icon{
        min-width: 53px;
        transition: all 0.3s ease-in-out;
    }    

    .toggle-menu-icon svg{
        width: 32px;
        stroke: #fff;
    }

    .sidebar-section-navigation{
        position: relative;
        top: auto;
        transform: none;
        min-width: 36px;
        gap: 16px;
    }

    .single-work .sidebar-section-navigation {
        column-gap: 23px;
        margin: 3px 0 0 0;
        transition: all 0.3s ease-in-out;
    }

    .inner-body-pages .page-nav-arrow svg{
        stroke: #fff;
    }

    .page-nav-arrow {
        width: 36px;
        height: 14px;
    }
    
    .single-work .page-nav-arrow{
        height: 36px;
        width: 14px;
    }

    .sidebar-menu a{
        font-size: 22px;
        line-height: 30px;
    }

    .banner-sidebar{
        left: 50%;
        transform: translateX(-50%);
        max-width: 100%;
    }

    .banner-sidebar .sidebar-navigation-wrapper{
        display: flex;
        max-width: 100%;
        padding: 24px 0 20px;
        height: 100dvh;
    }

    .banner-sidebar .sidebar-navigation-wrapper .sidebar-min-width{
        min-width: 100%;
        align-items: center;
    }

    .banner-sidebar .sidebar-menu-wrapper{
        justify-content: center;
        text-align: center;
    }

    .banner-sidebar .sidebar-menu li{
        align-items: center;
    }

    .banner-sidebar .sidebar-menu a{
        text-align: center;
    }

    .inner-page-content{
        max-width: 100%;
        margin: 0;
    }

    .home-page-banner{
        height: 100dvh;
        overflow: hidden;
    }

    .banner-sidebar{
        height: 100dvh;
    }

    .main-content{
        margin: 0;
    }

    .about-welcome-content-wrapper {
        position: relative;
        gap: 0;
    }

    .about-page-spacing,
    .approach-page-spacing{
        margin: auto;
        max-width: calc(100% - 110px);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        justify-content: center;
        row-gap: 15px;
        width: 100%;
    }

    .welcome-content,
    .approach-content-wrap .welcome-content{
        color: #fff;
        font-family: 'Greycliff CF Extra';
        font-size: 23px;
        line-height: 28px;
        max-width: 100%;
    }
    
    .about-welcome-image{
        max-width: 100%;
        width: 100%;
    }

    .about-banner-img{
        display: none;
    }

    .about-welcome-image img{   
        width: 100%;
    }

    .caption-info{
        position: relative;
        left: auto;
        bottom: 0;
        margin-top: 14px;
    }

    .cmn-alt-sections-spacing .caption-info{
        bottom: 0;
    }

    .about-page-spacing .caption-info{
        left: auto;
        color: #fff;
    }

    .common-section-wrap{
        height: 100vh;
        flex-direction: column;
        gap: 0;
    }

    .two-column-section .common-two-column-image{
        width: 100%;
    }

    .vision-main-image{
        max-width: 100%;
    }

    .vision-main-image img{
        width: 100%;
    }

    .cmn-alt-sections-spacing{
        height: 100%;
        margin-bottom: 0px;
    }

    .cmn-section-spacing{
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .cmn-lft-content,
    .two-column-section .common-web-content{
        row-gap: 25px;
    }

    .two-column-section .common-web-content{
        grid-template-columns: repeat(1, 1fr);
    }

    .two-column-section .cmn-section-spacing{
        max-width: 100%;
    }

    .cmn-section-spacing,
    .two-column-section .cmn-section-spacing,
    .single-column-content .cmn-section-spacing{
        max-width: calc(100% - 94px);
        margin: 32px auto 0px;
    }

    .about-welcome-content-wrapper .cmn-section-spacing,
    .about-welcome-content-wrapper .about-page-spacing .caption-info,
    .approach-main-screen .cmn-section-spacing{
        margin: 0;
    }

    .approach-main-screen .cmn-section-spacing{
        max-width: calc(100% - 114px);
    }

    .cmn-lft-content, 
    .cmn-rgt-content{
        max-width: 100%;
    }

    .common-single-content-img{
        display: inline-flex;
        justify-content: center;
    }

    .column-content-scroll-wrap{
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 25px;
    }

    .mobile-footer-wrapper{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        margin-top: 44px;
        padding-bottom: 20px;
    }

    .project-team-description-detail .mobile-footer-wrapper{
        margin-top: 20px;
    }

    .section-main-image{
        height: 484px;
        min-height: 484px;
    }

    .single-column-content .section-main-image{
        width: 100%;
    }

    .footer-name {
        font-size: 23px;
        line-height: 28px;
    }

    .cmn-section-title{
        font-size: 25px;
        margin: 0 0 13px 0;
    }

    .multiple-column-content .cmn-section-title{
        margin: 0 0 38px 0;
    }

    .common-web-content, .cmn-loc-title {
        font-size: 18px;
        line-height: 24px;
    }

    .full-bleed-right,
    .full-bleed-left,
    .center-bleed-image,
    .contact-image-wrap{
        max-width: 100%;
        justify-content: center;
    }

    .full-bleed-left img,
    .full-bleed-right img,
    .center-bleed-image img,
    .contact-image-wrap img{
        width: 100%;
    }

    .multiple-column-content .team-content-section{
        justify-content: center;
    }

    .multiple-column-content .section-main-image{
        order: 1;
        height: 320px;
        width: 320px;
        min-height: auto;
        margin-top: 100px;
        margin-bottom: 60px;
    }

    .multiple-column-content .section-main-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .multiple-column-content .cmn-sec-title{
        order: 2;
    }

    .multiple-column-content .team-description-wrap{
        order: 3;
        max-width: 100%;
    }

    .multi-column-content{
        display: flex;
        flex-direction: column;
        row-gap: 25px;
    }

    .common-web-content .mobile-footer-wrapper a{
        text-decoration: none;
    }

    .home-page-banner .banner-img{
        object-position: right -200px top 0;
    }

    .main-banner-slider-content{
        max-width: 300px;
        width: 100%;
    }

    .cmn-bg-full-image-wrap{
        width: 100%;
    }

    .cmn-bg-full-image-wrap .approach-main-image{
        object-position: right -220px top 0;
    }

    .approach-complexity-section .cmn-bg-full-image-wrap{
        height: 484px;
        min-height: 484px;
        position: relative;
    }

    .approach-complexity-section .approach-main-image{
        object-position: center;
        width: 100%;
    }

    .cmn-bg-full-image-wrap{
        background-position: right -220px center;
    }

    .white-text-screen .approach-complexity-section,
    .white-text-screen .approach-complexity-section .footer-name, 
    .white-text-screen .approach-complexity-section .arch-text{
        color: #1E252B;
    }
    
    .white-text-screen .approach-complexity-section .cmn-section-title::before{
        background-color: #1E252B;
    }

    .full-bleed-multi-img {
        column-gap: 24px;
        overflow: hidden;
    }

    .full-bleed-multi-img .bleed-first-img {
        max-width: calc(100% - 67%);
        width: 100%;
    }

    .full-bleed-multi-img .bleed-sec-img{
        max-width: calc(100% - 33%);
        width: 100%;
    }

    .team-content-wrap .center-bleed-image{
        padding-bottom: 16px;
    }

    .center-bleed-image{
        padding-top: 130px;
        padding-bottom: 60px;
    }

    .center-bleed-image img{
        object-fit: cover;
    }

    .work-page-listing-wrap{
        max-width: calc(100% - 76px);
        margin: 140px auto 20px;
    }

    .work-listing-wrapper{
        column-gap: 38px;
        row-gap: 12px;
        align-items: flex-start;
    }

    .work-item {
        row-gap: 10px;
    }

    .work-item img {
        width: 100%;
        height: 100%;
    }

    .project-title {
        font-size: 18px;
        line-height: 22px;
    }

    .project-location {
        font-size: 12px;
        line-height: 14px;
    }

    .page-template-work .toggle-menu-icon svg,
    body.page-template-work .page-nav-arrow svg{
        stroke: #1E252B;
    }

    .page-template-work .mobile-inner-menu,
    .page-template-work .mobile-inner-menu .sidebar-menu a{
        color: #1E252B;
    }

    .page-template-work .sidebar-page-title span:before,
    .page-template-work .mobile-inner-menu .sidebar-menu a:before{
        background-color: #1E252B;
    }

    .project-image-details{
        width: 100%;
    }

    .work-sec-full,
    .alt-work-full-img{
        height: 357px;
    }

    .project-image-details{
        display: none;
    }

    .work-swiper-slider{
        display: inline-flex;        
        /* padding-top: 66px; */
        margin-top: 90px;
        position: relative;
        width: 100%;
        height: 357px;
    }

    .swiper.vertical-slider {
        height: 357px;
        width: 100%;
    }

    .swiper-slide {
        height: 357px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .work-sec-full.swiper-slide img{
        max-height: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .center-image.swiper-slide{
        justify-content: center;
        display: flex;
    }

    .center-image.swiper-slide img{
        height: 100%;
        object-fit: contain;
    }

    .left-ranged-image img {
        object-fit: contain;
    }

    /* Positioning navigation arrows */
    .swiper-button-wrapper .swiper-button-next,
    .swiper-button-wrapper .swiper-button-prev {
        width: 40px;
        height: 40px;
        z-index: 10;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        margin: 0;
        transition: all 0.3s ease-in-out;
    }

    .swiper-button-wrapper .swiper-button-prev {
        margin-left: -25px;
    }

    .swiper-button-wrapper .swiper-button-next {
        margin-left: 25px;
    }

    .swiper-button-wrapper .swiper-button-next.swiper-button-disabled, 
    .swiper-button-wrapper .swiper-button-prev.swiper-button-disabled{
        opacity: 0;
        visibility: hidden;
    }

    .swiper-button-wrapper .swiper-button-prev:after,
    .swiper-button-wrapper .swiper-button-next:after{
        display: none;
    }

    .project-details-wrapper{
        max-width: calc(100% - 76px);
        width: 100%;
        padding: 0;
        flex-shrink: unset;
        position: relative;
        margin: 32px auto 0px;
        height: auto;
    }

    .project-details-wrapper::-webkit-scrollbar {
        display: none;
        scrollbar-width: none;
    }

    .project-details-wrapper-section-wrap{
        row-gap: 0px;
        height: 100%;
    }

    .project-team-description-detail{
        height: auto;
    }

    /* .single-work .sidebar-section-navigation {
        transform: translateY(-50%) rotate(-90deg);
        row-gap: 25px;
        position: relative;
        top: 26px;
    } */

    .alt-work-full-img.left-ranged-image{
        max-width: max-content;
        margin: 0 auto;
    }

    .project-specification{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        flex-wrap: wrap;
        margin-bottom: 30px;
        padding-bottom: 30px;
        position: relative;
        row-gap: 22px;
        column-gap: 10px;
        align-items: flex-start;
    }

    .project-specification:before{
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        max-width: calc(100% - 240px);
        background-color: #1E252C;
        width: 100%;
        height: 2px;
        transition: all 0.3s ease-in-out;
    }

    .project-details-wrapper.first-swiper-slide{
        pointer-events: none;
    }

    /* .first-swiper-slide .project-specification:before{
        display: none;
    } */

    .project-details-head{
        padding: 0 0px 0px;
        margin-bottom: 0px;
        border-bottom: 0px;
        order: 1;
        white-space: nowrap;
        row-gap: 0px;
        min-width: 140px;
    }

    .work-page-wrap{
        height: 100dvh;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        /* flex-wrap: wrap; */
    }

    .inner-body-pages.work-page-wrap{
        height: auto;
    }

    .work-page-wrap .mobile-inner-menu{
        color: #1E252B;
    }

    .inner-body-pages.work-page-wrap .mobile-inner-menu{
        color: #fff;
    }

    .work-page-wrap .toggle-menu-icon svg,
    .work-page-wrap.inner-body-pages .page-nav-arrow svg{
        stroke: #1E252B;
    }

    .inner-body-pages.work-page-wrap .toggle-menu-icon svg,
    .inner-body-pages.work-page-wrap.inner-body-pages .page-nav-arrow svg{
        stroke: #fff;
    }

    .work-page-wrap .sidebar-page-title span:before{
        background-color: #1E252B;
    }

    .inner-body-pages.work-page-wrap .sidebar-page-title span:before{
        background-color: #fff;
    }

    .project-spec-list:not(:last-child){
        margin-bottom: 0px;
    }

    .project-spec-list:nth-child(2){
        order: 4;
    }
    
    .project-spec-list:nth-child(3){
        order: 2;
    }

    .project-spec-list:nth-child(4){
        order: 5;
    }

    .project-spec-list:nth-child(5){
        order: 6;
    }

    .project-spec-list:nth-child(6){
        order: 3;
    }

    .project-name {
        font-size: 16px;
        line-height: 16px;
    }

    .project-type {
        font-size: 10px;
        line-height: 14px;
    }

    .spec-label {
        font-size: 10px;
        line-height: 16px;
    }

    .spec-value {
        font-size: 16px;
        line-height: 16px;
    }

    .project-desc {
        font-size: 16px;
        line-height: 22px;
        height: auto;
        overflow-y: unset;
    }

    .project-team-handle h6 {
        font-size: 12px;
        line-height: 12px;
        margin-bottom: 4px;
    }

    .team-member-list {
        font-size: 10px;
        line-height: 14px;
    }

    .show-only-project-title .project-specification:before{
        opacity: 0;
        visibility: hidden;
    }

    .scroll-down-arrow {
        width: 40px;
        height: 40px;
    }

    .language-switcher a:first-child{
        margin-right: 30px;
    }

    .work-details-page.show-only-project-title .project-details-wrapper{
        max-height: max-content !important;
        overflow-y: hidden !important;
        pointer-events: none;
    }

    .language-switcher a:first-child:before{
        right: -16.5px;
    }

    .about-welcome-content-wrapper .about-page-spacing .caption-info,
    .approach-main-screen .approach-page-spacing .caption-info{
        position: absolute;
        bottom: 34px;
    }

    .disabled.nav-up-arrow svg,
    .disabled.nav-down-arrow svg{
        stroke: #d2d3d5;
    }

    .next-project-title{
        display: none;
    }

    .project-team-description-detail {
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .caption-info.desktop-caption,
    .desktop-footer-text{
        display: none;
    }

    .contact-footer-caption-design{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 14px;
        width: 100%;
    }

    .cmn-alt-sections-spacing .contact-footer-caption-design .caption-info{
        margin: 0;
    }

    .contact-footer-caption-design .footer-designby-text.mobile-footer-text{
        position: relative;
        right: 0;
        bottom: 0;
    }

    .footer-designby-text{
        font-size: 12px;
        line-height: 21px;
    }
}

@media (max-width: 575px){
    .foot-arch-img{
        justify-content: space-between;
    }

    .common-web-content .foot-arch-img a{
        min-width: 142px;
    }

    .scroll-instruction-text{
        font-size: 16px;
        line-height: 18px;
    }

    .spinner {
        width: 40px;
        height: 40px;
    }

    .loader-text{
        font-size: 16px;
        line-height: 21px;
    }
}


@media (max-width: 400px){
    .project-details-wrapper{
        margin: 20px auto 0px;
        row-gap: 0px;
        height: auto;
    }

    .project-specification{
        margin-bottom: 16px;
        padding-bottom: 16px;
        row-gap: 14px;
    }
}

@media (max-width: 359px){
    .contact-footer-caption-design{
        flex-direction: column;
        row-gap: 10px;
        align-items: flex-start;
    }
}