@import url('https://fonts.googleapis.com/css2?family=Alkatra:wght@700&family=Poppins:wght@400;600&family=Signika+Negative:wght@700&display=swap');
/* 
font-family: 'Poppins', sans-serif;
font-weight: 400/600; 
*/

html {
  font-size: 16px;
}

html, * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

:root {
  /* Var Size */
  --size-5xs: 0.5rem;
  --size-4xs: 1rem;
  --size-3xs: 1.5rem;
  --size-2xs: 2rem;
  --size-xs: 2.5rem;
  --size-sm: 3rem;
  --size-md: 3.5rem;
  --size-lg: 4rem;
  --size-2xl: 4.5rem;
  --size-3xl: 5rem;
  --size-4xl: 5.5rem;
  --size-5xl: 6rem;
  /* Var BG */
  --bg-gray: #F8F8F8;
  --bg-white: #FFFFFF;
  --bg-text: #000000;
  /* Var Shadow */
  --shadow-box: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* << ============================================================================================================ >> */

/* Media 320px */
/* Hero Image Style */
.content {
  background-color: var(--bg-gray);
}

.content .hero-image-title {
  font-size: var(--size-sm);
}

.content .hero-image-title h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

.content .hero-image-title h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* << ============================================================================================================ >> */

/* Floating Style */
.floating {
  text-align: center;
  display: grid;
  grid-template-areas: 
    "margonda"
    "simatupang"
    "kelapa-gading"
  ;
}

.floating .floating-box {
  z-index: 2;
}

.floating .floating-locate-1 {
  grid-area: margonda;
  background-color: var(--bg-gray);
  box-shadow: var(--shadow-box);
  border-radius: 1rem;
  padding: 1.5rem 0 1.5rem 0;
}

.floating .floating-locate-1 h6 { 
  padding-top: 5%;
}

.floating .floating-locate-2 {
  grid-area: simatupang;
  background-color: var(--bg-gray);
  box-shadow: var(--shadow-box);
  border-radius: 1rem;
  margin-top: 5%;
  padding: 1.5rem 0 1.5rem 0;
}

.floating .floating-locate-2 h6 {
  padding-top: 5%;
}

.floating .floating-locate-3 {
  grid-area: kelapa-gading;
  background-color: var(--bg-gray);
  box-shadow: var(--shadow-box);
  border-radius: 1rem;
  margin-top: 5%;
  padding: 1.5rem 0 1.5rem 0;
}

.floating .floating-locate-3 h6 {
  padding-top: 5%;
}

.floating img {
  width: 20%;
  display: block;
}

.floating .box a {
  text-decoration: none;
}

/* << ============================================================================================================ >> */
/* About Us Style */

.container .about-us {
  overflow-x: hidden;
}

.container .about-us .about-us-title h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

.container .about-us .about-us-title h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* << ============================================================================================================ >> */
/* Style Menu */
.content .menu {
  background-color: var(--bg-gray);
}

/* Style Hero Image */
.content .hero-title {
  align-items: center;
}

@media only screen and (min-width: 320px) {
  .content .about-us {
    margin-top: 2rem;
  }
}

@media only screen and (min-width: 375px) {
  .content .about-us {
    margin-top: 4.5rem;
  }
}

@media only screen and (min-width: 425px) {
  .content .about-us {
    margin-top: 7rem;
  }
}

@media only screen and (min-width: 480px) {
  .content .about-us {
    margin-top: 9.5rem;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (max-height: 480px) {
  /* Style Hero Titlr */
  .content .hero-title .hero-image-title {
    margin-top: -8rem;
  }
  /* Style Floating*/ 
  .content .float .floating {
    margin-top: -11.5rem;
  }
}

/* Lanjutan dari min-height 480px diatas */
@media only screen and (min-width: 481px) and (max-width: 639px) and (max-height: 480px) {
  /* Style Hero Title */
  .content .hero-title .hero-image-title {
    margin-top: -11rem;
  }
  /* Style Floating */
  .content .float .floating {
    margin-top: -15rem;
  }
}

/* << ============================================================================================================================================== >> */

@media only screen and (min-width: 320px) and (max-width: 480px) and (min-height: 481px) {
  /* Style Hero Title */
  .content .hero-title .hero-image-title {
    margin-top: -8rem;
  }
  /* Style Floating */
  .content .float {
    margin-top: -12rem;
  }
}

/* Lanjutan dari min height 481px diatas */
@media only screen and (min-width: 481px) and (max-width: 767px) and (min-height: 481px) {
  /* Style Hero Title */
  .content .hero-title .hero-image-title {
    margin-top: -11rem;
  }
  /* Style Floating */
  .content .float .floating {
    margin-top: -15rem;
  }
  /* Style About Us */
  .content .about-us {
    margin-top: -6.5rem;
  }
}

@media only screen and (min-width: 533px) {
  .content .about-us {
    margin-top: -4rem;
  }
}

@media only screen and (min-width: 580px) {
  .content .about-us {
    margin-top: -1.5rem;
  }
}

/* Untuk membuat screen 640px menjadi tiga */
@media only screen and (min-width: 640px) and (max-width: 767px) and (max-height: 480px) {
  /* Style Hero Title */
  .content .hero-title .hero-image-title {
    margin-top: 3rem;
  }
  /* Style Floating*/ 
  .content .float .floating {
    width: 100%;
    margin-top: 0;
  }
  .content .float .floating .floating-box {
    display: grid;
    grid-template-areas: 
      "margonda simatupang kelapa-gading"
    ;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 3%;
  }
  .content .float .floating .floating-locate-1 {
    grid-area: margonda;
  }
  .content .float .floating .floating-locate-2 {
    grid-area: simatupang;
    margin-top: 0;
  }
  .content .float .floating .floating-locate-3 {
    grid-area: kelapa-gading;
    margin-top: 0;
  }
  /* Style About Us */
  .content .about-us-title {
    margin-top: -19.5rem;
  }
  /* Style Menu */
  .content .menu {
    margin-top: -19rem;
  }
}

@media only screen and (min-width: 640px) {
  .content .about-us {
    margin-top: -1rem;
  }
}

@media only screen and (min-width: 767px) {
  .content .about-us {
    margin-top: 5.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .content .hero-title .hero-image-title {
    margin-top: 1rem;
  }
  /* Floating Style */
  .content .float .floating {
    width: 100%;
  }
  .content .float .floating .floating-box {
    display: grid;
    grid-template-areas: 
      "margonda simatupang kelapa-gading"
    ;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 3%;
  }
  .content .float .floating .floating-locate-1 {
    grid-area: margonda;
  }
  .content .float .floating .floating-locate-2 {
    grid-area: simatupang;
    margin-top: 0;
  }
  .content .float .floating .floating-locate-3 {
    grid-area: kelapa-gading;
    margin-top: 0;
  }
}