﻿/* Tablet Responsive - 992px */
@media (max-width: 992px) {
    :root {
        --fs-display-large: 52px;
        --fs-display-medium: 36px;

        --fs-h1: 36px;
        --fs-h2: 28px;
        --fs-h3: 22px;
        --fs-h4: 19px;
        --fs-h5: 17px;
        --fs-h6: 15px;

        --fs-body-xl: 18px;
        --fs-body-large: 17px;
        --fs-body-medium: 15px;
        --fs-body-small: 14px;

        --fs-label-large: 14px;
        --fs-label-medium: 13px;
        --fs-label-small: 12px;

        --fs-btn-large: 15px;
        --fs-btn-medium: 14px;
        --fs-btn-small: 13px;

        --fs-caption: 12px;
    }
}

/* Mobile Responsive - 676px */
@media (max-width: 676px) {
    :root {
        --fs-display-large: 36px;
        --fs-display-medium: 30px;

        --fs-h1: 30px;
        --fs-h2: 26px;
        --fs-h3: 20px;
        --fs-h4: 18px;
        --fs-h5: 16px;
        --fs-h6: 14px;

        --fs-body-xl: 17px;
        --fs-body-large: 16px;
        --fs-body-medium: 14px;
        --fs-body-small: 13px;

        --fs-label-large: 13px;
        --fs-label-medium: 12px;
        --fs-label-small: 11px;

        --fs-btn-large: 15px;
        --fs-btn-medium: 14px;
        --fs-btn-small: 13px;

        --fs-caption: 11px;
    }
}

@media (min-width: 992px) and (max-width: 1500px) {

    .case-study-slider .owl-controls .owl-nav .owl-prev,
    .case-study-slider .owl-nav .owl-prev,
    .case-study-slider .owl-prev {
        left: 0 !important;
        right: auto !important;
    }

    .case-study-slider .owl-controls .owl-nav .owl-next,
    .case-study-slider .owl-nav .owl-next,
    .case-study-slider .owl-next {
        right: 0 !important;
        left: auto !important;
    }


}

