/* Basic modal styling - tweak to match your theme */
.product-inquiry-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.product-inquiry-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.product-inquiry-modal__dialog { position: relative; max-width: 720px; margin: 60px auto; background: #fff; border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.3); overflow: hidden; padding: 24px; z-index: 2; }
.product-inquiry-modal__close { position: absolute; right: 10px; top: 6px; background: transparent; border: none; font-size: 28px; line-height: 1; cursor: pointer; }
.product-inquiry-modal__content { padding-top: 8px; }
body.product-inquiry-modal-open { overflow: hidden; } /* prevent background scroll */
.enquire-button { background:#0c6; border:none; padding:10px 14px; color:#fff; border-radius:4px; cursor:pointer; }


/* new css for contact form 7 modal */
/* mycss.css - modal + CF7 styles */

/* Basic modal styling */
.product-inquiry-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.product-inquiry-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

/* Dialog centering */
.product-inquiry-modal__dialog {
  position: relative;
  max-width: 760px;
  width: calc(100% - 40px);
  margin: 60px auto;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  z-index: 2;
  overflow: hidden;
  padding: 22px;
}

/* Close button */
.product-inquiry-modal__close {
  position: absolute;
  right: 12px;
  top: 8px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}

/* Modal content */
.product-inquiry-modal__content { padding-top: 8px; }

/* Prevent background scroll when modal open */
body.product-inquiry-modal-open { overflow: hidden; }

/* Enquire button (card) */
.enquire-button {
  background: #0c6;
  border: none;
  padding: 10px 14px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

/* ----- Contact Form 7 form styles (inside modal) ----- */
/* Scope to modal so global CF7 styles are not overridden site-wide */
#productInquiryModal .wpcf7 form {
  display: block;
  gap: 12px;
  margin-top: 8px;
}

/* Input / select / textarea */
#productInquiryModal .wpcf7 input[type="text"],
#productInquiryModal .wpcf7 input[type="email"],
#productInquiryModal .wpcf7 input[type="tel"],
#productInquiryModal .wpcf7 input[type="date"],
#productInquiryModal .wpcf7 select,
#productInquiryModal .wpcf7 textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d2d6db;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 15px;
  color: #333;
  margin-bottom: 10px;
  background: #fff;
}

/* Make textarea taller */
#productInquiryModal .wpcf7 textarea { min-height: 120px; resize: vertical; }

/* Labels */
#productInquiryModal .wpcf7 label { display:block; margin-bottom:6px; font-weight:600; color:#222; }

/* Submit button */
#productInquiryModal .wpcf7 input[type="submit"],
#productInquiryModal .wpcf7 button[type="submit"] {
  background:#0c6;
  border:0;
  color:#fff;
  padding:10px 16px;
  font-size:15px;
  border-radius:6px;
  cursor:pointer;
}

/* Small responsive tweaks */
@media (max-width: 640px) {
  .product-inquiry-modal__dialog { margin: 24px 12px; padding: 16px; }
  .product-inquiry-modal__close { right: 8px; top: 6px; font-size: 24px; }
}


/* added for scroll */
/* Ensure dialog never exceeds viewport height and becomes scrollable */
.product-inquiry-modal__dialog {
  max-height: 90vh;        /* keep some space at top/bottom */
  overflow: auto;         /* allow scrolling inside dialog */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 28px;   /* room for fixed elements / comfortable spacing */
}

/* Ensure modal content has spacing at bottom so the button isn't hidden */
.product-inquiry-modal__content {
  padding-bottom: 24px;
}

/* Make CF7 submit button visible & full width on small screens */
#productInquiryModal .wpcf7 input[type="submit"],
#productInquiryModal .wpcf7 button[type="submit"] {
  display: inline-block;
  min-width: 140px;
  width: auto;
}

/* On very small screens make submit full width and stick to bottom spacing */
@media (max-width: 640px) {
  #productInquiryModal .wpcf7 input[type="submit"],
  #productInquiryModal .wpcf7 button[type="submit"] {
    width: 100%;
    box-sizing: border-box;
    position: static;
    margin-top: 8px;
  }

  /* Add extra bottom padding so last element is not flush to dialog edge */
  .product-inquiry-modal__dialog { padding-bottom: 32px; }
}
/* Add vertical spacing between products */
.shop-products .col-xl-4,
.shop-products .col-lg-6,
.shop-products .col-md-12,
.shop-products .col-sm-12 {
    margin-bottom: 30px;
}

