@font-face {
  font-family: "Poppins";
  font-weight: 300;
  src:
    local("Poppins Light"),
    url("../fonts/poppins-light-webfont.woff2") format("woff2"),
    url("../fonts/poppins-light-webfont.woff") format("woff");
}

@font-face {
  font-family: "Poppins";
  font-weight: 400;
  src:
    local("Poppins"),
    url("../fonts/poppins-regular-webfont.woff2") format("woff2"),
    url("../fonts/poppins-regular-webfont.woff") format("woff");
}

@font-face {
  font-family: "Poppins";
  font-weight: 500;
  src:
    local("Poppins Medium"),
    url("../fonts/poppins-medium-webfont.woff2") format("woff2"),
    url("../fonts/poppins-medium-webfont.woff") format("woff");
}

@font-face {
  font-family: "Poppins";
  font-weight: 600;
  src:
    local("Poppins SemiBold"),
    url("../fonts/poppins-semibold-webfont.woff2") format("woff2"),
    url("../fonts/poppins-semibold-webfont.woff") format("woff");
}

@font-face {
  font-family: "Poppins";
  font-weight: 300;
  font-style: italic;
  src:
    local("Poppins Light"),
    url("../fonts/poppins-lightitalic-webfont.woff2") format("woff2"),
    url("../fonts/poppins-lightitalic-webfont.woff") format("woff");
}

/* ========================================= */
/* Root Custom Propeties for DESIGN SYSTEM
/* ========================================= */

:root {
  --clr-white: 0, 0%, 100%;
  --clr-primary: 178, 76%, 19%;
  --clr-accent: 14, 72%, 48%;
  --clr-neutral: 177, 27%, 11%;

  --clr-glaze: 336, 74%, 69%;

  --clr-text-darkest: hsl(var(--clr-neutral));
  --clr-text-dark: hsl(var(--clr-neutral), 0.6);
  --clr-text-light: hsl(var(--clr-neutral), 0.4);

  /* Font Stying Properties */
  --ff-primary: "Poppins", sans-serif;
  --ff-secondary: serif;

  --ff-body: var(--ff-primary);
  --ff-headings: var(--ff-primary);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --fs-h1: 6.4rem;
  --fs-h2: 4.8rem;
  --fs-h3: 3.6rem;
  --fs-h4: 2.8rem;
  --fs-h5: 2rem;
  --fs-h6: 1.6rem;
  --fs-hudge-body: 2rem;
  --fs-big-body: 1.8rem;
  --fs-body: 1.6rem;
  --fs-small-body: 1.4rem;
  --fs-caption: 1.2rem;

  /* Layout Styling Properties */
  --container-fluid: 100%;
  --container: 1160px;
  --container-md: 768px;
  --container-sm: 540px;
  --container-xsm: 384px;

  /* Gaps and Spacing Styling Properties  */
  --sp-4: 0.4rem;
  --sp-6: 0.6rem;
  --sp-8: 0.8rem;
  --sp-12: 1.2rem;
  --sp-16: 1.6rem;
  --sp-20: 2rem;
  --sp-24: 2.4rem;
  --sp-32: 3.2rem;
  --sp-40: 4rem;
  --sp-window: 2.4rem;

  /* Border Radious  */
  --border-radius-5: 0.5rem;
  --border-radius-10: 1rem;
  --border-radius-20: 2rem;
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 5.6rem;
    --fs-h2: 4.2rem;
    --fs-h3: 2.8rem;
    --fs-h4: 2rem;
    --fs-hudge-body: 1.8rem;
    --fs-big-body: 1.6rem;

    --sp-window: 1.6rem;
  }
}

/* ============================== */
/* RESET STYLES
/* ============================== */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* resent base font size for browser to 1rem = 10px */
html {
  font-size: 10px;
}

html,
body {
  height: 100%;
}

/* Body Setup */
body {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  color: var(--clr-text-dark);
  font-size: var(--fs-body);
  line-height: 1;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ul[role="list"],
ol,
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
}

a,
a:hover {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Remove default button styling */
button,
input[type="submit"] {
  border: transparent;
  background: transparent;
  cursor: pointer;
}

/* Remove default styling for table elements */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Input Fieds set to 100% width default */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="file"],
input[type="tel"],
select,
textarea {
  width: 100%;
  accent-color: hsl(var(--clr-primary));
}

/* Reset all heading tag to semilbold by default  */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}
p {
  line-height: 1.5;
}

