@media screen and (max-width: 1370px) {
    .d-main-header {
        width: 95%;
        margin: 0 auto;
    }

    header nav ul li {
        margin: 0 0 0 10px;
    }

    .d-main-content {
        width: 95%;
    }

}


@media screen and (max-width: 1340px) {
    .d-work-together .d-work-together-info {
        position: relative;
        width: 100%;
        margin: 50px 0 30px;
        text-align: center;
    }

    .d-work-together .d-work-together-container .d-work-image {
        text-align: center;
    }

    .d-about-us-inner .d-about-white-inner .d-about-white-feature img {
        width: 100%;
    }

    .d-digital-work .d-digital-work-sub-title {
        width: 90%;
    }

    .d-technical-delivery-inner .d-section-content {
        height: 1560px;
    }

    .d-technical-delivery-inner .d-section-content-inner .d-section-white .d-section-title {
        font-size: 41px;
        line-height: 1.2em;
    }
}

@media screen and (max-width: 1190px) {
    header nav ul li a {
        font-size: 13px;
    }

    .d-technical-delivery-inner .d-section-content-inner .d-cta-list .cta-item {
        width: 40%;
        margin-bottom: 10px;
    }

    .ag-gr-1 p, .ag-gr-2 p, .ag-gr-3 p, .ag-gr-4 p {
        font-size: 17px;
    }

    .client-logo-main .client-logo-column figure {
        height: 140px;
    }
}

