/* =========================================
   SERVIZUP HERO SECTION
========================================= */

.hero {
  position: relative;
  overflow: hidden;

  min-height: 650px;

  display: flex;
  align-items: center;

  padding: 80px 0 90px;

  background:
    radial-gradient(
      circle at 82% 35%,
      rgba(47, 127, 224, 0.08),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f7faff 100%
    );
}


/* =========================================
   HERO BACKGROUND PATTERN
========================================= */

.hero-pattern {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    radial-gradient(
      rgba(47, 127, 224, 0.10) 1px,
      transparent 1px
    );

  background-size: 28px 28px;

  mask-image: linear-gradient(
    to right,
    transparent,
    black 40%,
    black 85%,
    transparent
  );

  opacity: 0.45;
}


/* =========================================
   DECORATIVE CIRCLES
========================================= */

.hero::before {
  content: "";

  position: absolute;

  width: 430px;
  height: 430px;

  right: -200px;
  top: -190px;

  border-radius: 50%;

  border: 1px solid rgba(47, 127, 224, 0.10);

  pointer-events: none;
}


.hero::after {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  left: -170px;
  bottom: -180px;

  border-radius: 50%;

  background: rgba(47, 127, 224, 0.035);

  pointer-events: none;
}


/* =========================================
   HERO CONTAINER
   MAX WIDTH 1200PX
========================================= */

.hero .container {
  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding-left: 20px;
  padding-right: 20px;

  box-sizing: border-box;
}


/* =========================================
   HERO GRID
========================================= */

.hero-grid {
  position: relative;

  z-index: 2;

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.9fr);

  align-items: center;

  gap: 45px;
}


/* =========================================
   HERO COPY
========================================= */

.hero-copy {
  max-width: 590px;

  text-align: left;
}


/* =========================================
   HERO BADGE
========================================= */

.hero-badge {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 8px 15px;

  margin-bottom: 22px;

  border: 1px solid rgba(47, 127, 224, 0.15);

  border-radius: 50px;

  background: rgba(47, 127, 224, 0.06);

  color: #2F7FE0;

  font-size: 13px;

  font-weight: 700;

  line-height: 1;
}


.hero-badge-dot {
  width: 7px;
  height: 7px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #2F7FE0;

  box-shadow:
    0 0 0 4px rgba(47, 127, 224, 0.10);
}


/* =========================================
   HERO HEADING
========================================= */

.hero-copy h1 {
  margin: 0;

  display: flex;

  flex-direction: column;

  line-height: 1.1;

  color: #172033;
}


/* ServizUp */

.hero-brand {
  display: block;

  font-size: clamp(48px, 5vw, 66px);

  line-height: 1;

  font-weight: 900;

  letter-spacing: -2px;

  color: #2F7FE0;
}


/* সব সেবা এক জায়গায় */

.hero-title {
  display: block;

  margin-top: 14px;

  font-size: clamp(30px, 3.2vw, 41px);

  line-height: 1.25;

  font-weight: 800;

  letter-spacing: -0.6px;

  color: #172033;
}


/* =========================================
   HERO DESCRIPTION
========================================= */

.hero-description {
  max-width: 570px;

  margin: 25px 0 0;

  color: #667085;

  font-size: 16px;

  line-height: 1.9;

  font-weight: 400;
}


/* =========================================
   DOWNLOAD BUTTONS
========================================= */

.download-buttons {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 28px;

  background: transparent;
}


/* =========================================
   STORE BUTTON
========================================= */

.store-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  text-decoration: none;

  background: transparent;

  border: none;

  box-shadow: none;

  border-radius: 0;

  overflow: visible;

  transition:
    transform 0.25s ease;
}


.store-button img {
  width: 165px;

  height: auto;

  display: block;

  background: transparent;
}


/* Hover */

.store-button:hover {
  transform: translateY(-3px);

  background: transparent;

  box-shadow: none;
}


/* =========================================
   APP STORE WRAPPER
========================================= */

.store-button-wrapper {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;
}


/* =========================================
   DISABLED APP STORE
========================================= */

.store-button--disabled {
  opacity: 0.58;

  cursor: not-allowed;
}


.store-button--disabled:hover {
  transform: none;

  background: transparent;

  box-shadow: none;
}


/* =========================================
   COMING SOON BADGE
========================================= */

.coming-soon-badge {
  position: absolute;

  z-index: 5;

  top: -11px;

  right: -7px;

  padding: 5px 10px;

  border-radius: 50px;

  background: #2F7FE0;

  color: #ffffff;

  font-size: 10px;

  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

  box-shadow:
    0 4px 12px rgba(47, 127, 224, 0.20);
}