/* Added for Service modal */
#serviceGalleryImages { display:flex; flex-wrap:wrap; gap:8px; }
#serviceGalleryImages .service-gallery-item { flex: 1 1 calc(50% - 8px); }
@media (max-width:640px){ #serviceGalleryImages .service-gallery-item{ flex:1 1 100%; } }

/* unify button styles */
.enquire-button,
.service-enquire-button,
.service-gallery-button,
.btn {
  display: inline-block;
  background: #0c6;
  color: #fff;
  border: 0;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight:600;
  text-decoration: none;
}

/* spacing */
.service-actions .service-enquire-button { margin-right: 8px; }

/* on small screens make them full width stack */
@media (max-width:640px){
  .service-actions .service-enquire-button,
  .service-actions .service-gallery-button {
    display:block;
    width:100%;
    box-sizing:border-box;
    margin-bottom:8px;
  }
}

/* gallery image styling */
#serviceGalleryImages { display:flex; flex-wrap:wrap; gap:8px; }
#serviceGalleryImages .service-gallery-item { flex: 1 1 calc(50% - 8px); }
#serviceGalleryImages .service-gallery-item img { width:100%; height:auto; border-radius:6px; display:block; }

/* added for css not working for form in modal for service enquire button */
/* ==== Force-visible and style CF7 inside modals ==== */
/* Scope everything to both modals so site-wide styles unaffected */
#productInquiryModal .wpcf7, 
#serviceInquiryModal .wpcf7,
#serviceGalleryModal .wpcf7 {
  color: #222;              /* default text color */
  font-size: 15px;
  line-height: 1.45;
}

/* Ensure the form wrapper uses block layout */
#productInquiryModal .wpcf7 form,
#serviceInquiryModal .wpcf7 form,
#serviceGalleryModal .wpcf7 form {
  display: block !important;
  width: 100%;
  margin: 8px 0 0 0;
}

/* Text inputs, email, tel, date, select, textarea */
#productInquiryModal .wpcf7 input[type="text"],
#productInquiryModal .wpcf7 input[type="email"],
#productInquiryModal .wpcf7 input[type="tel"],
#productInquiryModal .wpcf7 input[type="date"],
#productInquiryModal .wpcf7 select,
#productInquiryModal .wpcf7 textarea,
#serviceInquiryModal .wpcf7 input[type="text"],
#serviceInquiryModal .wpcf7 input[type="email"],
#serviceInquiryModal .wpcf7 input[type="tel"],
#serviceInquiryModal .wpcf7 input[type="date"],
#serviceInquiryModal .wpcf7 select,
#serviceInquiryModal .wpcf7 textarea {
  display: block !important;
  width: 100% !important;
  padding: 10px 12px !important;
  margin: 8px 0 12px 0 !important;
  border: 1px solid #d0d6db !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #222 !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
}

/* If theme sets inputs to transparent, override */
#productInquiryModal .wpcf7 input:focus,
#serviceInquiryModal .wpcf7 input:focus,
#productInquiryModal .wpcf7 textarea:focus,
#serviceInquiryModal .wpcf7 textarea:focus {
  outline: none;
  border-color: #0a8a4a;
  box-shadow: 0 0 0 3px rgba(10,138,74,0.08);
}

/* Labels above fields (if your CF7 uses labels) */
#productInquiryModal .wpcf7 label,
#serviceInquiryModal .wpcf7 label {
  display: block;
  margin-bottom: 6px;
  color: #222;
  font-weight: 600;
}

/* Submit button — match product button style */
#productInquiryModal .wpcf7 input[type="submit"],
#productInquiryModal .wpcf7 button[type="submit"],
#serviceInquiryModal .wpcf7 input[type="submit"],
#serviceInquiryModal .wpcf7 button[type="submit"] {
  background: #0c6 !important;        /* green */
  color: #fff !important;
  border: 0 !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  display: inline-block !important;
}

/* Make submit full width on small screens */
@media (max-width: 640px) {
  #productInquiryModal .wpcf7 input[type="submit"],
  #serviceInquiryModal .wpcf7 input[type="submit"] {
    width: 100% !important;
  }
}

/* Ensure hidden fields remain hidden but exist */
#productInquiryModal .wpcf7 input[type="hidden"],
#serviceInquiryModal .wpcf7 input[type="hidden"] {
  display: none !important;
}

/* Validation / response messages (CF7) */
#productInquiryModal .wpcf7-response-output,
#serviceInquiryModal .wpcf7-response-output {
  margin-top: 10px;
  padding: 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.04);
  color: #0a8a4a;
  font-weight: 600;
}

/* Force z-index of modal content above overlay (if overlay hides form) */
.product-inquiry-modal__dialog { z-index: 10001; }
.product-inquiry-modal__overlay { z-index: 10000; }

/* Last resort: if theme forces inputs invisible, make them visible */
#productInquiryModal .wpcf7 input,
#productInquiryModal .wpcf7 textarea,
#serviceInquiryModal .wpcf7 input,
#serviceInquiryModal .wpcf7 textarea {
  visibility: visible !important;
  opacity: 1 !important;
}


/* added for gallery modal
/* show pointer and focus outline for clickable icon-holder */
.icon-holder.service-gallery-button {
  cursor: pointer;
}
.icon-holder.service-gallery-button:focus {
  outline: 3px solid rgba(12,102,102,0.15);
  outline-offset: 3px;
}
 
