/* ===================================
   Only on screens above 992px 
=================================== */

@media only screen and (min-width:993px) {
    .heroImageWrap {
        height: 75vh;
    }

    .heroImageWrap>img:first-child {
        height: 100%;
        object-fit: contain;
    }

    .heroImageWrap .heroImgDecor {
        width: clamp(140px, 10vw, 220px);
    }
}

@media only screen and (min-width:993px) and (max-width:1399px) {
    .contactQuick {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .contactQuickItem {
        width: 100%;
    }

    .contactQuickItem:last-child {
        grid-column: 1 / -1;
    }
}

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

    /* Header */
    #navbarNavAltMarkup {
        margin-top: 10px;
    }

    .navbar-nav {
        gap: 10px;
    }

    .navbar-nav .nav-link {
        text-align: center;
        text-transform: uppercase;
    }

    /* Hero Sec */
    .heroSec {
        padding: var(--s-sp-Section_Padding-mob);
        padding-bottom: 20px;
    }

    .heroContent {
        text-align: center;
        margin: 0 auto;
    }

    .heroContent .secTitle {
        align-self: center;
    }

    .heroContent p br {
        display: none;
    }

    .heroImageWrap {
        margin-bottom: 24px;
        scale: .9;
    }

    .heroImageWrap>img:first-child {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .cubeWrap {
        margin-bottom: 40px;
        min-height: 280px;
    }

    .cube {
        --cube-size: 180px;
    }

    /* About Sec */
    .aboutUsSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    .aboutWitty {
        margin: 0 auto;
    }

    .aboutBadge {
        right: 16px;
        bottom: 16px;
        padding: 8px 12px;
        font-size: var(--s-fs-caption);
    }

    .aboutContent {
        text-align: center;
        margin: 0 auto;
        align-items: center;
    }

    .aboutContent h2 {
        font-size: var(--s-fs-h2-sm);
    }

    .imageArea {
        margin-bottom: 24px;
        width: 100%;
    }

    .buttonBtn {
        margin: 0 auto;
    }

    /* Services */
    .servicesSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    .servicesHeroSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    .ServicesHeroContent {
        padding: 0;
        text-align: center;
        margin: 0 auto;
    }

    .imgMainWrap {
        min-height: 360px;
        justify-content: center;
    }

    .servicesHeroMain {
        margin-right: 0;
        width: clamp(240px, 60vw, 360px);
    }

    .servicesHeroSwirl {
        top: 20%;
        right: -16%;
        width: clamp(240px, 50vw, 360px);
    }

    .servicesHeroScribble {
        left: 16%;
    }

    .servicesHeroDots {
        right: 22%;
        top: 4%;
    }

    .servicesHeroOval {
        right: 23%;
        width: 120px;
    }

    .servicesHeroOverlay {
        width: 180%;
        right: -40%;
        top: -20%;
    }

    .serviceListSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    .serviceListCard {
        padding: 22px;
        border-radius: var(--r-br-4xl-plus);
    }

    .serviceListContent h3 {
        font-size: var(--s-fs-h4);
    }

    .workProgressSec .scrollContainerWrap {
        margin-top: 28px;
        margin-left: unset;
        padding: 28px 56px 28px 28px;
        min-height: auto;
    }

    .workProgressSec .processIcon {
        width: 72px;
        height: 72px;
    }

    .workProgressSec .processCopy h4 {
        font-size: var(--s-fs-card-title);
    }

    /* Hire */
    .hireSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    .wd-75 {
        width: 100%;
    }

    .hireSecimg img {
        width: 60%;
        margin-bottom: 30px;
    }

    /* Protfolio */
    .portfolioSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    .portfolioGrigSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    /* Blog Detail */
    .blogDetailSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    .blogDetailHeader h1 {
        font-size: var(--s-fs-blog-detail-title-sm);
    }

    .blogDetailMeta {
        gap: 12px;
        font-size: var(--s-fs-caption);
    }

    .blogDetailHero {
        border-radius: var(--r-br-3xl);
    }

    .blogDetailThumb {
        border-radius: var(--r-br-2xl);
    }

    /* CTA */
    .ctaSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    .ctaSec .container .row {
        width: 100%;
    }

    .ctaSec br {
        display: none;
    }

    /* Statics */
    .statics {
        flex-wrap: wrap;
        gap: 26px;
    }

    .aboutImg {
        margin-bottom: 26px;
    }

    .aboutHighlighter {
        background-size: contain;
        background-position: right bottom;
    }

    /* Testimonials */
    .testimonialsSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    .testimonialContent {
        text-align: center;
        align-items: center;
    }

    .testimonialNav {
        display: none;
    }

    .testimonialDots {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 16px;
    }

    .testimonialDot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--c-border-soft-2);
        border: 1px solid var(--c-text-muted-2);
        scale: 1;
        filter: none;
    }

    .testimonialDot:hover,
    .testimonialDot:focus-visible {
        background: var(--c-text-muted-2);
        scale: 1.1;
        filter: none;
    }

    .testimonialDot.is-active {
        background: var(--c-fc-Nav_active);
        border-color: var(--c-fc-Nav_active);
    }

    .testimonialMedia::before {
        width: 100%;
        left: 0;
    }

    /* services Hero */
    .imgMainWrap {
        overflow: hidden;
        margin-bottom: 32px;
    }

    /* Contact */
    .contactMainSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    .contactHeroCard {
        right: 14px;
        bottom: 14px;
    }

    .contactQuick {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .contactQuickItem {
        min-width: 0;
        width: 100%;
    }

    .contactQuickItem:last-child {
        grid-column: 1 / -1;
    }

    .contactFormCard {
        padding: 28px;
    }

    /* FAQ */
    .faqSec {
        padding: var(--s-sp-Section_Padding-mob);
    }

    .faqMedia {
        /* max-width: 520px; */
        margin: 0 auto;
    }

    .faqList .accordion-body {
        max-width: none;
    }

    .faqMedia img {
        margin-top: 24px;
    }
}

