:root {
  --primary: #35ffd7;
  --white: #ffffff;
  --black: #000000;
  --secondary: #00bf99;
}
.hero_img {
  position: absolute;
  top: 0;
  left: -15%;
  z-index: 99;
}
.hero {
  background-image: url("./assets/Shared/hero_bg.webp");
  padding: 220px 0 100px;
  background-blend-mode: hard-light;
  margin-top: -160px;
  background-size: contain;
}
.hero_container {
  margin-left: 423px;
}
.hero_heading,
.about_heading {
  font-size: 80px;
  line-height: 83px;
  font-style: italic;
  color: var(--secondary);
  font-weight: 500;
}
.hero_desc,
.about_desc {
  margin: 22px 0 40px;
  font-size: 22px;
}
.hero_link {
  font-size: 24px;
  font-weight: 700;
  color: var(--secondary);
  padding: 16px 24px;
  background-color: var(--white);
  border-radius: 15px;
}
.hero_link:hover {
  background-color: #ecffda;
}
.card_container {
  display: flex;
  gap: 100px 58px;
  flex-wrap: wrap;
}
.card,
.menu_card {
  width: calc(25% - 50px);
}
.card_section {
  padding: 120px 0 50px;
  background-color: var(--white);
}
.card_inner,
.menu_card_inner {
  margin-left: 34px;
  border: 3px solid var(--primary);
  border-radius: 24px;
  position: relative;
  padding: 16px;
  width: 100%;
}
.card_img,
.menu_card_img {
  position: absolute;
  border-radius: 100%;
  top: 0;
  left: -34px;
  transform: translateY(-50%);
}
.card_menu_price {
  text-align: right;
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 55px;
}
.card_menu_name {
  font-size: 20px;
  text-align: center;
  font-family: "Mulish", sans-serif;
}
.about_section {
  background-image: url(./assets/Shared/ex_bg.webp);
  padding: 100px 0 50px;
}
.desc_section {
  background-image: url(./assets/Shared/ex_bg.webp);
  padding: 100px 0;
}
.about_container {
  display: flex;
  align-items: center;
  gap: 48px;
}

.about_img {
  width: 100%;
  flex: 1;
  max-width: 400px;
  border-radius: 0 100px 0 100px;
}
.menu_cards {
  padding: 50px 0;
  background-color: var(--white);
}
.menu_card_heading {
  font-size: 80px;
  font-weight: 700;
  font-style: italic;
  text-align: center;
}
.menus_card_conainer {
  margin-top: 100px;
  display: flex;
  gap: 100px 58px;
  flex-wrap: wrap;
}
.menu_card_inner {
  background-color: var(--primary);
}
.desc_heading {
  text-align: center;
  text-wrap: balance;
  font-size: 42px;
  margin-bottom: 30px;
}
.desc_para {
  font-size: 20px;
  font-weight: 500;
}
.desc_para:not(:last-child) {
  margin-bottom: 20px;
}
.desc_para a {
  color: var(--secondary);
  font-weight: 700;
}
.desc_para a:hover {
  color: var(--black);
}
.contact_section {
  padding: 50px 0;
  background-color: var(--secondary);
}
.contact_container {
  display: flex;
  gap: 56px;
  align-items: center;
}
.map {
  width: 100%;
  min-height: 570px;
  border-radius: 20px;
}
.contact_text {
  width: 100%;
}
.contact_heading_top {
  font-size: 32px;
  color: var(--primary);
  font-style: italic;
}
.contact_heading {
  font-size: 48px;
  color: var(--white);
  font-weight: 400;
  margin-bottom: 50px;
  font-style: italic;
}
.contact_info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.info_title {
  font-size: 32px;
  color: var(--white);
  font-weight: 400;
  font-style: italic;
}
.info_desc {
  color: var(--white);
}
.view_all {
  margin-top: 50px;
  display: block;
  text-align: center;
  font-weight: 600;
  color: var(--secondary);
  text-decoration: underline;
}
.view_all:hover {
  color: var(--black);
}

.menu_page {
  padding: 50px 0;
  background-image: url("./assets/Shared/ex_bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
}
.menu_category {
  font-size: 64px;
  font-style: italic;
  color: var(--secondary);
  text-align: center;
}
.menus {
  margin-top: 30px;
  border: 2px solid var(--primary);
  list-style: none;
  padding: 40px;
  border-radius: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px 56px;
  position: relative;
}
.menu {
  width: calc(50% - 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.m_name,
.m_price {
  font-size: 16px;
  font-weight: 500;
  color: #392b2b;
}
.border_s {
  flex: 1;
  border-bottom: 1px dashed #392b2b;
  min-width: 50px;
}
.hggh {
  margin-top: 50px;
}
.menus::before {
  content: "";
  height: calc(100% - 80px);
  width: 2px;
  background-color: var(--primary);
  position: absolute;
  top: 40px;
  left: 50%;
}
.menu_category {
  font-size: 50px;
}