@media screen and (max-width: 576px) {}

/* desktop */
@media screen and (max-width: 1200px) and (min-width: 992px) {}

/* large screens */
@media screen and (max-width: 1440px) and (min-width: 1200px) {}

/* Tabs */



/* 🔹 RESPONSIVE BREAKPOINTS */

/* Extra Small Devices (Phones < 576px) */
@media (max-width: 575.98px) {
    .imags-scrolling-effect {
        height: 260px;
    }
}

/* Small Devices (Landscape Phones / Small Tablets) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .imags-scrolling-effect {
        height: 320px;
    }
}

/* Medium Devices (Tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .imags-scrolling-effect {
        height: 400px;
    }
}

/* Large Devices (Laptops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .imags-scrolling-effect {
        height: 460px;
    }
}

/* Extra Large Devices (Desktops up to 1200–1439px) */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    .imags-scrolling-effect {
        height: 520px;
    }
}

/* Ultra-Wide Devices (1440px to 1599px) */
@media (min-width: 1440px) and (max-width: 1599.98px) {
    .imags-scrolling-effect {
        height: 610px;
    }
}

/* Super-Wide Devices (1600px to 1919px) */
@media (min-width: 1600px) and (max-width: 1919.98px) {
    .imags-scrolling-effect {
        height: 610px;
    }
}

/* 4K and Ultra-Wide Monitors (1920px and above) */
@media (min-width: 1920px) {
    .imags-scrolling-effect {
        height: 720px;
    }
}

/* When screen width is 768px or below (mobile view) */
@media (max-width: 768px) {

    html {
        scroll-behavior: smooth;
        scroll-padding: 10px;
    }

    .desktop {
        display: none !important;
    }

    .mobile {
        display: inline-block !important;
    }

    #skipBtn {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }

    .banner-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: relative;
        right: 0px;
        display: none !important;
    }

    .image-banner {
        position: relative;
        width: 100%;
        height: 70vh;
        overflow: hidden;
        background-color: #fff;
        background-image: url(../images/home/banners/typer-banner-res.webp);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}