/* relaced code finished

/* Force-show gallery button and match style */
.service-actions .service-gallery-button {
  display: inline-block !important;
  background: #0c6;
  color: #fff;
  border: 0;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* If hidden by parent rules, ensure visible */
.service-actions .service-gallery-button,
.service-actions .service-enquire-button {
  visibility: visible !important;
  opacity: 1 !important;
}

/* On smaller screens stack buttons */
@media (max-width: 640px) {
  .service-actions .service-gallery-button,
  .service-actions .service-enquire-button {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 !important;
  }
}


/*css for floating button for download brochure */
/* Floating Brochure button (expandable on hover) */
.floating-brochure {
  position: fixed;
  top: 20px;                /* adjust distance from top */
  right: 20px;              /* adjust distance from right */
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(233,33,46,0.95);
  color: #fff;
  padding: 10px 12px;
  border-radius: 30px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  text-decoration: none;
  transition: width 220ms ease, background 200ms ease, transform 150ms ease;
  overflow: hidden;
  max-width: 48px;          /* compact by default — only shows icon */
  white-space: nowrap;
  align-items: center;
}

/* Icon always visible */
.floating-brochure .fb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
}

/* Label hidden initially (we use max-width trick) */
.floating-brochure .fb-label {
  display: inline-block;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
  font-weight: 600;
  font-size: 14px;
}

/* Expand on hover and focus */
.floating-brochure:hover,
.floating-brochure:focus {
  background: #0c6;          /* change color on hover if you like */
  color: #fff;
  max-width: 240px;         /* expanded width to reveal label */
  outline: none;
  transform: translateY(-2px);
}
.floating-brochure:hover .fb-label,
.floating-brochure:focus .fb-label {
  opacity: 1;
  transform: translateX(0);
}

/* Better tap target on mobile and slightly reposition */
@media (max-width: 640px) {
  .floating-brochure {
    top: 14px;
    right: 14px;
    padding: 10px;
    max-width: 48px;
  }
  .floating-brochure:hover,
  .floating-brochure:focus {
    max-width: 180px;
  }
}

/* Optional: small accessible focus outline */
.floating-brochure:focus {
  box-shadow: 0 0 0 4px rgba(12,102,102,0.12), 0 6px 18px rgba(0,0,0,0.18);
}
/* code end for floating button for brochure */

/* Compact brand carousel styles */
.compact-brand-area { padding: 28px 0; }
.compact-brand-area .sec-title { margin: 0; }
.brand-header { margin-bottom: 12px; }

/* Control button style - adjust colors to match theme */
.brand-controls .btn-ghost {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.08);
  color: #222;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 6px;
  min-width: 38px;
  height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Carousel item compact size */
.brand-items-carousel .single-brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  box-sizing:border-box;
  min-height: 60px;   /* compact height */
}

/* Logo image sizing - small and centered */
.brand-items-carousel .single-brand-item img {
  max-width: 120px;   /* control logo width */
  max-height: 56px;   /* control logo height */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  opacity: .95;
  transition: transform .18s ease;
}

/* Slight hover effect */
.brand-items-carousel .single-brand-item:hover img { transform: translateY(-4px); }

/* Optional overlay text hidden by default */
.brand-items-carousel .overlay-content { display: none; }

/* Responsiveness - smaller logos on small screens */
@media (max-width: 768px) {
  .brand-items-carousel .single-brand-item img { max-width: 90px; max-height: 48px; }
  .brand-controls .btn-ghost { min-width: 34px; height:34px; padding:6px 8px; }
}

/* Ensure nav buttons align visually with title */
.brand-header .sec-title { display:flex; flex-direction:column; gap:6px; }
/* code end for compact brand *?

//for project gallery css
/* modal box should fit within viewport and allow inner scrolling if content tall */
#projectGalleryModal .pgm-dialog {
  max-width: 920px;
  width: calc(100% - 32px);
  max-height: 85vh;            /* keep dialog inside viewport */
  overflow: hidden;            /* hide overflow on dialog root */
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}

/* slider wrap should scroll if image too tall on small screens */
#projectGalleryModal .pgm-slider-wrap {
  overflow: auto;
  max-height: calc(85vh - 120px); /* leave space for caption and controls */
}

/* slide image sizing */
#projectGalleryModal .pgm-slider .pgm-slide img {
  max-height: calc(75vh - 100px); /* ensure image stays within modal */
  width: auto;
  max-width: 100%;
  display:block;
  margin: 0 auto;
  object-fit: contain;
}

/* center caption and controls */
#projectGalleryModal .pgm-caption { text-align:center; margin-top:8px; color:#666; }
#projectGalleryModal .pgm-controls { margin-top:12px; }

/* mobile tweaks */
@media (max-width:600px) {
  #projectGalleryModal .pgm-dialog { max-width: 96vw; padding:8px; }
  #projectGalleryModal .pgm-slider .pgm-slide img { max-height: 50vh; }
}

/*for social media in header home */
.single-line-social li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.single-line-social li a {
    display: inline-flex;
}