:root {
  --dark-color: #262424;
  --light-dark-color: #3d3e42;
  --Primary-color: #ffc86b;
  --titles_color: #e84242;
  --work_area_color: #ffe569;
  --Navbar_tab_color: #00ebff;
}

/* Resetting default margin and padding for the entire page */
body {
  margin: 0;
  padding: 0;
  background-color: #e7f0ff;
}

/* Header Section Start */
header nav {
  background-color: var(--dark-color);
  padding: 10px 0px;
  border-bottom: 2px solid var(--Primary-color);
}
nav.fixed-top{z-index: 1;}

header nav .navbar_h1 {
  color: white;
  transition: all 0.2s ease-in-out 0s;
  user-select: none;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
}

header nav .navbar_h1:hover {
  color: var(--Primary-color);
  transition: all 0.2s ease-in-out 0s;
}

nav ul .nav-item {
  margin: 0px 20px;
}

nav ul li .nav-link {
  font-size: 18px;
  text-decoration: none;
  transition: all 0.4s ease-in-out 0s;
  color: white !important;
}

.navbar-light .navbar-toggler {
  background-color: white;
}
.nav-link:hover {
  transition: all 0.4s ease-in-out 0s;
  color: var(--Primary-color) !important;
}

.nav-link::after {
  content: "";
  display: block;
  width: 0px;
  height: 2px;
  background: var(--Primary-color);
  transition: width 0.3s ease 0s;
}

.nav-link:hover::after {
  width: 100%;
  transition: width 0.3s ease 0s;
}
/* Header section End */


/* modal */
.blocker{z-index: 2;}
.modal a.close-modal{top: 1.5px;right: 2.5px;}
.modal_restaurant_image{width: 100%;border: 4px solid white;}
.modal_title{color: #f89424;font-size: 30px;}
.opening_hour{text-align: center;margin: 20px 0px;}

.opening_hour:after{content: "";
  height: 3px;
  width: 15%;
  display: block;
  margin: auto;
  background-color: #262424;}
.modal_li{
    list-style: none;
    background: #F89424;
    display: block;
    margin: 10px;
    text-align: center;
    font-size: 18px;
    color: white;
    border-radius: 20px;
    padding: 5px;
}
/* ================================== */

/* Main Section Start */
#main_section {
  margin-top: 85px;
}
/* Main Section End */

/* ======================= */

/* Form Section Start*/
.form_input_section {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styling for form elements within the form input section */
.form_input_section form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 474px;
  width: 100%;
  border: 2px solid #ffffff;
  padding: 10px 20px;
  border-radius: 53px;
  margin-top: 45px;
  background: linear-gradient(45deg, #f89424 0%, #ed1c46 43%, #18abb5 100%);
  box-shadow: 5px 6px 21px 3px rgba(0, 0, 0, 0.3);
}

.form_field {
  width: 100%;
}

.form_field label {
  text-align: center;
  display: block;
  font-size: 30px;
  color: white;
}

/* Styling for form button */
.form_field button {
  margin: 20px auto;
  display: block;
  background: #15b9d4;
  width: 50%;
  color: white;
  font-weight: 600;
}
.form_field button:hover {
  color: #15b9d4;
  background: white;
}

/* Form Section End*/
/* ================================== */

/* Map Section Start */
.map-section {
  margin-top: 30px;
}
/* Styling for map containers */
#map,
#searchmap {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 500px;
  border: 2px solid white;
}

/* Styling for Mapbox popups */
.mapboxgl-popup {
  max-width: 400px;
  font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* Styling for the main icon */
.main_icon {
  width: 25%;
  cursor: pointer;
}
/* Map Section End */
/* =============================================== */

/* Restaurant section Start */

/* Styling for the restaurant section */
.restaurant_section {
  padding: 60px 0;
}

.rest_title {
  text-align: center;
  margin-bottom: 40px;
}
/* Styling for restaurant cards */
.restaurant_card {
  border: 1px solid #cfcfcf;
  margin: 10px 0;
  background: #444444;
  box-shadow: 5px 6px 21px 3px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  color: white;
}
.rest-row .restaurant_card{
    height: 710px;
}
.restaurant_left_side {
  padding: 20px;
}
.restaurant_name {
  font-size: 40px;
  color: #f89424;
}
.restaurant_description {
  font-size: 18px;
}
.restaurant_ul {
  margin: 0px;
  padding: 0px;
}
.restaurant_ul li {
  display: inline-block;
  margin-right: 30px;
  text-decoration: underline;
  font-size: 17px;
}
.restaurant_address {
  padding-top: 13px;
}
.restaurant_ul a {
  color: white;
}

.resturant_feedback_Section button {
  background: white;
  color: #444444 !important;
  margin: 10px 0px;
  width: 100%;
}
.restaurant_right_side {
  padding: 10px;
}

/* Styling for images within restaurant cards */
.restaurant_card img {
  width: 100%;
  border: 4px solid white;
  border-radius: 10px;
}
.rest_list_img{height: 250px;}

/* Styling for the body of restaurant cards */
.restaurant_body {
  padding: 20px 10px;
}

/* Styling for text within the body of restaurant cards */
.restaurant_body h3 {
}
.restaurant_body p {
  margin: 0; /* Remove default margin for better spacing */
  padding-top: 10px;
  padding-bottom: 10px;
}
.rest_ul {
  padding: 15px;
}
.rest_ul a {
  color: white;
}
/* Styling for input within the body of restaurant cards */
.restaurant_body input {
  width: 100%;
  border: 1px solid #cfcfcf;
}
#FeedBack_text {
  width: 100%;
  height: 100px;
  resize: none;
  margin-top: 10px;
}

/* Styling for feedback text */
.feedback_text {
  font-weight: bold;
}
.restaurant_body button {
  background: #262424;
  color: white !important;
  margin: 10px 0px;
  width: 100%;
}

/* Restaurant section End */
/* ======================================= */

/* Second Page Restaurant Css Start */
.restaurants_list {
  margin-top: 72px;
}
.restaurants_list h2 {
  text-align: center;
  font-size: 40px;
}
.restaurants_list h2::after {
  content: "";
  height: 2px;
  width: 15%;
  display: block;
  margin: auto;
  background-color: #262424;
}
/* Second Page Restaurant Css End */

/* =================== Media Queries ========================== */


@media screen and (max-width:1200px){
  .rest-row .restaurant_card{height:auto}
  
}
/* Max width 992 */
@media screen and (max-width: 992px) {
  .main_icon {
    width: 35%;
  }
.rest-row .restaurant_card{height:auto}
  /*Navbar Section 992px Start  */
  nav ul {
    padding-top: 20px;
  }

  nav ul li .nav-link {
    text-align: center;
  }

  nav ul li .nav-link::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: rgb(228, 242, 254);
  }

  nav ul li .nav-link:hover::after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--Primary-color);
  }
  /*Navbar Section 992px end  */
}

/* max width 767 */
@media screen and (max-width: 992px) {
  .main_icon {
    width: 45%;
  }
}