@media (max-width: 1300px) {
    .hero-heading {
        margin-top: 4px;
    }

    .hero-heading-blue {
        display: inline;
    }

    .section-spacing {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .partner-logo-img {
        width: 120px;
    }

    .partner-label {
        font-size: 16px;
    }

    .service-overview-image-wrap {
        height: 180px;
    }

    .service-overview-title {
        font-size: 18px;
    }

    .service-overview-content {
        padding: 19px 10px 16px 10px;
    }

    .service-overview-tags {
        grid-template-columns: repeat(1, 1fr);
    }

    .growth-stage-card {
        padding: 20px;
    }

    .growth-stage-card__description {
        font-size: 14px;
    }

    .case-study-slider .owl-controls .owl-nav .owl-prev,
    .case-study-slider .owl-nav .owl-prev,
    .case-study-slider .owl-prev {
        left: 0 !important;
        right: auto !important;
    }

    .case-study-slider .owl-controls .owl-nav .owl-next,
    .case-study-slider .owl-nav .owl-next,
    .case-study-slider .owl-next {
        right: 0 !important;
        left: auto !important;
    }

    .srvice-banner {
        padding-top: 36px;
        padding-bottom: 10px;
    }

    .strategy-growth-panel {
        padding: 24px;
    }

    .growth-counter-number {
        font-size: 46px;
    }

    .growth-counter-item p {
        font-size: 18px;
    }

    .refresh-panel {
        max-width: 970px;
        margin: auto;
    }
}



@media (max-width: 992px) {



    /************mobile-manu***********/
    .navbar-toggler {
        padding: 0.65rem 0.75rem;
    }

    .navbar-toggler-icon {
        display: block;
        height: 2px;
        background-size: 100%;
        background-color: #fff;
        margin-bottom: 7px;
    }

    .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
        background-color: #fff;
        position: absolute;
        left: 0;
        width: 100%;
        top: 82px;
        padding: 12px 0 4px 0;
    }

    .navbar-toggler {
        position: absolute;
        right: 26px;
        top: 0;
        padding: 0;
        border: 0;

    }

    .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }

    .navbar-toggler span {
        width: 35px;
        height: 4px;
        margin: 7px 0px;
        display: block;
        background: #000;
        font-size: 18px;
        border-radius: 50px;
        transition: all .5s ease-in-out;
    }

    .navbar-toggler.collapsed span {
        margin: 7px 0px !important;
        transform: rotate(0deg) !important;
    }

    .navbar-toggler.collapsed span.bar1 {
        width: 20px;
    }

    .navbar-toggler.collapsed span.bar3 {
        width: 20px;
        margin: 0 0 auto auto !important;
        display: block;
    }

    .navbar-toggler span.bar3 {
        display: none;
    }

    .navbar-toggler span.bar2 {
        transform: rotate(-45deg);
        margin-top: -10px;
    }

    .navbar-toggler span.bar1 {
        width: 35px;
        transform: rotate(45deg);
        margin-top: 17px;
    }

    .navbar-collapse {
        width: 0%;
        position: absolute;
        top: 47px;
        left: -100%;
        min-height: 100vh;
        background: #fff;
        padding: 23px 15px 0;
        border-top: 1px solid #1c6dac;
        z-index: 99;
    }

    .navbar-collapse.show {
        left: 0;
        width: 90%;
    }

    /************mobile-manu***********/


    .hero-elent:before {
        content: '';
        background-color: #ffffff87;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .hero-description {
        opacity: 1;
        max-width: 100%;
        margin-bottom: 24px;
    }

    .partner-grid {
        gap: 52px 0;
    }

    .partner-logo-img {
        width: 110px;
    }

    .partner-logo-box {
        height: 83px;
    }

    .partner-logo-img.amazon-ads,
    .partner-logo-img.woo-partner {
        width: 70px;
    }

    .growth-challenges-desc {
        margin: 20px 0;
        max-width: 100%;
    }

    .services-overview-lead {
        max-width: 100%;
        margin-left: auto;
    }

    .services-overview-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .service-overview-image-wrap {
        height: 260px;
    }

    .service-overview-tags,
    .growth-stage-grid,
    .impact-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .growth-strategy-cta {
        padding: 20px 20px;
        gap: 24px;
        margin-top: 28px;
    }

    .impact-desc {
        margin-bottom: 22px;
    }

    .impact-metric-value {
        margin: 7px 0 10px;
    }

    .case-study-showcase-card {
        grid-template-columns: repeat(1, 1fr);
    }

    .case-study-slider .owl-controls .owl-nav .owl-next,
    .case-study-slider .owl-nav .owl-next,
    .case-study-slider .owl-next,
    .case-study-slider .owl-controls .owl-nav .owl-prev,
    .case-study-slider .owl-nav .owl-prev,
    .case-study-slider .owl-prev {
        display: none !important;
    }

    .platforms-technologies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-logo-image {
        height: 45px;
    }

    .how-we-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .d2c-brands-content {
        padding: 20px;
    }

    .insights-section {
        padding-top: 0;
    }

    .insights-header-content {
        padding-left: 14px;
    }

    .growth-banner__person {
        display: none;
    }

    .growth-banner__visual {
        min-height: auto;
    }

    .growth-banner {
        margin-top: 0;
    }

    .testimonial-compact .testimonial-text {
        margin-bottom: 22px;
        min-height: auto;
    }

    .badge-text {
        font-size: 12px;
    }

    .platform-logo-item {
        padding: 0 30px;
    }

    .section-spacing {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .navbar-nav {
        gap: 5px;
        width: 100%;
        justify-content: center;
        padding: 0 10px;
    }

    .growth-challenges-section,
    .every-click-has {
        overflow: hidden;
    }

    body {
        padding: 60px 0 0 0;
    }

    .srvice-banner {
        padding-top: 50px;
        padding-bottom: 50px;
    }


    .srvice-banner .hero-cta-group {
        margin-bottom: 0;
    }

    .how-we-work-desc {
        max-width: 100%;
    }

    .our-story-heading-panel {
        margin-bottom: 19px;
    }

    .our-story .growth-stage-card__top {
        margin-bottom: 110px;
    }

    .growth-counter-number {
        font-size: 40px;
    }

    .growth-counter-item p {
        font-size: 16px;
    }

    .lotus-panel img {
        display: none;
    }

    .refresh-panel img {
        margin-top: 40px;
        margin-right: 24px;
    }

    .doodle-right,
    .doodle-left {
        width: 30px;
        top: 9px;
    }

    .wps-advantage-arrow {
        width: 60px;
        min-width: 30px;
        font-size: 17px;
    }

    .wps-advantage-card__title {
        font-size: 18px;
    }

    .wps-advantage-comparison {
        margin-bottom: 35px;
    }

    .faq-cta-card {
        margin-top: 30px;
    }

    .d2c-brands-description {
        margin-bottom: 22px;
        margin-top: 0;
    }

    .sub_menu_dropdown {
        position: relative;
        top: 0;
        width: 100%;
        padding: 0 0 0 0;
    }


    .drop_icon {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        transform: rotate(45deg);
        margin-left: 8px;
        cursor: pointer;
        transition: 0.3s;
    }

    /* Active state (jab menu open ho) */
    .drop_icon.active {
        transform: rotate(-135deg);
    }

    .menu-item-has-children {
        position: relative;
    }

    .drop_icon {
        position: absolute;
        right: 10px;
        top: 14px;
    }

    .menu-item-has-children>.nav-link:after {
        display: none;
    }

    .hero-form-col {
        justify-content: start;
    }

    .footer-nav .drop_icon{
        display: none;
    }
}



