:root {
  --primary: #8cc740;
  --secondary: #f7931e;
  --text: #f9f9f9;
  --bg: #95aa9d;
  --dark: #333333;
  --border: #e0e0e0;
  --textgray: #333333;
}

@font-face {
  font-family: "Roboto";
  src: url("../css/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* Pagination */
.heroSwiper .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.5;
}

.heroSwiper .swiper-pagination-bullet-active {
  background: #029eff;
  opacity: 1;
}

.testimonialSwiper .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.5;
}

.testimonialSwiper .swiper-pagination-bullet-active {
  background: #029eff;
  opacity: 1;
}

/* ================= CUSTOM SCROLLBAR ================= */

/* ================= FIREFOX ================= */
* {
  scrollbar-width: thin;
  scrollbar-color: #0284c7 #e0f2fe;
}

/* ================= CHROME, EDGE, SAFARI ================= */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #e0f2fe;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  border-radius: 10px;
  border: 2px solid #e0f2fe;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #0369a1, #0284c7);
}