@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    box-sizing: border-box;
    margin: 0 I !important;
    padding: 0;
}
ul{
    list-style: none;
}
:root{
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-orange-50: oklch(98% .016 73.684);
    --color-orange-100: oklch(95.4% .038 75.164);
    --color-orange-200: oklch(90.1% .076 70.697);
    --color-orange-300: oklch(83.7% .128 66.29);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-600: oklch(64.6% .222 41.116);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-yellow-50: oklch(98.7% .026 102.212);
    --color-yellow-100: oklch(97.3% .071 103.193);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-600: oklch(68.1% .162 75.834);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-pink-100: oklch(94.8% .028 342.258);
    --color-pink-600: oklch(59.2% .249 .584);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-900: oklch(21% .034 264.665);
    --color-white: #fff;
    --spacing: .25rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --blur-sm: 8px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-scrollbar-thumb: oklch(75% .15 35 / .3);
    --color-scrollbar-thumb-hover: oklch(75% .15 35 / .5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
}

body{
    font-family: "Poppins", sans-serif;
    
    background-image: linear-gradient(to bottom right , var(--color-orange-50) , var(--color-amber-50) , var(--color-yellow-50));
}

nav{
    box-shadow: var(--tw-shadow);
    border-top: 1px solid var(--color-orange-100);
}

nav .container-xl{
    padding: 1rem;
}

nav .navbar-brand .icon{
    width: 3rem;
    height: 3rem;
    background-image: linear-gradient(to bottom right , var(--color-orange-500) , var(--color-red-500));
    box-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
}
nav .navbar-brand .icon i{
    font-size: var(--text-xl);
}
nav .navbar-brand h1{
    font-size: var(--text-lg);
    color: var(--color-gray-900);
}
nav .navbar-brand p{
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}

.navbar-collapse .icon{
    color: var(--color-gray-600);
    transition: all .2s;
    cursor: pointer;
}
.navbar-collapse .icon:hover{
    color: var(--color-orange-600);
    
}

.navbar-collapse img{
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--color-orange-300);
}

.navbar-toggler{
    color: var(--color-gray-600);
    transition: all .2s;
    font-size: var(--text-2xl);
}
.navbar-toggler:hover{
color: var(--color-orange-600);
}
.navbar-toggler:focus{
    box-shadow: none;
}

.main .container-xl{
    padding: 2rem 1.5rem ;
}

.main .card{
    border-radius: var(--radius-3xl);
    box-shadow: var(--tw-shadow);
    overflow: hidden;
    margin-bottom: 2rem;
    border: 1px solid var(--color-orange-100);
}
.main .card .card-img{
    height: 400px;
    overflow: hidden;
    border-radius: 0 !important;
}
.main .card .card-img img{
    object-fit: cover;
}

::-webkit-scrollbar{
    width: 6px;
}
::-webkit-scrollbar-thumb {
    background: var(--color-orange-100);
    border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-orange-600); 
}

.main .card .star-tag{
    top: 1.5rem;
    left: 1.5rem;
    padding: .5rem 1rem;
    box-shadow: var(--tw-shadow);
}
.main .card .star-tag i{
    font-size: var(--text-sm);
    color: var(--color-yellow-400);
}
.main .card .star-tag .rate{
    font-size: var(--text-sm);
    color: var(--color-gray-900);
}
.main .card .star-tag .review{
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}
.main .card .stats-tag{
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background-color: rgb(255 255 255 / .95);
    border-radius: var(--radius-2xl);
    padding: .75rem;
    box-shadow: var(--tw-shadow);
    backdrop-filter: blur(var(--blur-sm));
}

.main .card .stats-tag i{
    font-size: var(--text-lg);
    color: var(--color-orange-500);
    margin-bottom: 0.5rem;
}
.main .card .stats-tag i.fa-users{
    font-size: var(--text-lg);
    color: var(--color-blue-500);
}
.main .card .stats-tag i.fa-fire-burner{
    color: var(--color-red-500);
}

.main .card .stats-tag .st-tx{
    font-size: var(--text-xs);
    color: var(--color-gray-500);
}
.main .card .stats-tag .st-num{
    font-size: var(--text-sm);
    color: var(--color-gray-900);
}

.card-body{
    padding: 1.25rem;
}

