/* =========================================================
   📱 MOBILE APP STYLE RESPONSIVE
   MEHNDI PVC PROFILE
   Paste this at the VERY END of style.css
========================================================= */


/* =========================================================
   GLOBAL MOBILE RESET
========================================================= */

@media (max-width: 767px) {

    html {
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        background: #fff;
        -webkit-tap-highlight-color: transparent;
    }

    * {
        max-width: 100%;
    }

    img,
    video {
        max-width: 100%;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }


    /* Remove accidental horizontal overflow */

    section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }


    /* Better touch */

    a,
    button,
    summary,
    select,
    input,
    textarea {
        -webkit-tap-highlight-color: transparent;
    }

}


/* =========================================================
   📱 MOBILE HEADER
========================================================= */

@media (max-width: 767px) {

    .header {
        height: 64px;
        position: sticky;
        top: 0;
        z-index: 9999;

        background: rgba(255,255,255,.96);

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        box-shadow:
            0 5px 20px rgba(0,0,0,.07);
    }


    .header .container {
        padding: 0 14px;
    }


    .navbar {
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    /* Logo */

    .logo {
        width: 112px;
        display: block;
    }

    .logo img {
        width: 100%;
        height: auto;
    }


    /* Hide desktop menu */

    .nav-menu {
        display: none !important;
    }


    /* Mobile call button */

    .call-btn {
       

        width: 42px;
        height: 42px;

        padding: 0;

        border-radius: 13px;

        align-items: center;
        justify-content: center;

        font-size: 0;

        background: #df1f19;

        box-shadow:
            0 5px 15px rgba(223,31,25,.22);
    }


    .call-btn i {
        font-size: 16px;
        margin: 0;
    }

}


/* =========================================================
   📱 HERO SECTION
========================================================= */

@media (max-width: 767px) {

    .hero {
        padding:
            25px
            0
            35px;

        background:
            linear-gradient(
                180deg,
                #fffafa 0%,
                #ffffff 100%
            );
    }


    .hero-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }


    /* -----------------------------------------
       HERO LEFT
    ----------------------------------------- */

    .hero-left {
        width: 100%;
        padding: 0;

        text-align: left;
    }


    .hero-tag {
        gap: 8px;

        font-size: 11px;

        margin-bottom: 15px;
    }


    .hero-tag span {
        width: 25px;
        height: 2px;
    }


    .hero-left h1 {
        font-size: clamp(30px, 8.5vw, 38px);

        line-height: 1.08;

        letter-spacing: -.7px;
    }


    .hero-left p {
        margin-top: 17px;

        max-width: 100%;

        font-size: 12px;

        line-height: 1.75;

        color: #666;
    }


    /* -----------------------------------------
       HERO BUTTONS
    ----------------------------------------- */

    .hero-btns {
        width: 100%;

        display: grid;

        grid-template-columns:
            1.25fr
            .85fr;

        gap: 9px;

        margin-top: 23px;

        justify-content: stretch;
    }


    .btn {
        min-height: 47px;

        padding:
            0
            10px;

        border-radius: 11px;

        justify-content: center;

        gap: 7px;

        font-size: 11px;
    }


    .btn i {
        font-size: 12px;
    }


    /* -----------------------------------------
       HERO FEATURES
    ----------------------------------------- */

    .hero-features {

        width: calc(100% + 4px);

        margin:
            25px
            -2px
            0;

        padding:
            0
            2px;

        display: flex;

        gap: 0;

        overflow-x: auto;

        justify-content: flex-start;

        scrollbar-width: none;

        -ms-overflow-style: none;
    }


    .hero-features::-webkit-scrollbar {
        display: none;
    }


    .feature {

        flex: 0 0 86px;

        min-width: 86px;

        padding:
            5px
            8px;

        border-right:
            1px solid #e8e8e8;
    }


    .feature:last-child {
        border-right: none;
    }


    .feature i {
        font-size: 18px;

        margin-bottom: 8px;
    }


    .feature h4 {
        font-size: 8px;

        line-height: 1.3;
    }


    /* -----------------------------------------
       HERO RIGHT
    ----------------------------------------- */

    .hero-right {

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 14px;

        padding: 0;
    }


    /* Gallery first */

    .gallery {
        width: 100%;

        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 9px;
    }


    .gallery-top {
        grid-column:
            1 / -1;

        width: 100%;

        height: 205px;

        overflow: hidden;

        border-radius: 15px;
    }


    .gallery-middle {
        grid-column:
            1 / -1;

        width: 100%;

        height: 170px;

        overflow: hidden;

        border-radius: 15px;
    }


    .gallery-bottom {
        width: 100%;

        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 9px;
    }


    .gallery-item {

        width: 100%;

        height: 135px;

        overflow: hidden;

        border-radius: 13px;
    }


    .gallery img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        border-radius: inherit;
    }


    /* -----------------------------------------
       HERO LEAD FORM
    ----------------------------------------- */

    .lead-form {

        width: 100%;

        position: relative;

        top: auto;

        padding:
            24px
            17px;

        border-radius: 18px;

        box-shadow:
            0 10px 35px rgba(0,0,0,.08);
    }


    .form-head h3 {
        margin-top: 7px;

        font-size: 20px;
    }


    .form-head p {
        margin-top: 7px;

        font-size: 10px;

        line-height: 1.6;
    }


    .lead-form form {
        margin-top: 20px;
    }


    .form-group {
        margin-bottom: 12px;
    }


    .form-group label {
        margin-bottom: 6px;

        font-size: 10px;
    }


    .form-group input,
    .form-group select {

        height: 45px;

        border-radius: 10px;

        padding:
            0
            13px;

        font-size: 12px;
    }


    .lead-form button {

        height: 47px;

        border-radius: 10px;

        font-size: 12px;
    }

}


/* =========================================================
   📱 VIDEO SHOWCASE
========================================================= */

