/* Info Boxes - Clean & Consistent Spacing Fix */

/* Base reset for all three info boxes */
#product-section.introducing-block-info,
#technologies-section.introducing-block-info,
#application-section.introducing-block-info {
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
}

/* Desktop spacing and heights */
@media (min-width:900px){
  /* Reduced heights by 50% for standard spacing */
  #product-section.introducing-block-info,
  #application-section.introducing-block-info { min-height: 45vh !important; }
  #technologies-section.introducing-block-info { min-height: 30vh !important; }

  /* Remove padding from outer section since container-inner handles it */
  #product-section.introducing-block-info,
  #technologies-section.introducing-block-info,
  #application-section.introducing-block-info {
    padding: 0 !important;
    margin: 2rem 0 !important; /* Add moderate margin between sections */
  }

  /* Add minimal vertical padding to container-inner */
  #product-section.introducing-block-info > .container-inner,
  #technologies-section.introducing-block-info > .container-inner,
  #application-section.introducing-block-info > .container-inner {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Equal spacing between boxes */
  #technologies-section.introducing-block-info,
  #application-section.introducing-block-info {
    margin-top: 0 !important;
  }

  /* Make halves fill height and center content */
  #product-section.introducing-block-info .img-area,
  #product-section.introducing-block-info .text-area,
  #technologies-section.introducing-block-info .img-area,
  #technologies-section.introducing-block-info .text-area,
  #application-section.introducing-block-info .img-area,
  #application-section.introducing-block-info .text-area {
    height: 100% !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 !important;
    width: 50% !important;
    flex: 0 0 50% !important;
  }

  /* Consistent gap between image and text */
  #product-section.introducing-block-info > .container-inner,
  #technologies-section.introducing-block-info > .container-inner,
  #application-section.introducing-block-info > .container-inner {
    gap: clamp(2rem, 4vw, 4rem) !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Image sizing */
  #product-section .img-area img:not(.bg-circle-light),
  #application-section .img-area img:not(.bg-circle-light) {
    max-width: clamp(400px, 45vw, 700px);
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 !important;
  }

  /* MAR (info box 2) - 25% bigger image */
  #technologies-section .img-area img:not(.bg-circle-light) {
    max-width: clamp(500px, 56.25vw, 875px); /* 25% bigger than others */
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 !important;
  }

  /* MAR text area - more left spacing */
  #technologies-section.introducing-block-info .text-area {
    /*padding-left: 12vw !important; */
  }
}

/* RESPONSIVE TABLET & MOBILE - FIXED CSS */

/* Tablet Layout (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  #product-section.introducing-block-info,
  #technologies-section.introducing-block-info,
  #application-section.introducing-block-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 4rem 3rem !important;
    margin: 3rem auto !important;
    max-width: 800px !important;
    min-height: auto !important;
    gap: 3rem !important;
  }

  #product-section .img-area,
  #technologies-section .img-area,
  #application-section .img-area {
    order: 1 !important;
    width: 100% !important;
    max-width: 720px !important; /* increased from 600px by 20% */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #product-section .text-area,
  #technologies-section .text-area,
  #application-section .text-area {
    order: 2 !important;
    width: 100% !important;
    max-width: 700px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
  }

  #product-section .img-area img,
  #technologies-section .img-area img,
  #application-section .img-area img {
    width: 100% !important;
    height: auto !important;
    max-height: 480px !important; /* increased from 400px by 20% */
    object-fit: contain !important;
    display: block !important;
  }
}

/* Mobile Layout (768px and below) */
@media (max-width: 768px) {
  #product-section.introducing-block-info,
  #technologies-section.introducing-block-info,
  #application-section.introducing-block-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 3rem 2rem !important;
    margin: 2.5rem auto !important;
    max-width: 100% !important;
    min-height: auto !important;
    gap: 2rem !important;
  }

  #product-section .img-area,
  #technologies-section .img-area,
  #application-section .img-area {
    order: 1 !important;
    width: 100% !important;
    max-width: 480px !important; /* increased from 400px by 20% */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #product-section .text-area,
  #technologies-section .text-area,
  #application-section .text-area {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
  }

  #product-section .img-area img,
  #technologies-section .img-area img,
  #application-section .img-area img {
    width: 100% !important;
    height: auto !important;
    max-height: 360px !important; /* increased from 300px by 20% */
    object-fit: contain !important;
    display: block !important;
  }

  #product-section .text-area h1,
  #technologies-section .text-area h1,
  #application-section .text-area h1 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
  }

  #product-section .description,
  #technologies-section ul,
  #application-section ul {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
}

