.banner {margin-block: 5px;}
.banner .bannerBox {position: relative;}
.banner .carousel {position: relative; border-radius: 8px;}
.banner .carousel-inner img {height: 458px; width: 100%; object-fit: cover; border-radius: 8px;}
.banner .content {width: fit-content; height: fit-content; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: auto; position: absolute; inset: 0; z-index: 1;}
.banner .text {margin-bottom: 1.5rem;}
.banner .text > :first-child {font-size: calc(var(--fs-xl) + 10px); font-weight: 800; line-height: calc(1 + .3 / max(1, 1.0)); text-align: center; color: #fff; margin-bottom: 5px;}
.banner .text > :nth-child(2) {display: block; font-size: calc(var(--fs-md) + 4px); font-weight: 400; text-align: center; line-height: calc(1 + 0.8 / 1.0); color: #fff;}
.banner .text > :nth-child(3) {display: block; font-size: var(--fs-base); font-weight: 400; text-align: center; line-height: calc(1 + 0.8 / 1.0); color: #fff;}
.banner .content button {padding: 8px 24px;}
.banner .content button::before {background-color: #fff;}
.banner .content button:hover {color: #000;}
.banner .carousel-indicators {margin-bottom: 5px !important;}
.banner .carousel-indicators button {width: 8px; height: 8px; border-radius: 10px; border: 1.9px solid #fff; background: transparent !important; margin: .5rem;}
.banner .carousel-indicators button.active {width: 30px; background-color: #fff !important;}
.banner :where(.carousel-control-prev, .carousel-control-next) {height: fit-content; width: fit-content; margin-inline: auto; opacity: 1; inset: 0; top: unset; bottom: 9px; z-index: 4; transition: var(--transition);}
.banner :where(.carousel-control-prev, .carousel-control-next):hover {transform: scale(1.1);}
.banner .carousel-control-prev {right: 160px !important;}
.banner .carousel-control-next {left: 160px !important;}
.banner :where(.carousel-control-prev-icon, .carousel-control-next-icon) {width: 20px; height: 20px; filter: brightness(0) saturate(100%) invert(99%) sepia(77%) saturate(2%) hue-rotate(153deg) brightness(115%) contrast(100%) !important;}
.banner marquee {width: 100%; padding-block: 10px 9px; background-color: #fff; position: absolute; bottom: 50px;}
.banner marquee .info {display: flex; align-items: center; gap: 10px;}
.banner marquee .info > * {padding: 0 30px; position: relative;}
.banner marquee .info > *::after {position: absolute; width: 7px; height: 7px; content: " "; background-color: #000; border-radius: 100%; top: 50%; left: 0%; right: 0; transform: translate(-50%, -50%);}


/* TIME SECTION CSS */

.time {background-color: var(--c-light-bg);}
.time .wrapper {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 40px; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 87, 4, 0.79) 0%, #1626BA 85.14%); flex-wrap: wrap;} 
.time .title {display: flex;  align-items: center; gap: 8px;}
.time .title > img {width: 20px; height: 26px; filter: invert(1);}
.time .title > :nth-child(2) {color: #fff; font-size: var(--fs-md); font-style: 600; line-height: calc(1 + .3/max(1, 1.0));}
.time .title > :nth-child(3) {font-size: var(--fs-md); font-weight: 500; color: var(--_c-primary);}
.time .date {display: flex; align-items: center;}
.time .date > * {padding: 8px 10px 8px 8px; position: relative;}
.time .timeInfo {min-width: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.time .timeInfo > :first-child {font-size: calc(var(--fs-md) + 6px); font-weight: 700; line-height: 32px; color: #fff;}
.time .timeInfo > :nth-child(2) {font-size: calc(var(--fs-xs) - 2px); font-weight: 500; color: #fff;}
.time .date > :not(:last-child)::after {font-size: calc(var(--fs-md) + 4px); position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: ":"; color: #fff;}
.time .offer {display: flex; align-items: center; justify-content: center; color: #fff;}
.time .offer > img {filter: invert(1);}
.time .offer > :nth-child(2) {text-decoration: underline; text-underline-offset: .3rem;}

@media only screen and (max-width: 575px) {
   .time .wrapper {justify-content: center;}
}

/* TESTIMONIAL SECTION CSS */

.testimonial {background-color: var(--c-light-bg); padding-block: 36px 30px;}
.testimonial .title {background-color: #fff; padding: 10px 20px; border-radius: 8px; margin-bottom: 1.5rem;}
.testimonial .title > :first-child {font-size: var(--fs-md); font-weight: 600; line-height: calc(1 + .3/max(1, 1.0));}
.testimonial .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.testimonial .box {display: flex; align-items: center; justify-content: start; flex-direction: column; background-color: #fff; padding: 20px; padding-bottom: 115px; border-radius: 8px; position: relative;} 
.testimonial .review {display: flex; align-items: center; justify-content: center; gap: 5px;}
.testimonial .stars {line-height: 1;}
.testimonial .stars img{filter: var(--_c-light-filter);}
.testimonial .review > :last-child {font-size: calc(var(--fs-xs) - 2px); font-weight: 500; line-height: 1;}
.testimonial .box > :nth-child(2) {max-width: 261px; font-size: var(--fs-xs); font-weight: 400; line-height: 20px; text-align: center; padding-block: 20px; margin-inline: auto;}
.testimonial .customer {display: flex; flex-direction: column; align-items: center; position: absolute; bottom: 20px;}
.testimonial .customer img {height: 60px; border-radius: 8px; transition: var(--transition);}
.testimonial .box:hover .customer img {transform: scale(1.1);}
.testimonial .customer > :nth-child(2)  {font-size: var(--fs-base); font-weight: 700; text-align: center; margin-top: 15px;}
.testimonial .customer > :nth-child(3) {font-size: var(--fs-xs);}

@media only screen and (max-width: 991px) {
    .testimonial .wrapper {grid-template-columns: repeat(3, 1fr);}
}

@media only screen and (max-width: 768px) {
    .testimonial .wrapper {grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 475px) {
    .testimonial .wrapper {grid-template-columns: 1fr;}
}

/* BLOG SECTION CSS */

.blog {background-color: var(--c-light-bg); padding-block: 30px 60px;}
.blog .head {display: flex; align-items: center; justify-content: space-between; background-color: #fff; padding: 10px 20px; border-radius: 8px; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 10px;}
.blog .head > :first-child {font-size: var(--fs-md); font-weight: 600; line-height: calc(1 + .3/max(1, 1.0));}
.blog .head > :nth-child(2) {font-size: var(--fs-base); font-weight: 400; text-underline-offset: .3rem; text-decoration: underline; transition: var(--transition);}
.blog .head > :nth-child(2):hover {color: var(--c-primary);}
.blog .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.blog .content {background-color: #fff; border-radius: 8px; transition: var(--transition);}
.blog .content > :first-child {border-radius: 8px; width: fit-content; height: fit-content; overflow: hidden; transition: .6s ease;}
.blog .content img {width: 100%; height: 100%; border-radius: 8px; transition: .6s ease;}
.blog .content:hover img {transform: scale(1.1);}
.blog .text {padding: 15px 15px 10px;}
.blog .link {display: flex; align-items: center; gap: 10px;}
.blog .link > * {font-size: var(--fs-xs); font-weight: 600; color: var(--c-primary); transition: var(--transition); text-transform: capitalize;}
.blog .link > *:hover {color: #000;}
.blog .text > :nth-child(2) {display: block; font-size: calc(var(--fs-base) + 2px); font-weight: 600;  margin-block: 10px; line-height: 1; letter-spacing: .4px; transition: var(--transition);}
.blog .text > :nth-child(2):hover {color: var(--c-primary);}
.blog .text > :nth-child(3) {font-size: calc(var(--fs-base) - 2px); font-weight: 400;}
.blog .text > :nth-child(4) {font-size: calc(var(--fs-base) - 2px); color: #000000cc; margin-block: 8px 1rem;}
.blog .text > :nth-child(5) {display: block; font-size: calc(var(--fs-base) - 2px); font-weight: 600; padding-top: 10px; border-top: 1px solid var(--_c-blog-border);}

@media only screen and (max-width: 768px) {
    .blog .wrapper {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 575px) {
    .blog .wrapper {grid-template-columns: 1fr; justify-items: center;}
}

/* DELIVERY SECTION CSS */
.delivery {background-color: var(--c-light-bg); padding-bottom: 60px;}
.delivery .wrapper {display: flex;  align-items: center; justify-content: center; gap: 30px; background-color: #fff; padding: 10px; border-radius: 8px; flex-wrap: wrap;}
.delivery .content {display: flex; align-items: center; flex-wrap: wrap; gap: 15px;}
.delivery .content > img {width: 200px;}
.delivery .box {display: flex; align-items: center; gap: 20px; flex-wrap: wrap;}
.delivery .truck {background-color: var(--c-primary); padding: 10px; border-radius: 50%; outline: 7px solid rgba(0, 0, 0, .2); margin-right: 7px;}
.delivery .truck img {width: 28px; height: 28px;}
.delivery .text {display: flex; flex-direction: column; gap: 10px;}
.delivery .text > :first-child {font-size: calc(var(--fs-md) + 2px); font-weight: 700; line-height: calc(1 + .3/max(1, 1.0));}
.delivery .text > :nth-child(2) {font-size: calc(var(--fs-base) + 2px); font-weight: 500; color: #000000cc;} 
.delivery .box button {display: flex; align-items: center; gap: 8px; padding-block: 8px;}

@media only screen and (max-width: 768px) {
    .delivery .wrapper {gap: 20px;}
    .delivery .content {justify-content: center;}
}
@media only screen and (max-width: 475px) {
    .delivery .box {justify-content: center;}
}