body {
  font-family: "Open Sans", sans-serif;
  font-family: "Pacifico", cursive;
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  background-color: #fbfbfb;
}

/* ----------------- Navbar Section ----------------- */
#navbar-sec {
  border-bottom: solid 1px #6f6f6f;
  background-color: #252a34;
}

#navbar-sec .website-logo {
  /* color: #f19191; */
  /* color: rgb(255, 148, 148); */
  color: #f80;
  font-weight: bolder;
  padding-left: 2px;
}

#navbar-sec .capital-thai-one-logo {
  width: 45px;
}

#navbar-sec .header-nav-link {
  color: #cccccc;
  font-weight: 500;
}

#navbar-sec .clock-icon {
  width: 25px;
  filter: brightness(0) saturate(100%) invert(61%) sepia(37%) saturate(3270%)
    hue-rotate(318deg) brightness(112%) contrast(103%);
}

#navbar-sec .nav-link-menu span {
  border-bottom: 1px solid #f80;
}

#navbar-sec .header-nav-link:hover {
  color: #f80;
  text-decoration: none;
}

#navbar-sec .orderOnlineBTN {
  color: #f6f6f6;
  background-color: #f80;
  border-radius: 18px;
  border: solid 1px #f6f6f6;
  padding: 6px;
  text-decoration: none;
}

#navbar-sec .orderOnlineBTN:hover {
  color: #ffffff;
  font-weight: 500;
}

#navbar-sec .business-hour_headingText {
  font-weight: bolder;
}

#navbar-sec .hours-div {
  font-size: 16px;
  text-align: center;
  /* font-weight: 600; */
}

/* ----------------- Banner Section ----------------- */
#banner-sec {
  color: #f6f6f6;
}

#banner-sec .banner-sec_navbar {
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#banner-sec .banner-sec_main-div {
  height: 85vh;
  background-image: linear-gradient(
      to right bottom,
      rgba(66, 66, 66, 0.2),
      rgb(0, 0, 0, 0.7)
    ),
    url(../images/CapitalThaiOne-bg-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  position: relative;
}

#banner-sec .banner-sec_main-div_heading-text {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  backface-visibility: hidden;
}

#banner-sec .banner-sec_main-div_Ons-Thai-Award {
  animation: moveInLeft 2s ease-in-out;
  text-align: center;
  display: block;
  position: relative;
  margin-bottom: 65px;
}

#banner-sec .award-logo {
  position: absolute;
  /* top: 50%; */
  /* top: 80%; */
  left: 50%;
  transform: translate(-50%, -50%);
}

#banner-sec .banner-sec_main-div_heading-text_primary {
  display: block;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 2px;
  animation: moveInLeft 2s ease-in-out;
}

#banner-sec .banner-sec_main-div_heading-text_secondary {
  color: #dddddd;
  display: block;
  animation: moveInRight;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

#banner-sec .banner-sec_main-div_heading-text_secondary a {
  border: solid 1px white;
  border-radius: 18px;
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-99px);
  }
  80% {
    transform: translateX(9px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(99px);
  }
  80% {
    transform: translateX(-9px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

#banner-sec .btn {
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 36px;
  display: inline-block;
  transition: all 0.5s;
  color: #f6f6f6;
  border: 1px solid #eeeeee;
  border-radius: 27px;
  font-weight: 500;
  margin-top: 14px;
  /* margin: top right bottom left */
  margin: 14px 5px 0px 5px;
  background-color: #f80;
}

#banner-sec .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  font-weight: bolder;
  /* background-color: #ff9494; */
  background-color: rgb(236, 126, 0);
}

#banner-sec .btn-animated {
  animation: moveInButton 3s;
}

@keyframes moveInButton {
  /* first stage */
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  /* final stage */
  100% {
    opacity: 1;
    /* Come back to the original position */
    transform: translateX(0);
  }
}

/* -------------- Online Ordering Section -------------- */
#online-ordering-sec {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

#online-ordering-sec .food-app-icon {
  display: inline-block;
  margin: 0px 4px 0px 4px;
  font-size: 20px;
  border: 1px solid white;
  border-radius: 30px;
  text-decoration: none;
  margin-top: 15px;
}

#online-ordering-sec .uberEats-btn {
  color: white;
  background-color: black;
}

#online-ordering-sec .eatWord {
  color: #a3de83;
}

#online-ordering-sec .uberEats-btn:hover {
  color: grey;
  font-weight: 500;
}

#online-ordering-sec .beyond-menu-btn {
  color: #f95c00;
  font-weight: 500;
  border: 1px solid #f95c00;
}

#online-ordering-sec .beyond-menu-btn:hover {
  font-weight: 800;
}

#online-ordering-sec .doorDash-btn {
  background-color: #eeeeee;
  color: #ff2e63;
  border: 1px solid #eeeeee;
}

#online-ordering-sec .doorDash-btn:hover {
  text-decoration: none;
  color: #ff668c;
  background-color: #f9f9f9;
  font-weight: 500;
}

