:root {
   --primary-color: #237f5a;
   --primary-light: #48a17d;
   --secondary-color: #e6b800;
   --bg-color: #faf5ed;
   --bg-body: #fff;
   --card-bg: #f5f5f5;
   --text-color: #237f5a;
   --border-color: #dcdcdc;
   --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
   --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.1);
   --transition-speed: 0.3s;
   --font-cairo: 'Cairo', sans-serif;
   --font-poppins: 'Poppins', sans-serif;
   --transition: all 0.3s ease;
   --overlay: #00000082;
   --close-button: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
   --placeholder-color: #999999;
   --text-color-2: #333;
   --muted-color: #acacac;
   --btn-nav-shadow: 0px 4px 0px 0px #c1baafa3;
}

[data-theme="dark"] {
   --close-button: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
   --bg-color: #0F0F0F;
   --bg-body: #0F0F0F;
   --card-bg: #1A1A1A;
   --text-color: #f0f0f0;
   --border-color: #404040;
   --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.2);
   --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.3);
   --muted-color: #acacac;
   --overlay: #000000c9;
   --placeholder-color: #6c757d;
   --text-color-2: #bdbdbd;
   --btn-nav-shadow: 0px 4px 0px 0px #0c0c0c61;
}

/* =========================================
   Global Resets & Typography
   ========================================= */

* {
   margin: 0;
   padding: 0;
   transition: var(--transition);
}

body {
   background-color: var(--bg-body);
   color: var(--text-color);
   font-family: var(--font-poppins);
   transition: background-color var(--transition-speed), color var(--transition-speed);
   overflow-x: hidden;
   font-size: 16px;
   position: relative;
}

/* body::before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: radial-gradient(var(--primary-color) 2.3px, transparent 2.3px);
   background-size: 40px 40px;
   background-attachment: fixed;
   pointer-events: none;
   z-index: 0;
   opacity: 0.2;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-cairo);
   font-weight: 700;
}

a {
   text-decoration: none !important;
   color: inherit;
   transition: color var(--transition-speed);
}

img {
   max-width: 100%;
   height: auto;
}

/* =========================================
   Utility Classes & Base Decorations
   ========================================= */
.text-primary {
   color: var(--primary-color) !important;
}

.text-primary-custom {
   color: var(--primary-color) !important;
}

.text-muted {
   color: var(--muted-color) !important;
}

