/* =========================================================
   TABLET + MOBILE NAVIGATION
========================================================= */

@media (max-width: 991px) {

    .main-header {
        position: relative;
        z-index: 9999;
    }

    .navbar {
        min-height: 75px;
        padding: 2px 0;
    }

    .site-logo img {
        width: 170px;
        height: auto;
    }

    .navbar-collapse {
        margin-top: 15px;
        padding: 10px 0 20px;

        border-top: 1px solid #eeeeee;

        background: #ffffff;
    }


    .navbar-nav {
        width: 100%;
        align-items: stretch !important;
        gap: 0;
    }


    .navbar-nav .nav-item {
        width: 100%;
    }


    .navbar-nav .nav-link {
        width: 100%;

        padding: 14px 8px !important;

        font-size: 14px;
        font-weight: 600;

        color: #111111 !important;

        border-bottom: 1px solid #eeeeee;
    }


    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        color: #ff0000 !important;
    }


    .navbar-nav .nav-link::after {
        display: none;
    }

    .navbar-nav .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .nav-arrow {
        font-size: 9px;
        margin-left: auto;
        transition: 0.3s ease;
    }


    .dropdown.show .nav-arrow {
        transform: rotate(180deg);
    }


    .mega-menu {
        position: static !important;

        width: 100% !important;

        margin: 6px 0 10px !important;

        padding: 0 !important;

        transform: none !important;

        border: 1px solid #eeeeee !important;

        border-radius: 12px !important;

        background: #ffffff;

        box-shadow:
            0 10px 35px rgba(0, 0, 0, 0.08);

        overflow: hidden;

        max-height: none;

        z-index: 99999;
    }

    .mega-menu.show {
        display: block !important;
    }


    .mega-menu-inner {
        display: block !important;
        width: 100%;
    }

    .mega-column {
        width: 100%;

        padding: 20px 15px;

        border-right: 0 !important;

        border-bottom: 1px solid #eeeeee;
    }


    .mega-column:last-of-type {
        border-bottom: 0;
    }


    .mega-feature {
        display: none !important;
    }

    .mega-title {
        display: flex;
        align-items: center;

        gap: 10px;

        margin-bottom: 12px;
    }


    .title-icon {
        width: 36px;
        min-width: 36px;
        height: 36px;

        border-radius: 9px;

        font-size: 13px;
    }


    .mega-title h6 {
        font-size: 10px;

        margin-bottom: 3px;
    }


    .mega-title small {
        font-size: 9px;
    }

    .mega-link {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        padding: 10px 8px;

        margin-bottom: 2px;

        font-size: 12px;

        border-radius: 6px;
    }


    .mega-link i {
        opacity: 1;

        transform: none;

        font-size: 9px;
    }


    .mega-link:hover {
        padding-left: 13px;
    }


    .second-title {
        margin-top: 20px;

        padding-top: 17px;

        border-top: 1px dashed #dddddd;
    }


    /* ==========================================
       PRODUCTS DROPDOWN
    ========================================== */

    .product-menu {
        position: static !important;

        width: 100% !important;

        margin: 6px 0 10px !important;

        padding: 8px !important;

        transform: none !important;

        border: 1px solid #eeeeee !important;

        border-radius: 12px !important;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.07);

        background: #ffffff;
    }


    .product-menu.show {
        display: block !important;
    }


    .product-menu-inner {
        width: 100%;
    }


    .product-item {
        display: grid;

        grid-template-columns: 40px 1fr 15px;

        align-items: center;

        gap: 10px;

        width: 100%;

        padding: 10px;

        border-radius: 8px;
    }


    .product-icon {
        width: 40px;
        height: 40px;
    }


    .product-item strong {
        font-size: 12px;
    }


    .product-item small {
        font-size: 9px;
    }


    .product-item > i {
        opacity: 1;

        transform: none;

        font-size: 9px;
    }

    .project-btn-wrapper {
        width: 100%;

        margin: 15px 0 0;
    }


    .project-btn {
        width: 100%;

        justify-content: center;

        padding: 14px 20px;
    }

}

@media (max-width: 576px) {

    .navbar {
        min-height: 68px;
    }

    .site-logo img {
        width: 145px;
    }


    .navbar-collapse {
        margin-top: 12px;
    }


    .mega-menu {
        max-height: 70vh;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
    }


    .mega-column {
        padding: 17px 12px;
    }


    .mega-title h6 {
        font-size: 9px;
    }


    .mega-title small {
        font-size: 8px;
    }


    .mega-link {
        font-size: 11px;

        padding: 9px 6px;
    }


    .product-item {
        grid-template-columns: 36px 1fr 12px;

        gap: 8px;

        padding: 9px 6px;
    }


    .product-icon {
        width: 36px;
        height: 36px;
    }


    .product-item strong {
        font-size: 11px;
    }


    .product-item small {
        font-size: 8px;
    }

}


