
        .carousel-item img { height: 400px; object-fit: cover; }
        .gallery-img { max-height:180px; object-fit:cover; }
        .gallery-video { width:100%; height:180px; object-fit:cover; }
        .partners img {max-height: 70px;}
        footer { background:#0d1b2a; color:#fff; }
        .faq .accordion-button { font-weight:600; }
        .product-card { position: relative; overflow: hidden; border-radius: 18px; box-shadow: 0 4px 32px 0 rgba(52,58,64,0.15); transition: transform 0.2s, box-shadow 0.2s; background: #fff; }
        .product-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 8px 40px 0 rgba(0,0,0,0.25); }
        .sale-badge { position: absolute; top: 14px; left: -36px; background: linear-gradient(90deg,#e74c3c 80%,#c0392b 100%); color: #fff; padding: 6px 40px; font-weight: bold; font-size: 1rem; transform: rotate(-25deg); box-shadow: 0 2px 6px rgba(0,0,0,0.1); z-index: 10; }
        .card-img-top { width: 100%; height: 210px; object-fit: cover; }
        .price-wrap { display: flex; align-items: baseline; gap: 9px; }
        .price-original { text-decoration: line-through; color: #adadad; font-size: 1rem; }
        .price-discounted { color: #e74c3c; font-size: 1.2rem; font-weight: 700; letter-spacing: 1px; }
        .card-title { min-height:48px; }

.animated-section {
  opacity: 0;
  transform: translateY(60px) scale(0.96);
  animation: fadeup 1s 0.2s forwards;
}
@keyframes fadeup {
  to {
    opacity: 1;
    transform: none;
  }
}
.fade-in {
  opacity: 0;
  animation: fadein 0.8s 0.5s forwards;
}
.fade-in.delay-1 { animation-delay: 1s; }
@keyframes fadein {
  to { opacity: 1;}
}
.zoom-in {
  opacity: 0;
  transform: scale(0.95);
  animation: zoomin 0.7s 1s forwards;
}
@keyframes zoomin {
  to {
    opacity: 1;
    transform: none;
  }
}
.slide-up {
  opacity: 0;
  transform: translateY(32px);
  animation: slideup 0.7s 1.3s forwards;
}
.slide-up.delay-1 { animation-delay: 1.7s; }
.slide-up.delay-2 { animation-delay: 2.1s; }
.slide-up.delay-3 { animation-delay: 2.5s; }
.slide-up.delay-4 { animation-delay: 2.9s; }
.slide-up.delay-5 { animation-delay: 3.3s; }
@keyframes slideup {
  to {
    opacity: 1;
    transform: none;
  }
}

.admin-stat-card {
  border-radius: 1.1rem;
  transition: box-shadow .18s, transform .16s;
  background: rgba(240,245,255,.99);
}
.admin-stat-card:hover {
  box-shadow: 0 8px 34px #2196f329;
  transform: translateY(-4px) scale(1.03);
}
.stat-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.bg-indigo { background: #5f2eea !important; }
.bg-pink { background: #EA4C89 !important; }
.btn-outline-pink {
  color: #EA4C89;
  border-color: #EA4C89;
}
.btn-outline-pink:hover, .btn-outline-pink:focus {
  background-color: #EA4C89 !important;
  color: #fff !important;
}

.admin-stat-card {
  border-radius: 1.1rem;
  transition:box-shadow .18s,transform .16s;
  background: rgba(240,245,255,.99);
}
.admin-stat-card:hover {
  box-shadow: 0 8px 34px #2196f329;
  transform: translateY(-4px) scale(1.03);
}
.stat-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.bg-indigo { background: #5f2eea !important; }
.bg-pink { background: #EA4C89 !important; }


.professional-anim-section {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  animation: fadeup-bounce 1.2s .3s cubic-bezier(.52,1.85,.47,.93) forwards;
  background: rgba(220,240,255,0.88);
}

@keyframes fadeup-bounce {
  70% { opacity: 1; transform: translateY(-10px) scale(1.01);}
  100%{ opacity:1; transform:none;}
}

.subtle-divider {
  height: 3px; width: 38px; border-radius:2px;
  background: linear-gradient(90deg,#2196f3 30%,#00e676 70%);
  margin-bottom:12px;
}
.list-group.kit-list-pro .kit-bullet {
  font-size: 1.1rem;
  margin-right: 9px;
  color:#2196f3;
}
.btn-gradient-pro {
  background: linear-gradient(90deg,#1976d2 60%, #00e676 120%);
  color: #fff;
  border: none;
  transition: .2s cubic-bezier(.4,3.2,.6,1) all;
}
.btn-gradient-pro:hover {
  filter:brightness(1.1);
  box-shadow: 0 2px 22px #1976d234;
}
.feature-card-group .glass-card {
  background:rgba(255,255,255,0.88);
  border: none;
  box-shadow: 0 2px 23px #2196f310;
  border-radius:18px;
  min-height: 126px;
  transition: box-shadow .2s;
}
.feature-card-group .glass-card:hover {
  box-shadow:0 5px 32px #03a9f416;
}
.pro-badge {
  font-size: 1rem;
  font-weight: 500;
  padding: 7px 12px;
  margin-right:4px; margin-bottom: 5px;
  border:1px solid #e8eaf6;
  border-radius: 999px;
  background: rgba(240,245,255,0.80);
}
.text-gradient-pro { 
  background: linear-gradient(90deg,#1565c0 40%,#49D49D 70%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.text-gradient-blue { 
  background: linear-gradient(90deg,#2196f3 40%,#1976d2 80%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.text-gradient-green {
  background: linear-gradient(90deg,#009688 10%,#00e676 90%);
  background-clip: text;-webkit-background-clip: text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.text-gradient-warning {
  background: linear-gradient(90deg,#ffc107,#ffeb3b);
  background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.text-gradient-secondary {
  background: linear-gradient(90deg,#7b8ccb,#393e46);
  background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.text-gradient-danger {
  background: linear-gradient(90deg,#f44336 10%,#feb47b 90%);
  background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.text-gradient-dark {
  background: linear-gradient(90deg,#121212,#757575 84%);
  background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* Animated Cards Fade-in Slide effect */
.fade-slide { opacity:0; transform:translateY(22px); animation:fadeSlide 1s .85s forwards;}
.fade-slide.delay-1{animation-delay:1.05s;}
.fade-slide.delay-2{animation-delay:1.25s;}
.fade-slide.delay-3{animation-delay:1.45s;}
.fade-slide.delay-4{animation-delay:1.65s;}
.fade-slide.delay-5{animation-delay:1.85s;}

@keyframes fadeSlide {
  to { opacity:1; transform:none;}
}

.pro-badge {
  display: inline-flex;
  align-items: center;
  margin: 2px 4px 2px 0;
  padding: 0.32em 0.9em 0.32em 0.7em;
  font-size: 1em;
  border-radius: 2em;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
  background: #f1f4fa;
  box-shadow: none;
  transition: background .13s;
  line-height: 1.1;
}
.pro-badge i { font-size: 1.02em; margin-right: .2em; opacity: 0.94; }
.card { background: rgba(245,248,255,0.99); border-radius: 1.18rem; box-shadow: none; }
.card-title { letter-spacing: 0.5px; }



.kit-card {
  background: rgba(240,245,255,0.87);
  border-radius: 1.2rem;
  transition: transform .18s cubic-bezier(.48,1.8,.58,.98), box-shadow .18s;
  box-shadow: 0 1px 9px 0 rgba(33,150,243,0.06);
  overflow: hidden;
}
.kit-card:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 6px 32px #1565c021;
}

.kit-img {
  max-height: 170px;
  object-fit: cover;
  background: #e3f2fd;
  border-bottom: 2px solid #2196f3;
}

.text-gradient-pro { 
  background: linear-gradient(90deg,#1565c0 40%,#49D49D 70%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.gallery-fixed-img {
  width: 200px;
  height: 160px;
  object-fit: cover;
  object-position: center;
  background: #e3f2fd;
  display: block;
}

.banner-slider-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 4px solid #b39ddb;
  background: #fff;
  box-shadow: 0 2px 8px #4527a034;
}
@media (max-width: 767.98px) {
  .banner-slider-img { width: 56px; height: 56px; }
  .display-4 { font-size: 2.1rem; }
}
.gallery-marquee {
  gap: 2.5rem;
  min-width: 100%;
  width: auto;
  white-space: nowrap;
  animation: marquee-scroll 24s linear infinite;
}
.marquee-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.marquee-caption {
  color: #fff;
  margin-top: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  font-size: 1rem;
  white-space: normal;
  text-align: center;
  text-shadow: 0 1px 8px #4527a088;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0%);}
  100% { transform: translateX(-50%);}
}

.kit-card { border-radius: 1.5rem; transition: transform .13s; }
.kit-card:hover { transform: scale(1.04); }
.gradient-stem { background: linear-gradient(135deg, #42a5f5 60%, #66bb6a 100%) !important; }
.gradient-robotics { background: linear-gradient(135deg, #8e24aa 65%, #ffca28 100%) !important; }
.gradient-iot { background: linear-gradient(135deg, #00bcd4 65%, #00e5ff 100%) !important; }
.gradient-sensor { background: linear-gradient(135deg, #00c853 67%, #ffd600 110%) !important; }
.gradient-cnc { background: linear-gradient(135deg, #ff7043 67%, #ffea00 100%) !important; }
.gradient-ai { background: linear-gradient(135deg, #1de9b6 67%, #5e35b1 100%) !important; }
.gradient-drone { background: linear-gradient(135deg, #e65100 65%, #2196f3 100%) !important; }
.gradient-3d { background: linear-gradient(135deg, #ea80fc 65%, #43e97b 120%) !important; }
.gradient-arvr { background: linear-gradient(135deg, #00bfae 80%, #3949ab 110%) !important; }
.card-title { letter-spacing: 1px; }


/* HEXAGON CARD SHAPE (CSS Clip-Path): */
.hex-card {
  width: 340px;
  min-height: 450px;
  margin-bottom: 1.5rem;
  padding: 0;
  clip-path: polygon(
    25% 4%, 75% 4%, 
    100% 50%, 
    75% 96%, 25% 96%, 
    0% 50%
  );
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: center;
  overflow: hidden;
  border: none;
  transition: transform .15s;
  box-shadow: 0 4px 24px #2222cc17;
  background-size: cover;
}
.hex-card:hover { transform: scale(1.04);}
.hex-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hex-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin: 0;
  border-bottom: 3px solid rgba(255,255,255,0.1);
}
.hex-content {
  padding: 1.2rem 1.4rem 1rem 1.4rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 1.05rem;
}
@media (max-width: 991.98px) {
  .hex-card { width:94vw; max-width:98vw; min-height:410px;}
}
@media (max-width: 600px) {
  .hex-card { width:100vw; max-width:100vw; min-height:410px;}
  .hex-content { padding: 1.2rem .7rem 1rem .7rem;}
}

.semicircle-card {
  border-radius: 28px;
  width: 360px;
  min-height: 445px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 20px #2c2c2c0b;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.card-semicircle {
  width: 100%;
  height: 110px;
  background: #fff;
  border-radius: 0 0 180px 180px/0 0 110px 110px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: visible;
  position: relative;
}
.card-semicircle-img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
  background: #fff;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translateX(-50%);
  box-shadow: 0 4px 22px #0001;
}
.semicircle-card .card-body {
  padding: 0 1.3rem 1.1rem 1.3rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 1.04rem;
  min-height: 150px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.pt-img { /* Ensure text always starts well below the circle */
  padding-top: 90px !important;
}
.semicircle-card h5 {
  letter-spacing: 1px;
}
@media (max-width: 991.98px) {
  .semicircle-card { width: 97vw; min-height: 410px; }
  .card-semicircle-img { width: 100px; height: 100px; bottom: -50px; }
  .pt-img { padding-top: 68px !important;}
}
@media (max-width: 600px) {
  .semicircle-card { width: 100vw; min-height: 410px; }
  .semicircle-card .card-body { padding-left: .7rem; padding-right: .7rem; }
}




