/* ========================================

   CSS Variables & Base Styles

   ======================================== */



:root {

  --primary: #FFC400;        /* Sunflower Yellow used for buttons, badges, accents */

  --primary-600: #E1AE00;    /* Hover/active yellow */

  --dark: #0F1218;           /* Very dark navy for footer & top bar */

  --ink: #111111;            /* Headings */

  --text: #4A4A4A;           /* Body text */

  --muted: #7A7A7A;          /* Secondary text */

  --bg: #FFFFFF;             /* Base background */

  --bg-soft: #F5F7FB;        /* Light ice-blue for hero band */

  --line: #E9ECEF;           /* Dividers and borders */

  --overlay: rgba(0,0,0,.45);/* Tile overlays */

}

*{

  margin: 0;

  padding:0;

  box-sizing: border-box;

}

/* Base Typography */

body {

  font-family: "Alexandria", sans-serif, 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  font-size: 16px;

  line-height: 1.7;

  color: var(--text);

  background-color: var(--bg);

}



h1, h2, h3, h4, h5, h6 {

  font-weight: 600;

  color: var(--ink);

  line-height: 1.2;

}



h1 {

  font-size: clamp(44px, 5vw, 54px);

  font-weight: 700;

  line-height: 1.15;

}



h2 {

  font-size: clamp(34px, 4vw, 40px);

  font-weight: 600;

  line-height: 1.2;

}



h3 {

  font-size: clamp(22px, 2.5vw, 24px);

  font-weight: 600;

  line-height: 1.25;

}



/* Section Spacing */

.section-padding {

  padding-block: 96px;

}



@media (max-width: 1199px) {

  .section-padding {

    padding-block: 72px;

  }

}



@media (max-width: 767px) {

  .section-padding {

    padding-block: 56px;

  }

}



/* ========================================

   Top Utility Bar

   ======================================== */



.top-bar {

  background-color: #2c2c2c;

  color: white;

  font-size: 12px;

  padding: 8px 0;

  height: 40px;

  display: flex;

  align-items: center;

}



.top-bar p {

  margin: 0;

  font-size: 12px;

  color: white;

}



.utility-links {

  display: flex;

  align-items: center;

  gap: 1rem;

}



@media (max-width: 767px) {

  .utility-links {

    flex-direction: row !important;

    gap: 0.5rem;

  }

}



.utility-links a {

  color: white;

  text-decoration: none;

  font-size: 12px;

  transition: color 0.3s ease;

}



.utility-links a:hover {

  color: var(--primary);

}



.utility-links .divider {

  color: #666;

  font-size: 12px;

}



/* ========================================

   Main Header Section

   ======================================== */



.main-header {

  background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 50%, var(--dark) 50%, var(--dark) 100%);

  padding: 30px 0;

  position: relative;

}



.main-header::before {

  content: '';

  position: absolute;

  top: 0;

  left: 50%;

  width: 0;

  height: 0;

  border-left: 20px solid transparent;

  border-right: 20px solid transparent;

  border-top: 20px solid var(--primary);

  transform: translateX(-50%);

  z-index: 1;

}



.logo-section {

  position: relative;

  z-index: 2;

}



.logo-container {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 24px;

  font-weight: 700;

  color: var(--ink);

}



.logo-container i {

  font-size: 28px;

  color: var(--ink);

}



.contact-section {

  position: relative;

  z-index: 2;

}



.contact-item,

.address-item {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 8px;

}



.contact-item i,

.address-item i {

  color: var(--primary);

  font-size: 16px;

  width: 20px;

}



.contact-details,

.address-details {

  display: flex;

  flex-direction: column;

}



.contact-details strong,

.address-details strong {

  color: white;

  font-size: 14px;

  font-weight: 600;

  line-height: 1.2;

}



.contact-details span,

.address-details span {

  color: #ccc;

  font-size: 12px;

  line-height: 1.2;

}



.header-actions {

  display: flex;

  align-items: center;

  gap: 15px;

  justify-content: flex-end;

}



.action-btn {

  color: white;

  text-decoration: none;

  font-size: 18px;

  transition: color 0.3s ease;

}



.action-btn:hover {

  color: var(--primary);

}



.cart-btn {

  position: relative;

}



