:root {
                   --primary-maroon: #800000;
                   --light-maroon: #a00000;
                   --dark-maroon: #600000;
                   --accent-gold: #ffd700;
                   --maroon-rgb: 128, 0, 0;
                   --light-maroon-rgb: 160, 0, 0;
                   --dark-maroon-rgb: 96, 0, 0;
               }

               * {
                   margin: 0;
                   padding: 0;
                   box-sizing: border-box;
               }

               /* body {
                   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
                       "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
               } */

               body {
                   font-family: "Montserrat", sans-serif;
               }

               /* Top Contact Bar */
               /* .top-bar {
                   background-color: #f8f9fa;
                   padding: 8px 0;
                   font-size: 14px;
                   border-bottom: 1px solid #dee2e6;
               } */

               .top-contact {
                   display: flex;
                   justify-content: flex-end;
                   align-items: center;
                   gap: 30px;
               }

               .social-media {
                   display: flex;
                   gap: 19px;
               }

               .social-media i {
                   color: #800000;
                   /* -webkit-text-stroke: 1px var(--light-orange); */
                   font-size: 20px;
                   transition: all 0.3s ease-in-out;
               }

               .social-media i:hover {
                   transform: translateY(-5px);
               }

               .top-contact-item {
                   display: flex;
                   align-items: center;
                   color: #666;
                   text-decoration: none;
                   font-weight: 500;
               }

               .top-contact-item:hover {
                   color: #800000;
               }

               .top-contact-item i {
                   margin-right: 8px;
                   color: #800000;
                   font-size: 17px;
               }

               /* Main Header */
               .header-container {
                   background-color: #ffffff;
                   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                   padding: 0;
               }

               .navbar {
                   padding: 15px 0;
               }

               /* Logo Styling */
               .logo {
                   display: flex;
                   align-items: center;
                   text-decoration: none;
               }

               .logo-icon {
                   width: 55px;
                   height: 55px;
                   background: linear-gradient(135deg, #2563eb, #1e40af);
                   border-radius: 12px;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   margin-right: 15px;
                   position: relative;
                   box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
               }

               .logo-icon::before {
                   content: '';
                   width: 28px;
                   height: 28px;
                   background-color: white;
                   border-radius: 50%;
                   position: absolute;
               }

               .logo-icon .stethoscope {
                   position: absolute;
                   z-index: 2;
                   color: #2563eb;
                   font-size: 18px;
               }

               .logo-icon .house {
                   position: absolute;
                   bottom: 8px;
                   right: 8px;
                   z-index: 3;
                   color: #800000;
                   font-size: 12px;
               }

               .logo-text {
                   color: #2563eb;
                   font-weight: 700;
                   font-size: 26px;
                   line-height: 1.1;
               }

               .logo-text .health {
                   display: block;
                   font-size: 28px;
               }

               .logo-text .at-home {
                   display: block;
                   font-size: 22px;
                   margin-top: -2px;
               }

               .logo-text .at {
                   color: #800000;
                   font-weight: 600;
               }

               div#navbarNav {
                   flex-direction: column;
                   align-items: flex-end;
                   gap: 10px;
               }

               /* Navigation Styling */
               .navbar-nav .nav-link {
                   color: #374151 !important;
                   font-weight: 600;
                   font-size: 16px;
                   padding: 12px 18px !important;
                   position: relative;
                   transition: all 0.3s ease;
               }

               .navbar-nav .nav-link:hover {
                   color: #800000 !important;
               }

               .navbar-nav .nav-item .active {
                   color: #800000 !important;
               }
               .nav-item.dropdown:hover .dropdown-menu {
                  display: block;
                  margin-top: 0; /* optional: aligns better */
                }
                


               .dropdown-menu {
                   border: none;
                   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
                   border-radius: 8px;
                   padding: 10px 0;
                   margin-top: 8px;
                  
               }

               .dropdown-item {
                   padding: 10px 20px;
                   font-weight: 600;
                   transition: all 0.3s ease;
               }

               .dropdown-item:hover {
                   background-color: #f8f9fa;
                   color: #800000;
                   padding-left: 25px;
               }

               /* Call Us Button */
               .call-us-btn {
                   background: linear-gradient(135deg, #800000, #b30000);
                   color: white !important;
                   border: none;
                   padding: 12px 18px;
                   border: 2px solid #800000;
                   font-weight: 600;
                   font-size: 15px;
                   text-decoration: none;
                   transition: all 0.3s ease;
                    margin-left: 18px;
                   display: flex;
                   align-items: center;
                   gap: 8px;
               }

               .call-us-btn:hover {
                   background: white !important;
                   border: 2px solid var(--dark-maroon);
                   color: var(--dark-maroon) !important;
                   transform: translateY(-2px);
                   box-shadow: 0 6px 20px rgb(167 59 40 / 40%);
               }

               .call-us-btn i {
                   font-size: 14px;
               }

               /* Search Icon */
               .search-btn {
                   background: none;
                   border: none;
                   color: #6c757d;
                   font-size: 18px;
                   margin-right: 15px;
                   padding: 8px;

                   transition: all 0.3s ease;
               }

               .search-btn:hover {
                   background-color: #f8f9fa;
                   color: #800000;
               }

               /* Mobile Styles */
               .navbar-toggler {
                   border: none;
                   padding: 6px 10px;
                   border-radius: 6px;
               }

               .navbar-toggler:focus {
                   box-shadow: none;
               }

               .navbar-toggler-icon {
                   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
               }

               @media (max-width: 1024px) {
                   .nav-section {
                       flex-direction: column;
                       flex-wrap: wrap;
                       justify-content: center;
                      
                   }
                 

               }

               @media (max-width: 991.98px) {
                   /* .top-bar {
                       display: none;
                   } */

                   .logo-text .health {
                       font-size: 24px;
                   }

                   .logo-text .at-home {
                       font-size: 20px;
                   }

                   .navbar-collapse {
                       margin-top: 15px;
                       padding-top: 15px;
                       border-top: 1px solid #dee2e6;
                   }

                   .call-us-btn {
                       margin-top: 15px;
                       text-align: center;
                       display: inline-flex;
                       justify-content: center;
                       
                   }

                   .search-btn {
                       display: none;
                   }



               }

               @media (max-width: 576px) {
                   .logo-icon {
                       width: 45px;
                       height: 45px;
                   }

                   .logo-text .health {
                       font-size: 20px;
                   }

                   .logo-text .at-home {
                       font-size: 18px;
                   }

                   .nav-section {
                       flex-direction: column;
                   }
               }



               .hero-section {
                  padding-top: 100px;
                  padding-bottom: 100px;
                   background-image:
                       url("rose/roselanding.jpg");
                   position: relative;
                   display: flex;
                   align-items: center;
                   color: white;
                   overflow: hidden;
                   background-repeat: no-repeat;
                   background-position: right;
                   background-size: cover;
               }

               @keyframes float {

                   0%,
                   100% {
                       transform: translateY(0px);
                   }

                   50% {
                       transform: translateY(-20px);
                   }
               }
                 
                    

                    
                    /* Text box for clarity */
                    .hero-text-box {
                      position: relative;
                      z-index: 1;
                      background:rgb(45 99 159 / 38%)!important; /* deep teal box (like Rosecentre) */
                      color: #fff;
                      padding: 25px 30px;
                      width: fit-content;
                      border-radius: 0px;
                    }
                    
                    .hero-title {
                      font-size: 3rem;
                      font-weight: 700;
                          margin: 0 !important;
                    }
                    
                    .hero-subtitle {
                      font-size: 1.75rem;
                      font-weight: 500;
                      margin-bottom: 15px;
                    }
                    
                    .hero-description {
                      font-size: 1.1rem;
                      line-height: 1.6;
                    }
               .hero-content {
                   z-index: 2;
                   position: relative;
               }

               .hero-title {
                   
                   margin-bottom: 1rem;
                   text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
                   animation: slideInUp 1s ease-out;
                   color: white;
               }

               .hero-subtitle {
                   font-size: 1.8rem;
                   margin-bottom: 1.5rem;
                   opacity: 0.95;
                   animation: slideInUp 1s ease-out 0.3s both;
               }

               .hero-description {
                   font-size: 1.3rem;
                   margin-bottom: 2rem;
                   opacity: 0.9;
                   animation: slideInUp 1s ease-out 0.6s both;
               }

               @keyframes slideInUp {
                   from {
                       opacity: 0;
                       transform: translateY(30px);
                   }

                   to {
                       opacity: 1;
                       transform: translateY(0);
                   }
               }

               .btn-custom {
                   background: var(--dark-maroon);
                   border: 2px solid var(--dark-maroon);
                   color: white;
                   font-weight: 600;
                   font-size: 1rem;
                   padding: 10px 20px;

                   transition: all 0.3s ease;
                   animation: slideInUp 1s ease-out 0.9s both;
                   text-decoration: none;
                   display: inline-block;
               }

               .btn-custom:hover {
                   background: transparent;
                   color: white;
                   border-color: white;
                   transform: translateY(-3px);
                   box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
               }

               .services-section {
                   padding: 100px 0;
                   background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
               }

               .section-title {
                   font-size: 2.5rem;
                   margin-bottom: 1rem;
                   color: #435eb0;
                   font-weight: 600;
                   position: relative;
                   
               }

               .section-title::after {
                   content: '';
                   position: absolute;
                   bottom: -10px;
                   left: 50%;
                   transform: translateX(-50%);
                   width: 80px;
                   height: 4px;
                   background: #435eb0;
                   border-radius: 8px;
               }

               .section-subtitle {
                   font-size: 1.4rem;
                   color: #6c757d;
                   margin-bottom: 4rem;
               }

               .service-card {
                   background: white;
                   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
                   transition: all 0.4s ease;
                   position: relative;
                   overflow: hidden;
                   height: 100%;
               }

               /* Common borders */
               .service-card::before,
               .service-card::after,
               .service-card span::before,
               .service-card span::after {
                   content: '';
                   position: absolute;
                   background: var(--border-gradient, linear-gradient(90deg, #800000, #a83232));
                   transition: transform 0.4s ease;
               }

               /* Top */
               .service-card::before {
                   top: 0;
                   left: 0;
                   right: 0;
                   height: 4px;
                   transform: scaleX(0);
                   transform-origin: left;
               }

               /* Bottom */
               .service-card::after {
                   bottom: 0;
                   left: 0;
                   right: 0;
                   height: 4px;
                   transform: scaleX(0);
                   transform-origin: right;
               }

               /* Left */
               .service-card span::before {
                   top: 0;
                   left: 0;
                   bottom: 0;
                   width: 4px;
                   transform: scaleY(0);
                   transform-origin: top;
               }

               /* Right */
               .service-card span::after {
                   top: 0;
                   right: 0;
                   bottom: 0;
                   width: 4px;
                   transform: scaleY(0);
                   transform-origin: bottom;
               }

               /* Hover effect */
               .service-card:hover::before,
               .service-card:hover::after {
                   transform: scaleX(1);
               }

               .service-card:hover span::before,
               .service-card:hover span::after {
                   transform: scaleY(1);
               }

               .service-card:hover {
                   /*transform: translateY(-15px);*/
                   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
               }

               /* 🎨 Unique gradients for 6 cards */
               .service-card.one {
                   --border-gradient: linear-gradient(135deg, #800000, #ecb833);
                   /* Maroon */
               }

               .service-card.two {
                   --border-gradient: linear-gradient(135deg, #154a04, #369f15);
                   /* Blue */
               }

               .service-card.three {
                   --border-gradient: linear-gradient(135deg, #bc1515, #4a91a7);
                   /* Green */
               }

               .service-card.four {
                   --border-gradient: linear-gradient(125deg, #2126c5, #000000);
                   /* Orange */
               }

               .service-card.five {
                   --border-gradient: linear-gradient(135deg, #052e58, #000000);
                   /* Purple */
               }

               .service-card.six {
                   --border-gradient: linear-gradient(130deg, #432a03, #b77208);
                   /* Pink */
               }

               /* 🎨 Unique gradients for 6 cards */
               .service-card.one:hover h3 {
                   text-align: center;
                   color: #a83232;
                   /* Maroon */
               }

               .service-card.two:hover h3 {
                   text-align: center;
                   color: #154a04;
                   /* Blue */
               }

               .service-card.three:hover h3 {
                   text-align: center;
                   color: #bc1515;
                   /* Green */
               }

               .service-card.four:hover h3 {
                   text-align: center;
                   color: #2126c5;
                   /* Orange */
               }

               .service-card.five:hover h3 {
                   text-align: center;
                   color: #052e58;
                   /* Purple */
               }

               .service-card.six:hover h3 {
                   text-align: center;
                   color: #432a03;
                   /* Pink */
               }


               .service-image {
                   width: 100%;
                   height: 250px;
                   /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   font-size: 3rem;
                   color: var(--primary-maroon);
                   position: relative;
                   overflow: hidden !important;
               }

               .service-image img {
                   height: 90%;
                   width: 90%;
                   object-fit: contain;
               }

               a {
                   text-decoration: none;
               }

               .service-body {
                   padding: 2rem;
               }

               .service-title {
                   font-size: 1.1rem;
                   margin-bottom: 1rem;
                   color: #000000;
                   font-weight: 600;
                   text-align: center;
                   font-style: italic;
               }

               .service-description {
                   color: #6c757d;
                   font-size: 1rem;
                   line-height: 1.7;
               }

               .contact-section {
                   padding: 100px 0;
                   background: white;

                   position: relative;
               }

               .contact-section::before {
                   content: '';
                   position: absolute;
                   top: 0;
                   left: 0;
                   right: 0;
                   bottom: 0;
                   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="contact-pattern" patternUnits="userSpaceOnUse" width="25" height="25"><circle cx="12.5" cy="12.5" r="1" fill="rgba(255,215,0,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23contact-pattern)"/></svg>');
               }

               .contact-content {
                   position: relative;
                   z-index: 2;
               }

               .contact-title {
                   font-size: 3.5rem;
                   margin-bottom: 2rem;
                   font-weight: 300;
                   color: var(--light-maroon);
               }

               .phone-number {
                   font-size: 2.2rem;
                   font-weight: 600;
                   color: var(--light-maroon);
                   text-decoration: none;
                   padding: 20px 40px;
                   border: 3px solid var(--light-maroon);
                   border-radius: 50px;
                   transition: all 0.3s ease;
                   display: inline-block;
                   margin: 20px 0;
               }

               .phone-number:hover {
                   background: var(--light-maroon);
                   color: var(--dark-maroon);
                   transform: scale(1.05);
               }

               .heritage-badge {
                   background: rgba(255, 215, 0, 0.1);
                   padding: 15px 30px;
                   border-radius: 50px;
                   backdrop-filter: blur(10px);
                   border: 1px solid rgba(255, 215, 0, 0.3);
                   font-size: 1.2rem;
                   margin-top: 30px;
                   display: inline-block;
               }




               @keyframes floatRandom {
                   0% {
                       transform: translateY(100vh) rotate(0deg);
                       opacity: 0;
                   }

                   10% {
                       opacity: 1;
                   }

                   90% {
                       opacity: 1;
                   }

                   100% {
                       transform: translateY(-100px) rotate(360deg);
                       opacity: 0;
                   }
               }



               @media (max-width: 768px) {
                   .hero-title {
                       font-size: 2.5rem;
                   }

                   .hero-subtitle {
                       font-size: 1.3rem;
                   }

                   .section-title {
                       font-size: 2.5rem;
                   }

                   .contact-title {
                       font-size: 2.5rem;
                   }

                   .phone-number {
                       font-size: 1.5rem;
                       padding: 15px 25px;
                   }
               }

               .fade-in {
                   opacity: 1;
                   transform: translateY(5px);
                   transition: all 0.8s ease;
               }

               .fade-in.visible {
                   opacity: 1;
                   transform: translateY(0);
               }

               .find-us-btn {
                   background: var(--primary-maroon);
                   color: white;
                   border: none;
                   padding: 15px 30px;
                   border: 2px solid var(--primary-maroon);

                   font-weight: 700;
                   font-size: 1.1rem;
                   transition: all 0.3s ease;

               }

               .find-us-btn:hover {
                   background: white;
                   color: var(--primary-maroon);
                   transform: translateY(-3px);
                   box-shadow: 0 8px 20px rgba(120, 35, 9, 0.5);
               }
               
               
               
               
               




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

        .contact-text {
            font-size: 1.3rem;
            margin-bottom: 30px;
            font-weight: 300;
        }

        .phone-number {
            color: #555;
            font-size: 1.4rem;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 15px;
            padding: 20px 40px;
            border: 3px solid #555;
            border-radius: 0;
            transition: all 0.3s ease;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
        }

        .phone-number:hover {
            background: white;
            color: var(--primary-maroon);
            transform: scale(1.05);
            border-color: var(--primary-maroon);
        }

        .contact-follow-up {
            margin-top: 25px;
            font-size: 1.1rem;
            opacity: 0.9;
        }

        @media (max-width: 768px) {
            .hero-content h1 {
                font-size: 2.5rem;
            }
            
            .intro-questions, .content-section, .contact-section {
                padding: 30px 20px;
            }
            
            .phone-number {
                font-size: 1.5rem;
                padding: 15px 25px;
            }
            
            .container {
                padding: 0 15px;
            }
        }
        
        
        
        
        /*find us*/
        
           /* Card Enhancements */
               .custom-card {
                   border: none;
                   border-radius: 0;
                   box-shadow: 0 10px 30px rgba(var(--maroon-rgb), 0.1);
                   transition: all 0.3s ease;
                   overflow: hidden;
               }

               .card-header.card-header-maroon {
                   border-radius: 0px;
               }

               .custom-card:hover {
                   transform: translateY(-10px);
                   box-shadow: 0 20px 40px rgba(var(--maroon-rgb), 0.15);
               }

               .card-header-maroon {
                   background: linear-gradient(135deg, var(--primary-maroon) 0%, var(--light-maroon) 100%);
                   color: white;
                   border: none;
                   font-weight: 600;
                   font-size: 1.2rem;
                   border-radius: 0;
               }

               .card-header-maroon i {
                   margin-right: 0.75rem;
                   opacity: 0.9;
               }

               /* Contact Card Special Styling */
               .contact-card {
                   background: linear-gradient(135deg, var(--primary-maroon) 0%, var(--light-maroon) 100%);
                   color: white;
               }

               .contact-card .card-body {
                   padding: 2rem;
               }

               .phone-link {
                   color: #555;
                   font-size: 1.1rem;
                   font-weight: 600;
                   text-decoration: none;
                   transition: all 0.3s ease;
                    line-height: 1.8
               }

               .phone-link:hover {
                   color: var(--primary-maroon);
                    transform: translateX(10px);
               }

               /* Map Section */
               .map-section {
                   background: white;
                   border-radius: 0;

                   overflow: hidden;
               }

               .map-title {
                   background: linear-gradient(135deg, var(--primary-maroon) 0%, var(--light-maroon) 100%);
                   color: white;
                   padding: 1.5rem 0;
                   margin: 0;
               }

               .map-container iframe {
                   border-radius: 0;
                   width: 100%;
                   height: 450px;
                   border: none;
               }

               /* Parking Section */
               .parking-card {
                   background: white;
                   border-radius: 0px;
                   box-shadow: 0 10px 30px rgba(var(--maroon-rgb), 0.1);
                   overflow: hidden;
               }

               .parking-header {
                   background: linear-gradient(135deg, var(--primary-maroon) 0%, var(--light-maroon) 100%);
                   color: white;
                   padding: 1.25rem 1.5rem;
                   font-size: 1.3rem;
                   font-weight: 600;
                   border: none;
               }

               .parking-item {
                   background: #f8f9fa;
                   border-left: 4px solid var(--primary-maroon);
                   margin-bottom: 0.75rem;
                   padding: 1rem 1.25rem;
                   border-radius: 0 8px 8px 0;
                   transition: all 0.3s ease;
                   position: relative;
               }

               /*.parking-item:hover {*/
               /*    transform: translateX(10px);*/
               /*    background: #e9ecef;*/
               /*    box-shadow: 0 5px 15px rgba(var(--maroon-rgb), 0.1);*/
               /*}*/

               .parking-item::before {
                   content: '\f3c5';
                   font-family: 'Font Awesome 6 Free';
                   font-weight: 900;
                   color: var(--primary-maroon);
                   margin-right: 0.75rem;
                   font-size: 1.1rem;
               }

               .parking-item:last-child {
                   margin-bottom: 0;
               }

               /* Address styling */
               .address-text {
                   line-height: 1.8;
                       font-size: 1.2rem;
                    font-weight: 600;
               }

               .address-label {
                   color: var(--dark-maroon);
                   font-weight: 600;
                   display: block;
                   margin-bottom: 0.5rem;
               }

               .rose-centre-link {
                   color: var(--primary-maroon);
                   text-decoration: none;
                   font-weight: 600;
                   transition: color 0.3s ease;
               }

               .rose-centre-link:hover {
                   color: var(--light-maroon);
                   text-decoration: underline;
               }

               /* Animation Classes */
               .animate-fade-up {
                   animation: fadeInUp 0.8s ease forwards;
                   opacity: 0;
                   transform: translateY(30px);
               }

               .animate-delay-1 {
                   animation-delay: 0.1s;
               }

               .animate-delay-2 {
                   animation-delay: 0.2s;
               }

               .animate-delay-3 {
                   animation-delay: 0.3s;
               }

               .animate-delay-4 {
                   animation-delay: 0.4s;
               }

               @keyframes fadeInUp {
                   to {
                       opacity: 1;
                       transform: translateY(0);
                   }
               }

               /* Responsive adjustments */
               @media (max-width: 768px) {
                   .hero-title {
                       font-size: 2.5rem;
                   }

                   .hero-header {
                       min-height: 250px;
                       text-align: center;
                   }

                   .map-container iframe {
                       height: 300px;
                   }

                   .custom-card {
                       margin-bottom: 1.5rem;
                   }
               }

               @media (max-width: 576px) {
                   .hero-title {
                       font-size: 2rem;
                   }

                   .hero-header {
                       min-height: 200px;
                   }

                   .parking-item {
                       font-size: 0.95rem;
                       padding: 0.75rem 1rem;
                   }
               }