@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1rem;
  /* overflow: hidden; */
}

.info {
  padding: 50px 0;
}

.info-fw-bold {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
}

.btn-brand {
  background: linear-gradient(90deg, #C32420 0%, #7F2B15 100%);
  transition: 0.3s all ease-in-out;
  border: 0;
}

.btn-brand:hover {
  background: linear-gradient(90deg, #7F2B15 0%, #C32420 100%);
}

#mainHeader {
  width: 100%;
  background-color: transparent;
  transition: background-color 0.3s;
  font-size: small;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#preloader img {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* #content {
  display: none;
} */
#content {
  opacity: 0;
  transition: opacity 0.6s ease;
}

#content.show {
  opacity: 1;
}

.info-hero-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.info-hero-content.show {
  opacity: 1;
  transform: translateY(0);
}

.hero-banner {
  background: url('../img/pattern-bg.webp');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.info-overlay {
  position: relative;
}

.info-overlay::before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: #be000042;
  left: 0;
  top: 0;
}

.info-hero-content {
  margin-top: 15%;
}


.timeline {
  padding: 50px 0;
  position: relative;
}

.timeline ul {
  padding: 0;
  position: relative;
}

.timeline .default-line {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 16px;
  /* background: #ffffff4d; */
  background: #6a230e7c;
  /* border: 1px solid #fff; */
  height: 100%;
  border-radius: 0;
}

.timeline .draw-line {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 16px;
  height: 0;
  /* background: #fff; */
  /* background: linear-gradient(180deg, #6A240E 0%, #662411 100%); */
  background: linear-gradient(180deg, #3B0809 0%, #E00002 100%);
  border-radius: 0;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
  margin-bottom: 50px;
  padding-left: 30px;
}

.timeline ul li .info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.timeline ul li.in-view {
  transition: all 0.4s ease-in-out;
  /* padding: 40px 20px; */
}

.timeline ul li {
  position: relative;
  list-style: none;
  /* optional */
}

.info-timeline-card {
  padding: 40px 5px;
}



.timeline li {
  opacity: 1;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline li.in-view {
  opacity: 1;
  transform: translateY(0);
}

.draw-line{
  min-height: 80px;
}

@media (max-width: 767px) {
  .timeline ul li {
    padding-left: 30px;
  }

  .timeline ul li.in-view::before,
  .timeline .default-line,
  .timeline .draw-line {
    left: 0;
  }

  .btn-brand-light-gradient-blue {
    font-size: 12px;
  }

  .info-hero-content {
    margin-top: 45%;
  }
}

.info-grident-line {
  position: relative;
}

.info-grident-line::before {
  position: absolute;
  content: '';
  height: 4px;
  width: 50%;
  background: linear-gradient(90deg, #3B0809 0%, #E00002 100%);
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.info-grident-line-bg {
  height: 4px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #3B0809 0%, #E00002 100%);
}

@media (max-width: 1200px) {
  .info-grident-line-bg {
    display: none;
  }

  .text-end {
    text-align: start !important;
  }
}

.info-footer-bg {
  background: #000000;
}

.social-icons {
  display: flex;
}

.social-icons li a {
  margin-right: 6px;
  height: 30px;
  width: 30px;
  background: #737373 !important;
  color: #000 !important;
  text-align: center;
  align-items: center;
  display: flex;
  text-decoration: none;
  justify-content: center;
  font-size: 1rem !important;
  border: 1px solid #737373;
  transition: .3s ease-in-out;
}

.social-icons li a:hover {
  background: #E63B27 !important;
  color: #fff !important;
  border: 1px solid #E63B27;

}


@media (max-width:767px) {
  .info {
    padding: 30px 15px;
  }

  .navbar-brand {
    max-width: 110px;
  }

  #mainHeader.bg {
    background-color: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(5px);
  }

  .social-icons {
    display: flex;
    justify-content: center;
  }

  .info-timeline-card {
    padding: 25px 0px;
  }
}