/* Banner Section Styles */
        .banner-section {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
        }

        .banner-heading {
            color: #2F3C7E;
            font-size: 2.25rem;
            font-weight: 800;
            text-align: center;
            margin-bottom: 0.2rem;
            line-height: 1.3;
        }

        /* Decorative Elements */
        .banner-decorator-top {
            position: absolute;
            top: -50px;
            right: -50px;
            width: 250px;
            height: 250px;
            background: linear-gradient(135deg, rgba(255, 199, 44, 0.15) 0%, rgba(245, 184, 0, 0.1) 100%);
            border-radius: 50%;
            z-index: 0;
            animation: float 6s ease-in-out infinite;
        }

        .banner-decorator-right {
            position: absolute;
            bottom: -80px;
            right: -80px;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.08) 100%);
            border-radius: 50%;
            z-index: 0;
            animation: float 8s ease-in-out infinite reverse;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }

        .banner-content {
            position: relative;
            z-index: 1;
        }

        /* City Selector Modern Design */
        .city-selector-container {
            width: 100%;
            margin-bottom: 0.75rem;
            background: transparent;
        }

        .city-selector-title-link {
            text-decoration: none;
            display: block;
            transition: all 0.3s ease;
        }

        .city-selector-title-link:hover .city-selector-title {
            color: #ffc72c;
            transform: scale(1.05);
        }

        .city-selector-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #2F3C7E;
            margin-bottom: 0.75rem;
            text-align: center;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }

        .city-selector-grid {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .city-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .city-card:hover {
            transform: translateY(-5px);
        }

        .city-image-wrapper {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid transparent;
            transition: all 0.3s ease;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Chennai - Orange Border */
        .city-card-chennai .city-image-wrapper {
            border-color: #F9CD05;
            box-shadow: 0 4px 12px rgba(249, 205, 5, 0.2);
        }

        .city-card-chennai:hover .city-image-wrapper {
            transform: scale(1.08);
            border-color: #F9CD05;
            box-shadow: 0 6px 20px rgba(249, 205, 5, 0.4);
        }

        /* Hyderabad - Purple Border */
        .city-card-hyderabad .city-image-wrapper {
            border-color: 	#EE7429;
            box-shadow: 0 4px 12px rgba(238, 116, 41, 0.2);
        }

        .city-card-hyderabad:hover .city-image-wrapper {
            transform: scale(1.08);
            border-color: #EE7429;
            box-shadow: 0 6px 20px rgba(238, 116, 41, 0.4);
        }

        /* Bangalore - Green Border */
        .city-card-bangalore .city-image-wrapper {
            border-color: 	#EC1C24;
            box-shadow: 0 4px 12px rgba(236, 28, 36, 0.2);
        }

        .city-card-bangalore:hover .city-image-wrapper {
            transform: scale(1.08);
            border-color: 	#EC1C24;
            box-shadow: 0 6px 20px rgba(236, 28, 36, 0.4);
        }

        .city-card.active .city-image-wrapper {
            box-shadow: 0 0 0 3px rgba(255, 199, 44, 0.2);
        }

        .city-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .city-image-icon {
            font-size: 2.75rem;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            transition: all 0.4s ease;
        }

        .city-card:hover .city-image {
            transform: scale(1.15);
        }

        .city-card:hover .city-image-icon {
            transform: translate(-50%, -50%) scale(1.15);
        }

        .city-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
            transition: opacity 0.3s ease;
        }

        .city-card:hover .city-overlay {
            background: linear-gradient(135deg, rgba(255, 199, 44, 0.4) 0%, rgba(245, 184, 0, 0.4) 100%);
        }

        .city-info {
            margin-top: 0.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .city-name {
            color: #2F3C7E;
            font-size: 0.9rem;
            font-weight: 600;
            text-align: center;
            transition: color 0.3s ease;
        }

        /* City Name Hover Colors */
        .city-card-chennai:hover .city-name,
        .city-card-chennai.active .city-name {
            color: #F9CD05;
        }

        .city-card-hyderabad:hover .city-name,
        .city-card-hyderabad.active .city-name {
            color: #EE7429;
        }

        .city-card-bangalore:hover .city-name,
        .city-card-bangalore.active .city-name {
            color: #EC1C24;
        }

        /* Search Service Section */
        .search-service-section {
            margin-top: 1rem;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .search-wrapper {
            position: relative;
            width: 100%;
        }

        .search-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #2F3C7E;
            font-size: 1.1rem;
            z-index: 1;
        }

        .search-input {
            width: 100%;
            padding: 0.9rem 3rem 0.9rem 3rem;
            border: 2px solid #e0e0e0;
            border-radius: 50px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: #fff;
            box-shadow: 0 2px 10px rgba(47, 60, 126, 0.08);
        }

        .search-input:focus {
            outline: none;
            border-color: #ffc72c;
            box-shadow: 0 4px 20px rgba(255, 199, 44, 0.2);
        }

        .search-input::placeholder {
            color: #999;
        }

        .clear-search-btn {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            color: #999;
            font-size: 1.1rem;
            cursor: pointer;
            padding: 0.25rem;
            transition: color 0.2s;
        }

        .clear-search-btn:hover {
            color: #2F3C7E;
        }

        /* Search Modal */
        .search-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 1rem;
        }

        .search-modal-overlay.active {
            display: flex;
        }

        .search-modal-panel {
            background: #fff;
            width: 100%;
            max-width: 800px;
            max-height: 85vh;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(47, 60, 126, 0.3);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .search-modal-header {
            padding: 1.25rem 1.5rem;
            background: linear-gradient(135deg, #2F3C7E 0%, #4a5a9e 100%);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .search-modal-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin: 0;
        }

        .search-modal-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: #fff;
            font-size: 1.25rem;
            cursor: pointer;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .search-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .search-modal-body {
            padding: 1.5rem;
            overflow-y: auto;
        }

        /* Modal Search Input */
        .modal-search-wrapper {
            position: relative;
            width: 100%;
            margin-bottom: 1.5rem;
        }

        .modal-search-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #2F3C7E;
            font-size: 1rem;
            z-index: 1;
            pointer-events: none;
        }

        .modal-search-input {
            width: 100%;
            padding: 0.75rem 2.75rem 0.75rem 2.75rem;
            border: 2px solid #e0e0e0;
            border-radius: 25px;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }

        .modal-search-input:focus {
            outline: none;
            border-color: #ffc72c;
            background: #fff;
            box-shadow: 0 2px 8px rgba(255, 199, 44, 0.15);
        }

        .modal-search-input::placeholder {
            color: #999;
        }

        .clear-modal-search-btn {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            color: #999;
            font-size: 1rem;
            cursor: pointer;
            padding: 0.25rem;
            transition: color 0.2s;
        }

        .clear-modal-search-btn:hover {
            color: #2F3C7E;
        }

        .search-results-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .search-result-card {
            background: #fff;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            padding: 1.25rem;
            text-align: center;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
        }

        .search-result-card:hover {
            border-color: #ffc72c;
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(255, 199, 44, 0.25);
        }

        .search-result-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 2rem;
            border: 3px solid rgba(255, 199, 44, 0.3);
        }

        .search-result-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .search-result-icon:hover {
            transform: scale(1.05);
        }

        .search-result-title {
            color: #2F3C7E;
            font-size: 1rem;
            font-weight: 700;
            margin: 0;
        }

        .search-result-category {
            color: #ffc72c;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .no-results {
            text-align: center;
            padding: 3rem 1rem;
            color: #999;
        }

        .no-results p {
            font-size: 1.1rem;
            margin: 0;
        }

        /* Tablet Responsive */
        @media (max-width: 991.98px) {
            .banner-heading {
                font-size: 1.85rem;
                margin-bottom: 1.5rem;
            }

            .banner-decorator-top {
                width: 200px;
                height: 200px;
                top: -40px;
                right: -40px;
            }

            .banner-decorator-right {
                width: 240px;
                height: 240px;
                bottom: -60px;
                right: -60px;
            }

            .city-selector-title {
                font-size: 1rem;
                margin-bottom: 0.65rem;
            }

            .city-selector-title-link:hover .city-selector-title {
                transform: scale(1.03);
            }

            .city-selector-grid {
                gap: 1.25rem;
            }

            .city-image-wrapper {
                width: 90px;
                height: 90px;
                border-width: 3px;
            }

            .city-image-icon {
                font-size: 2.5rem;
            }

            .city-name {
                font-size: 0.85rem;
            }

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

        /* Mobile Responsive */
        @media (max-width: 767.98px) {
            .banner-section {
                padding: 1rem 0 !important;
            }

            .banner-heading {
                font-size: 1.5rem;
                margin-bottom: 1rem;
            }

            .banner-decorator-top {
                width: 150px;
                height: 150px;
                top: -30px;
                right: -30px;
            }

            .banner-decorator-right {
                width: 180px;
                height: 180px;
                bottom: -45px;
                right: -45px;
            }

            .city-selector-container {
                margin-bottom: 0.5rem;
            }

            .city-selector-title {
                font-size: 0.95rem;
                margin-bottom: 0.5rem;
            }

            .city-selector-title-link:hover .city-selector-title {
                transform: scale(1.02);
            }

            .city-selector-grid {
                gap: 1rem;
            }

            .city-image-wrapper {
                width: 75px;
                height: 75px;
                border-width: 2px;
            }

            .city-image-icon {
                font-size: 2.1rem;
            }

            .city-name {
                font-size: 0.8rem;
                margin-top: 0.35rem;
            }

            .city-info {
                margin-top: 0.35rem;
            }

            .search-service-section {
                margin-top: 0.75rem;
                padding: 0 1rem;
            }

            .search-input {
                padding: 0.8rem 2.5rem 0.8rem 2.75rem;
                font-size: 0.9rem;
                cursor: pointer;
            }

            .search-icon {
                left: 0.85rem;
                font-size: 1rem;
                pointer-events: none;
            }

            .clear-search-btn {
                right: 0.85rem;
            }

            .search-modal-overlay {
                padding: 0.5rem;
            }

            .search-modal-panel {
                max-height: 92vh;
                border-radius: 12px;
                margin: 0;
            }

            .search-modal-header {
                padding: 1rem 1.25rem;
                position: sticky;
                top: 0;
                background: linear-gradient(135deg, #2F3C7E 0%, #4a5a9e 100%);
                z-index: 10;
            }

            .search-modal-title {
                font-size: 1.1rem;
            }

            .search-modal-body {
                padding: 1rem;
                max-height: calc(92vh - 70px);
            }

            .modal-search-wrapper {
                margin-bottom: 1rem;
            }

            .modal-search-icon {
                left: 0.85rem;
                font-size: 0.9rem;
            }

            .modal-search-input {
                padding: 0.7rem 2.5rem 0.7rem 2.5rem;
                font-size: 0.9rem;
            }

            .clear-modal-search-btn {
                right: 0.85rem;
            }

            .search-results-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.75rem;
            }

            .search-result-card {
                padding: 1rem;
                gap: 0.5rem;
            }

            .search-result-icon {
                width: 60px;
                height: 60px;
                font-size: 1.75rem;
            }

            .search-result-title {
                font-size: 0.9rem;
                line-height: 1.3;
            }

            .search-result-category {
                font-size: 0.8rem;
            }

            .no-results {
                padding: 2rem 1rem;
            }

            .no-results i {
                font-size: 2.5rem !important;
            }

            .no-results p {
                font-size: 1rem !important;
            }
        }

        @media (max-width: 575.98px) {
            .banner-section {
                padding: 0.75rem 0 !important;
            }

            .banner-heading {
                font-size: 1.25rem;
                margin-bottom: 0.75rem;
            }

            .banner-decorator-top {
                width: 120px;
                height: 120px;
                top: -25px;
                right: -25px;
            }

            .banner-decorator-right {
                width: 140px;
                height: 140px;
                bottom: -35px;
                right: -35px;
            }

            .city-selector-title {
                font-size: 0.9rem;
                margin-bottom: 0.4rem;
            }

            .city-selector-title-link:hover .city-selector-title {
                transform: scale(1.01);
            }

            .city-selector-grid {
                gap: 0.85rem;
            }

            .city-image-wrapper {
                width: 65px;
                height: 65px;
            }

            .city-image-icon {
                font-size: 1.85rem;
            }

            .city-name {
                font-size: 0.75rem;
            }

            .search-service-section {
                margin-top: 0.5rem;
                padding: 0 0.75rem;
            }

            .search-input {
                padding: 0.75rem 2.25rem 0.75rem 2.5rem;
                font-size: 0.85rem;
                cursor: pointer;
            }

            .search-input::placeholder {
                font-size: 0.8rem;
            }

            .search-icon {
                left: 0.75rem;
                font-size: 0.95rem;
            }

            .clear-search-btn {
                right: 0.75rem;
                font-size: 1rem;
            }

            .search-modal-panel {
                max-height: 95vh;
                border-radius: 10px;
            }

            .search-modal-header {
                padding: 0.85rem 1rem;
            }

            .search-modal-title {
                font-size: 1rem;
            }

            .search-modal-close {
                width: 32px;
                height: 32px;
                font-size: 1.1rem;
            }

            .search-modal-body {
                padding: 0.75rem;
                max-height: calc(95vh - 60px);
            }

            .modal-search-wrapper {
                margin-bottom: 0.75rem;
            }

            .modal-search-icon {
                left: 0.75rem;
                font-size: 0.85rem;
            }

            .modal-search-input {
                padding: 0.65rem 2.25rem 0.65rem 2.25rem;
                font-size: 0.85rem;
                border-radius: 20px;
            }

            .modal-search-input::placeholder {
                font-size: 0.8rem;
            }

            .clear-modal-search-btn {
                right: 0.75rem;
                font-size: 0.9rem;
            }

            .search-results-grid {
                gap: 0.6rem;
            }

            .search-result-card {
                padding: 0.85rem;
                gap: 0.4rem;
            }

            .search-result-icon {
                width: 55px;
                height: 55px;
                font-size: 1.5rem;
                border-width: 2px;
            }

            .search-result-icon img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .search-result-title {
                font-size: 0.85rem;
                line-height: 1.2;
            }

            .search-result-category {
                font-size: 0.75rem;
            }

            .no-results {
                padding: 1.5rem 0.75rem;
            }

            .no-results i {
                font-size: 2rem !important;
                margin-bottom: 0.75rem !important;
            }

            .no-results p {
                font-size: 0.9rem !important;
            }
        }

         /* --- CSS VARIABLES --- */
        :root {
            --indigo: #2F3C7E;
            --soft-yellow: #FFC72C; /* Gold */
            --white: #FFFFFF;
            --dark-grey: #2B2B2B;
        }

       
        /* --- SECTION HEADING --- */
        .service-section {
            max-width: 1400px;
            margin: 0 auto;
            text-align: center;
        }

        .section-title {
            color: var(--indigo);
            font-size: 1.8rem;
            margin-bottom: 25px;
            font-weight: 700;
            text-transform: uppercase;
            position: relative;
            display: inline-block;
        }
        
        .section-title::after {
            content: '';
            display: block;
            width: 50px;
            height: 3px;
            background: var(--soft-yellow);
            margin: 8px auto 0;
        }

        /* --- GRID SYSTEM ---
           Desktop (old type): 4 columns
           Mobile (new type): 2 columns
        */
        .services-grid {
            display: grid;
            gap: 18px;
            /* Desktop default: 4 columns (old desktop layout) */
            grid-template-columns: repeat(4, 1fr);
            justify-items: stretch;
            align-items: stretch;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Tablet / small-desktop: keep 3 columns for medium widths */
        @media (max-width: 1199.98px) and (min-width: 768px) {
            .services-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                max-width: 1100px;
            }
        }

        @media (max-width: 575.98px) {
          .section-title {
                    font-size: 1.25rem !important;
                    margin-bottom: 20px !important;
                   }
                  }

        /* Mobile (new type): 2 columns */
        @media (max-width: 767.98px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 14px;
                max-width: 1000px;
            }
        }

        /* Very small screens: keep 2 columns (no single-column fallback) */

        /* --- CARD DESIGN --- */
        .service-card {
            background: var(--white);
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 18px 10px;
            text-align: center;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            height: 100%; 
            text-decoration: none;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .service-card:hover {
            border-color: var(--indigo);
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(47, 60, 126, 0.15);
        }

        /* Icon Styling */
        .icon-box {
            font-size: 2rem;
            color: var(--soft-yellow); 
            margin-bottom: 10px;
            background: #fffdf5;
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid var(--soft-yellow);
            overflow: hidden;
        }

        .icon-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        /* Title Styling */
        .service-card h3 {
            color: var(--indigo);
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 12px;
            line-height: 1.3;
            min-height: 40px; /* Aligns buttons */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* CTA Button Styling */
        .cta-btn {
            background-color: var(--soft-yellow);
            color: var(--indigo);
            padding: 6px 14px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 700;
            text-decoration: none;
            display: inline-block;
            transition: background 0.3s;
            border: none;
            width: 80%; /* Consistent width */
        }

        .cta-btn:hover {
            background-color: #e6b325;
            color: var(--white);
        }

        /* Special Styling for 'More Services' Card */
        .more-card {
            background-color: #f8f9fa; /* Slightly different background */
            border: 1px dashed var(--indigo);
        }
        .more-card .icon-box {
            background: var(--indigo);
            color: var(--white);
            border: none;
        }

        /* Tweak font sizes for smaller screens to avoid overflow */
        @media (max-width: 420px) {
            .service-card h3 {
                font-size: 0.9rem;
            }
            .cta-btn {
                font-size: 0.75rem;
                padding: 6px 10px;
                width: 90%;
            }
            .icon-box {
                width: 52px;
                height: 52px;
                font-size: 1.6rem;
            }
            .icon-box img {
                width: 100%;
                height: 100%;
            }
        }

        /* Tablet sizing */
        @media (max-width: 768px) and (min-width: 421px) {
            .icon-box {
                width: 58px;
                height: 58px;
            }
        }

        /* Modal: More Services */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1200;
            padding: 20px;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal-panel {
            background: var(--white);
            width: 100%;
            max-width: 920px;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(40,13,110,0.18);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            max-height: 92vh;
        }

        .modal-header {
            padding: 16px 18px;
            border-bottom: 1px solid #f1f1f1;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--indigo);
        }

        .modal-close {
            background: transparent;
            border: none;
            font-size: 1.25rem;
            color: #666;
            cursor: pointer;
            padding: 6px;
        }

        .modal-body {
            padding: 14px 18px 22px;
            overflow: auto;
        }

        .modal-section-title {
            font-size: 1rem;
            color: var(--indigo);
            font-weight: 600;
            margin: 10px 0 12px;
        }


        .modal-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            align-items: start;
        }

        .modal-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 10px;
        }

        .modal-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--white);
            color: var(--soft-yellow);
            font-size: 1.6rem;
            box-shadow: 0 6px 18px rgba(40,13,110,0.06);
            border: 2px solid rgba(255,199,44,0.15);
            transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
            overflow: hidden;
        }

        .modal-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .modal-icon:hover {
            background: var(--soft-yellow);
            color: var(--indigo);
            transform: translateY(-6px) scale(1.03);
            box-shadow: 0 18px 40px rgba(40,13,110,0.12);
            border-color: rgba(255,199,44,0.9);
        }

        .modal-item-label {
            font-size: 0.95rem;
            color: var(--dark-grey);
            font-weight: 600;
        }

        /* Compact modal card style for appliance modal (icon, title, CTA) */
        .modal-card {
            background: var(--white);
            border: 1px solid #efefef;
            border-radius: 10px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            text-align: center;
            box-shadow: 0 6px 18px rgba(40,13,110,0.04);
        }

        .modal-card-title {
            font-size: 0.95rem;
            color: var(--indigo);
            font-weight: 700;
        }

        .modal-card-cta {
            background: var(--soft-yellow);
            color: var(--indigo);
            border: none;
            padding: 8px 12px;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            max-width: 160px;
        }

        @media (max-width: 420px) {
            .modal-card-cta { width: 100%; max-width: none; }
            .modal-card { padding: 10px; }
        }

        @media (max-width: 992px) {
            .modal-grid { grid-template-columns: repeat(3,1fr); }
        }

        @media (max-width: 768px) {
            .modal-grid { grid-template-columns: repeat(2,1fr); }
            .modal-panel { max-width: 720px; }
        }

        @media (max-width: 420px) {
            .modal-grid { grid-template-columns: repeat(2,1fr); }
            .modal-icon { width: 58px; height: 58px; font-size: 1.2rem; }
            .modal-icon img { width: 100%; height: 100%; }
            .modal-title { font-size: 1rem; }
        }