.services-hero {
  position: relative;
  height: 50vh;
  background: url('../image/about2.jpeg') no-repeat center center/cover;
}

.services-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* dark overlay */
}

.services-hero .container {
  position: relative;
  z-index: 2;
  /* keeps text above overlay */
}

.about-hero {
  position: relative;
  height: 50vh;
  background: url('../image/cli2.jpg') no-repeat center center/cover;
  display:flex;
  justify-content:center;
}

.about-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* dark overlay */
}

.about-hero .container {
  position: relative;
  z-index: 2;
}

.contact-hero {
  position: relative;
  height: 50vh;
  background: url('../image/contactus.jpeg') no-repeat center center/cover;
  margin-bottom: 30px;
}

.contact-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);

}

.contact-hero .container {
  position: relative;
  z-index: 2;

}
.text-suc {
  color: #20D6FB;
}

.cta-section {
  background: linear-gradient(135deg, #f8f9fa, #e9f2ff);
}

.cta-section .btn-pri {
  background: linear-gradient(135deg, #1ED2F7 0%, #20D6FB 45%, #d6aa53 55%, #AD7A2C 100%);
  border: none;
}

.cta-section .btn-pri:hover {
  background: #20D6FB;
}


.process {
  padding: 60px 0;
  font-family: "Space Grotesk", sans-serif;
}
.process__title {
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 15px;
  display: inline-block;
  position: relative;

}
.process__text {
  font-size: 18px;

}
.accordions__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.accordions__item {
  background-color: rgba(255,255,255,0.9);
  border-radius: 1.5rem;
  border: 1px solid black;
  overflow: hidden;
  transition: 0.3s ease;
}

.accordions__item:hover {
  background-color: #1ED2F7;
  border-radius: 1.5rem;
  border: 1px solid black;
  overflow: hidden;
  transition: 0.3s ease;
}
.accordions__control {
  display: flex;
  align-items: center;
  padding: 25px 40px;
  width: 100%;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  color: #222;
  position: relative;
}
.accordions__number {
  font-size: 36px;
  font-weight: 500;
  padding-right: 15px;
}
.accordions__title {
  flex: 1;
  font-size: 20px;
  font-weight: 500;
  text-align: left;
}
.accordions__icon {
  width: 30px;
  height: 30px;
  background: #fff;
  border: 1px solid #222;
  border-radius: 50%;
  position: relative;
  transition: transform 0.5s ease;
}
.accordions__icon::before,
.accordions__icon::after {
  content: "";
  position: absolute;
  background: #222;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.accordions__icon::before { width: 15px; height: 2px; }
.accordions__icon::after { width: 15px; height: 2px; transform: translate(-50%, -50%) rotate(90deg); }
.accordions__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  padding: 0 40px;
}
.open .accordions__content { padding: 20px 40px; max-height: 500px; }
.open .accordions__icon { transform: rotate(225deg); }

@media (max-width: 767px) {
  .process__title { font-size: 32px; }
    .accordions__list { max-width: 100%; padding: 0 15px; } /* ✅ full width, centered */
  .accordions__control { padding: 20px 25px; }
  .accordions__number { font-size: 28px; }
  .accordions__title { font-size: 18px; }
  .accordions__content { padding: 0 25px; }
  .open .accordions__content { padding: 15px 25px; }
}

.btn-book{
  background-color: #1ED2F7;
width: 100%;  
}

.btn-book:hover{
  background-color: #222;
  color: #f8f9fa;
}


.thank-hero {
  position: relative;
  height: 60vh;
  background: url('../image/about2.jpeg') no-repeat center center/cover;
}

.thank-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* dark overlay */
}

.thank-hero .container {
  position: relative;
  z-index: 2;
  /* keeps text above overlay */
}