/* Shared FAQ section styles.
   The FAQ accordion appears on pages served by BOTH layouts, but the legacy
   `default` layout does not load the Touria stylesheet (its global resets
   would clobber those pages). So the .faq-area rules live here and are
   linked by both layouts.

   .site-heading / .site-title rules are COPIED (not moved) because many other
   Touria sections use them; .faq-area rules are moved and live only here. */

:root {
  --body-font: "Roboto", sans-serif;
  --heading-font: "Dancing Script", cursive;
  --theme-color: #f98225;
  --body-text-color: #757f95;
  --color-white: #ffffff;
  --color-dark: #2a4456;
  --box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.05);
  --border-info-color: rgba(0, 0, 0, 0.08);
}


/*====================
12. Site title css
======================*/
.site-heading {
  margin-bottom: 50px;
  position: relative;
  z-index: 1;
}
.site-heading .site-title-tagline {
  display: inline-block;
  color: var(--theme-color);
  font-weight: 500;
  text-transform: capitalize;
  font-family: var(--heading-font);
  font-size: 22px;
  line-height: 0;
  border: 1.5px solid var(--theme-color);
  border-radius: 50px;
  padding: 3px 15px 3px 3px;
  margin-bottom: 20px;
}
.site-heading .site-title-tagline i {
  font-size: 16px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: var(--theme-color);
  color: var(--color-white);
  text-align: center;
  border-radius: 50px 50px 50px 50px;
  margin-right: 8px;
}
.site-heading .site-title-tagline.light {
  background: var(--color-white);
  color: var(--theme-color);
}
.site-heading .site-title-tagline.light i {
  background: var(--theme-color);
  color: var(--color-white);
}
.site-heading .site-title {
  font-weight: 600;
  font-size: 45px;
  color: var(--color-dark);
  margin-bottom: 0;
}@media all and (max-width: 767px) {
  .site-heading .site-title {
    font-size: 45px;
  }
}


.site-heading .site-title span {
  color: var(--theme-color);
}
.site-heading .site-title .text-gradient {
  color: transparent;
  background-image: var(--gradient3);
  -webkit-background-clip: text;
          background-clip: text;
}
.site-heading p {
  margin-top: 15px;
}
.site-heading.inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}
.site-heading.inline .site-title {
  font-size: 45px;
}
.site-heading .heading-divider {
  display: inline-block;
  position: relative;
  border-bottom: 5px solid var(--theme-color);
  width: 90px;
  height: 4px;
  border-radius: 50px;
}
.site-heading .heading-divider::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 15px;
  border-bottom: 5px solid var(--color-white);
  border-radius: 50px;
  animation: heading-move 5s infinite linear;
}
.site-heading .heading-divider.light {
  border-color: var(--color-white);
}
.site-heading .heading-divider.light::after {
  border-color: var(--theme-color);
}

.site-heading.sh-2 .site-title-tagline {
  border-color: var(--color-white);
  color: var(--color-white);
}


/*===================
25. Contact us css 
=====================*/
.contact-content .site-heading .site-title {
  font-size: 35px;
  text-transform: unset;
  font-weight: 600;
}
.choose-area .site-title {
  margin-top: 12px;
}
.cta-wrap .site-title {
  color: var(--color-white);
}
.cta-wrap .site-title span {
  font-family: var(--heading-font);
}@media all and (min-width: 992px) and (max-width: 1199px) {
  .download-content .site-heading .site-title {
    font-size: 35px;
  }
}
@media all and (min-width: 992px) and (max-width: 1199px) {
  .download-content .site-heading p {
    display: none;
  }
}


/*====================
29. Faq css 
======================*/
.faq-area .accordion-item {
  border: none;
  background: var(--color-white);
  border-radius: 15px;
  margin-bottom: 25px;
  border: 1px solid var(--border-info-color);
}
.faq-area .accordion-item:last-child {
  margin-bottom: 0;
}
.faq-area .accordion-button {
  border-radius: 0px;
  background: transparent;
  font-weight: 700;
  font-size: 20px;
  color: var(--color-dark);
  padding: 12px;
  box-shadow: none;
}@media all and (max-width: 991px) {
  .faq-area .accordion-button {
    font-size: 16px;
  }
}


.faq-area .accordion-button-button:focus {
  box-shadow: none;
}
.faq-area .accordion-button::after {
  content: "\f107";
  background: none;
  color: var(--color-dark);
  font-size: 24px;
  font-weight: 500;
  font-family: "Font Awesome 6 pro";
  width: unset;
  height: unset;
  margin-top: 2px;
  margin-right: 3px;
}
.faq-area .accordion-button:not(.collapsed) {
  color: var(--theme-color);
  background: transparent;
  box-shadow: 0 0.8px 0 0 var(--border-info-color);
}
.faq-area .accordion-button:not(.collapsed)::after {
  content: "\f107";
  transform: rotate(-180deg);
  margin-top: 0;
}
.faq-area .accordion-button span {
  width: 40px;
  height: 40px;
  margin-right: 15px;
}
.faq-area .accordion-button span i {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50px;
  background: var(--theme-color);
  text-align: center;
  color: var(--color-white);
}
.faq-area .accordion-body {
  color: var(--body-text-color);
}@media all and (max-width: 991px) {
  .faq-area .faq-content {
    margin-bottom: 50px;
  }
}


