:root {
  --clr_primary: #25b0e6;
  --clr_secondary: #003e61;
  --clr_gray: #f4f4f4;
  --clr_dark_gray: #404041;
}
/* 
@font-face {
  font-family: "Montserrat", sans-serif;
  src: url("/assets/fonts/Montserrat-Regular.ttf") format("truetype");
} */

body {
  font-family: "Montserrat", 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));
}

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

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

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

.testimonail {
  overflow-y: auto;
  max-height: 250px;
}

/* Scrollbar width */
.testimonail::-webkit-scrollbar {
  width: 12px;
  border-radius: 12px;
}

/* 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;
}

#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);
}

a.bg_primary:hover, button.bg_primary:hover{
    background-color: #1F98CC;
}
a.clr_primary:hover{
    color: #1F98CC;
}

.scroll-to-top {
  display:none;
  width: 50px;
  height: 50px;
  position: fixed;
  align-items: center;
  text-align: center;
  justify-content: center;
  bottom: 50px;
  right: 20px;
  z-index: 999;
  font-size: 2em;
  border: none;
  outline: none;
  background-color: white;
  border-radius: 50%;
  color: var(--dark);
  opacity: 0.2;
  cursor: pointer;
  padding: 2px 6px 6px 5px;
}

.scroll-to-top:hover {
  filter: brightness(0.8);
}

@media (max-width: 767px) {
  .scroll-to-top {
    width: 45px;
    height: 45px;
    font-size: 1.5em;
    padding: 6px 6px 6px 6px;
  }
}

/* Продуктова страница */
.product_hero {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Трите карти под хероя вървят от светло към тъмно синьо. */
.product_tier_1 {
  background-color: #57ade1;
}

.product_tier_2 {
  background-color: #1d5b8c;
}

.product_tier_3 {
  background-color: #0d3a5b;
}

.product_tier_1,
.product_tier_2,
.product_tier_3 {
  border: 1px solid #7ec6ec;
}

/* Фоновете на картите в "Защо го създадохме" и "Приложения". */
.product_card_gray {
  background-color: #f1f1f1;
}

.product_card_ice {
  background-color: #eaf8fd;
}

.product_card_sky {
  background-color: #daf1fb;
}

.product_outline {
  border: 1px solid #7ec6ec;
}

.btn_outline_white {
  border: 2px solid #ffffff;
  color: #ffffff;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.btn_outline_white:hover {
  background-color: #ffffff;
  color: var(--clr_secondary);
}

.bg_primary_light {
  background-color: #57ade1;
}

.bg_primary_light:hover {
  filter: brightness(1.06);
}

/* Заместител, докато липсва качена картинка. */
.image_placeholder {
  background-color: #f1f1f1;
  border: 2px dashed #c7d3dc;
  color: #8a9aa6;
}