@media screen and (max-width: 1120px) {
    .web-base-view {
        display: none;
    }

    .tablet-size {
        display: block !important;
    }
    .d-work-together .d-work-together-container .d-work-image img {
        width: 100%;
    }
    
    .burger-toggle {
        display: none; 
    }
    
    .nav-list {
        display: flex;
        gap: 30px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-list a {
        text-decoration: none;
        color: #333333;
        font-weight: 500;
    }
    
    .burger-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 999;
    }

    .burger-line {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #FFBE00;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    
    .burger-toggle.is-active .line-1 {
        transform: translateY(9px) rotate(45deg);
    }
    
    .burger-toggle.is-active .line-2 {
        opacity: 0;
    }
    
    .burger-toggle.is-active .line-3 {
        transform: translateY(-9px) rotate(-45deg);
    }
    
    .main-navigation {
        position: absolute;
        top: 0;
        left: -25px;
        background-color: rgba(0, 0, 0, 0.7);
        box-shadow: 0px 27px 31px 5px rgba(0, 0, 0, 0.25);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 998;
        padding: 0px 0px 0px 0px;
        height: 100vh;
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
    }

    .nav-list li {
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-list a {
        display: block;
        padding: 15px 20px;
    }

    .d-main-header-inner {
        position: relative;
    }

    .menu-main-menu-container {
        background-color: #253846;
        max-width: 320px;
        width: 100%;
        padding: 20px 20px 20px 40px;
    }
    
    .main-navigation.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        width: 115vw;
    }

    .d-main-header-inner.tablet-size .d-main-left {
        display: inline-block;
        width: 70%;
    }

    .d-main-header-inner.tablet-size .d-main-right {
        display: inline-block;
        width: 29%;
        vertical-align: top;
    }

    .d-main-header-inner.tablet-size .d-main-right button.burger-toggle {
        position: absolute;
        right: 10px;
        top: 35px;
    }

    .tablet-size .main-navigation ul li {
        display: block;
        float: none;
        text-align: left;
        width: 100%;
        margin: 0;
    }

    .tablet-size .main-navigation ul li a {
        padding: 15px 0px;
        position: relative; 
        text-decoration: none; 
        color: #333333;
        font-size: 16px;
    }

    .tablet-size .main-navigation ul li a:after {
        content: ''; 
        position: absolute;
        width: 100%;
        height: 2px; 
        bottom: 0;
        left: 0;
        background-color: #FFBE00; 
        
        transform: scaleX(0); 
        transform-origin: right;
        transition: transform 0.3s ease-in-out;
    }

    .tablet-size .main-navigation ul li a:hover::after {
        transform: scaleX(1); 
    }

    .d-feature-one {
        height: 400px;
    }

    .d-feature-one-inner {
        padding: 150px 0;
    }

    .d-home-down {
        margin-top: 90px;
    }

    .d-technical-delivery-inner .d-section-content {
        height: 100%;
        padding-bottom: 60px;
    }

    .g-box {
        max-width: 40%;
    }

    .d-process-list .d-process-list-items .d-process-list-item .d-showing-on-left {
        left: -330px;
        z-index: 9;
    }

    .d-process-list .d-process-list-items .d-process-list-item .d-showing-on-right {
        right: -330px;
        z-index: 9;
    }

    .d-technical-delivery-inner .d-section-content-inner .d-section-desc {
        padding-left: 0;
        padding-right: 0;
    }

    .client-testimonial-ctnr {
        padding: 30px 40px 100px;
    }
    

}

@media screen and (max-width: 1000px) {
    .d-digital-work .d-digital-work-sub-title {
        width: 90%;
    }

    .d-feature-one-text {
        width: 90%;
        font-size: 40px;
    }

    .ag-gr-1 p, .ag-gr-2 p, .ag-gr-3 p, .ag-gr-4 p {
        font-size: 14px;
    }

    .ag-gr-1, .ag-gr-4,
    .ag-gr-2, .ag-gr-3 {
        width: 100%;
        display: block;
        left: initial;
        top: initial;
        right: initial;
        bottom: initial;

    }

    .ag-gr-1 p,
    .ag-gr-4 p {
        width: 55%;
        font-size: 16px;
        margin: 0;
    }

    .ag-gr-2,
    .ag-gr-3,
    .ag-gr-4 {
        margin-top: -10%;
    }

    .ag-gr-2 figure img,
    .ag-gr-3 figure img {
        width: 140%;
        margin-left: -20%;
        margin-top: -13%;
        margin-bottom: -13%;
        max-width: initial;
    }

    .ag-gr-2 p,
    .ag-gr-3 p {
        width: 83%;
        font-size: 16px;
        margin: 0;
    }
}

@media screen and (max-width: 945px) {
    .d-process-list .d-process-list-items .d-process-list-item .d-showing-on-left {
        left: -25vw;
    }

    .d-process-list .d-process-list-items .d-process-list-item .d-showing-on-right {
        right: -25vw;
    }

    .d-home-hero .d-home-hero-left,
    .d-home-hero .d-home-hero-right {
        display: block;
        width: 100%;
        text-align: center;
    }

    .d-home-hero .d-home-hero-left {
        margin-bottom: 30px;
        text-align: center;
    }

    .d-main-header-inner.tablet-size .d-main-left {
        display: inline-block;
        width: 69%;
    }

    .d-home-hero .d-home-hero-right img {
        width: 60%;
        margin: 0 auto;
    }

    .d-technical-delivery-inner .d-section-content-inner .d-section-item {
        width: 80%;
    }

    .lets-grid {
        padding: 15px;
    }
    .client-logo-main .client-logo-column figure{
        height: 110px;
    }
}

/**
* Mobile Safari doesn't support background-attachment: fixed, so we need to disable parallax on mobile.
* This media query targets iOS devices and applies a fallback style for the parallax section.
*/  
@supports (-webkit-touch-callout: none) {
    .parallax-item-3 {
        background-attachment: scroll !important;
        background-size: cover !important; 
    }
}

@media screen and (max-width: 768px) {
    .d-main-content {
        width: 96%;
    }

    .d-home-hero .d-home-hero-left {
        text-align: center;
        max-width: 440px;
        margin: 0 auto 30px;
    }
    
    span.d-main-hero-text {
        font-size: 41px;
    }

    .d-home-down {
        margin-top: 30px;
    }

    .d-feature-one {
        height: 400px;
    }

    .d-feature-one-inner {
        padding: 100px 0;
    }

    .d-content-navi ul li {
        margin: 10px;
    }

    .d-technical-delivery-inner .d-section-title .d-section-sub-title {
        font-size: 32px;
    }

    .d-technical-delivery-inner .d-section-title .d-section-main-title {
        font-size: 80px;
    }

    .d-technical-delivery-inner .d-section-content-inner .d-section-item {
        max-width: 500px;
        width: initial;
    }

    .d-technical-delivery-inner .d-section-content-inner .d-section-item .d-section-item-inner {
        margin: 10% 0;
        max-width: initial;
    }

    .d-technical-delivery-inner .d-section-content-inner .d-section-white .d-section-title {
        font-size: 28px;
    }

    .d-technical-delivery-inner .d-section-content-inner .d-section-desc {
        padding: 30px 10px;
        min-height: initial;
    }

    .d-technical-delivery-inner .d-section-content-inner .d-section-desc p {
        font-size: 16px;
    }

    .d-technical-delivery-inner .d-section-content-inner .d-cta-list .cta-item {
        width: 26%;
    }

    .d-about-us-inner .d-about-header {
        padding: 0;
        font-size: 40px;
    }

    .d-about-us .d-about-cta-base-inner .d-about-cta-item {
        margin-bottom: 30px;
    }

    .d-about-us .d-about-cta-base-inner .d-about-cta-item .d-about-cta-item-inner .d-about-cta-item-file {
        top: -125px;
    }

    .d-about-us .d-about-cta-base-inner .d-about-cta-item.d-about-one .d-about-cta-item-inner .d-about-cta-item-file {
        right: 31px;
    }

    .d-about-us-inner .d-about-white-inner .d-about-white-desc {
        width: 95%;
    }

    .d-about-us-inner .d-about-white-inner .d-about-white-desc h3 {
        font-size: 36px;
    }

    .d-about-us-inner .d-about-white-inner .d-about-white-desc p {
        font-size: 16px;
    }

    .parallax-item-3 {
        min-height: 50vh;
    }

    .d-digital-work .d-digital-work-title {
        font-size: 40px;
    }

    .d-digital-work .d-digital-work-items-inner .d-digital-work-item {
        width: 40%;
        margin: 10px 30px;
    }

    .d-work-together .d-main-content.d-work-together-inner {
        width: 100%;
        padding: 60px 10px;
    }

    .d-work-together .d-work-together-container {
        padding: 0;
        margin-bottom: 60px;
    }

    .d-work-together .d-work-together-container .d-work-image {
        height: 700px;
        overflow: hidden;
        padding-top: 230px;
    }

    .d-work-together .d-work-together-container .d-work-image img {
        width: 130%;
        /* margin-left: -15%; */
    }

    .d-work-together .d-work-together-info {
        position: absolute;
        top: 0;
    }

    .d-work-together .d-work-together-info h3 {
        font-size: 40px;
    }

    .d-work-together .d-work-together-info .d-work-together-desc {
        padding: 0 30px;
    }

    .d-work-together-numbers {
        max-width: 325px;
        margin: 0 auto;
    }

    .d-work-together .d-work-together-numbers-inner .d-work-together-number-item {
        width: 100%;
        margin: 0 0 70px;
    }

    .d-what-agency-tell-us h2 {
        font-size: 40px;
        margin-bottom: 25px;
    }

    .d-what-agency-tell-us p.d-sub-header {
        font-size: 18px;
        width: 100%;
        margin-bottom: 60px;
    }

    .service-portfolio-ctnr {
        margin-top: 100px;
    }

    section#testimonials {
        width: 90%;
        margin: 0 auto;
    }

    .testi-scroll-mrg-top h2 {
        margin-top: 120px;
        font-size: 40px;
    }

    .client-testimonial-ctnr p {
        font-size: 16px;
    }

    section#process h2 {
        font-size: 40px;
    }

    section#process p {
        font-size: 16px;
        margin: 20px 30px;
        max-width: initial;
        width: 90%;
        display: block;
    }

    .content-ctnr.join-stage-ctnr {
        width: 95%;
        margin: 0 auto;
        padding: 10px;
        height: initial;
    }

    .join-stage-info {
        display: block;
        padding: 0px;
        top: initial;
        left: initial;
        position: relative;
        width: 100%;
        transform: initial;
    }

    .join-stage-info h2 {
        max-width: initial;
        margin-top: 25px;
    }

    .lets-talk-ctnr {
        width: 90%;
        margin: 60px auto;
    }

    .lets-grid {
        margin: 0 auto 30px;
    }

    .lets-talk-ctnr .lets-talk-grid-ctnr {
        display: block;
        max-width: initial;
        margin-top: 30px;
    }

    .lets-talk-ctnr h2 {
        font-size: 40px;
    }

    .lets-talk-ctnr h3 {
        font-size: 30px;
    }

    .getin-touch-ctnr {
        width: 90%;
        margin: 0 auto;
        max-width: initial;
    }

    form.getin-form-ctn-home .d-half-base,
    form.getin-form-ctn-home .d-submit-button {
        width: 100%;
    }

    form.getin-form-ctn-home .d-full-base textarea {
        height: 90px;
        width: 100%;
    }

    .what-next-ctnr {
        width: 90%;
        display: block;
    }

    .what-next-ctnr h2 {
        font-size: 40px;
    }

    .what-next-ph {
        margin: 30px 0 0;
    }
    
    .d-about-us {
        padding: 60px 0 60px;
    }

    .client-logo-main .client-logo-column figure {
        margin: 20px auto;
    }

    .client-logo-main {
        width: 80%;
    }

    #carousel-01 .owl-prev::before,
    #carousel-01 .owl-next::before {
        font-size: 20px;
    }

    #carousel-01 .owl-next {
        right: 20px;
    }

    .d-what-agency-tell-us .agency-tell-grid {
        padding: 0px 0 100px;
    }

    .d-process-fading-content .d-icon-base {
        margin-bottom: 15px;
    }
    
    .d-content-navi {
        padding-top: 30px;
    }

    .d-content-navi ul li {
        min-width: 250px;
    }

    .client-logo-main .client-logo-column figure{
        height: 110px;
    }
}