.cart-badge {

  position: absolute;

  top: -8px;

  right: -8px;

  background-color: var(--primary);

  color: var(--ink);

  font-size: 10px;

  font-weight: 600;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.header-actions .social-icons {

  display: flex;

  gap: 20px;

  margin-left: 10px;

}



.header-actions .social-icons a {

  color: white;

  text-decoration: none;

  font-size: 14px;

  transition: color 0.3s ease;

}



.header-actions .social-icons a:hover {

  color: var(--primary);

}



/* ========================================

   Main Navigation Bar

   ======================================== */



.main-nav {

  background-color: white;

  padding: 0px;

  box-shadow: 0 2px 10px rgba(0,0,0,.1);

  position: relative;

  z-index: 3;

}

@media (min-width: 767px) {

  .main-nav {

    padding: 15px 0 !important;

  }

}



.nav-content {

  display: flex;

  justify-content: center;

}



.nav-links {

  display: flex;

  list-style: none;

  margin: 0;

  padding: 0;

  gap: 30px;

  align-items: center;

}



.nav-links li {

  position: relative;

}



.nav-links .nav-link {

  color: var(--ink);

  text-decoration: none;

  font-weight: 500;

  font-size: 14px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  padding: 8px 0;

  transition: color 0.3s ease;

  position: relative;

}



.nav-links .nav-link.active {

  font-weight: 800;

}

.nav-links .nav-link:hover,

.nav-links .nav-link.active {

  color: var(--primary);

}



.nav-links .nav-link.active::after {

  content: '';

  position: absolute;

  bottom: -5px;

  left: 0;

  right: 0;

  height: 2px;

  background-color: var(--primary);

}



.nav-item-with-badge {

  position: relative;

}



.new-badge {

  position: absolute;

  top: -8px;

  right: -8px;

  background-color: #dc3545;

  color: white;

  font-size: 8px;

  font-weight: 600;

  padding: 2px 4px;

  border-radius: 2px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



/* ========================================

   Hero Section

   ======================================== */





.hero-section {

    position: relative;

    overflow: hidden;

}

.hero-swiper .swiper-slide {

    position: relative;

}

.hero-img {

    object-fit: cover;

    width: 100%;

    height: 55vw;

    min-height: 400px;

    max-height: 600px;

    display: block;

}

.hero-content-overlay {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    /* No overlay background */

}

@media (max-width: 991.98px) {

    .hero-img {

        height: 60vw;

        min-height: 260px;

        max-height: 350px;

    }

    .hero-content-overlay h1 {

        font-size: 2rem !important;

    }

    .hero-content-overlay .btn {

        font-size: 1rem !important;

        padding: 0.75rem 2rem !important;

    }

}

@media (max-width: 575.98px) {

    .hero-img {

        height: 70vw;

        min-height: 180px;

        max-height: 250px;

    }

    .hero-content-overlay h1 {

        font-size: 2.1rem !important;

    }

}

.hero-swiper .swiper-pagination-bullet {

    background: #fff;

    opacity: 0.7;

}

.hero-swiper .swiper-pagination-bullet-active {

    background: #ffc400;

    opacity: 1;

}

/* Only 2 arrows, style and position them */

.hero-swiper .swiper-button-next,

.hero-swiper .swiper-button-prev {

    color: #000000;

    top: 50%;

    width: 40px;

    height: 40px;

    background: rgba(34,34,34,0.18);

    border-radius: 50%;

    box-shadow: 0 2px 12px rgba(0,0,0,0.10);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.2rem;

    border: 2px solid #000000;

    transition: background 0.2s, color 0.2s, border 0.2s;

}

.hero-swiper .swiper-button-next:after,

.hero-swiper .swiper-button-prev:after {

    font-size: 1.2rem;

    font-weight: bold;

}

.hero-swiper .swiper-button-next:hover,

.hero-swiper .swiper-button-prev:hover {

    background: #ffc400c9;

    color: #ffffff;

    border: 2px solid #ffffff;

}

.hero-swiper .swiper-button-disabled {

    opacity: 0.3;

    pointer-events: none;

}

/* Hide extra arrows if any */

.hero-swiper .swiper-button-next.swiper-button-next,

.hero-swiper .swiper-button-prev.swiper-button-prev {

    display: flex !important;

}



/* ========================================

   Buttons

   ======================================== */



.btn {

  border-radius: 9999px;

  padding: 12px 22px;

  font-weight: 500;

  transition: all 0.3s ease;

  border: none;

}



.btn-primary {

  background-color: var(--primary);

  color: var(--ink);

}



.btn-primary:hover {

  background-color: var(--primary-600);

  color: var(--ink);

  transform: translateY(-2px);

  box-shadow: 0 8px 16px rgba(255, 196, 0, 0.3);

}



.btn-success {

  background-color: #28a745;

  color: white;

}



.btn-success:hover {

  background-color: #218838;

  color: white;

}



.btn-lg {

  padding: 16px 32px;

  font-size: 18px;

}



/* ========================================

   Hex Badge Components

   ======================================== */



.hex-badge {

  position: relative;

  width: 48px;

  height: 28px;

  background: var(--primary);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--ink);

  font-size: 16px;

  font-weight: 700;

  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

  box-shadow: 0 6px 14px rgba(0,0,0,.12);

  margin: 0 auto;

}



.hex-badge-small {

  position: relative;

  width: 32px;

  height: 18px;

  background: var(--primary);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--ink);

  font-size: 12px;

  font-weight: 700;

  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

  box-shadow: 0 4px 8px rgba(0,0,0,.12);

}