@media (max-width: 768px) {
    .platform-logo-item {
        padding: 0 15px;
    }

    .brand-column {
        gap: 20px;
        padding: 10px 12px;
    }

    .section-spacing {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .growth-card-title {
        font-size: 17px;
        letter-spacing: normal;
    }

    .brand-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .brand-column {
        gap: 20px;
        padding: 10px 12px;
        border-right: 1px solid #cdd1d7;
    }

    .hero-section {
        padding-top: 35px;
        padding-bottom: 60px;
    }

    .partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 0;
    }

    .growth-challenges-grid,
    .services-overview-grid,
    .service-overview-tags,
    .growth-stage-grid,
    .impact-highlights-grid,
    .growth-channel-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .growth-strategy-cta {
        gap: 24px;
        flex-direction: column;
    }

    .impact-metric-value {
        font-size: 25px;
        letter-spacing: normal;
    }

    .impact-metric-card {
        padding: 20px;
    }

    .case-study-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .web-panel-advantage-section p:not(.web-panel-advantage-description):not(.section-eyebrow) {
        margin-bottom: 26px;
    }

    .platforms-technologies-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .how-we-work-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }



    .d2c-brands-panel {
        flex-direction: column;
    }

    .d2c-brands-image,
    .d2c-brands-content {
        flex: 0 0 100%;
        width: 100%;
        min-height: auto;
    }

    .growth-banner__heading {
        line-height: normal;
        letter-spacing: normal;
        margin: 20px 0;
    }

    .wps-footer-cta-content {
        position: relative;
        z-index: 2;
        padding: 26px 30px;
    }

    .wps-footer-cta-letter img {
        display: none;
    }

    .case-study-details {
        padding: 20px;
    }

    .service-overview-tags {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-logo {
        height: 32px;
    }

    .testimonial-text {
        font-size: 16px;
    }

    .insights-section {
        padding-top: 0;
    }

    .srvice-banner .custom-breadcrumb {
        padding: 0px 0 24px 0;
    }

    .our-story .growth-stage-card__top {
        margin-bottom: 30px;
    }

    .growth-counter-number {
        font-size: 30px;
    }

    .growth-counter-item p {
        font-size: 14px;
    }

    br {
        display: none !important;
    }

    .challenge-description {
        margin: 0 0 0 auto;
    }

    .case-study-banner .custom-breadcrumb {
        padding: 20px 0 20px 0;
        position: relative;
    }

    .contact-us-banner .hero-description {
        max-width: 100%;
        margin-top: 24px;
        margin-bottom: 0;
    }

    .consultation-card-body {
        padding: 25px;
    }

    .faq-cta-card {
        margin-top: 30px;
    }

    .faq-cta-card p {
        margin-bottom: 30px;
    }

    .faq-item .accordion-button {
        font-size: 18px;
    }

    .hero-section.srvice-banner {
        position: relative;
    }

    .hero-section.srvice-banner:before {
        display: none;
    }

    .wps-advantage-row {
        display: block;
    }

    .wps-advantage-arrow {
        width: 100%;
        min-width: auto;
        font-size: 20px;
        transform: rotate(90deg);
        margin: 10px 0;
    }

    .doodle-right,
    .doodle-left {
        width: 30px;
        top: -9px;
    }

    .refresh-panel img {
        margin-top: 40px;
        margin-right: 24px;
        margin-bottom: 30px;
    }

    .wps-advantage-icon-panel {
        padding: 20px 6px;
    }

    .wps-advantage-panel__icon {
        font-size: 30px;
    }

    .case-detail-page {
        padding-top: 23px !important;
    }

    .case-detail-breadcrumb {
        margin-bottom: 25px !important;
    }

    .case-detail-section h2 {
        font-size: 20px;
    }
}