@media (max-width: 768px) {
    .header-section .navbar .logo {
        width: 60px !important;
    }

    .video-banner .video-content h1 {
        font-size: 1.5rem;
    }

    .video-banner .video-content p {
        font-size: 1rem;
    }

    .left-part {
        display: none !important;
    }

    .right-part {
        width: 100% !important;
    }

    .bg-ash {
        background-color: #222222 !important;
    }

    .unique-service-section {
        padding: 25px 0;
    }

    .accordian-style-services {
        background-color: transparent;
        overflow: hidden;
        padding: 30px 0px;
    }

    .unique-service-title {
        font-size: 32px;
    }

    .unique-service-title {
        display: flex;
        align-items: start;
        justify-content: start;
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    .unique-service-section {
        overflow: hidden;
        background-color: #222222 !important;
    }

    .accordian-items-services {
        padding: 0px 0;
    }

    .service-process .service-process-content {
        padding-left: 0px;
    }
     .service-process .service-process-content p{
        margin-bottom: 0;
     }

    .accordian-style-services .services-inside {
        background-color: transparent;
        padding: 10px;
    }

    .accordian-style-services .services-inside p {
        margin-bottom: 0px;
    }

    .accordian-style-services .col-lg-4 {
        margin-bottom: 0px;
    }

    .accordian-style-services .services-inside .services-inside-header {
        margin-bottom: 10px;
    }

    .accordian-style-services .services-inside .col-lg-4 {
        margin-top: 0px;
    }

    .accordian-style-services .services-inside .services-inside-header h5 {
        color: #6d6c6c;
    }

    /* .unique-service-section .row {
    flex-direction: column;
  }

  .unique-service-section .col-lg-4 {
    text-align: center;
    padding: 20px 0 !important;
  }

  .unique-service-section img {
    max-width: 90%;
    margin: 0 auto;
  } */



    /* .image-container .row .col-lg-8,
  .image-container .row .col-lg-4 {
    width: 49.9% !important;
    height: 175px;
  } */

    .overlay-text-ds {
        font-size: 14px;
    }

    .overlay-text-dm {
        font-size: 14px;
    }

    .love-button img {
        top: 90%;
    }

    .custom-dromdown-menu::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }

    .our-contact-details p {
        margin: 0;
        font-size: 16px;
        color: #fff;
        padding-top: 0px;
    }

    .sec-title {
        font-size: 2rem;
    }

    .content-no-type {
        position: relative;
        top: 80%;
        right: unset;
        transform: translate(0%, 0%);
        text-align: end;
        color: white;
        padding-right: 12px;
    }

    .content-no-type h1 {
        font-size: 16px;
        text-transform: uppercase;
    }

    .content-no-type .banner-read-more {
        display: none;
    }

    .counter-box {
        width: 170px;
        border: 1px solid #cccccc3b;
        padding: 10px;
        border-radius: 10px;
    }

    .counter {
        font-size: 32px;
    }

    .counter-image {
        width: 50px;
        height: 50px;
    }

    .counter-container {
        padding-top: 30px;
        gap: 20px;
    }

    .counter-title {
        font-size: 14px;
        color: #ffff;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .headline-portfolio {
        padding-top: 30px;
    }

    .typing-text {
        display: inline-block;
        border-right: none;
        white-space: unset;
        font-weight: 700;
        text-transform: uppercase;
        overflow: hidden;
        font-family: "Courier New", monospace;
        word-spacing: normal;
    }

    .new-services br {
        display: none;
    }

    .about-page-enternine {
        padding-top: 25px;
    }

    .about-page-enternine img {
        transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
    }

    .about-page-content {
        padding: 0px 15px;
    }



    .about-page-content h1,
    .main-title-page {
        font-size: 1.7rem !important;
        text-align: start !important;
        padding-top: 15px;
        
    }

    .about-page-content h1 br,
    .main-title-page br {
        display: none !important;
    }

    .about-page-content h1 br {
        display: block !important;
    }

    .about-page-content h1 {
        margin-bottom: 15px;
    }

    .right-move {
        position: relative;
        left: 6px;
    }

    .top-line-right {
        text-align: center;
        margin-bottom: 0px;
        padding-top: 0px;
    }


    .philosophy-titke-enternine {
        margin-bottom: 15px !important;
        margin-top: 30px;
    }

    .agency-content-right-side {
        display: flex;
        flex-wrap: unset;
        gap: 20px;
        flex-direction: column;
        padding: 20px;
    }

    .carrers-e9 .job-details-currently {
        padding: 20px;
    }

    .carrers-e9 .title {
        font-size: 20px;
    }

    .carrers-e9 p {
        font-size: 14px;
    }

    .quick_links {
        display: flex;
        justify-content: start;
    }

    .philospy-enternine {
        padding: 0px 12px;
    }

    .points-en ul {
        list-style: none;
        padding: 0;
        margin-top: 20px;
        padding-left: 0px;
    }

    .points-en li {
        font-size: 13px;
        font-weight: 500;
        color: var(--dark);
        line-height: 1.5;
        transition: color 0.3s ease;
        position: relative;
        padding-bottom: 8px;
        display: flex;
        align-items: center;
    }

    .points-en li span {
        font-weight: 700;
        color: var(--green);
        text-transform: uppercase;
        display: block;
        width: 100px;
    }

    .portfolio-section {
        padding-top: 30px;
    }

    .portfolio-heading br {
        display: none;
    }

    .portfolio-heading {
        text-align: center;
    }

    .portfolio-description {
        font-size: unset;
        color: rgba(34, 34, 34, 0.8);
        margin: 0;
        max-width: 100%;
    }

    .portfolio-heading {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .clients-section {
        padding-top: 30px !important;
    }

    .e9-contactus-section {
        padding: 30px 0;
    }

    .e9-contact-left .e9-contact-text {
        margin-top: 0 0 10px 0;
        color: #6c6c6c;
        line-height: 1.6;
    }

    .pf-sec .row {
        margin: 0 !important;
        padding: 0 !important;
    }

    .pf-sec img {
        padding-bottom: 15px !important;
        margin: 0 !important;
    }

    .pf-sec br {
        display: none !important;
    }

    .pf-sec>.container>.row>.row {
        margin: 0px;
    }

    .love-button {
        display: none !important;
    }

    .new-services {
        background-color: #191919;
        padding-top: 40px;
    }

    .image-container {
        padding: 0px 30px;
    }


    .brand-cta-section {
        padding: 50px 0;
    }

    .our-clients .section-title {
        text-align: start;
    }

    .best-agency {
        margin-top: 15px;
        padding: 30px 0;
    }

    .footer-bg {
        padding-top: 50px;
    }
}


@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-item.large {
        grid-column: span 1;
        margin-bottom: 15px;
    }

    .process-text {
        font-size: 22px;
    }

    .service-process .process-text {
        position: absolute;
        color: #fff;
        font-size: 26px;
        font-weight: 500;
        right: 20px;
        bottom: 20px;
        font-weight: bold;
        line-height: 20px;
        letter-spacing: -1px;
        font-size: 20px;
        letter-spacing: -1px;
        /* color: transparent; */
        -webkit-text-stroke: unset;
        font-family: unset;
        text-align: center;
    }

    .service-process .service-process-content h5 {
        font-size: 20px;
    }

    .service-process {
        position: relative;
        padding: 0 0 30px;
    }

    .service-main-concept .row-mb {
        margin-bottom: 30px;
    }

    .service-main-concept .row-mb img {
        margin-top: 15px;
    }

    .service-main-concept h2 {
        color: var(--green);
        font-weight: 700;
        margin-bottom: 15px;
    }

    .service-the-process .service-the-process-content {
        padding: 15px;
        margin-bottom: 15px;
        height: auto !important;
    }

    .service-the-process .service-the-process-content .number {
        position: relative;
        font-size: 18px;
        left: 0;
    }
}


/* Medium screens (tablets, ≤ 992px) */
@media (max-width: 992px) {
    .unique-service-section img {
        width: 60%;
        opacity: 0.9;
    }
}

/* Small screens (landscape phones, ≤ 768px) */
@media (max-width: 768px) {
    .unique-service-section img {
        position: relative;
        width: 100%;
        height: auto;
        top: 0;
        right: 0;
        object-fit: contain;
        margin-bottom: 15px;
    }

    .gallery-of-portfolio-sec-head {
        padding-bottom: 30px;
        text-align: center;
    }
}

/* Extra small screens (portrait phones, ≤ 576px) */
@media (max-width: 576px) {
    .unique-service-section img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/* Ultra-wide screens (≥ 1600px) */
@media (min-width: 1600px) {
    .unique-service-section img {
        width: 50%;
    }

}


/* Ultra-Wide Devices (1440px to 1599px) */
@media (min-width: 1440px) and (max-width: 1599.98px) {
    .video-section-films {
        margin-top: 100px;
    }

}