@media only screen and (max-width:767px) {
    .backToTop {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
        font-size: var(--s-fs-xxs);
    }

    .pGrid-card--featured .pGrid-overlay,
    .pGrid-card--featured::after {
        opacity: 1;
        transform: none;
    }

    .pGrid-twoLong-twoSmall {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, minmax(200px, 1fr));
        grid-template-areas:
            "left"
            "left"
            "mid1"
            "mid2"
            "right"
            "right";
        gap: 18px;
    }

    .pGrid-threeSmall {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(200px, 1fr);
        gap: 18px;
    }

    .pGrid-overlay,
    .pGrid-card::after {
        opacity: 1;
        transform: none;
    }

    .pGrid-card::after {
        background: linear-gradient(180deg, var(--c-overlay-0) 0%, var(--c-overlay-0) 65%, var(--c-overlay-55) 80%, var(--c-overlay-85) 100%);
    }

    .workProgressSec .scrollContainerWrap {
        padding: 24px 44px 24px 24px;
    }

    .workProgressSec .processItem {
        gap: 16px;
    }

    .workProgressSec .processIcon {
        width: 64px;
        height: 64px;
    }

    .workProgressSec .processIcon img {
        width: 30px;
        height: 30px;
    }

    .workProgressSec .processCopy h4 {
        font-size: var(--s-fs-p1);
    }

    /* Contact */
    .contactHeroCard {
        position: static;
        margin-top: 12px;
        width: fit-content;
    }

    .contactQuick {
        grid-template-columns: 1fr;
    }

    .contactQuickItem {
        width: 100%;
    }

    .contactQuickItem:last-child {
        grid-column: auto;
    }

    .contactFormCard {
        padding: 24px;
    }

    /* FAQ */
    .faqList .accordion-button {
        font-size: var(--s-fs-p2);
    }

    .faqList .accordion-button::after {
        width: 22px;
        height: 22px;
    }

    /* PNF */
    .pnfSec .pnfContex {
        padding: 35px;
        border-radius: 30px;
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .pGrid-twoLong-twoSmall {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(200px, 1fr));
        grid-template-areas:
            "left left left left mid1 mid1 mid1 mid1 right right right right"
            "left left left left mid2 mid2 mid2 mid2 right right right right";
        gap: 24px;
    }

    .pGrid-threeSmall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(200px, 1fr);
        gap: 24px;
    }
}