@font-face {
    font-family: Raleway;
    src: url(/fonts/Raleway-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url(/fonts/Montserrat-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: Raleway-Bold;
    src: url(/fonts/Raleway-SemiBold.ttf) format('truetype');
}

h2 {
    font-family: "Raleway-Bold";
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
}

h4 {
    margin-top: 35px;
    font-family: "Raleway-Bold";
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    padding: 0%;
}

.city-container {
    display: flex;
    align-items: center;
    min-width: 80px; /* Set the fixed width you desire */
    justify-content: center; /* Center the content */
}

body,
html {
    touch-action: pan-x pan-y;
    height: 100%;
    margin: 0;
}

body {
    overflow-x: hidden;
}



p {
    margin-block-end: 10px;
    font-size: 14px;
}





.top-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: #FFF;
    height: 80px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (min-width: 640px) { /* Adjust breakpoint as needed */
    .top-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    body {
        padding-top: 80px;
    }
}



@media (max-width: 640px) { /* Adjust breakpoint as needed */
    .top-panel {
        padding: 0; /* Remove left and right padding */
    }
}

.logo-container {
    display: flex;
    align-items: center;
    flex: 1; /* Adjust this as needed */
    padding-left: 20px;
}

.logo-container img.logo {
    height: auto;
    width: auto; /* Let it be determined by the image's intrinsic size */
    width: 80px;
    height: 40px; /* Adjust this to fit your logo's height */
}

.footer img.logo {
    height: auto;
    width: auto; /* Let it be determined by the image's intrinsic size */
    width: 80px;
    height: 40px; /* Adjust this to fit your logo's height */
}

footer, footer * {
  box-sizing: content-box;
}

@media (max-width: 640px) {
    .logo-container img.logo {
        max-width: 40px;
    }

    .footer img.logo {
        max-width: 40px;
    }
}



.nav-items-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* This ensures items are spaced out evenly
    flex-grow: 1; /* Take available space */
    margin-left: 10px; /* Adjust as necessary */
    margin-right: 10px; /* To give space on the right */
}

.order-nav-button {
    margin-left: auto; /* This pushes the order button to the right */
}

.nav-item {
    display: flex;
    align-items: center;
    margin-right: 20px; /* Space between items */
}

.nav-item:last-child {
    margin-right: 0;
}

.social-link img.menuImage {
    width: 100%; /* This will make the image take up 100% of its parent's width */
    height: auto; /* This maintains the aspect ratio of the image */
    min-width: 20px; /* Set a minimum width */
    max-width: 40px; /* Set a maximum width for larger screens */
    max-height: 40px; /* Set a maximum height to maintain aspect ratio */
    object-fit: contain;
}


.social-container {
    display: flex;
    justify-content: center; /* Center the social links */
    align-items: center;
    width: auto; /* Adjust this to a fixed width if needed */
    flex-shrink: 0; /* Prevents the container from shrinking */
}

.nav-item.social-container a {
    border-bottom-width: 0px;
}

.user-profile-container {
    position: relative;
    display: inline-block;
}

.user-options {
    height: auto;
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    box-sizing: border-box;
    list-style: none; /* Removes default list styling */
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes default padding */
    left: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.user-options li {
    display: block; /* Makes li take the full width */
    width: 100%; /* Ensures each li takes full width of ul */
    padding: 10px; /* Adds some padding inside each li */
    box-sizing: border-box; /* Includes padding in the width calculation */
    cursor: pointer; /* Changes cursor to indicate it's clickable */
    border-bottom: 1px solid #ccc; /* Optional: adds a separator line */
}

.user-options li:last-child {
    border-bottom: none; /* Removes bottom border for the last item */
}

.user-options li:hover {
    background-color: #f1f1f1;
}


.order-nav-button {
    display: flex;
    justify-content: center; /* Center the social links */
    align-items: center;
    width: auto; /* Adjust this to a fixed width if needed */
    flex-shrink: 0; /* Prevents the container from shrinking */
}

.social-link {
    margin: 0 2px; /* Adjust the left and right margins as needed */
    display: inline-flex; /* This will align the svg/img properly inside the anchor */
}

.language-selector {
    display: flex;
    align-items: center;
    position: relative;
}

.language-container {
    position: relative; /* Context for absolute positioning */
    cursor: pointer;
}


.language-container, .selected-language {
    position: relative; /* This makes it a positioning context for the absolute children */
}

.selected-language img.flag-icon {
    width: 24px; /* Fixed width for flag icons */
    height: 16px; /* Fixed height for flag icons */
    object-fit: cover; /* Ensure the image covers the area */
}


.carousel-inner {
    height: auto;
}

.carousel-item img {
    max-width: 100%;
    max-height: 450px;
    height: auto;
    object-fit: contain; /* Ensure the whole image is visible */
    border-radius: 15px; /* Adjust as needed for roundness */
    margin: auto; /* Center the image in the carousel-item */
}

@media (max-width: 640px) {
    .carousel-item img {
        max-height: 200px; /* Maximum height for mobile */
    }
}


.icon-profile {
    width: 24px;
    height: 16px;
}



.user-options li span.icon-account,
.user-options li span.icon-logout {
    display: inline-block;
    width: 16px; /* Adjust based on icon size */
    height: 16px; /* Adjust based on icon size */
    margin-right: 8px; /* Space between icon and text */
    vertical-align: middle; /* Aligns icon with text */
}

.user-options li span.icon-account {
    background-image: url('/images/profile.svg');
    background-size: cover;
}

.user-options li span.icon-logout {
    background-image: url('/images/logout.svg');
    background-size: cover;
}


.language-options {
    display: none;
    position: absolute;
    top: 100%; /* Position below the selected language */
    left: 0; /* Align with the left edge of the container */
    right: 0;
    padding: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 10;
    width: max-content; /* Fit content width */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* Existing styles */
    height: auto;
    top: 100%;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.language-options.show {
    display: block;
    opacity: 1;
    visibility: visible;
}

.language-options li {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    cursor: pointer; /* Indicates it's clickable */
}

.language-options li:hover {
    background-color: #f2f2f2; /* Hover effect */
}

.language-options li img.flag-icon {
    width: 20px; /* Adjust as needed */
    height: auto;
    margin-right: 5px; /* Space between icon and text */
}

.language-container:hover {
    background-color: #f8f8f8; /* Slightly change background on hover */
}


.city-name {
    font-size: 16px; /* Default font size */
}

#makeOrderButton {
    padding: 10px 20px; /* Adjust as needed */
    font-size: 14px; /* Adjust as needed */
    float: right;
}

/* Smaller screens */
@media (max-width: 640px) {
    .city-name {
        font-size: 12px; /* Smaller font size for small screens */
    }

    #makeOrderButton {
        padding: 5px 10px; /* Smaller padding */
        font-size: 10px; /* Smaller font size */
        display: none;
        /* any other adjustments */
    }
}

/* Larger screens */
@media (min-width: 1200px) {
    .city-name {
        font-size: 14px; /* Larger font size for large screens */
    }
    #makeOrderButton {
        padding: 10px 20px; /* Smaller padding */
        font-size: 14px; /* Smaller font size */
        /* any other adjustments */
    }
}



