@font-face {
  font-family: "Frutiger";
  font-style: normal;
  font-weight: normal;
  src: local("Frutiger"), url("./fonts/Frutiger.woff") format("woff");
}

@font-face {
  font-family: "Frutiger Bold";
  font-style: normal;
  font-weight: normal;
  src: local("Frutiger Bold"), url("./fonts/Frutiger_bold.woff") format("woff");
}

.container {
  max-width: 1300px !important;
}
:root {
  --clr_primary: #098dd9;
  --clr_primary_400: #06649a;
  --clr_primary_300: #26b1e6;
  --clr_secondary: #003e61;
  --clr_gray: #d9d9d9;
  --clr_dark_gray: #404041;
}

body {
  font-family: "Frutiger", sans-serif;
  font-weight: 500;
}

.clr_primary {
  color: var(--clr_primary);
}

.bg_gray {
  background-color: var(--clr_gray);
}

.bg_primary {
  background-color: var(--clr_primary);
}

.bg_gradient {
  background: linear-gradient(90deg, var(--clr_primary), var(--clr_secondary));
}

.hero_gradient_bg {
  background: #06649a;
  background: linear-gradient(
    106deg,
    #06649a 33%,
    rgba(4, 63, 110, 0.871) 74%,
    #06649a 56%
  );
}
.hero_gradient_bg_3 {
  background: #098dd9;
  background: linear-gradient(106deg, #098dd9 33%, #043f6ede 74%, #098dd9 56%);
}
.hero_gradient_bg_2 {
  background: #098dd9;
  background: linear-gradient(
    73deg,
    #098dd9 75%,
    rgba(4, 63, 110, 1) 75%,
    #098dd9 94%
  );
}
.contacts {
  background: #003e61;
  background: linear-gradient(
    109deg,
    rgba(0, 62, 97, 1) 59%,
    rgba(237, 221, 83, 0) 59%
  );
}

.discounts_hero {
  background: url("./dicounts_bg.webp") no-repeat;
  background-size: cover;
  background-position: center;
}
.webniar_hero {
  background: url("./webniar_hero_bg.svg") no-repeat;
  background-size: cover;
  background-position: center;
}
.it_academy_hero {
  background: url("./it_academy_hero.svg") no-repeat;
  background-size: cover;
  background-position: center;
}
.why_skillo {
  background: url("./why_skillo_bg.webp") no-repeat;
  background-size: cover;
  background-position: center;
}
.why_skillo_gradient {
  background: #06649a;
  background: linear-gradient(
    108deg,
    rgba(6, 100, 154, 0) 60%,
    rgba(6, 100, 154, 0.65) 60%
  );
}

.bg_gradient {
  background: #06649a;
  background: linear-gradient(
    106deg,
    var(--clr_primary_300) 33%,
    rgb(8 34 55 / 82%) 74%,
    var(--clr_primary_300) 56%
  );
}

.nav_link {
  color: var(--clr_dark_gray);
  transition: color 0.3s ease-in-out;
}

.nav_link:hover {
  color: var(--clr_primary);
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: white;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  z-index: 1;
  border-radius: 8px;
  padding: 8px 0;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content a {
  display: block;
  padding: 8px 16px;
  color: #4b5563;
}
.dropdown-content a:hover {
  background-color: #f3f4f6;
  color: var(--clr_primary);
}

.reviewSlider .swiper-slide {
  transition: tranform 300ms linear;
  transform: scale(1);
}

.reviewSlider .swiper-slide-active + .swiper-slide {
  transform: scale(1.25);
  z-index: 2;
}

.trainings_hero {
  background-image: url(/assets/trainings_hero.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}

.training_hero {
  background-image: linear-gradient(
      90deg,
      rgba(0, 44, 88, 0.35),
      rgba(0, 44, 88, 0.35)
    ),
    url(/assets/featured_img.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}

.bg_card::after {
  content: "";
  width: 90%;
  background: var(--clr_primary);
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 20px;
  transform: translate(-50%, -50%) skew(0deg, 2deg);
  z-index: -1;
}

.bg_card_small::after {
  content: "";
  width: 90%;
  background: var(--clr_primary_300);
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 10px;
  transform: translate(-50%, -50%) skew(0deg, 2deg);
  z-index: -1;
}
.bg_card_purple::after {
  content: "";
  width: 90%;
  background: rgb(160, 0, 181);
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 10px;
  transform: translate(-50%, -50%) skew(0deg, 2deg);
  z-index: -1;
}

.purple_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: rgb(160, 0, 181) !important;
}
.secondary_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--clr_secondary) !important;
}

.bg_card_portfolio {
  transition: all 300ms linear;

  & .back {
    display: none;
  }
}

.bg_card_portfolio::after {
  content: "";
  width: 90%;
  background: var(--clr_secondary);
  position: absolute;
  top: 50%;
  transition: all 300ms linear;
  left: 50%;
  border-radius: 6px;
  transform: translate(-50%, -50%) skew(0deg, 2deg);
  z-index: -1;
}

.bg_card_portfolio:hover {
  background-color: var(--clr_secondary);

  & .front {
    display: none;
  }

  & .back {
    display: block;
  }
}

.bg_card_portfolio:hover::after {
  background-color: var(--clr_primary);
}

/* Track */
.testimonail::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}