#difficulty-badge,
#category-badge{
    background-color: var(--color-green-100);
    color: var(--color-green-700);
    padding: .25rem .75rem;
    font-size: var(--text-xs);
}
#category-badge{
    background-color: var(--color-blue-100);
    color: var(--color-blue-700);  
}
#recipe-name{
    font-size: var(--text-2xl);
    color: var(--color-gray-900);
}
#recipe-description{
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}
.order div{
    width: 3rem;
    height: 3rem;
    background-color: var(--color-orange-100);
    color: var(--color-orange-600);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all  .2s;
}
.order div:hover{
    background-color: var(--color-orange-200);
}

#time-warning{
    background-color: var(--color-red-50);
    border-left: 4px solid var(--color-red-500);
    padding: 1rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}
#time-warning i{
    color: var(--color-red-500);
    font-size: var(--text-xl);
}

#time-warning p.fw-semibold{
    color: var(--color-red-800);
    font-size: var(--text-sm);
}
#time-warning p.fw-semibold+p{
    color: var(--color-red-600);
    font-size: var(--text-xs);
}

.services-tabs{
    padding-block: 5rem;
}

.nav-tabs {
    white-space: nowrap;
}

.nav-tabs .nav-item {
    min-width: 0;
}

.services-tabs-content .nav .nav-link {
    padding: 0;
    padding-bottom: 0.5rem;
    color: var(--color-gray-500);
    border: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    font-size: var(--text-xs);
    transition: all .2s;
    max-width: 100%; 
    overflow: hidden;
}

.services-tabs-content .nav .nav-link i {
    flex-shrink: 0; 
}
.services-tabs-content .nav .nav-link.active{
    color: var(--color-orange-600);
    border-bottom: 2px solid var(--color-orange-600);
}

#Ingredients-tab-pane,
#Instructions-tab-pane,
#Nutrition-tab-pane,
#Chef-tab-pane{
    border-block: 1px solid var(--color-gray-200);
    overflow-y: auto;
    height: 350px;
}

.ingredients-content{
    background-image: linear-gradient(to bottom right , var(--color-orange-50) , var(--color-amber-50)) ;
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
}

#ingredients-list li div{
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--color-orange-500);
    font-size: var(--text-xs);
    
}
#ingredients-list li span{
    color: var(--color-gray-700);
}

.Instructions-content .num{
    width: 3rem;
    height: 3rem;
    background-color: var(--color-orange-500);
    border-radius: var(--radius-2xl);
    font-size: var(--text-xl);

}

.Instructions-content .tx{
    color: var(--color-gray-700);
}

.nut-content{
    padding: 1rem;
    background-color: var(--color-gray-50);
    border-radius: var(--radius-xl);
}
.nut-content .icon{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
}
.nut-content .icon+span{
    color: var(--color-gray-700);
    font-size: var(--text-xs);
}
.nut-content-tx{
    font-size: var(--text-base);
    color: var(--color-gray-900);
}

.nut-content .icon-1{
    color: var(--color-orange-600);
    background-color: var(--color-orange-100);
}
.nut-content .icon-2{
    color: var(--color-blue-600);
    background-color: var(--color-blue-100);
}
.nut-content .icon-3{
    color: var(--color-yellow-600);
    background-color: var(--color-yellow-100);
}
.nut-content .icon-4{
    color: var(--color-red-600);
    background-color: var(--color-red-100);
}
.nut-content .icon-5{
    color: var(--color-green-600);
    background-color: var(--color-green-100);
}
.nut-content .icon-6{
    color: var(--color-pink-600);
    background-color: var(--color-pink-100);
}

.Chef-content{
    padding: 1rem;
    background-color: var(--color-amber-50);
    border-left: 4px solid var(--color-amber-400);
    border-radius: var(--radius-xl);
}
.Chef-content i{
    color: var(--color-amber-600);
    font-size: var(--text-xl);
}
.Chef-content p{
    color: var(--color-gray-700);
}

#try-another-btn{
    background-image: linear-gradient(to right , var(--color-orange-500),var(--color-red-500));
    padding: 0.5rem 1rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--tw-shadow);
    font-size: var(--text-sm);
    transition: all .3s;
    
}
#try-another-btn:hover{
    background-image: linear-gradient(to right , var(--color-orange-600),var(--color-red-600));
    box-shadow: 0 20px 25px -5px  #0000001a, 0 8px 10px -6px #0000001a;
    scale: 105%;
}