ul.gf-ul {
    margin: 0;
    padding: 4px;
}

ul.gf-ul li {
    display: inline-block;
    padding-right: 15px;
}


body {
    font-family: 'Raleway', sans-serif;
}


.iframe {
    border-radius: 25px;
}

.order-button > a {
    color: white !important;
    text-decoration: none;
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
}

.order-button, .makeOrderButton1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.hidden {
    display: none;
}

.form-container {
    width: 50%;
}

.menu-widget {
    width: 100%;
}

.footer-container {
    display: flex;
    flex-direction: row;
    margin-left: 19.5%;
}

.social {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}


.description-text {
    margin-top: 127px;
    margin-bottom: 124px;
    margin-left: 71px;
    margin-right: 20px;
}


.wrapper {
    margin-top: 64px;
    width: 100vw;
    display: flex;
    justify-content: center;
}

.activated {
    color: black;
}

.menu_example {
    margin-top: 27px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.meal_card {
    display: flex;
    width: 31%;
    flex-direction: column;
    margin-right: 30px;
}

.meal_name {
    margin-top: 21px;
    color: #b5b5b5;
    font-family: "Raleway";
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-decoration: none;
    color: #b5b5b5 !important;
}

.meal-image {
    height: 173px;
    width: 235px;
}

.dish_name {
    margin-top: 11px;
    font-family: "Raleway";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    color: black !important;
}

.ration_details {
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 30px;
}

.custom-radio {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 270px;
    height: 50px;
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    margin: 10px;
    box-shadow: 0px 1px 11.2px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.form-order {
    margin-top: 143px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 170px;
    height: 50px;
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    background-color: #373737;
    color: white;
    cursor: pointer;
}

.form-full {
    margin-top: 100px;
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form-control {
    border: 3px solid #373737;
}

.form-select {
    border: 3px solid #373737;
}

.smaller {
    width: 170px;
    height: 50px;
}

.submit {
    background-color: #373737;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    height: 50px;
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    cursor: pointer;
    border: none;
}

.custom-radio-input {
  width: 20px; /* Change to your preferred size */
  height: 20px; /* Change to your preferred size */
}

.custom-radio-label {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0 10px; /* Adds 10px space on left and right */
}


.meal-image {
    width: 100%;
    height: auto;
}



.custom-radio input[type="radio"] {
    display: none;
}

.custom-radio input[type="radio"]:checked + label {
    background: #373737;
    color: white;
}

.info-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    flex-direction: row;
    margin-right: 40px;
}

.location {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
}

.header-info {
    color: black;
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.order-button {
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #373737;
    width: 130px;
    height: 40px;
    margin-top: 20px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

.order-button > a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
}

.btn-title {
    text-decoration: none;
    color: white;
}

.nav-link {
    color: black;
    text-decoration: none;
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.link-footer {
    color: white !important;
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    text-transform: uppercase;
    text-decoration: none;
}

#days {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #b5b5b5;
    cursor: pointer;
    flex-wrap: nowrap;
}

#price {
    margin-top: 46px;
    font-family: "Raleway";
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    display: flex;
    align-items: flex-end;
    color: #000000;
}

#form-buttons {
    display: inline;
}

#nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}

#logo-navigation {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}

#nav-links {
    display: flex;
    flex-direction: row;
    margin-left: 60px;
}