/* Handle */
.testimonail::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 8px;
}

/* Handle on hover */
.testimonail::-webkit-scrollbar-thumb:hover {
  background: #d9d9d9;
}

.bg_dark {
  background-color: var(--clr_dark_gray);
}

#hidden_paragraph {
  grid-template-rows: 0fr;
}

#hidden_paragraph.show {
  grid-template-rows: 1fr;
}

.shadow_cls {
  -webkit-box-shadow: 0px 10px 30px 1px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 10px 30px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 10px 30px 1px rgba(0, 0, 0, 0.25);
}

#mbl_dropdown {
  grid-template-rows: 0fr;

  > div {
    overflow: hidden;
  }
}

.bg_primary_100 {
  background-color: #25afe6c1;
}
.bg_primary_400 {
  background-color: var(--clr_primary_400);
}
.bg_primary_300 {
  background-color: var(--clr_primary_300);
}

#mbl_dropdown.show {
  grid-template-rows: 1fr;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}

.swiper-pagination-bullet {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--clr_primary) !important;
}

.clr_secondary {
  color: var(--clr_secondary);
}

.bg_secondary {
  background-color: var(--clr_secondary);
}

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}
.accordion-content.open {
  grid-template-rows: 1fr;
}
.accordion-inner {
  overflow: hidden;
}


  .text-editor h1{font-size:1.875rem;line-height:2.25rem;margin:1.5rem 0 .75rem;font-weight:800}
  .text-editor h2{font-size:1.5rem;line-height:2rem;margin:1.25rem 0 .75rem;font-weight:700}
  .text-editor h3{font-size:1.25rem;line-height:1.75rem;margin:1rem 0 .5rem;font-weight:600}
  .text-editor h4{font-size:1.125rem;line-height:1.6rem;margin:.75rem 0 .5rem;font-weight:600}

  .text-editor p{margin:.75rem 0}
  .text-editor strong{font-weight:700}
  .text-editor em{font-style:italic}
  .text-editor u{text-decoration:underline}

  .text-editor ul{list-style:disc;padding-left:1.25rem;margin:.75rem 0}
  .text-editor ol{list-style:decimal;padding-left:1.25rem;margin:.75rem 0}
  .text-editor li{margin:.25rem 0}
  .text-editor li > ul{list-style:circle;margin:.25rem 0 .25rem .75rem}
  .text-editor li > ol{list-style:lower-alpha;margin:.25rem 0 .25rem .75rem}

  .text-editor a{text-decoration:underline}
  .text-editor blockquote{
    margin:1rem 0;padding:.75rem 1rem;border-left:4px solid #e5e7eb;background:#f9fafb
  }

  .text-editor hr{border:none;border-top:1px solid #e5e7eb;margin:1.25rem 0}

  .text-editor code{
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:.95em; background:#f3f4f6; padding:.1rem .3rem; border-radius:.25rem
  }
  .text-editor pre{
    overflow:auto; padding:1rem; border-radius:.5rem; background:#111827; color:#e5e7eb; margin:1rem 0
  }
  .text-editor pre code{background:transparent; padding:0; color:inherit}

  .text-editor table{width:100%; border-collapse:collapse; margin:1rem 0}
  .text-editor th, .text-editor td{border:1px solid #e5e7eb; padding:.5rem; text-align:left}
  .text-editor th{background:#f9fafb; font-weight:600}

  .text-editor img{max-width:100%; height:auto; border-radius:.25rem}
  
/* Картинката вдясно + разстояние от текста */
#panel-cert details figure.attachment {
  float: right;
  margin: 0 0 8px 16px;   /* разстояние вляво */
  max-width: 42%;         /* може да нагласиш процента според размера */
}

/* Картинката да е правилно оразмерена */
#panel-cert details figure.attachment img {
  display: block;
  width: 100%;
  height: auto;
}

/* Clearfix, за да не се качва следващият <details> */
#panel-cert details::after {
  content: "";
  display: table;
  clear: both;
}

/* Скриване на caption-а (по желание) */
#panel-cert .attachment__caption {
  display: none;
}
/* Глобални стойности (можеш да ги override-неш на конкретен .swiper елемент) */
:root{
  --bullet-size: 14px;
  --bullet-gap: 16px;
  --bullet-bg: #6ECFF6;
  --bullet-active-bg: #1F9BD1;
  --pagination-bottom: -20px; /* позиция по Y */
}

/* Пагинация: центрирани точки с gap */
.swiper-pagination{
  position: absolute;
  left: 0; right: 0;
  bottom: var(--pagination-bottom);
  display: flex;
  justify-content: center;
  gap: var(--bullet-gap);
}

/* Точки (булети) */
.swiper-pagination-bullet{
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 9999px;
  background-color: var(--bullet-bg);
  opacity: 1;
  border: 1px solid var(--bullet-bg);
  transition: transform .3s ease, background-color .3s ease;
}

/* Активна точка */
.swiper-pagination-bullet-active{
  background-color: var(--bullet-active-bg);
  transform: scale(1.2);
}
/* Респонсив — на мобилно да пада под текста */
@media (max-width: 768px) {
  #panel-cert details figure.attachment {
    float: none;
    margin: 12px 0 0 0;
    max-width: 100%;
  }
}