@font-face {
    font-family: 'Cocon Next Arabic';
    src: url('/front/fonts/Cocon® Next Arabic-Bold.otf') format('opentype');
}
body{
    overflow-x: hidden !important;
}
/* Global Styles */
*:not(i) {
    font-family: 'Cocon Next Arabic', sans-serif !important;
    scroll-behavior: smooth;
}
a {
    color: white;
}
.h-200px{
    height: 200px;
}
/* Navbar styles */
.navbar {
    background: linear-gradient(0deg, #422b1a, #422b1a), #2b2928;
    border-radius: 20px;
    padding: 0;
    margin: 2rem 40px -135px;
    z-index: 13;
    /* position: absolute; */
    /* width: 94.6%; */
}
.navbar.sticky {
    position: sticky;
    top: 0.5rem;
}

.nav-item .nav-link {
    /* font-weight: 500; */
    font-size: 1rem;
}
.nav-item .nav-link.active {
    font-weight: bold;
}
.nav-item .nav-link .icon-wrapper {
    position: relative;
    display: inline-block;
}

.nav-item .nav-link .dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 5px;
    background-color: #ddc0aa;
    border-radius: 50%;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 75%;
}

/* If Tailwind is not available, define the ping animation */
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 20;
    }
}
.navbar-nav {
    align-items: center;
    gap: 1.5rem;
}
:is(.language-toggle, .navbar-nav) .dropdown-menu {
    padding: 5px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 12px -4px #888;
    border: none;
    position: absolute;
}
:is(.language-toggle, .navbar-nav) .dropdown-menu .dropdown-item {
    color: #fff;
    transition: 0.3s;
}
:is(.language-toggle, .navbar-nav) .dropdown-menu .dropdown-item:hover,
:is(.language-toggle, .navbar-nav) .dropdown-menu .dropdown-item:active {
    color: #ffbc1d !important;
    background-color: transparent !important;
}
.navbar-light .navbar-nav .nav-link {
    margin-inline: 0;
    padding-inline: 0;
}
.navbar-collapse {
    justify-content: flex-end;
    margin-inline-end: 5rem;
}
.navbar-brand img {
    width: 160px;
    margin-block: 10px;
}
.language-toggle {
    color: white;
}
.language-toggle:hover {
    color: #ffbc1d;
}
.language-toggle .dropdown-menu {
    right: 0;
    left: initial;
}
.language-toggle::marker {
    content: "";
}
.navbar-light .navbar-toggler {
    margin-inline-end: 20px;
    font-size: 1.5rem;
}

.navbar .footer {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.navbar .overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #6c4222;
    overflow-x: hidden;
    transition: 0.5s;
    display: flex;
}