.hex-badge-large {

  position: relative;

  width: 64px;

  height: 36px;

  background: var(--primary);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--ink);

  font-size: 20px;

  font-weight: 700;

  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

  box-shadow: 0 8px 16px rgba(0,0,0,.12);

}



/* ========================================

   Services Intro Section

   ======================================== */



.services-intro {

  padding: 96px 0;

  background-color: var(--bg);

}



.services-intro h2 span{

  text-align: center;

  margin-bottom: 3rem;

  position: relative;

  padding-bottom: 10px;

  border-bottom: 3px solid var(--primary);

}

@media screen and (max-width: 767px) {

  .services-intro h2 span{

    font-size: 1.5rem;

    padding-bottom: 6px;

    border-bottom: 2px solid var(--primary);

    font-weight: 600;

  }

  .container-xxl .titleTex{

    font-size: 1.5rem;

    font-weight: 600;

  }

}

/* .services-intro h2::after {

  content: '';

  position: absolute;

  bottom: -10px;

  right: -100px;

  transform: translateX(-50%);

  width: 100%;

  height: 3px;

  background-color: var(--primary);

} */



.service-feature {

  padding: 2rem 1rem;

  border-radius: 18px;

  transition: transform 0.3s ease;

}



.service-feature:hover {

  transform: translateY(-5px);

}



.service-feature h3 {

  font-size: 20px;

}



.service-feature p {

  color: var(--muted);

  margin: 0;

}



/* ========================================

   Services Grid Section

   ======================================== */



.services-grid {

  padding: 96px 0;

  background-color: var(--bg);

}



.service-tile {

  position: relative;

  border-radius: 18px;

  overflow: hidden;

  /* box-shadow: 0 12px 24px rgba(0,0,0,.06); */

  transition: all 0.3s ease;

  height: 230px;

}



/* .service-tile:hover {

  box-shadow: 0 20px 40px rgba(0,0,0,.15);

  overflow: hidden;

} */



.service-tile img {

  transform: scale(1.03);

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.3s ease;

}



.service-tile:hover img {

  transform: scale(1.1);

}



.service-overlay {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: var(--overlay);

  display: flex;

  align-items: flex-end;

  justify-content: flex-start;

  padding: 1.5rem;

  transition: all 0.3s ease;

  background: rgba(73, 73, 73, 0);

  transform: translateY(0%);

}



/* .service-tile:hover .service-overlay {

  transform: translateY(-100%);

  background: rgba(0, 0, 0, 0.582);

} */



.service-badge {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  color: white;

  transition: all 0.3s ease;

}



.service-badge span {

  font-weight: 600;

  font-size: 16px;

}





/* ========================================

   Join CTA Section

   ======================================== */



.join-cta {

  padding: 30px 0;

  background-color: var(--bg-soft);

}



.cta-content {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

}



.cta-content h2 {

  margin-bottom: 1rem;

}



.cta-content p {

  color: var(--muted);

  margin-bottom: 0;

}



/* ========================================

   Footer

   ======================================== */



.footer {

  background-color: var(--dark);

  color: white;

  padding: 96px 0 0;

}



.footer-brand {

  margin-bottom: 2rem;

}



.footer-logo {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 24px;

  font-weight: 700;

  color: white;

}