/* Icon tag font/text line height reset */
i {
  line-height: 1;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ************************* */
/* Utility Styling  */
/* ************************* */
.sec-pad {
  padding-block: 4rem;
}
.text-align-center {
  text-align: center;
}
.text-darkest {
  color: var(--clr-text-darkest);
}
.text-accent {
  color: hsl(var(--clr-accent));
}
.text-primary {
  color: hsl(var(--clr-primary));
}

.h3 {
  font-size: var(--fs-h3);
  /* color: var(--clr-text-darkest); */
}
.h4 {
  font-size: var(--fs-h4);
  /* color: var(--clr-text-darkest); */
}
.h5 {
  font-size: var(--fs-h5);
  /* color: var(--clr-text-darkest); */
}
.big-para {
  font-size: var(--fs-big-body);
}
.para-limit {
  max-width: 65ch;
  margin-inline: auto;
}
.text-emphasis {
  font-weight: bold;
}

/* ************************* */
/* Component Styling  */
/* ************************* */
/* Button Styling  */
.btn {
  --clr-decor: 213, 0%, 67%;
  --clr-text: 213, 0%, 67%;

  padding: 1.2rem 2.4rem;
  color: hsl(var(--clr-text));
  font-weight: var(--fw-bold);
  font-size: var(--fs-small-body);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  border-radius: 4px;
}
.btn--primary {
  --clr-decor: var(--clr-primary);
  --clr-text: var(--clr-white);
}
.btn--accent {
  --clr-decor: var(--clr-accent);
  --clr-text: var(--clr-white);
}
.btn--filled {
  background-color: hsl(var(--clr-decor));
}
.btn--filled:hover {
  background-color: hsl(var(--clr-decor), 0.9);
}
.btn--bordered {
  border: 2px solid hsl(var(--clr-decor));
  background-color: none;
  --clr-text: var(--clr-decor);
}

@media (max-width: 768px) {
  .main-title {
    font-size: var(--fs-heading-5);
  }
  .sub-title {
    font-size: var(--fs-small-body);
  }
}

/* Main Styling  */
/* ======================= */
.layout-wrapper {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: 100vh;
}

.content-wrapper {
  max-width: 1000px;
  margin-inline: auto;
  padding: 3.2rem 1.6rem;
}

nav {
  padding: 1rem 2.4rem;
  /* border: 1px solid red; */
  background-color: white;
}

nav ul {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

nav ul li:first-child {
  position: absolute;
  top: -15px;
  z-index: 9999;
}

header {
  background-color: hsl(var(--clr-primary));
  padding: 4rem 1.6rem;
  position: relative;
  /* min-height: 120px; */
  /* overflow: hidden; */
  z-index: 1;
}
/* header::after {
  content: "";
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: absolute;
  background-color: hsl(var(--clr-accent));
  left: 40%;
  top: -30%;
  z-index: -1;
} */

.main-heading {
  color: white;
  font-size: 3.2rem;
  margin-inline: auto;
  max-width: max-content;
  text-align: center;
  line-height: 1.4;
  font-weight: 300;
}
main {
  background-color: hsl(var(--clr-neutral), 0.1);
  flex: 1 1 0%;
}

.loc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr));
  gap: 1.2rem;
}
.loc-card {
  background-color: white;
  padding: 2rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

/* .loc-card--content > *:not(:first-child) {
  margin-top: 1rem;
} */
.loc-card--content {
  flex-wrap: 1;
}
.loc-card--brands-wrapper {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
  /* border: 1px solid red; */
}
.loc-card--heading {
  /* border-bottom: 1px solid hsl(var(--clr-neutral), 0.1); */
  /* padding-bottom: 1rem; */
  margin-bottom: 0.4rem;
  font-size: 1.8rem;
  color: hsl(var(--clr-neutral));
}

.loc-card--brand {
  /* background-color: hsl(var(--clr-primary), 0.1); */
  /* border: 2px solid hsl(var(--clr-primary), 0.1); */
  box-shadow: 0px 0px 10px hsl(0, 0%, 0%, 0);
  border-radius: 0.8rem;
  padding: 0.2rem 0.2rem;
  width: 56px;
  height: 56px;
  /* aspect-ratio: 1; */
  transition: all 0.4s ease-in-out;
}
.loc-card--brand:hover {
  /* border: 1px solid hsl(var(--clr-primary)); */
  box-shadow: 5px 8px 10px hsl(0, 0%, 0%, 0.2);
}

.available-rest {
  font-size: 1.4rem;
  font-weight: 400;
  color: hsl(var(--clr-accent));
  font-weight: 500;
}
.ex-menu-btn {
  margin-top: auto;
}

hr {
  outline: hsl(var(--clr-neutral), 0.1);
  border: 1px solid hsl(var(--clr-neutral), 0.1);
}

footer {
  background-color: hsl(var(--clr-neutral));
  color: white;
  padding: 2rem 2.4rem;
  text-align: center;
}

.text-highlight {
  color: inherit;
  position: relative;
  font-weight: 500;
}
.text-highlight::before {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: hsl(var(--clr-accent));
  height: 4px;
  width: 100%;
}

.flag {
  display: inline-block;
  background-color: hsl(var(--clr-primary));
  padding: 6px 10px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  border-radius: 100px;
}

.fs-sm {
  font-size: 14px;
}

.text-secondary {
  color: hsl(var(--clr-neutral), 0.8);
}
.text-tertiary {
  color: hsl(var(--clr-neutral), 0.4);
}