@media screen and (max-width: 710px) {
    .d-digital-work .d-digital-work-items-inner .d-digital-work-item {
        width: 47%;
        margin: 10px 5px;
    }
    .g-box {
        margin: 10px;
        padding: 15px;
    }

    .scroll-mrg-top {
        margin-top: 30px;
    }
}

@media screen and (max-width: 600px) {
    .d-process-list .d-process-list-items .d-process-list-item .d-showing-on-right {
        right: -15vw;
    }

    .d-process-list .d-process-list-items .d-process-list-item .d-showing-on-left {
        left: -15vw;
    }

    .g-box {
        width: 80%;
        max-width: initial;
    }

    .hmp-container-left,
    .hmp-container-right{
        width: 100%;
        display: block;
    }

    .hmp-container-left .d-fear-images {
        width: 46%;
        display: inline-block;
        margin: 0 1%;
    }

    .d-feature-one {
        height: 440px;
    }

    .hmp-container-left-inner {
        height: auto !important; 
        display: block;
    }
    
    .d-fear-images {
        height: auto; 
        margin-bottom: 20px;
        width: 100%;
    }
    
    .d-fear-images img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain; 
    }

    .popup-content {
        max-height: 100vh;
        margin-top: 10px;
    }

    .home-pop-up-main-container {
        max-height: 60vh;
    }
    .hmp-container-right {
        margin-left: initial;
    }
}