/* Small Mobile Layout (480px and below) */
@media (max-width: 480px) {
  #product-section.introducing-block-info,
  #technologies-section.introducing-block-info,
  #application-section.introducing-block-info {
    padding: 2.5rem 1.5rem !important;
    margin: 2rem auto !important;
    gap: 1.5rem !important;
  }

  #product-section .img-area,
  #technologies-section .img-area,
  #application-section .img-area {
    max-width: 384px !important; /* increased from 320px by 20% */
  }

  #product-section .img-area img,
  #technologies-section .img-area img,
  #application-section .img-area img {
    max-height: 300px !important; /* increased from 250px by 20% */
  }

  #product-section .text-area h1,
  #technologies-section .text-area h1,
  #application-section .text-area h1 {
    font-size: 1.6rem !important;
    margin-bottom: 1rem !important;
  }

  #product-section .description,
  #technologies-section ul,
  #application-section ul {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
}

/* Fix inline image margins */
#product-section.introducing-block-info .img-area img[style],
#technologies-section.introducing-block-info .img-area img[style] {
  margin-left: 0 !important;
}

/* Text readability */
#product-section.introducing-block-info .text-area,
#technologies-section.introducing-block-info .text-area,
#application-section.introducing-block-info .text-area {
  max-width: 55ch;
}

/* Typography improvements */
#product-section.introducing-block-info .text-area h1,
#technologies-section.introducing-block-info .text-area h1,
#application-section.introducing-block-info .text-area h1 {
  margin-bottom: 1rem !important;
  line-height: 1.1 !important;
}

#product-section.introducing-block-info .text-area ul,
#technologies-section.introducing-block-info .text-area ul,
#application-section.introducing-block-info .text-area ul {
  margin-bottom: 1.5rem !important;
}

#product-section.introducing-block-info .text-area ul li,
#technologies-section.introducing-block-info .text-area ul li,
#application-section.introducing-block-info .text-area ul li {
  margin-bottom: 0.5rem !important;
  line-height: 1.4 !important;
}

/* MAR Image Scroll Animation */
.mar-image-animate {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
  transform: translateX(100px);
  opacity: 0;
  will-change: transform, opacity;
}

.mar-image-animate.animate-in {
  transform: translateX(0);
  opacity: 1;
}

.mar-image-animate.animate-out {
  transform: translateX(100px);
  opacity: 0.3;
}

/* Ensure animation works on all screen sizes */
@media (max-width: 768px) {
  .mar-image-animate {
    transform: translateX(50px);
  }

  .mar-image-animate.animate-out {
    transform: translateX(50px);
  }
}

/* Shared Explore grid: 3 per row on desktop, 1 per row below 1100px */
.explore-grid { display: grid !important; grid-template-columns: repeat(3, minmax(280px, 1fr)) !important; gap: 60px !important; align-items: stretch !important; }
@media (max-width: 1100px) { .explore-grid { grid-template-columns: 1fr !important; gap: 30px !important; } }

/* END spacing fix */

/* === MAR (Info Box 2) Green Glow Behind Image === */
#technologies-section.introducing-block-info .img-area { position: relative; overflow: visible; }
#technologies-section.introducing-block-info .img-area img { position: relative; z-index: 1; }
#technologies-section.introducing-block-info .img-area::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* Make the glow larger than the image/container so it’s clearly visible */
  width: clamp(384px, 96%, 880px);
  height: clamp(384px, 96%, 880px);
  transform: translate(-50%, -50%) scale(0.90);
  transform-origin: center center;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0, 255, 153, 0.35) 0%,
    rgba(0, 255, 153, 0.22) 38%,
    rgba(0, 255, 153, 0.10) 65%,
    rgba(0, 255, 153, 0.00) 78%
  );
  filter: blur(48px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
  animation: marGlowPulse 6s ease-in-out infinite;
}

@keyframes marGlowPulse {
  0%   { transform: translate(-50%, -50%) scale(0.90); opacity: 0.75; }
  50%  { transform: translate(-50%, -50%) scale(1.08); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(0.90); opacity: 0.75; }
}

/* Tweak glow size/strength for smaller screens to avoid overpowering */
@media (max-width: 1100px) {
  #technologies-section.introducing-block-info .img-area::before {
    width: clamp(288px, 80%, 656px);
    height: clamp(288px, 80%, 656px);
    filter: blur(40px);
  }
}

/* === D-Bot (Info Box 1) Green Glow Behind Image === */
#product-section.introducing-block-info .img-area { position: relative; overflow: visible; }
#product-section.introducing-block-info .img-area img { position: relative; z-index: 1; }
#product-section.introducing-block-info .img-area::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* Sized to the image/container; slightly smaller than MAR */
  width: clamp(320px, 100%, 820px);
  height: clamp(320px, 100%, 820px);
  transform: translate(-50%, -50%) scale(0.90);
  transform-origin: center center;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0, 255, 153, 0.35) 0%,
    rgba(0, 255, 153, 0.22) 38%,
    rgba(0, 255, 153, 0.10) 65%,
    rgba(0, 255, 153, 0.00) 78%
  );
  filter: blur(44px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
  animation: marGlowPulse 6s ease-in-out infinite;
}

