/* GLOBAL */
body, html {
  margin: 0;
  background: #000;
  color: white;
  font-family: 'Inter', sans-serif;
}

/* MOBILE HEADER DEFAULT HIDDEN */
.mobile-header {
  display: none;
}
.mobile-menu {
  display: none;
}

/* MAIN LAYOUT */
.layout {
  display: flex;
  height: 100vh;
}

/* SIDEBAR (DESKTOP) */
.sidebar {
  width: 280px;
  background: #000;
  padding: 40px 30px;
  border-right: 1px solid #111;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.logo {
  font-size: 2.3rem;
  font-weight: 900;
  color: white;
}

.logo-link {
  text-decoration: none;
  color: white;
}

nav ul { list-style: none; padding: 0; }
nav ul li { margin: 18px 0; }
nav ul li a {
  text-decoration: none;
  color: #ccc;
  transition: 0.25s;
}
nav ul li a:hover { color: #ff4d4d; }

.contact-btn {
  background: #ff4d4d;
  padding: 16px;
  text-align: center;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

/* HERO */
.hero-container { position: relative; flex: 1; overflow: hidden; }
.hero-video { width: 100%; height: 100%; object-fit: cover; filter: brightness(55%); }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }

.hero-text {
  position: absolute;
  top: 40%;
  left: 8%;
  transform: translateY(-40%);
  max-width: 900px;
}

.title { 
  font-size: 5rem; 
  font-weight: 900; 
  color: #ffffff; 
}

.subtext {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.7;
  max-width: 900px;
  color: #ffffff;
}

.learn-more {
  margin-top: 22px;
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 2px solid #ffffff;
  padding-bottom: 4px;
  transition: 0.25s ease;
}
.learn-more:hover { opacity: 0.7; }

/* SCROLL DOT */
.scroll-indicator {
  position: absolute;
  bottom: 35px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  background: #ffffff; border-radius: 50%;
  animation: bounce 1.6s infinite;
}
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

/* 3 PANEL SECTION */
.three-panel-section {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  height: 60vh;
}

.panel {
  position: relative;
  overflow: hidden;
}

.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s;
}

/* DARK OVERLAY */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1;
  transition: 0.35s;
}
.panel:hover::before {
  background: rgba(0,0,0,0.45);
}

.panel-text {
  position: absolute;
  left: 40px;
  bottom: 20px;
  color: white;
  z-index: 2;
}
.panel-text h3 { font-size: 4rem; margin: 0; }

.panel-text p {
  font-size: 2rem;   /* increase this number for bigger text */
  margin: 4px 0 0 0;
  font-weight: 400;
}


/* CURSOR */
.cursor-follower {
  position: fixed;
  width: 14px; height: 14px;
  background: #ffffff;
  border-radius: 50%;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 99999;
  transition: transform 0.15s, width 0.25s, height 0.25s;
}
.cursor-hover { width: 32px !important; height: 32px !important; }

/* ---------------------- */
/* ABOUT PAGE (MATCHES YOUR HTML EXACTLY) */
/* ---------------------- */

.about-container {
  flex: 1;
  padding: 90px 140px;
  background: #ffffff;
  color: #000;
  position: relative;
}

.about-background-text {
  position: absolute;
  top: 50px;
  left: 120px;
  font-size: 14rem;
  font-weight: 900;
  color: #f5f5f5;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

.about-title {
  font-size: 3rem;
  font-weight: 900;
  position: relative;
  z-index: 2;
}

.about-content {
  margin-top: 40px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.about-text {
  flex: 1.2;
  font-size: 1.1rem;
  line-height: 1.7;
}

.about-text h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 20px;
}

.resume-btn {
  margin-top: 30px;
  display: inline-block;
  background: #ff4d4d;
  padding: 14px 28px;
  border-radius: 6px;
  color: white;
  font-weight: 700;
  text-decoration: none;
  transition: 0.2s;
}
.resume-btn:hover { opacity: 0.85; }

.about-image img {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  object-fit: cover;
}

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

  .sidebar { display: none; }

  .mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid #222;
    background: #000;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .mobile-logo {
    font-size: 1.3rem;
    font-weight: 900;
    text-decoration: none;
    color: white;
  }

  /* Hamburger */
  .hamburger {
    width: 30px;
    cursor: pointer;
  }
  .hamburger span {
    display: block;
    height: 3px;
    margin: 5px 0;
    background: #fff;
    transition: 0.3s;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .mobile-menu {
    display: block;
    position: fixed;
    top: 0; right: -100%;
    width: 70%;
    height: 100vh;
    background: #111;
    padding: 80px 25px;
    transition: 0.35s ease;
    z-index: 999;
  }
  .mobile-menu.open { right: 0; }

  .mobile-menu a {
    font-size: 1.3rem;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
  }

  .mobile-contact {
    margin-top: 40px;
    display: inline-block;
    padding: 12px 0;
    background: #ff4d4d;
    width: 100%;
    text-align: center;
    border-radius: 6px;
  }

  .hero-container { height: 70vh; }
  .title { font-size: 2.5rem; }
  .subtext { font-size: 1.6rem; max-width: 95%; }

  .three-panel-section {
    grid-template-columns: 1fr;
    height: auto;
  }
  .panel { height: 40vh; }

  .about-container {
    padding: 60px 30px;
  }

  .about-background-text {
    font-size: 6rem;
    top: 20px;
    left: 20px;
  }

  .about-content {
    flex-direction: column;
    text-align: center;
  }

  .about-image img {
    max-width: 340px;
    margin: 0 auto;
  }

  .cursor-follower { display: none; }
}