@import "/assets/.hyper-dev/telinco/css/bootstrap-telinco.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css";
@import "https://cdn.jsdelivr.net/npm/slick-slider@1.8.2/slick/slick.min.css";
@import "/assets/.hyper-dev/telinco/css/plugins/slick-slider/slick-theme.css";
@import "/assets/.hyper-dev/telinco/css/plugins/flaticons/flaticon.css";

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=League+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Birthstone&display=swap");

/* Greadients */
.gradient-1 {
  background-image: linear-gradient(
      180deg,
      rgba(var(--bs-body-bg-rgb), 0.01),
      rgba(var(--bs-body-bg-rgb), 0) 85%
    ),
    radial-gradient(
      ellipse at top left,
      rgba(var(--bs-danger-rgb), 0.0625),
      transparent 50%
    ),
    radial-gradient(
      ellipse at top right,
      rgba(var(--bs-success-rgb), 0.25),
      transparent 50%
    ),
    radial-gradient(
      ellipse at bottom right,
      rgba(var(--bs-info-rgb), 0.25),
      transparent 50%
    ),
    radial-gradient(
      ellipse at bottom left,
      rgba(var(--bs-warning-rgb), 0.125),
      transparent 50%
    );
}

.gradient-1-half {
  background-image: linear-gradient(
      180deg,
      rgba(var(--bs-body-bg-rgb), 0.01),
      rgba(var(--bs-body-bg-rgb), 1) 85%
    ),
    radial-gradient(
      ellipse at top left,
      rgba(var(--bs-primary-rgb), 0.25),
      transparent 50%
    ),
    radial-gradient(
      ellipse at top right,
      rgba(var(--bs-secondary-rgb), 0.25),
      transparent 50%
    ),
    radial-gradient(
      ellipse at center right,
      rgba(var(--bs-info-rgb), 0.25),
      transparent 50%
    ),
    radial-gradient(
      ellipse at center left,
      rgba(var(--bs-warning-rgb), 0.25),
      transparent 50%
    );
}

.gradient-1-half-flip-h {
  background-image: linear-gradient(
      180deg,
      rgba(var(--bs-body-bg-rgb), 0.01),
      rgba(var(--bs-body-bg-rgb), 1) 85%
    ),
    radial-gradient(
      ellipse at top right,
      rgba(var(--bs-primary-rgb), 0.25),
      transparent 50%
    ),
    radial-gradient(
      ellipse at top left,
      rgba(var(--bs-secondary-rgb), 0.25),
      transparent 50%
    ),
    radial-gradient(
      ellipse at center right,
      rgba(var(--bs-info-rgb), 0.25),
      transparent 50%
    ),
    radial-gradient(
      ellipse at center left,
      rgba(var(--bs-warning-rgb), 0.25),
      transparent 50%
    );
}

/* General */
body {
  font-family: "Poppins", sans-serif;
}

.section {
  padding-top: 60px;
  padding-bottom: 60px;
}

h1,
h2 {
  font-weight: bold;
}

/* Fonts */
.league-script-regular {
  font-family: "League Script", cursive;
  font-weight: 400;
  font-style: normal;
}

.birthstone-regular {
  font-family: "Birthstone", cursive;
  font-weight: 400;
  font-style: normal;
}

/* Buttons */
.btn {
  --bs-btn-padding-x: 1.5rem;
  border-radius: var(--bs-border-radius-pill);
}

.btn-sm {
  --bs-btn-padding-x: 1rem;
}

.btn-lg {
  --bs-btn-padding-x: 2rem;
}

/* Telinco navbar */
#navbar {
  transition: all 0.5s;
  top: 1rem;
  background-color: rgba(var(--bs-body-bg-rgb), 0.5);
  backdrop-filter: blur(10px);
}

.telinco-navbar {
  transition: all 0.3s;
}

.telinco-navbar .nav-link {
  transition: all 0.3s;
  border-bottom: 1px solid transparent;
}

.telinco-navbar .nav-link:hover {
  font-weight: 600;
  border-bottom: 1px solid var(--bs-primary);
}

.telinco-navbar .navbar-nav .nav-link.active,
.telinco-navbar .navbar-nav .nav-link.show {
  font-weight: 700;
}

.telinco-navbar.navbar.page-scrolled {
  background-color: var(--bs-primary);
}

.telinco-navbar.page-scrolled .navbar-toggler {
  color: var(--bs-light);
  border: var(--bs-border-width) solid rgba(var(--bs-light-rgb), 0.25);
}

.telinco-navbar.page-scrolled .nav-link {
  color: var(--bs-light);
}

.telinco-navbar.page-scrolled .nav-link:hover {
  border-bottom: 1px solid var(--bs-light);
}

.telinco-navbar.page-scrolled .navbar-nav .nav-link.active,
.telinco-navbar.page-scrolled .navbar-nav .nav-link.show {
  color: var(--bs-white);
}