:root {
   --navy-blue: #0C2140;
   --teal-accent: #4EA3AD;
   --white: #ffffff;
   --light-bg: #f0f9fa;
   --dark-text: #0c2140;
   --gray-bg: #f4f4f4;
   --transition-time: 0.3s ease;
 }

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

 body {
   font-family: 'poppins', sans-serif;
 }

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

 /* ===== Top Bar ===== */
 .top-bar {
   background: var(--navy-blue);
   color: var(--white);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 6px 5%;
   font-size: 14px;
   flex-wrap: wrap;
 }

 .top-left,
 .top-right {
   display: flex;
   align-items: center;
   gap: 20px;
 }

 .top-left i,
 .top-right i {
   margin-right: 6px;
 }

 .top-left a:hover,
 .top-right a:hover {
   color: white;
 }

 .top-right a {
   color: var(--white);
   font-size: 16px;
   transition: var(--transition-time);
 }

 .top-right a:hover {
   opacity: 0.8;
 }

 /* ===== Navbar ===== */
 .navbar {
   background: var(--white);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 15px 5%;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   flex-wrap: wrap;
 }

 .logo {
   height: 80px;
 }

 .nav-center {
   flex: 1;
   display: flex;
   justify-content: center;
   gap: 60px;
 }

 .nav-center>a,
 .dropdown>a {
   position: relative;
   font-weight: 600;
   color: var(--navy-blue);
   padding: 5px 0;
   transition: var(--transition-time);
   display: flex;
   align-items: center;
 }

 .nav-center>a::after,
 .dropdown>a::after {
   content: '';
   position: absolute;
   bottom: -3px;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--teal-accent);
   transition: var(--transition-time);
 }

 .nav-center>a:hover::after,
 .dropdown:hover>a::after {
   width: 100%;
 }

 .nav-center>a:hover,
 .dropdown:hover>a {
   color: var(--teal-accent);
 }

 .nav-right {
   display: flex;
   align-items: center;
   gap: 20px;
 }

 .estimate-btn {
   background: var(--teal-accent);
   color: var(--white);
   padding: 10px 18px;
   border-radius: 25px;
   display: flex;
   align-items: center;
   font-weight: bold;
   transition: var(--transition-time);
 }

 .estimate-btn i {
   margin-right: 8px;
 }

 .estimate-btn:hover {
   background: var(--navy-blue);
   color: white;
 }

 .phone-number {
   text-align: right;
   color: var(--navy-blue);
   line-height: 1.2;
 }

 .phone-number strong {
   font-size: 16px;
 }

 .phone-number span {
   display: block;
   font-size: 12px;
   color: gray;
 }

 /* ===== Dropdown Styles ===== */
 .dropdown {
   position: relative;
 }

 .dropdown-content {
   position: absolute;
   top: 100%;
   left: 0;
   background: var(--white);
   min-width: 250px;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   padding: 10px 0;
   z-index: 100;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition-time);
   margin-top: 5px;
 }

 .dropdown:hover .dropdown-content {
   opacity: 1;
   visibility: visible;
 }

 .dropdown-content a {
   display: flex;
   align-items: center;
   padding: 8px 20px;
   color: var(--navy-blue);
   font-weight: 500;
   font-size: 14px;
   transition: var(--transition-time);
 }

 .dropdown-content a:hover {
   background: var(--light-bg);
   color: var(--teal-accent);
 }

 .dropdown-content a i {
   margin-right: 10px;
   width: 18px;
   text-align: center;
   color: var(--teal-accent);
 }

 .dropdown>a i {
   margin-left: 5px;
   font-size: 12px;
   transition: var(--transition-time);
 }

 .dropdown:hover>a i {
   transform: rotate(180deg);
 }

 /* ===== Mobile Header ===== */
 .mobile-header {
   display: none;
 }

 .mobile-menu-btn {
   font-size: 24px;
   background: none;
   border: none;
   color: var(--navy-blue);
   cursor: pointer;
 }

 .sidebar {
   position: fixed;
   top: 0;
   right: -100%;
   width: 75%;
   height: 100%;
   background: var(--white);
   box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
   padding: 20px;
   transition: var(--transition-time);
   z-index: 1000;
   overflow-y: auto;
 }

 .sidebar.active {
   right: 0;
 }

 .sidebar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   padding-bottom: 15px;
   border-bottom: 1px solid #eee;
 }

 .sidebar-logo {
   height: 40px;
 }

 .close-sidebar {
   font-size: 24px;
   background: none;
   border: none;
   color: var(--navy-blue);
   cursor: pointer;
 }

 .sidebar a {
   display: block;
   padding: 12px 0;
   color: var(--navy-blue);
   font-weight: bold;
   border-bottom: 1px solid #eee;
 }

 .sidebar a i {
   margin-right: 10px;
   width: 20px;
   text-align: center;
 }

 /* Mobile Dropdown Styles */
 .mobile-dropdown-btn {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: 12px 0;
   color: var(--navy-blue);
   font-weight: bold;
   background: none;
   border: none;
   border-bottom: 1px solid #eee;
   cursor: pointer;
 }

 .mobile-dropdown-btn i:first-child {
   margin-right: 10px;
   width: 20px;
   text-align: center;
 }

 .mobile-dropdown-content {
   display: none;
   padding-left: 30px;
   background: var(--light-bg);
   margin: 5px -20px;
   padding: 0 20px 0 40px;
 }

 .mobile-dropdown-content a {
   display: flex;
   align-items: center;
   padding: 10px 0;
   font-size: 14px;
   font-weight: normal;
 }

 .mobile-dropdown-content a i {
   color: var(--teal-accent);
   margin-right: 10px;
 }

 .mobile-dropdown.active .mobile-dropdown-content {
   display: block;
 }

 .mobile-dropdown.active .mobile-dropdown-btn i:last-child {
   transform: rotate(180deg);
 }

 .overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.4);
   opacity: 0;
   visibility: hidden;
   transition: var(--transition-time);
   z-index: 999;
 }

 .overlay.active {
   opacity: 1;
   visibility: visible;
 }

 @media (max-width: 1024px) {
   .nav-center {
     gap: 30px;
   }
 }

 @media (max-width: 768px) {
   .top-bar {
     padding: 8px 5%;
     font-size: 12px;
   }

   .top-left,
   .top-right {
     gap: 10px;
   }

   .top-right a {
     font-size: 14px;
   }

   .nav-center,
   .nav-right {
     display: none;
   }

   .navbar {
     display: none;
   }

   .mobile-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 5%;
     background: var(--white);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   }

   .mobile-header img {
     height: 50px;
   }
 }

 @media (max-width: 480px) {
   .top-left {
     flex-direction: column;
     align-items: flex-start;
     gap: 5px;
   }

   .top-left span {
     display: flex;
     align-items: center;
   }

   .top-right {
     gap: 8px;
   }

   .sidebar {
     width: 85%;
   }
 }

 /* // Footer //  */

 :root {
   --primary-color: #0C2140;
   --secondary-color: #4DA0AA;
   --accent-color: #F0F9FA;
   --text-color: #333;
   --light-text: #777;
   --white: #fff;
   --transition: all 0.3s ease;
 }

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

 body {
   line-height: 1.6;
   color: var(--text-color);
   background-color: var(--white);
 }

 footer {
   background-color: var(--accent-color);
   color: var(--primary-color);
   border-top: 4px solid var(--secondary-color);
   padding: 50px 20px 0;
   position: relative;
   overflow: hidden;
   padding-bottom: 20px;
 }

 .footer-wave {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 20px;
   background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%230C2140" opacity=".1"/></svg>');
   background-size: cover;
 }

 .footer-container {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr;
   gap: 30px;
   position: relative;
   z-index: 1;
 }

 .footer-section {
   padding: 0 15px;
 }

 .footer-section h3 {
   font-size: 18px;
   margin-bottom: 20px;
   padding-bottom: 8px;
   position: relative;
   font-weight: 700;
   color: var(--primary-color);
 }

 .footer-section h3::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 50px;
   height: 3px;
   background-color: var(--secondary-color);
 }

 .footer-section ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .footer-section ul li {
   margin-bottom: 12px;
   transition: var(--transition);
 }

 .footer-section ul li:hover {
   transform: translateX(5px);
 }

 .footer-section ul li a {
   color: var(--primary-color);
   text-decoration: none;
   font-size: 15px;
   display: flex;
   align-items: center;
   transition: var(--transition);
 }

 .footer-section ul li a:hover {
   color: var(--secondary-color);
 }

 .footer-section ul li a i {
   margin-right: 10px;
   color: var(--secondary-color);
   font-size: 14px;
   width: 20px;
   text-align: center;
 }

 .footer-logo {
   margin-bottom: 20px;
   max-width: 100px;
   transition: var(--transition);
 }

 .footer-logo:hover {
   transform: scale(1.05);
 }

 .footer-contact {
   margin-bottom: 20px;
 }

 .footer-phone {
   color: var(--secondary-color);
   font-weight: 700;
   font-size: 18px;
   margin-bottom: 15px;
   display: flex;
   align-items: center;
 }

 .footer-phone i {
   margin-right: 10px;
   font-size: 20px;
 }

 .footer-address {
   color: var(--primary-color);
   margin-bottom: 15px;
   font-size: 14px;
   line-height: 1.6;
 }

 .footer-icons {
   display: flex;
   gap: 15px;
   margin-top: 20px;
 }

 .footer-icons a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   background-color: var(--primary-color);
   color: var(--white);
   border-radius: 50%;
   transition: var(--transition);
 }

 .footer-icons a:hover {
   background-color: var(--secondary-color);
   transform: translateY(-3px);
 }

 .footer-bottom {
   background-color: var(--primary-color);
   color: var(--white);
   padding: 20px;
   text-align: center;
   font-size: 14px;
 }

 .tagline {
   font-weight: 600;
   color: var(--secondary-color);
   display: block;
   margin-top: 10px;
   font-size: 18px;
 }

 .legal-links {
   background-color: var(--primary-color);
   padding: 15px 20px;
   text-align: center;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px 20px;
 }

 .legal-links a {
   color: var(--white);
   text-decoration: none;
   font-size: 13px;
   transition: var(--transition);
   position: relative;
 }

 .legal-links a:not(:last-child)::after {
   content: '|';
   margin-left: 20px;
   color: rgba(255, 255, 255, 0.3);
 }

 .legal-links a:hover {
   color: var(--secondary-color);
 }

 .legal-disclaimer {
   background-color: var(--primary-color);
   color: rgba(255, 255, 255, 0.7);
   padding: 20px;
   font-size: 12px;
   line-height: 1.6;
   text-align: center;
 }

 /* Responsive Layout */
 @media (min-width: 576px) {
   .footer-container {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 @media (min-width: 768px) {
   .footer-container {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 @media (min-width: 992px) {
   .footer-container {
     grid-template-columns: 1.5fr repeat(3, 1fr);
   }

   .footer-section:first-child {
     padding-right: 30px;
   }
 }

 @media (min-width: 1200px) {
   .footer-container {
     padding: 0;
   }
 }

 /* // Hero Section // */

 .hero {
   background: linear-gradient(rgba(12, 33, 64, 0.9), rgba(12, 33, 64, 0.95)),
     url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
   background-size: cover;
   background-position: center;
   color: #ffffff;
   padding: 100px 5%;
   display: flex;
   align-items: center;
   min-height: 600px;
 }

 .hero-content {
   display: flex;
   justify-content: space-between;
   gap: 50px;
   max-width: 1200px;
   margin: 0 auto;
   align-items: center;
   width: 100%;
 }

 .hero-left {
   flex: 1;
   max-width: 600px;
 }

 .hero-left h1 {
   font-size: 2.8rem;
   margin-bottom: 25px;
   line-height: 1.3;
   font-weight: 700;
 }

 .hero-left p {
   font-size: 1.2rem;
   line-height: 1.6;
   margin-bottom: 35px;
   opacity: 0.9;
 }

 .hero-right {
   flex: 1;
   max-width: 500px;
   background: #ffffff;
   padding: 40px;
   border-radius: 12px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }

 .hero-btn {
   display: inline-block;
   padding: 16px 32px;
   background: #4EA1AC;
   color: white;
   text-decoration: none;
   border-radius: 6px;
   font-weight: 600;
   font-size: 1rem;
   transition: all 0.3s ease;
   border: none;
   cursor: pointer;
 }

 .hero-btn:hover {
   background: #001f4d;
   color: white;
   border: 1px solid #4EA1AC;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .quote-form h2 {
   color: #0c2140;
   font-size: 1.8rem;
   margin-bottom: 15px;
 }

 .quote-form p {
   color: #555;
   margin-bottom: 25px;
   font-size: 1rem;
 }

 .quote-form form {
   display: flex;
   flex-direction: column;
 }

 .quote-form label {
   color: #333;
   font-weight: 500;
   margin-bottom: 10px;
   display: block;
 }

 .quote-form input {
   margin-bottom: 20px;
   padding: 14px;
   font-size: 1rem;
   border: 1px solid #ddd;
   border-radius: 6px;
   transition: border 0.3s ease;
 }

 .quote-form input:focus {
   border-color: #001f4d;
   outline: none;
 }

 .button-group {
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
 }

 .service-btn {
   background-color: #f5f7fa;
   color: #333;
   border: 1px solid #ddd;
   padding: 10px 20px;
   border-radius: 6px;
   cursor: pointer;
   font-weight: 500;
   transition: all 0.3s ease;
   flex: 1;
   text-align: center;
 }

 .service-btn.active {
   background-color: #001f4d;
   color: white;
   border-color: #001f4d;
 }

 .submit-btn {
   background: #001f4d;
   color: white;
   border: none;
   padding: 16px;
   border-radius: 6px;
   cursor: pointer;
   font-weight: 600;
   font-size: 1rem;
   transition: all 0.3s ease;
   margin-top: 10px;
 }

 .submit-btn:hover {
   background: #1a6fc7;
 }

 @media (max-width: 1024px) {
   .hero-content {
     flex-direction: column;
     gap: 40px;
   }

   .hero-left,
   .hero-right {
     max-width: 100%;
     text-align: center;
   }

   .hero-left h1 {
     font-size: 2.4rem;
   }

   .button-group {
     justify-content: center;
   }
 }

 @media (max-width: 768px) {
   .hero {
     padding: 80px 5%;
     min-height: auto;
   }

   .hero-left h1 {
     font-size: 2rem;
   }

   .hero-left p {
     font-size: 1rem;
   }

   .hero-right {
     padding: 30px;
   }

   .service-btn {
     padding: 8px 12px;
     font-size: 0.9rem;
   }
 }

 /* /////////   PIC SECTION   //////// */


 .hero-section {
   background-color: #f8f9fa;
   padding: 4rem 0;
 }

 .promise-title {
   color: #041028;
   font-weight: 700;
   margin-bottom: 1.5rem;
   line-height: 1.3;
 }

 .promise-text {
   color: #495057;
   font-size: 1.1rem;
   line-height: 1.6;
   margin-bottom: 2rem;
 }

 .btn-primary {
   background-color: #041028;
   border: none;
   padding: 0.75rem 2rem;
   font-weight: 500;
   letter-spacing: 0.5px;
 }

 .btn-primary:hover {
   background-color: #1a2a4a;
 }

 .img-container {
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .img-container img {
   transition: transform 0.3s ease;
 }

 .img-container:hover img {
   transform: scale(1.02);
 }

 @media (max-width: 768px) {
   .hero-section {
     padding: 2rem 0;
   }

   .promise-title {
     font-size: 1.75rem;
   }
 }

 /* <<<<<<<<<<<<<<<< Testimonial >>>>>>>>>>>>>>>>>>> */
 :root {
   --primary: #4DA0AA;
   --secondary: #0C2140;
   --white: #ffffff;
   --light-gray: #f5f5f5;
   --gold: #FFD700;
 }


 #vv {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .testimonials-section {
   padding: 80px 20px;
   background: linear-gradient(135deg, var(--secondary), var(--primary));
   color: var(--white);
   text-align: center;
   position: relative;
   width: 100%;
   border-radius: 15px;
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
 }

 .testimonials-section h2 {
   font-size: 2.5rem;
   margin-bottom: 60px;
   color: var(--gold);
 }

 .testimonials-container {
   max-width: 1200px;
   margin: 0 auto;
   overflow-x: auto;
   display: flex;
   justify-content: center;
   /* Ensure the cards are centered */
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   gap: 20px;
   padding-bottom: 20px;
   height: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
 }

 .testimonials-container::-webkit-scrollbar {
   display: none;
 }

 .testimonial-card {
   width: 100%;
   flex-shrink: 0;
   scroll-snap-align: center;
   background-color: var(--white);
   border-radius: 12px;
   padding: 60px 30px 30px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
   color: var(--secondary);
   position: relative;
   transition: transform 0.8s ease;
 }

 .testimonial-icon {
   position: absolute;
   top: 12px;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 60px;
   background-color: var(--primary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white);
   font-size: 1.5rem;
   border: 5px solid var(--white);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 2;
 }

 .testimonial-text {
   font-style: italic;
   margin: 30px 0 20px;
   text-align: left;
   position: relative;
   z-index: 1;
   line-height: 1.6;
   font-size: 1.1rem;
 }

 .testimonial-author {
   font-weight: bold;
   text-align: right;
   color: var(--primary);
   position: relative;
   z-index: 1;
   margin-bottom: 8px;
   font-size: 1.2rem;
 }

 .rating {
   color: #122E4B;
   font-size: 1.1rem;
   text-align: right;
 }

 .cta-button {
   display: inline-block;
   margin-top: 60px;
   padding: 15px 40px;
   background-color: var(--secondary);
   color: white;
   text-decoration: none;
   border-radius: 30px;
   font-weight: bold;
   border: none;
   transition: all 0.3s ease;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }

 .cta-button:hover {
   background-color: #4DA0AA;
   color: var(--white);
   transform: translateY(-3px);
   box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
 }

 .indicators {
   display: flex;
   justify-content: center;
   margin-top: 20px;
   gap: 10px;
 }

 .indicator {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.3);
   cursor: pointer;
   transition: background-color 0.3s ease;
 }

 .indicator.active {
   background-color: var(--gold);
   transform: scale(1.2);
 }

 @media (max-width: 900px) {
   .testimonials-container {
     height: auto;
   }

   .testimonial-card {
     padding: 50px 20px 25px;
   }

   .testimonial-text {
     font-size: 1rem;
   }
 }

 @media (max-width: 600px) {
   .testimonials-section h2 {
     font-size: 2rem;
   }
 }

 /* <<<<<<<<<<<<<<<<<<<<< Cards >>>>>>>>>>>>>>>>>>>>>>>>>>>> */

 .section-wrapper {
   padding: 40px 20px;
   text-align: center;
 }

 .section-wrapper h2 {
   color: #0C2140;
   font-size: 28px;
   font-weight: 700;
   margin-bottom: 10px;
 }

 .section-wrapper p {
   max-width: 750px;
   margin: 0 auto 30px;
   font-size: 16px;
   line-height: 1.6;
 }

 .card-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
 }

 .card {
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   width: 250px;
   overflow: hidden;
   position: relative;
   text-align: left;
   padding-bottom: 20px;

 }

 .card img {
   width: 100%;
   height: 160px;
   object-fit: cover;
 }

 .card-content {
   padding: 15px;
 }

 .card h3 {
   font-size: 18px;
   font-weight: 600;
   margin: 0 0 10px;
   color: #0C2140;
 }

 .card p {
   font-size: 14px;
   margin-bottom: 15px;
   color: #555;
 }

 .learn-more {
   display: inline-flex;
   align-items: center;
   font-weight: 600;
   color: #0C2140;
   font-size: 14px;
   text-decoration: none;
 }

 .learn-more i {
   margin-left: 6px;
 }

 .icon-badge {
   position: absolute;
   bottom: 20px;
   right: 25px;
   background: #0C2140;
   color: white;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   box-shadow: 0 5px 15px rgba(12, 33, 64, 0.2);
   border: 3px solid white;
 }

 @media (max-width: 768px) {
   .card-grid {
     flex-direction: column;
     align-items: center;
   }

   .card {
     width: 100%;
     max-width: 350px;
   }
 }

 /* <<<<<<<<<<<<<<< 2ND Cards >>>>>>>>>>>>>> */

 .maid-section-header {
   max-width: 900px;
   margin: 0 auto 40px;
   text-align: center;
 }

 .maid-section-header h2 {
   font-size: 24px;
   color: #0C2140;
   margin-bottom: 16px;
 }

 .maid-section-header p {
   font-size: 16px;
   color: #444;
   line-height: 1.6;
 }

 .maid-card-group {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
 }

 .maid-card-shadow {
   box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.5);
   border-radius: 16px 16px 0 0;
 }

 .maid-card {
   width: 300px;
   background-color: #ffffff;
   overflow: hidden;
   position: relative;

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

 .maid-card img {
   width: 100%;
   height: 250px;
   display: block;
 }

 .maid-card-body {
   padding: 16px;
 }

 .maid-card-body h3 {
   margin: 0 0 8px;
   font-size: 16px;
   font-weight: bold;
   color: #000;
 }

 .maid-card-body p {
   margin: 0;
   font-size: 14px;
   color: #333;
   line-height: 1.5;
 }

 .maid-card-footer {
   padding: 16px;
   padding-top: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
 }

 .maid-card-footer a {
   font-size: 14px;
   color: #0C2140;
   text-decoration: none;
   font-weight: bold;
 }

 .maid-card-footer a:hover {
   text-decoration: underline;
 }

 .maid-icon-badge {
   position: absolute;
   bottom: 2px;
   right: 25px;
   background: #0C2140;
   color: white;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   box-shadow: 0 5px 15px rgba(12, 33, 64, 0.2);
   border: 3px solid white;
 }

 @media (max-width: 768px) {
   .maid-card-group {
     flex-direction: column;
     align-items: center;
   }
 }

 /* <<<<<<<<<<<<<<<< Banner >>>>>>>>>>>>>>>>>>>> */

 .banner {
   background-color: #0C2140;
   padding: 24px 16px;
 }

 .banner-container {
   max-width: 1000px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
 }

 .banner-left {
   display: flex;
   align-items: center;
   gap: 16px;
   color: white;
   flex: 1;
   min-width: 280px;
 }

 .banner-left i {
   font-size: 40px;
 }

 .banner-text {
   font-size: 20px;
   font-weight: bold;
   line-height: 1.4;
 }

 .banner-button {
   background-color: #4EA3AD;
   color: white;
   padding: 10px 24px;
   border: none;
   border-radius: 6px;
   font-weight: bold;
   cursor: pointer;
   transition: background-color 0.3s ease;
   white-space: nowrap;
 }

 .banner-button:hover {
   background-color: #b00050;
 }

 @media (max-width: 768px) {
   .banner-container {
     flex-direction: column;
     align-items: flex-start;
     gap: 20px;
   }

   .banner-button {
     align-self: flex-start;
   }
 }

 @media (max-width: 480px) {
   .banner-text {
     font-size: 16px;
   }

   .banner-left i {
     font-size: 28px;
   }

   .banner-button {
     font-size: 14px;
     padding: 8px 16px;
   }
 }

 /* <<<<<<<<<<<<<<<<<<< Car >>>>>>>>>>>>>>>>>>>>> */
 .outer-wrapper {
   width: 100%;
   padding: 40px 16px;
   display: flex;
   justify-content: center;
   background-color: #0C2140;
 }

 .inner-card {
   background-color: #4EA3AD;
   border-radius: 10px;
   padding: 24px;
   max-width: 900px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
 }

 .image-section {
   flex: 1;
   min-width: 250px;
   max-width: 400px;
 }

 .image-section img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 8px;
 }

 .content-section {
   flex: 2;
   min-width: 280px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .content-section h2 {
   font-size: 24px;
   font-weight: bold;
   margin: 0;
   color: white;
 }

 .content-section p {
   font-size: 16px;
   margin: 0;
   color: white;
   line-height: 1.5;
 }

 .search-row {
   display: flex;
   width: 100%;
   max-width: 450px;
   margin-top: 8px;
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }

 .search-row input {
   flex: 1;
   padding: 10px 12px;
   border: 1px solid #ccc;
   border-right: none;
   font-size: 14px;
   outline: none;
 }

 .search-row button {
   background-color: #0C2140;
   color: white;
   padding: 10px 16px;
   border: none;
   font-weight: bold;
   cursor: pointer;
   font-size: 14px;
   transition: background-color 0.3s ease;
 }

 .search-row button:hover {
   background-color: #081528;
 }

 .phone {
   font-size: 15px;
   font-weight: bold;
   color: #0C2140;
   margin-top: 10px;
 }

 /* Responsive Rules */
 @media (max-width: 992px) {
   .inner-card {
     flex-direction: column;
     align-items: center;
     text-align: center;
   }

   .content-section {
     align-items: center;
   }

   .search-row {
     max-width: 100%;
     flex-direction: column;
   }

   .search-row input,
   .search-row button {
     width: 100%;
     border-radius: 0;
   }

   .search-row input {
     border-right: 1px solid #ccc;
   }
 }


 /* <<<<<<<<<<<<<<<<<<<<< faq >>>>>>>>>>>>>>>>> */

 #b3 {
   font-family: "Poppins", sans-serif;
   background: #fff;
   color: #0C2140;
 }

 .cleaning-wrapper {
   max-width: 1200px;
   margin: 0 auto;
   padding: 40px 30px;
 }

 .cleaning-content-row {
   display: flex;
   gap: 40px;
   align-items: flex-start;
   flex-wrap: wrap;
 }

 .cleaning-info-column {
   flex: 1;
   min-width: 300px;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }

 .cleaning-info-card {
   background-color: #f9f9f9;
   border-left: 6px solid #0C2140;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   padding: 20px;
   border-radius: 12px;
 }

 .cleaning-info-card h3 {
   color: #0C2140;
   margin-bottom: 10px;
   font-size: 18px;
 }

 .cleaning-info-card p {
   color: #333;
   font-size: 15px;
   line-height: 1.5;
 }

 .cleaning-image-column {
   flex: 1;
   min-width: 300px;
 }

 .cleaning-image-column img {
   width: 100%;
   border-radius: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }

 @media (max-width: 768px) {
   .cleaning-content-row {
     flex-direction: column;
   }
 }

 /* <<<<<<<<<<<<<<<<<<<<<<< Faq 1>>>>>>>>>>>>>>>>>>> */

 #b4 {
   font-family: "Poppins", sans-serif;
   background-color: #fff;
   color: #0C2140;
 }

 .accordion {
   background-color: #fff;
   border-left: 6px solid #0C2140;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   overflow: hidden;
   transition: all 0.3s ease;
   margin-bottom: 20px;
 }

 .accordion-header {
   padding: 16px 20px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-weight: bold;
   font-size: 16px;
 }

 .accordion-header i {
   color: #0C2140;
   margin-right: 8px;
 }

 .accordion-icon {
   font-size: 20px;
   color: #0C2140;
 }

 .accordion-content {
   max-height: 0;
   overflow: hidden;
   padding: 0 20px;
   background: #f9f9f9;
   transition: max-height 0.3s ease, padding 0.3s ease;
 }

 .accordion.open .accordion-content {
   max-height: 500px;
   /* adjust as needed */
   padding-bottom: 15px;
 }

 .accordion-content ul {
   list-style-type: disc;
   padding-left: 20px;
   margin-top: 10px;
 }

 .accordion-content li {
   margin-bottom: 8px;
   font-size: 15px;
 }

 .services-section {
   max-width: 1100px;
   margin: auto;
   padding: 20px;
 }

 .services-title {
   text-align: center;
   font-size: 28px;
   font-weight: bold;
   color: #4B9DA8;
   margin-bottom: 10px;
 }

 .services-subtitle {
   text-align: center;
   font-weight: bold;
   color: #0C2140;
   margin-bottom: 15px;
 }

 .services-description {
   text-align: center;
   color: #444;
   font-size: 15px;
   line-height: 1.6;
   max-width: 800px;
   margin: 0 auto;
 }

 .read-more {
   text-align: center;
   margin-top: 5px;
   font-size: 14px;
 }

 /* <<<<<<<<<<<<<<< Merge Cards >>>>>>>>>>>>>>> */

 #b5 {
   font-family: 'Open Sans', sans-serif;
   background-color: #fff;
 }

 .blog-section-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
   padding: 50px 30px;
   max-width: 1300px;
   margin: auto;
 }

 .blog-content-box {
   flex: 1 1 calc(50% - 30px);
   border: 1px solid #ddd;
   padding: 30px;
   border-radius: 10px;
   background-color: #fff;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
 }

 .blog-content-box h3 {
   font-size: 24px;
   color: #4EA3AD;
   font-weight: 700;
   margin-bottom: 12px;
 }

 .blog-link-top {
   float: right;
   font-size: 15px;
   color: #4EA3AD;
   text-decoration: none;
 }

 .blog-image {
   width: 100%;
   border-radius: 8px;
   margin: 25px 0;
 }

 .blog-subtitle {
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 10px;
   color: #222;
 }

 .blog-description {
   font-size: 15px;
   line-height: 1.7;
   color: #444;
 }

 .blog-learn-more {
   display: inline-block;
   margin-top: 12px;
   color: #4EA3AD;
   font-weight: 600;
   text-decoration: none;
   font-size: 15px;
 }

 @media (max-width: 768px) {
   .blog-content-box {
     flex: 1 1 100%;
   }
 }

 /* <<<<<<<<<<<<<<<<<<< FAQ >>>>>>>>>>>>>>>>>>>> */

 #b6 {
   font-family: "Poppins", sans-serif;
   background-color: #f9f9f9;
   color: #0C2140;
 }

 .custom-faq-section {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
   align-items: center;
   justify-content: center;
   text-align: center;
   margin-bottom: 50px;

 }

 .custom-faq-text {
   flex: 1;
   min-width: 300px;
   max-width: 600px;
 }

 .custom-faq-text h2 {
   font-size: 34px;
   margin-bottom: 20px;
 }

 .custom-faq-text p {
   font-size: 18px;
   margin-bottom: 12px;
   color: #333;
   line-height: 1.6;
 }

 .custom-faq-image-box {
   flex: 1;
   min-width: 300px;
   max-width: 500px;
 }

 .custom-faq-image-box img {
   max-width: 100%;
 }

 .custom-accordion-container {
   max-width: 1100px;
   margin: 0 auto;

 }

 .custom-accordion-item {
   background-color: #fff;
   border: 1px solid #ddd;
   border-left: 6px solid #0C2140;
   margin-bottom: 15px;
   border-radius: 6px;
   overflow: hidden;
   transition: all 0.3s ease;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
 }

 .custom-accordion-header {
   padding: 18px 24px;
   font-size: 18px;
   font-weight: bold;
   cursor: pointer;
   position: relative;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
 }

 .custom-accordion-header::after {
   content: "+";
   position: absolute;
   right: 24px;
   font-size: 22px;
   font-weight: bold;
 }

 .custom-accordion-item.active .custom-accordion-header::after {
   content: "-";
 }

 .custom-accordion-body {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease;
   padding: 0 24px;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
 }

 .custom-accordion-item.active .custom-accordion-body {
   padding: 16px 24px;
   max-height: 300px;
 }

 .custom-accordion-body p {
   font-size: 16px;
   color: #444;
 }

 @media (max-width: 768px) {
   .custom-faq-section {
     flex-direction: column;
   }

   .custom-faq-text,
   .custom-faq-image-box {
     width: 100%;
     max-width: 100%;
   }
 }

 /* <<<<<<<<<<<<<<<<< Team>>>>>>>>>>>>>>>>>>>>>>>> */

 /* Renamed Styles */
 #team-section {
   margin: 0;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background-color: #f8f9fa;
 }

 .team-card-container {
   display: flex;
   flex-wrap: wrap;
   background: white;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   border-radius: 10px;
   margin: 20px;
   overflow: hidden;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
 }

 .team-text-content {
   flex: 1;
   padding: 30px;
   min-width: 300px;
 }

 .team-text-content h2 {
   color: #d40072;
   margin-top: 0;
 }

 .team-text-content p {
   color: #333;
   line-height: 1.6;
 }

 .team-text-content a {
   display: inline-block;
   margin-top: 20px;
   padding: 12px 20px;
   background-color: #003366;
   color: white;
   text-decoration: none;
   border-radius: 6px;
   transition: background 0.3s;
 }

 .team-text-content a:hover {
   background-color: #001f4d;
 }

 .team-image-box {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
   background-color: #ffffff;
   min-width: 300px;
 }

 .team-image-box img {
   width: 100%;
   max-width: 600px;
   height: 450px;
   border-radius: 12px;
   box-shadow: 0 0 0 6px #ffffff;
   object-fit: cover;
 }

 @media (max-width: 768px) {
   .team-card-container {
     flex-direction: column;
   }

   .team-image-box,
   .team-text-content {
     flex: 1 1 100%;
   }

   .team-image-box {
     padding: 20px 20px 0;
   }
 }

 /* <<<<<<<<<<<<<<<<<<<<< Before & After Section Styles >>>>>>>>>>>>>>>>>>>>>>>>>>>> */

 #sl {
   font-family: 'Inter', sans-serif;
   background: #f8fafc;
   padding: 40px 20px 80px;
 }

 .ba-cards-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 25px;
 }

 /* Card */
 .ba-card {
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
   overflow: hidden;
   transition: all 0.35s ease;
   height: 500px;
   position: relative;
 }

 .ba-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 12px 28px rgba(12, 33, 64, 0.15);
 }

 /* Before/After Wrapper */
 .ba-before-after {
   position: relative;
   width: 100%;
   height: 450px;
   overflow: hidden;
   border-bottom: 1px solid #eee;
 }

 .ba-before-after img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 /* Before image (clipped) */
 .ba-before-img {
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
   height: 100%;
   overflow: hidden;
   transition: width 0.25s ease-out;
 }

 /* Divider line */
 .ba-divider {
   position: absolute;
   top: 0;
   left: 50%;
   width: 4px;
   height: 100%;
   background: #007bff;
   cursor: ew-resize;
   z-index: 2;
   transition: background 0.3s;
 }

 .ba-card:hover .ba-divider {
   background: #0C2140;
 }

 /* Handle (circle) */
 .ba-handle {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 26px;
   height: 26px;
   background: #fff;
   border: 4px solid #007bff;
   border-radius: 50%;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
   pointer-events: none;
   transition: border-color 0.3s;
 }

 .ba-card:hover .ba-handle {
   border-color: #0C2140;
 }

 /* Labels */
 .ba-label {
   position: absolute;
   top: 12px;
   padding: 6px 12px;
   border-radius: 5px;
   font-size: 13px;
   font-weight: 600;
   color: #fff;
   z-index: 3;
   letter-spacing: 0.5px;
   text-transform: uppercase;
 }

 .ba-before {
   left: 12px;
   background: #d68c1c;
 }

 .ba-after {
   right: 12px;
   background: #007bff;
 }

 /* Card title */
 .ba-card-title {
   text-align: center;
   padding: 15px 10px;
   font-weight: 700;
   font-size: 17px;
   color: #0C2140;
   background: #fff;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .ba-card {
     height: 420px;
   }

   .ba-before-after {
     height: 370px;
   }

   .ba-card-title {
     font-size: 15px;
   }
 }























 /* Sticky Get Quote Button */
 .get-quote-btn {
   position: fixed;
   top: 50%;
   right: 0;
   transform: translateY(-50%) rotate(180deg);
   background: linear-gradient(135deg, #0C2140, #0C2140);
   color: #fff;
   padding: 15px 10px;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   font-weight: 600;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   text-align: center;
   z-index: 9999;
   border: none;
   border-radius: 0 10px 10px 0;
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 140px;
 }

 .get-quote-btn:hover {
   right: 2px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
   background: linear-gradient(135deg, #0C2140, #4EA3AD);
 }

 /* Popup Overlay */
 .popup-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(5px);
   z-index: 10000;
   justify-content: center;
   align-items: center;
   animation: fadeIn 0.3s ease;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }

 /* Popup Content */
 .popup-content {
   background: #fff;
   padding: 30px;
   border-radius: 12px;
   width: 90%;
   max-width: 450px;
   position: relative;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   animation: slideUp 0.4s ease;
   border: 1px solid #f4f4f4;
 }

 @keyframes slideUp {
   from {
     transform: translateY(20px);
     opacity: 0;
   }

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

 .popup-header {
   margin-bottom: 20px;
   text-align: center;
 }

 .popup-header h2 {
   display: inline-block;
   border-bottom: 3px solid #4EA3AD;
   padding-bottom: 6px;
   color: #0c2140;
 }

 .popup-header p {
   color: #666;
   font-size: 14px;
   font-weight: 500;
   margin: 5px 0 0;
 }

 /* Close Button */
 .close-btn {
   position: absolute;
   top: 15px;
   right: 20px;
   font-size: 24px;
   cursor: pointer;
   color: #888;
   transition: all 0.2s;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
 }

 .close-btn:hover {
   color: #0C2140;
   background: #f4f4f4;
 }

 /* Form Styling */
 .quote-form {
   margin-top: 20px;
 }

 .form-group {
   position: relative;
   margin-bottom: 15px;
 }

 .form-group i {
   position: absolute;
   top: 50%;
   left: 15px;
   transform: translateY(-50%);
   color: #999;
 }

 .quote-form input,
 .quote-form textarea {
   width: 100%;
   padding: 12px 15px 12px 40px;
   border: 1px solid #ddd;
   border-radius: 8px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 14px;
   transition: all 0.3s ease;
   background-color: #f0f9fa;
   color: #0c2140;
 }

 .quote-form textarea {
   resize: vertical;
 }

 .quote-form input:focus,
 .quote-form textarea:focus {
   outline: none;
   border-color: #4EA3AD;
   box-shadow: 0 0 0 3px rgba(78, 163, 173, 0.2);
   background-color: #fff;
 }

 .submit-btn {
   background: linear-gradient(135deg, #4EA3AD, #0C2140);
   color: #fff;
   padding: 12px 25px;
   border: none;
   font-weight: 600;
   border-radius: 8px;
   cursor: pointer;
   margin-top: 15px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   transition: all 0.3s ease;
 }

 .submit-btn:hover {
   background: linear-gradient(135deg, #0C2140, #4EA3AD);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(12, 33, 64, 0.3);
 }

 @media (max-width: 480px) {
   .popup-content {
     padding: 25px 20px;
   }

   .get-quote-btn {
     padding: 12px 8px;
     height: 150px;
   }

   .popup-header h2 {
     font-size: 20px;
   }
 }