.hero {
    width: 95%;
    margin: auto;
     background-image: 
    linear-gradient(
      to top, 
      rgba(71, 53, 49, 1) 0%,
      rgba(71, 53, 49, 0.6) 15%,
      rgba(71, 53, 49, 0) 100%
    ),
    url(../Images/background-img.jpg);
    background-size: cover;
    background-position: bottom center;
    height: 87vh;
    color: white;

    h1, h2, h3, h4, h5, p, a {
    color: white;
    }
}

.how-it-works {
    text-align: center;
    margin-bottom: 0;
    max-width: 1200px;
    

    .item {
        background-color: rgba(255, 255, 255, .35);
        border: solid 1px rgba(var(--espresso));
        flex: 1 1 calc(33.333% - 16px); /* 3 items per row */
        min-width: 250px;  
    }
}

.map {
  width: 100%;
  max-width: 1200px;

  img {
     max-width: 100%;   /* don’t let it overflow the width */
    height: auto;      /* keep the aspect ratio */
    display: block;  
  }

}

.services {
    row-gap: 48px;
    margin-bottom: 80px;
    .item {
        flex: 1 1 calc(33.333% - 16px); /* 3 items per row */
        min-width: 250px;  
        gap: 8px;
        padding: 0;
    }
}


.about > div, .about > image {
    flex: 1 1 calc(50% - 16px); /* 3 items per row */
    max-width: 800px;
}


.about {
    img {
        max-width: 100%;
    }
}

.discount {
  background-color: rgba(255,255,255, .5);
 width: 95%;
 margin-bottom: 80px;
 border-radius: 48px;
}

/* FAQ SECTION */

.faq {
    background-color: rgba(var(--green-coffee));
    gap: 0;

    h1 {
        margin-bottom: 24px;
    }
}

.faq-item {
    padding: 0 !important;
    padding: 24px 0 !important;
    border-top: 1px solid rgba(var(--cocoa-powder));
    display: flex;            
  flex-direction: column;
  gap: 0;                   
  row-gap: 0;              
  column-gap: 0;
}

.faq > .faq-item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.faq-question {
  display: flex;
  justify-content: space-between; 
  align-items: flex-start;        
  gap: 8px;
  padding: 0;
}



.faq-question button {
  flex: 1;              
  text-align: left;
  white-space: normal;  
  border: none;
  background-color: rgba(var(--green-coffee));
  padding: 0;
  font-size: 18px;
}

.faq-toggle {
  flex-shrink: 0;       
  align-self: flex-start;
}


.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0; /* collapsed */
  text-align: left;
}

.faq-item.active .faq-answer {
  max-height: 200px; 
  padding: 16px 0;
  
}



/* MEDIA QUERIES */

@media only screen and (max-width: 1000px) {
    h1 {
        font-size: 32px;
    }
}