@media (max-width: 1100px) {
  #product-section.introducing-block-info .img-area::before {
    width: clamp(260px, 88%, 600px);
    height: clamp(260px, 88%, 600px);
    filter: blur(36px);
  }
}

/* === Dynamic Duo (Info Box 3) Green Glow Behind Image === */
#application-section.introducing-block-info .img-area { position: relative; overflow: visible; }
#application-section.introducing-block-info .img-area img { position: relative; z-index: 1; }
#application-section.introducing-block-info .img-area::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(320px, 100%, 820px);
  height: clamp(320px, 100%, 820px);
  transform: translate(-50%, -50%) scale(0.90);
  transform-origin: center center;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0, 255, 153, 0.35) 0%,
    rgba(0, 255, 153, 0.22) 38%,
    rgba(0, 255, 153, 0.10) 65%,
    rgba(0, 255, 153, 0.00) 78%
  );
  filter: blur(44px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
  animation: marGlowPulse 6s ease-in-out infinite;
}

@media (max-width: 1100px) {
  #application-section.introducing-block-info .img-area::before {
    width: clamp(260px, 88%, 600px);
    height: clamp(260px, 88%, 600px);
    filter: blur(36px);
  }
}

/* === Unified Circular Glow Overrides (always centered & perfectly round) === */
#product-section.introducing-block-info .img-area,
#technologies-section.introducing-block-info .img-area,
#application-section.introducing-block-info .img-area { position: relative; overflow: visible; }

#product-section.introducing-block-info .img-area::before,
#technologies-section.introducing-block-info .img-area::before,
#application-section.introducing-block-info .img-area::before {
  /* Force circular shape */
  aspect-ratio: 1 / 1;
  width: clamp(320px, 42vw, 760px);
  height: auto; /* determined by aspect-ratio */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  border-radius: 50% !important;
  background: radial-gradient(circle at center,
    rgba(0,255,153,0.40) 0%,
    rgba(0,255,153,0.26) 40%,
    rgba(0,255,153,0.14) 68%,
    rgba(0,255,153,0.00) 80%
  );
  filter: blur(50px);
  opacity: 0.78;
  animation: marGlowPulse 6s ease-in-out infinite;
}

@media (max-width: 1100px) {
  #product-section.introducing-block-info .img-area::before,
  #technologies-section.introducing-block-info .img-area::before,
  #application-section.introducing-block-info .img-area::before {
    width: clamp(240px, 70vw, 560px);
    transform: translate(-50%, -50%) scale(0.95);
    filter: blur(40px);
    opacity: 0.72;
  }
}

@media (max-width: 640px) {
  #product-section.introducing-block-info .img-area::before,
  #technologies-section.introducing-block-info .img-area::before,
  #application-section.introducing-block-info .img-area::before {
    width: clamp(220px, 82vw, 480px);
    filter: blur(34px);
    opacity: 0.7;
  }
}

/* Slightly smoother pulse specifically for circular glow */
@keyframes marGlowPulse {
  0%   { transform: translate(-50%, -50%) scale(0.92); opacity: 0.78; }
  50%  { transform: translate(-50%, -50%) scale(1.04); opacity: 0.88; }
  100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.78; }
}

/* === Cobots page: Add circular green glow for Water Resistance & Safety sections === */
#water-resistance-section.introducing-block-info .img-area,
#safety-section.introducing-block-info .img-area { position:relative; overflow:visible; }

#water-resistance-section.introducing-block-info .img-area::before,
#safety-section.introducing-block-info .img-area::before {
  content:"";
  position:absolute; left:50%; top:50%;
  aspect-ratio:1/1; width:clamp(300px,40vw,720px); height:auto;
  transform:translate(-50%,-50%) scale(.92);
  border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(0,255,153,0.40) 0%,
    rgba(0,255,153,0.26) 40%,
    rgba(0,255,153,0.14) 68%,
    rgba(0,255,153,0.00) 80%);
  filter:blur(50px);
  opacity:.78;
  pointer-events:none;
  animation:marGlowPulse 6s ease-in-out infinite;
  z-index:0;
}
@media (max-width:1100px){
  #water-resistance-section.introducing-block-info .img-area::before,
  #safety-section.introducing-block-info .img-area::before { width:clamp(240px,70vw,560px); filter:blur(40px); opacity:.72; }
}
@media (max-width:640px){
  #water-resistance-section.introducing-block-info .img-area::before,
  #safety-section.introducing-block-info .img-area::before { width:clamp(220px,82vw,480px); filter:blur(34px); opacity:.70; }
}