/*=============================================
  RESPONSIVE CSS - Optimized with CSS Variables
  Typography Scale & Layout Breakpoints
=============================================*/

/*--------- Typography Variables per Breakpoint -----------*/
:root {
    /* Desktop (Default) */
    --h1-size: 72px;
    --h1-line: 83px;
    --h2-size: 52px;
    --h2-line: 62px;
    --h3-size: 30px;
    --h3-line: 36px;
    --p-size: 24px;
    --p-line: 36px;
    --btn-size: 22px;
    --small-size: 18px;
    --section-padding: 80px;
    --container-gap: 60px;
}

/*--------- For Large Desktop Device -----------*/

/* 2050 to 2559 */
@media only screen and (min-width: 2050px) {}

/* Greater than 2560*/
@media only screen and (min-width: 2560px) {}

/*--------- For Small Desktop Device (1440-1919) -----------*/

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

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

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

    :root {
        --h2-size: 48px;
        --h2-line: 56px;
        --section-padding: 70px;
        --container-gap: 50px;
    }

    h2 {
        font-size: var(--h2-size);
        line-height: var(--h2-line);
    }

    p {
        font-size: var(--p-size);
        line-height: var(--p-line);
    }

    .services-section .services-slider .card-content-container {
        width: 65%;
    }

    .services-section .card-image-wrapper {
        width: 35%;
    }

    .why-choose-section .accordion-panel .accordion-item.active .item-content {
        margin-top: 30px;
    }

    .showcase-section .project-info {
        gap: 0;
    }

    .about-section .about-container {
        gap: var(--container-gap);
    }

    .footer-left-container .footer-widgets {
        display: flex;
        flex-direction: column;
        gap: 14px;
        flex-basis: 30%;
    }

    .footer-left-container .footer-widgets.contact-info {
        flex-basis: 40%;
    }

    .footer-right-container .footer-info {
        height: auto;
    }

    .services-section .section-header p {
        width: 70%;
    }
}

/*--------- For Tablet Device (1024-1365) -----------*/

@media only screen and (max-width: 1365px) {
    :root {
        --h2-size: 44px;
        --h2-line: 52px;
        --p-size: 22px;
        --p-line: 34px;
        --section-padding: 70px;
        --container-gap: 50px;
    }

    h2 {
        font-size: var(--h2-size);
        line-height: var(--h2-line);
    }

    .testimonials-section .testimonial-title-content h2 {
        line-height: var(--h2-line);
    }

    .common-hero-section.hero-section .hero-content h1 {
        width: 80%;
    }

    .common-hero-section.hero-section .hero-content p {
        width: 90%
    }

    p {
        font-size: var(--p-size);
        line-height: var(--p-line);
    }

    .testimonials-section .testimonial-title-content p,
    .testimonials-section .testimonial-title-content .section-tag {
        line-height: var(--p-line);
    }

    .site-container {
        /* max-width: 1140px; */
        max-width: 1224px;
        padding: 0 20px;
        width: 100%;
    }

    .site-common-padding {
        padding: var(--section-padding) 0;
    }

    .woocommerce-checkout footer .site-container.site-common-padding {
        padding: var(--section-padding) 0;
    }

    .about-section .about-content h2 {
        width: 100%;
        line-height: 50px;
    }

    .testimonials-section .testimonials-container,
    .about-section .about-container {
        gap: var(--container-gap);
    }

    .footer-right-container {
        padding: 0px;
    }

    .why-choose-section .accordion-panel {
        gap: 80px;
    }

    .testimonials-section .testimonial-title-content p,
    .testimonials-section .testimonial-title-content .section-tag {
        width: 100%;
    }

    .services-section .section-header p {
        width: 70%;
    }

    .common-hero-section.hero-section .hero-left-container {
        width: 60%;
    }

    .common-hero-section.hero-section .hero-right-container {
        width: 40%;
    }

    .common-hero-section.hero-section .hero-right-container img {
        height: auto;
    }

    .common-hero-section.hero-section .hero-left-container,
    .common-hero-section.hero-section .hero-right-container {
        margin-top: 140px;
    }
}

@media only screen and (max-width: 1279px) {
    .site-container {
        max-width: 1010px;
        padding: 0 var(--container-padding);
    }

    .site-common-padding {
        padding: var(--section-padding) 0;
    }

    .footer-left-container .footer-widgets {
        display: flex;
        flex-direction: column;
        gap: 14px;
        flex-basis: 25%;
    }

    .footer-left-container .footer-widgets.contact-info {
        flex-basis: 50%;
    }

    .site-footer .footer-brand-container {
        padding: 0px;
    }

    body.blog .blog-section .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 25px;
    }

    body.page-template-case-study .showcase-section .projects-grid {
        gap: 30px;
    }

    .why-choose-section .accordion-panel {
        gap: 60px;
    }

    .why-choose-section .image-panel img#dynamic-image {
        height: auto;
    }

    .header-profile-btn-container,
    .main-navigation ul {
        gap: 15px;
    }

    .send-inquiry-btn {
        padding: var(--spacing-xs) 10px;
        font-size: 16px;
    }

    .hero-section .hero-content p {
        width: 70%;
    }

    .cta-section .cta-content-container {
        width: 75%;
    }

    .hero-section .hero-content h1 {
        font-size: 56px;
    }

    .showcase-section .project-info .project-arrow {
        display: none;
    }

    .showcase-section .projects-grid {
        gap: 25px;
    }

    .showcase-section .projects-grid .project-info h3,
    .showcase-section .projects-grid .project-info h3 a {
        font-size: 26px;
        line-height: 35px;
    }

    .common-hero-section.hero-section .hero-left-container,
    .common-hero-section.hero-section .hero-right-container {
        width: 50%;
    }

    .common-hero-section.hero-section .hero-content h1 {
        width: 100%;
    }

    .founded-section .content-container {
        width: 70%;
    }

    body.page-template-about-us-page .image-container img {
        width: 100%;
    }
}