.text-gradient {
   background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.bg-body {
   background-color: var(--bg-body) !important;
}

.bg-card {
   position: relative;
   z-index: 1;
   background-color: var(--card-bg) !important;
}

.bg-primary-custom {
   background-color: var(--primary-color) !important;
}

.bg-texture-light {
   background-image: radial-gradient(var(--primary-color) 0.5px, transparent 0.5px) !important;
   background-size: 30px 30px !important;
   background-attachment: fixed !important;
}

.cursor-pointer {
   cursor: pointer;
}

.hover-lift {
   transition: transform var(--transition-speed);
}

.hover-lift:hover {
   transform: translateY(-5px);
}

.shadow-hover:hover {
   box-shadow: var(--shadow-hover);
}

.glass-effect {
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .glass-effect {
   background: rgba(26, 26, 26, 0.7);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ltr-text {
   direction: ltr;
   display: inline-block;
}

/* =========================================
   Buttons & Forms
   ========================================= */
.btn-primary-custom {
   background-color: var(--primary-color);
   color: white;
   border: none;
   transition: all var(--transition-speed);

}

.btn-primary-custom:hover {
   background-color: var(--primary-color);
   transform: translateY(-2px);
   box-shadow: var(--shadow-hover);
   color: white;
   background-color: var(--primary-light);
}

.btn-outline-custom {
   color: var(--primary-color);
   border: 2px solid var(--primary-color);
   background: transparent;
   transition: all var(--transition-speed);
}

.btn-outline-custom:hover {
   background-color: var(--primary-color);
   color: white;
   transform: translateY(-2px);
}

.btn-outline-secondary {
   color: var(--primary-color);
   border-color: var(--primary-color);
}

.btn-outline-secondary:hover {
   color: var(--primary-color);
   border-color: var(--bg-color);
   background-color: var(--bg-color);
}

.btn.call-to-action {
   color: var(--primary-color);
   border-color: var(--primary-color);
}

.btn-nav {
   color: var(--text-color);
   background: none;
   border: 1px solid var(--primary-color);
   border-radius: 50%;
   width: 40px;
   height: 40px;
}

.form-control {
   color: var(--text-color);
   background-color: var(--card-bg);
   border-color: var(--primary-color);
   outline: 0;
}

.form-control:focus {
   color: var(--text-color);
   background-color: var(--card-bg);
   border-color: var(--primary-color);
   outline: 0;
   box-shadow: 0 0 0 .25rem #1f6549;
}

.form-control::placeholder {
   color: var(--placeholder-color);
   opacity: 1;
}

label {
   margin-left: 10px;
   margin-right: 10px;
}

/* =========================================
   Animations
   ========================================= */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.fade-in-up {
   animation: fadeInUp 0.8s cubic-bezier(0.2, 1, 0.3, 1) both;
}

@keyframes float {
   0% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(-10px);
   }

   100% {
      transform: translateY(0px);
   }
}

.animate-float {
   animation: float 3s ease-in-out infinite;
}

@keyframes modalAppear {
   from {
      opacity: 0;
      transform: scale(0.9);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

/* =========================================
   Navbar Layout
   ========================================= */
.navbar {
   padding: 1rem 0;
   transition: var(--transition);
   background: var(--card-bg);
   border-bottom: 1px solid var(--border-color);
   padding: 0.25rem 0;
}

.navbar.scrolled {
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   padding: 5px 0;
   box-shadow: var(--shadow-soft);
}

.navbar.scrolled .img-logo-nav {
   width: 70px;
}

.img-logo-nav {
   width: 120px;
   aspect-ratio: 1.5 / 1;
   background-image: url("../imgWeb/logo.png");
   background-size: contain;
   background-repeat: no-repeat;
}

.navbar button {
   color: var(--text-color) !important;
}

.navbar-toggler {
   color: var(--primary-color);
   font-size: 20px !important;
   font-weight: normal !important;
   border-radius: 50%;
   border: 1px solid var(--text-color) !important;
   width: 40px;
   height: 40px;
}

.nav-link {
   color: var(--text-color) !important;
   position: relative;
   font-weight: 500;
   font-size: 16px;
}

.nav-link::after {
   content: '';
   position: absolute;
   bottom: 5px;
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 2px;
   background-color: var(--primary-color);
   transition: width var(--transition-speed);
   opacity: .5;
}

.nav-link:hover::after,
.nav-link.active::after {
   width: 60%;
}

.moving-section {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   max-height: 100px;
   opacity: 1;
   overflow: hidden;
}

.moving-section.section-hidden {
   max-height: 0;
   opacity: 0;
   transform: translateY(-10px);
}

.nav-bootom {
   bottom: -1px !important;
   /* border-top: 1px solid var(--border-color); */
   z-index: 1000;
   box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.1);
}

.nav-bootom p {
   font-size: 14px;
}

/* =========================================
   Footer Layout
   ========================================= */
#contact {
   z-index: 1;
   position: relative;
   background-color: rgb(12 12 12) !important;
}

.col-footer {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.col-footer ul {
   align-items: center;
   list-style: none;
   padding: 0;
}

.col-footer ul li {
   display: flex;
   align-items: center;
}

.footer-bottom {
   border-top: 1px solid #5d5d5d;
}

.footer-order button {
   font-size: 16px;
}

.footer-order {
   display: flex;
   gap: 2px;
   justify-content: center;
   margin-top: 1rem;
   margin-bottom: 1rem;
}

@media (max-width: 768px) {
   .footer-order {
      flex-direction: column;
   }
}

/* =========================================
   FAB & Action Elements
   ========================================= */
.fab-container {
   z-index: 1000;
}

.btn-fab {
   width: 45px;
   height: 45px;
   transition: transform var(--transition-speed);
   border: none;
   font-size: 22px;
}

.btn-fab:hover {
   transform: scale(1.1);
   background-color: var(--primary-color);
}

.btn-whatsapp {
   background-color: #25d366;
   color: white;
}

.btn-cart {
   background-color: var(--primary-color);
   color: white;
}

.cart-count-badge {
   font-size: 14px;
}

.Floating-container {
   bottom: 70px;
   right: 1.5rem;
}

.selected-option {
   border: 2px solid var(--primary-color) !important;
}

/* =========================================
   Hero Section
   ========================================= */
.hero-section {
   display: flex;
   padding-top: 0 !important;
   justify-content: center;
}

.badge-hero {
   display: inline-block;
   background: rgb(46 255 189 / 17%);
   padding: 0.6rem 1.5rem;
   border-radius: 50px;
   color: #fff;
   font-size: 0.9rem;
   font-weight: 600;
   margin-bottom: 1.5rem;
   backdrop-filter: blur(10px);
   border: 1px solid var(--primary-color);
}

.btn-hero-index {
   display: inline-block;
   background: rgb(26 80 58 / 67%);
   padding: 5px 20px;
   border-radius: 50px;
   color: #fff;
   font-size: 0.9rem;
   font-weight: 700;
   backdrop-filter: blur(17px);
}

.btn-bottom-nav {
   transition: all 0.1s ease-in-out;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.btn-bottom-nav.active {
   border-radius: 50%;
   bottom: 35%;
   position: absolute;
   border: 5px solid var(--card-bg);
   display: flex;
   background: var(--primary-color);
   color: white;
   padding: 0;
   justify-content: center;
   width: 60px;
   height: 60px;
}

.btn-bottom-nav.active p {
   display: none;
}

.btn-bottom-nav.active i {
   font-size: 25px !important;
}

.carousel-caption div {
   margin-bottom: 30px !important;
}

.badge-hero i {
   color: goldenrod;
}

#heroCarousel {
   width: 100%;
   max-height: 70vh;
   padding: 10px;
   overflow: hidden;
   border-radius: 30px;
   aspect-ratio: 2 / 1;
}

#heroCarousel .carousel-item img {
   border-radius: 30px;
}

.titel-hero {
   font-size: 1.7rem;
}

.desc-hero {
   font-size: 0.8rem;
}

.carousel-caption {
   margin: 0;
   z-index: 2;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
   padding: 10px;
}

.text-white-90 {
   color: rgba(255, 255, 255, 0.9) !important;
}

.hero-img {
   object-fit: cover;
   max-height: 500px;
   width: 100%;
}

.hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--overlay);
   z-index: 1;
   backdrop-filter: blur(7px);
}