.navbar .overlay-content {
    position: relative;
    width: 100%;
    margin-top: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.navbar .overlay a {
    padding: 0 0;
    text-decoration: none;
    font-size: 1.5rem !important;
    color: white;
    display: block;
    transition: 0.3s;
}
.navbar .overlay a:active,.navbar .overlay a:hover{
background-color: transparent !important;
color: #ffbc1d !important;
}

.navbar .overlay .navbar-nav {
    align-items: start;
    padding: 0px 16%;
}

.navbar .overlay a:hover,
.navbar .overlay a:focus {
    color: #f1f1f1;
}

.navbar .overlay .closebtn {
    position: absolute;
    z-index: 2;
    top: 2rem;
    right: 45px;
    font-size: 3rem !important;
}
.navbar .overlay::after,
.navbar .overlay::before {
    display: none;
}

.navbar :is(.download-app, .social-media-links) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.navbar :is(.download-app, .social-media-links) h5 {
    color: #ffbc1d;
    font-size: 1.5rem;
    margin: 0.5rem;
}
.navbar .download-app a {
    width: 60%;
}
.navbar .download-app a img {
    width: 100%;
}
.navbar .social-media-links .icons {
    display: flex;
    column-gap: 3rem;
    row-gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 20px;
}
.navbar .social-media-links .icons i {
    color: white;
    font-size: 1.5rem;
}
.navbar .swinging-bulb {
    position: absolute;
    top: 44px;
    right: 0px;
    width: 90px;
}

/* Footer Styles */
footer.footer {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    background-color: #422b1a;
    border-radius: 20px;
    padding-block-start: 40px;
    padding-block-end: 30px;
    margin: 0 40px 40px;
}
.home + footer.footer {
    margin: -505px 40px 0px;
}
body:has(.home) {
    /* padding-bottom: 50px; */
}
footer.footer .top {
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    padding-inline-start: 6%;
    padding-inline-end: 10%;
}
/* .subscribe{
    margin-left: 350px;
}
[dir="rtl"] .subscribe{
    margin-right: 350px;
} */
footer.footer .top img {
    width: 250px;
}
footer.footer .top .subscribe p {
    color: white;
    margin-bottom: 10px;
}
footer.footer .top .subscribe .input-group {
    height: 60px;
    margin-bottom: 0;
    width: 500px;
}
footer.footer .top .subscribe input {
    border-start-start-radius: 5px;
    border-end-start-radius: 5px;
    border: none;
    height: 100%;
}
footer.footer .top .subscribe button {
    border-end-end-radius: 5px;
    border-start-end-radius: 5px;
    background-color: #ffbc1d;
    color: black;
    font-weight: 500;
    border: none;
    padding-inline: 15px;
}

footer.footer .bottom {
    display: flex;
    gap: 3rem;
    padding-inline-start: 6%;
}
footer.footer .bottom .col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
footer.footer .bottom .col:nth-child(2) {
    justify-content: space-between;
}
footer.footer .bottom .col:nth-child(3) {
    gap: 0;
}
footer.footer .bottom .col h5 {
    color: #ffbc1d;
    margin-bottom: 5px;
}
footer.footer .bottom .icons-container {
    width: 70%;
    display: flex;
    flex-direction: column;
}
footer.footer .bottom .icons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 25%);
    row-gap: 10px;
    column-gap: 5%;
    margin: auto auto 20px;
    justify-items: self-start;
}
footer.footer .bottom .icons i {
    color: white;
    font-size: 1.3rem;
}
footer.footer .bottom p {
    color: white;
    width: 80%;
    text-align: center;
    margin-bottom: 0;
}
footer.footer .bottom .links {
    display: flex;
    flex-direction: column;
}
footer.footer .bottom .links a:hover ,footer.footer .bottom .links a:active{
    color: #ffbc1d;
}

