/* ----------------------------------------------- [ Font Families ] --------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Domine:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* 
inter -----
<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 900
.inter-<uniquifier> {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
} 
  
domine -----
.domine-<uniquifier> {
  font-family: "Domine", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

dm-serif -----
.dm-serif-display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}
.dm-serif-display-regular-italic {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
} 
*/

/* ------------------------------------------------ [ CSS Variable ] --------------------------------------------------- */
:root {
  /* Constant colors */
  --Smoky-Black: #100e0d;
  --Eerie-Black: #1f1d1a;
}

/* ------------------------------------------------ [ Global CSS ] ---------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  text-decoration: none;
  /* Disable Text Selection */
  /* -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; */
}
::before,
::after {
  box-sizing: border-box;
}
* > img {
  user-select: none;
  pointer-events: none;
  display: inline-block;
  /* filter: grayscale(50%); */
}
a {
  text-decoration: none;
  display: inline-block;
}
li {
  list-style: none;
}
body {
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  font-family: "Inter", sans-serif;
  background-color: #0f0e0d !important;
}
/* Font styles */
.dm-serif {
  font-family: "DM Serif Display", serif;
}
.domine {
  font-family: "Domine", serif;
}
.inter {
  font-family: "Inter", sans-serif;
}
/* Hide scrollbar  */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  scrollbar-width: none;
}
/* ------------------------------ [ Pages CSS ] ----------------------------- */

/* Home Customers-section > Scrolling Logos */

.logos_section {
  width: 100%;
  max-width: 1920px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}
.logos_container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scroller {
  max-width: 100%;
}
.scroller__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem;
  height: 6rem;
}
.scroller__inner img {
  width: 100%;
}
.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}
.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}
.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}
.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}
.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}
@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}
.left-gradient {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #0f0e0d, transparent);
  width: 10rem;
  height: 100%;
}
.right-gradient {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(to left, #0f0e0d, transparent);
  width: 10rem;
  height: 100%;
}

/* Home Taglines-section > Slider container */

.swiper_pagination {
  width: 100% !important;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0f0e0d !important;
  position: relative;
  z-index: 1;
}
@media (max-width: 991px) {
  .swiper_pagination {
    height: 6rem;
  }
}

.swiper-pagination {
  width: 40% !important;
}
.swiper-pagination-bullet {
  margin: 0 !important;
  width: 33.33% !important;
  height: 4px !important;
  border-radius: 0 !important;
  background-color: #8f8b85 !important;
}
.swiper-pagination-bullet-active {
  width: 33.33% !important;
  height: 4px !important;
  border-radius: 0 !important;
  background-color: #7c909a !important;
}