.elementor-kit-15{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-61c01e98:#4054B2;--e-global-color-69bf31ed:#23A455;--e-global-color-7a1ccbe5:#000;--e-global-color-13ed1179:#FFF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-15 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1290px;}.e-con{--container-max-width:1290px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}.sc_layouts_title_caption{display:var(--page-title-display);}@media(max-width:1279px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:0px;--container-default-padding-right:10px;--container-default-padding-bottom:0px;--container-default-padding-left:10px;}}/* Start custom CSS *//* ================================
   PROJECT CARD OVERLAY (FIXED)
   ================================ */

/* 1) Make the card take the image height only + remove the annoying bottom gap */
.project-card{
  position: relative;
  overflow: hidden;
  line-height: 0;              /* ✅ removes the inline-image baseline gap */
}

/* Make sure the thumbnail/media wrapper doesn't add spacing */
.project-card figure,
.project-card .elementor-post__thumbnail,
.project-card .eae-grid-post__holder,
.project-card .post-thumbnail,
.project-card .project-thumb{
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  overflow: hidden;
}

/* 2) Image: keep it visible + fill width, and kill baseline spacing */
.project-card img{
  display: block;              /* ✅ removes bottom gap */
  width: 100% !important;
  height: auto !important;     /* ✅ prevents “photos disappeared” */
}

/* OPTIONAL (only if you want “stretch/crop to fit overlay” look)
   Use this ONLY if your image wrapper has a fixed height / aspect ratio.
   If not, don't use it.
*/
/*
.project-card img{
  height: 100% !important;
  object-fit: cover;
}
*/

/* 3) Overlay layer (fits the image/card perfectly now) */
.project-card .project-overlay{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 5;
  pointer-events: none;
}

/* 4) Title centered */
.project-card .project-title{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 12px 16px;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 6;
  pointer-events: none;

  /* restore readable text because card line-height is 0 */
  line-height: 1.2;
  word-break: break-word;
}

/* 5) Desktop hover */
.project-card:hover .project-overlay,
.project-card:hover .project-title{
  opacity: 1;
}

/* 6) Mobile / touch behavior
   - Many mobiles don't have real hover.
   - This makes it show on tap (active) and when focused (if the card is a link). */
.project-card:active .project-overlay,
.project-card:active .project-title,
.project-card:focus .project-overlay,
.project-card:focus .project-title,
.project-card:focus-within .project-overlay,
.project-card:focus-within .project-title{
  opacity: 1;
}

/* Helps some mobile browsers treat the card as tappable */
.project-card{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Hide Buy Now / Add to cart button */
.single_add_to_cart_button,
button.single_add_to_cart_button,
form.cart .single_add_to_cart_button {
  display: none !important;
}
/* Disable click / lightbox on main product image */
.woocommerce-product-gallery__image a {
  pointer-events: none !important;
  cursor: default !important;
}
.single-product .woocommerce-breadcrumb{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.single-product .site-main,
.single-product #content,
.single-product .content-area{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Hide price inside Elementor "Related Products" widget (single product page) */
.elementor-widget-woocommerce-product-related .price,
.elementor-widget-woocommerce-product-related .woocommerce-Price-amount,
.elementor-widget-woocommerce-product-related .woocommerce-Price-currencySymbol,
.elementor-widget-woocommerce-product-related del,
.elementor-widget-woocommerce-product-related ins {
  display: none !important;
}
/* Single Product: kill sidebar + reclaim its reserved width */
body.single-product #secondary,
body.single-product .sidebar,
body.single-product .widget-area,
body.single-product aside#secondary,
body.single-product aside.sidebar{
  display: none !important;
}

/* If theme uses flex layout */
body.single-product .site-content,
body.single-product .content-area-wrap,
body.single-product .content-sidebar-wrap{
  display: block !important;
}

body.single-product #primary,
body.single-product .content-area,
body.single-product main#main,
body.single-product .site-main{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

/* Some themes keep padding on the container that looks like a “gap” */
body.single-product .container,
body.single-product .site-container,
body.single-product .content-container{
  padding-right: 0 !important;
}
/* Extra override if theme forces a sidebar layout class */
body.single-product.right-sidebar #primary,
body.single-product.has-sidebar #primary,
body.single-product.right-sidebar .content-area,
body.single-product.has-sidebar .content-area{
  width: 100% !important;
  flex-basis: 100% !important;
  max-width: 100% !important;
}

body.single-product.right-sidebar #secondary,
body.single-product.has-sidebar #secondary{
  display: none !important;
}
/* Thumbnails under main image (Elementor + WooCommerce) */
.single-product .woocommerce-product-gallery,
.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery{
  display: flex !important;
  flex-direction: column !important; /* main image on top, thumbs below */
}

/* Make sure the thumbnails area is not floating/positioned oddly */
.single-product .woocommerce-product-gallery .flex-viewport{
  order: 1 !important;
  width: 100% !important;
}

.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs{
  order: 2 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  margin-top: 12px !important;

  /* keep them in one row and allow horizontal scroll if many */
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* Thumbs sizing */
.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li{
  float: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img{
  width: 80px !important;   /* adjust */
  height: 80px !important;  /* adjust */
  object-fit: cover !important;
  border-radius: 10px;
}
/* ✅ Force main image on top, thumbnails UNDER it (horizontal) */
.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery{
  display: flex !important;
  flex-direction: column !important;
}

/* main image wrapper */
.single-product .woocommerce-product-gallery__wrapper{
  order: 1 !important;
}

/* thumbnails container */
.single-product .flex-control-nav.flex-control-thumbs{
  order: 2 !important;
  position: static !important;     /* stops overlay */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  display: flex !important;
  flex-wrap: wrap !important;      /* wraps if many thumbs */
  gap: 12px !important;
  margin-top: 16px !important;
  padding: 0 !important;
}

/* thumbnail item size (increase here) */
.single-product .flex-control-nav.flex-control-thumbs li{
  width: 110px !important;         /* change to 90/120 as you like */
  margin: 0 !important;
  float: none !important;
}

/* thumbnail image */
.single-product .flex-control-nav.flex-control-thumbs li img{
  width: 100% !important;
  height: 80px !important;         /* change height if you want */
  object-fit: cover !important;
  border-radius: 10px;
}
/* FORCE thumbnail size (override Woo + theme inline styles) */
.single-product .woocommerce-product-gallery
.flex-control-nav.flex-control-thumbs li img{
    width: 140px !important;
    height: 120px !important;
    max-width: none !important;
}

/* Make sure the li adapts to the image size */
.single-product .woocommerce-product-gallery
.flex-control-nav.flex-control-thumbs li{
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
/* WooCommerce gallery thumbnails: stop cropping + fit full image */
.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce div.product div.images .woocommerce-product-gallery__thumbs-wrapper img,
.elementor-widget-woocommerce-product-images .flex-control-thumbs li img {
  width: 100% !important;
  height: 140px !important;          /* increase/decrease thumbnail height */
  object-fit: contain !important;     /* IMPORTANT: prevents cropping */
  object-position: center center !important;
  background: #fff;                  /* optional */
  border-radius: 12px;               /* optional */
}

/* Thumbnail row spacing */
.woocommerce div.product div.images .flex-control-thumbs,
.elementor-widget-woocommerce-product-images .flex-control-thumbs {
  gap: 12px;
}

/* Make each thumbnail "tile" a bit wider */
.woocommerce div.product div.images .flex-control-thumbs li,
.elementor-widget-woocommerce-product-images .flex-control-thumbs li {
  width: 140px !important;           /* increase/decrease thumbnail width */
}
/* Make product thumbnails background transparent */
.single-product .flex-control-nav.flex-control-thumbs li,
.single-product .flex-control-nav.flex-control-thumbs li img{
    background: transparent !important;
}

/* Remove any forced white boxes / shadows */
.single-product .flex-control-nav.flex-control-thumbs li{
    box-shadow: none !important;
    border: none !important;
}

/* Keep image fully visible (no cropping) */
.single-product .flex-control-nav.flex-control-thumbs li img{
    object-fit: contain !important;
}
/* PRINTY: remove the top gap above breadcrumbs on LIVE single product pages */
body.single-product .page_content_wrap{
  padding-top: 0 !important;
}
/* MOBILE touch-hover state for Loop Grid */
@media (hover: none) and (pointer: coarse) {

  .elementor-loop-container .e-loop-item.is-touch-hover .overlay {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
  }

  .elementor-loop-container .e-loop-item.is-touch-hover img {
    transform: scale(1.03);
  }
}
/* =====================================
   DESKTOP HEADER DROPDOWN BACKGROUND
   (ThemeREX / TRX Addons)
   ===================================== */

@media (min-width: 1025px) {

  /* Dropdown container */
  .sc_layouts_menu_nav ul,
  .sc_layouts_menu_nav ul ul,
  .sc_layouts_menu_nav li ul,
  header nav ul ul {
    background-color: #F7F7F7 !important;
  }

  /* Dropdown links text */
  .sc_layouts_menu_nav ul ul a,
  header nav ul ul a {
    color: #111111 !important;
  }

  /* Hover state */
  .sc_layouts_menu_nav ul ul a:hover,
  header nav ul ul a:hover {
    background-color: #E11D2A !important; /* red hover */
    color: #FFFFFF !important;
  }

  /* Optional: soften edges */
  .sc_layouts_menu_nav ul ul {
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  }
}
/* Force full-site background to pure white (TRX / ThemeREX)
   Does NOT set header/footer backgrounds */
html, body {
  background: #fff !important;
}

/* TRX wrappers (these are often the actual “site background”) */
.body_wrap,
.page_wrap,
.page_content_wrap,
.content_wrap {
  background: #fff !important;
}

/* If theme is boxed and uses a separate outer layer */
body.boxed,
body.body_style_boxed {
  background: #fff !important;
}

/* Safety: do NOT modify header/footer background (leave as-is) */
.top_panel,
header,
.footer_wrap,
footer {
  background: inherit !important; /* keeps whatever you set in builder/theme */
}


/* ===== MATANAH: Continuous Logo Marquee ===== */
.matanah-marquee{
  overflow: hidden;
  width: 100%;
  position: relative;
}

.matanah-marquee__track{
  display: flex;
  align-items: center;
  gap: 60px;                 /* space between logos */
  width: max-content;
  animation: matanahMarquee 35s linear infinite;  /* lower = faster */
  will-change: transform;
}

.matanah-marquee__track img{
  height: 150px;              /* desktop logo height */
  width: auto;
  object-fit: contain;
  display: block;
  filter: none;
  opacity: 1;
}

/* Mobile adjustments */
@media (max-width: 767px){
  .matanah-marquee__track{
    gap: 36px;
    animation-duration: 28s;
  }
  .matanah-marquee__track img{
    height: 100px;
  }
}

/* The continuous loop */
@keyframes matanahMarquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* because we duplicated the set */
}
.matanah-marquee__track img {
  max-width: 180px;
}
.matanah-marquee {
  --gap: 40px; /* instead of 48–55 */
}
/* ===== MATANAH LOGO MARQUEE (HTML widget) ===== */
.matanah-marquee{
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* soft fade on edges (nice “premium” look) */
.matanah-marquee::before,
.matanah-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:60px;
  z-index:2;
  pointer-events:none;
}
.matanah-marquee::before{
  left:0;
  background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
}
.matanah-marquee::after{
  right:0;
  background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%);
}

/* The moving row – works if your HTML row is a flex/inline row */
.matanah-marquee .track,
.matanah-marquee .marquee-track,
.matanah-marquee .marquee,
.matanah-marquee .logos{
  display: flex;
  align-items: center;
  gap: 56px;                 /* spacing between logos */
  width: max-content;
  will-change: transform;
  animation: matanahMarquee 28s linear infinite;
}

/* Logo sizing */
.matanah-marquee img{
  height: 85px;              /* desktop logo size */
  width: auto;
  max-width: none;
  object-fit: contain;
  display:block;
}

/* Mobile sizing */
@media (max-width: 767px){
  .matanah-marquee img{ height: 65px; }
  .matanah-marquee .track,
  .matanah-marquee .marquee-track,
  .matanah-marquee .marquee,
  .matanah-marquee .logos{ gap: 34px; }
}

@keyframes matanahMarquee{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}
/* Force remove top padding added by Printy responsive.css */
.page_content_wrap{
  padding-top: 0 !important;
}

/* In case the theme re-adds it inside breakpoints */
@media (max-width: 1679px){
  .page_content_wrap{ padding-top: 0 !important; }
}
@media (max-width: 1023px){
  .page_content_wrap{ padding-top: 0 !important; }
}
@media (max-width: 1279px){
  .page_content_wrap{ padding-top: 0 !important; }
}
/* PORTFOLIO: remove the big green area (theme padding in .page_content_wrap) */
body[class*="portfolio"] .page_content_wrap,
body[class*="portfolio"] .content_wrap,
body[class*="portfolio"] .page_wrap {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* If the space is created by the content area height */
body[class*="portfolio"] .page_content_wrap .content_wrap,
body[class*="portfolio"] .page_content_wrap .content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}/* End custom CSS */