/* Home Page Styles */
.hero {
    padding: 300px 300px 600px 50px;
    min-height: 100vh;
    background-image: url("/front/images/background-gradiant.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.hero .img-container {
    position: absolute;
    right: 30px;
    top: 180px;
    width: 45vw;
}
.hero .img-container .img {
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000,
        black 80%,
        transparent
    );
    -moz-mask-image: linear-gradient(to bottom, #000, black 80%, transparent);
    mask-image: linear-gradient(to bottom, #000, black 80%, transparent);
    position: relative;
    isolation: isolate;
}
.hero .img-container .img::before {
    content: "";
    position: absolute;
    transform: translateX(-50%);
    left: 55%;
    top: 50px;
    width: 65%;
    height: 85%;
    background-color: #f9e7c94f;
    border-radius: 50%;
    z-index: -1;
}
.hero .img-container .img::after {
    content: "";
    position: absolute;
    transform: translateX(-50%);
    left: 55%;
    top: 30px;
    width: 75%;
    height: 95%;
    border: 1px solid #f9e7c94f;
    border-radius: 50%;
    z-index: -1;
}
.hero .img-container .ratings {
    background-color: white;
    box-shadow: 0 0 1px 1px black;
    padding: 15px 10px 10px;
    border-radius: 5px;
    width: fit-content;
    width: -moz-fit-content;
    margin-inline-start: auto;
    margin-inline-end: 0;
    position: relative;
    display: flex;
    gap: 10px;
}
.hero .img-container .ratings > img {
    position: absolute;
    top: -17px;
    left: 10px;
}
.hero .img-container .ratings .left {
    display: flex;
    flex-direction: column;
}
.hero .img-container .ratings .left h6 {
    margin-bottom: 10px;
    font-size: 16px;
}
.hero .img-container .ratings .left .avatars :is(img, span) {
    width: 45px;
    border-radius: 50%;
}
.hero .img-container .ratings .left .avatars span {
    width: 45px;
    border-radius: 50%;
    background-color: #2b9b65;
    color: white;
    padding: 10px 5px;
}
.hero .img-container .ratings .left .avatars :is(img:not(:first-child), span) {
    margin-inline-start: -20px;
}
.hero .img-container .ratings .right {
    margin-top: 40px;
}
.hero .img-container .ratings .right .numeric-rating {
    font-weight: 600;
    color: black;
}
.hero .img-container .ratings .right .numeric-rating span {
    font-weight: initial;
}
.hero .img-container .ratings .right .rating-stars {
    display: flex;
    justify-content: center;
}
.hero .img-container .ratings .right .rating-stars img:not(:first-child) {
    margin-inline-start: -2px;
}

.hero .text {
    width: 600px;
    margin-inline-start: 2rem;
}
.hero .text h5 {
    color: #9d6637;
    font-size: 2.8rem;
}
.hero .text h4 {
    color: black;
    font-size: 2rem;
}
.hero .text h4 p{
    display: inline;
}
.hero .text h4 .colored-trailer {
    color: #6c4222;
}
.hero .text h4 .dot {
    color: #f8810b;
}
.hero .cta {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    background: #6c4222;
    transition: 0.5s;
    padding: 5px 5px 5px 40px;
    border-radius: 46px;
    width: fit-content;
    margin-top: 4rem;
}

.hero .cta:focus {
    outline: none;
}

.hero .cta:hover {
    transition: 0.5s;
}
.hero .cta:hover span:nth-child(2) {
    padding: 7px 44px 7px 15px;
}

.hero .cta span:nth-child(2) {
    transition: 0.5s;
    margin-right: 0px;
    background-color: white;
    padding: 7px 35px 7px 23px;
    border-radius: 50%;
}

.hero .cta:hover span:nth-child(2) {
    transition: 0.5s;
    /* margin-right: 45px; */
}

.hero .cta span:nth-child(2) {
    width: 20px;
    margin-left: 15px;
    position: relative;
    top: 12%;
}

/**************SVG****************/

.hero .cta span:nth-child(2) svg {
    width: 2rem;
}
.hero .cta span:nth-child(2) svg path {
    fill: black;
}
path.one {
    transition: 0.4s;
    transform: translateX(-60%);
}

path.two {
    transition: 0.5s;
    transform: translateX(-30%);
}

.hero .cta:hover path.three {
    animation: color_anim 1s infinite 0.2s;
}

.hero .cta:hover path.one {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.6s;
}

.hero .cta:hover path.two {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.4s;
}

/* SVG animations */

@keyframes color_anim {
    0% {
        fill: black;
    }
    50% {
        fill: #fbc638;
    }
    100% {
        fill: black;
    }
}

.hero a.scroll-btn {
    padding-top: 60px;
    position: absolute;
    bottom: 400px;
    left: 50%;
}
.hero a.scroll-btn span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid #6c4222;
    border-radius: 50px;
    box-sizing: border-box;
}
.hero a.scroll-btn span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: "";
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #6c4222;
    border-radius: 100%;
    -webkit-animation: scroll-down 2s infinite;
    animation: scroll-down 2s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes scroll-down {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        -webkit-transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes scroll-down {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* Why Us Section Styles */
.why-us {
    margin-top: -300px;
    text-align: center;
}
.why-us p{
    color: #000;
    font-size: 20px;
    font-weight: 700;
}
.why-us .uturn h2{
    color: #6c4222;
    margin: 0 5px;
}
.why-us .desc  {
    font-weight: 500;
    width: 70%;
    margin: auto;
    color: #6c4222;
}

/* Concept and Values Section Styles  */
.concept-values {
    margin-top: 80px;
    padding: 40px;
    margin: 40px;
    box-shadow: 0px 40px 50px rgba(176, 179, 206, 0.3);
    border-radius: 8px 8px 0px 0px;
}
.concept-values .title {
    color: #6c4222;
    position: relative;
    margin: 0 auto 32px;
    font-size: 2rem;
    width: fit-content;
}
.concept-values .mobile .title {
    font-size: 1rem;
}
.concept-values .title::after {
    content: "";
    position: absolute;
    left: -170px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    border: 0.5px solid rgba(108, 66, 34, 0.233);
}
.concept-values .title::before {
    content: "";
    position: absolute;
    right: -170px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    border: 0.5px solid rgba(108, 66, 34, 0.233);
}

.concept-values .mobile .title::before {
    width: 70px;
    right: -80px;
}
.concept-values .mobile .title::after {
    width: 70px;
    left: -80px;
}
.concept-values .concepts {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.concept-values .concepts .items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    width: 100%;
}

.concept-values .concepts .items .item {
    text-align: center;
    position: relative;
}
.concept-values .concepts .items .item:nth-child(3):after {
    content: "";
    position: absolute;
    width: 1px;
    height: 60%;
    top: 40%;
    left: -16px;
    transform: translateY(-50%);
    background-color: #eee;
}
.concept-values .concepts .items .item p {
    text-align: justify;
    color: #422b1acc;
    /* font-weight: 200; */

}
.concept-values .concepts .items .item .h4 p{
    text-align: center;
    margin-bottom: 15px;
    margin-top: 20px;
    color: #422b1a;
    font-size: 18px;
    text-transform: uppercase;
}

.concept-values .concepts.values .title {
    margin-top: 20px;
}
.concept-values .concepts.values.mobile .title {
    margin-bottom: 20px;
    margin-top: 40px;
    /* z-index: 2; */
}
.concept-values .concepts .items .concept img {
    width: 100%;
    margin: auto;
}
.concept-values .concepts .items .item.value img {
    /* max-width: 100px; */
    margin: auto;
    max-height: 168px;

}
.concept-values .concepts.mobile {
    display: none;
}

/* Our Menu Section Styles */
.our-menu {
    min-height: 100vh;
    background-image: url("/front/images/our-menu-section-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 100px;
    padding-block: 100px;
}
.our-menu .head {
    text-align: center;
}
.our-menu .head .title {
    color: white;
    font-size: 24px;
    background-color: #422b1a;
    width: fit-content;
    margin: auto;
    border-radius: 30px;
    padding: 15px 30px;
    margin-block: 20px;
}
.our-menu .head .subtitle {
    color: #422b1a;
    font-weight: 300;
    padding-inline: 19vw;
    font-size: 18px;
}
.our-menu .filter {
    padding-inline: 10vw;
}
.our-menu .filter .filter-tabs {
    list-style: none;
    padding: 0;
    display: flex;
    /* justify-content: center; */
    /* gap: 20px; */
    border-bottom: 1px solid #ba9f9f;
    margin: 50px auto 0;
    /* overflow-x: scroll; */
    overflow-y: hidden;
    width: fit-content;
}

.scroll-container {
    max-width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}
:is(.scroll-container,.menu-swiper-button-next, .menu-swiper-button-prev ).mobile {
    /* display: none; */
}
.our-menu .filter .filter-tabs::-webkit-scrollbar,
.scroll-container::-webkit-scrollbar {
    display: none;
}

.our-menu .filter .filter-tabs::-webkit-scrollbar-track,
.scroll-container::-webkit-scrollbar-track {
    display: none;
}

.our-menu .filter .filter-tabs::-webkit-scrollbar-thumb,
.scroll-container::-webkit-scrollbar-thumb {
    display: none;
}
.our-menu .filter .filter-tabs li {
    color: #2d2824;
    font-size: 18px;
    font-weight: 500;
    padding: 5px 15px 15px;
    cursor: pointer;
    white-space: nowrap;
    width: fit-content;
}
.our-menu .filter .filter-tabs li a{
    color: #2d2824;
    font-size: 18px;
    font-weight: 500;
    padding: 5px 15px 15px;
    cursor: pointer;
    white-space: nowrap;
    width: fit-content;
}
/* .our-menu .filter .filter-tabs li.current {
    border-bottom: 3px solid #6c4222;
    font-weight: 700;
} */
.our-menu .filter .filter-tabs li.current a{
    border-bottom: 3px solid #6c4222;
    font-weight: 700;
}
.our-menu .filter .filter-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(47%, 1fr));
    column-gap: 50px;
    row-gap: 20px;
    padding-top: 50px;
}
/* .our-menu
    .filter
    .filter-items-grid
    :is(.item:nth-child(1), .item:nth-child(2)) {
    border-bottom: 2px dotted black;
} */
.our-menu .filter .filter-items-grid .item {
    transition: all 0.3s ease;
    overflow: hidden;
    border-bottom: 2px dotted black;
}
.our-menu .filter .filter-items-grid .item2 {
    transition: all 0.3s ease;
    overflow: hidden;
    border-bottom: 2px dotted black;
}

.our-menu .filter .filter-items-grid .item.deleted {
    /* transform: scale(0); */
    /* padding: 0; */
    display: none;
}
.our-menu .filter .filter-items-grid .item.active {
    display: block;
    transform: scale(1);
}
.our-menu .filter .filter-items-grid .item .head {
    display: flex;
    justify-content: space-between;
}
.our-menu .filter .filter-items-grid .item .name {
    margin-bottom: 10px;
}
.our-menu .filter .filter-items-grid .item .price {
    margin-bottom: 10px;
    color: #422b1a;
    font-weight: 700;
}
.our-menu .filter .filter-items-grid .item .nutrition-details {
    color: #4f4f4f;
    margin-bottom: 0px;
}
.our-menu .filter .filter-items-grid .item2 .head {
    display: flex;
    justify-content: space-between;
}
.our-menu .filter .filter-items-grid .item2 .name {
    margin-bottom: 10px;
}
.our-menu .filter .filter-items-grid .item2 .price {
    margin-bottom: 10px;
    color: #422b1a;
    font-weight: 700;
}
.our-menu .filter .filter-items-grid .item2 .nutrition-details {
    color: #4f4f4f;
    /* margin-bottom: 0px; */
}
.our-menu .filter .filter-items-grid .item2 .nutrition-details p{
    margin-bottom: 1rem;
}
.our-menu .filter .filter-items-grid .item .full-name {
    color: #828282;
    margin-bottom: 10px;
}
.our-menu .download-btn {
    border: 1px #422b1a solid;
    color: #422b1a;
    border-radius: 30px;
    display: block;
    padding: 15px 25px;
    margin: 60px auto 20px;
}
p{
    margin: 0;
    padding: 0;
}
/* Our Beef Section */
.our-beef {
    padding: 100px 100px 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    position: relative;
    -webkit-mask-image: linear-gradient(to top, #000, black 95%, transparent);
    -moz-mask-image: linear-gradient(to top, #000, black 95%, transparent);
    mask-image: linear-gradient(to top, #000, black 95%, transparent);
    background-image: linear-gradient(
        to bottom,
        rgba(255, 252, 250, 1),
        rgba(255, 253, 249, 1),
        rgba(255, 244, 229, 1),
        rgba(255, 240, 223, 1),
        rgba(255, 236, 216, 1),
        rgba(239, 225, 210, 1),
        rgba(243, 225, 201, 1),
        rgba(250, 226, 199, 1),
        rgba(239, 220, 200, 1),
        rgba(251, 230, 209, 1),
        rgba(255, 239, 223, 1),
        rgba(255, 241, 228, 1),
        rgba(255, 249, 243, 1),
        rgba(255, 253, 252, 1)
    );
}
.our-beef::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    box-shadow: inset 45px 0px 45px 25px rgba(255, 255, 255, 0.5);
}
.our-beef > img {
    width: 60%;
}
.our-beef .text {
    padding-top: 50px;
}
.our-beef .text img {
    width: 120px;
}
.our-beef .text h3 {
    font-size: 2rem;
    padding-top: 20px;
    color: #3d3d3d;
    width: 400px;
}

/* Testimonials Section Styles */
.testimonials {
    margin-top: -150px;
    margin-bottom: -300px;
    position: relative;
}
.testimonials::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 150px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    z-index: 1;
    -webkit-mask-image: linear-gradient(#000, black, transparent);
    -moz-mask-image: linear-gradient(#000, black, transparent);
    mask-image: linear-gradient(#000, black, transparent);
}
.testimonials .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-inline: 15vw;
    padding-bottom: 150px;
}
.testimonials .h2 p{
    color: #ffbc1d;
    font-weight: 600;
    font-size: 1.5rem;
}
.testimonials .h3 p{
    font-size: 2rem;
    margin-bottom: 50px;
    width: 100% !important;
}
.testimonials .testimonial > h4 {
    color: #274c5b;
    font-size: 1.5rem;
    margin-bottom: 0;
}
.testimonials h5 {
    font-size: 1rem;
    color: #444444;
}
.testimonials p {
    font-size: 1rem;
    color: #2d2824;
    width: 80%;
    margin: 30px auto 15px;
    text-align: center;
}
.testimonials .testimonial > img {
    width: 150px;
    height: 150px;
    margin: auto;
    border-radius: 50%;
    margin-bottom: 20px;
}
.testimonials .rating-stars {
    display: flex;
    justify-content: center;
}
.testimonials .rating-stars img:not(:first-child) {
    margin-inline-start: -2px;
}
.testimonials .rating-stars img {
    width: 20px;
}

/* Get Our App Section Styles */
.get-app {
    background-image: linear-gradient(
        to bottom,
        #fdfcfa,
        #fefaf7,
        #fff8f0,
        #fff6ee,
        #feead2,
        #fee8d0,
        #fee7cc,
        #ffe4c7,
        #fedbb1,
        #fcd8ac,
        #fbdeb2,
        #fde7c1,
        #fde9c4,
        #fdedcd,
        #feeed9
    );
    padding: 370px 0 645px;
}
.get-app h2 {
    color: #9d6637;
    font-weight: 900;
    font-size: 2rem;
}
.get-app h3 {
    font-size: 1.3rem;
    text-transform: capitalize;
    margin-bottom: 50px;
}
.get-app h3 span {
    color: #9d6637;
}
.get-app div.box {
    width: 600px;
    margin-inline-start: 150px;
}
.get-app div.images {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    width: fit-content;
}

main:not(.home) + footer .u-logo {
    display: none;
}
footer .u-logo {
    position: absolute;
    right: 100px;
    top: -484px;
    height: 500px;
    z-index: 1;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    border-radius: 60px;
    clip-path: polygon(0 0, 100% 0, 100% 89%, 0 89%);
    background-color: white;
}
footer .u-logo > div {
    position: relative;
    width: 260px;
    height: 500px;
    isolation: isolate;
}
footer .u-logo img {
    width: 100%;
    height: 100%;
    z-index: 3;
}
footer .u-logo img:nth-of-type(2) {
    position: absolute;
    left: 51%;
    top: 0;
    transform: translateX(-50%);
    z-index: 2;
    object-fit: contain;
    width: 90%;
}

/* Media Queries */
@media (max-width: 1300px) {
    .concept-values .concepts .items {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 30px;
    }
    .concept-values .concepts .items .item h4 {
        font-size: 19px;
    }
    .concept-values .concepts .items .item p {
        font-size: 12px;
        color: #3d3d3d;
        margin-bottom: 1rem;
    }
}

@media (max-width: 991px) {
    .concept-values {
        margin: 70px 20px 20px;
    }
    .concept-values .concepts.desktop
    /* , .scroll-container.desktop */
    {
        display: none;
    }
    .concept-values .concepts.mobile,
    .scroll-container.mobile {
        display: initial;
    }
    /* .menu-swiper-button-next, .menu-swiper-button-prev {
        display: flex !important;
    } */
    .concept-values .concepts .items .item {
        width: 400px;
    }

    .navbar-brand {
        margin-inline-start: 5px;
    }
    .language-toggle {
        display: none;
    }
    .navbar-brand img {
        width: 100px;
        margin: 10px;
    }
    .navbar {
        border-radius: 10px;
    }
    .navbar-collapse {
        margin: auto;
    }
    .navbar .overlay a {
        font-size: 20px !important;
    }
    .navbar .social-media-links .icons a{
        width: 25px;
    }
    .navbar .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
    .navbar .swinging-bulb {
        position: absolute;
        top: 36px;
        right: 0px;
        width: 62px;
    }

    .navbar p {
        color: white;
    }

    footer.footer .top {
        flex-direction: column;
    }
    footer.footer .top img {
        width: 200px;
        display: block;
        margin: auto;
        margin-bottom: 10px;
    }
    footer.footer .top .subscribe {
        margin: auto;
    }
    footer.footer .top .subscribe p {
        text-align: center;
    }
    footer.footer .top .subscribe .input-group {
        width: 100%;
    }
    footer.footer .top {
        padding-inline-end: 8%;
    }
    footer.footer .bottom {
        flex-direction: column;
        padding: 0;
    }
    footer.footer .bottom .col {
        align-items: center;
    }
    footer.footer .bottom .col:nth-child(1) {
        order: 2;
    }
    footer.footer .bottom .col:nth-child(2) {
        order: 3;
    }
    footer.footer .bottom .col:nth-child(3) {
        order: 1;
    }
    footer.footer .bottom p {
        width: 100%;
    }
    footer.footer .bottom .icons {
        justify-items: center;
        grid-template-columns: repeat(auto-fit, 30%);
        width: 80%;
    }

    .hero {
        padding: 120px 10px 500px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
    .hero .img-container {
        position: initial;
        right: initial;
        top: initial;
        width: 80vw;
    }
    .hero .img-container .ratings {
        margin: auto auto auto 35%;
        background-color: transparent;
        border-radius: 15px;
        padding: 10px 10px 5px;
        border: 1px #ffffff87 solid;
        gap: 5px;
        background: rgba(255, 255, 255, 0.25);
    }
    .hero .text {
        margin-top: 60px;
        margin-inline-start: 0;
        width: 100%;
        text-align: center;
    }

    .hero .text h4 {
        font-size: 24px;
    }
    .hero .text .cta {
        margin: 30px auto 60px;
    }

    .why-us {
        margin-top: -380px;
    }

    .our-beef {
        margin-bottom: 100px;
        flex-direction: column;
        justify-content: start;
        gap: 40px;
        padding-inline: 20px;
    }
    .our-beef > img {
        width: 90vw;
    }
    .our-beef .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        align-items: center;
    }
    .our-beef .text img {
        width: 90px;
    }
    .our-beef .text h3 {
        font-size: 1.5rem;
        padding-top: 20px;
        width: 80vw;
        text-align: center;
    }

    .home + footer.footer {
        margin: -890px 40px 0px;
    }
    .home + footer.footer .home-logo {
        position: relative;
        margin: auto;
    }
    .get-app {
        padding: 200px 0 1400px;
    }

    footer .u-logo {
        left: 50%;
        transform: translateX(-50%);
        width: fit-content;
        /* top: -420px;
        padding: 170px 60px 110px; */
    }
    .get-app div.box {
        width: 90%;
        margin: auto;
        text-align: center;
    }
    .get-app h2 {
        font-size: 1.5rem;
    }
    .get-app h3 {
        font-size: 1rem;
        margin-bottom: 40px;
        font-weight: 800;
    }
    .get-app div.images {
        gap: 10px;
        width: fit-content;
        flex-direction: column;
        margin: auto;
    }
}

@media (max-width: 600px) {
    .navbar {
        margin: 2rem 20px -135px;
    }
    footer.footer {
        margin: 0 20px 20px;
    }
    .home + footer.footer {
        margin: -870px 20px 0px;
    }
    .hero {
        padding: 150px 10px 550px;
    }

    .hero {
        background-image: url("/front/images/background-gradiant-mobile.png");
    }
    .hero .img-container .ratings > img {
        width: 30px;
        top: -10px;
        left: 8px;
    }
    .hero .img-container .ratings .right {
        margin-top: 15px;
    }
    .hero .img-container .ratings .right .rating-stars img {
        width: 8px;
    }
    .hero .img-container .ratings .right .numeric-rating {
        font-size: 8px;
    }
    .hero .img-container .ratings .left h6 {
        font-size: 8px;
        margin-bottom: 0px;
    }
    .hero .img-container .ratings .left .avatars :is(img, span) {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        border: 2px solid white;
    }
    .hero
        .img-container
        .ratings
        .left
        .avatars
        :is(img:not(:first-child), span) {
        margin-inline-start: -12px;
    }
    .hero .img-container .ratings .left .avatars span {
        font-size: 5px;
        top: -3px;
    }

    .hero .img-container .img::before {
        left: 55%;
        top: 50px;
        width: 65%;
        height: 100%;
        background-color: #f9e7c9bf;
    }
    .hero .img-container .img::after {
        left: 55%;
        top: 30px;
        width: 80%;
        height: 130%;
        border: 3px solid #f9e7c9bf;
    }

    .our-menu .head .title {
        background-size: 150px;
        font-size: 16px;
    }
    .our-menu .head .subtitle {
        padding-inline: 5vw;
        font-size: 19px;
    }
    .our-menu .filter .filter-tabs {
        margin: 20px auto 0;
    }
    .our-menu .filter .filter-items-grid {
        padding-top: 30px;
    }
    .our-menu .filter .filter-items-grid .item {
        padding-bottom: 16px;
    }
    .our-menu .filter .filter-items-grid .item :is(.price, .name) {
        font-size: 19px;
    }
    .our-menu .filter .filter-items-grid .item .nutrition-details {
        font-size: 17px;
    }
    .our-beef {
        padding: 30px 20px 170px;
    }

    .testimonials h2 {
        font-size: 2.5rem;
        margin-bottom: 0px;
    }
    .testimonials h3 {
        font-size: 1.7rem;
        margin-bottom: 40px;
        font-weight: bold;
    }
    .testimonials .testimonial > h4 {
        color: #274c5b;
        font-size: 1.5rem;
        margin-bottom: 0;
    }
    .testimonials h5 {
        font-size: 1rem;
        color: #444444;
    }
    .testimonials p {
        font-size: 17px;
        color: #2d2824;
        width: 90%;
        margin: 25px auto;
    }
    .testimonials .testimonial > img {
        margin-bottom: 25px;
    }
    .why-us p {
        /* margin: auto; */
        font-size: 17px;
    }
    .concept-values .concepts .items .item p{
        font-size: 16px;
        margin-bottom: 1rem;
    }
    .get-app h2{
        font-size: 1.9rem;
    }
    .get-app h3{
        font-size: 1.2rem;
    }
    .concept-values .concepts .items .item.value img{
         max-width: 100px;
         margin: auto;
         max-height: 210px;
    }
}

.auth-page{
    background: linear-gradient(0deg, #422b1a, #422b1a), #2b2928;
}
.auth-page h1{
    font-size: 4rem;
}
@media (min-width: 992px) { /* lg breakpoint */
    .vh-lg-100 {
        height: 100vh;
    }
}
[dir="rtl"] .dropdown-menu {
    right: auto !important;
    left: 0 !important;
    text-align: start !important;
}
.dropdown-menu {
    right: 0 !important;
    left: auto !important;
}
.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:active{
    background-color: #6c4222 !important;
}
.dropdown-menu li:hover,.dropdown-menu li:active{
    background-color: #6c4222 !important;
}
.subscribe-btn:active,.subscribe-btn:focus {
    background-color: rgb(252, 192, 54) !important;
}
.subscribe-btn {
    font-size: 15px;
}
.about-menu-phone {
    opacity: 0;
    display: none;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(-10px);
    list-style: none;
    padding: 10px;
    width: 200px;
    margin-bottom: 5px;
}
.about-menu-phone li:active,.about-menu-phone li:hover{
    background-color: transparent !important;
}

/* Active state when menu is visible */
.about-menu-phone.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.link-phone .nav-item{
    margin-bottom: 20px;
}
.link-phone{
    margin-top: -210px;
    transition: margin-top 0.3s ease-in-out;
}
.link-phone-mt{
    margin-top: 0px !important;
}
.subscribe-notification{
    position: fixed;
    bottom: 5px;
    left: 5px;
    background-color: #fff;
    color: #024218;
    padding: 10px 20px;
    font-size: 30px

}
.footer{
    padding: 0 50px;
}
@media (max-width: 600px) {
    .footer{
        padding: 0 0;
    }
}
.footer .top {
    display: grid;
    gap: 50px 95px;
    grid-template-columns: repeat(3, 1fr);
}
.footer .bottom {
    display: grid;
    gap: 50px 95px;
    grid-template-columns: repeat(3, 1fr);
}
.btn-brown{
    background-color: #422b1a;
    color: #fff;
}
.btn-auto-brown{
    background-color: #fff;
    color: #422b1a;
    border: 1px solid #422b1a;
}
.btn-auto-brown:hover,.btn-brown:hover{
    color: #9d6637;
}
.fancybox-toolbar {
    right: 0;
    top: 10% !important;
}
.fancybox-navigation{
    top: 40% !important;
}
.alert{
    bottom: 10% !important;
    position: fixed !important;
    left: 5%;
    z-index: 99 !important;
    /* padding: 5px; */
}
/* .alert span{
    padding: .75rem 1.25rem;
} */

.hidden {
    display: none !important; /* ✅ "important" works in CSS */
}
.team-sec-bg{
    width: 100%;
    object-fit: fill;
    height: 500px;
}