/*    <style> */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            background: #f7f8fa;
            color: #1f2937;
            min-height: 100vh;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* =========================
           TOP HEADER
        ========================== */

        .header {
            background: #ffffff;
            border-bottom: 1px solid #e5e7eb;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-inner {
            max-width: 1200px;
            margin: auto;
            padding: 18px 24px;
        }

        .top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
        }

        /* Brand */

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 190px;
        }

        .brand-icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: #111827;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 21px;
            font-weight: bold;
        }

        .brand-text {
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        .brand-subtitle {
            font-size: 11px;
            color: #6b7280;
            margin-top: 2px;
        }

        /* Top action buttons */

        .top-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .top-action {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 10px 13px;
            border-radius: 9px;
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            transition: 0.2s ease;
            /* Add these two lines to strip browser defaults: */
            border: none;
            outline: none;
            /* Add this line to show the hand button on hover: */
            cursor: pointer; 
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease;
        }
        
        
        .top-action:hover {
             background: #f3f4f6;
             color: #000000; /* CHANGED: Regular links (like Login/Register) now turn black on hover instead of green */
             /* ZOOM/SCALE: Makes the button 5% larger */
            transform: scale(1); 
            /* LIFT: Moves the button slightly upward */
            transform: translateY(-5px) scale(1.07); 
            /* SHADOW: Adds a soft depth shadow beneath the lifted button */
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 
                        0 10px 20px rgba(0, 0, 0, 0.16), 
                        0 3px 6px rgba(0, 0, 0, 0.10);  
        }

        .top-action.primary {
            background: #111827;
            color: #ffffff;
        }

        .top-action.primary:hover {
            background: #f3f4f6;  /* ADDED: Primary button now changes to light gray background on hover */
             color: #000000;  /* ADDED: Primary button text now turns black on hover */
        } 

        .top-action.disabled {
            color: #9ca3af;
            cursor: default;
        }

        .icon {
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
        }
        
        
        /* WhatsApp */
        .whatsapp-action {
            /* color: #16a34a; green color*/
            background: #111827;  /* black */
            color: #ffffff;       /* white */
            font-size: 12px; /* Shrinks the text size */
          display: inline-flex;
          flex-direction: column;
          align-items: flex-start; /* Aligns text to the left. Use 'center' if preferred */
          
          /* Makes the button smaller */
          padding: 3px 6px;       /* Shrinks the inner spacing */
          cursor: pointer;
          
          /* Add these two lines to strip browser defaults: */
        border: none;
        outline: none;
        
        /* ADDED: Smooth transition effect for background and text color over 0.3 seconds */
        transition: background 0.3s ease, color 0.3s ease;
        }
        
        .whatsapp-action .main-title {
          display: inline-flex;
          align-items: center;
          gap: 6px;                /* Controls the gap between ☎ and WhatsApp */
        }
        
        .whatsapp-action .subtitle-wrapper {
          /* This margin pushes "Services/Booking" to the right, exactly matching the width of the ☎ icon + its gap */
          margin-left: 25px;
          margin-top: -10px;        /* Pulls the second line UP closer to the first line */
        }
        
        .whatsapp-action .subtitle {
          display: block;
          font-size: 11px;         /* Makes "Services/Booking" slightly smaller to fit the button */
          line-height: 1.4;
        }
        
        .whatsapp-action:hover {
           background: #f3f4f6;
           /* color: #15803d; */
           color: #000000;
        }



        /* =========================
           SEARCH ROW
        ========================== */

        .search-row {
            display: grid;
            grid-template-columns: 210px 1fr auto;
            gap: 12px;
            margin-top: 18px;
        }

        .location-box,
        .search-box {
            height: 38px;
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            display: flex;
            align-items: center;
        }

        .location-box {
            padding: 0 14px;
            gap: 9px;
        }

        .location-box select {
            border: none;
            outline: none;
            background: transparent;
            width: 100%;
            font-size: 14px;
            color: #374151;
            cursor: pointer;
        }

        .search-box {
            padding-left: 15px;
            overflow: visible;
        }

        .search-box input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            height: 100%;
            padding: 0 12px;
            font-size: 14px;
        }

        .search-button {
            height: 48px;
            padding: 0 22px;
            border: none;
            border-radius: 10px;
            background: #111827;
            color: #ffffff;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.2s ease;
        }

        .search-button:hover {
            background: #000000;
        }

/* =========================
   HOME CONTENT AREA
========================= */

