header{
    background-color: var(--header-background-color);
    display: flex;
    flex-direction: row;
    justify-content: space-between; align-items: center;
    padding: 1.3rem 11.5%;
    position:sticky; top:0px;
    box-shadow: 0px 0px 14px 0px #0000001b;
    z-index: 3;
    height: 6rem; /*last thing added here*/
}
/*LOGO PART*/
header>.logo{
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -1px;
    display: flex;
    align-items: center; justify-content: center;
    width: 10%;
}
header>.logo>a{
    color: var(--color-default);
    cursor: text;

}
header>.logo>a>span{
    color: var(--color-primary);
}

/*NAV PART*/
header>nav{
    padding-top: 0.6rem;
    width: clamp(16rem,22.5%,25%);
    display: flex;
    justify-content: space-between;
    font-size: 1.0625rem;
    font-weight: 600;
}
header>nav>a{
    color: var(--color-tertiary);
    transition: 0.5s;
    cursor: pointer;
}
body:not(:has(#chefs:target)):not(:has(#gallery:target)):not(:has(#contact:target)) a[href="#home"] {
  color: var(--color-default);
}

header>nav>a:hover{
    color: var(--color-default);
}
body:has(#home:target) a[href="#home"],
body:has(#chefs:target) a[href="#chefs"],
body:has(#gallery:target) a[href="#gallery"],
body:has(#contact:target) a[href="#contact"] {
    color: var(--color-default);
}
header>nav>a:after{
    content: "";
    width: 0%;
    margin-top: 5px;
    height: 0.15rem;
    display: block;
    background-color: var(--color-primary);
    transition: 0.5s;
}

header>nav>a:hover:after{  /*: On hover, only the width of the :after element changes to 100%.*/
    width: 100%;
}

body:has(#home:target) a[href="#home"]:after,
body:has(#chefs:target) a[href="#chefs"]:after,
body:has(#gallery:target) a[href="#gallery"]:after,
body:has(#contact:target) a[href="#contact"]:after{
    width: 100%;
}
body:not(:has(#chefs:target)):not(:has(#gallery:target)):not(:has(#contact:target)) a[href="#home"]:after {
    width: 100%;
} 
/*ICON PART*/
header>.icon{
    width: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.6rem;
    padding-top: 0.3rem;
    font-weight: 900;
}
header>.icon>.cb{
    opacity: 0;
    position: relative;
    right: -12px;bottom: 5px;
    transform: scale(2);
    transform-origin: top left;
    cursor: pointer;
}

header>.icon>.sun{
    display: none;
    color: var(--color-default);
    transition: 0.3s;
}
header>.icon>.moon{
    color: var(--color-default);
    transition: 0.3s;
}
header>.icon>.cb:hover~.sun,header>.icon>.cb:hover~.moon{
    color: var(--color-primary);
}

header>.icon>.cb:checked ~.sun{
    display: block;
}
header>.icon>.cb:checked ~.moon{
    display: none;
}
/*BURGER-MENU BUTTON*/
.burger-button{
    position: relative;
    display: none;
    cursor: pointer;
    order: 2;


}
header>.burger-button>button{
    border: none;
    background-color: transparent;
    transform: scale(1.7);
    margin-top: 0.18rem;
    transition: 0.5s;
    order: 2;
    color: var(--color-default);
    font-size: 0.93rem; 

}
header>.burger-button>.bb-cb{
    transform: scale(3);opacity: 0; z-index: 1;
    position: absolute;top: 6px;right: 2px;
    cursor: pointer;
}
header>.burger-button>button>i{
    transition: 0.3s;
}

header>.burger-button>.bb-cb:hover + button>i{
    color: var(--color-primary);
}

/*SIDE-BAR PART*/
header>.side-bar{
    background-color: var(--header-background-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: absolute;
    right: 0;top: 0;
    height: 100dvh;
    width:35%;
    display: none;
    z-index: 2;
    overflow:hidden;
    border-left: 0.01rem solid var(--color-primary) ;
}
header>.side-bar>nav{
    background-color: var(--header-background-color);
    font-size: 0.94rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;justify-content: space-evenly;
    height: 30dvh;
    padding: 15px 15px;
    font-size: 1.2rem;
    margin-top: 6rem;
    font-weight: 600;
    position: relative;
}
header>.side-bar>.close-icon{
    position: relative;
    z-index: 1;
}
header>.side-bar>.close-icon>.s-cb{/*Note position absolute and fixed shrinks height and width to content. that why u faced probelems!! so ad width to 100% to misgtat e this*/
    transform: scale(2);opacity: 0;z-index: 2;
    position: absolute;top: 1.975rem;right: 0.135rem;
    width: 100%;
    cursor: pointer;
}
header>.side-bar>.close-icon>button{ 
    border: none;
    background-color: rgba(255, 0, 0, 0);
    transform: scale(1.5);
    margin-top: 2.1rem;
    margin-left: 82%;
    transition: 0.5s;
    order: 2;
    color: var(--color-default);
    font-size: 0.8rem; 
    
}

header>.side-bar>.close-icon>.s-cb:hover{
    cursor: pointer;
}
header>.side-bar>.close-icon>.s-cb:hover ~ button>i{
    cursor: pointer;
    color: var(--color-primary);
}

header>.side-bar>.line-dec{
    width: 100%;
    height: 0.3rem;
    transform: translateX(100%);
    position: absolute;top:5rem;
    background-color: var(--color-primary);
    animation: line-animation 0.6s ease-in-out ;
}
@keyframes line-animation {
    from{
        width: 100%;
    }    
    to{
        width: 100%;
        transform: translate(0%);
    }

}

header>.side-bar>nav>a{
    color: var(--color-tertiary);
    transition: 0.5s;
}
.side-bar>nav>a:hover{
    color: var(--color-default);
    cursor: pointer;

}
.side-bar>nav>a:target{
    color: var(--color-default);
}
.side-bar>nav>a:after{
    content: "";
    width: 0%;
    margin-top: 5px;
    height: 0.15rem;
    display: block;
    background-color: var(--color-primary);
    transition: 0.5s;
}

.side-bar>nav>a:hover:after{  /*: On hover, only the width of the :after element changes to 100%.*/
    width: 100%;
}

.side-bar>nav>a:target:after{
    width: 100%;
}
header:has(.bb-cb:checked) .side-bar{
    display: block;
    animation: slideIn 1s ease forwards;

}
/* Animation only on showing */
@keyframes slideIn {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0%);
    }
  }
header:has(.s-cb:checked) .side-bar{
    display: none;
}



/*✅ Bootstrap Breakpoints Reference:
Breakpoint	Width Range
xl	≥ 1200px
lg	≥ 992px and <1200px
md	≥ 768px and <992px
sm	≥ 576px and <768px
xs	< 576p
*/
/* LG: Between 992px and 1199.98px (Bootstrap's large screens) */




/* Large (LG): ≥992px and <1200px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    html{
        font-size: 15px;
    }
    header{
        padding: 1.3rem 5rem;

    }
}

/*Medium (MD): ≥768px and <992px */
@media (min-width: 768px) and (max-width: 991.98px) {
    html{
        font-size: 14px;
    }
    header{
        padding: 1.3rem 4rem;

    }
}
  
/*Small (SM): ≥576px and <768px */
@media (min-width: 576px) and (max-width: 767.98px) {
    html{
        font-size: 13px;
    }
    
    header{
        padding: 1.3rem 4rem;

    }
    header>nav{
        display: none;
    }
    header>.icon{
        order:-1;
    }
    header>.burger-button{
        display: block;
    }
}


/* Extra Small (XS): <576px */
@media (max-width: 575.98px) {
    html{
        font-size: 12px;
        scroll-padding-top: 82px !important;
    }
    header{
        padding: 40.8px 44px;
    }
    header>nav{
        display: none;
    }
    header>.icon{
        order:-1;
        margin-bottom:0.3rem ;
    }
    header>.burger-button{
        display: block;
    }
}