@media (max-width: 767px) {

    .video-showcase {

        padding:
            30px
            0;

        background: #fafafa;
    }


    .video-showcase .container {
        padding: 0 14px;
    }


    .video-grid {

        display: flex;

        gap: 10px;

        overflow-x: auto;

        padding:
            2px
            2px
            8px;

        scrollbar-width: none;
    }


    .video-grid::-webkit-scrollbar {
        display: none;
    }


    .video-card {

        flex:
            0 0
            180px;

        width: 180px;

        height: 250px;

        min-width: 180px;

        border-radius: 16px;

        box-shadow:
            0 8px 25px rgba(0,0,0,.08);
    }


    .video-content {

        width: 86%;

        padding:
            11px
            13px;

        border-radius:
            0
            20px
            0
            0;
    }


    .video-content h3 {
        font-size: 11px;
    }

}


/* =========================================================
   📱 PVC CATEGORY SECTION
========================================================= */

@media (max-width: 767px) {

    .category-section {

        padding:
            35px
            14px
            45px;
    }


    .section-header {

        margin-bottom: 21px;

        text-align: left;
    }


    .section-header h2 {

        font-size: 23px;

        line-height: 1.2;

        letter-spacing: -.3px;
    }


    /* Horizontal app-style category pills */

    .category-tabs {

        width: calc(100% + 28px);

        margin-left: -14px;

        padding:
            2px
            14px
            10px;

        display: flex;

        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        gap: 8px;

        scrollbar-width: none;
    }


    .category-tabs::-webkit-scrollbar {
        display: none;
    }


    .tab-btn {

        flex:
            0 0
            auto;

        min-height: 40px;

        height: 40px;

        padding:
            0
            17px;

        border-radius: 50px;

        font-size: 11px;

        white-space: nowrap;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    /* Product grid */

    .service-section {

        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            17px
            10px;
    }


    .service-card {

        width: 100%;

        min-width: 0;
    }


    .service-image {

        width: 100%;

        aspect-ratio:
            1 / 1.08;

        border-radius: 13px;

        background: #f1f1f1;
    }


    .service-image img {

        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    .service-card h3 {

        margin:
            8px
            2px
            0;

        font-size: 11px;

        line-height: 1.35;

        text-align: center;
    }


    .product-skeleton {

        border-radius: 13px;
    }

}


/* =========================================================
   📱 HOW WE WORK
========================================================= */

@media (max-width: 767px) {

    .process-section {

        padding:
            42px
            14px
            28px;

        background:
            linear-gradient(
                180deg,
                #fff8f8,
                #ffffff
            );
    }


    .section-heading {

        margin-bottom: 28px;

        text-align: center;
    }


    .small-heading {

        font-size: 10px;

        letter-spacing: .5px;

        margin-bottom: 7px;
    }


    .section-heading h2 {

        font-size: 22px;

        line-height: 1.25;
    }


    .heading-line {

        width: 35px;

        height: 2px;

        margin-top: 9px;
    }


    .process-container {

        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            30px
            10px;
    }


    .process-line {
        display: none;
    }


    .process-item {

        min-width: 0;

        text-align: center;
    }


    .step-icon {

        width: 58px;
        height: 58px;

        margin:
            0
            auto
            10px;

        border-radius: 18px;

        font-size: 17px;
    }


    .step-number {

        width: 19px;
        height: 19px;

        top: -5px;
        left: -4px;

        font-size: 9px;
    }


    .process-item h3 {

        font-size: 11px;

        line-height: 1.35;

        margin-bottom: 5px;
    }


    .process-item p {

        font-size: 8px;

        line-height: 1.55;

        color: #888;
    }


    /* -----------------------------------------
       PROCESS LEAD FORM
    ----------------------------------------- */

    .lead-form2-wrapper {

        width: 100%;

        min-height: auto;

        margin-top: 30px;

        padding:
            22px
            15px;

        display: flex;

        flex-direction: column;

        gap: 19px;

        border-radius: 17px;

        box-shadow:
            0 8px 25px rgba(0,0,0,.06);
    }


    .lead-form2-content {

        width: 100%;

        text-align: left;
    }


    .form-label {

        font-size: 9px;
    }


    .lead-form2-content h2 {

        font-size: 20px;

        line-height: 1.2;

        margin-top: 6px;
    }


    .lead-form2-content p {

        font-size: 9px;

        line-height: 1.55;

        margin-top: 6px;
    }


    .lead-form2-content br {
        display: none;
    }


    .lead-form2 {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 9px;
    }


    .input-box input,
    .input-box select {

        width: 100%;

        height: 44px;

        border-radius: 10px;

        font-size: 11px;

        padding:
            0
            12px;
    }


    .consultation-btn {

        width: 100%;

        height: 46px;

        border-radius: 10px;

        font-size: 11px;
    }

}


/* =========================================================
   📱 ABOUT SECTION
========================================================= */

@media (max-width: 767px) {

    .about-section {

        padding:
            18px
            12px
            42px;
    }


    .about-container {
        width: 100%;
    }


    .about-top {

        width: 100%;

        min-height: auto;

        display: flex;

        flex-direction: column;

        border-radius: 18px;

        overflow: hidden;
    }


    /* -----------------------------------------
       ABOUT VISUAL
    ----------------------------------------- */

    .about-visual {

        width: 100%;

        height: 350px;

        min-height: 350px;
    }


    .about-red-shape {

        width: 205px;

        height: 145px;

        border-radius:
            0
            0
            130px
            0;
    }


    .about-main-image {

        top: 28px;

        left: 20px;

        width: 76%;

        height: 205px;

        border:
            5px solid #fff;

        border-radius: 21px;
    }


    .about-secondary-image {

        left: auto;

        right: 17px;

        bottom: 25px;

        width: 48%;

        height: 150px;

        border:
            5px solid #fff;

        border-radius: 18px;
    }


    .experience-badge {

        left: 18px;

        bottom: 35px;

        width: 175px;

        height: 65px;

        padding:
            9px
            11px;

        gap: 9px;

        border-radius: 12px;
    }


    .experience-icon {

        width: 38px;
        height: 38px;

        min-width: 38px;

        font-size: 17px;
    }


    .experience-text strong {

        font-size: 21px;
    }


    .experience-text span {

        font-size: 8px;

        margin-top: 3px;
    }


    .about-dots-top {

        top: 60px;

        right: 20px;

        transform: scale(.7);
    }


    .about-dots-bottom {

        bottom: 30px;

        left: 48%;

        transform: scale(.65);
    }


    /* -----------------------------------------
       ABOUT CONTENT
    ----------------------------------------- */

    .about-content {

        width: 100%;

        padding:
            28px
            20px
            25px;
    }


    .about-label {

        font-size: 9px;

        gap: 7px;
    }


    .about-label span {

        width: 24px;

        height: 2px;
    }


    .about-content h2 {

        margin:
            13px
            0
            14px;

        font-size: 26px;

        line-height: 1.18;

        letter-spacing: -.4px;
    }


    .about-title-line {

        width: 45px;

        height: 2px;

        margin-bottom: 15px;
    }


    .about-content > p {

        font-size: 10px;

        line-height: 1.7;

        margin-bottom: 12px;
    }


    /* -----------------------------------------
       ABOUT STATS
    ----------------------------------------- */

    .about-stats {

        margin-top: 22px;

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            18px
            0;
    }


    .about-stat {

        min-height: 75px;

        padding:
            0
            10px;

        border-right:
            1px solid #e5e5e5;

        border-bottom:
            1px solid #e5e5e5;
    }


    .about-stat:nth-child(2n) {

        border-right: none;
    }


    .about-stat:nth-child(n+3) {

        border-bottom: none;
    }


    .stat-icon {

        height: 25px;

        font-size: 18px;

        margin-bottom: 5px;
    }


    .about-stat strong {

        font-size: 18px;
    }


    .about-stat span {

        margin-top: 4px;

        font-size: 8px;
    }


    /* -----------------------------------------
       WHY CHOOSE US
    ----------------------------------------- */

    .why-section {

        margin-top: 15px;

        padding:
            25px
            14px;

        display: flex;

        flex-direction: column;

        gap: 22px;

        border-radius: 18px;
    }


    .why-intro {

        width: 100%;

        padding: 0;
    }


    .why-label {

        font-size: 9px;

        gap: 7px;
    }


    .why-label span {

        width: 24px;

        height: 2px;
    }


    .why-intro h2 {

        margin:
            12px
            0
            13px;

        font-size: 23px;

        line-height: 1.2;
    }


    .why-line {

        width: 42px;

        height: 2px;

        margin-bottom: 12px;
    }


    .why-intro p {

        max-width: 100%;

        font-size: 9px;

        line-height: 1.65;
    }


    /* -----------------------------------------
       WHY CARDS = HORIZONTAL SCROLL
    ----------------------------------------- */

    .why-cards {

        width: calc(100% + 14px);

        display: flex;

        gap: 9px;

        overflow-x: auto;

        padding:
            2px
            2px
            8px;

        scrollbar-width: none;
    }


    .why-cards::-webkit-scrollbar {
        display: none;
    }


    .why-card {

        flex:
            0 0
            145px;

        width: 145px;

        min-height: 190px;

        padding:
            18px
            12px;

        border-radius: 15px;
    }


    .why-icon {

        width: 54px;
        height: 54px;

        margin-bottom: 13px;

        font-size: 21px;
    }


    .why-card h3 {

        font-size: 10px;

        margin-bottom: 8px;
    }


    .why-card p {

        font-size: 8px;

        line-height: 1.55;
    }

}


/* =========================================================
   📱 FAQ SECTION
========================================================= */

@media (max-width: 767px) {

    .faq-section {

        padding:
            45px
            12px;
    }


    .faq-header {

        margin-bottom: 27px;

        text-align: center;
    }


    .faq-label {

        font-size: 9px;

        gap: 7px;

        margin-bottom: 11px;
    }


    .faq-label span {

        width: 24px;

        height: 2px;
    }


    .faq-header h2 {

        font-size: 25px;

        line-height: 1.18;

        letter-spacing: -.3px;
    }


    .faq-header p {

        margin-top: 10px;

        font-size: 9px;

        line-height: 1.65;
    }


    /* Main FAQ card */

    .faq-content {

        display: flex;

        flex-direction: column;

        gap: 18px;

        padding:
            16px
            12px;

        border-radius: 17px;
    }


    .faq-left {

        padding:
            10px
            7px
            5px;
    }


    .faq-left::before {

        font-size: 130px;

        top: -10px;

        right: 5px;
    }


    .faq-number {

        width: 40px;
        height: 40px;

        margin-bottom: 14px;

        border-radius: 11px;
    }


    .faq-number span {

        font-size: 11px;
    }


    .faq-left h3 {

        font-size: 22px;

        line-height: 1.2;

        margin-bottom: 11px;
    }


    .faq-left > p {

        max-width: 100%;

        font-size: 9px;

        line-height: 1.65;

        margin-bottom: 15px;
    }


    .faq-contact-btn {

        min-height: 39px;

        padding:
            0
            13px;

        border-radius: 9px;

        font-size: 9px;

        display: inline-flex;

        align-items: center;
    }


    /* FAQ list */

    .faq-list {

        width: 100%;
    }


    .faq-item {

        margin-bottom: 8px;

        border-radius: 11px;
    }


    .faq-item summary {

        min-height: 53px;

        padding:
            0
            12px;

        gap: 10px;
    }


    .faq-question {

        font-size: 10px;

        line-height: 1.4;
    }


    .faq-icon {

        width: 27px;
        height: 27px;

        min-width: 27px;
    }


    .faq-icon i {

        font-size: 9px;
    }


    .faq-answer {

        padding:
            0
            12px
            13px;
    }


    .faq-answer p {

        padding-top: 11px;

        font-size: 9px;

        line-height: 1.65;
    }


    /* FAQ CTA */

    .faq-bottom-cta {

        margin-top: 15px;

        padding:
            13px;

        border-radius: 12px;

        display: grid;

        grid-template-columns:
            36px
            1fr;

        gap: 9px;
    }


    .faq-cta-icon {

        width: 36px;
        height: 36px;

        min-width: 36px;

        font-size: 14px;

        grid-row:
            1 / 3;
    }


    .faq-cta-text h3 {

        font-size: 11px;
    }


    .faq-cta-text p {

        font-size: 8px;
    }


    .faq-bottom-cta > a {

        width: 100%;

        height: 35px;

        padding:
            0
            10px;

        justify-content: center;

        border-radius: 8px;

        font-size: 9px;

        grid-column:
            2;
    }

}


/* =========================================================
   📱 GOOGLE REVIEWS
========================================================= */

@media (max-width: 767px) {

    .google-reviews-section {

        padding:
            42px
            12px;

        background: #fff;
    }


    .google-reviews-container {

        width: 100%;

        max-width: 100%;
    }


    /* Business header */

    .google-business-header {

        gap: 12px;

        padding-bottom: 18px;
    }


    .business-logo {

        width: 48px;
        height: 48px;

        min-width: 48px;

        font-size: 21px;
    }


    .business-info {

        min-width: 0;
    }


    .business-info h2 {

        font-size: 16px;

        line-height: 1.2;

        margin-bottom: 5px;
    }


    .business-address {

        font-size: 8px;

        line-height: 1.5;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;
    }


    .business-meta {

        margin-top: 7px;

        gap: 5px;

        flex-wrap: wrap;
    }


    .business-meta strong {

        font-size: 14px;
    }


    .rating-stars,
    .google-stars {

        font-size: 12px;

        letter-spacing: .5px;
    }


    .business-meta span {

        font-size: 9px;
    }


    .business-category {

        margin-top: 7px;

        padding:
            4px
            7px;

        font-size: 8px;
    }


    /* Toolbar */

    .review-toolbar {

        padding:
            14px
            0;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }


    .review-filters {

        width: 100%;

        display: flex;

        overflow-x: auto;

        scrollbar-width: none;
    }


    .review-filters::-webkit-scrollbar {
        display: none;
    }


    .review-filter {

        flex: 0 0 auto;

        padding:
            8px
            13px;

        font-size: 9px;

        border-radius: 20px;
    }


    .review-sort {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;
    }


    .review-sort span {

        font-size: 9px;
    }


    .sort-button {

        font-size: 9px;
    }


    /* Reviews */

    .reviews-list {

        width: 100%;
    }


    .google-review {

        padding:
            20px
            0;

        border-bottom:
            1px solid #dadce0;
    }


    .review-top {

        display: flex;

        align-items: center;

        gap: 10px;
    }


    .reviewer-avatar {

        width: 39px;
        height: 39px;

        min-width: 39px;

        font-size: 14px;
    }


    .reviewer-info {

        min-width: 0;

        flex: 1;
    }


    .reviewer-info h3 {

        font-size: 12px;

        margin-bottom: 2px;
    }


    .reviewer-info p {

        font-size: 8px;

        line-height: 1.4;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .review-menu {

        width: 30px;
        height: 30px;

        min-width: 30px;

        font-size: 12px;
    }


    .review-rating {

        margin-top: 9px;

        display: flex;

        align-items: center;

        gap: 7px;
    }


    .review-rating .google-stars {

        font-size: 12px;
    }


    .review-date {

        font-size: 8px;
    }


    .review-text {

        margin-top: 9px;

        font-size: 10px;

        line-height: 1.65;
    }


    .review-photo {

        margin-top: 11px;

        width: 100%;

        max-width: 240px;

        height: 160px;

        border-radius: 10px;

        overflow: hidden;
    }


    .review-photo-placeholder {

        font-size: 9px;
    }


    .review-reactions {

        margin-top: 8px;

        font-size: 10px;
    }


    /* Owner response */

    .owner-response {

        margin-top: 13px;

        margin-left: 25px;

        padding:
            12px;

        border-radius: 10px;
    }


    .owner-header {

        gap: 8px;
    }


    .owner-avatar {

        width: 29px;
        height: 29px;

        min-width: 29px;

        font-size: 10px;
    }


    .owner-header h4 {

        font-size: 9px;
    }


    .owner-header span {

        font-size: 7px;
    }


    .owner-response p {

        margin-top: 8px;

        font-size: 8px;

        line-height: 1.65;
    }


    .reviews-footer {

        padding-top: 20px;

        text-align: center;
    }


    .view-more-reviews {

        min-height: 40px;

        padding:
            0
            17px;

        border-radius: 9px;

        font-size: 9px;
    }

}


/* =========================================================
   📱 CONTACT SECTION
========================================================= */

@media (max-width: 767px) {

    .contact-section {

        padding:
            45px
            12px;

        background:
            linear-gradient(
                180deg,
                #ffffff,
                #fffafa
            );
    }


    .contact-container {

        width: 100%;

        max-width: 100%;
    }


    .contact-header {

        margin-bottom: 25px;
    }


    .contact-label {

        font-size: 9px;

        gap: 7px;

        margin-bottom: 10px;
    }


    .contact-label span {

        width: 24px;

        height: 2px;
    }


    .contact-header h2 {

        font-size: 27px;

        line-height: 1.15;

        letter-spacing: -.4px;
    }


    .contact-header p {

        margin-top: 10px;

        font-size: 9px;

        line-height: 1.65;
    }


    /* Contact card */

    .contact-content {

        display: flex;

        flex-direction: column;

        width: 100%;

        border-radius: 18px;

        overflow: hidden;

        box-shadow:
            0 10px 35px rgba(0,0,0,.07);
    }


    /* -----------------------------------------
       CONTACT INFO
    ----------------------------------------- */

    .contact-info {

        width: 100%;
    }


    .contact-info-inner {

        padding:
            30px
            20px;
    }


    .contact-small-title {

        padding:
            5px
            9px;

        font-size: 8px;

        margin-bottom: 13px;
    }


    .contact-info h3 {

        margin:
            0
            12px;

        font-size: 25px;

        line-height: 1.18;
    }


    .contact-description {

        margin:
            0
            21px;

        font-size: 9px;

        line-height: 1.7;
    }


    /* Contact items become cards */

    .contact-info-item {

        min-height: 53px;

        margin-bottom: 8px;

        padding:
            7px;

        gap: 10px;

        border-radius: 11px;

        background:
            rgba(255,255,255,.08);

        border:
            1px solid
            rgba(255,255,255,.10);
    }


    .contact-item-icon {

        width: 36px;
        height: 36px;

        min-width: 36px;

        border-radius: 9px;

        font-size: 13px;
    }


    .contact-info-item span {

        font-size: 7px;

        margin-bottom: 2px;
    }


    .contact-info-item strong {

        font-size: 9px;

        line-height: 1.3;
    }


    /* Social */

    .contact-social {

        margin-top: 18px;

        padding-top: 16px;
    }


    .contact-social > span {

        margin-bottom: 8px;

        font-size: 8px;
    }


    .contact-social a {

        width: 30px;
        height: 30px;

        font-size: 10px;
    }


    /* -----------------------------------------
       CONTACT FORM
    ----------------------------------------- */

    .contact-form-box {

        width: 100%;

        padding:
            27px
            18px;
    }


    .form-heading {

        margin-bottom: 19px;
    }


    .form-heading > span {

        font-size: 8px;
    }


    .form-heading h3 {

        margin:
            6px
            0;

        font-size: 21px;

        line-height: 1.2;
    }


    .form-heading p {

        font-size: 9px;

        line-height: 1.55;
    }


    .contact-form {

        display: grid;

        grid-template-columns: 1fr;

        gap: 11px;
    }


    .form-group {

        width: 100%;

        margin: 0;
    }


    .form-group label {

        margin-bottom: 5px;

        font-size: 9px;
    }


    .input-wrapper input,
    .input-wrapper select {

        width: 100%;

        height: 45px;

        border-radius: 10px;

        padding:
            0
            12px
            0
            36px;

        font-size: 11px;
    }


    .input-wrapper textarea {

        width: 100%;

        min-height: 90px;

        border-radius: 10px;

        padding:
            12px
            12px
            12px
            36px;

        font-size: 11px;
    }


    .input-wrapper > i {

        left: 12px;

        font-size: 11px;
    }


    .select-wrapper::after {

        right: 12px;

        font-size: 8px;
    }


    .form-message {

        grid-column: 1;
    }


    .contact-submit {

        grid-column: 1;

        height: 47px;

        border-radius: 10px;

        font-size: 11px;

        gap: 7px;
    }


    .contact-submit i:first-child {

        font-size: 14px;
    }


    .contact-submit i:last-child {

        font-size: 9px;
    }


    .form-note {

        grid-column: 1;

        font-size: 7px;
    }

}


/* =========================================================
   📱 FOOTER
========================================================= */

@media (max-width: 767px) {

    .site-footer {

        padding-bottom: 0;

        overflow: hidden;
    }


    .footer-container {

        width: 100%;

        padding:
            0
            12px;
    }


    /* -----------------------------------------
       FOOTER CTA
    ----------------------------------------- */

    .footer-cta {

        min-height: auto;

        padding:
            18px
            15px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 13px;

        border-radius:
            0
            0
            15px
            15px;
    }


    .footer-cta-content {

        gap: 10px;

        align-items: center;
    }


    .footer-cta-icon {

        width: 39px;
        height: 39px;

        min-width: 39px;

        font-size: 15px;
    }


    .footer-cta h3 {

        font-size: 13px;

        line-height: 1.25;
    }


    .footer-cta p {

        font-size: 8px;

        line-height: 1.4;
    }


    .footer-cta-btn {

        width: 100%;

        height: 42px;

        padding: 0;

        justify-content: center;

        border-radius: 9px;

        font-size: 9px;
    }


    /* -----------------------------------------
       FOOTER MAIN
    ----------------------------------------- */

    .footer-main {

        width: 100%;

        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            27px
            14px;

        padding:
            35px
            5px
            25px;
    }


    .footer-brand {

        grid-column:
            1 / -1;

        max-width: 100%;
    }


    .footer-logo {

        padding:
            5px
            7px;

        margin-bottom: 11px;

        border-radius: 5px;
    }


    .footer-logo img {

        width: 105px;
    }


    .footer-brand > p {

        font-size: 8px;

        line-height: 1.7;

        color: #aaa;
    }


    .footer-social {

        margin-top: 14px;

        gap: 7px;
    }


    .footer-social a {

        width: 29px;
        height: 29px;

        font-size: 10px;
    }


    /* Footer columns */

    .footer-column {

        min-width: 0;
    }


    .footer-column h3 {

        margin-bottom: 14px;

        padding-bottom: 7px;

        font-size: 10px;
    }


    .footer-column h3::after {

        width: 24px;

        height: 2px;
    }


    .footer-column ul li {

        margin-bottom: 7px;
    }


    .footer-column ul li a {

        font-size: 8px;

        line-height: 1.4;
    }


    /* Contact column */

    .footer-contact-item {

        gap: 7px;

        margin-bottom: 10px;
    }


    .contact-icon {

        width: 25px;
        height: 25px;

        min-width: 25px;

        border-radius: 6px;

        font-size: 9px;
    }


    .footer-contact-item p,
    .footer-contact-item a {

        padding-top: 1px;

        font-size: 7px;

        line-height: 1.5;
    }


    /* -----------------------------------------
       FOOTER BOTTOM
    ----------------------------------------- */

    .footer-bottom {

        min-height: auto;

        padding:
            16px
            5px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        gap: 8px;
    }


    .footer-bottom p {

        font-size: 7px;

        line-height: 1.5;
    }


    .footer-bottom-links {

        gap: 12px;
    }


    .footer-bottom-links a {

        font-size: 7px;
    }

}


/* =========================================================
   📱 WHATSAPP FLOATING BUTTON
========================================================= */

@media (max-width: 767px) {

    .whatsapp {

        width: 50px;
        height: 50px;

        right: 14px;

        bottom:
            calc(14px + env(safe-area-inset-bottom));

        border-radius: 16px;

        font-size: 25px;

        box-shadow:
            0 8px 25px rgba(0,0,0,.22);
    }

}


/* =========================================================
   📱 OFFER POPUP MOBILE
========================================================= */

@media (max-width: 767px) {

    .offer-popup {

        padding:
            10px;

        align-items: center;
    }


    .offer-popup-box {

        width: 96vw;

        max-width: 96vw;

        max-height: 90vh;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .offer-banner-link {

        width: 100%;

        display: block;
    }


    .offer-banner-link img {

        width: 100%;

        max-height: 84vh;

        object-fit: contain;

        display: block;
    }

}


/* =========================================================
   📱 SMALL PHONES
   320px - 380px
========================================================= */

@media (max-width: 380px) {

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }


    .hero-left h1 {
        font-size: 29px;
    }


    .hero-left p {
        font-size: 11px;
    }


    .hero-btns {
        gap: 7px;
    }


    .btn {
        font-size: 10px;
    }


    .gallery-top {
        height: 180px;
    }


    .gallery-middle {
        height: 150px;
    }


    .gallery-item {
        height: 120px;
    }


    .service-section {
        gap:
            15px
            9px;
    }


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


    .about-visual {
        height: 325px;
        min-height: 325px;
    }


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


    .about-secondary-image {
        height: 135px;
    }


    .experience-badge {
        width: 160px;
    }


    .contact-info-inner {
        padding:
            27px
            17px;
    }


    .contact-form-box {
        padding:
            25px
            15px;
    }

}


/* =========================================================
   📱 VERY SMALL PHONE
   320px
========================================================= */

@media (max-width: 340px) {

    .hero-left h1 {
        font-size: 27px;
    }


    .hero-tag {
        font-size: 9px;
    }


    .feature {
        flex-basis: 78px;
        min-width: 78px;
    }


    .feature h4 {
        font-size: 7px;
    }


    .why-card {
        flex-basis: 135px;
        width: 135px;
    }


    .faq-question {
        font-size: 9px;
    }


    .business-info h2 {
        font-size: 14px;
    }

}


/* =========================================================
   📱 SAFE AREA
   For modern Android / iPhone screens
========================================================= */

@media (max-width: 767px) {

    body {

        padding-bottom:
            env(safe-area-inset-bottom);
    }


    .site-footer {

        padding-bottom:
            env(safe-area-inset-bottom);
    }

}



/* =========================================================
   🔥 FINAL MOBILE HERO / BANNER FIX
   Paste at the VERY END of style.css
========================================================= */

@media (max-width: 767px) {

    /* =========================================
       HERO MAIN
    ========================================= */

    .hero {
        width: 100% !important;
        max-width: 100% !important;

        padding: 25px 0 35px !important;

        overflow: hidden !important;

        box-sizing: border-box;

        background:
            linear-gradient(
                180deg,
                #fff5f5 0%,
                #ffffff 58%,
                #ffffff 100%
            ) !important;
    }


    /* =========================================
       HERO WRAPPER
       IMPORTANT: Remove desktop flex layout
    ========================================= */

    .hero-wrapper {

        width: 100% !important;
        max-width: 100% !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 14px !important;

        box-sizing: border-box;

        overflow: visible !important;
    }


    /* =========================================
       HERO LEFT
    ========================================= */

    .hero-left {

        width: 100% !important;
        max-width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        text-align: center !important;

        box-sizing: border-box;
    }


    /* Small red line + title */

    .hero-tag {

        width: 100% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        margin:
            0
            0
            13px !important;

        font-size: 12px !important;

        line-height: 1.4 !important;
    }


    .hero-tag span {

        width: 25px !important;

        min-width: 25px !important;

        height: 2px !important;
    }


    /* =========================================
       HERO MAIN HEADING
    ========================================= */

    .hero-left h1 {

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size:
            clamp(
                32px,
                10vw,
                48px
            ) !important;

        line-height: 1.03 !important;

        letter-spacing: -1px !important;

        font-weight: 800 !important;

        text-align: center !important;

        word-break: normal !important;

        overflow-wrap: normal !important;
    }


    .hero-left h1 span {

        display: inline !important;

        color: #df1f19 !important;
    }


    /* =========================================
       HERO DESCRIPTION
    ========================================= */

    .hero-left p {

        width: 100% !important;
        max-width: 330px !important;

        margin:
            15px
            auto
            0 !important;

        font-size: 11px !important;

        line-height: 1.7 !important;

        text-align: center !important;

        color: #666 !important;
    }


    /* =========================================
       HERO BUTTONS
    ========================================= */

    .hero-btns {

        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            1fr
            1fr !important;

        gap: 9px !important;

        margin:
            21px
            0
            0 !important;

        justify-content: stretch !important;
    }


    .hero-btns .btn {

        width: 100% !important;

        min-width: 0 !important;

        height: 48px !important;

        min-height: 48px !important;

        padding:
            0
            8px !important;

        box-sizing: border-box !important;

        border-radius: 11px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 6px !important;

        font-size: 10px !important;

        line-height: 1.2 !important;

        white-space: normal !important;
    }


    .hero-btns .btn i {

        font-size: 12px !important;
    }


    /* =========================================
       HERO RIGHT
       THIS IS THE MAIN FIX
    ========================================= */

    .hero-right {

        width: 100% !important;
        max-width: 100% !important;

        margin: 25px 0 0 !important;
        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 14px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* =========================================
       GALLERY
    ========================================= */

    .gallery {

        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;

        grid-template-columns:
            unset !important;

        gap: 9px !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       BIG TOP IMAGE
    ========================================= */

    .gallery-top {

        width: 100% !important;

        height: 210px !important;

        grid-column:
            1 / -1 !important;

        overflow: hidden !important;

        border-radius: 15px !important;

        box-sizing: border-box !important;
    }


    .gallery-top img {

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        display: block !important;
    }


    /* =========================================
       MIDDLE IMAGE
    ========================================= */

    .gallery-middle {

        width: 100% !important;

        height: 165px !important;

        grid-column:
            1 / -1 !important;

        overflow: hidden !important;

        border-radius: 15px !important;

        box-sizing: border-box !important;
    }


    .gallery-middle img {

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        display: block !important;
    }


    /* =========================================
       BOTTOM TWO IMAGES
    ========================================= */

    .gallery-bottom {

        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            1fr
            1fr !important;

        gap: 9px !important;
    }


    .gallery-item {

        width: 100% !important;

        height: 125px !important;

        min-width: 0 !important;

        overflow: hidden !important;

        border-radius: 13px !important;

        box-sizing: border-box !important;
    }


    .gallery-item img {

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        display: block !important;
    }


    /* =========================================
       LEAD FORM
       Move BELOW gallery
    ========================================= */

    .lead-form {

        width: 100% !important;
        max-width: 100% !important;

        position: relative !important;

        top: auto !important;

        left: auto !important;
        right: auto !important;

        margin:
            0 !important;

        padding:
            23px
            16px !important;

        box-sizing: border-box !important;

        border-radius: 17px !important;

        box-shadow:
            0
            10px
            30px
            rgba(0,0,0,.08) !important;
    }


    /* =========================================
       FORM HEADING
    ========================================= */

    .form-head {

        width: 100% !important;

        text-align: center !important;
    }


    .form-head h3 {

        margin:
            7px
            0
            0 !important;

        font-size: 21px !important;

        line-height: 1.2 !important;
    }


    .form-head p {

        margin:
            8px
            auto
            0 !important;

        max-width: 280px !important;

        font-size: 10px !important;

        line-height: 1.6 !important;
    }


    /* =========================================
       FORM
    ========================================= */

    .lead-form form {

        width: 100% !important;

        margin-top: 19px !important;
    }


    .lead-form .form-group {

        width: 100% !important;

        margin-bottom: 11px !important;
    }


    .lead-form .form-group label {

        display: block !important;

        margin-bottom: 5px !important;

        font-size: 9px !important;
    }


    .lead-form .form-group input,
    .lead-form .form-group select,
    .lead-form .form-group textarea {

        width: 100% !important;

        box-sizing: border-box !important;

        border-radius: 10px !important;

        font-size: 11px !important;
    }


    .lead-form .form-group input,
    .lead-form .form-group select {

        height: 44px !important;

        padding:
            0
            12px !important;
    }


    .lead-form .form-group textarea {

        height: 90px !important;

        padding:
            11px
            12px !important;
    }


    .lead-form button {

        width: 100% !important;

        height: 46px !important;

        margin-top: 3px !important;

        border-radius: 10px !important;

        font-size: 11px !important;
    }


    /* =========================================
       HERO FEATURES
       3 / 4 FEATURES IN HORIZONTAL SCROLL
    ========================================= */

    .hero-features {

        width: calc(100% + 28px) !important;

        margin:
            24px
            -14px
            0 !important;

        padding:
            0
            14px
            8px !important;

        display: flex !important;

        flex-wrap: nowrap !important;

        justify-content: flex-start !important;

        gap: 0 !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        scrollbar-width: none !important;

        -ms-overflow-style: none !important;
    }


    .hero-features::-webkit-scrollbar {

        display: none !important;
    }


    .feature {

        flex:
            0 0
            100px !important;

        width: 100px !important;

        min-width: 100px !important;

        padding:
            7px
            8px !important;

        text-align: center !important;

        border-right:
            1px solid #e6e6e6 !important;

        box-sizing: border-box !important;
    }


    .feature:last-child {

        border-right: none !important;
    }


    .feature i {

        display: block !important;

        margin-bottom: 8px !important;

        font-size: 19px !important;
    }


    .feature h4 {

        margin: 0 !important;

        font-size: 8px !important;

        line-height: 1.35 !important;
    }


    /* =========================================
       HERO STATS
       If present
    ========================================= */

    .hero-stats {

        width: 100% !important;

        margin:
            25px
            0
            0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, 1fr) !important;

        gap: 9px !important;
    }


    .stat-card {

        padding:
            17px
            10px !important;

        border-radius: 13px !important;
    }


    .stat-card h3 {

        font-size: 20px !important;
    }


    .stat-card p {

        font-size: 8px !important;
    }

}


/* =========================================================
   📱 SMALL PHONE
========================================================= */

@media (max-width: 380px) {

    .hero-wrapper {

        padding:
            0
            12px !important;
    }


    .hero {

        padding-top:
            20px !important;
    }


    .hero-left h1 {

        font-size:
            29px !important;

        line-height:
            1.04 !important;
    }


    .hero-left p {

        font-size:
            10px !important;

        max-width:
            290px !important;
    }


    .hero-btns {

        gap:
            7px !important;
    }


    .hero-btns .btn {

        height:
            45px !important;

        min-height:
            45px !important;

        font-size:
            9px !important;
    }


    .hero-right {

        margin-top:
            21px !important;
    }


    .gallery-top {

        height:
            180px !important;
    }


    .gallery-middle {

        height:
            145px !important;
    }


    .gallery-item {

        height:
            110px !important;
    }


    .lead-form {

        padding:
            20px
            13px !important;
    }


    .form-head h3 {

        font-size:
            19px !important;
    }


    .feature {

        flex-basis:
            88px !important;

        width:
            88px !important;

        min-width:
            88px !important;
    }

}


/* =========================================================
   📱 VERY SMALL PHONE
========================================================= */

@media (max-width: 340px) {

    .hero-left h1 {

        font-size:
            27px !important;
    }


    .hero-left p {

        font-size:
            9px !important;
    }


    .hero-btns .btn {

        font-size:
            8.5px !important;
    }


    .gallery-top {

        height:
            165px !important;
    }


    .gallery-middle {

        height:
            135px !important;
    }


    .gallery-item {

        height:
            100px !important;
    }

}

/* =========================================================
   📱 MOBILE SIDE MENU
========================================================= */


/* DESKTOP-এ hide */

.mobile-menu-btn,
.mobile-side-menu,
.mobile-menu-overlay {
    display: none;
}


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

@media (max-width: 767px) {


    /* -----------------------------------------
       HAMBURGER
    ----------------------------------------- */

    .mobile-menu-btn {

        width: 42px;
        height: 42px;

        padding: 0;

        border: none;

        border-radius: 12px;

        background: #fff;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 5px;

        cursor: pointer;

        box-shadow:
            0 5px 18px rgba(0,0,0,.08);

        position: relative;

        z-index: 10001;
    }


    .mobile-menu-btn span {

        display: block;

        width: 19px;

        height: 2px;

        border-radius: 10px;

        background: #df1f19;

        transition:
            .3s ease;
    }


    /* -----------------------------------------
       SIDE MENU
    ----------------------------------------- */

    .mobile-side-menu {

        display: flex;

        flex-direction: column;

        position: fixed;

        top: 0;

        right: 0;

        width: min(82vw, 330px);

        height: 100dvh;

        background: #fff;

        z-index: 10000;

        transform:
            translateX(110%);

        transition:
            transform .38s
            cubic-bezier(.4,0,.2,1);

        box-shadow:
            -15px
            0
            45px
            rgba(0,0,0,.15);

        overflow-y: auto;

        overflow-x: hidden;
    }


    /* OPEN */

    .mobile-side-menu.active {

        transform:
            translateX(0);
    }


    /* -----------------------------------------
       OVERLAY
    ----------------------------------------- */

    .mobile-menu-overlay {

        position: fixed;

        inset: 0;

        background:
            rgba(0,0,0,.45);

        backdrop-filter:
            blur(3px);

        -webkit-backdrop-filter:
            blur(3px);

        z-index: 9999;

        opacity: 0;

        visibility: hidden;

        transition:
            .3s ease;
    }


    .mobile-menu-overlay.active {

        opacity: 1;

        visibility: visible;
    }


    /* -----------------------------------------
       MENU HEADER
    ----------------------------------------- */

    .mobile-menu-header {

        height: 78px;

        min-height: 78px;

        padding:
            0
            17px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        border-bottom:
            1px solid #eeeeee;

        background:
            linear-gradient(
                135deg,
                #fff,
                #fff7f7
            );
    }


    .mobile-menu-logo {

        width: 112px;

        display: block;
    }


    .mobile-menu-logo img {

        width: 100%;

        height: auto;

        display: block;
    }


    /* Close */

    .mobile-menu-close {

        width: 37px;

        height: 37px;

        border: none;

        border-radius: 11px;

        background: #fff0f0;

        color: #df1f19;

        font-size: 14px;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        transition: .25s ease;
    }


    .mobile-menu-close:active {

        transform:
            scale(.9);
    }


    /* -----------------------------------------
       LINKS
    ----------------------------------------- */

    .mobile-menu-links {

        padding:
            17px
            13px;

        display: flex;

        flex-direction: column;

        gap: 6px;
    }


    .mobile-nav-link {

        min-height: 55px;

        padding:
            7px
            10px;

        border-radius: 13px;

        display: flex;

        align-items: center;

        gap: 11px;

        color: #222;

        background: transparent;

        transition:
            .25s ease;
    }


    .mobile-nav-link:active {

        transform:
            scale(.98);
    }


    /* ICON */

    .mobile-nav-icon {

        width: 38px;

        height: 38px;

        min-width: 38px;

        border-radius: 11px;

        display: flex;

        align-items: center;

        justify-content: center;

        background:
            #fff1f1;

        color: #df1f19;

        font-size: 13px;

        transition:
            .25s ease;
    }


    .mobile-nav-link > span:nth-child(2) {

        flex: 1;

        font-size: 12px;

        font-weight: 600;
    }


    .mobile-nav-link > i {

        font-size: 8px;

        color: #aaa;

        transition:
            .25s ease;
    }


    /* ACTIVE */

    .mobile-nav-link.active {

        background:
            linear-gradient(
                135deg,
                #fff1f1,
                #fff8f8
            );

        color: #df1f19;
    }


    .mobile-nav-link.active .mobile-nav-icon {

        background: #df1f19;

        color: #fff;

        box-shadow:
            0
            5px
            14px
            rgba(223,31,25,.2);
    }


    .mobile-nav-link.active > i {

        color: #df1f19;

        transform:
            translateX(2px);
    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .mobile-menu-cta {

        margin:
            auto
            13px
            20px;

        padding:
            18px
            14px;

        border-radius: 16px;

        background:
            linear-gradient(
                135deg,
                #df1f19,
                #f33a34
            );

        color: #fff;

        box-shadow:
            0
            10px
            30px
            rgba(223,31,25,.2);
    }


    .mobile-menu-cta p {

        margin: 0 0 11px;

        font-size: 9px;

        opacity: .9;
    }


    .mobile-menu-cta a {

        min-height: 39px;

        padding:
            0
            12px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 7px;

        border-radius: 9px;

        background: #fff;

        color: #df1f19;

        font-size: 9px;

        font-weight: 700;
    }


}