@media (max-width: 991px) {
   .hero-section {
      text-align: center;
   }

   .hero-image-wrapper {
      margin-top: 2rem;
   }
}

/* =========================================
   Features Section
   ========================================= */
.feature-card {
   border: none;
   box-shadow: 0px 3px 4px 0px rgb(0 0 0 / 17%);
   border-top: 3px solid var(--primary-color);
   transition: var(--transition);
}

.feature-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
}

.icon-box {
   width: 60px;
   height: 60px;
}

.section-title {
   font-size: 1.7rem;
   font-weight: 500 !important;
}

.section-subtitle {
   font-size: 1rem;
}

/* =========================================
   Products & Categories Catalog
   ========================================= */
#menu {
   overflow-x: clip;
}

#categories-container {
   padding-bottom: 5px;
   overflow-x: auto;
   scroll-behavior: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   -ms-overflow-style: none;
   cursor: grab;
   user-select: none;
}

#categories-container.active {
   cursor: grabbing;
   scroll-behavior: auto;
}

#categories-container::-webkit-scrollbar {
   display: none;
}

.category-wrapper {
   transition: top 0.3s ease, box-shadow 0.3s ease;
   border-bottom: 1px solid transparent;
}

.category-wrapper.is-pinned {
   box-shadow: 0px 6px 6px -5px rgb(0 0 0 / 18%);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .category-wrapper.is-pinned {
   box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.5);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-category {
   color: var(--text-color);
   border: 1px solid var(--border-color);
   transition: all var(--transition-speed);
   white-space: nowrap;
   padding: 5px;
   font-size: 14px;
}

.btn-category.active,
.btn-category:hover {
   background-color: var(--primary-color) !important;
   color: white;
   border-color: var(--primary-color);
}

.product-card {
   display: flex;
   flex-direction: column;
   box-shadow: 0px 3px 4px 0px rgb(0 0 0 / 9%);
   border-radius: 20px;
   overflow: hidden;
   position: relative;
   transition: all var(--transition-speed);
   border: 1px solid var(--border-color);
   height: 100%;
}

.product-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
}