@media screen and (max-width: 520px) {
    .join-stage-info h2 {
        font-size: 46px;
    }

    .d-work-together .d-work-together-container .d-work-image {
        padding-top: 320px;
        height: initial;
    }

    .d-digital-work .d-digital-work-items-inner .d-digital-work-item {
        width: 100%;
        margin: 0;
    }

    .d-digital-work .d-digital-work-items-inner .d-digital-work-item .d-digital-work-item-inner {
        margin: 10px auto;
    }

    .content-ctnr.join-stage-ctnr {
        margin-top: 60px;
    }

    .d-feature-one {
        height: 530px;
    }
}

@media screen and (max-width: 425px) {
    .d-technical-delivery-inner .d-section-content-inner .d-cta-list .cta-item {
        width: 40%;
    }

    .d-process-list .d-process-list-items .d-process-list-item .d-showing-on-right {
        right: -30px;
    }

    .d-main-header-inner.tablet-size .d-main-left {
        width: 66%;
    }

    .d-content-navi ul li {
        min-width: initial;
        width: 90%;
        padding: 0px;
        margin: 10px;
    }

    .d-about-us .d-about-cta-base-inner .d-about-cta-item .d-about-cta-item-inner {
        width: 300px;
        margin: 0 auto;
    }

    .d-about-us .d-about-cta-base-inner .d-about-cta-item .d-about-cta-item-inner .d-about-cta-item-folder img {
        width: 290px;
    }

    .d-about-us .d-about-cta-base-inner .d-about-cta-item .d-about-cta-item-inner .d-about-cta-item-file img {
        width: 205px;
    }

    .d-about-us .d-about-cta-base-inner .d-about-cta-item .d-about-cta-item-inner .d-about-cta-item-file {
        top: -100px;
        right: 31px;
    }

    .d-process-list-item .d-process-arrow-left {
        width: 220px;
        height: 170px;
        left: 0px;
    }

    .d-process-list-item .d-process-arrow-right {
        width: 220px;
        height: 170px;
        right: 0;
    }

    .d-process-list .d-process-list-items .d-process-list-item {
        height: 125px;
    }

    .d-process-list .d-process-list-items .d-process-list-item .d-process-fading-content {
        width: 280px;
    }

    .d-process-list .d-process-list-items .d-process-list-item .d-process-fading-content .d-title-base {
        line-height: 1.2em;
    }

    .d-process-list .d-process-list-items .d-process-list-item .d-process-fading-content .d-desc-base {
        line-height: 1.2em;
    }

    .d-process-list .d-process-list-items .d-process-list-item .d-showing-on-left {
        left: -10px;
    }

    .d-process-list .d-process-list-items .d-process-list-item .d-showing-on-right {
        right: 10px;
    }

    .d-process-list-item .d-process-arrow-right span {
        top: 20px;
        left: 50px;
    }

    .d-process-list-item .d-process-arrow-left span {
        top: 20px;
        right: 50px;
    }

    section#process p {
        margin: 0;
        width: 100%;
    }

    .content-ctnr.join-stage-ctnr {
        padding: 30px;
    }

    .join-stage-info h2 {
        font-size: 36px;
        line-height: 1em;
        margin-top: 0;
    }

    .join-stage-info ul {
        padding-left: 0px;
    }

    .join-stage-info ul li {
        list-style: none;
        font-size: 16px;
        line-height: 1.2em;
        margin-bottom: 15px;
    }

    .lets-grid {
        max-width: initial;
        margin: 30px 0;
    }

    .what-next-ctnr,
    .lets-talk-ctnr {
        width: 95%;
    }

    div#services {
        padding-top: 0;
    }

    .ag-gr-1 p, .ag-gr-4 p {
        width: 52%;
        font-size: 14px;
    }

    .ag-gr-2 p, .ag-gr-3 p {
        font-size: 14px;
    }

    .d-technical-delivery-inner {
        padding: 30px 0;
    }

    .g-box {
        max-width: 320px;
        padding: 15px;
        margin: 0 0 20px;
    }

    .testi-scroll-mrg-top h2 {
        margin-top: 30px;
    }

    .ag-gr-2 figure img, .ag-gr-3 figure img {
        width: 140%;
        margin-left: -20%;
        margin-top: -21%;
        margin-bottom: -21%;
    }

    .d-about-us-inner .d-about-white-inner {
        padding: 100px 10px 30px;
    }

    .ag-gr-2, .ag-gr-3, .ag-gr-4 {
        margin-top: -10px;
    }

    .g-box {
        width: 90%;
        max-width: initial;
    }

    .d-feature-one-inner {
        padding: 0px 0;
    }

    .d-feature-one {
        height: 320px;
    }

    .d-feature-one-text {
        width: 90%;
        font-size: 31px;
    }

    .client-logo-main .client-logo-column figure {
        margin: 20px auto;
    }

    .hmp-container-right .hmp-container-right-inner p {
        font-size: 14px;
    }

    .client-logo-main .client-logo-column figure {
        height: 50px;
    }
    .client-logo-main .client-logo-column {
        width: 19%;
    }

    .client-testimonial-ctnr {
        padding: 30px 20px 100px;
    }

    .testi-ph-name p small {
        font-size: 14px;
    }
}

@media screen and (max-width: 345px) {
    .g-box {
        width: 100%;
        max-width: initial;
    }

    .getin-touch-ctnr,
    section#testimonials{
        width: 95%;
    }

    .d-technical-delivery-inner .d-section-title .d-section-main-title {
        font-size: 70px;
    }

    .d-technical-delivery-inner .d-section-content-inner .d-section-item .d-section-item-inner {
        padding: 10px;
    }

    .d-work-together .d-work-together-container .d-work-image {
        padding-top: 380px;
    }
    .client-logo-main {
        width: 70%;
        text-align: center;
    }
    
    .client-logo-main .client-logo-column {
        width: 19%;
    }
}

@media screen and (max-width: 320px) {
    .ag-gr-2 figure img, .ag-gr-3 figure img {
        width: 140%;
        margin-left: -20%;
        margin-top: -19%;
        margin-bottom: -19%;
    }
    .ag-gr-1 p, .ag-gr-4 p {
        font-size: 13px;
    }
    .ag-gr-2 p, .ag-gr-3 p {
        font-size: 13px;
    }
}