/*!
 * Template Name: Hostina Template
 * Author: hostk.com
 * Version: 1.0
 * Description: Modern Responsive Bootstrap Hosting Template
 * Created: 2025
 */
 
/* /////////////////// HERO HOME STYLES /////////////// */
/* /////////////////////////////////////////////////////// */
#hero-home {
  min-height: 850px;
  background-color: var(--color-primary);
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.hero-content {
  position: relative;
  z-index: 2;
}

#hero-home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      4px 4px at 10% 20%,
      rgba(255, 255, 255, 0.9),
      transparent
    ),
    radial-gradient(
      2.5px 2.5px at 25% 65%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(3px 3px at 80% 45%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 50% 15%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(
      2.5px 2.5px at 90% 75%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(3px 3px at 70% 35%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 30% 85%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(
      2.5px 2.5px at 15% 50%,
      rgba(255, 255, 255, 0.5),
      transparent
    ),
    radial-gradient(3px 3px at 60% 70%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 85% 25%, rgba(255, 255, 255, 0.7), transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.hero-ellipse {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 16rem;
  height: 16rem;
  box-shadow: 0 0 28px #ffffff30;
  border-radius: 50%;
  animation: ellipsePulse 6s infinite alternate;
}

@keyframes ellipsePulse {
  0% {
    transform: translateX(-50%) scale(1);
  }
  100% {
    transform: translate(-50%) scale(1.5);
  }
}
#hero-home input {
  font-size: 2rem;
  height: 100%;
  padding-right: 5.4rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #1a1a1a!important;
  color: #f0f0f0!important;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6),
              0 0 6px rgba(255, 255, 255, 0.05);
}

#hero-home input:hover {
  border-color: transparent;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

#hero-home input:focus {
  border: 1px solid transparent;
  background: linear-gradient(#1a1a1a, #1a1a1a) padding-box,
              linear-gradient(90deg, #888, #555) border-box;
  box-shadow: 0 0 10px rgba(200, 200, 200, 0.3);
}

#hero-home input:active {
  border: 1px solid transparent;

}

#hero-home input::placeholder {
  color: var(--color-text);
}

#hero-home .inp-group .icon {
  right: 3rem;
  font-size: 2.2rem;
}




#hero-home .search-form button {
  position: relative;
  overflow: hidden;
  font-size: 20px;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
  line-height: 2.3;
  padding: 0.7rem 2rem;
  border-radius: 10px;

  border: 1px solid rgba(0, 0, 0, 0.15);
  background: linear-gradient(145deg, #ffffff, #f2f2f2);
  color: #000;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#hero-home .search-form button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
}


#hero-home .search-form button:hover {
  transform: translateY(-3px) scale(1.05);
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

#hero-home .search-form button:hover::before {
  animation: shine 0.9s forwards;
}

#hero-home .search-form button:active {
  transform: translateY(1px) scale(0.97);
  background: linear-gradient(145deg, #f0f0f0, #dcdcdc);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
}

@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}


/* /////////////////// FEATURES HOME STYLES /////////////// */
/* /////////////////////////////////////////////////////// */
#features-home .card {
  border-radius: var(--radius-24);
  box-shadow: var(--drop-shadow);
  border: none;
  transition: var(--transition-bounce);
  overflow: hidden;
  position: relative;
}

#features-home .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

#features-home .card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

#features-home .card:hover::before {
  transform: scaleX(1);
}

#features-home .card.active {
  background-color: var(--color-primary);
}

#features-home figure {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-16);
  background-color: #fff;
  padding: 5px;
  transition: all 0.4s ease;
}

#features-home .card:hover figure {
  transform: scale(1.1) rotate(180deg);
}

#features-home .cards-container li:nth-child(3) figure img {
  display: inline-block;
  object-fit: contain;
}

#features-home .card-heading {
  font-size: 18px;
  font-weight: 700;
  transition: all 0.3s ease;
}

#features-home .card-desc {
  color: var(--color-text);
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

#features-home .card.active .card-desc {
  color: var(--color-text-dark);
}

/* /////////////////// BANNER HOME STYLES /////////////// */
/* /////////////////////////////////////////////////////// */
#banner-home .container {
  border-radius: var(--radius-24);
}

#banner-home .content {
  padding: 2rem;
  border-radius: var(--radius-24);
  overflow: hidden;
  position: relative;
}

#banner-home .content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      3px 3px at 10% 10%,
      rgba(255, 255, 255, 0.9),
      transparent
    ),
    radial-gradient(
      2.5px 2.5px at 25% 85%,
      rgba(255, 255, 255, 0.7),
      transparent
    ),
    radial-gradient(3px 3px at 90% 70%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(3px 3px at 40% 70%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(3px 3px at 60% 20%, rgba(255, 255, 255, 0.8), transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

#banner-home .section-heading {
  font-size: 2.8rem;
}

#banner-home .description {
  font-size: 2rem;
}

#banner-home .right-side {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* //////////////////// MEDIA QUESRIES ///////////////// */
/* ///////////////////////////////////////////////////// */
@media (max-width: 1023px) {
}

@media (max-width: 767px) {
  #hero-home {
    min-height: 700px;
  }
}



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

  #preloader img {
    width: 120px;
    margin-bottom: 20px;
  }

  .progress-container {
    width: 200px;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
  }

  .progress-bar {
    height: 100%;
    width: 0%;
background: linear-gradient(135deg, #c0c0c0 0%, #e0e0e0 25%, #f5f5f5 50%, #d9d9d9 75%, #b0b0b0 100%);
    border-radius: 4px;
    transition: width 0.1s linear;
  }

  #main-content {
    display: none;
  }