@font-face {
  font-family: Unbounded;
  src: url("../fonts/Unbounded-Light.76c6f5f19839.ttf") format('truetype'); 
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: Unbounded;
  src: url("../fonts/Unbounded-Regular.2430b9e22226.ttf") format('truetype'); 
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Blippo-Black CY [Rus by me]';
  src: url("../fonts/blippo_blackcyrusbyme.7494080b1faf.otf") format('opentype'); 
  font-weight: 400; 
  font-style: normal;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;

  
}

.faq-page-wrapper {
  width: 100%;
  min-height: 100vh; 
  padding-top: 20px; 

  

  
  background: none; 
  overflow: hidden; 
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.faq-main-container {
  width: 100%;
  max-width: 1303px; 
  padding: 0; 
  display: flex;
  flex-direction: column;
  gap: 55px; 
  box-sizing: border-box;
  background: none !important; 

  
}

.faq-header-block {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none !important; 

  
}

.faq-title-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-main-title-text {
  color: #ffef2b; 
  font-family: 'Blippo-Black CY [Rus by me]', sans-serif;
  font-size: 55px;
  font-weight: 400; 
  line-height: 1; 
  word-wrap: break-word;
  margin: 0;
}

.faq-subtitle-text {
  color: white; 
  font-family: Unbounded, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2; 
  word-wrap: break-word;
  margin: 0;
  width: 273px; 
}

.faq-ask-question-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  gap: 28px;
  padding: 24px 32px; 
  width: auto; 
  max-width: 364px;
}

.faq-ask-question-prompt {
  color: white; 
  font-family: Unbounded, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1; 
  word-wrap: break-word;
  margin: 0;
}

.faq-ask-question-button {
  padding: 12px 25px;
  border-radius: 10px;
  outline: 1px white solid;
  outline-offset: -1px;
  color: white;
  font-family: Unbounded, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px; 
  word-wrap: break-word;
  text-decoration: none;
  display: inline-flex; 
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.faq-ask-question-button:hover {
  background-color: white;
  color: #004e9f;
}

.faq-content-block {
  width: 100%; 
  height: 797px; 
  position: relative; 
  background: #004e9f; 
  box-shadow: 6px 6px 15px rgb(0 0 0 / 25%);
  border-radius: 20px;
  display: flex;
  overflow: hidden; 
  margin-bottom: 65px; 
}

.faq-left-panel {
  width: 535px;
  height: calc(100% - 64px); 

  
  padding: 32px 34px 32px 24px; 
  display: flex;
  flex-direction: column;
  gap: 20px; 
  overflow-y: auto; 
  box-sizing: border-box;
  position: relative; 
}


.faq-left-panel::-webkit-scrollbar {
  width: 5px; 
}

.faq-left-panel::-webkit-scrollbar-track {
  background: transparent; 
  border-radius: 4px;

  

  

  

  
}

.faq-left-panel::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 34%); 
  border-radius: 4px;
}

.faq-left-panel::-webkit-scrollbar-thumb:hover {
  background: rgb(255 255 255 / 50%); 
}

.faq-question-category,
.faq-accordion-header,
.faq-question-item {
  padding: 10px 24px; 
  border-radius: 99px; 
  font-family: Unbounded, sans-serif;
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s,
    outline 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.faq-question-category {
  
  background: white;
  color: black;
  outline: 2px black solid;
  font-size: 16px;
  font-weight: 400;
  line-height: 1; 
}

.faq-accordion-header {
  
  background: white;
  color: black;
  outline: 2px black solid;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.19; 
}

.faq-accordion-category.open > .faq-accordion-header {
  
}

.faq-accordion-category.nested > .faq-accordion-header {
  
  outline: 1px white solid;
  background: transparent;
  color: white;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.19; 
}

.faq-accordion-category.nested.open > .faq-accordion-header {
  
}

.faq-chevron-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease-in-out;
}

.faq-accordion-category.open .faq-chevron-icon {
  transform: rotate(180deg);
}

.faq-accordion-content {
  display: none; 
  padding-left: 20px; 
  flex-direction: column;
  gap: 10px; 
  margin-top: 10px;
}

.faq-accordion-category.open > .faq-accordion-content {
  display: flex; 
}

.faq-question-item {
  background: white;
  color: black;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.19; 
  padding-left: 24px; 
  padding-right: 24px;
  width: 100%; 
}

.faq-question-item.active {
  background: #3a94f2;
  color: white;
  outline: none;
}

.faq-question-category:hover,
.faq-accordion-header:hover,
.faq-question-item:not(.active):hover {
  background-color: #f0f0f0;
  color: #00346b;
  outline-color: #00346b;
}

.faq-accordion-category.nested > .faq-accordion-header:hover,
.faq-question-category.nested-item:hover {
  
  background-color: rgb(255 255 255 / 10%);
  color: white;
  outline-color: white;
}

.faq-right-panel {
  width: calc(
    100% - 535px - 1px
  ); 
  height: calc(100% - 42px); 
  margin: 21px; 
  margin-left: 0; 
  background: white;
  box-shadow: inset 4px 4px 6px rgb(0 0 0 / 25%);
  border-radius: 32px;
  border: 1px #818ce5 solid;
  padding: 59px; 
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 74px; 
  overflow-y: auto; 
}

.faq-answer-title {
  color: #191919;
  font-family: sans-serif; 
  font-size: 24px;
  font-weight: 400;
  line-height: 1; 
  word-wrap: break-word;
  margin: 0;
}

.faq-answer-body {
  color: #191919;
  font-family: sans-serif; 
  font-size: 16px;
  font-weight: 400;
  line-height: 1.0625; 
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 37px; 
}

.faq-answer-body p {
  margin: 0;
}

.faq-answer-details-link {
  color: #004e9f;
  font-family: Unbounded, sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.12px;
  word-wrap: break-word;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px; 
}

.faq-answer-details-link img {
  width: 12px; 
  height: 12px;
}


.faq-right-panel::-webkit-scrollbar {
  width: 8px;
}

.faq-right-panel::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.faq-right-panel::-webkit-scrollbar-thumb {
  background: #818ce5;
  border-radius: 10px;
}

.faq-right-panel::-webkit-scrollbar-thumb:hover {
  background: #575fbf;
}


.faq-custom-scrollbar-visual {
  position: absolute;
  width: 5px;
  height: 99px; 
  left: 536px; 
  top: 671px; 
  background: rgb(255 255 255 / 34%);
  border-radius: 4px;

  
}


@media (width <= 1350px) {
  
  .faq-main-container {
    padding: 0 20px; 
  }
}

@media (width <= 992px) {
  .faq-header-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .faq-ask-question-section {
    padding: 15px 20px;
  }

  .faq-content-block {
    flex-direction: column;
    height: auto; 
  }

  .faq-left-panel {
    width: 100%;
    height: auto;
    max-height: 40vh; 
    padding: 20px;
  }

  .faq-right-panel {
    width: calc(100% - 40px); 
    margin: 20px;
    height: auto;
    padding: 30px;
  }

  .faq-custom-scrollbar-visual {
    display: none; 
  }
}

@media (width <= 768px) {
  .faq-main-title-text {
    font-size: 40px;
  }

  .faq-subtitle-text,
  .faq-ask-question-prompt {
    font-size: 18px;
  }

  .faq-answer-title {
    font-size: 20px;
  }

  .faq-answer-body {
    font-size: 14px;
  }
}