#online-ordering-sec .grubhub-btn {
  color: #f95c00;
  font-weight: 900;
  background-color: #fcfcfc;
  border: 1px solid #f95c00;
}

#online-ordering-sec .grubhub-btn:hover {
  background-color: #ebebeb;
  border: 1px solid #f95c00;
}

#online-ordering-sec .food-allergy-notice {
  margin-top: 20px;
}

#online-ordering-sec .online-ordering-sec_customer-notification {
  color: #222831;
  margin-top: 20px;
  font-weight: 500;
  letter-spacing: 1px;
}
/* -------------- Menu Section -------------- */
.menu-sec_menu-div {
  height: 30vh;
  background-image: linear-gradient(
      to right bottom,
      rgba(128, 128, 128, 0.1),
      rgb(0, 0, 0, 0.4)
    ),
    url(../images/CapitalThaiOne-bg-2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: bottom;
  background-attachment: fixed;
  border-top: 1px solid #c9c9c9;
}

.menu-section_headingText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.menu-sec_headingText-main {
  text-transform: capitalize;
  font-family: "Pacifico", cursive;
  color: white;
  font-size: 47px;
}

.menu-sec_foodTitle {
  text-transform: uppercase;
  color: white;
  font-size: 22px;
}

/* -------------- menu-list Section -------------- */
#menu-list-sec {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0px;
}

.menu-list-th {
  padding: 0px;
  margin: 0px;
}

.menu-sec_seperator {
  margin: 10px auto 0 auto;
  width: 9%;
  background: linear-gradient(to right, red, #f57c48);
  height: 2px;
  opacity: 0.2;
}

.menu-list-sec_btn {
  background-color: transparent;
  border: none;
  text-transform: uppercase;
  font-weight: 600;
  color: #222831;
}

.menu-list-sec_btn:nth-child(1) {
  color: #f38181;
}

.menu-list-sec_btn:hover {
  color: #f38181;
}

.download-menu-link {
  text-decoration: none;
  color: #8785a2;
  font-weight: 500;
}

.download-menu-link:hover {
  color: #222831;
  text-decoration: underline;
}

#close-btn_for-menu-list .close-btn_menu-list-css {
  padding: 5px 17px 5px 17px;
  background-color: #222831;
  color: #eeeeee;
  border-radius: 18px;
  font-weight: 500;
  margin-top: 15px;
  margin-bottom: 7px;
}

#close-btn_for-menu-list .close-btn_menu-list-css:hover {
  text-transform: none;
  color: #f36223;
}

.disappeared {
  visibility: hidden;
}
.appeared {
  visibility: visible;
}

.textInAnimated {
  /* Animation */
  animation: moveInText;
  animation-duration: 2s;
}

@keyframes moveInText {
  /* first stage */
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }

  /* final stage */
  100% {
    opacity: 1;
    /* Come back to the original position */
    transform: translateX(0);
  }
}

/* --- menu-list Section: picture css settings -- */
.ThaiFood-picture-div {
  margin-top: 15px;
}
.thFood_pictures {
  padding: 5px;
}
/* -------------- Footer Section -------------- */
#footer-sec {
  text-align: center;
  /* color: #f6f6f6; */
  /* color: #6f6f6f; */
  color: #eeeeee;
  background-color: #222831;
  padding: 0px;
  margin: 0px;
}

#footer-sec .contact_phone-number,
#footer-sec .contact_email-address {
  text-decoration: none;
  text-transform: none;
  color: #f38181;
  font-weight: 600;
}

#footer-sec h5 {
  font-size: 25px;
  /* color: #eeeeee; */
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 15px;
  color: #f80;
}

#footer-sec .map-icon,
#footer-sec .comment-icon,
#footer-sec .shop-icon {
  width: 30px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2367%)
    hue-rotate(333deg) brightness(114%) contrast(87%);
}

#footer-sec .star-icon {
  width: 20px;
  filter: brightness(0) saturate(100%) invert(88%) sepia(45%) saturate(526%)
    hue-rotate(356deg) brightness(101%) contrast(96%);
}

#footer-sec .google-headingText {
  color: #525964;
  margin: 0px;
}

#footer-sec .customer-review-div {
  margin-bottom: 40px;
}

#footer-sec .customer-review-div p {
  font-size: 14px;
}

#footer-sec .facebook-icon {
  width: 30px;
  filter: brightness(0) saturate(100%) invert(46%) sepia(67%) saturate(7493%)
    hue-rotate(212deg) brightness(99%) contrast(106%);
}

#footer-sec .facebook-link-css {
  text-decoration: none;
  font-weight: 500;
  font-size: 20px;
  color: #c9c9c9;
}

#footer-sec .facebook-link-css:hover {
  color: #eeeeee;
}

#footer-sec .company-title-div {
  padding-bottom: 25px;
}
/* ----- top-Btn ----- */
#top-Btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: 1px solid #c9c9c9;
  outline: none;
  background-color: #ff7474;
  color: white;
  cursor: pointer;
  padding: 7px 11px;
  border-radius: 17px;
}

#top-Btn:hover {
  text-transform: none;
  color: #eeeeee;
}