:root {
  --orange:#ff8a00;
  --dark-orange:#e67600;
  --black:#111;
  --white:#fff;
  --shadow:rgba(0,0,0,0.1);
}

* { box-sizing:border-box; margin:0; padding:0; font-family:'Poppins',sans-serif;}
body { background:var(--white); color:var(--black); line-height:1.6;}
a { text-decoration:none; color:inherit; }

/* Top bar */
.top-bar { display:flex; justify-content:flex-end; gap:20px; padding:6px 40px; font-size:14px; background:#f7f7f7;}
.top-bar a:hover{color:var(--orange);}

/* Header */
header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eee;}
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;}
.logo img{width:300px;height:auto;}
nav ul{list-style:none;display:flex;gap:30px;}
nav a{color:var(--orange);border-bottom:2px solid transparent;transition:.3s;font-weight:500;}
nav a:hover{color:var(--dark-orange);border-color:var(--dark-orange);}

/* HAMBURGER */
.hamburger {
  display:none;
  flex-direction:column;
  cursor:pointer;
  gap:5px;
}

.hamburger span {
  width:25px;
  height:3px;
  background:var(--orange);
  transition:0.3s;
}

/* MOBILE NAV */
@media (max-width:768px){

  .hamburger { display:flex; }

  nav {
    position:fixed;
    top:0;
    right:-100%;
    height:100vh;
    width:250px;
    background:#fff;
    box-shadow:-5px 0 20px rgba(0,0,0,0.1);
    transition:0.4s ease;
    padding-top:100px;
  }

  nav.active { right:0; }

  .nav-links {
    display:flex;
    flex-direction:column;
    gap:30px;
    padding-left:40px;
  }

  .hamburger.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
  }

  .hamburger.active span:nth-child(2){
    opacity:0;
  }

  .hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
  }

  .caption { font-size:clamp(0.8rem,1.5vw,1rem); }
}

/* Hero */
/* HERO SECTION */
.hero {
  position: relative;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  perspective: 1000px;
}

.hero canvas#hero-canvas {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

.hero h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(2rem, 5vw, 3rem);
  max-width: 900px;
  font-weight: 600;
  color: #fff;
  text-shadow: 1px 1px 10px rgba(0,0,0,0.2);
  opacity: 1;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero h1 span {
  display: inline-block;
  margin-right: 1rem; /* space between words */
}

/* Section Titles */
h2 {
    text-align: center;
    color: var(--orange);
    margin-bottom: 40px; /* space below the title */
    margin-top: 60px;    /* space above the title, creating separation from previous section */
    font-size: 2rem;
}

/* MAIN CONTAINER */
.venture-modern {
  padding: 120px 40px;
  max-width: 1200px;
  margin: auto;
}

/* HEADINGS */
.venture-modern h2 {
  text-align: center;
  font-size: 2.0rem;
  margin-bottom: 50px;
  font-weight: 700;
}

/* MISSION BLOCK */
.mission-block {
  text-align: center;
  max-width: 800px;
  margin: auto;
  margin-bottom: 120px;
}

.mission-block p {
  font-size: 1.1rem;
  line-height: 1.8;
}

/* DARK IMPACT SECTION */
.impact-section {
  background: linear-gradient(135deg, #111, #000);
  color: #fff;
  padding: 100px 60px;
  border-radius: 16px;
  margin-bottom: 120px;
}

.impact-content {
  max-width: 800px;
  margin: auto;
}

.impact-content p {
  line-height: 1.8;
  margin-bottom: 25px;
}

.impact-highlight {
  margin-top: 40px;
  padding: 30px;
  background: rgba(255,255,255,0.08);
  border-left: 4px solid var(--orange);
  font-weight: 500;
}

/* PHILOSOPHY */
.philosophy-section {
  text-align: center;
  margin-bottom: 120px;
}

.philosophy-quote {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 30px;
}

/* APPROACH */
.approach-section {
  margin-bottom: 120px;
}

/* ===============================
   OUR APPROACH - HORIZONTAL ROW
================================= */

.approach-grid {
  display: flex;
  gap: 30px;
  margin-top: 60px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}

.approach-card {
  flex: 1 1 0;
  min-width: 260px;
  background: #ffffff;
  border-radius: 18px;
  padding: 35px 25px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.06);
  transition: all 0.35s ease;
  scroll-snap-align: start;
  border: 1px solid rgba(0,0,0,0.05);
}

.approach-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}

.approach-card h3 {
  font-size: 1.1rem;
  margin-bottom: 15px;
  font-weight: 700;
  color: #111;
}

.approach-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}

.approach-card {
  padding: 40px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 15px 40px rgba(0,0,0,0.06);
  transition: 0.3s ease;
}

.approach-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.approach-card h3 {
  margin-bottom: 20px;
  font-weight: 600;
}

/* FOCUS */
.focus-section ul {
  list-style: none;
  max-width: 700px;
  margin: auto;
  padding: 0;
}

.focus-section li {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  font-size: 1.1rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .venture-modern {
    padding: 80px 20px;
  }

  .impact-section {
    padding: 60px 25px;
  }
}

@media (max-width: 1024px) {
  .approach-grid {
    flex-wrap: nowrap;
  }
}

@media (max-width: 768px) {
  .approach-grid {
    flex-direction: column;
    overflow-x: visible;
  }

  .approach-card {
    width: 100%;
  }
}


/* Portfolio Grid */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;padding:20px 0; margin-bottom: 60px;}
.portfolio-item{display:flex;justify-content:center;align-items:center;background:#eee;border-radius:15px;padding:15px;transition:.4s;opacity:0;transform:translateY(20px);}
.portfolio-item img{max-width:100%;transition:.4s filter;}
.portfolio-item:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 15px 30px var(--shadow);filter: brightness(1.1);}
.portfolio-item img{filter:grayscale(100%);}
.portfolio-item:hover img{filter:grayscale(0%);

}

/* Footer */
footer{background:#000;color:#fff;padding:80px 40px;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;align-items:center;}
.footer-grid img{max-width:200px;height:auto;}

/* Fade-in animation */
.visible{opacity:1 !important;transform:translateY(0) !important;transition:opacity 0.8s ease, transform 0.8s ease;}

@media(max-width:768px){
  .venture-grid,.portfolio-grid{grid-template-columns:1fr;gap:30px;}
  h2{margin-bottom:30px;}
}