@media screen and (max-width: 1640px) {
    .titleHeroSection {
        font-size: 5vw;
    }
}

@media screen and (max-width: 1320px) {
    .titleHeroSection {
        font-size: 4.2vw;
    }
}

@media screen and (max-width: 1100px) {
    .titleHeroSection {
        font-size: 3.5vw;
    }
}

@media screen and (max-width: 1024px) {
    .mainDivNavItems {
        flex-direction: column;
        align-items: start !important;
    }

    .menuItemsList,
    .menuContactInfo {
        width: 100%;
        text-align: start;
        padding: 0 !important;
    }

    .menuContactIcons {
        justify-content: start !important;
    }

    .mainComponentWrapper {
        padding: 0 50px;
    }

    .heroSectionGIFWrap {
        width: 150px;
        height: 100px;
    }

    .titleHeroSection {
        font-size: 5vw !important;
        font-weight: 100;
        letter-spacing: 4px;
    }

    .arrowButtonHeroSection {
        width: 70px;
        height: 70px;
    }

    .connectText {
        white-space: nowrap;
    }

    .heroSectionTextWrap {
        margin: 0 !important;
        width: 100%;
    }

    .heroGridWrap {
        align-items: center !important;
    }

    .whoWeAreSectionWrapper {
        margin: -200px 0 -100px 0;
        z-index: unset !important;
    }

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

    .greenEarth,
    .whatWeDoContentWrapper,
    .whatWeDoDesc {
        width: 100%;
    }

    .howWeDoCardsWrapper {
        padding: 70px 0 100px 50px;
    }

    .howWeDoCard .howWeDoCardTitle {
        font-size: var(--FS-30px);
    }

    .howWeDoCard .howWeDoTags {
        padding: 5px 10px;
        font-size: var(--FS-20px);
    }

    .timelineCardNumber {
        font-size: 100px;
    }

    .timelineCardTitle {
        font-size: var(--FS-40px);
    }

    .whatWeDoDesc {
        font-size: var(--FS-20px);
    }

    .timelineCardImage {
        margin-top: 50px;
    }

    .timelineCardDot {
        left: -5.85%;
    }

    .sectionHeading {
        padding: 0 20px;
    }

    .with-outSectionWrapper {
        gap: 30px;
    }

    .with-outTitle {
        min-width: 200px;
        font-size: var(--FS-50px);
    }

    .with-outCard {
        height: 200px;
    }

    .featuredInStoneWrap img {
        width: 250px;
    }

    .featuredInLogos {
        flex-wrap: wrap;
        gap: 100px 0;
    }

    .featureInCardWrap {
        width: 50%;
    }

    .caseGridWrap {
        flex-direction: column;
        gap: 50px;
    }

    .caseStudieCardContent,
    .caseStudieCardImage {
        width: 100%;
    }

    .caseStudiTitle {
        margin-bottom: 30px !important;
        padding: 10px 20px;
    }

    .whatWeDoTitle {
        font-size: var(--FS-50px);
    }

    .marqueeContainerTwo {
        transform-origin: 210% 0;
    }

    .clientSaysCard {
        width: 47%;
    }

    .contactCard {
        width: 80%;
    }

    .contactSubtitle{
        width: 100%;
        text-align: start;
    }
    
    .contactTitle{
        font-size: var(--FS-30px);
        text-align: start;
    }

    .footerSectionGrid {
        flex-direction: column;
    }

    .bannerSectionWrapper .bannerSectionImage {
        top: 0 !important;
    }

    .bannerSectionContentWrapper {
        width: 95%;
    }

    .aboutUsSectionImage {
        margin-top: 50px;
    }

    .aboutUsSectionImage img {
        margin-bottom: 0 !important;
    }

    .aboutUsSectionDesc {
        padding: 0;
    }

    .expertSectionWrapper {
        padding: 100px 0;
    }

    .timelineStep .left {
        width: 50%;
        font-size: var(--FS-30px);
    }

    .ourTeamProfile {
        width: 50%;
        border-width: 1px !important;
    }

    .contact-section {
        flex-direction: column;
    }

    .contact-left {
        width: 100%;
        max-width: 100%;
    }

    .contact-right {
        max-width: 60%;
    }

    .contact-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .contactUsFormFieldsWrapper {
        padding: 50px;
    }

    .bannerSectionImage.servicesBanner,
    .bannerSectionImage.portfolioBanner {
        top: -110px !important;
    }

    .tjc-tab-btn {
        font-size: var(--FS-18px);
    }

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

    .blogsCards.div1 {
        grid-area: 1 / 1 / 2 / 3;
    }

    .blogsCards.div2 {
        grid-area: 2 / 1 / 3 / 3;
    }

    .blogsCards.div3 {
        grid-area: 3 / 1 / 4 / 3;
    }

    .blogsCards.div4 {
        grid-area: 4 / 1 / 5 / 3;
    }

    .blogCard img {
        height: 500px;
    }

    .blogTitleWrapper {
        padding: 120px 20px 20px 20px;
    }

    .featuresCard {
        width: 100%;
        padding: 30px 0 !important;
    }

    .featuredBlogTitle {
        width: 100%;
    }

    .featuredSub {
        width: 100%;
    }

    .featuresCardBorderNone::after {
        display: unset;
    }

    .blogsDetailsContent {
        width: 95%;
        margin: auto;
    }

    .blogContentWrap {
        width: 100%;
    }

    .footerGlobeWrapper {
        width: 50%;
    }

    .footerGlobeWrapper img {
        width: 100%;
    }

    #footer {
        padding-top: 50px;
    }

    .whoWeAreTitle {
        font-size: var(--FS-60px);
    }

    .whoWeAreDesc {
        font-size: var(--FS-22px);
    }

    .btnMainPrimary {
        padding: 7px 20px;
        font-size: var(--FS-18px);
    }

}