.product-img-wrapper {
   height: 220px;
   overflow: hidden;
   position: relative;
}

.product-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.product-card:hover .product-img {
   transform: scale(1.1);
}

.product-name {
   font-size: 1rem;
}

.product-description {
   font-size: 16px;
}

.product-price {
   font-size: 1rem;
}

.product-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(35, 127, 90, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
   cursor: pointer;
   z-index: 2;
}

.product-card:hover .product-overlay {
   opacity: 1;
}

.view-details-icon {
   width: 50px;
   height: 50px;
   background: #3333334a;
   backdrop-filter: blur(6px);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   transform: translateY(20px);
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.product-card:hover .view-details-icon {
   transform: translateY(0);
}

.btn-add-to-cart {
   font-size: 22px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: var(--primary-color);
   color: white;
   border: none;
   transition: all var(--transition-speed);
}

/* =========================================
   Modals & Interaction
   ========================================= */
.modal-content {
   background-color: var(--card-bg);
   color: var(--text-color);
   width: 95% !important;
}

.modal-dialog-centered {
   justify-content: center;
}

#productModal .modal-content {
   animation: modalAppear 0.4s ease-out;
}

.modal-backdrop.show {
   backdrop-filter: blur(3px);
   background: #000000c7;
   opacity: 1;
}

.btn-close {
   background-image: var(--close-button) !important;
}

.modal-body::-webkit-scrollbar {
   width: 8px;
}

.modal-body::-webkit-scrollbar-track {
   background: var(--bg-color);
   border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
   background: #d1d1d1;
   border-radius: 4px;
   border: 2px solid var(--bg-color);
}

.modal-body::-webkit-scrollbar-thumb:hover {
   background: var(--primary-color);
}

.modal-footer {
   border-top: 1px solid var(--border-color);
}

.product-detail-img-wrapper {
   max-height: 350px;
   object-fit: cover;
}

@media (min-width: 576px) {
   .modal-dialog {
      max-width: 800px;
   }

   .product-detail-img-wrapper {
      padding: 10px;
   }

   #modalProductImg {
      border-radius: 1rem;
   }
}

#toast-container {
   top: 65px;
}

.cart-item-img {
   width: 70px;
   height: 70px;
   object-fit: cover;
   border-radius: 12px;
}

/* =========================================
   About Page & Branches
   ========================================= */
.about-hero-img {
   border-radius: 30px;
   box-shadow: var(--shadow-hover);
   object-fit: cover;
   max-height: 500px;
}

.story-section {
   position: relative;
   overflow: hidden;
}

.story-card {
   background: var(--bg-body);
   border-radius: 20px;
   padding: 2.5rem;
   border: 1px solid var(--border-color);
   transition: var(--transition);
   height: 100%;
}

.story-card:hover {
   border-color: var(--primary-color);
   box-shadow: var(--shadow-soft);
}

.year-badge {
   display: inline-block;
   padding: 0.5rem 1.2rem;
   background: var(--primary-color);
   color: white;
   border-radius: 50px;
   font-weight: 700;
   margin-bottom: 1rem;
   font-family: var(--font-cairo);
}

.branch-card {
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid var(--border-color);
   background: var(--bg-body);
   transition: var(--transition);
   height: 100%;
}

.branch-card:hover {
   transform: translateY(-10px);
   box-shadow: var(--shadow-hover);
}

.branch-img-wrapper {
   height: 250px;
   overflow: hidden;
}

.branch-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.branch-card:hover .branch-img {
   transform: scale(1.1);
}

/* =========================================
   Masonry Gallery
   ========================================= */
.gallery-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   grid-auto-rows: 240px;
   grid-gap: 20px;
   grid-auto-flow: dense;
}

.gallery-item {
   position: relative;
   overflow: hidden;
   border-radius: 20px;
   cursor: pointer;
}

.gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.gallery-item:hover img {
   transform: scale(1.15);
}

.gallery-item::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, transparent 0%, rgba(35, 127, 90, 0.4) 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
}

.gallery-item:hover::after {
   opacity: 1;
}

.gallery-item.wide {
   grid-column: span 2;
}

.gallery-item.tall {
   grid-row: span 2;
}

.gallery-item.big {
   grid-column: span 2;
   grid-row: span 2;
}

@media (max-width: 991px) {
   .gallery-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 200px;
   }
}

