:root {    
    --main-bg-color: #005455;
    --secondary-clr: #F8B600;
    --main-clr: #632D1E;
    --bg-secondary: #FFFFF1;
    --text-subtitle-clr: #6F6A66;
    

}

.inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;  
    font-style: normal;
}
* {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;  
    font-style: normal;
}
a {text-decoration: none;}
/* Start header */
header {
    height: 81px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(243, 244, 246, 1);
    background-color: #fff;
    
    position: sticky;
    top: 0;
    z-index: 1000;

}
header .logo {max-height: 60px;}
header nav ul li a {color: #6B7280;}
header nav ul li a.active {color: var(--main-clr); font-weight: bold;}
.lang-dropdown .btn, .lang-dropdown .dropdown-item  {font-size: 14px;}
.lang-dropdown .btn{
    border: 1px solid #E5E7EB;
    background-color: transparent;
    border-radius: 20px;
    font-weight: bold;    
}
.lang-dropdown .btn.dropdown-toggle::after {display: none;}
.cart-btn {background-color: var(--main-clr); transition: all .2s ease-in-out; color: white;}
.cart-btn:hover {background-color: var(--secondary-clr); color: #000;}
.cart-btn path {transition: all .2s ease-in-out;}
.cart-btn:hover path {fill: #000;}

.orders-count {
    background-color: #F8B600;
    padding: 4px;
    height: 25px;
    width: 25px;
    min-width: 25px;
    font-size: 14px;
    color: #111111;
    transition: all .2s ease-in-out;
}
.cart-btn:hover .orders-count {background-color: #000; color: #fff;}

/* Start Home page */
.main-section {background-color: var(--bg-secondary);}
.main-section p.note{background-color: #fff}
.main-section h1 {font-size: 70px; color: var(--main-clr)}
.main-section h1 + p {font-size: 18px; color: #6B7280;}
.main-section .icon-wrap {
    width: 40px;
    height: 40px;
}
.main-section .image-wrap {background-color: rgba(255, 184, 0, 0.2);}
.info-box {
    width: max-content;
    padding: 15px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);    
}
.info-box.info-box-1 {
    top: 56px;
    left: -25px;
}
.info-box.info-box-2 {
    top: 150px;
    right: -25px;
}
.info-box.info-box-3 {
    bottom: -20px;
    left: 25px;
}
.info-box.info-box-3 .icon-wrap {background-color: var(--bg-secondary);}
.info-box div p:first-child {font-size: 12px;}
.info-box div p:last-child {font-size: 14px;}

.main-section .delivery-type-switcher {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 6px;
    width: max-content;
    position: relative;
}
.main-section .delivery-type-switcher > div input[type="radio"] {position: absolute; z-index: -1; opacity: 0;}
.main-section .delivery-type-switcher > div input[type="radio"] + label {
    min-width: 150px;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 8px;
    color: #6B7280;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.main-section .delivery-type-switcher > div input[type="radio"]:checked + label,
.main-section .delivery-type-switcher > div input[type="radio"] + label:hover
{
    background-color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: var(--main-clr);
    font-weight: 600;
}
.main-section .delivery-type-switcher > div input[type="radio"] + label svg path {transition: all .3s ease-in-out;}
.main-section .delivery-type-switcher > div input[type="radio"]:checked + label svg path,
.main-section .delivery-type-switcher > div input[type="radio"] + label:hover svg path
 {stroke: var(--secondary-clr);}
.input-search-wrap {
    background-color: #F9FAFB;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    padding: 10px;

}
.delivery-type-box {box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.1); padding: 24px 12px 12px 12px}

.input-search-wrap input {min-width: 314px;}
.input-search-wrap input:focus {border: none; outline: none;}
.input-search-wrap + button {
    height: 46px;
    border-radius: 12px;
    background-color: var(--main-clr);
    transition: all .2s ease-in-out;
    color: white;
}
.input-search-wrap + button:hover {
    background-color: var(--secondary-clr);
    color: #000;
}

.very-light-gray {background-color: #F7F7F7;}

.categories-slider .image-wrap img {width: 100%;}
.categories-slider .image-wrap{
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    height: 150px;
    overflow: hidden;    
}

.offers-section .offer-wrap{
    background-color: var(--main-clr);
    height: 323px;
}
.offers-section .offer-wrap img {height: 317px; object-fit: contain;}
.link-btn {
    background-color: white;
    color: var(--main-clr);
    padding: 12px 33px;
    border-radius: 10px;
}
.offers-section .note {background-color: var(--secondary-clr); font-size: 12px; padding: 5px;}
.offers-section .note + h3 {font-size: 36px;}
.offers-section .code{color: #EAF5F4; background-color: rgba(255, 255, 255, 0.2); padding: 5px 8px;}
.custom-link-btn {padding-block: 10px;}
.restaurants-home-page .btns-filter a {
    color: #111111;
    background-color: var(--bg-secondary);
    padding-block: 6px;
    transition: all .2s ease-in-out;
}

.restaurants-home-page .btns-filter a.active, .restaurants-home-page .btns-filter a:hover {
    color: white;
    background-color: #005455;    
}
.restaurant-card .gastro-logo {width: 40px !important;height: 40px;left: 20px;bottom: 20px}
.restaurant-card .favorit-wrap{left: 0;right: 0;top: 10px;}
.restaurant-card .favorit-wrap p   {background-color: #F7C933;}
.restaurant-card .favorit-wrap button {width: 32px;height: 32px;}
.restaurant-card .rating-result {background-color: #F9FAFB;}
.filter-btn{
    padding:10px 20px;
    border:none;
    border-radius:30px;
    cursor:pointer;
    background:#eee;
}
.filter-btn.active{background:#ff5722;color:#fff;}
.restaurant-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #F3F4F6;
    margin-bottom: 20px;
}
.restaurant-card img{width:100%;height:180px;object-fit:cover;}
.see-all-btn {
    color: var(--main-clr);
    border: 2px solid var(--main-clr);
    transition: all .2s ease-in-out;
}
.see-all-btn:hover {
    color: white;
    background-color: var(--main-clr);
}

.about-our-work {background-color: var(--bg-secondary);  }

.how-we-work .outer-wrap {width: 96px;height: 96px; background-color: var(--secondary-clr)}
.how-we-work .inner-wrap {
    width: 54px;
    height: 54px;
    background-color: #fff;
}
.dashed-curved-line {
    top: 36px;
    left: 50%;
    width: 73%;
    transform: translateX(-50%);
}

.fatures-rest-list li p {color: rgba(255, 255, 255, 0.8);}
.fatures-rest-list li p span {color: rgba(255, 255, 255, 0.5);}
.link-btn {transition: all .2s ease-in-out;}
.link-btn:hover {background-color: var(--secondary-clr); color: #fff}
.advantage-box {border: 1px solid rgba(233, 227, 218, 1);}


.search-res-section .content-wrap{max-width: 864px; height: 482px; position: relative;}
.search-res-section h2 {font-size: 45px;}
.search-res-section .content-wrap::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--main-clr);
    z-index: -1;
}
.icon-wrap {
    width: 64px;
    height: 64px;
    background-color: rgba(247, 201, 51, 0.2);
}
.search-res-section button {background-color: var(--secondary-clr); color: var(--main-clr);}
.search-res-section button:hover {background-color: var(--main-clr); color: #fff}
.search-res-section .image-bg-wrap::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(99, 45, 30, 0) 0%, rgba(99, 45, 30, 1) 100%);
}
.search-res-section .lt-image-wrap::after {background: linear-gradient(90deg,  rgba(99, 45, 30, 1) 0%, rgba(99, 45, 30, 0) 100%);}
.search-res-section .note {
    color: rgba(234, 245, 244, 0.5);
 }

/* End Home page */

/* Start Restaurants Page */
.hero-section h1 {
    font-size: 60px;
}
.hero-section img {width: 100%; max-width: 600px;}
.hero-section .description {font-size: 18px;}
.hero-section .info-box {
    left: 95px;
    top: auto;
    bottom: 45px;
}
.hero-section .icon-wrap{
    background-color: var(--bg-secondary);
    width: 48px;
    height: 48px;
}
.hero-section .info-box div p {font-size: 16px;}





/* Start Filters */
.form-filter-wrap {
    border: 1px solid rgba(233, 227, 218, 1);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}
.form-filter-wrap .border-right {
    border-right: 1px solid rgba(233, 227, 218, 1);
}
.form-filter-wrap .first-input-wrap {width: 540px;}
.form-filter-wrap .second-input-wrap {width: 256px;}
.form-filter-wrap button {
    padding: 12px 26px;
    transition: all .2s ease-in-out;
}
.form-filter-wrap input:focus {border: none; outline: none;}
.form-filter-wrap button:hover {
    background-color: var(--secondary-clr);
    color: var(--main-clr) !important;
}
.form-filter-wrap button svg path{transition: all .2s ease-in-out;}
.form-filter-wrap button:hover svg path {fill: var(--main-clr);}
.form-filter-wrap .select-option-wrap .ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
    border: none;
    outline: none;
    box-shadow: none;
    background-color: var(--bg-secondary);
    padding-block: 12px;
    min-width: 260px;
}



/* Categories */

.categories-wrapper{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:40px;
}


.categories-scroll{flex:1;overflow-x:auto;scroll-behavior:smooth;}
.categories-scroll::-webkit-scrollbar{display:none;}
.categories{display:flex;gap:12px;width:max-content;}
.category{
    border:1px solid #E9E3DA;
    background:white;
    color:#6B3425;
    padding:10px 24px;
    border-radius:30px;
    cursor:pointer;
    white-space:nowrap;
    transition:.3s;
}
.category:hover{border-color:#6B3425;}
.category.active{background:#6B3425;color:white;}
.category svg path {fill: var(--main-clr) ;transition:.3s;}
.category.active svg path {fill: #fff;}
.scroll-btn{
    width:40px;
    height:40px;
    border-radius:50%;
    border:none;
    background:#FFF5DD;
    color:#6B3425;
    font-size:25px;
    cursor:pointer;    
}
/* Restaurants */
.restaurant-card{border:1px solid #eee;border-radius:16px;overflow:hidden;background:white;}
.restaurant-card img{width:100%;height:200px;object-fit:cover;}
.restaurant-info{padding:16px;}
.restaurant-info h3{margin:0 0 8px;}
.restaurant-info span{color:#777;}
.load-more{ /* Load More */
    display:block;
    margin:40px auto;
    padding:14px 35px;
    border:1px solid var(--main-clr);
    border-radius:30px;
    background:transparent;
    color:var(--main-clr);
    cursor:pointer;
    transition: .3s;
}
.load-more:hover {color: white;background-color: var(--main-clr);}
.load-more svg path {transition: .3s;}
.load-more:hover svg path {fill: white;}



.categories-sticky{
    position: sticky;
    top: 81px;
    z-index: 9;
    background: white;
}
.categories-sticky.fixed{box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); border-radius: 0 0 10px 10px;}

ul.features-list li {background-color: var(--bg-secondary); padding-block: 6px}
#restaurants {
    scroll-margin-top: 170px; /* عدل الرقم حسب ارتفاع الهيدر والأزرار */
}


/* End Restaurants Page */



/* Start Navbar btn */
.hamburger-btn {
    border: 1px solid rgba(233, 227, 218, 1);
    border-radius: 10px;
    outline: none;
    padding: 12px;
    background-color: transparent;
}
.hamburger-btn span {
    height: 0.1rem;
    width: 16px;
    background-color: var(--main-bg-color);
}
.hamburger-btn span:not(:last-child) {margin-bottom: 4px;}

/* End Navbar btn */

/* Start Footer */

.footer {background-color: var(--main-clr);}
.footer .note{color: rgba(234, 245, 244, 0.6); line-height: 1.7;}
.footer .social-wrap {min-width: 36px; width: 36px; height: 36px; background-color: rgba(255, 255, 255, 0.1); transition: all .2s ease-in-out;}
.footer .social-wrap:hover {
    background-color: var(--secondary-clr);
}
.footer .social-wrap svg path, .footer .links-list a{transition: all .2s ease-in-out;}
.footer .social-wrap:hover svg path {fill: var(--main-clr);}
.footer .links-list a {color: rgba(234, 245, 244, 0.6); }
.footer .links-list a:hover {color: var(--secondary-clr) }
.app-link {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.1);
}
.app-link p:first-of-type {
    color: rgba(255, 255, 255, 0.5)
}
.app-link p:last-child {color: #fff}
.app-link svg {min-width: 15px;}
.copyright {
    color: rgba(234, 245, 244, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-block: 20px;
}
.footer .footer-dropdown .btn {color: rgba(255, 255, 255, 0.7)}
/* End Footer */

/* Start my frame work */
.main-bg-clr {background-color:  var(--main-clr);}
.secondary-clr{color: var(--secondary-clr);}
.subtitle {color: var(--text-subtitle-clr);}
.main-clr {color: var(--main-clr)}
.dropdown-item:focus, .dropdown-item:hover {background-color: var(--secondary-clr);}
.cursor-pointer {cursor: pointer;}
/* End my frame work */