@media screen and (max-width: 992px) {
    .titleHeroSection {
        font-size: 4.7vw !important;
    }

    .faq-header,
    .faq-answer {
        padding-left: 8rem;
    }

    .timelineCardImage img {
        height: auto;
        object-fit: cover;
    }

    .testimonialCard {
        min-height: 500px;
    }
}

@media screen and (max-width: 768px) {
    .titleHeroSection {
        font-size: 4.1vw !important;
    }

    .timelineDot {
        left: -2.95vw;
    }

    .timelineLine,
    .timelineLineGradient {
        left: -3.3vw;
    }

    .clientSaysCard {
        width: 100%;
    }


    .testimonialCard {
        min-height: unset;
    }

    .whatWeDoTitleFonts {
        font-size: var(--FS-40px);
    }

    .callToActionContent,
    .bannerContentWrapper {
        flex-direction: column;
        align-items: start !important;
    }

    .portfolioCards {
        width: 100%;
        margin-bottom: 0;
    }

    .portfolioParent {
        gap: 20px;
    }

    .portfolioCardsOpp .mt-4 {
        text-align: start !important;
    }

    .servicesThumbnail {
        height: 400px;
    }

    .serviceVideoWrap {
        height: 400px;
    }

    .tjc-preview {
        width: 250px;
        height: 250px;
    }

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

    .projectCardsOpp .mt-4.text-end {
        text-align: start !important;
    }

    .projectCardsOpp .contentAnimated {
        justify-content: start !important;
    }

}

@media screen and (max-width: 600px) {
    .titleHeroSection {
        font-size: 5vw !important;
    }
}

