/* ============================================
   FONT LOADING - Use font-display:swap for faster render
   ============================================ */
@font-face {
  font-family: 'Inter';
  src: url('/frontend_assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/frontend_assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  --primary-color: #333;
  --secondary-color: #666;
  --accent-color: #f1c40f;
  --background-color: #f6efd6;
  --background-color-2: #F4F7FF;
  --color-ivory: #FFFEF9;
  --color-charcoal: #1A1A1A;
  --color-rust: #C85A3C;
  --color-sage: #8A9A7B;
  --color-cream: #F5F1E8;
  --color-terracotta: #D97757;
  --color-olive: #6B7560;
  --text-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-light: 300;
  --font-weight: 400;
  --font-size: 14px;
  --small-font-size: 13px;
  --line-height: 1.5;
  --heading-font-weight: 700;
  --heading-font-size: 2rem;
  /* Shared values promoted to variables */
  --brand-color: #c36a4e;
  --brand-shadow: 0 10px 28px rgba(195,106,78,.21), 0 2px 8px rgba(195,106,78,.13);
  --brand-shadow-sm: 4px 6px 6px rgba(195,106,78,.13);
  --border-radius-pill: 50px;
  --border-radius-card: 20px;
  --transition-fast: 0.3s ease;
  --transition-smooth: 0.6s cubic-bezier(0.16,1,0.3,1);
}

/* ============================================
   BASE
   ============================================ */
body {
  font-family: var(--text-font-family);
  font-weight: var(--font-weight);
  font-optical-sizing: auto;
  font-style: normal;
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--primary-color);
}

h1 { font-size: 28px; font-weight: 500; }
h2 { font-size: 25px; font-weight: 500; }
h3 { font-size: 22px; font-weight: 500; }
h4 { font-size: 20px; font-weight: 500; }
h5 { font-size: 18px; font-weight: 500; }

/* ============================================
   UTILITIES
   ============================================ */
