/* ====================================
   Page Speed & CLS (Cumulative Layout Shift) Optimizations
   ==================================== */

/* Font display optimization - prevents invisible text flash */
@font-face {
  font-display: swap;
}

/* Optimize image rendering */
img {
  content-visibility: auto;
}

/* Lazy loaded images fade in */
img[loading="lazy"] {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Prevent layout shift for product images */
.product-img {
  aspect-ratio: 3/4;
  object-fit: contain !important;
}

/* Make product card clickable */
.single-product {
  position: relative;
  cursor: pointer;
  /* text-align: center; */
}
.single-product .card-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.single-product .add-to-wishlist-btn,
.single-product .add-to-cart,
.single-product .add-to-cart a,
.single-product .content-wrapper a {
  position: relative;
  z-index: 2;
}

/* Center product card action buttons */
.single-product .add-to-cart {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* Reduce paint on scroll */
.header-stikcy {
  will-change: transform;
}

/* ====================================
   CLS Fixes - Layout Shift Prevention
   ==================================== */

/* Fix mobile menu height to prevent layout shift */
.mobile-menu {
  min-height: 100vh;
  contain: layout style paint;
}

/* Fix overlay positioning to prevent content shift when menu opens */
.overlay {
  will-change: opacity, visibility;
}

/* Fix main content area to prevent shift from web fonts loading */
main {
  contain: layout style;
}

/* Prevent Slick carousel from shifting on initialization */
.slick-initialized {
  /* visibility: visible; */
  /* contain: layout style paint; */
}

.slick-slide {
  min-height: 1px;
}

/* Fix Carlito font loading CLS - use font-display: swap + contain */
body {
  font-display: swap;
}

/* Prevent header from shifting on font load */
.gs-header-logo,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight-relative: normal;
  contain: layout paint;
}

/* Reserve space for decorative images that load fonts */
.decorative-image {
  min-height: auto;
}

/* Prevent navigation tabs from shifting */
.nav-tab,
.tab-content {
  contain: layout style;
}

/* Fix FA (Font Awesome) icon loading CLS */
.fa, [class^="fa-"] {
  contain: layout paint;
}

/* Prevent text reflow from font swap */
body, html {
  min-height: 100vh;
}

/* ====================================
   Slick Carousel CLS Fixes
   ==================================== */

/* Fix slick carousel layout shift during initialization */
.slick-initialized {
  /* visibility: visible;
  contain: layout style paint; */
}

.slick-slide {
  min-height: 1px;
}

.slick-list,
.slick-track {
  contain: layout style;
}

/* Hero slider specific CLS prevention */
.hero-slider-wrapper {
  /* contain: layout style paint;
  will-change: height; */
}

.hero-slider-wrapper .slick-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.hero-slider-wrapper .slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product carousel CLS prevention */
.product-main-slider,
.product-main-slider .slick-list,
.product-main-slider .slick-track {
  contain: layout style;
}

.product-main-slider .slick-slide {
  min-height: auto;
}

/* ====================================
   Original Custom Styles
   ==================================== */

.info-bar {
  background-color: #1a2238;
}
.info-bar img {
  filter: invert(1);
}
.info-bar .dropdown-menu {
  padding: 10px 0;
}
.info-bar .dropdown-menu.show {
  left: auto !important;
  right: 0 !important;
  border-radius: 12px;
}

.info-bar .dropdown-item.active, .dropdown-item:active,
.info-bar .dropdown-item:hover {
  background-color: #f8f7f7;
  color: #1a2238 !important;
}

.template-btn {
  background-color: #ce0856;
}

.single-service .icon-wrapper img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
}
.single-offer-product.verticle .promo-img {
  width: 100%;
  height: 680px !important;
  object-fit: cover !important;
}
.single-offer-product .promo-img {
  width: 100%;
  height: 328px !important;
  object-fit: cover !important;
}

.gs-footer-section .footer-row .left-info .social-links a i {
  color: black;
  transition: all 0.3s;
}
.gs-footer-section .footer-row .left-info .social-links a:hover {
  background-color: #ce0856;
}
.gs-footer-section .footer-row .left-info .social-links a:hover i {
  color: #fff;
}

#cardNumber,
#securityCode,
#expirationDate {
  height: 60px;
  transition: color 0.25s, background-color 0.25s, border-color 0.25s;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background-color: #fff;
  color: #505050;
  font-size: 14px;
  padding: 0px 18px;
}

#cardNumber,
#securityCode,
#expirationDate {
  margin-bottom: 18px;
}

@media screen and (max-width: 767px) {
  .single-offer-product .promo-img {
    height: 200px !important;
  }
  .single-offer-product.verticle .promo-img {
    height: 400px !important;
  }
}


.sidebar-active-color {
  color: #ce0856!important;
}


.alert {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.alert-info {
  background-color: #eef6fd;
  border: 1px solid #eef6fd;
  color: #053160;
}

.alert-danger {
  background-color: #fee8ea;
  border: 1px solid #fee8ea;
  color: #88000e;
}

.alert-success {
  background-color: #f0f6f4;
  border: 1px solid #f0f6f4;
}

.text-muted {
  color: #9298a2;
}


.slick-slide > div:first-child {
  width: 100%;
}

.slick-slide .hero-content {
  /* width: 50%; */
}
.gs-hero-section .hero-content .des {
  font-size: 20px;
  line-height: 1.75;
}
.gs-hero-section .hero-content .title {
  font-size: 48px;
  line-height: 1.75;
}