@media (max-width: 768px) {
  .testimonials {
    display: block !important;       /* stop flex/grid layout */
  }

  .testimonial-box {
    width: 100% !important;          /* take full width */
    margin-bottom: 20px;             /* space between boxes */
  }
}
  /* FAQ Section */
.faq-section {
  border-top: 1px solid #C0D62F; /* Divider line */
  padding-top: 20px;
  width: 100%;
  float: none;
  display: none; /* Hidden until active */
}

.faq-section.active {
  display: block;
}

/* FAQ Item */
.faq-item {
  margin-bottom: 15px;
  background-color: #EEF2F7; /* Light grey background */
  border-radius: 10px;
  transition: background-color 0.3s ease;
  overflow: hidden;
}

/* Hover effect */
.faq-item:hover {
  background-color: #EDF5FF; /* Light blue hover */
}

/* Question section */
.question {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center; /* ✅ centers text & icon vertically */
  color: #1a1a1a;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
      margin-bottom: -8px;
  padding: 18px 22px; /* Equal vertical and horizontal spacing */
}

/* Toggle icon – clean blue + / – without circle */
.toggle-icon {
  font-size: 26px;
  color: #496DDA; /* HugoFox blue */
  font-weight: 400;
  background: none;
  border: none;
  width: auto;
  height: auto;
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* Remove any blue circle / focus background on hover */
.toggle-icon,
.toggle-icon:hover,
.toggle-icon:focus,
.toggle-icon:active {
  background: none !important;     /* no background fill */
  outline: none !important;        /* removes browser focus ring */
  box-shadow: none !important;     /* removes any inner shadows */
  border: none !important;         /* ensure no border on hover */
  cursor: pointer;
}

/* When opened */
.faq-item.active .toggle-icon {
  transform: rotate(180deg);
  color: #3354B0; /* darker blue when open */
}

/* Answer text */
.answer {
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 0;
  padding: 0 22px; /* same horizontal padding as question */
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

.answer.open {
  height: auto;
  opacity: 1;
  margin-top: 10px;
  padding-top: 5px;
  padding-bottom: 15px;
}

/* Optional – subtle open state shadow */
.faq-item.open {
  background-color: #f2f5fa;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.faq-filters {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: nowrap; /* ensure one line */
}

.faq-filter {
  flex: 1; /* equal width for all buttons */
  text-align: center;
  font-size: 18px; /* bigger text */
  padding: 18px 10px;
  border-radius: 10px;
  border: 1px solid #496DDA;
  background: none;
  color: #383835;
  cursor: pointer;
  font-weight: 600;
 /* text-transform: uppercase; */
  transition: all 0.3s ease;
  white-space: nowrap; /* prevent wrapping */
}

.faq-filter.active {
  background: #496DDA;
  color: #fff;
}


/* Responsive: stack buttons on mobile */
@media (max-width: 1220px) {
  .faq-filters {
    flex-wrap: wrap;
    padding: 20px;
  }
  .faq-filter {
    flex: 1 1 48%; /* two per line on tablets/mobile */
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .faq-filter {
    flex: 1 1 100%; /* stack vertically on small screens */
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 18px; /* keep the icon comfortably inside */
    border-radius: 10px;
    box-sizing: border-box;
    position: relative; /* ensures child elements are contained */
  }

  .question::after {
    right: 18px !important; /* if using a pseudo-element for the plus */
  }

  .question .icon,
  .question span:last-child {
    flex-shrink: 0; /* prevent the + from being pushed out */
    margin-left: 10px;
  }
}

@media (max-width: 1200px) and (min-width: 768px) {
  .faq-container,
  .faq-section {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Optional: keep FAQ items evenly spaced inside */
  .faq-item {
    margin-left: auto;
    margin-right: auto;
  }
}



  @media (max-width: 768px) {
    .faq-container h2 {
        margin-top:20px;
      }
}

@media (max-width: 1220px) {
    .faq-container h2 {
        margin-top: 20px;
        margin-left: 40px;
    }
}
/* FAQ section end */



.hf-footer {
  background: #2e2e2a;
  color: #fff;
  border-radius: 20px;
  width: 95%;
   max-width: 100%;
  margin: 40px auto 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* Top section */
.footer-top {
  padding: 0px 20px 40px 20px;
}

/* Top 3 columns (Members / Resources / Pricing) */
.footer-col {
  flex: 0 0 16%;
  max-width: 16%;
  box-sizing: border-box;
}

.hf-footer h4 {
  color: #c0d62f;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

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

.footer-top ul li {
  margin-bottom: 0.4rem;
}

.footer-top ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.footer-top ul li a:hover {
  color: #c0d62f;
}

/* Logo + socials */
.footer-brand img {
     height: 40px;
    margin-left: 10px;
    margin-top: 8px;
}

.footer-logo {
  margin-left: -10px;
}

.social-links {
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3 icons per row */
  gap: 16px 28px; /* vertical, horizontal spacing */
  justify-content: start;
  align-items: center;
}

.social-links a {
  color: #fff;
  font-size: 2rem; /* make icons larger */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, transform 0.2s ease;
}

.social-links a:hover {
  color: #C0D62F;
  transform: scale(1.1);
}

/* Fix X alignment */
.social-x svg {
  width: 24px;
  height: 24px;
  fill: #fff;
  vertical-align: middle;
  transform: translateY(1px); /* lift slightly to align with others */
  transition: fill 0.3s ease, transform 0.2s ease;
}

.social-x:hover svg {
  fill: #C0D62F;
  transform: translateY(1px) scale(1.1);
}



/* Bottom layer */
.footer-bottom {
    margin-top: 2rem !important;   /* ⬅️ moves the line downward */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 20px 20px 20px;
  
}

.footer-bottom-left p {
  margin: 0;
  font-size: 0.95rem;
}

.footer-bottom-left span {
  color: #c0d62f;
  font-weight: 600;
}

.footer-bottom-left ul {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 5px 0 0;
}

.footer-bottom-left ul li a {
  color: #ccc;
  font-size: 0.85rem;
  text-decoration: none;
}

.footer-bottom-left ul li a:hover {
  color: #fff;
}

/* Certification logos */
.footer-certificates img {
  height: 68px;
  border-radius: 8px;
 
  padding: 5px 10px;
}

@media (max-width: 767px) {
  .hf-footer {
    width: 100%;
    border-radius: 0;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .footer-certificates img {
    height: 36px;
  }
}
 
/* Footer bottom layout */
.footer-bottom {

  padding: 18px 0;
}

.footer-bottom-left {
  display: flex;
  flex-wrap: wrap;
    flex-direction: column !important;  /* stack items vertically */
  align-items: center;
  gap: 8px 16px; /* vertical, horizontal spacing */
}

.footer-bottom-left p {
  margin: 0;
  font-size: 0.95rem;
  color: #C0D62F;
}

.footer-bottom-left p span {
  color: #c0d62f;
  font-weight: 600;
}

.footer-links {
  display: flex !important;
  flex-wrap: nowrap;       /* ✅ keep all links on one line */
  gap: 15px;               /* spacing between each link */
  list-style: none;        /* remove bullets */
  padding: 0;
  margin: 0;
  align-items: center;     /* vertically center links */
}

.footer-links li {
  display: inline-flex;    /* ensure each link item aligns horizontally */
}

.footer-links a {
  color: #ccc;             /* adjust to your footer theme */
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: #C0D62F;          /* on hover */
}


@media (max-width: 767px) {
  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

.footer-bottom-left {
    flex-direction: column;
  }

  .footer-links {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.footer-bottom-left,
.footer-bottom-left ul.footer-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap !important; /* stop vertical stacking */
}

.footer-bottom-left ul.footer-links li {
  display: inline-flex;
}

.footer-bottom-left ul.footer-links a {
  color: #ccc;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-bottom-left ul.footer-links a:hover {
  color: #C0D62F;
}

.footer-bottom-left {
  display: flex !important;
  flex-direction: column !important;  /* stack items vertically */
  align-items: flex-start !important;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px; /* small space between copyright and links */
}

.footer-bottom-left ul.footer-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px; /* smaller horizontal gap between links */
  list-style: none;
  margin: 0 !important; /* remove default ul margin */
  padding: 0 !important;
}

.footer-bottom-left ul.footer-links li {
  display: inline-flex; /* keeps width to content only */
  align-items: center;
  justify-content: center;
  flex: 0 0 auto; /* prevent stretching */
  width: auto !important;
  margin: 0;
  padding: 0;
}

.footer-bottom-left ul.footer-links a {
  color: #ccc;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-bottom-left p,
.footer-bottom-left span {
  margin: 0;
  font-size: 0.95rem;
  white-space: nowrap;
}

.footer-bottom-left ul.footer-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 25px;
  list-style: none;
  padding: 0;
  margin: 0;
  
}

.footer-bottom-left ul.footer-links li {
  display: inline-block;
}

.footer-bottom-left ul.footer-links a {
  color: #ccc;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-bottom-left ul.footer-links a:hover {
  color: #C0D62F;
}



.footer-brand,
.footer-bottom-left {
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
}

/* make footer brand align with bottom-left copyright */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* aligns logo + icons left */
  justify-content: flex-start;
  padding-left: 0 !important;  /* remove grid gutter padding */
  margin-left: 10px !important;   /* ensure alignment with footer-bottom-left */
}

/* if container adds left padding, correct for it */
.footer-top.container,
.footer-bottom.container {
  padding-left: 20px !important;
}

@media (min-width: 768px) and (max-width: 1500px) {
.footer-top.container,
.footer-bottom.container {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}
}

/* optional: keep layout balanced on larger screens */
@media (min-width: 992px) {
  .footer-brand {
    padding-left: 3rem; /* adjust this until the logo aligns visually */
  }
}

@media (max-width: 992px) {
 /* certificates aligned with right padding */
  .footer-certificates {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-right: 30px;
   /* padding-right: 4rem;  ← match .footer-top padding-right */
    gap: 20px;
  }

}


@media (min-width: 992px) {
  /* Keep full footer centered */
  .hf-footer {
    width: 95%;
    margin: 40px auto;
  }

  /* align top and bottom sections visually */
  .footer-top.container,
  .footer-bottom.container {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  /* brand column */
  .footer-brand {
    flex: 0 0 55%;
    max-width: 55%;
    padding-left: 3rem; /* aligns with certificates row */
  }

  /* link columns area (Members / Resources / Pricing) */
  .footer-col {
   /* flex: 0 0 calc(50% / 3); */
    max-width: calc(50% / 3);
    padding-right: 0;
    box-sizing: border-box;
  }

  /* ensure columns stretch exactly to the same right edge as certificates */
  .footer-top .row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
  }

  /* certificates aligned with right padding */
  .footer-certificates {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-right: -30px;
   /* padding-right: 4rem;  ← match .footer-top padding-right */
    gap: 20px;
  }
}



@media (min-width: 1300px) {
 /* brand column */
  .footer-brand {
    flex: 0 0 60%;
    max-width: 60%;
    padding-left: 3rem; /* aligns with certificates row */
  }
}

/* two rows of 3 logos below 1300px */
@media (max-width: 1300px) and (min-width: 990px) {
  .footer-certificates {
    display: grid !important;                    /* override d-flex/flex */
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 24px;
    justify-items: center;
    align-items: center;

    /* reset flex-only styles that may be set elsewhere */
    justify-content: unset !important;
    flex-wrap: unset !important;
    margin-right: 0 !important;
  }

}

/* stack copyright block below logos under 990px */
@media (max-width: 990px) and (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: column-reverse !important; /* moves bottom-left below certificates */
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }

  .footer-bottom-left {
    width: 100%;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
  }

  .footer-bottom-left ul.footer-links {
    justify-content: center !important;
  }

  .footer-certificates {
    margin-bottom: 1rem;
  }
}


  .footer-bottom.container {
   /* padding-top: 0rem;    increase top gap */
   
  padding-bottom: 0;      /* remove bottom gap */
  margin-top: auto;       /* pushes content to bottom if flex container */
  }



  /* ---------- MOBILE FOOTER: 3 horizontal link columns under logo ---------- */
@media (max-width: 767px) {

   .footer-bottom-inner {
    flex-direction: column-reverse !important; /* moves bottom-left below certificates */
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }

  /* overall footer */
  .hf-footer {
    width: calc(100% - 32px);   /* adds ~16px margin each side */
    margin: 24px auto;          /* gap above and below */
    border-radius: 20px;
    padding: 0;
    box-shadow: none;
    overflow: hidden;
  }

  /* top area - logo + socials */
  .footer-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 36px 24px 20px;
    gap: 28px;
  }

  .footer-brand {
    width: 100%;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-left: 0;
    margin-left: 40px !important;
  }

  .footer-col.resources {
    margin-left: 40px;
  }

  .footer-brand img {
    height: 32px;
    margin-left: 10px; /* small visual nudge */
  }

  .social-links {
    margin-top: 16px;
    display: flex;
    gap: 16px;
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3 icons per row */
  gap: 16px 22px; /* vertical, horizontal spacing */
  justify-content: start;
  align-items: center;

  }

  .fa-cookie-bite {
  color: #fff!important;
}

 .fa-cookie-bite:hover {
  color: #C0D62F !important;
}

  /* 3 link columns */
  .footer-top .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    gap: 0;
  }

  .footer-col {
    flex: 1 1 33%;
    max-width: 33%;
    box-sizing: border-box;
    padding-right: 12px;
  }

  .footer-col h4 {
    color: #c0d62f;
    font-size: 1rem;
    margin-bottom: 10px;
  }

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

  .footer-col ul li {
    margin-bottom: 6px;
  }

  .footer-col ul li a {
    color: #fff;
    font-size: 0.9rem;
    text-decoration: none;
  }

  .footer-col ul li a:hover {
    color: #c0d62f;
  }

   .footer-bottom-left ul.footer-links 
  {
    margin-bottom: 20px !important;
  }

  /* bottom section */
  .footer-bottom {
   
    padding: 28px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    
  }

  .footer-bottom-left {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px;
  }

  .footer-bottom-left p {
    margin: 0;
    font-size: 0.9rem;
    color: #ccc;
  }

  .footer-bottom-left span {
    color: #c0d62f;
  }

  .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .footer-links a {
    color: #ccc;
    font-size: 0.9rem;
    text-decoration: none;
  }

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

  .footer-certificates {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
  }

  .footer-certificates img {
    height: 46px;
    border-radius: 6px;
  }

  /* container padding restore for mobile */
  .footer-top.container,
  .footer-bottom.container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ---------- MOBILE FOOTER: 3 horizontal link columns under logo ---------- */
@media (max-width: 767px) {
  /* overall footer */
  .hf-footer {
    width: calc(100% - 32px);   /* adds ~16px margin each side */
    margin: 24px auto;          /* gap above and below */
    border-radius: 20px;
    padding: 0;
    box-shadow: none;
    overflow: hidden;
  }

  /* top area - logo + socials */
  .footer-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 36px 24px 20px;
    gap: 28px;
  }




  /* 3 link columns */
  .footer-top .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    gap: 0;
  }

  .footer-col {
    flex: 1 1 33%;
    max-width: 33%;
    box-sizing: border-box;
    padding-right: 12px;
  }

  .footer-col h4 {
    color: #c0d62f;
    font-size: 1rem;
    margin-bottom: 10px;
  }

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

  .footer-col ul li {
    margin-bottom: 6px;
  }

  .footer-col ul li a {
    color: #fff;
    font-size: 0.9rem;
    text-decoration: none;
  }

  .footer-col ul li a:hover {
    color: #c0d62f;
  }

  /* bottom section */
  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  .footer-bottom-left {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px;
  }

  .footer-bottom-left p {
    margin: 0;
    font-size: 0.9rem;
    color: #ccc;
  }

  .footer-bottom-left span {
    color: #c0d62f;
  }

 

  .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
      margin-bottom: 20px !important;
  }

  .footer-links a {
    color: #ccc;
    font-size: 0.9rem;
    text-decoration: none;
   
  }

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

  .footer-certificates {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    margin-bottom: 20px;
  }

  .footer-certificates img {
    height: 46px;
    border-radius: 6px;
  }

  /* container padding restore for mobile */
  .footer-top.container,
  .footer-bottom.container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 550px) {
  .footer-bottom-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px;
  }

   .footer-bottom-left {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); /* 2 items per row */
    justify-items: center;
    align-items: start;
    gap: 10px 16px;
    text-align: center !important;
    width: 100%;
    order: 2; /* keep below logos */
  }

  .footer-bottom-left p {
    grid-column: 1 / -1; /* copyright line spans full width on top */
    margin-bottom: 4px;
  }

  .footer-bottom-left ul.footer-links {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px 12px;
    padding: 0;
    margin: 0 auto;
    width: 100%;
  }

  .footer-links li {
    display: inline-flex;
    justify-content: center;
  }

  .footer-links a {
    font-size: 0.9rem;
    color: #ccc;
    text-decoration: none;
    white-space: nowrap;
  }

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

  /* keep cookie icon neatly under text */
  .footer-links li:last-child {
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  .footer-links li:last-child i,
  .footer-links li:last-child img,
  .footer-links li:last-child svg {
    display: block;
    margin: 0 auto;
  }

  /* logos above copyright */
  .footer-certificates {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 3 logos per row */
    justify-items: center;
    align-items: center;
    gap: 14px 10px;
   
    order: 1; /* ensures logos appear above copyright */
    width: 100%;
    margin: 10px !important;
  }

  .footer-certificates img {
    height: 68px;
    width: auto;
  }


  
}