.footer-logo i {

  color: var(--primary);

}



.footer-brand p {

  color: var(--muted);

  margin: 1.5rem 0;

}



.footer h3 {

  color: white;

  font-size: 20px;

  margin-bottom: 1.5rem;

}



.footer ul {

  list-style: none;

  padding: 0;

}



.footer ul li {

  margin-bottom: 0.5rem;

}



.footer ul li a {

  color: var(--muted);

  text-decoration: none;

  transition: color 0.3s ease;

}



.footer ul li a:hover {

  color: var(--primary);

}



.footer-contact ul li {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  margin-bottom: 1rem;

}



.footer-contact i {

  color: var(--primary);

  width: 16px;

}



.footer-bottom {

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding: 2rem 0;

  margin-top: 3rem;

}



.footer-bottom p {

  color: var(--muted);

  margin: 0;

}



.scroll-top {

  color: var(--primary);

  text-decoration: none;

  font-size: 20px;

  transition: color 0.3s ease;

}



.scroll-top:hover {

  color: white;

}





/* ========================================

   Responsive Design

   ======================================== */



@media (max-width: 1199px) {

  .hero-content {

    padding-left: 0;

    margin-top: 2rem;

  }

  

  .services-intro,

  .services-grid,

  .testimonials,

  .news-section,

  .join-cta,

  .footer {

    padding: 72px 0;

  }

}



@media (max-width: 991px) {

  .top-bar .utility-links {

    flex-direction: column;

    gap: 0.5rem;

    text-align: center;

  }

  

  .top-bar .col-md-6:last-child {

    text-align: center;

  }

  

  .main-header {

    background: var(--primary);

    padding: 15px 0;

  }

  

  .main-header::before {

    display: none;

  }

  

  .contact-section {

    margin-top: 15px;

  }

  

  .header-actions {

    justify-content: center;

    margin-top: 10px;

  }

  

  .nav-links {

    flex-wrap: wrap;

    gap: 15px;

    justify-content: center;

  }

  

  .nav-links .nav-link {

    font-size: 12px;

  }

}



@media (max-width: 767px) {

  .hero-section {

    padding: 56px 0;

    text-align: center;

  }

  

  .hero-content {

    margin-top: 2rem;

  }

  

  .services-intro,

  .services-grid,

  .testimonials,

  .news-section,

  .join-cta,

  .footer {

    padding: 56px 0;

  }

  

  .service-feature {

    margin-bottom: 2rem;

  }

  

  .testimonial-card {

    padding: 2rem;

    margin-bottom: 2rem;

  }

  

  .join-cta .row {

    text-align: center;

  }

  

  .cta-content {

    align-items: center;

    margin-bottom: 2rem;

  }

  

  .footer-bottom .row {

    text-align: center;

  }

  .list-unstyled li{

    text-align: center;

    justify-content: center;

  }

  

  .footer-bottom .col-md-6:last-child {

    margin-top: 1rem;

  }

}



@media (max-width: 575px) {

  .top-bar {

    height: auto;

    padding: 1rem 0;

  }

  

  .top-bar .utility-links {

    flex-direction: column;

    gap: 0.25rem;

  }

  

  .main-header {

    padding: 10px 0;

  }

  

  .logo-container {

    font-size: 20px;

    justify-content: start;

  }

  

  .contact-item,

  .address-item {

    flex-direction: column;

    text-align: center;

    gap: 5px;

  }

  

  .header-actions {

    flex-direction: row;

    gap: 10px;

  }

  

  .header-actions .social-icons {

    margin-left: 0;

  }

  

  .nav-links {

    flex-direction: column;

    gap: 10px;

  }

  

  .nav-links .nav-link {

    font-size: 12px;

  }

  

  .hero-section {

    min-height: 400px;

  }

  

  .service-tile {

    height: 200px;

  }

  

  .testimonial-author {

    flex-direction: column;

    text-align: center;

    gap: 0.5rem;

  }

}



/* Prevent horizontal overflow on all screens */

html, body {

    max-width: 100vw;

    overflow-x: hidden;

}



/* Make sure images and containers are responsive */

img, .img-fluid, .hero-img {

    max-width: 100%;

    height: auto;

    display: block;

}



/* Fix for Bootstrap .row negative margin overflow */

.container-xxl, .container, .container-fluid {

    overflow-x: hidden;

}