@media only screen and (max-width: 1080px) {
    .testimonials-section .testimonials-container {
        flex-direction: column-reverse;
        align-items: start;
    }

    .about-section .about-container {
        flex-direction: column;
    }

    .contact-us-page-form .form-container form .input-container {
        gap: 10px;
    }

    .common-hero-section.hero-section .hero-content h1 {
        width: 90%;
    }

    .common-hero-section.hero-section .hero-content p,
    .testimonials-section .testimonial-card {
        width: 100%
    }

    .footer-right-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*--------- For Tablet (768-1023) -----------*/

@media only screen and (max-width: 1023px) {
    :root {
        --h1-size: 60px;
        --h1-line: 70px;
        --h2-size: 40px;
        --h2-line: 42px;
        --h3-size: 28px;
        --h3-line: 32px;
        --p-size: 22px;
        --p-line: 34px;
        --btn-size: 20px;
        --section-padding: 60px;
        --container-gap: 40px;
    }

    /* Common Typography */
    h2 {
        font-size: var(--h2-size);
        line-height: var(--h2-line);
    }

    h3 {
        font-size: var(--h3-size);
        line-height: var(--h3-line);
    }

    p {
        font-size: var(--p-size);
        line-height: var(--p-line);
    }

    body.page-template-about-us-page .hero-left-container h1,
    body.page-template-careers-page .hero-left-container h1,
    body.single-services .hero-left-container h1 {
        font-size: var(--h1-size);
        line-height: var(--h1-line);
    }

    /* Container */
    .site-container {
        max-width: 960px;
        padding: 0 20px;
    }

    .site-common-padding {
        padding: var(--section-padding) 0;
    }

    /* Mobile Menu Style Start */
    .site-header.home-page-site-header {
        padding: 0px;
        position: unset;
        background: var(--color-primary, #4e2bcd);
        border-bottom: 1px solid #d8cff787;
    }

    .site-header .site-container {
        border-radius: 0px;
        flex-wrap: wrap;
        position: relative;
    }

    .site-branding {
        flex: 1;
    }

    .mobile-menu-toggle.menu-icon {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1001;
    }

    .mobile-menu-toggle.menu-icon.active {
        filter: brightness(1) invert(1);
        position: fixed;
        top: 10px;
        right: 10px;
    }

    .hamburger-line {
        width: 25px;
        height: 3px;
        background-color: var(--color-light, #efefef);
        transition: var(--transition-base, 0.3s ease);
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    .desktop-inquiry-btn {
        display: none;
    }

    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100%;
        background: var(--color-white, #fff);
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transition: right var(--transition-base, 0.3s ease);
        z-index: 1000;
        padding: 80px 20px 20px;
    }

    .main-navigation.active {
        right: 0;
        background-color: var(--color-white, #fff);
    }

    .main-navigation #primary-menu {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .main-navigation #primary-menu li {
        border-bottom: 1px solid #eee;
        margin-top: 20px;
    }

    .main-navigation #primary-menu li a {
        display: block;
        text-decoration: none;
        color: var(--color-dark, #0b0b0b);
    }

    /* Overlay */
    .main-navigation.active::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: rgba(255, 255, 255, 0.5);
    }

    .send-inquiry-btn.mobile-inquiry-btn {
        background: var(--color-dark, #0b0b0b);
        color: var(--color-white, #ffffff);
        display: block;
        margin-top: 20px;
        text-align: center;
    }

    .header-profile-btn-container-mobile {
        display: block;
    }

    .send-inquiry-btn.mobile-inquiry-btn:hover {
        background: var(--color-primary, #4e2bcd);
    }

    /* Mobile Menu Style End */

    /* Hero Section */
    .hero-section {
        /* height: 750px; */
        height: auto;
        padding: 50px 0px;
    }

    .hero-section .hero-content h1 {
        font-size: var(--h1-size);
        line-height: var(--h1-line);
    }

    .hero-section .hero-content p {
        line-height: var(--p-line);
    }

    .hero-section .hero-content {
        gap: 30px;
    }

    body:not(.blog) .blog-section .blog-card {
        width: 100%;
    }

    .services-section .services-silder-navigation {
        display: none;
    }

    .services-section .services-slider .service-card {
        flex-direction: column-reverse;
    }

    .services-section .services-slider .service-card.reverse {
        flex-direction: column;
        margin-top: 30px;
    }

    body.home .services-section .services-slider {
        flex-direction: column;
        gap: 30px;
        overflow: unset;
        margin-top: 40px;
    }

    .services-section .services-slider .card-content-container,
    .services-section .card-image-wrapper {
        width: 100%;
    }

    .services-section .card-image-wrapper img {
        width: 100%;
        aspect-ratio: 190/157;
    }

    .common-hero-section.hero-section .hero-content h1 {
        width: 100%;
    }

    .common-hero-section.hero-section .hero-left-container,
    .common-hero-section.hero-section .hero-right-container {
        margin-top: 50px;
    }

    .common-hero-section.hero-section {
        height: 550px;
    }

    /* Why Choose VeyondTech */
    .why-choose-section .accordion-panel {
        flex-direction: column;
    }

    .why-choose-section .accordion-panel .accordion-item {
        padding: 20px 24px;
    }

    .why-choose-section .accordion-panel .accordion {
        width: 100%;
    }

    /* Show Case */
    .showcase-section .projects-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    /* Testimonial */
    .testimonials-section .testimonials-container {
        flex-direction: column;
    }

    .testimonials-section .testimonial-card {
        order: 2;
        background-size: cover;
        width: 100%;
        z-index: 1;
    }

    .testimonials-section .testimonial-title-content {
        order: 1;
    }

    /* About Us Section */
    .about-section .about-container {
        flex-direction: column;
    }

    .about-section .about-content .about-text {
        gap: 10px;
    }

    /* Blog Section */
    .blog-section .site-container {
        gap: var(--container-gap);
        display: flex;
        flex-direction: column;
    }

    .btn-view-more-dark {
        font-size: var(--btn-size);
    }

    .btn-view-more-dark img {
        width: 35px;
    }

    body:not(.blog) .blog-section .blog-grid {
        flex-direction: column;
    }

    .blog-section .blog-grid .blog-card img {
        max-height: fit-content;
    }

    /* CTA Section */
    .cta-section .cta-bg-right {
        left: auto;
    }

    .cta-section .cta-container {
        padding: 0 var(--container-padding);
    }

    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        padding: 0px 24px;
    }

    .footer-right-container {
        order: 2;
        justify-content: center;
        text-align: center;
    }

    .footer-left-container {
        order: 1;
    }

    .footer-right-container .footer-info {
        margin: 0 auto;
    }

    .contact-us-page-form .site-container {
        flex-direction: column-reverse;
    }

    .map-section {
        padding: 0px 20px 20px 20px;
    }

    .header-profile-btn-container {
        display: none;
    }

    body.single-post .site-container.single-blog-container,
    body.single-services .site-container.single-services-container,
    body.single-project-work .site-container.single-blog-container {
        display: grid;
    }

    body.single-post .content-area.left-container,
    body.single-post .site-container.single-blog-container .right-container,
    body.single-services .content-area.left-container,
    body.single-services .site-container.single-services-container .right-container,
    body.single-project-work .content-area.left-container,
    body.single-project-work .site-container.single-blog-container .right-container {
        width: 100%;
    }

    .vt-split-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .vt-split-image img {
        height: auto;
    }

    .vt-services-section {
        padding: var(--spacing-md) 0;
    }

    .job-post-section .site-container {
        flex-direction: column;
    }

    .job-post-section .left,
    .job-post-section .right {
        width: 100%;
    }

    .job-post-section .left {
        position: unset;
        height: auto;
    }

    .job-post-section .left-content-container .image-description {
        position: unset;
        margin-top: 20px;
        width: 100%;
    }

    .job-post-section .left img,
    .job-post-section .left-content-container {
        height: auto;
    }

    /* .founded-section.site-common-padding,
    .support-section.site-common-padding {
        padding-bottom: 0px;
    } */

    .founded-section .site-container {
        flex-direction: column;
    }

    .support-section .site-container {
        flex-direction: column-reverse;
    }

    .founded-section .image-container,
    .founded-section .image-container img,
    .support-section .image-container,
    .support-section .image-container img {
        width: 100%;
    }

    .common-hero-section.hero-section .hero-left-container {
        width: 50%;
    }

    .founded-section .content-container {
        width: 100%;
    }

    body.page-template-services-page .services-section .services-slider .service-card-row {
        position: unset;
    }

    .common-hero-section.hero-section .hero-left-container h1,
    .common-hero-section.hero-section .hero-content h1 {
        font-size: 40px;
        line-height: 50px;
    }

    .common-hero-section.hero-section .hero-content p {
        font-size: 20px;
        line-height: 30px;
    }

    body.page-template-services-page .service-card-row:first-child .service-card {
        padding-top: 0px !important;
    }

    body.page-template-services-page .service-card {
        padding-top: 20px !important;
    }

    body.page-template-services-page .service-card-row:not(:first-child) {
        margin-top: 0px;
    }

    .vt-split-content .vt-btn {
        margin-top: 0px;
    }
}

@media only screen and (max-width: 959px) {
    .showcase-section .showcase-title {
        max-width: 70%;
    }

    .showcase-section .projects-grid .project-info h3,
    .showcase-section .projects-grid .project-info h3 a {
        font-size: 24px;
        line-height: 28px;
    }

    .footer-left-container .footer-widgets {
        gap: 14px;
    }

    .common-hero-section.hero-section .hero-content h1 {
        font-size: 40px;
        line-height: 45px;
    }
}

@media only screen and (max-width: 799px) {
    .services-section .section-header p {
        width: 80%;
    }

    /* Footer */
    .footer-left-container {
        flex-direction: column;
        gap: 20px;
    }

    .footer-left-container .footer-widgets {
        gap: 15px;
        text-align: center;
    }

    .footer-left-container .contact-info-sub-container {
        justify-content: center;
    }

    .footer-right-container {
        justify-content: center;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .common-hero-section.hero-section .hero-right-container {
        display: none;
    }

    .common-hero-section.hero-section {
        height: 300px;
    }

    .common-hero-section.hero-section .hero-content {
        display: grid;
    }

    .common-hero-section.hero-section .hero-content .hero-left-container {
        width: 100%;
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 0px;
    }

    .showcase-section .showcase-header {
        flex-direction: column;
        gap: 10px;
        align-items: start;
    }

    .showcase-section .showcase-title {
        max-width: 100%;
    }

    .showcase-section .showcase-header .btn.btn-light-purple {
        align-items: start;
    }

    .common-hero-section.hero-section.legal-page-hero .hero-content {
        justify-content: center;
    }

    .trust-index-shortcode .ti-widget.ti-goog {
        text-align: center;
    }
}

/*--------- For Mobile Device (640-767) -----------*/

@media only screen and (max-width: 767px) {
    :root {
        --h1-size: 47px;
        --h1-line: 50px;
        --h2-size: 32px;
        --h2-line: 36px;
        --h3-size: 28px;
        --h3-line: 30px;
        --p-size: 20px;
        --p-line: 30px;
        --btn-size: 20px;
        --small-size: 16px;
        --section-padding: 40px;
        --container-gap: 40px;
    }

    /* Common Typography */
    h2,
    .trusted-by-content h2 {
        font-size: var(--h2-size);
        line-height: var(--h2-line);
    }

    h3 {
        font-size: var(--h3-size);
        line-height: var(--h3-line);
    }

    p {
        font-size: var(--p-size);
        line-height: var(--p-line);
    }

    .common-hero-section.hero-section .hero-left-container h1 {
        font-size: 35px;
        line-height: 40px;
    }

    /* Container */
    .site-container {
        max-width: 100%;
        padding: 0 16px;
        width: 100%;
    }

    .site-common-padding {
        padding: var(--section-padding) 0;
    }

    .site-footer .site-container.site-common-padding {
        padding: var(--section-padding) 16px;
    }

    .site-footer .footer-brand-name img {
        width: 84%;
        max-width: 100%;
    }

    .common-hero-section.hero-section {
        height: 320px;
    }

    /* Hero Section */
    /* .hero-section {
        height: 550px;
    } */

    .hero-section .hero-content h1 {
        font-size: var(--h1-size);
        line-height: var(--h1-line);
    }

    .hero-section .hero-content p {
        width: 100%;
    }

    .hero-actions .btn.btn-primary {
        width: 260px;
    }

    .hero-actions .btn.btn-primary,
    .hero-actions .btn.btn-secondary {
        height: 60px;
        font-size: var(--btn-size);
    }

    .hero-content .hero-btn-icon {
        width: 35px;
        height: 35px;
    }

    body.single-services .content-areas {
        flex-direction: column;
        border-radius: 10px;
        padding: 30px;
    }

    .hero-content .trust-badge img {
        width: 35px;
    }

    .hero-content .trust-badge span {
        width: -webkit-fill-available;
        flex: 1;
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
    }

    /* Other Hero Section */

    .common-hero-section.hero-section {
        height: 400px;
    }

    .common-hero-section.hero-section .hero-content {
        align-items: center;
        height: 100%;
    }

    .common-hero-section.hero-section .hero-left-container {
        margin-top: 0px;
    }

    /* Marquee Section */
    .code-marquee-section {
        min-height: 280px;
    }

    .code-marquee-section .marquee {
        padding: 20px 0px;
        font-size: 30px;
    }

    /* Services Section */
    .services-section .section-header h2 {
        margin-top: 20px;
    }

    .services-section .section-header p {
        width: 80%;
        line-height: var(--p-line);
    }

    /* Why Choose Section */
    .why-choose-section .accordion-panel {
        gap: 50px;
        margin-top: 25px;
    }

    .why-choose-section .accordion-panel .accordion-item .item-header p {
        font-size: var(--btn-size);
    }

    .why-choose-section .accordion-panel .accordion-item,
    .why-choose-section .accordion-panel .accordion-item.active {
        padding: 20px;
    }

    .why-choose-section .accordion-panel .accordion-item:not(.active) .item-header div.arrow,
    .why-choose-section .accordion-panel .accordion-item.active .item-header div.arrow {
        height: 40px;
        width: 40px;
        min-height: 40px;
    }

    .why-choose-section .accordion-panel .accordion-item:not(.active) .item-header div.arrow img,
    .why-choose-section .accordion-panel .accordion-item.active .item-header div.arrow img {
        width: 14px;
    }

    .why-choose-section .accordion-panel .accordion-item.active .item-content {
        margin-top: 30px;
    }

    /* Showcase Section */
    .showcase-section .showcase-title {
        max-width: 100%;
    }

    .showcase-section .showcase-title p {
        line-height: var(--p-line);
    }

    .showcase-section .projects-grid {
        grid-template-columns: 1fr;
    }

    .showcase-section .projects-grid .project-info h3,
    .showcase-section .projects-grid .project-info h3 a {
        font-size: var(--h3-size);
        line-height: var(--h3-line);
    }

    .showcase-section .project-info .project-arrow {
        height: 60px;
        width: 60px;
    }

    .showcase-section .projects-grid,
    .testimonials-section .testimonials-container,
    .about-section .about-container {
        gap: var(--container-gap);
    }

    .showcase-section .showcase-header .btn.btn-light-purple {
        font-size: var(--btn-size);
    }

    /* Testimonials Section */
    .testimonials-section .testimonial-title-content h2 {
        line-height: 40px;
    }

    .testimonials-section .testimonial-title-content p,
    .testimonials-section .testimonial-title-content .section-tag {
        line-height: var(--p-line);
        width: 100%;
    }

    .testimonials-section .testimonial-card {
        z-index: 1;
    }

    /* About Section */
    .about-section .about-content h2,
    .blog-section .blog-title h2,
    .cta-section .cta-container h2 {
        line-height: var(--h2-line);
    }

    .about-section .about-content h2 {
        margin-top: 0px;
    }

    .featured-mint-badge {
        margin-top: 14px;
        padding: 7px 15px;
    }

    .featured-mint-badge img {
        width: 60px;
    }

    .about-section .about-content .about-text {
        margin-top: 15px;
    }

    .about-section .about-content .about-text p {
        font-size: var(--p-size);
        line-height: var(--p-line);
    }

    /* Buttons */
    .why-choose-section .section-title .btn-view-more-dark,
    .blog-section .blog-header .btn-view-more-dark {
        font-size: var(--btn-size);
    }

    .btn-view-more-dark img {
        width: 30px;
    }

    /* Blog Section */
    body:not(.blog) .blog-section .blog-grid {
        flex-direction: column;
        gap: 20px;
    }

    article {
        margin-bottom: 0px;
    }

    /* CTA Section */
    .cta-section {
        min-height: 400px;
        height: auto;
        padding: 60px 0;
    }

    .cta-section .cta-container h2 {
        font-size: var(--h2-size);
    }

    .cta-section .cta-container p {
        margin-top: 10px;
    }

    body.blog .blog-section .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    body.blog .blog-section .blog-grid .blog-card img {
        height: auto;
    }

    .contact-us-page-form .form-container form .name-field-container .input-container {
        flex-direction: column;
    }

    .contact-us-page-form .form-container {
        padding: 30px;
    }

    .contact-us-page-form .form-container .code-container.common-container {
        width: 18%;
    }

    .trusted-by-content p {
        width: 70%;
    }

    .code-marquee-section .marquee-1 {
        transform: translate(-50%, -50%) rotate(-10deg);
    }

    .code-marquee-section .marquee-2 {
        transform: translate(-50%, -50%) rotate(10deg);
    }

    body:not(.home) .showcase-section .projects-grid .project-image img.full-image,
    .showcase-section .projects-grid .project-image img.full-image {
        border-radius: 25px;
    }

    .founded-section .site-container,
    .support-section .site-container {
        display: grid !important;
    }

    .vt-split-section {
        padding: var(--spacing-md) 0;
    }

    .vt-split-content h2 {
        font-size: var(--fs-body);
    }

    .vt-card--intro,
    .vt-card--service {
        width: 85vw;
    }

    .vt-services-section {
        padding: var(--spacing-sm) 0;
    }

    body:not(.blog) .blog-section .blog-card {
        width: 100%;
    }

    .legal-page-content-section {
        padding: 40px 0;
    }

    .legal-page-content-section .single-content-block {
        padding: 30px 0;
    }

    .legal-page-content-section .single-content-block h2 {
        font-size: 19px;
    }

    .legal-page-content-section .single-content-block p {
        font-size: 15px;
    }

    .trusted-by-content p {
        line-height: 30px;
    }

    .error-404.not-found {
        padding: var(--spacing-lg) var(--container-padding);
    }

    .error-404.not-found .error-code {
        font-size: 90px;
    }

    .error-404.not-found .page-title {
        font-size: 24px;
    }

    .error-404.not-found .search-form {
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
        gap: 12px;
    }

    .error-404.not-found .search-form .search-field {
        width: 100%;
        background: var(--color-gray-light);
        border: 1.5px solid #d1d5db;
        border-radius: var(--radius-full);
        padding: 12px 18px;
    }

    .error-404.not-found .search-form .search-submit {
        width: 100%;
    }

    body.search .content-area article {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        row-gap: 14px;
    }

    body.search .content-area article .entry-header,
    body.search .content-area article .post-thumbnail,
    body.search .content-area article .entry-content,
    body.search .content-area article .entry-footer {
        grid-column: 1;
    }

    body.search .content-area article .entry-header {
        grid-row: 1;
    }

    body.search .content-area article .post-thumbnail {
        grid-row: 2;
        height: auto;
    }

    body.search .content-area article .entry-content {
        grid-row: 3;
    }

    body.search .content-area article .entry-footer {
        grid-row: 4;
    }

    body.search .content-area .entry-title {
        font-size: 19px;
    }

    body.search .posts-navigation .nav-links {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .website-bg-logo {
        display: none;
    }

    .site-footer .footer-brand-container .footer-bottom {
        padding-bottom: 25px;
    }

    .site-container.my-account-site-container,
    .site-container.checkout-site-container {
        padding-bottom: 40px !important;
        padding-top: 40px !important;
    }

    .woocommerce .woocommerce-MyAccount-content {
        margin-top: 20px;
    }

    .blog-section.site-common-padding {
        padding-top: 40px;
    }

    body.post-type-archive-product .site-container.shop-page,
    body.single-product .site-container.shop-page {
        padding: 40px 16px;
    }

    .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions::before {
        margin-top: 10px !important;
    }

    .code-marquee-section .marquee-content {
        gap: 15px;
        font-size: 22px;
        line-height: 32px;
    }

    .code-marquee-section .marquee {
        padding: 15px 0px;
    }

    body.page-template-about-us-page .support-section .site-container {
        padding: 40px 16px;
    }

    .vt-product-top-row,
    .vt-single-product-wrapper,
    .vt-product-bottom-row {
        gap: 20px;
    }

    .vt-product-bottom-row {
        display: flex;
        flex-direction: column-reverse;
    }

    .woocommerce-order-pay .content-area {
        padding: 30px 20px;
    }

    .woocommerce-order-pay ul.order_details {
        gap: 20px;
    }

    #btn-razorpay,
    #btn-razorpay-cancel {
        width: 100%;
        margin: 0 0 12px;
    }

    body.woocommerce-order-received .content-area {
        padding: 30px 20px;
    }

    .woocommerce-order ul.woocommerce-order-overview {
        gap: 22px;
    }

    .woocommerce-order h2 {
        font-size: 20px;
    }

    .woocommerce-order table.shop_table {
        font-size: 14px;
    }

    .woocommerce-order table.shop_table td,
    .woocommerce-order table.shop_table thead th,
    .woocommerce-order table.shop_table tbody th {
        padding: 12px 14px;
    }

    .woocommerce-order table.shop_table_responsive thead {
        display: none;
    }

    .woocommerce-order table.shop_table_responsive,
    .woocommerce-order table.shop_table_responsive tbody,
    .woocommerce-order table.shop_table_responsive tr,
    .woocommerce-order table.shop_table_responsive td {
        display: block;
        width: 100%;
    }

    .woocommerce-order table.shop_table_responsive tr {
        margin-bottom: 14px;
        border: 1px solid rgba(11, 11, 11, 0.08);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .woocommerce-order table.shop_table_responsive td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
        border-top: none;
        border-bottom: 1px solid rgba(11, 11, 11, 0.06);
    }

    .woocommerce-order table.shop_table_responsive td:last-child {
        border-bottom: none;
    }

    .woocommerce-order table.shop_table_responsive td::before {
        content: attr(data-title);
        font-family: var(--font-semibold);
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-gray);
        text-align: left;
    }

    .woocommerce-order table.shop_table:not(.shop_table_responsive) tfoot tr {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid rgba(11, 11, 11, 0.06);
    }

    .woocommerce-order table.shop_table:not(.shop_table_responsive) tfoot th,
    .woocommerce-order table.shop_table:not(.shop_table_responsive) tfoot td {
        flex: none;
        margin: 0;
        border-top: none;
        padding: 12px 14px;
    }

    .woocommerce-order table.shop_table:not(.shop_table_responsive) tfoot td {
        margin-left: auto;
    }

    .woocommerce-order .woocommerce-customer-details address {
        padding: 20px;
    }

    .woocommerce-order-pay ul.order_details li {
        width: 100%;
    }

    .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary {
        padding: 0px;
    }

    .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-totals-coupon,
    .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-totals-item {
        padding-left: 0px;
        padding-right: 0px;
    }

    .wc-block-components-totals-wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .error-404.not-found .search-form:focus-within {
        border-color: unset;
        box-shadow: none;
    }

    .no-results.not-found .page-title {
        font-size: 36px;
    }

    .no-results.not-found .page-content>p {
        font-size: 16px;
    }

    .no-results.not-found .search-form {
        flex-direction: column;
        background: transparent;
        border: unset;
        box-shadow: unset;
        gap: 12px;
    }

    .no-results.not-found .search-form label {
        width: 100%;
    }

    .no-results.not-found .search-form .search-field {
        width: 100%;
        background: var(--color-gray-light);
        border: 1.5px solid #d1d5db;
        border-radius: var(--radius-full);
        padding: 12px 18px;
    }

    .no-results.not-found .search-form .search-submit {
        width: 100%;
        text-align: center;
        padding: 12px 20px;
    }

    .no-results.not-found .search-form:focus-within {
        border-color: unset;
        box-shadow: unset;
    }

    .trusted-by-content h2{
        margin-top: 20px;
    }
}

/*--------- For Small Mobile (540-639) -----------*/

@media only screen and (max-width: 639px) {
    .trusted-by-section {
        height: auto;
    }

    .services-section .services-slider .card-content-container .card-content {
        padding: 25px;
    }

    body.single-services .content-areas .single-thumbnail {
        width: 100%;
    }

    body.single-services .content-areas .single-thumbnail img {
        width: 100%;
        object-fit: cover;
    }

    .trusted-by-content p {
        width: 90%;
    }

    .trusted-by-content .trusted-stats-row {
        gap: 16px 24px;
        flex-wrap: wrap;
        margin: 24px auto 34px;
    }

    .trusted-by-content .stat-divider {
        display: none;
    }

    .trusted-by-content .stat-item {
        min-width: 130px;
    }

    .trusted-by-content .track-title {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .trusted-by-content .client-logo {
        padding: 10px 18px;
        height: 58px;
        min-width: 125px;
    }

    .trusted-by-content .client-logo img {
        max-width: 95px;
        max-height: 34px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 0px;
    }

    .showcase-section .showcase-header,
    .why-choose-section .section-title {
        flex-direction: column;
        gap: 10px;
        align-items: start;
    }

    .showcase-section .showcase-title {
        max-width: 100%;
    }
}

/*--------- For Small Mobile (480-600) -----------*/

@media only screen and (max-width: 600px) {
    :root {
        --h2-size: 28px;
        --h2-line: 32px;
        --h3-size: 24px;
        --h3-line: 28px;
    }

    .why-choose-section .section-title,
    .showcase-section .showcase-header {
        flex-direction: column;
        align-items: start;
    }

    .showcase-section .showcase-header {
        gap: 20px;
    }

    .showcase-section .showcase-title {
        max-width: 100%;
    }

    .cta-section .cta-content-container {
        width: 80%;
    }


    h2,
    .trusted-by-content h2,
    .cta-section .cta-container h2 {
        font-size: var(--h2-size);
        line-height: var(--h2-line);
    }

    h3 {
        font-size: var(--h3-size);
        line-height: var(--h3-line);
    }

    p {
        line-height: var(--p-line);
    }

    .about-section .about-content h2 {
        width: 100%;
    }

    .hero-actions {
        flex-direction: column;
    }

    body.page-template-about-us-page .founded-section h2,
    body.page-template-about-us-page .support-section h2 {
        font-size: 36px;
    }
}

/*--------- For Extra Small Mobile (380-539) -----------*/

@media only screen and (max-width: 539px) {
    :root {
        --h1-size: 40px;
        --h1-line: 45px;
        --h2-size: 24px;
        --h2-line: 28px;
        --h3-size: 22px;
        --h3-line: 26px;
        --p-size: 18px;
        --p-line: 26px;
        --btn-size: 18px;
        --small-size: 14px;
    }

    /* Typography */
    p {
        font-size: var(--p-size);
        line-height: var(--p-line);
    }

    .common-hero-section.hero-section .hero-content p {
        font-size: 20px;
        line-height: 30px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    h2,
    .trusted-by-content h2,
    .cta-section .cta-container h2 {
        font-size: var(--h2-size);
        line-height: var(--h2-line);
    }

    /* Buttons */
    .why-choose-section .section-title .btn-view-more-dark,
    .blog-section .blog-header .btn-view-more-dark,
    .showcase-section .showcase-header .btn.btn-light-purple {
        font-size: var(--btn-size);
    }

    /* Hero Section */
    .hero-section .hero-content h1 {
        font-size: var(--h1-size);
        line-height: var(--h1-line);
    }

    .cta-section .cta-container {
        padding: 0px 16px;
    }

    /* Showcase Section */
    .showcase-section .project-info {
        gap: 0;
    }

    .services-section .section-header p {
        width: 100%;
    }

    .showcase-section .projects-grid .project-info h3,
    .showcase-section .projects-grid .project-info h3 a {
        font-size: var(--h3-size);
        line-height: var(--h3-line);
    }

    .showcase-section .showcase-header {
        flex-direction: column;
        gap: 20px;
        align-items: start;
    }

    .showcase-section .site-container {
        gap: var(--container-gap);
    }

    .showcase-section .showcase-title {
        max-width: 100%;
    }

    .cta-section .cta-content-container {
        width: 100%;
    }

    /* Footer */
    .footer-left-container {
        display: grid;
        gap: 20px;
        text-align: center;
    }

    .footer-left-container .contact-info-sub-container {
        margin: 0 auto;
    }

    .footer-right-container {
        justify-content: center;
        text-align: center;
        padding: 0px 10px;
    }

    .footer-right-container .footer-info {
        margin: 0 auto;
    }

    .contact-us-page-form .form-container .code-container.common-container {
        width: 20%;
    }

    .testimonials-section .testimonial-card .testimonial-text {
        font-size: 16px;
        margin-top: 0px;
    }

    body.page-template-about-us-page .founded-section h2,
    body.page-template-about-us-page .support-section h2 {
        font-size: 30px;
        line-height: 36px;
    }

    .featured-mint-badge {
        margin-top: 10px;
        padding: 6px 14px;
        gap: 6px;
    }

    .featured-mint-badge .badge-prefix {
        font-size: 10px;
    }

    .featured-mint-badge .badge-brand {
        font-size: 13px;
    }

    .trusted-by-content .stat-item{
        min-width: 110px;
    }

    .trusted-by-content .stat-icon-wrap{
        width: 30px;
        height: 30px;
    }

    .trusted-by-content .stat-icon-wrap svg{
        width: 14px;
        height: 14px;
    }

    .trusted-by-content .stat-number{
        font-size: 12px;
    }

    .trusted-by-content .stat-label {
        font-size: 10px;
    }

    .trusted-by-content .stat-item{
        gap: 8px;
    }

    .trusted-by-content .trusted-stats-row{
        gap: 10px 0px;
    }
}

/*--------- For Tiny Mobile (320-479) -----------*/

@media only screen and (max-width: 479px) {
    :root {
        --h1-size: 35px;
        --h1-line: 40px;
        --h2-size: 22px;
        --h2-line: 26px;
        --p-size: 18px;
        --p-line: 26px;
    }

    .hero-section .hero-content h1 {
        font-size: var(--h1-size);
        line-height: var(--h1-line);
    }

    .about-section .about-image-container {
        width: 100%;
    }

    .site-header .site-container {
        padding: 20px;
    }

    .about-section .about-image-container .image-bg-shape {
        margin: 0 auto;
        right: 0;
        object-fit: contain;
    }

    .services-section .services-slider .card-content-container h3 {
        width: 100%;
    }

    body:not(.blog) .blog-section.site-common-padding {
        padding-top: 0;
    }

    .why-choose-section .section-title,
    .blog-section .blog-header {
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }

    .cta-section {
        min-height: unset;
        height: auto;
        padding: 50px 0;
    }

    .cta-section #zcampaignOptinForm {
        flex-direction: column !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        gap: 12px !important;
    }

    .cta-section #zcampaignOptinForm:focus-within {
        box-shadow: none !important;
        transform: none !important;
    }

    .cta-section #zcampaignOptinForm>div:has(#EMBED_FORM_EMAIL_LABEL),
    .cta-section #zcampaignOptinForm>div:nth-of-type(2) {
        width: 100% !important;
        background: #ffffff !important;
        border-radius: var(--radius-full, 50px) !important;
        padding: 4px 18px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
        box-sizing: border-box !important;
    }

    .cta-section #zcampaignOptinForm input#EMBED_FORM_EMAIL_LABEL {
        height: 44px !important;
        padding: 10px 10px 10px 28px !important;
        font-size: 15px !important;
    }

    .cta-section #zcampaignOptinForm>div:has(#zcWebOptin),
    .cta-section #zcampaignOptinForm>div:nth-of-type(3) {
        width: 100% !important;
    }

    .cta-section #zcampaignOptinForm input#zcWebOptin {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    .about-section .about-content .about-text p {
        font-size: var(--p-size);
    }

    .code-marquee-section .marquee-1 {
        transform: translate(-50%, -50%) rotate(-13deg);
    }

    .code-marquee-section .marquee-2 {
        transform: translate(-50%, -50%) rotate(13deg);
    }

    .footer-container {
        padding: 0px 10px;
    }

    .hero-content .trust-badge {
        display: none;
    }

    .error-404.not-found .error-code {
        font-size: 70px;
    }

    .error-404.not-found .page-title {
        font-size: 20px;
    }

    .error-404.not-found .page-content p {
        font-size: 16px;
    }

    .common-hero-section.hero-section .hero-right-container {
        display: block;
        width: 100%;
    }

    .common-hero-section.hero-section .hero-content {
        display: flex;
        flex-direction: column-reverse;
        justify-content: start;
        gap: 0;
    }

    .common-hero-section.hero-section {
        height: auto;
        padding: 35px 0px;
    }

    .common-hero-section.hero-section .hero-right-container {
        margin-top: 0px;
    }

    .common-hero-section.hero-section .hero-left-container {
        margin-top: 15px;
    }

    .contact-us-page-form .form-container form .input-container {
        flex-direction: column;
    }

    .testimonials-section .testimonial-slider-wrapper .author-message img {
        width: 45px;
    }

    .testimonials-section .author-details .author-name,
    .testimonials-section .author-details .author-title,
    .testimonials-section .testimonial-card .rating span {
        font-size: 14px;
        line-height: 22px;
    }

    .testimonials-section .testimonial-slider-wrapper .rating img {
        width: 12px;
    }

    .common-hero-section.woocommerce-common-hero-section .hero-right-container {
        margin-top: 20px !important;
    }

    .woocommerce-order ul.woocommerce-order-overview {
        gap: 16px;
    }

    .woocommerce-order ul.woocommerce-order-overview li {
        width: 100%;
    }

    .woocommerce-order table.shop_table:not(.shop_table_responsive) .product-name {
        font-size: 14px;
    }

    .woocommerce-order table.shop_table tfoot tr:last-child th,
    .woocommerce-order table.shop_table tfoot tr:last-child td {
        font-size: 16px;
    }

    .no-results.not-found {
        padding: 60px var(--spacing-sm);
    }

    .no-results.not-found .page-title {
        font-size: 28px;
    }
}

@media only screen and (max-width: 379px) {
    .footer-container {
        padding: 0;
    }
}

/*--------- For Ultra Small Mobile (320-379) -----------*/

@media only screen and (max-width: 379px) {
    :root {
        --h1-size: 28px;
        --h1-line: 36px;
    }

    .hero-section .hero-content h1 {
        font-size: var(--h1-size);
        line-height: var(--h1-line);
    }

    .why-choose-section .section-title {
        gap: 0;
    }

    .cta-section .cta-bg-left,
    .cta-section .cta-bg-right {
        display: none;
    }

    .footer-container {
        padding: 0px;
    }

    .common-hero-section.hero-section .hero-left-container h1 {
        font-size: 28px;
        line-height: 35px;
    }

    .code-marquee-section .marquee-1 {
        transform: translate(-50%, -50%) rotate(-15deg);
    }

    .code-marquee-section .marquee-2 {
        transform: translate(-50%, -50%) rotate(15deg);
    }
}

@media only screen and (max-width: 359px) {
    :root {
        --h1-size: 28px;
        --h1-line: 36px;
        --h2-size: 20px;
        --h2-line: 24px;
    }

    .hero-section .hero-content h1 {
        font-size: var(--h1-size);
        line-height: var(--h1-line);
    }

    .hero-content .trust-badge span {
        font-size: 16px;
    }

    .social-links {
        gap: 8px;
    }
}