.bg-body-primary  { background-color: var(--background-color); }
.bg-body-secondary{ background-color: var(--background-color-2); }
.bg-body          { background: var(--color-cream); overflow-x: hidden; }
.section-bg       { background-color: #fff; }
.font-normal      { font-size: var(--font-size); }
.w-80             { width: 70%; }
.text-right       { text-align: right; }
.text-justify     { text-align: justify; }
.text-md-right    { text-align: right; }
.cursor-pointer   { cursor: pointer; }
.cloumn           { flex-direction: column; }
.flex-direction-column { flex-direction: column; }
.border-1         { border-bottom: 1px solid #ccc; }
.border-rounded   { border-radius: var(--border-radius-card); }
.heading-size     { font-size: 20px; }
.medium-text      { font-size: 18px; }
.text-maroon      { color: #802636 !important; }
.bg-maroon        { background-color: #802636 !important; }
.bg-light-pink    { background-color: #fff5f6 !important; }
.text-maroon-light{ color: #dcafb7 !important; }
.border-maroon    { border-color: #802636 !important; }
.no-scrollbar     { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ============================================
   NAVBAR / LOGO
   ============================================ */
.navbar .logo { max-width: 200px; display: inline-block; vertical-align: middle; }
.navbar .logo img { width: 100%; height: auto; }
.sidebar-logo { width: 40%; }
.sidebar-logo img { width: 80%; height: 50px; }

/* ============================================
   ROTATING TEXT
   ============================================ */
.rotating-text { height: 30px; line-height: 30px; }
.rotating-text p { display: none; }
.rotating-text p.active {
  color: #231f20;
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

/* ============================================
   MOBILE ICONS
   ============================================ */
.mobile-icons { width: 40%; margin-bottom: 5px; }

/* ============================================
   OVERLAY & SIDE MENU
   ============================================ */
#menuOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: none;
  z-index: 900;
}
#menuOverlay.active { display: block; }

#sideMenu {
  position: fixed;
  top: 0; left: 0;
  max-width: min(92vw, 25rem);
  width: 100%;
  height: 100vh;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0,0,0,.1);
  transform: translateX(-100%);
  transition: transform .35s ease;
  z-index: 1030;
  overflow-y: auto;
}
#sideMenu.active { transform: translateX(0); }

/* ============================================
   MENU
   ============================================ */
.menu-title {
  font-size: 15px;
  font-weight: 600;
  margin: 15px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.toggle-icon { font-weight: bold; }
.submenu { display: none; padding-left: 10px; }
.submenu-item {
  display: flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  text-decoration: none;
  color: #000;
}
.submenu-item img { width: 30px; border-radius: 4px; margin-right: 10px; }
.badge-yellow { background: yellow; padding: 2px 6px; font-size: 11px; border-radius: 3px; }
.badge-new    { background: #00d084; color: #fff; padding: 2px 6px; font-size: 11px; border-radius: 3px; }
.emoji        { width: 20px; }
.menu-link    { display: block; padding: 12px 0; border-bottom: 1px solid #eee; }

/* ============================================
   CATEGORY ICONS
   ============================================ */
.category-icons img { width: 80px; height: auto; }
.category-icons h4  { margin-top: 5px; font-size: 14px; font-weight: 500; color: #000; margin-bottom: 0; }

/* ============================================
   FEATURE ITEMS
   ============================================ */
.feature-items {
  padding: 10px 5px;
  border-radius: 10px;
  border: 1px solid #000;
  background-color: var(--background-color);
}
.feature-item { text-align: center; flex: 1; border-right: 1px solid #ccc; }
.feature-item:last-child { border-right: none; }
.feature-item i  { font-size: 20px; margin-bottom: 10px; }
.feature-item h4 { font-size: 11px; font-weight: 500; color: #333; margin: 0; }
.divider { width: 2px; height: 40px; background: #ccc; }

/* ============================================
   NAV TABS
   ============================================ */
.nav-tabs .nav-item .nav-link:first-child { margin-right: 10px; }
.nav-tabs .nav-item .nav-link { color: #000 !important; padding: 5px 15px; }
.nav-tabs .nav-item .nav-link:hover,
.nav-tabs .nav-item .nav-link.active {
  color: var(--brand-color) !important;
  border-radius: var(--border-radius-card);
  box-shadow: 0 1px 4px rgba(195,106,78,.13);
  transform: scale(1.10);
}
.nav-tabs .nav-item .nav-link:hover { background: #fff; }

.custom-tabs .nav-link {
  border: none;
  color: #333;
  padding: 8px 18px;
  font-weight: 500;
  border-radius: var(--border-radius-card);
  background: transparent;
}
.custom-tabs .nav-link.active {
  background: #fff;
  color: #f55e4e;
  font-weight: 600;
  border-radius: var(--border-radius-card);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* ============================================
   PRODUCTS
   ============================================ */
.product-image { height: 330px; object-fit: cover; }
.product-name  { font-size: 14px; font-weight: 600; color: #333; }

.products-conatiner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.product-item {
  text-decoration: none;
  color: #000;
  display: block;
  flex: 0 0 calc(20% - 20px);
  text-align: center;
  cursor: pointer;
  background: transparent;
}
.product-item img {
  width: 100%;
  max-width: 220px;
  display: block;
  margin: 0 auto 10px;
  border-radius: 7px;
  opacity: 1;
  transition: opacity .5s ease-in-out;
}
.product-item:hover img {
  transform: scale(1.045) rotateZ(-0.7deg);
  box-shadow: var(--brand-shadow);
  z-index: 1;
  transition: transform .21s cubic-bezier(.41,1.51,.37,1.11), box-shadow .22s cubic-bezier(.41,1.51,.37,1.11);
  will-change: transform, box-shadow;
}
.product-item p {
    margin-bottom: 0 !important;
}

/* ============================================
   VIEW ALL BUTTON
   ============================================ */
.view-all-btn {
  font-size: small;
  display: inline-block;
  padding: 10px 100px;
  color: #000;
  border: 1px solid #1F1F1D;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border-radius: 7px;
}
.view-all-btn:hover,
.view-all-btn:active,
.view-all-btn:focus {
  color: var(--brand-color);
  background: none !important;
  border-color: var(--brand-color);
  transform: scale(1.045) rotateZ(-0.7deg);
  box-shadow: var(--brand-shadow);
}

/* ============================================
   HOME SLIDER
   ============================================ */
#homeSlider .carousel-item img { height: 100%; object-fit: cover; }
#homeSlider .carousel-caption {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  max-width: 500px;
}
#homeSlider h2 { font-size: 2rem; font-weight: 400; }
#homeSlider p  { font-size: 1.2rem; }

.carousel-caption a {
  font-weight: 500;
  border-radius: var(--border-radius-card);
  padding: 5px 30px;
  background-color: #000;
  color: #fff;
  border: none;
}
.carousel-caption a:focus,
.carousel-caption a:focus-visible,
.carousel-caption a:active,
.carousel-caption a:hover { background-color: #fff; color: #000; }

.caption-left   { left: 15%; right: auto; text-align: left; }
.caption-center { left: 35%; transform: translate(-50%, -50%); text-align: center; }
.caption-right  { right: 15%; left: auto; text-align: right; }

@media (min-width: 1200px) {
  #homeSlider .carousel-inner { height: 450px; }
}

/* ============================================
   OUR INFO
   ============================================ */
#our-info { padding: 20px; }
#our-info h1 { font-size: 24px; color: #000; }
#our-info p  { font-size: 15px; margin-bottom: 0; }
#our-info .info-box:hover h1 { color: var(--brand-color) !important; font-size: 26px; font-weight: 700; }
#our-info .info-box:hover p  { color: var(--brand-color) !important; }

/* ============================================
   YOUR IDEA / OUR BRUSH
   ============================================ */
#your-idea-our-brush ul { padding-left: 2rem !important; }
.customize-image { width: 70%; }
.right-side-desc .view-all-btn { padding: 10px 20px; }
.left-side-desc  { text-align: right; }

/* ============================================
   SLIDING TEXT (marquee)
   ============================================ */
.sliding-text { overflow: hidden; }
.scroll-container { display: flex; width: 200%; }
.scroll-content {
  display: flex;
  gap: 50px;
  animation: scroll-left 25s linear infinite;
}
.item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 16px;
  color: #fff;
}
.item svg { width: 20px; height: 20px; flex-shrink: 0; }

@keyframes scroll-left {
  to { transform: translateX(-50%); }
}

/* ============================================
   ABOUT US / INSPIRED BY ART
   ============================================ */
#about-us-icons-with-content .box-container { display: flex; }
#about-us-icons-with-content .box { text-align: center; width: 33.33%; }
#about-us-icons-with-content img,
#inspired-by-art img { width: 30%; }

#whoWeAreSlider .owl-carousel .item:hover span,
#about-us-icons-with-content .box:hover img,
#about-us-icons-with-content .box:hover h4,
#inspired-by-art .col:hover img,
#inspired-by-art .col:hover h4 {
  filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(360%) hue-rotate(350deg);
  font-size: 20px;
  text-align: center;
}
.owl-carousel .item:hover span,
#about-us-icons-with-content h4,
#inspired-by-art h4 { font-size: 18px; font-weight: 200; margin-bottom: 0; }
#about-us-icons-with-content p { font-size: 16px; }

/* ============================================
   WHO WE ARE SLIDER
   ============================================ */
#whoWeAreSlider .item { position: relative; }
#whoWeAreSlider img  { object-fit: cover; }
.item-box {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #000;
  padding: 10px 20px;
  border-radius: var(--border-radius-card);
  white-space: nowrap;
}

/* ============================================
   OWL NAV
   ============================================ */
.owl-nav button {
  position: absolute;
  top: 40%;
  width: 40px;
  height: 40px;
  background: #bab2afa1 !important;
  color: #fff !important;
  border-radius: 50%;
}
.owl-nav .owl-prev { left: -20px; }
.owl-nav .owl-next { right: -20px; }
.owl-stage-outer   { overflow: hidden; }

/* ============================================
   SLIDERS
   ============================================ */
.slider1 { position: relative; overflow: hidden; }
.slider1 .slider__item:hover { color: var(--brand-color); font-size: 16px; font-weight: 600; }

.slider { position: relative; overflow: hidden; }
.slider__wrapper { display: flex; transition: transform .6s ease; gap: 15px; }

.slider__control {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  color: #fff;
  text-align: center;
  opacity: .5;
  height: 50px;
  transform: translateY(-25%);
  background: rgba(0,0,0,.5);
}
.slider__control:hover,
.slider__control:focus { color: #fff; text-decoration: none; outline: 0; opacity: .9; }
.slider__control_left  { left: 0; }
.slider__control_right { right: 0; }

.slider__control::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: transparent no-repeat center center / 100% 100%;
}
.slider__control_left::before  { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); }
.slider__control_right::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); }

.slider__item .item-wrapper .item-box { display: flex; justify-content: center; }
.slider__item .item-wrapper .item-box span {
  background: #fff;
  position: absolute;
  bottom: 25px;
  width: max-content;
  padding: 10px 20px;
  border-radius: var(--border-radius-card);
}
.slider__item .item-wrapper .rating-box { display: flex; justify-content: center; }
.slider__item .item-wrapper .rating-box span {
  background: #fff;
  margin-top: -30px;
  width: max-content;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: var(--brand-shadow-sm);
}
.slider__item .item-wrapper .rating-box span i { color: #f55e4e; width: 20px; }

/* ============================================
   CARDS
   ============================================ */
.card { border: none; }
.card-body { padding: 0; border: none; }
.card-footer {
  border: 1px solid #f6f6f6;
  border-top: none;
  margin-top: -21px;
  padding: 30px 10px 10px;
  background: transparent;
  text-align: center;
  box-shadow: 2px 5px 5px 5px rgba(195,106,78,.13);
}
.card-hover:hover { box-shadow: 0 .25rem .5rem rgba(0,0,0,.15) !important; transition: .3s ease; }
.card-image-container { width: 100%; }
.card-image-container img { width: 100%; height: auto; max-height: 100%; margin: auto; }

/* ============================================
   FOOTER
   ============================================ */
.footer-section { background-color: #f7f5f3; }
.footer-links li a { color: #333; text-decoration: none; display: block; padding: 2px 0; font-size: 15px; }
.footer-links li a:hover { color: var(--brand-color); }

/* ============================================
   OWNERS BOX
   ============================================ */
.owners-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed black;
  padding: 1rem 2rem 0;
  gap: 20px;
}
.owners-box .content p { padding: 0 20px; line-height: 30px; font-size: 1.15rem; font-weight: 400; }

/* ============================================
   CONTACT
   ============================================ */
.contact-details { padding: 0 100px; }
.contact-details a, a[href^="mailto:"] { color: #000; text-decoration: none; }
.contact-details h4 { line-height: 25px; }
.contact-form form textarea,
.contact-form form input,
.contact-form form select { padding: 10px; font-size: 16px; margin-bottom: 20px; }
.contact-form input[type="checkbox"] { width: 20px; height: 20px; margin-right: 5px; }
.contact-form button {
  margin-top: 5px;
  width: 100%;
  background-color: #000;
  color: #fff;
  font-size: 18px;
  padding: 12px;
  border-radius: 0;
}
.contact-form button:hover {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  transition: background-color .6s ease-in-out;
}

/* ============================================
   GALLERY
   ============================================ */
.gallery-filter {
  text-align: center;
  margin: 40px 0;
}
.gallery-filter span {
  cursor: pointer;
  padding: 6px 16px;
  margin: 0 6px;
  border-radius: var(--border-radius-card);
  font-size: 15px;
  color: #333;
}
.gallery-filter span.active { background: #f1f1f1; }

.gallery-grid { column-count: 4; column-gap: 20px; }
.gallery-item { break-inside: avoid; margin-bottom: 20px; }
.gallery-item img { width: 100%; display: block; border-radius: 2px; transition: transform .3s ease; }
.gallery-item img:hover { transform: scale(1.02); }
.glightbox-container { background: rgba(191,162,79,.95); }

/* ============================================
   TESTIMONIALS
   ============================================ */
#testimonials.owl-carousel  { position: relative; }
#testimonials .owl-stage-outer { overflow: visible; }
#testimonials .owl-item { padding: 20px 15px; min-width: 0; }

.testimonial-card {
  background: #fff;
  border-radius: 18px;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.testimonial-img { position: relative; width: 100%; overflow: hidden; border-radius: 18px 18px; }
.testimonial-img img { width: 100%; height: auto; display: block; object-fit: cover; }

.rating-badge {
  margin: -35px 0 0;
  width: max-content;
  background: #fff;
  padding: 8px 18px;
  border-radius: 5px;
  font-size: 16px;
  color: #f5b301;
  letter-spacing: 2px;
  box-shadow: var(--brand-shadow-sm);
  z-index: 2;
}
.testimonial-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 18px 0;
  text-align: center;
}
.testimonial-content h4 { font-size: 20px; font-weight: 600; margin-bottom: 10px; color: #222; }
.testimonial-content p  { font-size: 14px; line-height: 1.7; color: #444; margin: 0; white-space: normal; word-break: break-word; overflow-wrap: break-word; }
.testimonial-card img   { transition: transform .4s ease; }
.testimonial-card:hover img { transform: scale(1.04); }

#testimonials .owl-nav button {
  position: absolute;
  top: 45%;
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,.8) !important;
  color: #fff !important;
  border-radius: 50%;
  font-size: 22px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
#testimonials .owl-nav .owl-prev { left: -20px; }
#testimonials .owl-nav .owl-next { right: -20px; }
#testimonials .owl-dots { margin-top: 20px; }
#testimonials .owl-dot span       { background: #ccc; }
#testimonials .owl-dot.active span{ background: #000; }

/* ============================================
   TIMELINE
   ============================================ */
.timeline-section  { display: flex; margin: auto; }
.timeline-left     { width: 10%; position: sticky; top: 110px; align-self: flex-start; }
.timeline-left ul  { list-style: none; padding: 0; margin: 0; }
.timeline-left li  { font-size: 18px; color: #999; margin: 1.5rem 0; }
.timeline-left li.active { color: #000; font-weight: 600; border-left: 3px solid #000; padding-left: 10px; }
.timeline-right    { width: 90%; }
.timeline-item     { margin-bottom: 120px; }
.timeline-section .all-cont { align-items: center; }
.timeline-item1 .content   { flex: 1; }
.timeline-item1 .content p { font-size: 1rem; }




/* ============================================
   POLICY PAGE
   ============================================ */
.policy-page h1          { margin-bottom: 20px; font-weight: 600; }
.policy-page h3          { margin-top: 30px; font-weight: 500; }
.policy-page p,
.policy-page li          { line-height: 1.7; font-size: 15px; }
.policy-page ul          { padding-left: 20px; }

.date-nav-menu           { border-left: 1px solid #d9d0d0; position: sticky; top: 112px; min-width: 50px; }
.date-nav-menu > .line   { background: black; width: 1px; position: absolute; left: 0; top: 0; height: 7.10435%; }
.date-nav-menu > button  { padding-inline-start: 10px; padding-block: 5px; }
.is-active-navigation    { font-weight: 700; font-size: 16px; }

/* ============================================
   PORTFOLIO
   ============================================ */
.portfolio-category ul li button {
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  background: none;
  padding: 0;
}
.portfolio-category ul li button h4 { margin-top: 5px; font-size: 14px; font-weight: 500; color: #000; margin-bottom: 0; }
.portfolio-category ul li img { width: 60px; }
.sub-list li { list-style: lower-alpha; margin-bottom: 10px; }

/* ============================================
   FLOATING / GO TO TOP
   ============================================ */
.floating-whatsapp { position: fixed; bottom: 80px; right: 20px; z-index: 700; display: block; }

.social-media-icons .fa-facebook  { color: #1877F2; }
.social-media-icons .fa-instagram { color: #e6683c; border-radius: 5px; }
.social-media-icons .fa-youtube   { color: #F00; }
.social-media-icons .fa-pinterest { color: #E60023; }
.social-media-icons .fa-whatsapp  { color: #25D366; }

#goToTop {
  position: fixed;
  bottom: 15px;
  right: 25px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background: #000;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: none;
  z-index: 9999;
  transition: opacity .3s ease, transform .3s ease;
}
#goToTop:hover { transform: translateY(-4px); opacity: .85; }

/* ============================================
   PIC ZOOMER
   ============================================ */
.picZoomer { position: relative; }
.picZoomer-pic-wp { position: relative; overflow: hidden; text-align: center; }
.picZoomer-pic-wp:hover .picZoomer-cursor { display: block; }
.picZoomer-zoom-pic { position: absolute; top: 0; left: 0; }
.picZoomer-zoom-wp { display: none; position: absolute; z-index: 999; overflow: hidden; border: 1px solid #eee; height: 460px; margin-top: -19px; }
.picZoomer-cursor  { display: none; cursor: crosshair; width: 100px; height: 100px; position: absolute; top: 0; left: 0; border-radius: 50%; border: 1px solid #eee; background-color: rgba(0,0,0,.1); }
.my_img { vertical-align: middle; position: absolute; top: 0; bottom: 0; margin: auto; height: 100%; }
.piclist li { display: inline-block; width: 90px; height: 114px; border: 1px solid #eee; }
.piclist li img { width: 97%; height: auto; }
.picZoomer-pic-wp, .picZoomer-zoom-wp { border: 1px solid #eee; }

/* ============================================
   BOX ZOOM
   ============================================ */
._boxzoom .zoom-thumb { width: 90px; display: inline-block; vertical-align: top; }
._boxzoom .zoom-thumb ul.piclist { padding-left: 0; top: 0; }
._boxzoom ._product-images { width: 80%; display: inline-block; }
._boxzoom ._product-images .picZoomer { width: 100%; }
._boxzoom ._product-images .picZoomer .picZoomer-pic-wp img { left: 0; }
._boxzoom ._product-images .picZoomer img.my_img { width: 100%; }
.piclist li img { height: 100px; object-fit: cover; }

/* ============================================
   PRODUCT DETAIL PAGE
   ============================================ */
.product-container { max-width: 1200px; margin: auto; display: flex; gap: 40px; }
.gallery     { display: flex; gap: 20px; flex: 1; }
.thumbnails  { display: flex; flex-direction: column; gap: 15px; }
.thumbnails img { width: 80px; cursor: pointer; opacity: .6; }
.thumbnails img:hover { opacity: 1; }
.main-image img { max-width: 100%; }

.product-info    { flex: 1; }
.product-info h1 { margin: 10px 0; font-size: 25px; font-weight: 700; }
.rating span i   { color: #ED8A00; margin-bottom: 10px; font-size: 15px; }
.rating span     { color: #777; font-size: 14px; }
.strike          { color: #777; text-decoration: line-through; }
.price           { color: #ff3c00; font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.features        { list-style: none; padding: 0; display: flex; gap: 30px; margin-bottom: 20px; }
.features li     { font-size: 16px; }

.btn-group.product-size { gap: 10px; display: flex; height: 28px; width: fit-content; margin-bottom: 14px; color: var(--theme-colour); }
.btn-group.product-size > span { color: #000; font-size: 16px; }
.btn-check { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }
.btn-group label.btn {
  font-size: 14px;
  width: 42px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--border-radius-pill) !important;
  border: 1px solid #707070;
}
.btn-check:checked + .btn,
.btn.active, .btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.color-filter    { padding-top: 6px; padding-bottom: 6px; gap: 10px; }
.color-filter > span { color: #000; font-size: 16px; }
.form-check      { display: block; min-height: 0; padding-left: 0; margin-bottom: 0; }
.form-check .form-check-input { opacity: 1; position: relative; z-index: 2; margin-left: 0; margin-top: 0; cursor: pointer; }
.form-check-input[type=radio] { border-radius: 50%; }
.form-check .form-check-input { float: left; }
.form-check span { height: 1rem; width: 1rem; display: block; background-color: #000; position: relative; border-radius: 50%; z-index: 1; }
.form-check span::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  background-color: transparent;
  border: 2px solid red;
  border-radius: 50%;
  opacity: .2;
  transform: translate(-50%,-50%) scale(0);
  z-index: -1;
}

.cart-row { display: flex; align-items: center; gap: 20px; }
.qty      { display: flex; align-items: center; border: 1px solid #ccc; padding: 3px 20px; width: fit-content; border-radius: var(--border-radius-pill); }
.qty button { padding: 6px 12px; border: none; background: #fff; cursor: pointer; }
.qty span   { padding: 0 12px; }

.add-to-cart {
  background: #d9380c;
  color: #fff;
  border: none;
  padding: 10px 30px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
  border-radius: var(--border-radius-pill);
}

ul.shipping-return-information { background-color: #f6f6f6; padding: 0; border-radius: var(--border-radius-card); }
ul.shipping-return-information li { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 3px; }

/* ============================================
   PRODUCT TABS
   ============================================ */
.tabs-header { display: flex; gap: 40px; justify-content: center; border-bottom: 2px solid #e5e5e5; margin-bottom: 40px; }
.tab { padding-bottom: 14px; cursor: pointer; font-size: 18px; color: #999; }
.tab.active { color: #ff3c00; border-bottom: 3px solid #ff3c00; font-weight: 600; }
.tabs-content { display: flex; gap: 60px; margin: auto; justify-content: center; }
.content-left { flex: 1; }
.content-left p  { line-height: 1.8; margin-bottom: 20px; }
.content-left h3 { margin-top: 40px; margin-bottom: 15px; color: #000; }
.content-left ul { padding-left: 20px; }
.content-left li { margin-bottom: 10px; }
.content-right { flex: 1; }
.image-row      { display: flex; gap: 20px; margin-bottom: 20px; }
.image-row img  { width: 40%; }

.video-image         { position: relative; }
.video-image img     { width: 100%; display: block; }
.play-button {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 70px; height: 70px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.tab-panel        { display: none; }
.tab-panel.active { display: flex; gap: 60px; }
#specifications.active,
#reviews.active   { display: block; }

/* ============================================
   REVIEWS
   ============================================ */
.review h3,
.leave-review h3 { font-size: 25px; font-weight: bold; text-transform: capitalize; }

ul.review-comment > li {
  display: flex;
  gap: 20px;
  align-items: center;
  position: relative;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #999;
}
ul.review-comment li img { border-radius: 50%; width: 110px; height: 110px; }
.review-comment-info h4   { display: inline; font-size: 22px; font-weight: bold; }
.review-comment-info span { display: inline; color: #999; margin-left: 14px; }
.review-comment-info p    { font-family: 'Instrument Sans'; padding-top: 10px; }

ul.review-comment ul.star {
  position: absolute;
  top: 0; right: 0;
  background-color: #FFE656;
  padding: 7px 23px;
  border-radius: var(--border-radius-pill);
  color: #444;
}
ul.star { display: flex; gap: 5px; font-size: 13px; }

/* Review form */
.leave-review .contact-form-items textarea { height: 131px; }
.contact-form-items textarea { width: 100%; padding: 24px 24px 24px 40px; border-radius: 30px; border: 1px solid #D5D5D5; outline: none; margin-bottom: 15px; }
.leave-review form.contact-form-items input { margin-bottom: 20px; }
.contact-form-items input { width: 100%; height: 55px; padding-left: 40px; background-color: #F6F6F6; border-radius: var(--border-radius-pill); border: 1px solid #d5d5d5; outline: none; }
.contact-form-items input#vehicle1 { width: 16px; height: 16px; margin-right: 11px; transform: translateY(3px); }
.contact-form-items label { color: #555; font-size: 14px; }

.select-rating    { display: flex; align-items: center; padding-top: 13px; }
.select-rating h4 { color: #555; font-size: 16px; padding-right: 20px; }
.select-rating ul.star { font-size: 24px; color: #999; }
.contact-form-items button.theme-btn { border: 0; outline: 0; margin-top: 30px; text-transform: capitalize; }

.theme-btn .btn-wrap { position: relative; float: left; overflow: hidden; }
.theme-btn .btn-wrap .text-one { position: relative; text-transform: capitalize; display: flex !important; transition: .3s; justify-content: center; }
.theme-btn .btn-wrap .text-two { width: 100%; align-items: center; position: absolute; text-transform: capitalize; top: 100%; display: flex !important; transition: .3s; justify-content: center; }

.video-img.description i { background-color: #fff; outline-color: #fff; border-color: #000; }
.video-img i {
  position: absolute;
  animation: shadow-pulse 1s infinite;
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 90px;
  background-color: var(--theme-colour);
  top: 210%; left: 75%;
  z-index: 111;
  transform: translate(-50%,-50%);
  border: 1px solid #fff;
  outline: 3px solid #d9380c;
}

/* ============================================
   SPECIFICATIONS
   ============================================ */
ul.specifications { background-color: #f6f6f6; padding: 80px 200px; }
ul.specifications li:nth-child(odd) { background-color: #fff; border-radius: var(--border-radius-pill); }
ul.specifications li { display: flex; align-items: center; position: relative; padding: 0 40px; }
ul.specifications li h4 { font-size: 14px; margin-right: 170px; }

/* ============================================
   BREADCRUMB / BANNER
   ============================================ */
.banner-stley h1 { font-size: 65px; font-weight: bold; text-transform: capitalize; color: #fff; text-align: center; }
.banner-stley p  { text-transform: uppercase; text-align: center; color: #fff; letter-spacing: 2px; padding-top: 10px; padding-bottom: 40px; }
ol.breadcrumb { background-color: #fff; width: fit-content; margin: auto; border-radius: var(--border-radius-pill); padding: 6px 110px; text-transform: uppercase; }
ol.breadcrumb li { color: #000; }
.sticky-md-top { top: 120px !important; z-index: 1; }

/* ============================================
   BOOTSTRAP OVERRIDES
   ============================================ */
.form-check-input:checked { background-color: #802636 !important; border-color: #802636 !important; }
.form-check-input { width: 1.25rem; height: 1.25rem; cursor: pointer; }
.accordion-button { background-color: #fff; }
.accordion-button:not(.collapsed) { color: black; background-color: white; }
.accordion-button:focus  { box-shadow: none; }
.accordion-button::after { filter: hue-rotate(300deg); }
.row-sm .col-md-6 { padding-left: 5px; padding-right: 5px; }

/* ============================================
   HOVER GALLERY
   ============================================ */
.hover-gallery img { transition: opacity .5s cubic-bezier(.4,0,.2,1); opacity: 0; z-index: 0; }
.hover-gallery img:first-child { opacity: 1; z-index: 1; }
.product-container:hover .hover-gallery img,
.product-container:focus-within .hover-gallery img { opacity: 0; }
.product-container:hover .hover-gallery img.active,
.product-container:focus-within .hover-gallery img.active { opacity: 1; z-index: 2; }

/* ============================================
   BRAND BUTTONS
   ============================================ */
.btn-brand-custom { background-color: #8b1e2d; color: white; }
.btn-brand-custom:hover { background-color: #6f1522 !important; color: white !important; }
.btn-outline-brand-custom:hover { background-color: #8b1e2d !important; color: white !important; }

/* ============================================
   REVIEW FORM (detail page)
   ============================================ */
.form-control:focus { border-color: #8b1e2d; box-shadow: 0 0 0 .25rem rgba(139,30,45,.15); }
.star-rating i { cursor: pointer; transition: color .2s; }
.star-rating i:hover,
.star-rating i.active { font-weight: 900; }
.upload-box {
  border: 2px dashed #ddd;
  border-radius: 4px;
  width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .3s;
}
.upload-box:hover { border-color: #8b1e2d; }

/* ============================================
   WISHLIST / MODAL NAV
   ============================================ */
.wishlist-btn { width: 40px; height: 40px; }
.modal-nav-btn { display: flex !important; align-items: center !important; justify-content: center !important; opacity: .8 !important; transition: opacity .2s !important; }
.modal-nav-btn:hover { opacity: 1 !important; }
.carousel-container:hover img { opacity: .95; }

/* ============================================
   MOBILE SLIDE ANIMATION
   ============================================ */
.mobile-slide-anim { animation: mobile-slide-in .6s cubic-bezier(.22,1,.36,1); will-change: transform, opacity; }
@keyframes mobile-slide-in {
  from { transform: translateX(18%); opacity: .6; }
  to   { transform: translateX(0);   opacity: 1; }
}

/* ============================================
   AUTH PAGES (Login / Register)
   ============================================ */
.login-page,
.register-page   { position: relative; padding: 10px 0; }
.login-content,
.register-content{ position: relative; z-index: 1; }

.bg-decoration {
  position: fixed;
  border-radius: 50%;
  opacity: .08;
  z-index: 0;
  animation: float 20s infinite ease-in-out;
  pointer-events: none;
}
.login-page .bg-decoration:nth-child(1)    { width: 600px; height: 600px; background: var(--color-rust);       top: -200px; right: -150px; animation-delay: 0s; }
.login-page .bg-decoration:nth-child(2)    { width: 400px; height: 400px; background: var(--color-sage);       bottom: -100px; left: -100px; animation-delay: -5s; }
.login-page .bg-decoration:nth-child(3)    { width: 300px; height: 300px; background: var(--color-terracotta); top: 50%; left: 20%; animation-delay: -10s; }
.register-page .bg-decoration:nth-child(1) { width: 500px; height: 500px; background: var(--color-sage);       top: -150px; left: -100px; animation-delay: 0s; }
.register-page .bg-decoration:nth-child(2) { width: 450px; height: 450px; background: var(--color-terracotta); bottom: -150px; right: -120px; animation-delay: -7s; }
.register-page .bg-decoration:nth-child(3) { width: 350px; height: 350px; background: var(--color-rust);       top: 40%; right: 15%; animation-delay: -14s; }

.brand-section  { animation: slideInLeft .8s cubic-bezier(.16,1,.3,1); }
.brand-logo     { font-size: 3.5rem; font-weight: 400; color: var(--color-charcoal); margin-bottom: 2rem; letter-spacing: -.02em; line-height: 1; }
.brand-tagline  { font-size: 1rem; color: var(--color-olive); line-height: 1.5; margin-bottom: 1rem; }

.feature-list,
.benefit-list   { list-style: none; padding: 0; margin-top: 3rem; }
.features-box{ padding: 15px!important; }
.feature-list .feature-item,
.benefit-item {
  display: flex;
  border: none;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) forwards;
}
.feature-item:nth-child(1), .benefit-item:nth-child(1) { animation-delay: .3s; }
.feature-item:nth-child(2), .benefit-item:nth-child(2) { animation-delay: .4s; }
.feature-item:nth-child(3), .benefit-item:nth-child(3) { animation-delay: .5s; }
.benefit-item:nth-child(4) { animation-delay: .6s; }

.feature-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--color-rust), var(--color-terracotta));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.25rem; flex-shrink: 0;
}
.feature-text   { color: var(--color-charcoal); font-size: .95rem; font-weight: 500; }

.benefit-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--color-sage), var(--color-olive));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.25rem; flex-shrink: 0;
}
.benefit-text   { color: var(--color-charcoal); font-size: .95rem; font-weight: 500; }

.login-card,
.register-card {
  background: var(--color-ivory);
  border-radius: 24px;
  padding: 60px 50px;
  box-shadow: 0 4px 6px rgba(0,0,0,.02), 0 12px 24px rgba(0,0,0,.04), 0 24px 48px rgba(0,0,0,.06);
  position: relative;
  border: none;
  max-width: 480px;
}
.login-card  { animation: slideInRight .8s cubic-bezier(.16,1,.3,1); }
.register-card { animation: slideInRight .8s cubic-bezier(.16,1,.3,1); }

.login-title,
.register-title   { font-size: 2rem; color: var(--color-charcoal); margin-bottom: .5rem; letter-spacing: -.01em; }
.login-subtitle,
.register-subtitle{ color: var(--color-olive); margin-bottom: 2.5rem; font-size: .95rem; }

.login-card .form-group { margin-bottom: 1rem; animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) backwards; }
.register-card .form-group { margin-bottom: 1.5rem; }
.form-group:nth-child(1) { animation-delay: .2s; }
.form-group:nth-child(2) { animation-delay: .3s; }
.form-group:nth-child(3) { animation-delay: .3s; }
.form-group:nth-child(4) { animation-delay: .35s; }
.form-group:nth-child(5) { animation-delay: .4s; }
.register-card .form-group:nth-child(2) { animation-delay: .25s; }

.form-label {
  color: var(--color-charcoal);
  font-weight: 500;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .5rem;
}
.form-control {
  padding: 10px 18px;
  border: 2px solid var(--color-cream);
  border-radius: 12px;
  font-size: 1rem;
  background: white;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  color: var(--color-charcoal);
}
.form-control:focus {
  border-color: var(--color-rust);
  box-shadow: 0 0 0 4px rgba(200,90,60,.1);
  transform: translateY(-1px);
  background: white;
}
.register-card .form-control:focus { border-color: var(--color-sage); box-shadow: 0 0 0 4px rgba(138,154,123,.1); }
.form-control::placeholder { color: #B8B5AB; }
.form-control.is-invalid   { border-color: #dc3545; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220,53,69,.1); }
.invalid-feedback { font-size: .875rem; margin-top: .5rem; }

.form-row-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: .875rem;
  animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) .4s backwards;
}
.form-check { display: flex; align-items: center; gap: .5rem; }
.form-check-input { width: 18px; height: 18px; cursor: pointer; border-color: #000; }
.form-check-input:checked { background-color: var(--color-rust); border-color: var(--color-rust); }
.form-check-label { color: var(--color-olive); cursor: pointer; margin: 0; }
.forgot-link { color: var(--color-rust); text-decoration: none; font-weight: 500; transition: color .3s ease; }
.forgot-link:hover { color: var(--color-terracotta); }

.password-strength { margin-top: .5rem; font-size: .75rem; color: var(--color-olive); display: flex; align-items: center; gap: .5rem; }
.strength-bars     { display: flex; gap: 4px; }
.strength-bar      { width: 20px; height: 4px; background: var(--color-cream); border-radius: 2px; transition: background .3s ease; }
.strength-bar.active       { background: var(--color-sage); }
.strength-bar.active.weak  { background: #dc3545; }
.strength-bar.active.medium{ background: #ffc107; }
.strength-bar.active.strong{ background: var(--color-sage); }

.terms-check { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 2rem; animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) .45s backwards; }
.terms-check input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; border-color: var(--color-cream); margin-top: 2px; flex-shrink: 0; }
.terms-check input[type="checkbox"]:checked { background-color: var(--color-sage); border-color: var(--color-sage); }
.terms-label { color: var(--color-olive); font-size: .875rem; line-height: 1.5; }
.terms-label a { color: var(--color-rust); text-decoration: none; font-weight: 500; }
.terms-label a:hover { color: var(--color-terracotta); }

.btn-login,
.btn-register {
  width: 100%;
  padding: 10px;
  background: var(--color-charcoal);
  color: var(--color-ivory);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  margin-bottom: 1.5rem;
  letter-spacing: .02em;
  animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) .5s backwards;
}
.btn-login:hover  { background: var(--color-rust); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,90,60,.3); color: white; }
.btn-register:hover{ background: var(--color-sage); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(138,154,123,.3); color: white; }
.btn-login:active,
.btn-register:active { transform: translateY(0); }

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2rem 0;
  color: var(--color-olive);
  font-size: .875rem;
  animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) .6s backwards;
}
.divider::before,
.divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--color-cream); }
.divider span   { padding: 0 1rem; }

.social-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) .7s backwards;
}
.btn-social {
  padding: 12px;
  border: 2px solid var(--color-cream);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-weight: 500;
  color: var(--color-charcoal);
  transition: all .3s cubic-bezier(.16,1,.3,1);
  text-decoration: none;
}
.btn-social:hover { border-color: var(--color-rust); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); color: var(--color-charcoal); }

.register-link,
.login-link { text-align: center; color: var(--color-olive); font-size: .9rem; animation: fadeInUp .6s cubic-bezier(.16,1,.3,1) .8s backwards; }
.login-link { animation-delay: .6s; }
.register-link a,
.login-link a { color: var(--color-rust); text-decoration: none; font-weight: 600; transition: color .3s ease; }
.register-link a:hover,
.login-link a:hover { color: var(--color-terracotta); }

/* ============================================
   KEYFRAMES (consolidated)
   ============================================ */
@keyframes float {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  33%       { transform: translate(30px,-30px) rotate(120deg); }
  66%       { transform: translate(-20px,20px) rotate(240deg); }
}
@keyframes slideInLeft  { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInUp     { from { opacity: 0; transform: translateY(20px); }  to { opacity: 1; transform: translateY(0); } }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-width: 700px) {
  .sm\:gap-6 { gap: 1.5rem; }
}

@media (max-width: 1400px) {
  ul.review-comment ul.star { padding: 5px 13px; font-size: 12px; }
  ._boxzoom ._product-images { width: 75%; }
}

@media (max-width: 1200px) {
  .gallery-grid { column-count: 3; }
}

@media (max-width: 1024px) {
  .product-item { flex: 0 0 calc(25% - 10px); }
  .slider__item { flex: 0 0 calc(100% / 3); }
  .owners-box   { flex-direction: column; padding: .5rem; }
  .owners-box .owner-image,
  .owners-box .content { width: 100%; }
  #about-us-icons-with-content .col { width: 50%; }
  .caption-center { left: 25%; }
  .timeline-item1 h2     { font-size: 1.3rem; font-weight: 600; }
  .timeline-item1 .content img { height: 250px; }
  .timeline-item1 .content { height: 30vh !important; }
}

@media (max-width: 991px) {
  .brand-section  { text-align: center; margin-bottom: 0; }
  .brand-logo     { font-size: 2.5rem; }
  .feature-list,
  .benefit-list   { display: none; }
}

@media (max-width: 900px) {
  .tabs-content   { flex-direction: column; }
  .image-row      { flex-direction: column; }
  .tabs-header    { gap: 20px; font-size: 16px; }
  .product-container { flex-direction: column; }
  .gallery        { flex-direction: column-reverse; }
  .thumbnails     { flex-direction: row; }
  ._boxzoom ._product-images { width: 70%; }
}

@media (max-width: 820px) {
  #homeSlider .carousel-caption { top: 40%; }
  .caption-left  { left: 12%; }
  #homeSlider h2 { font-size: 1.8rem; }
  #homeSlider p  { font-size: 1rem; }
  .caption-center{ left: 16%; }
  #our-info h1   { font-size: 16px; }
  #our-info p    { font-size: 13px; }
  .customize-image { width: 100%; }
  .timeline-item1 h2     { font-size: 1.3rem; font-weight: 600; }
  .timeline-item1 .content img { height: 200px; }
  .timeline-item1 .content { height: 30vh !important; }
}

@media (max-width: 768px) {
  #about-us-icons-with-content .box-container { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  #about-us-icons-with-content .box { width: 49%; }
  .contact-details { padding: 0 50px; }
  .timeline-left   { width: 20%; }
  .testimonial-content { padding: 30px 16px 0; }
  .modal-nav-btn   { width: 40px !important; height: 40px !important; margin: 0 !important; }
  .modal-nav-btn.start-0 { left: 8px !important; margin-left: 0 !important; }
  .modal-nav-btn.end-0   { right: 8px !important; margin-right: 0 !important; }
}

@media (max-width: 600px) {
  .fs-xs-11{ font-size: 11px!important; }
  .padding-sm-2{ padding: 0 0.8rem; }
  .fw-xs-regular{ font-weight: 400!important; }
  .product-item  { flex: 0 0 calc(33% - 10px); }
  .view-all-btn  { padding: 10px 20px; }
  #your-idea-our-brush h1, #graphics-section h1 { margin: 10px 0px;}
  #your-idea-our-brush .right-side-desc { padding: 0 20px; }
  .slider__item  { flex: 0 0 100%; }
  #about-us-icons-with-content .box-container { flex-direction: column; justify-content: center; flex-wrap: wrap; }
  #about-us-icons-with-content .box { width: 100%; }
  .contact-details h4 { font-size: 18px; line-height: 20px; }
  .contact-details    { padding: 0 20px; }
  .contact-form       { padding: 0 20px; }
  #homeSlider .carousel-caption { top: 16%; }
  .caption-left  { left: 12%; }
  .caption-right { right: 12%; }
  #homeSlider h2 { font-size: 1rem; margin-bottom: .3rem; }
  #homeSlider p  { font-size: .6rem; margin-bottom: .3rem; }
  .caption-center{ left: 16%; }
  .carousel-caption a { font-size: .7rem; padding: 5px 20px; }
  .timeline-left { width: 20%; top: 80px; }
  .timeline-left li { margin: 1.3rem 0; }
  .timeline-item1 { margin-bottom: 20px; }
  .timeline-item1 .d-flex { flex-direction: column; }
  .reverse-sm { flex-direction: column-reverse !important; }
  #your-idea-our-brush .d-flex,
  #graphics-section .d-flex { flex-direction: column; }
  .gallery-filter {
    display: flex;
    width: 100%; max-width: 100%;
    padding: 20px;
    overflow-x: auto; overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 20px 0;
  }
  .gallery-filter::-webkit-scrollbar { display: none; }
  .gallery-filter span { padding: 6px 5px; }
  .timeline-item1 h2 { font-size: 1.3rem; font-weight: 600; }
  .timeline-item1 .content img { height: 225px; }
  .timeline-item1 .text-content { margin: 1.5rem 0; }
  .timeline-item1 .text-content p { margin: 1rem 0 0; line-height: 1.8rem; font-size: 1.1rem; }
  .gallery-grid   { column-count: 1; }
  .customize-image,
  #your-idea-our-brush col img { width: 75%; }
  .text-small-center { text-align: center; }
}

.login-logo-section{
    min-height: calc(100vh - 100px);
}

@media (max-width: 576px) {
  .mobile-tiny-text { font-size: 12px !important; white-space: nowrap; }
  .mobile-icon-size  { font-size: 1.1rem !important; }
  .small-image       { right: 15% !important; }
  .login-card,
  .register-card { width: 100%; padding: 10px 20px; }
  .login-title,
  .register-title{ font-size: 1.25rem; margin: 0; }
  .login-subtitle,
  .register-subtitle { margin-bottom: 1rem; }
  .social-login  { grid-template-columns: 1fr; }
  .brand-logo    { font-size: 2rem; }
  .form-row-custom { grid-template-columns: 1fr; }
  .login-logo-section{ min-height: auto!important;}
  .login-logo-section .brand-section{  padding: 20px 0}
}