/* ========== RESPONSIVE.CSS ========== */

@media (min-width: 901px) {
    .nav-links {
        align-self: stretch;
    }

    .nav-item {
        display: flex;
        align-items: center;
        align-self: stretch;
        /* nav-inner sits inset within .nav's own padding, so stretching to fill
       nav-inner alone still falls short of .nav's real bottom edge (where the
       mega menu starts) by exactly .nav's bottom padding — bridge that with
       padding + a canceling negative margin so the hit-box reaches it without
       adding visual space or pushing the row taller. */
        padding-bottom: 22px;
        margin-bottom: -22px;
    }

    .nav-mega-trigger {
        height: 100%;
    }
}

@media (max-width: 1439.9px) {
    /* .floaty-cloud {
        display: none;
    } */

    .fc8{
        right: -65px;
    }
    .fc5{
        left: -65px;
    }
}

@media (max-width: 1280.9px){
    .fc1{
        left: -20px;
    }
    .fc5{
        left: -25px;
    }
    .fc2{
        left: 34%;
    }
    .fc6{
        left: -25px;
    }
    .fc11{
        right: -20px;
    }
    .fc8{
        right: -10px;
    }
    .fc9{
        right: 20%;
    }
    .fc10{
        right: -40px;
    }
}

@media (max-width: 1200.9px){
    .fc1{
        left: 10px;
    }
    .fc5{
        left: 25px;
    }
    .fc2{
        left: 33%;
    }
    .fc6{
        left: 25px;
    }
    .fc11{
        right: 20px;
    }
    .fc8{
        right: 10px;
    }
    .fc9{
        right: 20%;
    }
    .fc10{
        right: 10px;
    }
}

@media (max-width: 1199.9px) {
    .mega-col {
        min-width: 150px;
        padding: 0 14px;
    }

    .mega-col-shaded {
        flex-basis: 190px;
    }

    .sc-card-top {
        padding: 20px 14px;
    }

    .sc-light {
        padding: 16px;
    }

    .sc-card-title,
    .sc-big {
        font-size: 18px;
    }

    .sc-sub {
        font-size: 12px;
        font-weight: normal;
    }

}