/* =========================================
   HERO ART
========================================= */

.hero-art {
  position: relative;

  min-height: 430px;

  display: flex;

  align-items: center;

  justify-content: center;
}


/* =========================================
   IMAGE GLOW
========================================= */

.hero-image-glow {
  position: absolute;

  width: 350px;

  height: 350px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(47, 127, 224, 0.13) 0%,
      rgba(47, 127, 224, 0.05) 45%,
      transparent 70%
    );

  filter: blur(6px);

  pointer-events: none;
}


/* =========================================
   IMAGE WRAPPER
========================================= */

.hero-image-wrapper {
  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 440px;

  display: flex;

  align-items: center;

  justify-content: center;
}


/* =========================================
   HERO IMAGE
========================================= */

.hero-image {
  width: 100%;

  max-width: 440px;

  height: auto;

  display: block;

  object-fit: contain;

  filter:
    drop-shadow(
      0 20px 30px rgba(31, 64, 104, 0.12)
    );

  animation:
    heroFloat 5s ease-in-out infinite;
}


/* =========================================
   HERO IMAGE FLOAT
========================================= */

@keyframes heroFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

  .hero {
    min-height: auto;

    padding: 70px 0 80px;
  }


  .hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 0.9fr);

    gap: 30px;
  }


  .hero-copy {
    max-width: 550px;
  }


  .hero-brand {
    font-size: 52px;
  }


  .hero-title {
    font-size: 32px;
  }


  .hero-description {
    font-size: 15px;

    line-height: 1.8;
  }


  .hero-art {
    min-height: 380px;
  }


  .hero-image-wrapper {
    max-width: 380px;
  }


  .hero-image {
    max-width: 380px;
  }


  .hero-image-glow {
    width: 310px;

    height: 310px;
  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  .hero {
    min-height: auto;

    padding: 60px 0 70px;

    text-align: center;
  }


  .hero .container {
    max-width: 100%;

    padding-left: 18px;

    padding-right: 18px;
  }


  .hero-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }


  .hero-copy {
    max-width: 650px;

    margin: 0 auto;

    text-align: center;
  }


  .hero-badge {
    margin-bottom: 18px;
  }


  .hero-copy h1 {
    align-items: center;
  }


  .hero-brand {
    font-size: 52px;
  }


  .hero-title {
    margin-top: 10px;

    font-size: 31px;
  }


  .hero-description {
    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

    font-size: 15px;

    line-height: 1.8;
  }


  /* Download Buttons */

  .download-buttons {
    justify-content: center;

    gap: 12px;

    margin-top: 26px;
  }


  .store-button img {
    width: 155px;
  }


  /* Hero Image */

  .hero-art {
    min-height: auto;

    margin-top: 0;
  }


  .hero-image-wrapper {
    max-width: 360px;
  }


  .hero-image {
    max-width: 360px;
  }


  .hero-image-glow {
    width: 280px;

    height: 280px;
  }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .hero {
    padding: 50px 0 55px;
  }


  .hero .container {
    padding-left: 16px;

    padding-right: 16px;
  }


  .hero-grid {
    gap: 35px;
  }


  .hero-brand {
    font-size: 45px;

    letter-spacing: -1.5px;
  }


  .hero-title {
    font-size: 27px;

    line-height: 1.3;
  }


  .hero-description {
    font-size: 14px;

    line-height: 1.75;
  }


  /* Download */

  .download-buttons {
    gap: 9px;

    margin-top: 24px;
  }


  .store-button img {
    width: 145px;
  }


  .coming-soon-badge {
    top: -9px;

    right: -5px;

    padding: 4px 8px;

    font-size: 9px;
  }


  /* Image */

  .hero-art {
    margin-top: 5px;
  }


  .hero-image-wrapper {
    max-width: 310px;
  }


  .hero-image {
    max-width: 310px;
  }


  .hero-image-glow {
    width: 250px;

    height: 250px;
  }
}


/* =========================================
   VERY SMALL SCREEN
========================================= */

@media (max-width: 360px) {

  .hero-brand {
    font-size: 40px;
  }


  .hero-title {
    font-size: 24px;
  }


  .hero-description {
    font-size: 13.5px;
  }


  .download-buttons {
    gap: 7px;
  }


  .store-button img {
    width: 135px;
  }


  .hero-image-wrapper {
    max-width: 285px;
  }


  .hero-image {
    max-width: 285px;
  }
}