:root {
   --accent: #203a43;
   --accent-2: #2c5364;
   --accent-3: #0f2027;
   --muted: #f5f5f5;
   --btn-bg: #ffffff;
   --whatsapp: #25D366;
 }

 /* Reset / base */
 * {
   box-sizing: border-box;
 }

 body {
   margin: 0;
   font-family: Inter, system-ui, Arial, Helvetica, sans-serif;
   background: var(--muted);
   color: #222;
   line-height: 1.45
 }

 a {
   color: inherit;
 }

 img {
   max-width: 100%;
   display: block;
   border-radius: 25px;
 }

 container::selection {
   background: rgba(32, 58, 67, 0.1);
 }

 /* Header / nav */
 .site-header {
   position: sticky;
   top: 0;
   z-index: 9999;
   background: linear-gradient(45deg, var(--accent-3), var(--accent-2));
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 20px;
   box-shadow: 0 4px 18px rgba(10, 10, 10, 0.12)
 }

 .logo h2 {
   margin: 0;
   font-size: 18px;
   letter-spacing: 0.4px;
   text-decoration: underline;
 }

 /* Main nav */
 nav.main-nav {
   display: flex;
   align-items: center;
 }

 ul.nav-list {
   display: flex;
   gap: 16px;
   list-style: none;
   margin: 0;
   padding: 0;
   align-items: center
 }

 .nav-item>a {
   color: #fff;
   text-decoration: none;
   padding: 8px 10px;
   border-radius: 8px;
   display: inline-block;
   font-weight: 600;
   font-size: 14px
 }

 .nav-item>a:hover {
   background: rgba(255, 255, 255, 0.06);
 }

 /* Dropdown */
 .has-dropdown {
   position: relative;
 }

 .has-dropdown>.dropdown {
   position: absolute;
   top: 42px;
   left: 0;
   background: linear-gradient(180deg, var(--accent-2), var(--accent));
   border-radius: 10px;
   padding: 8px;
   min-width: 190px;
   display: none;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18)
 }

 .has-dropdown .dropdown a {
   display: block;
   padding: 8px 10px;
   color: #fff;
   text-decoration: none;
   border-radius: 6px;
   font-weight: 500
 }

 .has-dropdown .dropdown a:hover {
   background: rgba(255, 255, 255, 0.06);
 }

 /* show on hover for desktop */
 @media(min-width:769px) {
   .has-dropdown:hover .dropdown {
     display: block;
   }
 }

 /* Hamburger (mobile) */
 .hamburger {
   display: none;
   cursor: pointer;
   width: 44px;
   height: 34px;
   align-items: center;
   justify-content: center;
   gap: 4px;
   flex-direction: column
 }

 .hamburger span {
   display: block;
   height: 3px;
   /* background: #fff; */
   background-color: #0f2027;
   border-radius: 2px;
   width: 22px;
   transition: transform .25s, opacity .25s
 }

 /* === ADD THIS CODE HERE === */
 .hamburger[aria-expanded="true"] span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
 }

 .hamburger[aria-expanded="true"] span:nth-child(2) {
   opacity: 0;
 }

 .hamburger[aria-expanded="true"] span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
 }

 /* === END OF NEW CODE === */

 /* mobile nav slide panel */
 .mobile-panel {
   display: none;
   position: fixed;
   inset: 0 0 0 35%;
   /* panel from right on mobile */
   background: linear-gradient(180deg, var(--accent-2), var(--accent));
   /* padding: 22px; */
   padding: 60px 22px 22px 22px;
   border-left: 1px solid rgba(255, 255, 255, 0.03);
   z-index: 9998;
   overflow: auto;
 }

 .mobile-panel .nav-list {
   flex-direction: column;
   gap: 8px;
 }

 .mobile-panel .nav-item {
   margin-bottom: 6px;
 }

 /* Luxury Dark Theme Breadcrumb with Gold Accent */
 .breadcrumb-nav {
   font-family: Arial, sans-serif;
   font-size: 15px;
   margin: 15px 0;
   padding: 12px 15px;
   background: #1b1b1b;
   /* Premium dark background */
   border-radius: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
   color: #e5e5e5;
 }

 .breadcrumb-nav ol {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 0;
   margin: 0;
 }

 .breadcrumb-nav li {
   display: flex;
   align-items: center;
   font-weight: 500;
   color: #e0e0e0;
 }

 .breadcrumb-nav li a {
   text-decoration: none;
   color: #D4AF37;
   /* Gold Accent */
   padding: 5px 12px;
   border-radius: 6px;
   transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
 }

 .breadcrumb-nav li a:hover {
   background: #D4AF37;
   color: #1b1b1b;
   box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
   /* Gold Glow Effect */
 }

 .breadcrumb-nav li::after {
   content: "›";
   margin: 0 6px;
   color: #a0a0a0;
   font-size: 14px;
 }

 .breadcrumb-nav li:last-child::after {
   content: "";
 }

 .breadcrumb-nav li:last-child span {
   font-weight: bold;
   color: #ffffff;
   padding: 5px 12px;
   background: linear-gradient(145deg, #2a2a2a, #1b1b1b);
   border-radius: 6px;
 }

 /* Hero section (parallax background) */
 .hero-section {
   min-height: 72vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: #fff;
   position: relative;
   overflow: hidden;
   background-image: linear-gradient(120deg, rgba(32, 58, 67, 0.6), rgba(44, 83, 100, 0.45)), url('hero-bg.jpg');
   background-size: cover;
   background-position: center center;
   transition: background-position 0.2s linear;
   padding: 70px 20px;
 }



 .hero-content {
   max-width: 980px;
 }

 .hero-title {
   font-size: 38px;
   margin: 0 0 10px;
   font-weight: 700;
   letter-spacing: 0.3px;
   border-bottom: 1px solid rgb(175, 143, 54);
 }

 .hero-subtitle {
   margin: 0 0 18px;
   font-size: 18px;
   opacity: 0.95;

 }

 a[href^="tel:"] {
   text-decoration: none;
   color: inherit;
 }

 a[href^="tel:"]:hover {
   text-decoration: underline;
   color: #ff6b6b;
   /* optional highlight color */
 }

 .hero-cta {
   display: inline-block;
   padding: 12px 22px;
   background: var(--btn-bg);
   color: var(--accent);
   border-radius: 999px;
   text-decoration: none;
   font-weight: 700;
   box-shadow: 0 8px 24px rgba(32, 58, 67, 0.12)
 }

 .hero-cta:hover {
   transform: translateY(-3px);
   transition: transform .18s
 }

 /* Container utility */
 .container {
   max-width: 1100px;
   margin: 0 auto;
   padding: 40px 20px;
 }

 /* Sections */
 h2 {
   font-size: 22px;
   margin: 0 0 12px;
 }


 .banner-section {
   position: relative;
   width: 100%;
   overflow: hidden;
   /* height: 400px; */
   height: 100vh;
   /* You can adjust this as per your existing layout */
 }

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

 .banner-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* Replicates background-image behavior */
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
 }

 .banner-content {
   position: relative;
   z-index: 2;
   color: #fff;
   padding: 50px 20px;
   text-align: center;
   backdrop-filter: brightness(0.5);
   border-radius: 25px;
 }

 .banner-content h1 {
   font-size: 2.5rem;
   font-weight: 700;
   border-bottom: 1px solid black;
 }

 .banner-content p {
   font-size: 1.2rem;
   margin: 10px 0 20px;

 }

 .last-updated {
   font-size: 13px;
   color: #666;
 }

 .cta-btn {
   display: inline-block;
   background-color: #ff6a00;
   color: #fff;
   padding: 12px 24px;
   border-radius: 6px;
   text-decoration: none;
   font-weight: 600;
   transition: 0.3s;
 }

 .cta-btn:hover {
   background-color: #e65a00;
 }

 .listings {
   padding-bottom: 24px;
 }

 .property-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 18px;
   margin-top: 18px;
 }

 .property-card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 8px 20px rgba(15, 20, 25, 0.06);
   transform: translateY(18px);
   opacity: 0;
   transition: transform .6s cubic-bezier(.2, .9, .2, 1), opacity .6s;
   display: flex;
   flex-direction: column;
 }

 .property-card.visible {
   transform: none;
   opacity: 1
 }

 .property-media {
   height: 170px;
   background: #ddd
 }

 .property-body {
   padding: 14px
 }

 .property-title {
   font-size: 16px;
   margin: 0 0 6px;
   font-weight: 700
 }

 .property-meta {
   font-size: 13px;
   color: #666;
   margin-bottom: 12px
 }

 .tag {
   display: inline-block;
   padding: 6px 8px;
   border-radius: 8px;
   font-size: 12px;
   font-weight: 700;
   background: linear-gradient(45deg, #ffb86b, #ff7a7a);
   color: #fff;
   margin-right: 8px
 }

 .btn-small {
   display: inline-block;
   padding: 9px 12px;
   border-radius: 8px;
   background: var(--accent);
   color: #fff;
   text-decoration: none;
   font-weight: 700
 }

 .btn-small:hover {
   opacity: .95;
   transform: translateY(-2px);
   transition: transform .18s opacity .18s
 }




 /* ===============================
   PROPERTY LISTINGS SECTION
================================ */

 #property-listings {
   padding: 3rem 0;
 }

 #property-listings h2 {
   font-size: 1.75rem;
   font-weight: 800;
   margin-bottom: 0.5rem;
   color: #0f172a;
 }

 #property-listings p {
   max-width: 800px;
   color: #475569;
   line-height: 1.6;
   margin-bottom: 2rem;
 }

 /* ===============================
   PROPERTY GRID
================================ */

 .property-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1.75rem;
 }

 /* ===============================
   PROPERTY CARD
================================ */

 .property-card {
   background: #ffffff;
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
   display: flex;
   flex-direction: column;
   transition: transform 0.25s ease, box-shadow 0.25s ease;
 }

 .property-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
 }

 /* ===============================
   PROPERTY IMAGE
================================ */

 .property-media {
   width: 100%;
   aspect-ratio: 4 / 3;
   background: #f1f5f9;
   overflow: hidden;
 }

 .property-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 /* ===============================
   PROPERTY BODY
================================ */

 .property-body {
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   flex: 1;
 }

 .property-body>div:first-child {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 /* ===============================
   TAG / BADGE
================================ */

 .tag {
   font-size: 0.75rem;
   font-weight: 600;
   padding: 0.35rem 0.65rem;
   background: #f1f5f9;
   color: #334155;
   border-radius: 6px;
   white-space: nowrap;
 }

 /* ===============================
   TITLE
================================ */

 .property-title {
   font-size: 1.05rem;
   font-weight: 700;
   line-height: 1.4;
   color: #0f172a;
   margin: 0;
 }

 /* ===============================
   META INFO
================================ */

 .property-meta {
   font-size: 0.85rem;
   color: #64748b;
   line-height: 1.5;
 }

 /* ===============================
   BUTTON
================================ */

 .btn-small {
   margin-top: auto;
   align-self: flex-start;
   background: var(--accent, #2563eb);
   color: #ffffff;
   font-size: 0.85rem;
   font-weight: 600;
   padding: 0.5rem 1rem;
   border-radius: 8px;
   text-decoration: none;
   transition: background 0.2s ease, transform 0.2s ease;
 }

 .btn-small:hover {
   background: #1e40af;
   transform: translateY(-1px);
 }

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

 @media (max-width: 768px) {
   #property-listings {
     padding: 2rem 0;
   }

   #property-listings h2 {
     font-size: 1.5rem;
   }
 }

 @media (max-width: 480px) {
   .property-body {
     padding: 1rem;
   }

   .property-title {
     font-size: 1rem;
   }
 }


 .local-insight {
   font-style: italic;
   opacity: 0.9;
 }




 :root {
   --accent: #203a43;
   --accent-2: #2c5364;
   --accent-3: #0f2027;
   --gold: #D4AF37;
   --whatsapp: #25D366;
   --gradient-blue: linear-gradient(135deg, #203a43 0%, #2c5364 100%);
   --gradient-colorful: linear-gradient(135deg, #2c5364 0%, #0f2027 100%);
   --soft-bg: #f8fafc;
 }

 /* Base utility for all sections */
 section {
   padding: 80px 20px;
   margin-bottom: 40px;
   border-radius: 30px;
   /* Modern rounded look */
 }

 /* --- Who Jaipur Plots Is Designed For --- */
 .who-this-is-for {
   background: var(--gradient-blue);
   color: #ffffff;
   max-width: 1150px;
   margin: 40px auto;
   box-shadow: 0 20px 40px rgba(32, 58, 67, 0.2);
 }

 .who-this-is-for h2 {
   color: var(--gold);
   font-size: 32px;
 }

 .who-this-is-for ul {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 15px;
 }

 .who-this-is-for li::before {
   content: "✦";
   color: var(--gold);
   margin-right: 10px;
   font-weight: bold;
 }

 /* --- Our Services & Service Box --- */
 #service {
   background: #ffffff;
 }

 #service h3 {
   background: rgba(44, 83, 100, 0.05);
   padding: 15px;
   border-left: 5px solid var(--accent-2);
   border-radius: 0 10px 10px 0;
   color: var(--accent-2);
 }

 #service ul li {
   background: #fff;
   border: 1px solid #eee;
   padding: 12px;
   border-radius: 12px;
   transition: 0.3s;
   box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.03);
 }

 #service ul li:hover {
   border-color: var(--gold);
   transform: scale(1.02);
 }

 /* --- Property Listings --- */
 #listings {
   background: var(--soft-bg);
   border: 1px solid #e2e8f0;
 }

 #listings ul li {
   background: #fff;
   margin-bottom: 12px;
   padding: 20px;
   border-radius: 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-left: 6px solid var(--accent);
   transition: 0.3s;
 }

 #listings ul li:hover {
   background: var(--gradient-blue);
   color: #fff;
 }

 /* --- Start Here Section --- */
 .start-here-section {
   background: #fff;
   text-align: center;
 }

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

 .start-box {
   padding: 30px;
   border-radius: 20px;
   background: #fff;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
   border: 1px solid #f0f0f0;
 }

 .start-box:nth-child(odd) {
   background: var(--gradient-colorful);
   color: #fff;
 }

 /* --- Quick Trust & Authority --- */
 .quick-trust,
 .authority-section {
   background: linear-gradient(to right, #ffffff, #f0f7f9);
   border-top: 4px solid var(--gold);
 }

 /* --- About Expertise --- */
 .about-expertise {
   background: var(--accent-3);
   color: #fff;
 }

 .about-expertise h2 {
   color: var(--gold);
 }

 /* --- Articles Section --- */
 #articles {
   background: #fff;
 }

 .article-card {
   border-radius: 15px;
   overflow: hidden;
   background: #fff;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
 }

 /* --- Author Box --- */
 .author-box {
   background: rgba(32, 58, 67, 0.03);
   border: 1px dashed var(--accent-2);
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 25px;
 }

 /* --- Decision Helper & Coverage --- */
 .decision-helper {
   background: #eef2f3;
   border-radius: 20px;
 }

 .coverage {
   background: var(--gradient-blue);
   color: #fff;
 }



 /* 2. Add the Colorful Contact Section CSS */
 .contact-section {
   background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent) 100%) !important;
   color: #ffffff !important;
   padding: 80px 20px;
   border-radius: 40px 40px 0 0;
   margin-top: 50px;
 }

 .contact-section h2 {
   color: #ffffff !important;
   text-align: center;
   font-size: 32px;
 }

 .contact-details-box {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   padding: 30px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   margin: 0 auto;
   max-width: 600px;
 }

 .contact-details-box a {
   color: #D4AF37;
   /* Gold color for links */
   text-decoration: none;
 }

 /* --- FAQ Section (Accordion Style Look) --- */
 .faq-section {
   background: #fff;
 }

 .faq-item {
   border: 1px solid #edf2f7;
   margin-bottom: 10px;
   border-radius: 12px;
   background: #f9fbff;
   padding: 5px;
 }

 .faq-question {
   font-weight: 700;
   color: var(--accent);
   padding: 15px;
   cursor: pointer;
 }

 /* --- Footer: Colorful & Professional --- */
 .site-footer {
   background: linear-gradient(135deg, var(--accent-3) 0%, #000000 100%);
   color: #ffffff;
   padding: 60px 0 0 0;
   /* No padding at bottom because of footer-bottom bar */
   font-size: 14px;
   line-height: 1.6;
 }

 .footer-container {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   /* First column is wider for the "About" text */
   gap: 40px;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
 }

 .footer-column h3 {
   color: #D4AF37;
   /* Gold Heading */
   font-size: 18px;
   margin-bottom: 20px;
   position: relative;
   padding-bottom: 10px;
 }

 /* Gold underline for footer headings */
 .footer-column h3::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 30px;
   height: 2px;
   background: #D4AF37;
 }

 .footer-column p {
   color: #cccccc;
   margin-bottom: 15px;
 }

 .footer-column a {
   color: #ffffff;
   text-decoration: none;
   transition: color 0.3s ease;
 }

 .footer-column a:hover {
   color: #D4AF37;
   /* Turns gold on hover */
 }

 /* Quick Links List */
 .footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .footer-links li {
   margin-bottom: 10px;
 }

 .footer-links li a::before {
   content: '→';
   margin-right: 8px;
   color: #D4AF37;
   font-size: 12px;
 }

 /* Disclaimer Section */
 .footer-disclaimer {
   grid-column: 1 / -1;
   /* Spans all columns */
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: 20px;
   margin-top: 20px;
   color: #888888;
   font-size: 12px;
   text-align: justify;
 }

 /* Footer Bottom Bar */
 .footer-bottom {
   background: rgba(0, 0, 0, 0.3);
   text-align: center;
   padding: 20px 0;
   margin-top: 40px;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
 }

 .footer-bottom p {
   margin: 0;
   color: #777777;
   font-size: 13px;
 }

 /* --- Responsive Adjustments --- */
 @media (max-width: 992px) {
   .footer-container {
     grid-template-columns: 1fr 1fr;
     /* 2 columns on tablets */
   }
 }

 @media (max-width: 600px) {
   .footer-container {
     grid-template-columns: 1fr;
     /* 1 column on mobile */
     text-align: left;
   }

   .site-footer {
     padding: 40px 0 0 0;
   }

   .footer-column h3::after {
     left: 0;
     /* Keep underline aligned left */
   }
 }















 /* Floating buttons */
 .float-btn {
   position: fixed;
   right: 20px;
   border-radius: 50%;
   width: 56px;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   box-shadow: 0 8px 22px rgba(15, 20, 25, 0.18);
   z-index: 9999;
   font-weight: 700;
   color: #fff;
 }

 .float-whatsapp {
   bottom: 20px;
   background: var(--whatsapp)
 }

 .float-call {
   bottom: 92px;
   background: var(--accent)
 }

 .float-btn:active {
   transform: scale(.98)
 }

 /* Contact & other sections */
 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
   margin-top: 16px
 }

 .why-choose-section {
   padding: 40px 20px;
   background: #f7f7f7;
   border-radius: 12px;
   margin: 40px auto;
   max-width: 1000px;
   color: #203a43;
 }

 .why-choose-section h2 {
   font-size: 24px;
   margin-bottom: 16px;
   text-align: center;
 }

 .why-choose-section ul {
   list-style-type: disc;
   padding-left: 20px;
   margin-bottom: 16px;
 }

 .why-choose-section ul li {
   margin-bottom: 10px;
   font-size: 16px;
 }

 .why-choose-section p {
   font-size: 16px;
   line-height: 1.6;
 }

 .service-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 14px;
   margin-top: 16px
 }

 .service-box {
   background: #fff;
   padding: 14px;
   border-radius: 10px;
   box-shadow: 0 6px 18px rgba(15, 20, 25, 0.04)
 }


 /* Trust Section Styling */
 .trust-section {
   background: #f9fbfd;
   padding: 60px 20px;
   text-align: center;
   border-top: 3px solid #e1e7ed;
   border-bottom: 3px solid #e1e7ed;
 }

 .trust-section h2 {
   font-size: 2rem;
   margin-bottom: 20px;
   font-weight: 700;
   color: #2c3e50;
 }

 .trust-section p {
   font-size: 1.1rem;
   color: #555;
   margin-bottom: 40px;
 }

 .trust-badges {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;
   flex-wrap: wrap;
 }

 .trust-badges .badge {
   background: #ffffff;
   border-radius: 12px;
   padding: 20px 30px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   font-size: 1rem;
   font-weight: 600;
   color: #2c3e50;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .trust-badges .badge:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
 }

 /* Testimonial Cards */
 .testimonial-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 30px;
   margin-top: 50px;
 }

 .testimonial-card {
   background: #ffffff;
   padding: 25px;
   border-radius: 15px;
   text-align: left;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
   transition: transform 0.3s ease;
   border-left: 5px solid #3498db;
 }

 .testimonial-card:hover {
   transform: translateY(-4px);
 }

 .testimonial-card p {
   color: #333;
   margin-bottom: 15px;
   line-height: 1.6;
 }

 .testimonial-card .client-name {
   font-weight: bold;
   font-size: 1.05rem;
   color: #2c3e50;
 }

 .testimonial-card .client-location {
   font-size: 0.9rem;
   color: #777;
 }


 .mid-cta-small {
   background: #f8f8f8;
   padding: 12px 15px;
   border-left: 3px solid #c89b3c;
   margin: 25px 0;
   font-size: 15px;
 }



 /* FAQ base */
 .faq-section {
   padding: 28px 20px;
   background: transparent
 }

 .faq-section h2 {
   font-size: 22px;
   margin: 0 0 16px;
   color: #203a43
 }

 .faq-list {
   display: grid;
   gap: 12px
 }

 /* details/summary styling */
 .faq-item {
   background: #fff;
   border-radius: 10px;
   padding: 12px;
   border: 1px solid rgba(32, 58, 67, 0.06);
   box-shadow: 0 6px 18px rgba(15, 20, 25, 0.04)
 }

 .faq-item[open] {
   border-color: rgba(32, 58, 67, 0.12)
 }

 .faq-question {
   cursor: pointer;
   list-style: none;
   outline: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 6px 0;
   font-weight: 700;
   font-size: 15px
 }

 .faq-question::marker {
   display: none
 }

 /* caret symbol via pseudo-element */
 .faq-question::after {
   content: '+';
   font-weight: 900;
   background: var(--muted);
   color: #203a43;
   padding: 6px;
   border-radius: 6px;
   display: inline-block;
   min-width: 28px;
   text-align: center;
   transition: transform .25s
 }

 details[open] .faq-question::after {
   content: '–';
   transform: rotate(0deg)
 }

 .faq-answer {
   padding-top: 8px;
   color: #444;
   font-size: 14px;
   line-height: 1.6
 }

 .faq-answer p {
   margin: 0
 }



 /* larger screens: two-column FAQ grid */
 @media (min-width:900px) {
   .faq-list {
     grid-template-columns: repeat(2, 1fr);
     gap: 16px
   }
 }

 /* accessible focus style */
 .faq-question:focus {
   outline: 2px solid rgba(32, 58, 67, 0.18);
   outline-offset: 3px;
   border-radius: 6px
 }


 .quick-links-section {
   padding: 40px 20px;
   background: #f7f7f7;
   text-align: center;
 }

 .quick-links-section h2 {
   font-size: 24px;
   color: #203a43;
   margin-bottom: 12px;
 }

 .quick-links-section p {
   font-size: 14px;
   color: #555;
   margin-bottom: 24px;
 }

 .quick-links-grid {
   display: grid;
   gap: 12px;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   max-width: 1000px;
   margin: 0 auto;
 }

 .quick-link {
   display: block;
   background: #203a43;
   color: #fff;
   text-decoration: none;
   padding: 12px 16px;
   border-radius: 8px;
   transition: transform 0.3s, background 0.3s;
 }

 .quick-link:hover {
   background: #2c5364;
   transform: translateY(-3px);
 }


 /* Contact Section Base */
 .contact-section {
   padding: 50px 20px;
   background: #f7f7f7;
   text-align: center;
 }

 .contact-section h2 {
   font-size: 26px;
   color: #203a43;
   margin-bottom: 16px;
 }

 .contact-section p {
   font-size: 15px;
   color: #555;
   margin-bottom: 30px;
 }

 /* Contact Grid */
 .contact-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 24px;
   max-width: 1000px;
   margin: 0 auto;
 }

 /* Individual Contact Item */
 .contact-item {
   background: #fff;
   padding: 20px 16px;
   border-radius: 12px;
   box-shadow: 0 6px 18px rgba(15, 20, 25, 0.05);
   text-align: left;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .contact-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 24px rgba(15, 20, 25, 0.1);
 }

 .contact-item .contact-icon {
   font-size: 22px;
   color: #203a43;
   margin-right: 10px;
   vertical-align: middle;
 }

 .contact-item p {
   margin: 6px 0;
   font-size: 14px;
   color: #444;
 }

 .contact-item a {
   color: #2c5364;
   text-decoration: none;
   font-weight: 600;
   transition: color 0.3s;
 }

 .contact-item a:hover {
   color: #0f2027;
 }



 /* Optional: make phone numbers & email clickable on mobile */
 .contact-item a[href^="tel"],
 .contact-item a[href^="mailto"] {
   display: inline-block;
   margin-top: 4px;
 }


 /* Back to Top Button */
 #back-to-top {
   display: none;
   /* Hidden by default */
   position: fixed;
   bottom: 40px;
   right: 40px;
   z-index: 99;
   border: none;
   outline: none;
   background-color: #ff6b6b;
   color: white;
   cursor: pointer;
   padding: 12px 16px;
   border-radius: 50%;
   font-size: 18px;
   transition: background-color 0.3s;
 }

 #back-to-top:hover {
   background-color: #ff4c4c;
 }



 footer.site-footer {
   background: var(--accent);
   color: #fff;
   padding: 18px 20px;
   text-align: center;
   margin-top: 28px;
   border-top: 4px solid rgba(255, 255, 255, 0.03)
 }



 /* WhatsApp Floating Button */
 .whatsapp-float {
   position: fixed;
   width: 56px;
   height: 56px;
   bottom: 20px;
   right: 20px;
   background-color: #25D366;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
   z-index: 9999;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .whatsapp-float img {
   width: 28px;
   height: 28px;
 }

 .whatsapp-float:hover {
   transform: scale(1.05);
   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
 }

 @media (max-width: 768px) {
   .whatsapp-float {
     bottom: 15px;
     right: 15px;
   }
 }




 /* Responsive tweaks */
 @media(max-width:768px) {
   .about-grid {
     grid-template-columns: 1fr
   }

   .hero-title {
     font-size: 26px;
   }

   .hamburger {
     display: flex;

   }



   nav.main-nav {
     display: none;
   }

   .mobile-only {
     display: inline-block;
   }

   .desktop-only {
     display: none;
   }



   .mobile-panel.hidden {
     display: none;
   }

   .site-header {
     padding: 12px 24px;
   }

   .mobile-panel {
     right: 0;
     left: auto;

     inset: auto 0 0 35%;
     top: 0;
     height: 90vh;
     border-radius: 20px;
   }

   /* ADD THE NEW CODE HERE to style the mobile menu links */
   .mobile-panel ul {
     /* Removes the default bullet points and left padding */
     list-style: none;
     padding: 0;
     margin: 0;

   }

   .mobile-panel ul li a {
     /* Ensures the link fills the width and creates a neat divider */
     display: block;
     padding: 8px 15px;
     /* Adjust vertical padding (8px) to control the gap */
     margin-bottom: 2px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     font-size: 16px;
     font-weight: 500;
     text-decoration: none;
     color: #fff;
     transition: background-color 0.2s;
   }

   .mobile-panel ul li a:hover {
     background-color: rgba(255, 255, 255, 0.1);
   }



   .faq-section {
     padding: 18px 14px;
   }

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

   .faq-answer {
     font-size: 14px;
   }



   .quick-links-grid {
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
     gap: 10px;
   }



   .contact-section {
     padding: 35px 15px;
   }

   .contact-section h2 {
     font-size: 22px;
   }

   .contact-section p {
     font-size: 14px;
     margin-bottom: 20px;
   }

   .contact-item {
     padding: 16px 12px;
   }

   .contact-item p {
     font-size: 13px;
   }

   .contact-item .contact-icon {
     font-size: 20px;
   }
 }

 @media(min-width:769px) {
   .mobile-panel {
     display: none !important
   }

   .hamburger {
     display: none;
   }
 }