@import url("https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ysabeau+Office:wght@400;500;600;700;800;900;1000&display=swap");

body,
button,
textarea,
input,
select {
  font-family: Manrope !important;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

body > main {
  flex-shrink: 0;
}

footer {
  margin-top: auto;
}

h1 {
  font-family: "Ysabeau Office" !important;
}

.navbar-brand .logo {
  max-height: 60px;
  object-fit: contain;
}

.navbar {
  background-image: none !important;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--bs-warning);
}

.navbar-toggler {
  padding: 0;
  border: none;
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible,
.navbar-toggler:focus-within,
.navbar-toggler:active {
  box-shadow: none;
}

.nav-link {
  color: var(--bs-danger) !important;
}

.nav-link:hover {
  color: var(--bs-warning);
}

.navbar .navbar-nav .nav-item .nav-link.active {
  border-bottom: solid 3px var(--bs-warning);
}

.dropdown-menu {
  background-color: var(--bs-primary-bg-subtle);
}

.dropdown-menu a.dropdown-item {
  transition: 0.3s ease-in-out;
}

.dropdown-menu .dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-danger);
}

.dropdown-menu a.dropdown-item:hover {
  background-color: var(--bs-danger);
  color: var(--bs-primary-bg-subtle);
  transition: 0.3s ease-in-out;
}

.dropdown-menu .dropdown-divider {
  background-color: var(--bs-gray-100);
}

.dropdown-toggle::after {
  border: none;
  vertical-align: top;
  content: "\f078";
  font-family: "Font Awesome 6 Pro";
  transition: rotate 0.35s ease-in-out;
}

.nav-item.dropdown:hover .dropdown-toggle::after {
  rotate: 180deg;
  color: var(--bs-warning);
  transition: rotate 0.35s ease-in-out;
}

.nav-item.dropdown:hover > .dropdown-menu {
  display: block;
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero .banner {
  height: 640px;
  background-color: rgba(255, 251, 231, 0.75);
  background-blend-mode: screen;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}

.hero .banner > div {
  position: absolute;
  color: var(--bs-primary-bg-subtle);
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem;
}

.hero .banner > div > h1 {
  font-weight: 900;
  font-size: 60px;
}

.bg-cyan {
  background-color: #bbeeff;
}

#founder figure {
  display: block;
}

#founder img {
  width: 100%;
  height: 400px;
  object-fit: contain;
}

#founder figcaption {
  text-align: center;
}

#performance-data img {
  width: 100%;
  height: 128px;
  object-fit: contain;
  filter: grayscale(200%);
}

#products figure {
  display: block;
}

#sanchalak-mandal figure {
  padding: 1rem 0;
}

#sanchalak-mandal figure img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  margin-bottom: 1rem;
}

#sanchalak-mandal figure h6,
#sanchalak-mandal figure figcaption {
  text-align: center;
}

#products img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

#products figcaption {
  font-size: 1.25rem;
}

.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 80px;
  z-index: 996;
  border-radius: 50%;
  transition: all 0.4s;
}

.back-to-top.visible {
  visibility: visible;
  opacity: 1;
}

.lightbox-caption {
  background-color: var(--bs-black);
}

@media screen and (min-width: 1023.98px) {
  #main-nav {
    padding: 50px 0;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }

  #main-nav.scrolled {
    padding: 30px 0;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }
}

@media screen and (min-width: 1330px) {
  #main-nav .container {
    padding: 0;
  }
}

@media screen and (min-width: 1440px) {
  .hero .banner > h1 {
    font-size: 60px;
  }
}

@media screen and (max-width: 800px) {
  .hero .banner > div > h1 {
    font-size: 42px;
  }
}