@media (max-width: 991px) {

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


    .hero-section {
        min-height: auto;

        padding: 75px 0;
    }

    .hero-title {
        font-size: 58px;
    }

    .hero-visual {
        min-height: 470px;

        margin-top: 30px;
    }

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

    .trust-item {
        border-right: 0;
    }

    .about-visual {
        margin-bottom: 30px;
    }

    .process-sec-wrapper {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 45px 25px;
    }

    .process-sec-line {
        display: none;
    }

    .cta-inner {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .section-padding {
        padding: 65px 0;
    }

    .section-heading h2 {
        font-size: 34px;
    }

    .section-heading p {
        font-size: 13px;
    }

    .hero-section {
        padding: 60px 0;

        min-height: auto;
    }

    .hero-title {
        font-size: 43px;

        letter-spacing: -1.5px;
    }

    .hero-text {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: stretch;
    }

    .btn-primary-red,
    .btn-outline-dark {
        justify-content: center;
    }


    .hero-trust {
        margin-top: 25px;
    }


    .hero-visual {
        min-height: 410px;
    }

    .hero-card {
        width: 90%;

        padding: 20px;
    }

    .ring-one {
        width: 340px;
        height: 340px;
    }

    .ring-two {
        width: 280px;
        height: 280px;
    }

    .hero-floating-card {
        left: 0;
        top: 35px;

        transform: scale(0.9);
    }

    .second-floating {
        right: 0;
        bottom: 20px;
    }

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

    .trust-item {
        border-bottom: 1px solid #2d2d2d;

        padding-bottom: 15px;
    }

    .trust-item:last-child {
        border-bottom: 0;
    }

    .about-visual {
        min-height: 400px;

        padding: 10px;
    }

    .about-image-main {
        width: 88%;
        height: 350px;
    }

    .experience-card {
        left: 0;
        bottom: 35px;

        padding: 13px 15px;
    }

    .experience-number {
        font-size: 27px;
    }

    .about-mini-card {
        right: 0;
        bottom: 0;
    }

    .service-card {
        padding: 25px;
    }

    .stats-section {
        padding: 55px 0;
    }

    .stat-item {
        border-right: 0;

        padding: 10px;
    }

    .stat-item h3 {
        font-size: 30px;
    }
    .process-sec-wrapper {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-top: 45px;
    }

    .process-sec-item {
        display: flex;

        text-align: left;

        gap: 15px;
    }

    .process-sec-number {
        min-width: 60px;
        width: 60px;
        height: 60px;

        margin: 0;
    }

    .why-visual {
        min-height: 350px;

        margin-top: 20px;
    }

    .why-main-card {
        width: 92%;

        padding: 22px;
    }

    .performance-number {
        font-size: 43px;
    }

    .why-small-card {
        right: 0;
        bottom: 10px;
    }

    .testimonial-card {
        padding: 30px 20px;
    }

    .testimonial-card > p {
        font-size: 14px;
    }

    .cta-section {
        padding: 60px 0;
    }

    .cta-content h2 {
        font-size: 34px;
    }

    .cta-button {
        width: 100%;

        justify-content: center;
    }

}

@media (max-width: 480px) {

    .section-padding {
        padding: 55px 0;
    }


    .section-heading h2 {
        font-size: 29px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-text {
        font-size: 13px;
    }


    .hero-visual {
        min-height: 350px;
    }

    .hero-card {
        width: 95%;

        padding: 16px;
    }

    .growth-number {
        font-size: 35px;
    }

    .chart-area {
        height: 120px;
    }

    .hero-floating-card {
        transform: scale(0.78);

        transform-origin: left center;
    }

    .second-floating {
        transform-origin: right center;
    }

    .about-image-main {
        height: 300px;
    }

    .about-mini-card {
        transform: scale(0.85);

        transform-origin: right bottom;
    }

    .service-card h3 {
        font-size: 18px;
    }

    .stat-item h3 {
        font-size: 25px;
    }

    .stat-item p {
        font-size: 8px;
    }

    .why-main-card {
        width: 100%;
    }

    .why-small-card {
        transform: scale(0.85);

        transform-origin: right bottom;
    }

    .cta-content h2 {
        font-size: 29px;
    }

}


/* =====================================================
   FOOTER MOBILE RESPONSIVE
===================================================== */

@media (max-width: 991px) {

    .footer-cta-inner {
        padding: 50px 0;
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-cta-content h2 {
        font-size: 35px;
    }

    .footer-main {
        padding: 55px 0 45px;
    }

}


@media (max-width: 767px) {

    .footer-cta-inner {
        min-height: auto;
        padding: 45px 20px;
        gap: 25px;
    }

    .footer-cta-content h2 {
        font-size: 30px;
    }

    .footer-cta-content p {
        font-size: 14px;
    }

    .footer-cta-btn {
        width: 100%;
        justify-content: center;
    }

    .footer-main {
        padding: 50px 20px 35px;
    }

    .footer-logo img {
        max-width: 190px;
    }

    .footer-description {
        font-size: 13px;
    }

    .footer-title {
        margin-top: 10px;
    }

    .footer-bottom-inner {
        padding: 20px;
        min-height: auto;
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-floating {
        right: 15px;
        bottom: 18px;
    }

    .footer-floating a {
        width: 47px;
        height: 47px;
        font-size: 18px;
    }

    .back-to-top {
        right: 15px;
        bottom: 130px;
        width: 42px;
        height: 42px;
    }

}


@media (max-width: 480px) {

    .footer-cta-content h2 {
        font-size: 27px;
    }

    .footer-cta-label {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .footer-contact-item {
        gap: 10px;
    }

    .contact-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .footer-bottom p {
        font-size: 12px;
        line-height: 1.7;
    }

}



/* LOADER RESPONSIVE  */


@media (max-width: 575px) {

    .loader-logo {
        width: 155px;
        height: 155px;
        margin-bottom: 20px;
    }


    .loader-logo img {
        width: 110px;
        height: 110px;
    }


    .loader-ring {
        width: 145px;
        height: 145px;
    }


    .loader-logo::before {
        width: 120px;
        height: 120px;
    }


    .loader-text span {
        font-size: 16px;
        letter-spacing: 3px;
    }


    .loader-text small {
        font-size: 8px;
        letter-spacing: 4px;
    }

}


/* ABOUT PAGE  */



@media (max-width: 991px) {

    .section-padding {
        padding: 75px 0;
    }

    .breadcrumb-content h1 {
        font-size: 50px;
    }

    .about-content {
        padding-left: 0;
    }

    .about-image-main {
        height: 500px;
    }

    .section-heading h2,
    .about-content h2,
    .why-about h2 {
        font-size: 38px;
    }

    .counter-box {
        border-bottom: 1px solid #292929;
    }

    .about-cta-inner {
        padding: 45px 0;
    }

}

@media (max-width: 767px) {

    .section-padding {
        padding: 60px 0;
    }

    .section-heading h2,
    .about-content h2,
    .why-about h2 {
        font-size: 32px;
    }

    .about-image-wrapper {
        padding: 0 20px 25px 0;
    }

    .about-image-main {
        height: 420px;
    }

    .about-experience {
        left: 0;
        bottom: 35px;
        width: 150px;
        min-height: 110px;
        padding: 20px;
    }

    .about-experience strong {
        font-size: 34px;
    }

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

    .counter-box {
        min-height: 180px;
        padding: 20px 10px;
    }

    .counter-box h3 {
        font-size: 32px;
    }

    .mission-card {
        padding: 28px;
        flex-direction: column;
    }

    .why-about > .container > .row > .col-lg-5 {
        padding-right: 12px;
    }

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

    .about-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 45px 0;
    }

    .about-cta h2 {
        font-size: 31px;
    }

    .about-cta-inner > a {
        width: 100%;
        justify-content: center;
    }

}

@media (max-width: 480px) {

    .about-image-main {
        height: 350px;
    }

    .about-content .about-lead {
        font-size: 15px;
    }

    .mission-card {
        gap: 18px;
    }

    .mission-card h3 {
        font-size: 20px;
    }

}


/* PROJECTS PAGE RESPONSIVE  */

@media (max-width: 991px) {

    .projects-intro {
        padding: 75px 0 45px;
    }

    .projects-intro h2 {
        font-size: 40px;
    }

    .featured-project-image {
        height: 450px;
    }

    .featured-project-content {
        min-height: auto;
        padding: 50px 40px;
    }

    .project-image {
        height: 330px;
    }

    .project-card-content {
        flex-direction: column;
    }

    .project-card-content p {
        max-width: none;
    }


}

@media (max-width: 767px) {

    .projects-intro {
        padding: 60px 0 35px;
    }

    .projects-intro h2 {
        font-size: 32px;
    }

    .projects-intro-text {
        font-size: 13px;
    }

    .projects-filter {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 15px;
        scrollbar-width: none;
    }

    .projects-filter::-webkit-scrollbar {
        display: none;
    }

    .project-filter-btn {
        flex-shrink: 0;
        padding: 10px 17px;
    }

    .featured-project {
        padding-bottom: 60px;
    }

    .featured-project-image {
        height: 300px;
    }

    .featured-project-content {
        padding: 40px 25px;
    }

    .featured-project-content h3 {
        font-size: 27px;
    }

    .project-details {
        grid-template-columns: 1fr;
    }

    .projects-grid-section,
    .project-process {
        padding: 60px 0;
    }

    .section-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 35px;
    }

    .section-heading-row h2 {
        font-size: 32px;
    }

    .project-image {
        height: 280px;
    }

    .project-arrow {
        opacity: 1;
        transform: translateY(0);
    }

    .project-card-content {
        padding: 22px;
    }

    .projects-cta-inner {
        min-height: auto;
        padding: 50px 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .projects-cta h2 {
        font-size: 32px;
    }

    .projects-cta-inner > a {
        width: 100%;
        justify-content: center;
    }

}

@media (max-width: 480px) {

    .projects-intro h2 {
        font-size: 28px;
    }

    .featured-project-content h3 {
        font-size: 24px;
    }

    .project-image {
        height: 240px;
    }

    .project-card-content h3 {
        font-size: 18px;
    }

    .project-stats-inner {
        grid-template-columns: 1fr;
    }

    .project-stat {
        border-right: 0;
    }

    .projects-cta h2 {
        font-size: 28px;
    }

}


@media (max-width: 991px) {

    .hiring-process {
        padding: 80px 0;
    }

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

    .hiring-process-header h2 {
        font-size: 38px;
    }

    .hiring-process-header > p {
        max-width: 650px;
    }

    .hiring-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .hiring-timeline::before {
        display: none;
    }

    .hiring-process-card {
        min-height: 330px;
    }
}


@media (max-width: 767px) {

    .hiring-process {
        padding: 65px 0;
    }

    .hiring-process-header {
        margin-bottom: 35px;
    }

    .hiring-process-header h2 {
        font-size: 32px;
    }

    .hiring-process-header > p {
        font-size: 13px;
    }

    .hiring-timeline {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .hiring-process-card {
        min-height: auto;
        padding: 27px;
    }

    .process-top {
        margin-bottom: 30px;
    }

    .hiring-process-content h3 {
        font-size: 22px;
    }

    .hiring-process-content p {
        max-width: 500px;
    }

    .process-arrow {
        left: auto;
        right: 27px;
        bottom: 27px;
    }

}


@media (max-width: 480px) {

    .hiring-process {
        padding: 55px 0;
    }

    .hiring-process-header h2 {
        font-size: 28px;
    }

    .hiring-process-card {
        padding: 24px;
    }

    .hiring-process-icon {
        width: 52px;
        height: 52px;
    }

    .process-top {
        margin-bottom: 25px;
    }

    .hiring-process-content h3 {
        font-size: 21px;
    }

    .hiring-process-content p {
        font-size: 12px;
        padding-right: 35px;
    }

}


@media (max-width: 991px) {

    .career-intro {
        padding: 75px 0;
    }

    .career-intro h1 {
        font-size: 48px;
    }

    .career-main-image {
        height: 450px;
    }

    .career-floating-card {
        left: 0;
    }

    .career-heading h2,
    .career-culture h2 {
        font-size: 38px;
    }

    .culture-gallery {
        min-height: 500px;
    }

    .hiring-steps {
        grid-template-columns: 1fr 1fr;
        gap: 45px 20px;
    }

    .hiring-steps::before {
        display: none;
    }

}


@media (max-width: 767px) {

    .career-intro {
        padding: 60px 0;
    }

    .career-intro h1 {
        font-size: 37px;
    }

    .career-intro > .container
    .row > .col-lg-7 > p {
        font-size: 14px;
    }

    .career-intro-buttons {
        flex-wrap: wrap;
        gap: 20px;
    }

    .career-visual {
        padding-right: 15px;
    }

    .career-main-image {
        height: 380px;
    }

    .career-floating-card {
        bottom: 35px;
    }

    .why-join-section,
    .career-culture,
    .open-position-section,
    .hiring-process {
        padding: 60px 0;
    }

    .career-heading h2,
    .career-culture h2 {
        font-size: 31px;
    }

    .career-benefit-card {
        min-height: auto;
        padding: 30px;
    }

    .culture-gallery {
        min-height: 400px;
    }

    .culture-image-one {
        width: 70%;
        height: 280px;
    }

    .culture-image-two {
        width: 50%;
        height: 220px;
    }

    .culture-image-three {
        width: 45%;
        height: 170px;
        left: 18%;
    }

    .job-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 25px;
    }

    .job-left {
        align-items: flex-start;
    }

    .job-meta {
        flex-wrap: wrap;
        gap: 8px 15px;
    }

    .job-apply-btn {
        margin-left: 78px;
    }

    .hiring-steps {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

@media (max-width: 480px) {

    .career-intro h1 {
        font-size: 32px;
    }

    .career-main-image {
        height: 330px;
    }

    .career-floating-card {
        min-width: 175px;
        padding: 17px;
    }

    .career-floating-card > i {
        font-size: 20px;
    }

    .career-heading h2,
    .career-culture h2 {
        font-size: 28px;
    }

    .culture-gallery {
        min-height: 330px;
    }

    .culture-image-one {
        height: 220px;
    }

    .culture-image-two {
        height: 180px;
    }

    .culture-image-three {
        height: 140px;
    }

    .job-left {
        gap: 13px;
    }

    .job-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .job-card h3 {
        font-size: 17px;
    }

    .job-apply-btn {
        margin-left: 61px;
    }

}

@media (max-width: 991px) {

    .breadcrumb {
        padding: 75px 0;
    }

    .breadcrumb h1 {
        font-size: 48px;
    }

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

    .featured-blog-image {
        min-height: 430px;
    }

    .featured-blog-content {
        padding: 45px;
    }

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

    .blog-grid .blog-card:last-child {
        grid-column: span 2;
    }

    .blog-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .blog-newsletter-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .newsletter-form {
        max-width: 100%;
    }
}

@media (max-width: 767px) {

    .breadcrumb {
        padding: 60px 0;
    }

    .breadcrumb h1 {
        font-size: 38px;
    }

    .breadcrumb p {
        font-size: 13px;
    }

    .featured-blog {
        padding: 65px 0;
    }

    .featured-blog-image {
        min-height: 300px;
    }

    .featured-blog-content {
        padding: 35px 25px;
    }

    .featured-blog-content h2 {
        font-size: 29px;
    }

    .latest-blog,
    .blog-categories {
        padding: 65px 0;
    }

    .blog-section-heading h2,
    .blog-category-header h2 {
        font-size: 31px;
    }

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

    .blog-grid .blog-card:last-child {
        grid-column: auto;
    }

    .blog-card-image {
        height: 230px;
    }

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

    .blog-newsletter {
        padding: 60px 0;
    }

    .newsletter-content h2 {
        font-size: 32px;
    }

    .newsletter-form {
        flex-direction: column;
        background: transparent;
        padding: 0;
        gap: 10px;
    }

    .newsletter-form input {
        width: 100%;
        min-height: 52px;
    }

    .newsletter-form button {
        min-height: 52px;
        justify-content: center;
    }
}

@media (max-width: 480px) {

    .breadcrumb h1 {
        font-size: 33px;
    }

    .featured-blog-content h2 {
        font-size: 26px;
    }

    .blog-section-heading h2,
    .blog-category-header h2 {
        font-size: 28px;
    }

    .blog-card-content {
        padding: 22px;
    }

    .newsletter-content h2 {
        font-size: 28px;
    }
}




/* =====================================================
  CONTACT RESPONSIVE
===================================================== */

@media (max-width: 991px) {

    .contact-info-section,
    .main-contact-section,
    .contact-why-section {
        padding: 80px 0;
    }

    .contact-left-content {
        padding-right: 0;
    }

    .contact-form-wrapper {
        padding: 35px;
    }

    .contact-cta-box {
        padding: 45px;
    }

}


@media (max-width: 767px) {



    .contact-info-section,
    .main-contact-section,
    .contact-why-section{
        padding: 65px 0;
    }

    .contact-info-card {
        padding: 25px;
    }

    .contact-form-wrapper {
        padding: 28px 22px;
    }

    .form-header h3 {
        font-size: 25px;
    }

}


@media (max-width: 480px) {


    .contact-info-card {
        flex-direction: column;
    }

    .contact-icon {
        width: 52px;
        min-width: 52px;
        height: 52px;
    }

    .contact-left-content h2 {
        font-size: 32px;
    }

    .contact-form-wrapper {
        padding: 25px 18px;
    }

    .input-box input {
        height: 50px;
    }


}



/* =====================================================
 WEBDEV RESPONSIVE
===================================================== */

@media (max-width: 991px) {

    .service-page-banner {
        padding: 90px 0 80px;
    }

    .webdev-intro-section,
    .webdev-services-section,
    .webdev-process-section,
    .webdev-why-section {
        padding: 80px 0;
    }

    .webdev-visual {
        margin-top: 20px;
    }

    .webdev-cta-box {
        padding: 45px;
    }

}


@media (max-width: 767px) {

    .service-page-banner {
        padding: 75px 0 65px;
    }

    .service-banner-content h1 {
        font-size: 43px;
    }

    .service-banner-content p {
        font-size: 15px;
    }

    .webdev-intro-section,
    .webdev-services-section,
    .webdev-process-section,
    .webdev-why-section,
    .webdev-tech-section,
    .webdev-cta-section {
        padding: 65px 0;
    }

    .webdev-intro-points {
        grid-template-columns: 1fr;
    }

    .webdev-main-box {
        width: 100%;
    }

    .webdev-floating-card {
        right: 10px;
    }

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

    .webdev-cta-box {
        padding: 35px 25px;
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .service-banner-content h1 {
        font-size: 38px;
    }

    .webdev-visual {
        min-height: 350px;
    }

    .code-content {
        padding: 30px 18px;
    }

    .code-line {
        font-size: 11px;
    }

    .webdev-floating-card {
        padding: 13px;
    }

    .floating-icon {
        width: 38px;
        height: 38px;
    }

    .webdev-process-item {
        align-items: flex-start;
        gap: 15px;
    }

    .webdev-process-number {
        width: 55px;
        height: 55px;
        font-size: 13px;
    }

    .webdev-process-icon {
        display: none;
    }

    .webdev-process::before {
        left: 27px;
    }

    .technology-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .technology-item {
        min-height: 110px;
    }

    .webdev-cta-box h2 {
        font-size: 31px;
    }

    .webdev-cta-btn {
        width: 100%;
        justify-content: space-between;
    }

}


/* =====================================================
  WEBDESIGN RESPONSIVE
===================================================== */

@media (max-width: 991px) {

    .webdesign-intro,
    .webdesign-services,
    .webdesign-approach,
    .webdesign-principles,
    .webdesign-impact,
    .webdesign-cta {
        padding: 80px 0;
    }

    .webdesign-visual {
        margin-top: 20px;
    }

    .webdesign-cta-box {
        padding: 45px;
    }

}


@media (max-width: 767px) {

    .webdesign-intro,
    .webdesign-services,
    .webdesign-approach,
    .webdesign-principles,
    .webdesign-impact,
    .webdesign-cta {
        padding: 65px 0;
    }

    .design-window {
        min-height: 300px;
    }

    .design-preview {
        padding: 25px 18px;
    }

    .design-sidebar {
        width: 60px;
        padding: 20px 12px;
    }

    .design-floating-tool {
        width: 45px;
        height: 45px;
    }

    .tool-one {
        right: 5px;
    }

    .tool-two {
        left: 5px;
    }

    .design-impact-stats {
        margin-top: 20px;
    }

    .webdesign-cta-box {
        padding: 35px 25px;
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .design-window-content {
        min-height: 250px;
    }

    .design-sidebar {
        display: none;
    }

    .preview-cards div {
        height: 60px;
    }

    .design-approach-step {
        gap: 15px;
    }

    .approach-number {
        min-width: 48px;
        height: 48px;
    }

    .design-impact-stats {
        grid-template-columns: 1fr;
    }

    .impact-stat {
        min-height: 140px;
    }

    .webdesign-cta-box h2 {
        font-size: 30px;
    }

    .webdesign-cta-btn {
        width: 100%;
        justify-content: space-between;
    }

}




/* =====================================================
  REDESIGN PROCESS RESPONSIVE
===================================================== */

@media (max-width: 1199px) {

    .redesign-process-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 991px) {

    .redesign-banner {
        padding: 90px 0 80px;
    }

    .redesign-intro,
    .redesign-services,
    .redesign-process,
    .redesign-benefits,
    .redesign-why,
    .redesign-cta {
        padding: 80px 0;
    }

    .redesign-comparison {
        margin-top: 20px;
    }

}


@media (max-width: 767px) {

    .redesign-banner {
        padding: 75px 0 65px;
    }

    .redesign-banner h1 {
        font-size: 43px;
    }

    .redesign-check-list {
        grid-template-columns: 1fr;
    }

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

    .redesign-cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 30px;
    }

}


@media (max-width: 575px) {

    .redesign-banner h1 {
        font-size: 38px;
    }

    .redesign-comparison {
        flex-direction: column;
        align-items: stretch;
    }

    .redesign-arrow {
        transform: rotate(90deg);
        margin: 5px auto;
    }

    .redesign-process-wrapper {
        grid-template-columns: 1fr;
    }

    .redesign-cta-btn {
        width: 100%;
        justify-content: space-between;
    }

}




/* =====================================================
  WORDPRESS PROCESS RESPONSIVE
===================================================== */

@media (max-width: 1199px) {

    .wordpress-process-timeline {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 991px) {

    .wordpress-banner {
        padding: 90px 0 80px;
    }

    .wordpress-intro,
    .wordpress-solutions,
    .wordpress-advantages,
    .wordpress-process,
    .wordpress-features,
    .wordpress-cta {
        padding: 80px 0;
    }

    .wordpress-visual {
        margin-top: 25px;
    }

}


@media (max-width: 767px) {

    .wordpress-banner {
        padding: 75px 0 65px;
    }

    .wordpress-banner h1 {
        font-size: 43px;
    }

    .wordpress-intro-points {
        grid-template-columns: 1fr;
    }

    .wordpress-advantages-grid {
        grid-template-columns: 1fr;
    }

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

    .wordpress-cta-box {
        padding: 40px 30px;
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 575px) {

    .wordpress-banner h1 {
        font-size: 38px;
    }

    .wordpress-sidebar {
        width: 60px;
        padding: 15px;
    }

    .wordpress-dashboard {
        padding: 22px 15px;
    }

    .wordpress-floating {
        width: 45px;
        height: 45px;
    }

    .wp-float-one {
        right: 5px;
    }

    .wp-float-two {
        left: 5px;
    }

    .wordpress-process-timeline {
        grid-template-columns: 1fr;
    }

    .wordpress-cta-btn {
        width: 100%;
        justify-content: space-between;
    }

}



/* =====================================================
   ECOMMERCE PROCESS RESPONSIVE
===================================================== */

@media (max-width: 1199px) {

    .ecommerce-process-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 991px) {

    .ecommerce-banner {
        padding: 90px 0 80px;
    }

    .ecommerce-intro,
    .ecommerce-solutions,
    .ecommerce-features,
    .ecommerce-process,
    .ecommerce-why-us,
    .ecommerce-cta {
        padding: 80px 0;
    }

    .ecommerce-store-visual {
        margin-top: 30px;
    }

}


@media (max-width: 767px) {

    .ecommerce-banner {
        padding: 75px 0 65px;
    }

    .ecommerce-banner h1 {
        font-size: 43px;
    }

    .ecommerce-intro-list {
        grid-template-columns: 1fr;
    }

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

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

    .ecommerce-cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 30px;
    }

}


@media (max-width: 575px) {

    .ecommerce-banner h1 {
        font-size: 36px;
    }

    .store-browser-top {
        padding: 0 12px;
    }

    .store-screen {
        padding: 15px;
    }

    .store-floating-card {
        width: 45px;
        height: 45px;
    }

    .store-cart {
        right: 5px;
    }

    .store-payment {
        left: 5px;
    }

    .ecommerce-process-wrapper {
        grid-template-columns: 1fr;
    }

    .ecommerce-cta-btn {
        width: 100%;
        justify-content: space-between;
    }

}


/*Ecom Process RESPONSIVE */

@media (max-width: 1199px) {

    .ecom-dev-process-list {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 991px) {

    .ecom-dev-banner {
        padding: 90px 0 80px;
    }

    .ecom-dev-intro,
    .ecom-dev-services,
    .ecom-dev-core,
    .ecom-dev-process,
    .ecom-dev-benefits,
    .ecom-dev-cta {
        padding: 80px 0;
    }

    .ecom-dev-visual {
        margin-top: 30px;
    }

}


@media (max-width: 767px) {

    .ecom-dev-intro-points {
        grid-template-columns: 1fr;
    }

    .ecom-dev-core-grid {
        grid-template-columns: 1fr;
    }

    .ecom-dev-process-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .ecom-dev-cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 30px;
    }

}


@media (max-width: 575px) {

    .ecom-dev-banner h1 {
        font-size: 36px;
    }

    .ecom-dev-sidebar {
        width: 60px;
        padding: 15px;
    }

    .ecom-dev-dashboard {
        padding: 20px 15px;
    }

    .ecom-dev-float {
        width: 45px;
        height: 45px;
    }

    .dev-code {
        right: 5px;
    }

    .dev-cart {
        left: 5px;
    }

    .ecom-dev-process-list {
        grid-template-columns: 1fr;
    }

    .ecom-dev-cta-btn {
        width: 100%;
        justify-content: space-between;
    }

}



/* =====================================================
   SINGLE VENDOR RESPONSIVE
===================================================== */

@media (max-width: 1199px) {

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

}


@media (max-width: 991px) {

    .single-vendor-banner {
        padding: 90px 0 80px;
    }

    .single-vendor-intro,
    .single-vendor-features,
    .single-vendor-management,
    .single-vendor-customer,
    .single-vendor-process,
    .single-vendor-benefits,
    .single-vendor-cta {
        padding: 80px 0;
    }

    .single-vendor-visual {
        margin-top: 30px;
    }

    .single-vendor-customer-flow {
        flex-wrap: wrap;
        gap: 25px;
    }

    .customer-flow-line {
        display: none;
    }

}


@media (max-width: 767px) {

    .single-vendor-points {
        grid-template-columns: 1fr;
    }

    .single-vendor-management-grid {
        grid-template-columns: 1fr;
    }

    .single-vendor-process-grid {
        grid-template-columns: 1fr 1fr;
    }

    .single-vendor-cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 30px;
    }

}


@media (max-width: 575px) {

    .single-vendor-banner h1 {
        font-size: 36px;
    }

    .vendor-sidebar {
        width: 60px;
        padding: 15px;
    }

    .vendor-main {
        padding: 20px 15px;
    }

    .vendor-floating {
        width: 45px;
        height: 45px;
    }

    .vendor-order {
        right: 5px;
    }

    .vendor-payment {
        left: 5px;
    }

    .single-vendor-process-grid {
        grid-template-columns: 1fr;
    }

    .single-vendor-cta-btn {
        width: 100%;
        justify-content: space-between;
    }

}

/* =====================================================
  MULTI VENDOR RESPONSIVE
===================================================== */

@media (max-width: 1199px) {

    .multi-vendor-process-grid {
        grid-template-columns: repeat(3,1fr);
    }

}


@media (max-width: 991px) {

    .multi-vendor-banner {
        padding: 90px 0 80px;
    }

    .multi-vendor-intro,
    .multi-vendor-features,
    .multi-vendor-management,
    .multi-vendor-platform,
    .multi-vendor-journey,
    .multi-vendor-process,
    .multi-vendor-benefits,
    .multi-vendor-cta {
        padding: 80px 0;
    }

    .multi-vendor-visual {
        margin-top: 30px;
    }

    .multi-vendor-journey-flow {
        flex-wrap: wrap;
        gap: 30px;
    }

    .journey-line {
        display: none;
    }

}


@media (max-width: 767px) {

    .multi-vendor-intro-points {
        grid-template-columns: 1fr;
    }

    .vendor-management-grid {
        grid-template-columns: 1fr;
    }

    .multi-vendor-process-grid {
        grid-template-columns: 1fr 1fr;
    }

    .multi-vendor-cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 30px;
    }

}


@media (max-width: 575px) {

    .multi-vendor-banner h1 {
        font-size: 36px;
    }

    .marketplace-sidebar {
        width: 60px;
        padding: 15px;
    }

    .marketplace-main {
        padding: 20px 15px;
    }

    .marketplace-floating {
        width: 45px;
        height: 45px;
    }

    .vendor-icon {
        right: 5px;
    }

    .seller-icon {
        left: 5px;
    }

    .marketplace-stats strong {
        font-size: 15px;
    }

    .multi-vendor-process-grid {
        grid-template-columns: 1fr;
    }

    .multi-vendor-cta-btn {
        width: 100%;
        justify-content: space-between;
    }

}


/* =====================================================
   ANDROID PROCESS RESPONSIVE
===================================================== */

@media (max-width: 1199px) {

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

}


@media (max-width: 991px) {

    .android-banner {
        padding: 90px 0 80px;
    }

    .android-intro,
    .android-services,
    .android-features,
    .android-process,
    .android-technologies,
    .android-why,
    .android-cta {
        padding: 80px 0;
    }

    .android-phone-area {
        margin-top: 30px;
    }

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

    .android-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 767px) {

    .android-check-list {
        grid-template-columns: 1fr;
    }

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

    .technology-box {
        margin-top: 35px;
    }

}


@media (max-width: 575px) {

    .android-banner h1 {
        font-size: 37px;
    }

    .android-phone {
        width: 235px;
        height: 460px;
    }

    .android-phone-area {
        min-height: 470px;
    }

    .android-floating-one {
        right: 25px;
    }

    .android-floating-two {
        left: 15px;
    }

    .android-floating-three {
        right: 5px;
    }

    .android-process-grid {
        grid-template-columns: 1fr;
    }

    .technology-box {
        grid-template-columns: 1fr 1fr;
    }

    .android-cta-box {
        padding: 40px 25px;
    }

    .android-cta-btn {
        width: 100%;
        justify-content: space-between;
    }

}


/*IOS PROCESS RESPONSIVE */

@media (max-width: 1199px) {


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


}

@media (max-width: 991px) {


.ios-banner {
    padding: 90px 0 80px;
}

.ios-intro,
.ios-services,
.ios-features,
.ios-process,
.ios-technologies,
.ios-why,
.ios-cta {
    padding: 80px 0;
}

.ios-phone-area {
    margin-top: 30px;
}

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

.ios-cta-box {
    flex-direction: column;
    align-items: flex-start;
}


}

@media (max-width: 767px) {


.ios-check-list {
    grid-template-columns: 1fr;
}

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

.ios-technology-box {
    margin-top: 30px;
}


}

@media (max-width: 575px) {


.ios-banner h1 {
    font-size: 37px;
}

.ios-phone {
    width: 235px;
    height: 480px;
}

.ios-phone-area {
    min-height: 490px;
}

.ios-floating-one {
    right: 15px;
}

.ios-floating-two {
    left: 10px;
}

.ios-floating-three {
    right: 0;
}

.ios-process-grid {
    grid-template-columns: 1fr;
}

.ios-technology-box {
    grid-template-columns: 1fr 1fr;
}

.ios-cta-box {
    padding: 40px 25px;
}

.ios-cta-btn {
    width: 100%;
    justify-content: space-between;
}


}


/*WEBVIEW MOBILE RESPONSIVE */

@media (max-width: 1199px) {


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


}

@media (max-width: 991px) {


.webview-banner {
    padding: 90px 0 80px;
}

.webview-intro,
.webview-features,
.webview-services,
.webview-process,
.webview-benefits,
.webview-why,
.webview-cta {
    padding: 80px 0;
}

.webview-visual {
    margin-top: 30px;
}

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

.webview-cta-box {
    flex-direction: column;
    align-items: flex-start;
}


}

@media (max-width: 767px) {


.webview-check-list {
    grid-template-columns: 1fr;
}

.webview-benefit-visual {
    margin-top: 20px;
}

.circle-one {
    left: 40px;
}

.circle-two {
    right: 40px;
}

.circle-three {
    left: 45px;
}

.circle-four {
    right: 40px;
}


}

@media (max-width: 575px) {


.webview-banner h1 {
    font-size: 37px;
}

.webview-phone {
    width: 240px;
    height: 480px;
}

.webview-visual {
    min-height: 490px;
}

.webview-float-one {
    top: 40px;
    right: 5px;
}

.webview-float-two {
    left: 0;
}

.webview-float-three {
    right: 0;
}

.webview-service-list > div {
    grid-template-columns: 35px 1fr;
}

.webview-service-list > div > i {
    display: none;
}

.webview-process-grid {
    grid-template-columns: 1fr;
}

.webview-cta-box {
    padding: 40px 25px;
}

.webview-cta-btn {
    width: 100%;
    justify-content: space-between;
}

.webview-benefit-visual {
    min-height: 350px;
}

.benefit-main-icon {
    width: 100px;
    height: 100px;
    font-size: 42px;
}

.benefit-circle {
    width: 48px;
    height: 48px;
    font-size: 14px;
}

}


/* =====================================================
ECOMMERCE RESPONSIVE
===================================================== */

@media (max-width: 1199px) {


.ecommerce-app-process-grid {
    grid-template-columns: repeat(3, 1fr);
}


}

@media (max-width: 991px) {


.ecommerce-app-banner {
    padding: 90px 0 80px;
}

.ecommerce-app-intro,
.ecommerce-app-features,
.ecommerce-app-solutions,
.ecommerce-app-process,
.ecommerce-app-benefits,
.ecommerce-app-why,
.ecommerce-app-cta {
    padding: 80px 0;
}

.ecommerce-app-visual {
    margin-top: 30px;
}

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

.ecommerce-app-cta-box {
    flex-direction: column;
    align-items: flex-start;
}


}

@media (max-width: 767px) {


.ecommerce-app-check-list {
    grid-template-columns: 1fr;
}

.ecommerce-app-benefit-visual {
    margin-top: 20px;
}

.circle-cart {
    left: 40px;
}

.circle-payment {
    right: 40px;
}

.circle-truck {
    left: 45px;
}

.circle-heart {
    right: 40px;
}


}

@media (max-width: 575px) {


.ecommerce-app-banner h1 {
    font-size: 37px;
}

.ecommerce-app-phone {
    width: 245px;
    height: 490px;
}

.ecommerce-app-visual {
    min-height: 500px;
}

.float-cart {
    top: 40px;
    right: 0;
}

.float-payment {
    left: 0;
}

.float-mobile {
    right: 0;
}

.ecommerce-app-solution-list > div {
    grid-template-columns: 35px 1fr;
}

.ecommerce-app-solution-list > div > i {
    display: none;
}

.ecommerce-app-process-grid {
    grid-template-columns: 1fr;
}

.ecommerce-app-cta-box {
    padding: 40px 25px;
}

.ecommerce-app-cta-btn {
    width: 100%;
    justify-content: space-between;
}

.ecommerce-app-benefit-visual {
    min-height: 350px;
}

.ecommerce-main-circle {
    width: 100px;
    height: 100px;
    font-size: 40px;
}

.ecommerce-small-circle {
    width: 48px;
    height: 48px;
    font-size: 14px;
}


}

/* =====================================================
SEO RESPONSIVE CSS
===================================================== */

@media (max-width: 1199px) {


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


}

@media (max-width: 991px) {


.seo-banner {
    padding: 90px 0 80px;
}

.seo-intro,
.seo-services,
.seo-matters,
.seo-process,
.seo-benefits,
.seo-why,
.seo-cta {
    padding: 80px 0;
}

.seo-visual {
    margin-top: 30px;
}

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

.seo-cta-box {
    flex-direction: column;
    align-items: flex-start;
}


}

@media (max-width: 767px) {


.seo-check-list {
    grid-template-columns: 1fr;
}

.seo-benefit-visual {
    margin-top: 20px;
}

.seo-icon-key {
    left: 40px;
}

.seo-icon-chart {
    right: 40px;
}

.seo-icon-globe {
    left: 45px;
}

.seo-icon-target {
    right: 40px;
}


}

@media (max-width: 575px) {
.seo-banner h1 {
    font-size: 37px;
}

.seo-main-card {
    padding: 20px;
}

.seo-floating-card {
    padding: 10px 12px;
    font-size: 10px;
}

.seo-keyword {
    left: 0;
}

.seo-chart {
    right: 0;
}

.seo-globe {
    left: 0;
}

.seo-matters-list > div {
    grid-template-columns: 35px 1fr;
}

.seo-matters-list > div > i {
    display: none;
}

.seo-process-grid {
    grid-template-columns: 1fr;
}

.seo-cta-box {
    padding: 40px 25px;
}

.seo-cta-btn {
    width: 100%;
    justify-content: space-between;
}

.seo-benefit-visual {
    min-height: 350px;
}

.seo-center-icon {
    width: 100px;
    height: 100px;
    font-size: 40px;
}

.seo-small-icon {
    width: 48px;
    height: 48px;
    font-size: 14px;
}


}

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

@media (max-width: 1199px) {


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

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

@media (max-width: 991px) {
.smm-banner {
    padding: 90px 0 80px;
}

.smm-intro,
.smm-services,
.smm-platforms,
.smm-process,
.smm-benefits,
.smm-why,
.smm-cta {
    padding: 80px 0;
}

.smm-visual {
    margin-top: 30px;
}

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

.smm-cta-box {
    flex-direction: column;
    align-items: flex-start;
}


}

@media (max-width: 767px) {


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

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

.smm-benefit-visual {
    margin-top: 25px;
}

.smm-icon-heart {
    left: 45px;
}

.smm-icon-users {
    right: 45px;
}

.smm-icon-chat {
    left: 45px;
}

.smm-icon-chart {
    right: 45px;
}


}

@media (max-width: 575px) {


.smm-banner h1 {
    font-size: 37px;
}

.smm-main-card {
    max-width: 320px;
}

.smm-engagement {
    left: 0;
}

.smm-followers {
    right: 0;
}

.smm-reach {
    left: 0;
}

.smm-floating-card {
    padding: 10px;
}

.smm-floating-card > i {
    width: 32px;
    height: 32px;
}

.smm-process-grid,
.smm-platform-grid {
    grid-template-columns: 1fr;
}

.smm-cta-box {
    padding: 40px 25px;
}

.smm-cta-btn {
    width: 100%;
    justify-content: space-between;
}

.smm-benefit-visual {
    min-height: 350px;
}

.smm-center-icon {
    width: 100px;
    height: 100px;
    font-size: 38px;
}

.smm-small-icon {
    width: 48px;
    height: 48px;
    font-size: 14px;
}

}

/* =====================================================
SMO RESPONSIVE CSS
===================================================== */

@media (max-width: 1199px) {


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

@media (max-width: 991px) {


.smo-banner {
    padding: 90px 0 80px;
}

.smo-intro,
.smo-services,
.smo-strategy,
.smo-benefits,
.smo-process,
.smo-why,
.smo-cta {
    padding: 80px 0;
}

.smo-visual {
    margin-top: 30px;
}

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

.smo-cta-box {
    flex-direction: column;
    align-items: flex-start;
}


}

@media (max-width: 767px) {


.smo-check-list {
    grid-template-columns: 1fr;
}

.smo-performance-box {
    margin-top: 25px;
}


}

@media (max-width: 575px) {


.smo-banner h1 {
    font-size: 37px;
}

.smo-main-card {
    max-width: 320px;
    padding: 20px;
}

.smo-search {
    left: 0;
}

.smo-engage {
    right: 0;
}

.smo-growth-card {
    left: 0;
}

.smo-floating {
    padding: 9px 12px;
    font-size: 10px;
}

.smo-process-grid {
    grid-template-columns: 1fr;
}

.smo-cta-box {
    padding: 40px 25px;
}

.smo-cta-btn {
    width: 100%;
    justify-content: space-between;
}

.smo-performance-bottom {
    grid-template-columns: 1fr;
}

.smo-benefit-card {
    padding: 30px 20px;
}


}


/* =====================================================
PPC RESPONSIVE CSS
===================================================== */

@media (max-width: 1199px) {


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

@media (max-width: 991px) {


.ppc-banner {
    padding: 90px 0 80px;
}

.ppc-intro,
.ppc-services,
.ppc-strategy,
.ppc-process,
.ppc-benefits,
.ppc-performance,
.ppc-cta {
    padding: 80px 0;
}

.ppc-visual {
    margin-top: 30px;
}

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

.ppc-cta-box {
    flex-direction: column;
    align-items: flex-start;
}


}

@media (max-width: 767px) {


.ppc-check-list {
    grid-template-columns: 1fr;
}

.ppc-performance-dashboard {
    margin-top: 25px;
}


}

@media (max-width: 575px) {


.ppc-banner h1 {
    font-size: 37px;
}

.ppc-main-dashboard {
    max-width: 320px;
    padding: 20px;
}

.ppc-dashboard-stats {
    grid-template-columns: 1fr;
}

.ppc-click-card {
    left: 0;
}

.ppc-target-card {
    right: 0;
}

.ppc-conversion-card {
    left: 0;
}

.ppc-floating-card {
    padding: 10px;
}

.ppc-floating-card > i {
    width: 32px;
    height: 32px;
}

.ppc-process-grid {
    grid-template-columns: 1fr;
}

.ppc-cta-box {
    padding: 40px 25px;
}

.ppc-cta-btn {
    width: 100%;
    justify-content: space-between;
}

.ppc-dashboard-footer {
    grid-template-columns: 1fr;
}

}


/* =====================================================
Brand RESPONSIVE CSS
===================================================== */

@media (max-width: 1199px) {


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

@media (max-width: 991px) {


.brand-promotion-banner {
    padding: 90px 0 80px;
}

.brand-intro,
.brand-services,
.brand-strategy,
.brand-process,
.brand-benefits,
.brand-growth,
.brand-cta {
    padding: 80px 0;
}

.brand-visual {
    margin-top: 30px;
}

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

.brand-cta-box {
    flex-direction: column;
    align-items: flex-start;
}


}

@media (max-width: 767px) {


.brand-check-list {
    grid-template-columns: 1fr;
}

.brand-growth-dashboard {
    margin-top: 25px;
}


}

@media (max-width: 575px) {


.brand-promotion-banner h1 {
    font-size: 37px;
}

.brand-main-card {
    max-width: 320px;
    padding: 22px;
}

.brand-card-stats {
    grid-template-columns: 1fr;
}

.brand-reach-card {
    left: 0;
}

.brand-engagement-card {
    right: 0;
}

.brand-growth-card {
    left: 0;
}

.brand-floating-card {
    padding: 10px;
}

.brand-floating-card > i {
    width: 32px;
    height: 32px;
}

.brand-process-grid {
    grid-template-columns: 1fr;
}

.brand-cta-box {
    padding: 40px 25px;
}

.brand-cta-btn {
    width: 100%;
    justify-content: space-between;
}

.brand-dashboard-footer {
    grid-template-columns: 1fr;
}


}