/* GLOBAL */

html {
  scroll-behavior: smooth;
}

body {
  margin:0;
  font-family: system-ui, Arial;
  background:#f5f7fa;
  animation: pageFade 0.8s ease;
}

* {
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* PAGE FADE */

@keyframes pageFade {
  from {opacity:0; transform:translateY(12px);}
  to {opacity:1; transform:translateY(0);}
}

/* PROGRESS BAR */

#progress-bar {
  position:fixed;
  top:0;
  left:0;
  height:4px;
  width:0%;
  background:linear-gradient(90deg,#00f2ff,#0066ff);
  z-index:9999;
}

/* LOADER */

#loader {
  position:fixed;
  width:100%;
  height:100vh;
  background:#020617;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:99999;
}

.loader-logo {
  font-size:40px;
  font-weight:bold;
  color:#00eaff;
  letter-spacing:4px;
  margin-bottom:20px;
}

.skeleton-box {
  width:280px;
  height:30px;
  border-radius:6px;
  background:linear-gradient(90deg,#222 25%,#333 37%,#222 63%);
  background-size:400% 100%;
  animation:skeleton 1.4s infinite;
}

@keyframes skeleton {
  0% {background-position:100% 0;}
  100% {background-position:0 0;}
}

/* HEADER */

.top {
  background:#0f5132;
  color:white;
  text-align:center;
  padding:80px 20px;
}

/* NAVBAR */

.nav {
  background:white;
  display:flex;
  justify-content:center;
  gap:25px;
  padding:14px;
  position:sticky;
  top:0;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  z-index:1000;
}

.nav a {
  color:#0f5132;
  font-weight:600;
  position:relative;
  text-decoration:none;
}

.nav a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:#0f5132;
  transition:0.3s;
}

.nav a:hover::after {
  width:100%;
}

.nav button {
  background:#0f5132;
  color:white;
  border:none;
  padding:6px 14px;
  border-radius:4px;
  cursor:pointer;
}

/* SECTIONS */

.block {
  max-width:900px;
  margin:auto;
  padding:80px 20px;
  text-align:center;
}

.block.light {
  background:white;
}

/* REVEAL */

.reveal {
  opacity:0;
  transform:scale(0.9);
  transition:1s ease;
}

.reveal.active {
  opacity:1;
  transform:scale(1);
}

/* PRODUCTS */

.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:30px;
  margin-top:40px;
}

.product-card {
  position:relative;
  background:rgba(255,255,255,0.07);
  backdrop-filter:blur(14px);
  border-radius:18px;
  padding:20px;
  transform-style:preserve-3d;
  transition:0.4s ease;
}

.product-card:hover {
  transform:translateY(-10px) rotateY(10deg) rotateX(8deg) scale(1.05);
  box-shadow:0 0 20px rgba(0,153,255,0.6),
             0 0 60px rgba(0,153,255,0.3);
}

.product-card img {
  width:100%;
  height:200px;
  object-fit:contain;
  transition:0.4s ease;
}

.product-card:hover img {
  transform:scale(1.1);
}

/* GLOW BORDER */

.glow-border {
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg,#00f2ff,#ff00ff) border-box;
}

/* FEATURED BADGE */

.featured-badge {
  position:absolute;
  top:12px;
  right:12px;
  background:linear-gradient(45deg,#ff00ff,#00ffff);
  color:white;
  padding:6px 12px;
  border-radius:20px;
  font-size:11px;
  font-weight:bold;
  box-shadow:0 0 12px #00ffff;
  animation:pulse 2s infinite;
}

@keyframes pulse {
  0% {transform:scale(1);}
  50% {transform:scale(1.1);}
  100% {transform:scale(1);}
}

/* CONTACT BUTTON */

.contact-btn {
  display:inline-block;
  background:#0f5132;
  color:white;
  padding:14px 36px;
  border-radius:30px;
  margin-top:20px;
  text-decoration:none;
  font-weight:bold;
}

.contact-btn:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 25px rgba(0,0,0,0.2);
}

/* FOOTER */

.footer {
  background:linear-gradient(45deg,#020617,#020024);
  padding:30px;
  text-align:center;
  color:#00eaff;
}

/* LANGUAGE */

.ar {display:none;}
.lang-ar .en {display:none;}
.lang-ar .ar {display:block;}

/* ACCESSIBILITY */

:focus {
  outline:2px solid #0f5132;
  outline-offset:4px;
}

/* IMAGE PERFORMANCE */

img {
  content-visibility:auto;
}

/* Video Container */
.video-container {
  position: relative;
  max-width: 800px;
  max-height: 350px;
  margin: 40px auto;
  border-radius: 12px;
  overflow: hidden;
  background-color: #000; /* black background before video plays */
  box-shadow: 0 10px 25px rgba(0,0,0,0.3); /* subtle shadow for professional look */
}

/* Video */
video#companyVideo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background-color: #000;
}

/* Play button overlay */
.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 0 15px #000; /* subtle shadow for clarity */
  z-index: 10;
}