:root{
  --dark-purple:#1b1230; /* deeper dark purple for stronger theme presence */
  --gold:#C7A32A;
  --dark-pink:#7B1840;
  --black-purple:#0b0712;
  --muted:#9b93a8;
  --glass:rgba(255,255,255,0.03);
  --accent-glow:rgba(199,163,42,0.18);
  --max-width:1200px;
}

*{box-sizing:border-box}
html,body{height:100%;}
html {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
body{
  margin:0;
  font-family:'Tajawal','Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:#e7e4f1;
  background:var(--dark-purple);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  position: relative;
  overflow-x: hidden;
}

/* Smooth scroll animations */
.fade-in{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}
.slide-in-left{
  opacity:0;
  transform:translateX(-50px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.slide-in-left.visible{
  opacity:1;
  transform:translateX(0);
}
.slide-in-right{
  opacity:0;
  transform:translateX(50px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.slide-in-right.visible{
  opacity:1;
  transform:translateX(0);
}
.scale-in{
  opacity:0;
  transform:scale(0.9);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.scale-in.visible{
  opacity:1;
  transform:scale(1);
}

/* Light theme overrides */
body.theme-light{
  color:#1b1b1b;
  background:#fafafa;
}
body.theme-light .navbar{
  background:rgba(255,255,255,0.95);
  box-shadow:0 6px 18px rgba(20,20,30,0.08);
  border-bottom:1px solid rgba(20,20,30,0.06);
}
body.theme-light .navbar.translucent{backdrop-filter:blur(6px);background:rgba(255,255,255,0.78);box-shadow:0 10px 30px rgba(20,20,30,0.08)}
body.theme-light .brand{color:#e91e63}
body.theme-light .nav-links a{color:#4a4a4a}
body.theme-light .nav-links a:hover{color:#e91e63;box-shadow:0 6px 18px rgba(233,30,99,0.12)}
body.theme-light .nav-cta{background:linear-gradient(90deg,#f06292,#ff4081);color:#fff}
body.theme-light .lang-btn{border-color:rgba(0,0,0,0.08);color:#e91e63}
body.theme-light .lang-btn:hover{background:rgba(233,30,99,0.06)}

/* Sections */
body.theme-light .section::before{
  background:linear-gradient(90deg, transparent, #e91e63 20%, #e91e63 80%, transparent);
  opacity:0.25;
}
body.theme-light .section::after{
  background:#e91e63;
  box-shadow:0 0 20px rgba(233,30,99,0.3);
}
body.theme-light .section-title{color:#1a1a1a}
body.theme-light .section-sub{color:#555}
body.theme-light .headline{color:#fff !important}
body.theme-light .card{background:rgba(255,255,255,0.9); box-shadow:0 6px 18px rgba(20,20,30,0.08); border:1px solid rgba(0,0,0,0.06)}
body.theme-light .card:hover{box-shadow:0 18px 40px rgba(20,20,30,0.12)}
body.theme-light .card-img{background:#f6f6fb}
body.theme-light .product-card{background:rgba(255,255,255,0.92); border-color:rgba(0,0,0,0.06)}
body.theme-light .video-placeholder{background:linear-gradient(120deg, rgba(250,250,255,0.7), rgba(245,245,250,0.7))}
body.theme-light .video-content{color:#1b1b1b}

/* Why cards */
body.theme-light .why-card{background:rgba(255,255,255,0.92); border-color:rgba(0,0,0,0.06)}

/* Contact */
body.theme-light .contact-form{background:rgba(255,255,255,0.92); border-color:rgba(0,0,0,0.06)}
body.theme-light .contact-form input,.theme-light .contact-form select,.theme-light .contact-form textarea{color:#333;border-color:rgba(0,0,0,0.08)}
body.theme-light .contact-form input:focus,.theme-light .contact-form select:focus,.theme-light .contact-form textarea:focus{box-shadow:0 8px 30px rgba(233,30,99,0.18);border-color:#e91e63;color:#000}
body.theme-light .contact-info{color:#555}

/* Footer */
body.theme-light .site-footer{background:#f7f7fb; color:#444}
body.theme-light .footer-about h4{color:#e91e63}
body.theme-light .footer-links a{color:#555}
body.theme-light .footer-links a:hover{color:#e91e63}
body.theme-light .footer-bottom{color:rgba(0,0,0,0.35); border-top:1px solid rgba(0,0,0,0.06)}

/* Arabic font (font-only) - preserve LTR layout
   We intentionally do NOT change `dir` or reverse layout.
   Applying `body.lang-ar` only switches the Arabic font so text reads naturally
   while the overall page direction and layout remain left-to-right. */
body.lang-ar{font-family:'Tajawal','Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
body.lang-ar input, body.lang-ar select, body.lang-ar textarea, body.lang-ar button{font-family:'Tajawal','Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}/* RTL layout rules — apply when `body.rtl` is present (triggered for Arabic) */
body.rtl{direction:rtl}
body.rtl{font-family:'Tajawal','Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
body.rtl .nav-links{flex-direction:row-reverse}
body.rtl .hero-inner{text-align:right}
body.rtl .cards, body.rtl .product-grid, body.rtl .why-grid{direction:rtl}
body.rtl input, body.rtl textarea, body.rtl select{direction:rtl;text-align:right}
body.rtl .brand{direction:rtl}
/* Mobile menu: unified vertical layout for both LTR and RTL */
body.rtl .nav-links.open{align-items:flex-start;flex-direction:column}
body.rtl .nav-links.open a{text-align:inherit;padding:12px 14px;width:100%}


.container{max-width:var(--max-width);margin:0 auto;padding:0 24px}

/* Sectors Grid */
.sectors-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin-top:40px;
}
.sector-card{
  background:rgba(37,31,61,0.6);
  padding:20px;
  border-radius:12px;
  box-shadow:0 6px 24px rgba(2,1,8,0.6);
  border:1px solid rgba(199,163,42,0.04);
  text-align:center;
  transition:transform .35s ease, box-shadow .35s ease;
}
.sector-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 36px rgba(199,163,42,0.1), 0 6px 20px rgba(123,24,64,0.08);
  border-color:rgba(199,163,42,0.1);
}
.sector-img{
  width:100%;
  height:160px;
  background:rgba(27,18,48,0.7);
  border-radius:8px;
  margin-bottom:14px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sector-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.92;
  transition:opacity .3s ease, transform .3s ease;
}
.sector-card:hover .sector-img img{
  opacity:1;
  transform:scale(1.05);
}
.sector-card h4{
  margin:0;
  font-size:16px;
  font-weight:600;
  color:var(--gold);
}
/* Light theme sectors */
.sector-card{
  background:rgba(255,255,255,0.9);
  box-shadow:0 6px 18px rgba(20,20,30,0.08);
  border:1px solid rgba(0,0,0,0.06);
}
.sector-card:hover{
  box-shadow:0 12px 32px rgba(20,20,30,0.14);
}
.sector-img{
  background:rgba(250,250,255,0.8);
}
.sector-card h4{
  color:#6b4f00;
}
/* Responsive sectors grid */
@media(max-width:900px){
  .sectors-grid{grid-template-columns:repeat(3, 1fr);gap:18px}
}
@media(max-width:700px){
  .sectors-grid{grid-template-columns:repeat(2, 1fr);gap:16px}
  .sector-img{height:140px}
  .sector-card h4{font-size:14px}
}
@media(max-width:500px){
  .sectors-grid{grid-template-columns:1fr;gap:14px}
  .sector-img{height:180px}
}

/* Projects Slider */
.projects-slider-wrapper {
  position: relative;
  margin-top: 40px;
  padding: 0 60px;
}

.projects-slider {
  overflow: hidden;
  border-radius: 12px;
}

.projects-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: 24px;
}

/* RTL support for projects slider */
body.rtl .projects-track {
  direction: ltr;
}

.project-card {
  flex: 0 0 calc(33.333% - 16px);
  background: rgba(60,15,40,0.6);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(26,5,18,0.7), 0 2px 12px rgba(236,72,153,0.08);
  border: 1px solid rgba(236,72,153,0.1);
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(236,72,153,0.2), 0 6px 24px rgba(217,70,239,0.15);
  border-color: rgba(236,72,153,0.3);
}

.project-img {
  width: 100%;
  height: 200px;
  background: rgba(45,10,31,0.7);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.project-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.92;
  transition:opacity .3s ease, transform .3s ease;
}
.project-card:hover .project-img img{
  opacity:1;
  transform:scale(1.05);
}
.project-card h4{
  margin:0 0 8px 0;
  font-size:18px;
  font-weight:600;
  color:var(--gold);
}
.project-card p{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

/* Slider Controls */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(233, 30, 99, 0.9);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  color: #fff;
}

.slider-btn:hover {
  background: rgba(233, 30, 99, 1);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(233, 30, 99, 0.4);
}

.slider-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.slider-prev {
  left: 0;
}

.slider-next {
  right: 0;
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(233, 30, 99, 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dot.active {
  background: rgba(233, 30, 99, 1);
  width: 32px;
  border-radius: 6px;
}

.slider-dot:hover {
  background: rgba(233, 30, 99, 0.6);
}

/* Light theme projects */
.project-card{
  background:rgba(255,255,255,0.9);
  box-shadow:0 6px 18px rgba(20,20,30,0.08);
  border:1px solid rgba(0,0,0,0.06);
}
.project-card:hover{
  box-shadow:0 12px 32px rgba(20,20,30,0.14);
}
.project-img{
  background:rgba(250,250,255,0.8);
}
.project-card h4{
  color:#6b4f00;
}
.project-card p{
  color:#555;
}
/* Responsive projects grid */
@media(max-width:900px){
  .projects-grid{grid-template-columns:repeat(2, 1fr);gap:18px}
}
@media(max-width:600px){
  .projects-grid{grid-template-columns:1fr;gap:16px}
  .project-img{height:180px}
}
@media(max-width:450px){
  .project-card {
    flex: 0 0 100%;
  }
}

/* NAVBAR */
.navbar{
  position:fixed !important;
  top:0 !important;
  left:0;
  right:0;
  z-index:1000;
  height:72px;
  padding:12px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--dark-purple);
  box-shadow:0 6px 18px rgba(2,1,8,0.5);
  border-bottom:1px solid rgba(199,163,42,0.05);
  transition:backdrop-filter .35s ease, background .35s ease, box-shadow .35s ease;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-transform:translate3d(0,0,0);
}
/* Prevent navbar movement on iOS Safari */
@supports (-webkit-touch-callout: none) {
  .navbar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
  }
}
.navbar.translucent{backdrop-filter:blur(6px);background:rgba(37,31,61,0.55);box-shadow:0 10px 30px rgba(199,163,42,0.06)}
.brand{font-weight:700;letter-spacing:1px;color:var(--gold);display:flex;align-items:center;text-decoration:none;cursor:pointer;}
.brand:hover{opacity:0.8;}
.brand-logo{height:70px;width:auto;display:block;}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:6px;transition:color .25s ease, box-shadow .25s ease}
.nav-links a:hover{color:var(--gold);box-shadow:0 6px 18px rgba(199,163,42,0.12)}

/* Dropdown menu */
.nav-dropdown{position:relative}
.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  background:rgba(27,18,48,0.98);
  backdrop-filter:blur(10px);
  border:1px solid rgba(199,163,42,0.15);
  border-radius:8px;
  min-width:220px;
  padding:8px 0;
  margin-top:8px;
  list-style:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:all 0.3s ease;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  z-index:1000;
}
.nav-dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dropdown-menu li{margin:0;padding:0}
.dropdown-menu a{
  display:block;
  padding:10px 16px;
  color:var(--muted);
  white-space:nowrap;
  border-radius:4px;
  margin:0 8px;
}
.dropdown-menu a:hover{
  background:rgba(199,163,42,0.08);
  color:var(--gold);
  box-shadow:none;
}

/* Light theme dropdown */
.dropdown-menu{
  background:rgba(255,255,255,0.98);
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.dropdown-menu a{color:#4a4a4a}
.dropdown-menu a:hover{
  background:rgba(233,30,99,0.08);
  color:#e91e63;
}

.nav-cta{background:linear-gradient(90deg,#e91e63,#f06292);border:none;padding:8px 14px;border-radius:8px;color:#fff;font-weight:700;cursor:pointer;pointer-events:auto;position:relative;z-index:10}
.nav-cta:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(233,30,99,0.3)}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--muted);padding:6px 10px;border-radius:6px}

/* Language selector button (styled) */
.lang-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--gold);padding:6px 10px;border-radius:8px;font-weight:700;cursor:pointer;transition:all .22s ease;min-width:44px}
.lang-btn:hover{background:rgba(199,163,42,0.06);box-shadow:0 8px 30px rgba(199,163,42,0.06);color:var(--gold)}
.lang-btn:focus{outline:2px solid rgba(199,163,42,0.12);outline-offset:2px}
.lang-btn.active{background:linear-gradient(90deg,var(--gold),var(--dark-pink));color:#120b14;box-shadow:0 12px 36px rgba(123,24,64,0.08)}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-top:72px}
.particle-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.led-grid{position:absolute;inset:0;background-image:linear-gradient(transparent 60%, rgba(199,163,42,0.02) 100%);opacity:0.75;mix-blend-mode:overlay;z-index:1}
.hero-inner{position:relative;z-index:3;text-align:center;padding:80px 20px}
.headline{font-size:clamp(28px,6vw,64px);line-height:1.05;margin:0;font-weight:800;letter-spacing:-1px}
.headline .accent{
  background:linear-gradient(90deg,var(--gold),var(--dark-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 10px 30px rgba(123,24,64,0.06);
}
.headline-underline{display:block;height:6px;margin-top:10px;background:linear-gradient(90deg,var(--gold),rgba(199,163,42,0.6));width:0;opacity:0.95;border-radius:6px}
.subheadline{color:var(--muted);margin-top:14px;font-weight:500}
.hero-cta{margin-top:24px;display:flex;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:10px;font-weight:700;text-decoration:none;cursor:pointer;border:2px solid transparent}
.btn-primary{background:linear-gradient(90deg,#e91e63,#f06292);color:#fff}
.btn-outline{background:transparent;border-color:rgba(233,30,99,0.22);color:#e91e63}
.btn-outline:hover{box-shadow:0 10px 30px rgba(233,30,99,0.08)}

/* Animated underline growth */
@keyframes growWidth{from{width:0;}to{width:220px;}}

.headline.animate .headline-underline{animation:growWidth 1s cubic-bezier(.2,.9,.3,1) forwards}

/* Solutions cards */
.section{padding:80px 0;position:relative}
.section::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:400px;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  opacity:0.3;
  border-radius:10px;
}
.section::after{
  content:'';
  position:absolute;
  top:-3px;
  left:50%;
  transform:translateX(-50%);
  width:12px;
  height:12px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:0 0 20px rgba(199,163,42,0.4);
}
.hero + .section::before,
.hero + .section::after{
  display:none;
}
.section-title{text-align:center;font-size:28px;margin-bottom:8px;color:#fff}
.section-sub{text-align:center;color:var(--muted);margin-bottom:28px}

/* About Section */
.about-section{
  background:transparent;
  padding:100px 0;
}
.about-section{
  background:transparent;
}
.about-text{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  font-size:18px;
  line-height:1.8;
  color:rgba(255,255,255,0.9);
  padding:0 20px;
}
.about-text{
  color:rgba(26,26,26,0.9);
}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.card{
  background:rgba(37,31,61,0.6);
  padding:32px;
  border-radius:14px;
  box-shadow:0 6px 28px rgba(2,1,8,0.6);
  border:1px solid rgba(199,163,42,0.04);
  transition:transform .35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1);
  min-height:280px;
  cursor:pointer;
}
.card-icon{font-size:32px;margin-bottom:12px;transition:transform 0.3s ease}
.card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 24px 60px rgba(199,163,42,0.12), 0 12px 40px rgba(123,24,64,0.1);
}
.card:hover .card-icon{
  transform:scale(1.1) rotate(5deg);
}
.card:active{
  transform:translateY(-8px) scale(1.01);
}

/* card image */
.card-img{height:300px;border-radius:10px;overflow:hidden;margin-bottom:12px;background:#120615;display:block}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Products grid */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.product-card{background:rgba(18,13,26,0.6);padding:28px;border-radius:12px;border:2px solid rgba(199,163,42,0.04);text-align:center;font-weight:700;transition:transform .35s ease, border-color .25s ease, box-shadow .35s ease}
.product-card:hover{transform:translateY(-8px);border-image:linear-gradient(90deg,var(--gold),var(--dark-pink)) 1;border-color:var(--gold);box-shadow:0 20px 60px rgba(199,163,42,0.06), 0 12px 40px rgba(123,24,64,0.04);}

/* video demo */
.video-wrap{position:relative}
.video-placeholder{height:360px;border-radius:12px;overflow:hidden;background:linear-gradient(120deg, rgba(13,9,17,0.6), rgba(37,31,61,0.55));display:flex;align-items:center;justify-content:center}
.video-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,1,8,0.65), rgba(37,31,61,0.2));mix-blend-mode:multiply}
.video-content{position:relative;z-index:2;text-align:center;color:#fff}
.video-buttons{display:flex;gap:12px;justify-content:center;margin-top:12px}

/* additional pink accent hover for outlines */
.btn-outline:hover{box-shadow:0 12px 40px rgba(123,24,64,0.08)}


/* Why choose */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px;max-width:900px;margin-left:auto;margin-right:auto}
.why-card{background:rgba(37,31,61,0.6);padding:20px;border-radius:12px;text-align:center;border:1px solid rgba(199,163,42,0.03);transition:transform .3s ease,box-shadow .3s ease}
.why-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(199,163,42,0.06)}
.why-icon{font-size:34px;margin-bottom:8px}

/* Video section */
.video-section{padding:60px 0}
.video-section .section-title{margin-bottom:40px}
.videos-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  max-width:1600px;
  margin:0 auto;
  padding:0 30px;
}
.video-item{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  transform:scale(1);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.video-item:hover{
  transform:scale(1.02);
  box-shadow:0 12px 48px rgba(0,0,0,0.5);
}
.video-wrapper{
  position:relative;
  width:100%;
  padding-bottom:85%; /* Increased height */
  background:#000;
}
.promo-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:transparent;
  border:none;
  cursor:pointer;
  transition:transform .3s ease, opacity .3s ease;
  z-index:10;
  opacity:1;
}
.play-btn:hover{
  transform:translate(-50%, -50%) scale(1.1);
}
.video-item.playing .play-btn{
  opacity:0;
  pointer-events:none;
}

/* Video Modal */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  overflow-y: auto;
}

.video-modal.active {
  display: flex;
}

.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  cursor: pointer;
  z-index: 10000;
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 1400px;
  max-height: 85vh;
  z-index: 10001;
  margin: auto;
}

.modal-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(199, 163, 42, 0.9);
  border: 2px solid #fff;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, opacity 0.2s, background 0.2s;
  z-index: 10002;
  border-radius: 50%;
  line-height: 1;
  font-weight: 300;
}

.modal-close:hover {
  transform: scale(1.1);
  background: rgba(199, 163, 42, 1);
}

.modal-video-wrapper {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
}

.modal-video-wrapper video {
  width: 100%;
  max-height: 80vh;
  display: block;
  border-radius: 8px;
  object-fit: contain;
}

/* Ensure video controls are always visible */
.modal-video-wrapper video::-webkit-media-controls-panel {
  display: flex !important;
  opacity: 1 !important;
}

.modal-video-wrapper video::-webkit-media-controls {
  opacity: 1 !important;
}

/* Product Image Modal */
.product-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.product-modal.active {
  display: flex;
}

.product-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  cursor: pointer;
  z-index: 10000;
}

.product-modal-content {
  position: relative;
  width: auto;
  max-width: 95vw;
  max-height: 90vh;
  background: rgba(27, 18, 48, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(199, 163, 42, 0.2);
  border-radius: 16px;
  padding: 40px;
  z-index: 10001;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-modal-content {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(233, 30, 99, 0.2);
}

.product-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(233, 30, 99, 0.9);
  border: 2px solid #fff;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10002;
  border-radius: 50%;
  line-height: 1;
  font-weight: 300;
}

.product-modal-close:hover {
  transform: scale(1.1);
  background: rgba(233, 30, 99, 1);
}

#productModalTitle {
  margin: 0 0 24px 0;
  font-size: 28px;
  color: var(--gold);
  text-align: center;
  width: 100%;
}

#productModalTitle {
  color: #e91e63;
}

.product-modal-image {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}

.product-modal-image {
  background: transparent;
}

.product-modal-image img {
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  transition: none;
  display: block;
}

.product-modal-image.zoomed {
  cursor: zoom-out;
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
}

.product-modal-image.zoomed img {
  max-width: none;
  max-height: none;
  width: 250%;
  height: auto;
  cursor: move;
}

@media (max-width:900px){
  .videos-row{grid-template-columns:1fr;gap:20px}
  
  .projects-slider-wrapper {
    padding: 0 50px;
  }
  
  .project-card {
    flex: 0 0 calc(50% - 12px);
  }
  
  .slider-btn {
    width: 40px;
    height: 40px;
  }
  
  .video-modal {
    padding: 40px 20px;
  }
  
  .modal-close {
    top: -45px;
    right: 5px;
    width: 40px;
    height: 40px;
    font-size: 28px;
  }
  
  .video-modal-content {
    width: 95%;
    max-height: 90vh;
  }
  
  .modal-video-wrapper video {
    max-height: 70vh;
  }
}

@media (max-width:768px){
  .video-section{padding:40px 0}
  
  .projects-slider-wrapper {
    padding: 0 45px;
  }
  
  .projects-track {
    gap: 0;
  }
  
  .project-card {
    flex: 0 0 100%;
  }
  
  .slider-btn {
    width: 36px;
    height: 36px;
  }
  
  .video-modal {
    padding: 30px 15px;
  }
  
  .modal-video-wrapper video {
    max-height: 60vh;
  }
}

/* Contact form */
.contact-wrap{display:grid;grid-template-columns:1fr 340px;gap:28px;margin-top:18px}
.contact-form{background:rgba(18,13,26,0.5);padding:20px;border-radius:12px;border:1px solid rgba(199,163,42,0.03)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted);margin-bottom:12px;outline:none;transition:box-shadow .25s ease,border-color .25s ease}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{box-shadow:0 8px 30px var(--accent-glow);border-color:var(--gold);color:#fff}
.form-actions{display:flex;gap:12px}

.contact-info{background:transparent;color:var(--muted)}
.socials a{display:inline-block;margin-right:8px;color:var(--muted);padding:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.02)}
.socials a:hover{color:var(--gold);box-shadow:0 10px 30px rgba(199,163,42,0.08)}
/* Social icon images */
.social-icon{width:32px;height:32px;object-fit:contain;display:inline-block;border-radius:8px;transition:transform .2s ease, box-shadow .2s ease}
.socials a:hover .social-icon,.footer-social a:hover .social-icon{transform:scale(1.1);box-shadow:0 0 12px rgba(199,163,42,0.18)}
/* Make TikTok icon slightly larger in light theme for symmetry */
.socials a[aria-label="TikTok"] .social-icon,
.footer-social a[aria-label="TikTok"] .social-icon{width:36px;height:36px}

/* WhatsApp Chat Button */
@keyframes whatsappPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #25D366;
  color: #fff;
  border-radius: 50px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
  text-decoration: none;
  animation: whatsappPulse 2s infinite;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.7);
  animation: none;
}
.whatsapp-float svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.whatsapp-text {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}
/* RTL positioning for WhatsApp button */
body.rtl .whatsapp-float {
  right: auto;
  left: 30px;
  flex-direction: row-reverse;
}
@media (max-width: 768px) {
  .whatsapp-float {
    padding: 10px 16px;
    bottom: 20px;
    right: 20px;
  }
  body.rtl .whatsapp-float {
    right: auto;
    left: 20px;
  }
  .whatsapp-float svg {
    width: 32px;
    height: 32px;
  }
  .whatsapp-text {
    font-size: 14px;
  }
}

/* 3D Screen Preview Section */
/* Full Video Section */
.video-full-section{
  padding:60px 20px;
  margin:0;
  background:transparent;
  overflow:hidden;
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.full-video{
  width:100%;
  max-width:900px;
  height:auto;
  object-fit:contain;
  display:block;
  border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

/* Mobile responsive */
@media (max-width:768px){
  .video-full-section{
    padding:40px 15px;
  }
  
  .full-video{
    max-width:100%;
    border-radius:8px;
  }
  
  .model-controls{
    bottom:10px;
    right:10px;
    gap:8px;
  }
  
  .model-btn{
    width:40px;
    height:40px;
    font-size:20px;
  }
}

@media (max-width:480px){
  .screen-3d-container{
    height:400px;
  }
  
  #led-canvas{
    border-width:0.5px;
  }
  
  .model-btn{
    width:35px;
    height:35px;
    font-size:18px;
  }
}

/* Footer */
.site-footer{background:var(--dark-purple);padding:40px 0;margin-top:60px;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:18px}
.footer-bottom{text-align:center;padding:18px 0;color:r
  gba(255,255,255,0.18);border-top:1px solid rgba(255,255,255,0.02);margin-top:20px}
.footer-about h4{color:var(--gold)}
.footer-links ul,.footer-products ul{list-style:none;padding:0;margin:0}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--gold)}
/* Footer social icons layout */
.footer-social{display:flex;gap:10px;align-items:center}
.footer-social a{display:inline-flex;text-decoration:none;border:none;line-height:0}

/* small screens */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .contact-wrap{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav-links{display:none}
  .navbar{padding:8px 12px}
  .brand{font-size:14px}
}

/* Mobile menu open state (full-width dropdown) */
.nav-links.open{
  display:flex !important;
  position:fixed;
  top:var(--nav-height,72px);
  left:0;
  right:0;
  background:rgba(27,9,24,0.96);
  flex-direction:column;
  gap:18px;
  padding:24px 20px;
  align-items:flex-start;
  overflow:auto;
  z-index:9999; /* ensure visible above any page layers */
  box-shadow:0 10px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
  max-height:auto;
  width:100%;
}
.nav-links.open a{display:block;padding:12px 14px;width:100%;font-size:18px;border-radius:8px}
.nav-links.open a:hover{background:rgba(199,163,42,0.04);color:var(--gold)}

/* Light theme mobile menu */
.nav-links.open{
  background:rgba(255,255,255,0.96);
  box-shadow:0 10px 50px rgba(0,0,0,0.15), inset 0 1px 0 rgba(0,0,0,0.03);
}
.nav-links.open a{color:#333}
.nav-links.open a:hover{background:rgba(233,30,99,0.08);color:#e91e63}

@media (max-width:600px){
  .cards{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-info p{
    white-space:normal;
  }
  .mobile-break{
    display:inline;
  }
}

/* subtle animated background waves */
@keyframes slowWave{
  0%{transform:translateX(-10%)}
  50%{transform:translateX(10%)}
  100%{transform:translateX(-10%)}
}
.led-grid{background-size:600px 600px;opacity:0.6;animation:slowWave 18s ease-in-out infinite}

/* fade-in utilities */
.reveal{opacity:0;transform:translateY(20px);transition:all .9s cubic-bezier(.2,.9,.3,1)}
.reveal.visible{opacity:1;transform:none}

/* Hero video background */
#hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.65) blur(2px);
  pointer-events: none;
}
.hero-inner, .led-grid {
  position: relative;
  z-index: 2;
}
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 72px;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 60vh;
}
.headline {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (min-width: 768px) {
  .headline {
    white-space: nowrap;
  }
}
.headline-underline {
  margin-left: auto;
  margin-right: auto;
}
body.rtl .headline .accent {
  background: linear-gradient(90deg, var(--gold), var(--dark-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 30px rgba(123,24,64,0.06);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
body.rtl .headline {
  text-align: center;
  font-size: clamp(28px,6vw,64px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.05;
}