/* General Reset */
body, html {
  margin: 0;
  padding: 0;
  font-family: Poppins, san-serif;
  background: #000;
  color: #fff;
}

/* Sections */
.hero-section, .site-section {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: flex-end;   /* vertical bottom for hero; sections will adjust individually */
  overflow: hidden;
  padding-bottom: 50px;    /* space from bottom for hero content */
}

.bg-video, .hero-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* dark overlay for text readability */
}

.hero-content, .section-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* horizontal padding for all text */
}

/* Headings & Text */
h1, h2, p, ol {
  margin: 10px 0;
}

h1 {
  font-family: 'Poppins', sans-serif;   /* bold, premium font */
  font-size: 22 px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(45deg, #000000,#000000); /* gradient bg */
  padding: 0.3em 0.8em;
  display: inline-block;                   /* background hugs text */
  border-radius: 10px;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.3); /* subtle shadow */
  line-height: 1.2;
}

h2 {
  color: #fff;
  font-size: 22px;
}

h3 {
  color: #fbda1d;
  font-size: 18px;
}

h4 {
  color: #fff;
  font-size: 14px;
}

p {
  color: #fff;
  font-size: 16px;
}

ol {
  padding-left: 20px;
}

/* Fade + Blur Scroll Animation */
.blur-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease;
}

.blur-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Services */
.services-list {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 20px;
  margin-top: 20px;
}

.service-card {
  background: rgba(255,255,255,0.05);
  padding: 5px;
  border-radius: 10px;
}

/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 15px;
  margin-top: 20px;
}

.portfolio-item {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video Popup */
.video-popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.video-popup.show {
  display: flex;
}

.video-popup video {
  max-width: 90%;
  max-height: 90%;
}

#close-popup {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}

/* Buttons as Images */
.img-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.img-btn img {
  width: 250px;
  max-width: 50%; /* responsive on mobile */
  margin-top: 15px; /* space below hero text */
}

/* Header */
.site-header {
  position: fixed;
  top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 40px;
  z-index: 100;
  background: none;
}

.logo img {
  height: 100px;
  padding: 10px 20px;
  justify-content:center; 
  align-items:center;
  }
  
}

.main-nav a {
  color: #fff;
  margin: 0px 20px;
  text-decoration: none;
  font-weight: 600;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
 
  .hero-section {
    padding-bottom: 30px;
  }
  .img-btn img {
    width: 200px;
  }
}
  .site-header {
    padding: 10px 20px;
  }
  .header-cta img {
    width: 20px;
  }
  .social-icons img {
    width: 20px;
    height: 20px;
  }
  .portfolio-grid,
  .portfolio-items {
    display: grid;

    gap: 30px;
  }
}

.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; /* space from edges */
  z-index: 100;
  background: none;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px; /* space between button and icons */
  flex-wrap: wrap;
}

.header-cta img {
  display: flex;
  width: 120px;
  padding: 0px 10px; /* space from edges */

.social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-icons img {
  width: 25px;
  height: 25px;
  filter: brightness(0) invert(1); /* white icons */
  transition: transform 0.2s;
}

.social-icons img:hover {
  transform: scale(1.1);
}


/* Text shadow for readability over videos */
.hero-content h1,
.hero-content h2,
.hero-content p,
.section-content h2,
.section-content p {
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.2);
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  border: 2px solid #fff;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.scroll-down:hover {
  opacity: 1;
}

.scroll-down span {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: scrollDot 1.5s infinite;
}

@keyframes scrollDot {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(18px);
    opacity: 0;
  }
}

{
  scroll-behavior: smooth;
}


  /* =====================
     FEATURES
  ====================== */

  .features h2 {
    font-size: 3rem;
  }

  .feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
    gap: 20px;
  }

  .feature {
    padding: 20px;
    border-left: 0px solid var(--blue);
  }
  
  
  /* Base arrow */
.arrow{width:40px;height:40px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg);margin:auto}

/* Circle container */
.circle{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.4)}

/* Colors */
.white{border-color:#fff}
.red{border-color:#ff3f3f}
.blue{border-color:#00c6ff}
purple{border-color:#6b5cff}
.green{border-color:#00f260}
.orange{border-color:#ff9f43}

/* Dot arrow */
.dot{width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:0 10px #fff,0 20px #fff;margin:auto}

/* Chevron */
.chevron{font-size:3rem;font-weight:900;line-height:1}

/* Mouse */
.mouse{width:30px;height:50px;border:2px solid #fff;border-radius:20px;position:relative}
.mouse::after{content:"";width:6px;height:6px;background:#fff;border-radius:50%;position:absolute;top:8px;left:50%;transform:translateX(-50%);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;top:8px}30%{opacity:1}100%{opacity:0;top:26px}}

/* Animations */
.bounce{animation:bounce 1.6s infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-45deg)}50%{transform:translateY(10px) rotate(-45deg)}}

.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{0%{opacity:.4}50%{opacity:1}100%{opacity:.4}}

.float{animation:float 2s infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(12px)}100%{transform:translateY(0)}}



/* LIST STYLES */
.list-clean li{margin-bottom:10px}
.list-check li{list-style:none;position:relative;padding-left:28px;margin-bottom:12px}
.list-check li::before{content:'✓';position:absolute;left:0;color:#00e5ff;font-weight:900}
.list-arrow li{list-style:none;padding-left:26px;position:relative}
.list-arrow li::before{content:'→';position:absolute;left:0;color:#ff9f43}
.list-pill li{list-style:none;background:rgba(255,255,255,.1);padding:10px 16px;border-radius:999px;margin-bottom:10px}
.list-number li{font-size:1.2rem;font-weight:700;margin-bottom:10px}
.list-divider li{list-style:none;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.15)}

/* TEXT STYLES */
.big{font-size:2rem;font-weight:900}
.outline{color:transparent;-webkit-text-stroke:1px #fff}
grad-text{background:linear-gradient(135deg,#ff005c,#6a00ff);-webkit-background-clip:text;color:transparent;font-weight:900}
.highlight{background:linear-gradient(120deg,transparent 40%,#ffeb3b 40%);color:#000;padding:4px 6px}
.glow{text-shadow:0 0 16px rgba(255,255,255,.5)}
.ghost{font-size:4rem;font-weight:900;opacity:.08}
.smallcaps{font-variant:small-caps;letter-spacing:1px}
.badge{display:inline-block;padding:6px 12px;border-radius:999px;background:linear-gradient(135deg,#00f260,#0575e6);font-weight:800}

/* INLINE BLOCKS */
.inline-box{display:inline-block;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.12);margin:6px 0}
.code{font-family:monospace;background:#111;padding:10px;border-radius:10px;font-size:.9rem}
.quote{font-size:1.4rem;font-style:italic;border-left:4px solid #6b5cff;padding-left:16px}