#links-footer {
    display: flex;
    flex-direction: column;
    margin-left: 60px;
}

#info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

#about {
    width: 81vw;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#background {
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("/images/food-cover.png");
    display: flex;
    width: 73%;
    height: 846px;
    position: relative;
    z-index: 1;
}



#description {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    width: 770px;
    background-color: white;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
    z-index: 3;
}



#desc-container {
    width: 26%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}




#contacts {
    margin-left: 19%;
    margin-bottom: 64px;
    margin-top: 64px;
    width: 30%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

#contacts-info {
    align-self: center;
    display: flex;
    display: flex;
    flex-direction: column;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    justify-content: center;
    margin-bottom: auto;
    margin-left: 10px;
    margin-top: auto;
}

#contacts-info > p {
    margin-top: 2px; /* Отступ сверху */
    margin-bottom: 2px;
}


@media (max-width: 640px) { /* Adjust breakpoint as needed */
    header {
        padding: 0% 0%;
    }
}



.innerdiv {
    padding-top: 40px;
    margin-bottom: 80px;
}

.outerdiv {
    margin: 0 auto;
    padding: 0% 20%;
}

footer {
    background-color: #373737; /* Your desired background color */
    min-height: 80px; /* Or any appropriate minimum height */
    padding: 0% 5%; /* Adjust as needed */
    color: white; /* Adjust text color as needed */

    box-sizing: content-box; /* Reset to default box-sizing */
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    flex-direction: column; /* Stack elements vertically */
    text-align: center; /* Center-align text */
}

footer::after {
    content: "";
    display: table;
    clear: both;
}

#logo {
    height: 40px;
    margin: 20px 0px;
}


.makeOrderButton1 {
    background: #373737;
    border-radius: 4px;
    border: none;
    color: white;
    font-weight: 500;
    padding: 10px 20px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}

#makeOrderButtonFooter {
    background: white;
    border-radius: 4px;
    border: none;
    color: #373737;
    font-weight: 500;
    padding: 10px 20px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}

.language-selector {
    padding-top: 5px;
    margin: 10px 0;
    text-align: center; /* Center the dropdown if necessary */
}

.language-selector select {
    background: white;
    border-radius: 4px;
    border: none; /* Remove default border */
    color: #373737;
    font-weight: 500;
    padding: 10px 20px;
    -webkit-appearance: none; /* For custom arrow and removing default styling */
    -moz-appearance: none;
    appearance: none;
    cursor: pointer; /* Cursor indicates it's clickable */
    font-size: 16px; /* Adjust font size for readability */
    outline: none; /* Remove default focus outline */

    /* Custom arrow */
/*    background-image: url('/path-to-your-custom-arrow.svg'); /* Path to your custom arrow image */
    background-repeat: no-repeat;
    background-position: right 15px center; /* Adjust arrow position */
    background-size: 12px; /* Size of the arrow image */
}

/* Hover and focus styles */
.language-selector select:hover,
.language-selector select:focus {
    border: none;
    outline: none;
}


.menuButton {
    float: right;
    border-bottom-style: none;
}

.menuImage {
    width: 40px;
    height: 40px;
}