@media (max-width: 576px) {
   .gallery-grid {
      grid-template-columns: 1fr;
      grid-auto-rows: 250px;
   }

   .gallery-item.wide,
   .gallery-item.big {
      grid-column: span 1;
   }

   .gallery-item.tall,
   .gallery-item.big {
      grid-row: span 1;
   }
}

/* =========================================
   Account & Checkout
   ========================================= */
.checkout-block {
   background-color: var(--bg-body);
   border: 1px solid var(--border-color);
   border-radius: 20px;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
   box-shadow: var(--shadow-soft);
}

.menu-page,
.checkout-page {
   padding-top: 200px !important;
}

.accordion-button:not(.collapsed) {
   color: var(--primary-color);
   background-color: transparent;
   box-shadow: none;
}

.accordion-button::after {
   background-size: 1.25rem;
   transition: transform 0.3s ease;
}

.accordion-item {
   border-radius: 20px !important;
   overflow: hidden;
}

.bg-success-subtle {
   background-color: rgba(35, 127, 90, 0.1) !important;
}

.bg-warning-subtle {
   background-color: rgba(230, 184, 0, 0.1) !important;
}

.table> :not(caption)>*>* {
   background-color: transparent !important;
   color: var(--text-color);
}

/* =========================================
   Graphics & Decorative Elements
   ========================================= */
.img-graphic {
   opacity: 0.3;
   width: 350px;
   right: 0;
}

.img-graphic-2 {
   transform: rotate(40deg);
   right: -54px;
}

/* =========================================
   RTL Support Overrides
   ========================================= */
[dir="rtl"] body {
   font-family: var(--font-cairo);
   text-align: right;
}

[dir="rtl"] .hero-section {
   text-align: right;
}

[dir="rtl"] .ms-auto {
   margin-right: auto !important;
   margin-left: initial !important;
}

[dir="rtl"] .me-1 {
   margin-left: 0.25rem !important;
   margin-right: initial !important;
}

[dir="rtl"] .ms-2 {
   margin-right: 0.5rem !important;
   margin-left: initial !important;
}

[dir="rtl"] .fab-container {
   right: auto;
   left: 1.5rem;
}

.fab-container {
   width: auto;
}

[dir="rtl"] .rtl-flip {
   transform: rotate(180deg);
}

[dir="rtl"] .navbar-brand {
   margin-right: 0;
   margin-left: 1rem;
}

[dir="rtl"] .position-absolute.top-0.start-100 {
   right: 100% !important;
   left: auto !important;
   transform: translate(50%, -50%) !important;
}

@media (max-width: 991px) {
   [dir="rtl"] .hero-section {
      text-align: center;
   }
}

/* =========================================
   Global Responsive Tweaks
   ========================================= */
@media (max-width: 991px) {
   .carousel-caption a {
      font-size: 14px;

   }

   .carousel-caption div {
      margin-bottom: 30px !important;
   }
}

@media (max-width: 768px) {
   .container {
      max-width: 85%;
   }

   .carousel-control-next,
   .carousel-control-prev {
      display: none;
   }

   .product-img-wrapper,
   .product-body {
      width: 50%;
   }

   .product-card {
      flex-wrap: wrap;
      justify-content: center;
      flex-direction: row;
   }

   .product-body {
      padding: 7px 10px !important;
   }

   .product-description {
      display: flex;
      font-size: 15px;
      margin-bottom: 5px !important;
      align-items: center;
   }

   .btn-add-to-cart {
      font-size: 18px;
      width: 35px;
      height: 35px;
   }

   .product-name {
      font-size: 18px;
   }

   #cart-total-price {
      font-size: 18px;
   }

   .navbar-brand img {
      width: 50px;
   }

   #heroCarousel {
      aspect-ratio: 16 / 9;
   }

   .carousel-indicators {
      margin-bottom: 15px;
   }

   .carousel-indicators [data-bs-target] {
      width: 10px;
      border: 0 !important;
   }

   .carousel-caption div {
      margin-bottom: 7px !important;
   }
}

@media (max-width: 576px) {
   .container {
      max-width: 95%;
   }

   .row-about-page {
      flex-direction: column-reverse;
   }
}

.form-select {
   color: var(--text-color);
}

@media (max-width: 480px) {
   .container {
      max-width: 98%;
   }
}