.home-content {
    max-width: 1200px;
    margin: 55px auto 0;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.hero {
    margin: 0;
    padding: 0;
}

.hero-content {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 65px 40px;
    text-align: center;
    min-height: 100%;
}

.home-image-area {
    min-height: 400px;
}


        .hero-label {
            display: inline-block;
            background: #f3f4f6;
            color: #4b5563;
            padding: 7px 13px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 18px;
        }

        .hero h1 {
            font-size: 42px;
            line-height: 1.15;
            letter-spacing: -1.5px;
            color: #111827;
            max-width: 700px;
            margin: auto;
        }

        .hero p {
            max-width: 620px;
            margin: 18px auto 28px;
            color: #6b7280;
            line-height: 1.7;
            font-size: 16px;
        }

        .hero-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 13px 24px;
            border-radius: 9px;
            background: #111827;
            color: #ffffff;
            font-size: 14px;
            font-weight: 700;
            transition: 0.2s ease;
        }

        .hero-button:hover {
            background: #000000;
            transform: translateY(-1px);
        }


        .home-image-area {
            display: flex;
            align-items: flex-start; 
            justify-content: flex-start; 
            min-height: 400px;
        }
        
        .home-image-area img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 16px;
        }
        
        /* New CSS to stack the text below the image */
        .profile-card {
            display: flex;
            flex-direction: column; /* Forces image and text to stack vertically */
            align-items: flex-start; /* Aligns text to the left side, matching the image */
        }
        
        .profile-name {
            font-size: 14px;
            color: #666666; /* Optional: subtle grey color for the subtitle */
            margin: 0;
        }
        
        .profile-services {
            font-size: 14px;
            color: #666666; /* Optional: subtle grey color for the subtitle */
            margin: 0;
            width: 100px; 
            text-align: center;
        }
        
        /* Base styles for the clickable link */
        .profile-card {
            display: inline-block;
            border-radius: 8px; /* Match this to your image's corner radius if it has one */
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            outline: none; /* Removes default browser outline to use custom focus instead */
        }
        
        /* Hover and Focus operations combined for consistent user experience */
        .profile-card:hover,
        .profile-card:focus {
            transform: scale(1.03); /* Subtle zoom effect */
            box-shadow: 0 0 0 1px #666666; /* Clean accessible focus ring (change color to match your theme) */
        }
        
        /* Ensure the image scales nicely inside the link */
        .profile-card img {
            display: block;
            max-width: 100%;
            height: auto;
        }



        /* =========================
           FUTURE SERVICES AREA
        ========================== */

        .services-section {
            max-width: 1200px;
            margin: 45px auto 0;
            padding: 0 24px 60px;
        }

        .section-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .section-heading h2 {
            font-size: 21px;
            color: #111827;
        }

        .section-heading span {
            font-size: 13px;
            color: #9ca3af;
        }

        .service-placeholder {
            min-height: 170px;
            border: 1px dashed #d1d5db;
            border-radius: 14px;
            background: #fafafa;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 14px;
        }

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

        .footer {
            border-top: 1px solid #e5e7eb;
            background: #ffffff;
            padding: 25px 24px;
        }

        .footer-inner {
            max-width: 1200px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            color: #9ca3af;
            font-size: 12px;
        }

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding-bottom: 18px;
}

.footer-links a {
    color: #6b7280;
    font-size: 12px;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #111827;
}

.footer-bottom {
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    color: #9ca3af;
    font-size: 12px;
}


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

        @media (max-width: 850px) {

            .top-row {
                flex-wrap: wrap;
            }

            .brand {
                min-width: auto;
            }

            .top-actions {
                width: 100%;
                justify-content: flex-start;
                flex-wrap: wrap;
            }

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

            .hero h1 {
                font-size: 34px;
            }
        }

        
        
        @media (max-width: 550px) {

            .header-inner {
                padding: 14px 16px;
            }
        
            .brand-text {
                font-size: 19px;
            }
        
            .top-action {
                padding: 8px 9px;
                font-size: 12px;
            }
        
            .hero {
                margin-top: 25px;
                padding: 0 14px;
            }
        
            .hero-content {
                padding: 45px 20px;
            }
        
            .hero h1 {
                font-size: 30px;
            }
        
            .hero p {
                font-size: 14px;
            }
        
            .services-section {
                padding-left: 14px;
                padding-right: 14px;
            }
        
            .footer-bottom {
                flex-direction: column;
                text-align: center;
                gap: 6px;
            }
        }
        
     /* </style>  */