.faq-area .faq-img {
  text-align: right;
  position: relative;
}
.faq-area .faq-img img {
  width: 74%;
  border-radius: 30px;
}
.faq-area .faq-counter {
  position: absolute;
  left: 8%;
  bottom: 15%;
}
.faq-area .faq-counter .counter-box {
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  margin-top: 30px;
  min-width: 260px;
  justify-content: start;
  text-align: left;
}
.faq-area .faq-counter .counter-box .icon {
  flex-shrink: 0;
  width: 82px;
  height: 82px;
  line-height: 75px;
  background: var(--theme-color);
  border-radius: 50px;
  text-align: center;
  box-shadow: var(--box-shadow);
}
.faq-area .faq-counter .counter-box .icon img {
  width: 45px;
  border-radius: 0;
  filter: brightness(0) invert(1);
}
.faq-area .faq-counter .counter-box .title {
  margin-top: 5px;
}
/* ---------------------------------------------------------------------------
   Legacy-layout compatibility.

   The old `default` layout ships its own base CSS (normalize, style.min.css and
   Bootstrap 5.1.3). Those styles leaked into the accordion and made it render
   differently from the homepage: Cairo / system-ui instead of the theme font,
   line-height 1.5 instead of 1.8, Bootstrap's own 4px item radius instead of
   the theme's 15px, a black expanded header instead of the theme orange, and a
   white accordion body instead of a transparent one.

   Everything below is scoped to .faq-area, so it cannot affect the rest of the
   page. Same approach as footer.css.
--------------------------------------------------------------------------- */
.faq-area,
.faq-area p,
.faq-area li,
.faq-area h2,
.faq-area h3,
.faq-area span,
.faq-area button,
.faq-area .accordion-body {
  font-family: var(--body-font);
}
.faq-area {
  font-size: 16px;
  line-height: 1.8;
  color: var(--body-text-color);
}
.faq-area .accordion-item {
  background: var(--color-white);
  border: 1px solid var(--border-info-color);
  border-radius: 15px;
  margin-bottom: 25px;
}
.faq-area .accordion-item:last-child {
  margin-bottom: 0;
}
.faq-area .accordion-button {
  border-radius: 0;
  background: transparent;
  color: var(--color-dark);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
  box-shadow: none;
}
.faq-area .accordion-button:not(.collapsed) {
  color: var(--theme-color);
  background: transparent;
}
.faq-area .accordion-button:focus {
  box-shadow: none;
  border-color: var(--border-info-color);
}
.faq-area .accordion-body {
  background: transparent;
  color: var(--body-text-color);
  line-height: 1.8;
}
.faq-area .site-title,
.faq-area .site-heading .site-title {
  line-height: 1.05;
}
/* The theme names an FA6 family for the chevron, but the legacy layout ships
   FontAwesome 5. List both so the glyph resolves under either icon set. */
.faq-area .accordion-button::after {
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
}

/* The legacy stylesheet styled the OLD FAQ accordion with !important, and those
   rules now land on this markup too:
     .accordion-item{border-radius:.25rem!important}
     .accordion-button:not(.collapsed){color:#000!important}
     .accordion-header{background:#fff!important;border:none!important}
     .accordion-item:not(:first-of-type){border-top:...!important}
   Specificity cannot beat !important, so these restate the theme values the
   same way. Still scoped to .faq-area. */
.faq-area .accordion-item {
  border-radius: 15px !important;
  background: var(--color-white) !important;
  border: 1px solid var(--border-info-color) !important;
}
.faq-area .accordion-item:not(:first-of-type) {
  border-top: 1px solid var(--border-info-color) !important;
}
.faq-area .accordion-header {
  background: transparent !important;
  border: none !important;
}
.faq-area .accordion-button {
  padding: 12px !important;
  background: transparent !important;
  border: none !important;
}
.faq-area .accordion-button:not(.collapsed) {
  color: var(--theme-color) !important;
  background: transparent !important;
}
.faq-area .accordion-button.collapsed {
  color: var(--color-dark) !important;
}
.faq-area .accordion-body {
  background: transparent !important;
  color: var(--body-text-color) !important;
}

/* The two layouts ship different Bootstrap builds, which disagree on the
   inherited item colour and on the button's inner corner radius. Neither is
   visible (the button is transparent and borderless) but pin them so the two
   layouts compute identically. */
.faq-area .accordion-item {
  color: var(--body-text-color);
}
.faq-area .accordion-button,
.faq-area .accordion-item:first-of-type .accordion-button,
.faq-area .accordion-item:last-of-type .accordion-button.collapsed {
  border-radius: 0 !important;
}

/* "Leggi di più" button.
   It previously used .theme-btn, which is defined only in style.css — a file the
   legacy layout does not load. On those pages the button fell through to the
   legacy `button{background-color:inherit!important; color:#fff}` rule and
   rendered as white text on a transparent background, i.e. invisible.
   Self-contained here, with !important to beat that rule. */
.faq-area .faq-more {
  margin-top: 32px;
  text-align: center;
}
.faq-area .faq-more-btn {
  display: inline-block;
  margin: 0;
  padding: 14px 38px;
  background-color: var(--theme-color) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 12px;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.faq-area .faq-more-btn:hover,
.faq-area .faq-more-btn:focus {
  background-color: var(--color-dark) !important;
  color: var(--color-white) !important;
  outline: none;
  box-shadow: none;
}

/* Own vertical spacing. This used to be the theme's padding utilities, which
   are declared in style.css and therefore absent on the legacy layout, leaving
   the section flush against whatever came before and after it. */
.faq-area {
  padding-top: 60px;
  padding-bottom: 40px;
}

/* FAQs page photo: the theme's 74%-wide right-aligned image left room for a
   counter badge that this site doesn't use, so here it fills the column in a
   portrait crop centred on the travellers. */
.faq-area .faq-img.faq-img-full img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 62% center;
}