/* Start custom CSS for html, class: .elementor-element-932b827 *//* =========================================
   FULL WIDTH - REMOVE ALL CORNER GAPS
========================================= */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

.elementor,
.elementor-page,
.elementor-section,
.elementor-container {
  margin: 0 !important;
}

.hg-mm-hero {
  width: 100vw !important;
  max-width: 100vw !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  border-radius: 0 !important;
}

.hg-mm-hero-container {
  width: 100% !important;
  max-width: 1280px !important;

  margin-left: auto !important;
  margin-right: auto !important;
}

/* Elementor HTML widget itself */
.elementor-widget-html,
.elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove section/container side spacing */
.elementor-section,
.elementor-container,
.elementor-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Mobile */
@media (max-width: 767px) {

  .hg-mm-hero {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fea3fe7 *//* =========================================
   HARMAIN GO
   MAKKAH TO MADINAH - VEHICLE SECTION
========================================= */

.hg-route-fleet {
  width: 100%;
  padding: 90px 20px;
  background: #f8f6f0;
  box-sizing: border-box;
  overflow: hidden;
}


/* =========================================
   SECTION HEADING
========================================= */

.hg-route-fleet-heading {
  max-width: 850px;
  margin: 0 auto 55px;
  text-align: center;
}

.hg-route-fleet-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 11px 22px;

  border: 1px solid #c99b24;
  border-radius: 50px;

  color: #b88918;
  background: #fffdf7;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;

  letter-spacing: 2px;

  margin-bottom: 20px;
}


.hg-route-fleet-heading h2 {
  margin: 0 0 18px;

  color: #171717;

  font-family: Arial, Helvetica, sans-serif;

  font-size: clamp(34px, 4.5vw, 58px);

  line-height: 1.08;

  font-weight: 800;

  letter-spacing: -1.5px;
}


/* Gold heading line */

.hg-route-fleet-heading h2 span {
  display: block;

  margin-top: 6px;

  color: #c99b24;
}


.hg-route-fleet-heading p {
  max-width: 760px;

  margin: 0 auto;

  color: #5c5c5c;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 17px;

  line-height: 1.7;
}


/* =========================================
   VEHICLE GRID
========================================= */

.hg-route-fleet-grid {
  width: 100%;
  max-width: 1250px;

  margin: 0 auto;

  display: grid;

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

  gap: 25px;

  align-items: stretch;
}


/* =========================================
   VEHICLE CARD
========================================= */

.hg-route-card {
  position: relative;

  display: flex;
  flex-direction: column;

  background: #ffffff;

  border: 1px solid #e8e3d7;

  border-radius: 22px;

  overflow: hidden;

  box-shadow:
    0 10px 35px rgba(35, 28, 15, 0.08);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.hg-route-card:hover {
  transform: translateY(-7px);

  box-shadow:
    0 20px 45px rgba(35, 28, 15, 0.14);
}


/* =========================================
   IMAGE AREA
========================================= */

.hg-route-image {
  position: relative;

  width: 100%;

  height: 245px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      145deg,
      #f5f2e9,
      #ffffff
    );

  overflow: hidden;
}


.hg-route-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  object-position: center;

  padding: 12px;

  box-sizing: border-box;

  transition: transform 0.4s ease;
}


.hg-route-card:hover .hg-route-image img {
  transform: scale(1.05);
}


/* =========================================
   CARD CONTENT
========================================= */

.hg-route-content {
  position: relative;

  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 27px 25px 25px;
}


/* Number */

.hg-route-number {
  display: block;

  color: #c99b24;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 2px;

  margin-bottom: 8px;
}


/* Vehicle title */

.hg-route-content h3 {
  margin: 0 0 20px;

  color: #171717;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 25px;

  line-height: 1.2;

  font-weight: 800;
}


/* =========================================
   FEATURES
========================================= */

.hg-route-feature {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 12px;

  color: #4e4e4e;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 15px;

  line-height: 1.4;
}


.hg-route-feature span {
  width: 21px;
  height: 21px;

  flex: 0 0 21px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #f5e9c7;

  color: #b88918;

  font-size: 12px;

  font-weight: 800;
}


/* =========================================
   PREMIUM BADGE
========================================= */

.hg-premium-badge {
  position: absolute;

  top: 22px;
  right: 22px;

  padding: 7px 11px;

  border-radius: 30px;

  background: #171717;

  color: #d8ad35;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1px;
}


/* =========================================
   WHATSAPP BUTTON
========================================= */

.hg-route-btn {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  width: 100%;

  margin-top: auto;
  padding: 15px 18px;

  box-sizing: border-box;

  border-radius: 50px;

  background: #c99b24;

  color: #111111 !important;

  text-decoration: none !important;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 15px;

  font-weight: 700;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}


.hg-route-btn span {
  font-size: 18px;

  line-height: 1;
}


.hg-route-btn:hover {
  background: #e0b63d;

  color: #111111 !important;

  transform: translateY(-2px);
}


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

@media (max-width: 1000px) {

  .hg-route-fleet {
    padding: 75px 20px;
  }

  .hg-route-fleet-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 22px;
  }

}


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

@media (max-width: 650px) {

  .hg-route-fleet {
    padding: 65px 16px;
  }


  .hg-route-fleet-heading {
    margin-bottom: 38px;
  }


  .hg-route-fleet-label {
    font-size: 10px;

    padding: 9px 15px;

    letter-spacing: 1.4px;

    margin-bottom: 17px;
  }


  .hg-route-fleet-heading h2 {
    font-size: 34px;

    line-height: 1.12;

    letter-spacing: -0.8px;
  }


  .hg-route-fleet-heading p {
    font-size: 15px;

    line-height: 1.65;
  }


  .hg-route-fleet-grid {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .hg-route-image {
    height: 230px;
  }


  .hg-route-content {
    padding: 24px 20px 22px;
  }


  .hg-route-content h3 {
    font-size: 23px;
  }


  .hg-route-feature {
    font-size: 14px;
  }


  .hg-route-btn {
    margin-top: 18px;

    padding: 15px;
  }

}


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

@media (max-width: 380px) {

  .hg-route-fleet-heading h2 {
    font-size: 30px;
  }

  .hg-route-image {
    height: 210px;
  }

}/* End custom CSS */