@media (max-width: 1199.9px) {
    .nav-cta .btn-ghost {
        display: none;
    }

    .showcase-frame {
        padding: 64px 0px;
    }

    .sc-card-cta {
        padding: 12px;
        font-size: 12px;
    }

    .sc-card-cta svg {
        width: 14px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .ticker-track {
        animation: none;
    }

    .floaty-cloud {
        animation: none;
    }

    .title-cloud {
        animation: none;
        transform: translate(-50%, 0);
    }

    .btn-glow::before {
        animation: none;
    }

    .sc-card-cta,
    .sc-card-cta::after,
    .sc-dark .sc-photo-img,
    .sc-light .sc-illustration {
        transition: none;
    }

    .compare-tabs {
        transition: opacity .2s linear;
    }

    .compare-panel {
        transition: opacity .15s linear;
        transform: none;
    }

    .compare-arrow svg {
        animation: none;
    }

    .industries-video-play::before {
        animation: none;
    }

    .work-track {
        animation: none;
    }

    .testi-card.is-active {
        animation: none;
    }

    .location-ring {
        animation: none;
        opacity: 0;
    }

    .svc-tech-panel.is-active {
        animation: none;
    }
}

@media (max-width: 1080.9px) {
    .showcase-content{
        margin-bottom: 24px;
    }

    .sc-card-title,
    .sc-big {
        font-size: 24px;
    }

    .sc-sub {
        font-size: 16px;
    }

    .sc-dark {
        min-height: 360px;
    }

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

    .industries-video {
        /* grid-column: 1 / -1; */
        min-height: 320px;
    }

    .pricing-card-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .svc-feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

@media (max-width: 991.9px) {
    .floaty-cloud {
        display: none;
    }
    .nav-links {
        position: absolute;
        top: calc(100% + 8px);
        left: 16px;
        right: 16px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    .nav-links.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links a {
        padding: 12px 14px;
        border-radius: 8px;
    }

    .nav-links a:hover {
        background: var(--bg-soft);
    }

    .nav-cta-mobile {
        display: inline-flex;
        margin-top: 6px;
    }

    .nav-mobile-contact {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 8px;
    }

    .nav-cta {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-mega-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 12px 14px;
        border-radius: 8px;
    }

    .nav-mega-trigger:hover {
        background: var(--bg-soft);
    }

    .mega-menu {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        inset: auto;
        width: 100%;
        padding-top: 0;
        transform: none;
        display: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-item.is-open .mega-menu {
        display: block;
    }

    .nav-item:hover .mega-menu,
    .nav-item.is-open .mega-menu {
        transform: none;
    }

    .mega-menu-inner {
        flex-direction: column;
        max-width: none;
        margin: 2px 0 0;
        padding: 6px;
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .mega-col {
        width: 100%;
        min-width: 0;
        flex: none;
        padding: 14px 8px 6px;
    }

    .mega-col:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .mega-col-shaded {
        background: none;
        border-radius: 0;
        padding: 14px 8px 6px;
        margin-left: 0;
    }

    .compare-arrow {
        /* transform: translate(-50%, -50%) rotate(90deg); */
    }

    .compare-grid {
        grid-template-columns: 1fr 1fr;
    }
    .mock-overlap{
        height: auto;
    }
    .compare-visual {
        max-width: 420px;
        margin-inline: auto;
    }

    .industries-area {
        padding: 80px 0;
    }

    .industries-video {
        grid-column: 1 / -1;
    }

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

    .industries-tabs {
        /* flex-direction: row; */
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .industry-tab {
        white-space: nowrap;
    }

    .industry-tab svg {
        display: none;
    }

    .industry-panel {
        height: auto;
        padding: 26px 22px;
    }

    .testi-card {
        flex-direction: column;
    }

    .testi-quote-side,
    .testi-stat-side {
        flex: none;
        padding: 38px 30px;
    }

    .testi-quote-side::before {
        font-size: 160px;
        top: -30px;
    }

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

    .location-visual {
        max-width: 220px;
        margin-bottom: 24px;
    }

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

    .footer-brand {
        grid-column: 1 / -1;
    }

    .smm-platform-float {
        display: none;
    }

    .svc-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .svc-tech-panel{
        gap: 32px;
    }
    .svc-float-card {
        position: static;
        margin-top: 24px;
        max-width: 340px;
        margin-inline: auto;
    }

    .svc-calc-body {
        grid-template-columns: 1fr;
    }

    .svc-calc-summary {
        position: static;
    }

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

@media (max-width: 780px) {
    .pricing-design-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card-wide-row {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .pricing-card-wide-action {
        width: auto;
    }

    .pricing-card-wide-action .btn {
        margin-top: 0;
    }

    .pricing-card-features-grid {
        grid-template-columns: 1fr;
    }

    .smm-testi-grid {
        grid-template-columns: 1fr;
    }

    .pricing-table-wrap {
        display: none;
    }

    .pricing-plan-cards {
        display: flex;
    }
}

@media (max-width: 640px) {

    .topbar-inner {
        padding: 6px 16px;
        gap: 10px;
    }

    .topbar-email {
        font-size: 12px;
        gap: 6px;
    }

    .topbar-social {
        gap: 10px;
    }

    .fc2,
    .fc4,
    .fc5,
    .fc6,
    .fc7,
    .fc8,
    .fc9,
    .fc10,
    .fc11,
    .fc12 {
        display: none;
    }

    .compare-section {
        padding: 76px 0;
    }

    .compare-card {
        padding: 20px;
        border-radius: var(--radius-lg);
    }

    .compare-top h3 {
        font-size: 14px;
        max-width: none;
    }

    .compare-tag {
        font-size: 11px;
        padding: 5px 10px;
        margin-bottom: 8px;
    }

    .compare-badge {
        width: 32px;
        height: 32px;
    }

    .compare-badge svg {
        width: 16px;
        height: 16px;
    }

    .compare-arrow {
        width: 40px;
        height: 40px;
    }

    .compare-arrow svg {
        width: 18px;
        height: 18px;
    }

    .mock-overlap {
        height: 220px;
        border-radius: var(--radius-md);
    }

    .mock-overlap-tall {
        height: 230px;
    }

    .showcase-frame {
        padding-top: 130px;
        margin: 10px;
        border-radius: 26px;
    }

    .showcase-cards.swiper {
        margin-top: 44px;
        padding: 4px 24px 40px;
    }

    .sc-dark {
        min-height: 0;
        padding-bottom: 0;
    }

    .sc-light {
        height: auto;
        padding: 28px 20px;
    }

    .sc-photo-img {
        height: 220px;
    }

    .industries-area {
        padding: 64px 0;
    }

    .industries-video {
        min-height: 240px;
    }

    .pricing-table {
        grid-template-columns: minmax(150px, 1.4fr) repeat(4, minmax(96px, 1fr));
        min-width: 620px;
    }

    #pricing-panel-video .pricing-table {
        grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(110px, 1fr));
        min-width: 480px;
    }

    .pricing-table-cell {
        padding: 12px 8px;
    }

    .pricing-table-label {
        font-size: 13px;
    }

    .pricing-table-value {
        font-size: 12.5px;
    }

    .pricing-mode-toggle-inline {
        display: none;
    }

    .pricing-mode-toggle-standalone,
    .pricing-mode-panel[data-mode="onetime"]>.pricing-mode-toggle {
        display: flex;
        width: 100%;
        margin: 0 0 16px;
    }

    .pricing-mode-toggle-standalone .pricing-mode-btn,
    .pricing-mode-panel[data-mode="onetime"]>.pricing-mode-toggle .pricing-mode-btn {
        flex: 1;
        padding: 12px 10px;
        font-size: 13.5px;
    }

    .pricing-section {
        padding: 64px 0;
    }

    .pricing-card-row {
        grid-template-columns: 1fr;
    }

    .pricing-card-wide {
        padding: 28px 22px;
    }

    .pricing-cat-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .pricing-cat-tab {
        white-space: nowrap;
    }

    .pricing-section {
        padding: 70px 0 80px;
    }

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

    .work-section {
        padding: 70px 0 70px;
    }

    .work-card {
        width: 250px;
    }

    .work-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .testimonial-section {
        padding: 70px 0 80px;
    }

    .testi-quote {
        font-size: 19px;
    }

    .testi-stat {
        font-size: 44px;
    }

    .testi-logos {
        gap: 10px 8px;
    }

    .testi-logo {
        font-size: 15px;
        padding: 7px 13px;
    }

    .faq-section {
        padding: 70px 0 80px;
    }

    .blog-home-section {
        padding: 70px 0 70px;
    }

    .blog-home-swiper.swiper {
        margin-top: 36px;
    }

    .faq-q {
        padding: 18px 20px;
        font-size: 15px;
        gap: 14px;
    }

    .faq-a-inner p {
        padding: 0 20px 20px;
    }

    .footer {
        padding: 48px 0 0;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 16px;
    }

    .footer-grid > .footer-brand {
        order: 1;
    }

    .footer-grid > .footer-col:nth-child(1) {
        order: 3;
    }

    .footer-grid > .footer-col:nth-child(2) {
        order: 2;
    }

    .footer-grid > .footer-col:nth-child(3) {
        order: 4;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .svc-icon-row {
        gap: 36px;
        padding-top: 40px;
    }

    .svc-hero {
        padding: 28px 0 60px;
    }

    .svc-hero-stats {
        gap: 22px;
        flex-wrap: wrap;
    }

    .svc-features {
        padding: 60px 0;
    }

    .svc-feature-grid {
        grid-template-columns: 1fr;
    }

    .svc-included-list {
        grid-template-columns: 1fr;
    }

    .svc-type-tabs {
        flex-direction: column;
        border-radius: var(--radius-md);
    }

    .svc-type-tab {
        flex-direction: row;
        justify-content: space-between;
        padding: 12px 16px;
        border-radius: 10px;
    }

    .svc-addon-grid {
        grid-template-columns: 1fr;
    }

    .smm-platforms-row {
        gap: 36px;
        padding-top: 40px;
    }

    .svc-tech {
        padding: 60px 0 70px;
    }

    .svc-tech-tabs {
        gap: 20px;
    }

    .svc-tech-panel {
        gap: 36px;
        padding-top: 40px;
    }

    .legal-hero {
        padding: 28px 0 32px;
    }

    .legal-section {
        padding: 44px 0 70px;
    }

    .team-hero {
        padding: 28px 0 40px;
    }

    .team-section {
        padding: 56px 0 70px;
    }

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

    .team-cta,
    .blog-cta {
        padding: 0 0 70px;
    }

    .team-cta-panel,
    .blog-cta-panel {
        padding: 48px 24px;
    }

    .blog-section {
        padding: 56px 0 70px;
    }

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

    .blog-details-section {
        padding: 24px 0px;
    }

    .blog-details-cover img {
        max-height: 260px;
    }

    .blog-author-box {
        flex-direction: column;
        text-align: center;
    }

    .blog-related {
        padding-top: 56px;
    }
}

@media (max-width: 480px) {
    
    .pricing-industry-grid {
        grid-template-columns: 1fr;
    }

    .pricing-design-card .pricing-card-wide-action {
        flex-direction: column;
        align-items: stretch;
    }

    .pricing-design-card .pricing-card-wide-action .btn {
        width: 100%;
    }

    .topbar-inner {
        padding: 6px 12px;
    }
    .topbar-email span {
        /* display: none; */
    }
    .container{
        padding-inline: 16px;
    }
    .section-head{
        margin-bottom: 32px;
    }
    .svc-phone-frame {
        width: 225px;
        height: 468px;
    }

    .svc-wp-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .svc-wp-hero-visual {
        min-height: 60px;
    }

    .showcase-frame{
        padding: 36px 0px;
    }
    .showcase-content h1{
        /* height: 190px; */
        font-size: 36px;
    }
    .showcase-sub{
        font-size: 14px;
        font-weight: 400;
    }
    .showcase-content h1 br{
        display: none;
    }
    .showcase-content{
        margin-bottom: 0;
    }
    .faq-section, .location-area, .testimonial-section, .work-section, .pricing-section, .industries-area, .compare-section, .blog-home-section{
        padding: 36px 0px;
    }
    .compare-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        height: 230px;
    }
    .compare-card {
        padding: 12px;
        border-radius: var(--radius-md);
    }
    .compare-top h3 {
        font-size: 11px;
        max-width: none;
    }
    .compare-tag {
        font-size: 9px;
        padding: 3px 8px;
        margin-bottom: 6px;
    }
    .compare-badge {
        width: 24px;
        height: 24px;
    }
    .compare-badge svg {
        width: 12px;
        height: 12px;
    }
    .compare-arrow {
        width: 30px;
        height: 30px;
    }
    .compare-arrow svg {
        width: 14px;
        height: 14px;
    }
    .compare-visual {
        margin-top: 12px;
        gap: 10px;
    }
    .mock-overlap {
        height: inherit !important;
        border-radius: var(--radius-sm);
    }
    .mock-overlap-tall {
        height: 148px;
    }
    .industries-grid {
        grid-template-columns: 1fr;
    }
    .industries-tabs{
        flex-direction: row;
    }
    .pricing-plan-card-head{
        border-bottom: 0px;
        margin-bottom: 0;
    }
    .pricing-card-wide .pricing-plan-price{
        margin-bottom: 24px;
    }
    .location-chip-grid{
        justify-content: center;
    }
    .location-chip{
        font-size: 12px;
    }
    .svc-hero-grid{
        grid-template-columns: 1fr;
    }
    .svc-hero-actions{
        flex-wrap: nowrap;
    }
    .svc-hero-actions .btn{
        font-size: 13px;
        padding: 12px 16px;
        gap: 4px;
    }
    .svc-hero{
        padding: 16px 0px 36px;
    }
    .svc-features, .svc-tech{
        padding: 36px 0px;
    }
    .svc-tech-panel{
        gap: 14px;
    }
    .svc-tech-item b{
        font-size: 13px;
    }
    .svc-tech-item{
        width: 96px;
    }
    .smm-platforms-row, .svc-icon-row{
        gap: 24px;
    }
    .blog-section, .team-section, .svc-pricing{
        padding: 36px 0px;
    }
    .compare-badge{
        display: none;
    }
}