@media screen and (max-width: 560px) {
    .customOffcanvasInner {
        padding: 30px !important;
    }

    .menuItems li a {
        height: 30PX;
        font-size: var(--FS-30px);
    }

    .mainComponentWrapper {
        padding: 0 20px;
    }

    .heroSectionGIFWrap {
        width: 100px;
        height: 60px;
    }

    .headerLogo img {
        height: 40px !important;
    }

    .menuText {
        font-size: var(--FS-18px);
    }

    .buttonDarkMainIcon {
        width: 30px;
        height: 30px;
    }

    .buttonDarkMainIcon svg {
        width: 14px !important;
        height: 14px !important;
    }

    .heroSectionWrapper {
        padding: 70px 0 50px 0;
    }

    .subTitleHeroSection {
        font-size: var(--FS-18px);
        font-weight: var(--FW-300);
    }

    .titleHeroSection {
        font-size: var(--FS-20px) !important;
        letter-spacing: 1px;
    }

    .heroGridWrap {
        flex-direction: column;
        padding-top: 50px;
    }

    .heroSectionTextWrap {
        width: 100%;
        font-size: var(--FS-18px);
    }

    .whoWeAreTitle {
        font-size: var(--FS-30px);
        font-weight: var(--FW-200);
    }

    .whoWeAreContentWrap {
        width: 95%;
    }

    .whoWeAreDesc {
        font-size: var(--FS-20px);
        font-weight: var(--FW-200);
        width: 95%;
        margin: auto;
    }

    .whoWeAreSectionWrapper {
        margin: -10px 0;
    }

    .btnMainPrimary {
        margin: 20px 0 0 0;
        padding: 7px 15px;
        font-size: var(--FS-18px);
        font-weight: var(--FW-200);
    }

    .whatWeDoTitleFonts,
    .whatWeDoTitle {
        font-size: var(--FS-36px);
    }

    .callToActionContent,
    .bannerSectionWrapper {
        padding: 20px;
    }

    .bannerContentWrapper {
        padding: 20px;
    }

    .whatWeDoBadge {
        padding: 7px 15px;
        font-size: var(--FS-20px);
    }

    .whatWeDoDesc {
        font-size: var(--FS-18px);
        font-weight: var(--FW-200);
    }

    .sectionHeading {
        font-size: var(--FS-50px);
    }

    .customButtoms {
        position: absolute;
        width: 100%;
        left: 0;
        margin-top: 50px;
    }

    .timelineContentWrapper {
        flex-direction: column-reverse;
        align-items: start !important;
    }

    .timelineCardNumber {
        font-size: 60px;
    }

    .timelineCardTitle {
        font-size: var(--FS-30px);
    }

    .timelineCardImage img {
        margin-bottom: 50px;
    }

    .timelineCard {
        padding-left: 20px;
    }

    .timelineCardDot {
        left: -7.75%;
    }

    .compareCardsWrapper {
        padding: 0 0 0 20PX;
    }

    .withGlobeWrapper {
        z-index: unset;
    }

    .with-outTitle {
        min-width: 100px;
        font-size: var(--FS-30px);
    }

    .with-outCard p {
        padding: 15px;
        font-size: var(--FS-20px);
    }

    .with-outCard {
        min-width: 300px;
        width: 300px;
    }

    .featuredInStoneWrap img {
        width: 150px;
    }

    .featureInCardWrap {
        width: 100%;
    }

    .featuresSectionWrapper {
        padding: 0;
    }

    .faqSectionWrapper {
        padding: 0 10px;
    }

    .faq-question {
        font-size: var(--FS-20px);
    }

    .faq-answer {
        font-size: var(--FS-16px);
    }

    .caseStudiTitle {
        font-size: var(--FS-20px);
    }

    .whatWeDoTitleCase {
        font-size: var(--FS-30px) !important;
    }

    .caseStudiesCardsWrapper {
        padding-bottom: 100px;
    }

    .caseReachCount {
        font-size: var(--FS-40px);
    }

    .caseReachContent {
        font-size: var(--FS-22px);
    }

    .trustedPartnersSectionWrapper {
        padding: 0;
    }

    .marqueTrustLogos img {
        height: 30px;
    }

    .clientSaysCardsWrapper {
        padding: 0 20px;
    }

    .clientSaysCard {
        width: 100%;
    }

    .contactSectionWrapper {
        padding: 20px;
    }

    .contactTitle {
        font-size: var(--FS-40px);
    }

    .contactCard {
        height: unset;
    }

    .contactBgImage {
        height: 800px;
    }

    .bannerSectionSubTitle {
        font-size: var(--FS-20px);
    }

    .bannerSectionTitle {
        font-size: var(--FS-40px);
    }

    .aboutUsSectionImage img {
        height: 300px;
    }

    .aboutUsSectionDesc {
        font-size: var(--FS-24px);
    }

    .expertSectionImage {
        width: 70%;
    }

    .expertSectionTitle {
        width: 95%;
        font-size: var(--FS-30px);
    }

    .expertSectionDesc {
        width: 95%;
        font-size: var(--FS-20px);
    }

    .timelineLine {
        left: 0;
    }

    .timelineDot {
        left: 0.2%;
    }

    .timelineLine,
    .timelineLineGradient {
        left: -0.2vw;
    }

    .timelineStep {
        flex-direction: column !important;
    }

    .timelineStep .left,
    .timelineStep .right {
        width: 100%;
        padding-left: 30px !important;
    }

    .timelineStep .left {
        font-size: var(--FS-26px);
    }

    .ourTeamProfile {
        width: 100%;
    }

    .footerTextLinks span,
    .footerTextLinks a {
        font-size: var(--FS-20px);
    }

    .portfolioParent {
        display: flex;
        flex-direction: column;
    }

    .projectTitle {
        font-size: var(--FS-30px);
    }

    .bannerSectionWrapper .bannerSectionImage {
        height: 500px;
    }

    .contact-text {
        font-size: var(--FS-18px);
    }

    .contactUsTitle {
        font-size: var(--FS-50px);
    }

    .contactUsDesc {
        font-size: var(--FS-20px);
        padding: 0 0 50px 0;
    }

    .contactUsFormFieldsWrapper {
        padding: 30px 20px;
    }

    .gmapCircleWrapper,
    .gmapCircleWrapper iframe {
        width: 350px;
        height: 350px;
    }

    .wiredGlobeText p {
        font-size: 19vw;
    }

    .serviceVideoWrap,
    .servicesThumbnail {
        height: 350px;
    }

    .tjc-tabs {
        width: 95%;
        padding-bottom: 20px;
    }

    .tjc-tab-btn {
        white-space: nowrap;
    }

    .tjc-item {
        font-size: var(--FS-20px);
        padding: 30px 0;
    }

    .tjc-sec {
        gap: 0;
    }

    .tjc-preview {
        width: 200px;
        height: 200px;
    }

    .blogTitleWrapper p {
        font-size: var(--FS-20px);
    }

    .featuresCard {
        flex-direction: column;
    }

    .featuresCard img {
        width: 100%;
    }

    .blogDetailTitle {
        font-size: var(--FS-40px);
    }

    .quoteAccent {
        width: 5px;
    }

    .timelineCardDot {
        left: -5.55vw;
    }

    .rotatingImage {
        width: 400px;
    }

    .tjcText {
        font-size: 40vw;
        font-weight: var(--FW-500);
        -webkit-text-stroke: 1px var(--ActiveMenu-color);
    }

    .text-stroke,
    .text-fill {
        line-height: 400px;
    }

    .blogContentMainImg {
        border-radius: 20px;
    }

    .howWeDoCardNumber {
        font-size: var(--FS-40px);
    }

    .howWeDoCardTitle {
        font-size: var(--FS-26px);
    }

    .howWeDoCardsWrap {
        height: 650px;
    }

    .caseReachStudiesWrapper {
        padding: 20px;
        backdrop-filter: blur(2px);
        top: 0;
        left: 0%;
    }

    .caseStudieCardImage img {
        width: 90%;
        margin-left: 10%;
    }

    .agency-page .caseStudiesSectionWrapper ,
    .agency-page .servicesSectionWrapper {
        padding: 20px;
    }

    .agency-page .aboutUsSectionDesc,
    .agency-page .aboutUsSectionContent ul li {
        text-align: start;
    }

}

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

    .timelineCardDot {
        left: -4.05vw;
    }

    .titleHeroSection {
        font-size: 6vw !important;
    }

    .heroSectionMain {
        flex-direction: column;
        margin: 10px 0;
    }

    .heroSectionGIFWrap {
        width: 100%;
    }

    .heroSectionGIFWrap video {
        width: 100%;
        border-radius: 50px;
    }

    .rotatingImage {
        width: 250px;
    }

}