/* ========================================

   Accessibility & Focus States

   ======================================== */



.btn:focus,

.nav-link:focus,

a:focus {

  /* outline: 2px solid var(--primary);

  outline-offset: 2px; */

}



/* Ensure sufficient color contrast */

.btn-primary {

  color: var(--ink) !important;

}



/* ========================================

   Animation & Transitions

   ======================================== */



* {

  transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;

}



/* Smooth scrolling */

html {

  scroll-behavior: smooth;

}



/* ========================================

   Hero Swiper Styles

   ======================================== */



/* ========================================

   Handyman Services (2x2 grid + helmet)

   ======================================== */



.services-intro { background: #fff; }

.services-intro h2 { text-align: left; position: relative; }





/* Dark hex badge variant */

.hex-badge--dark {

  background: #111;

  color: #fff;

  box-shadow: none;

  width: 72px;

  height: 40px;

  font-size: 24px;

  flex: 0 0 72px;

  transition: background-color .25s ease, color .25s ease, transform .25s ease;

}



@media (max-width: 575px) {

  .hex-badge--dark { width: 56px; height: 32px; font-size: 18px; flex-basis: 56px; }

}



.service-feature:hover .hex-badge--dark {

  background: var(--primary);

  color: #111;

  transform: translateY(-2px);

}



.service-feature h3 { font-size: 18px; font-weight: 600; color: var(--ink); }

.service-feature p { color: var(--muted); }



/* Helmet image size and placement */

.services-helmet {

  width: 100%;

  max-width: clamp(220px, 28vw, 420px);

  height: auto;

  filter: drop-shadow(0 12px 24px rgba(0,0,0,.08));

}

@media (max-width: 1199px) { .services-helmet { max-width: clamp(200px, 34vw, 380px); } }

@media (max-width: 991px)  { .services-helmet { max-width: clamp(180px, 42vw, 340px); margin-top: 12px; } }

@media (max-width: 575px)  { .services-helmet { max-width: clamp(160px, 58vw, 300px); } }



/* ========================================

   Responsive Header / Navigation

   ======================================== */



.main-nav { position: sticky; top: 0; background: #fff; z-index: 20; box-shadow: 0 2px 10px rgba(0,0,0,.08); }



.nav-toggle { display: none; background: transparent; border: 0; padding: 10px; cursor: pointer; width: fit-content;}

.nav-toggle .bar { display: block; width: 24px; height: 2px; background: #111; margin: 5px 0; transition: transform .3s ease, opacity .3s ease; }



@media (max-width: 991px) {

  .nav-toggle { display: inline-block; }

  .main-nav .container-xxl { gap: 12px; }

  .nav-collapse { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); max-height: 0; overflow: hidden; transition: max-height .35s ease; }

  .nav-collapse.open { max-height: 420px; }

  .nav-links { flex-direction: column; align-items: stretch; padding: 12px; gap: 0; }

  .nav-links li { border-top: 1px solid var(--line); }

  .nav-links li:first-child { border-top: 0; }

  .nav-links .nav-link { display: block; padding: 12px 8px; }

}



@media (min-width: 992px) {

  .nav-toggle { display: none; }

  .nav-collapse { position: static; max-height: none !important; box-shadow: none; }

  .nav-links { display: flex; gap: 30px; align-items: center; }

}





/* Footer Custom Styles */

.footer-custom {

    background: #111;

    color: #fff;

    font-family: 'Poppins', Arial, sans-serif;

    padding-top: 0;

    border-top: 6px solid #222;

}

.footer-custom .footer-brand img {

    max-height: 54px;

}

.footer-custom .footer-desc {

    font-size: 1.15rem;

    color: #e0e0e0;

    margin-bottom: 1.5rem;

}

.footer-custom .footer-social {

    margin-bottom: 1.5rem;

}

.footer-custom .footer-social-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    background: #222;

    border-radius: 50%;

    color: #fff;

    font-size: 1.5rem;

    transition: background 0.2s, color 0.2s;

    text-decoration: none;

}

.footer-custom .footer-social-icon:hover {

    background: #fff;

    color: #111;

}

.footer-custom .footer-title {

    font-size: 1.2rem;

    color: #fff;

}

.footer-custom .footer-links ul {

    padding-left: 0;

}

.footer-custom .footer-links li {

    margin-bottom: 0.7rem;

}

.footer-custom .footer-links a {

    color: #e0e0e0;

    text-decoration: none;

    font-size: 1.08rem;

    transition: color 0.2s;

}

/* .footer-custom .footer-links a:hover {

    color: #ffc400;

} */

.footer-custom .footer-contact ul {

    padding-left: 0;

}

.footer-custom .footer-contact li {

    color: #e0e0e0;

    font-size: 1.08rem;

    display: flex;

    align-items: center;

}

.footer-custom .footer-contact a {

    color: #e0e0e0;

    text-decoration: none;

    transition: color 0.2s;

}

/* .footer-custom .footer-contact a:hover {

    color: #ffc400;

} */

.footer-custom .footer-contact i {

    color: #ffc400;

    font-size: 1.1rem;

    min-width: 22px;

}

.footer-bottom-custom {

    background: #181818;

    color: #fff;

    font-size: 1.05rem;

    border-top: 1px solid #222;

    margin-top: 2rem;

}

@media (max-width: 991.98px) {

    .footer-custom .row > div {

        margin-bottom: 2rem;

    }

}

@media (max-width: 767.98px) {

    .footer-custom .row {

        flex-direction: column;

        text-align: center;

    }

    .footer-custom .footer-social {

        justify-content: center;

    }

    .footer-custom .footer-contact ul,

    .footer-custom .footer-links ul {

        text-align: center;

    }

}







/* .text-highlight{

  font-size:clamp(2rem,5vw,3rem);

  text-shadow:2px 2px 8px #050505c7; 

  background-color: #ffc400;

  color: rgb(255, 255, 255);

  font-size: 18px;

  padding: 0 6px;

  border-radius: 5px;

} */



.text-highlight {

  background: rgba(255, 196, 0, 0.9); /* semi-transparent yellow */

  color: #222; /* dark text for better readability */

  font-weight: 600;

  font-size: 16px;

  padding: 6px 12px;

  border-radius: 6px;

  display: inline-block;

  margin: 6px 0;



  /* subtle shadow for separation */

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

}





/* FAQ Section Styles */

.faq-section {
  padding: 60px 0;
}

.faq-item {
  margin-bottom: 15px;
  border: 1px solid #ffc107;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.faq-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.faq-item.active {
  border-color: rgb(245, 147, 0);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
}

.faq-question {
  padding: 20px 25px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #fff9e6 0%, #fff 100%);
  transition: all 0.3s ease;
  user-select: none;

  /* Reverse the direction of the question and answer */
  flex-direction: row-reverse;
  gap: 10px;
}

.faq-item.active .faq-question {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: #fff;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: linear-gradient(135deg, #ffe082 0%, rgb(247, 185, 0) 100%);
  transition: all 0.3s ease;
}

.faq-item.active .faq-question:hover {
  background: linear-gradient(135deg, #ffe082 0%, #ffc310 100%);
}

.faq-question-text {
  font-size: 1.1rem;
  font-weight: 600;
  flex: 1;
  padding-right: 15px;
  line-height: 1.5;
  color: #333;
}

.faq-item.active .faq-question-text {
  color: #fff;
}

.faq-toggle-icon {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ff9800;
  transition: transform 0.3s ease;
  min-width: 30px;
  text-align: center;
  line-height: 1;
}

.faq-item.active .faq-toggle-icon {
  color: #fff;
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 25px;
  background: #fff;
}

.faq-item.active .faq-answer {
  max-height: 1000px;
  padding: 20px 25px;
}

.faq-answer-content {
  color: #555;
  line-height: 1.8;
  font-size: 1rem;
}

.faq-answer-content strong {
  color: #ff9800;
  font-weight: 700;
}

/* Responsive Design */
@media (max-width: 768px) {
  .faq-section {
      padding: 40px 0;
  }

  .faq-question {
      padding: 15px 20px;
  }

  .faq-question-text {
      font-size: 1rem;
      padding-right: 10px;
  }

  .faq-toggle-icon {
      font-size: 1.3rem;
      min-width: 25px;
  }

  .faq-item.active .faq-answer {
      padding: 15px 20px;
  }

  .faq-answer-content {
      font-size: 0.95rem;
  }
}

@media (max-width: 576px) {
  .faq-question {
      padding: 12px 15px;
  }

  .faq-question-text {
      font-size: 0.95rem;
  }

  .faq-item.active .faq-answer {
      padding: 12px 15px;
  }
}