a {
    text-decoration: none;
    border-bottom-width: 0.5px; /* Толщина линии внизу */
    border-bottom-style: solid; /* Стиль линии внизу */
    border-bottom-color: rgba(55, 55, 55, 0.25); /* Цвет линии внизу */
}

ul.gf-ul {
    padding: 0;
    list-style-type: none;
    float: right;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    height: 100px;
}


#desc-container-advantage {
    max-width: 800px; /* Maximum width */
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Padding around the container */
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

#description-advantage {
    background-color: white; /* White background for the text */
    border-radius: 15px; /* Rounded corners */
    padding: 30px; /* Padding inside the box */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.advantages-text h2 {
    color: #373737; /* Dark text for heading */
    margin-bottom: 20px; /* Space below the heading */
}

.advantage {
    display: flex; /* Align icon and text in a row */
    align-items: left; /* Center items vertically */
    justify-content: left; /* Center items horizontally */
    margin-bottom: 20px; /* Space between each advantage */
}


.advantage p {
    color: #555; /* Dark grey color for the text */
    font-size: 16px; /* Size of the text */
    margin: 0; /* Remove default margin */
}


ul li a:hover:not(.active) {
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

.header-container ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  padding: 0;
}

.header-container ul li {
  margin: 0 0px; /* adjust as needed */
}

.badge {
    margin: 4px; /* Adding margin to create space around the badge */
    background-color: #CC1111;
}


@media screen and (max-width: 640px) {

  .header-container {
    flex-direction: row;
    justify-content: space-around; /* evenly distribute items along the horizontal axis */
  }

  #logo {
    margin-right: 10px; /* adjust as needed */
    margin-left: 10px;
    width: 50%; /* Adjust according to your design */
  }

  .outerdiv {
    padding-left: 10%;
    padding-right: 10%;
  }

  .nav-item {
    margin-right: 10px;
  }

  .header-container ul {
    flex-direction: row;
    align-items: center;
    padding: 0;
  }

    h2 {
        font-size: 24px;
    }

    h4 {
        font-size: 20px;
        margin-top: 20px;
    }

    p {
        font-size: 13px;
        margin-block-end: 8px;
    }

  #menu {
    width: 100%;
  }

  #logo {
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    max-height: 60px;
    height: auto;
  }

  .menu_example {
    flex-direction: column;
  }

  .meal_card {
    width: 100%;
  }


  ul.gf-ul {
    float: initial;
    height: auto;
    margin-bottom: 30px;
  }

  #makeOrderButtonFooter {
    float: right;
  }

  #newdiv1 {
    padding: 0% 5%;
  }

  #newdiv {
    height: 100%;
    padding-top: 10px;
  }

  /* Newly added styles for mobile */
  .custom-radio {
    margin: 5px;
  }

  .custom-radio-label {
    font-size: 14px; /* Reduce font-size for mobile devices */
    padding: 0 5px; /* Reduce space on left and right for mobile */
  }

  .ration_details {
    display: flex;
    flex-direction: column; /* Stack the elements vertically */
    justify-content: center; /* Center along the main axis */
    align-items: center; /* Center along the cross axis */
  }


  #form-full {
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 0 10px;
    }

  .form-order {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .innerdiv {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 0px;
    }


.text {
    display: block;
    position: relative;
    z-index: 1;
}


/*  .form-order {
    margin-top: 143px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;

    height: 50px;
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    background-color: #373737;
    color: white;
    cursor: pointer;
}*/

    #form-full .form-control {
      width: 100%;
    }

    .input-group {
      flex-wrap: nowrap;
    }

  /* To control the layout of the input group */
  .input-group {
    flex-wrap: nowrap;
  }

  /* To ensure select and input share the available space equally */
  .input-group .form-select,
  .input-group .form-control {
    flex: 1;
  }

  /* To provide some spacing between the select and the input */
  .input-group .form-select {
    margin-right: 10px;
  }

  /* To control the layout of the form buttons */
  #form-buttons {
    width: 100%;
    justify-content: center;
  }

  footer {
    padding-bottom: 5px;
    text-align: center;
  }


    footer ul {
        /* Adjust the list styling */
        list-style-type: none;
        padding: 0;
    }

    footer ul li {
        /* Adjust list item styling */
        margin-bottom: 10px; /* Add space between items */
    }

    .menuLink {
        /* Style for the menu links */
        display: inline-block; /* Or 'block' for a vertical layout */
    }

    .menuLink a {
        /* Style for the anchor tags */
        color: white; /* or any color */
        text-decoration: none;
    }

    .menuImage {
        /* Resize the social media icons */
        width: 30px; /* Example size, adjust as needed */
        height: auto;
    }
}