@charset "UTF-8";

/* ===================================
   FAQ Section
=================================== */

.faq{
  padding:80px 0;
}

.faq-wrap{
  max-width:1100px;
  margin:auto;
}

.faq .section-title{
  text-align:center;
  margin-bottom:40px;
}

.faq .section-title h2{
  color:#fff3c2;
}

.faq .section-title p{
  color:#cfc3a8;
}

/* ===================================
   FAQ Item
=================================== */

.faq details{
  margin-bottom:18px;

  overflow:hidden;

  border-radius:24px;

  border:
  1px solid rgba(216,181,109,.18);

  background:
  linear-gradient(
    135deg,
    rgba(17,28,39,.94),
    rgba(7,10,15,.98)
  );

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

  transition:
  all .35s ease;
}

.faq details:hover{

  border-color:
  rgba(255,240,184,.4);

  box-shadow:
  0 20px 60px rgba(0,0,0,.35);
}

.faq details[open]{

  border-color:
  rgba(255,240,184,.45);
}

.faq summary{

  position:relative;

  padding:22px 28px;

  cursor:pointer;

  list-style:none;

  color:#fff3c2;

  font-size:18px;

  font-weight:900;

  transition:.3s ease;
}

.faq summary::-webkit-details-marker{
  display:none;
}

.faq summary::after{

  content:"+";

  position:absolute;

  right:24px;
  top:50%;

  transform:
  translateY(-50%);

  color:#f7df9b;

  font-size:28px;

  font-weight:300;

  transition:.3s ease;
}

.faq details[open] summary::after{

  content:"−";

  transform:
  translateY(-50%)
  rotate(180deg);
}

.faq details p{

  margin:0;

  padding:
  0 28px 24px;

  color:#d5dde8;

  line-height:1.9;
}

/* ===================================
   SEO FAQ Block
=================================== */

.xx-faq-seo{

  width:
  min(1180px,calc(100% - 40px));

  margin:50px auto;

  padding:32px;

  border-radius:28px;

  border:
  1px solid rgba(216,181,109,.22);

  background:
  linear-gradient(
    180deg,
    rgba(17,28,39,.88),
    rgba(10,15,21,.94)
  );

  box-shadow:
  0 20px 56px rgba(0,0,0,.34);
}

.xx-faq-seo h2{

  margin:0 0 24px;

  color:#f7df9b;

  text-align:center;

  font-size:clamp(30px,4vw,48px);
}

.xx-faq-seo details{

  margin-bottom:16px;

  border-radius:18px;

  border:
  1px solid rgba(216,181,109,.15);

  background:
  rgba(255,255,255,.03);

  overflow:hidden;
}

.xx-faq-seo summary{

  position:relative;

  padding:18px 22px;

  cursor:pointer;

  list-style:none;

  color:#fff3c2;

  font-weight:850;
}

.xx-faq-seo summary::-webkit-details-marker{
  display:none;
}

.xx-faq-seo summary::after{

  content:"+";

  position:absolute;

  right:18px;

  color:#f7df9b;
}

.xx-faq-seo details[open] summary::after{
  content:"−";
}

.xx-faq-seo p{

  margin:0;

  padding:
  0 22px 20px;

  color:#d5dde8;

  line-height:1.9;
}

/* ===================================
   FAQ Hover
=================================== */

.faq details,
.xx-faq-seo details{

  transition:
  transform .3s ease,
  border-color .3s ease,
  box-shadow .3s ease;
}

.faq details:hover,
.xx-faq-seo details:hover{

  transform:
  translateY(-2px);

  border-color:
  rgba(255,240,184,.35);
}

/* ===================================
   Mobile
=================================== */

@media(max-width:768px){

  .faq{
    padding:60px 0;
  }

  .faq summary{
    font-size:16px;
    padding:18px 20px;
  }

  .faq details p{
    padding:
    0 20px 20px;
  }

  .xx-faq-seo{
    width:
    calc(100% - 24px);

    padding:22px;
  }

  .xx-faq-seo summary{
    padding:16px 18px;
  }

  .xx-faq-seo p{
    padding:
    0 18px 18px;
  }

}