/* === Global Styles === */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: -apple-system, BlinkMacSystemFont, "Poppins", sans-serif;

  scroll-behavior: smooth;

}



body {

  background: #000;

  color: #fff;

  overflow-x: hidden;

}



/* === Header === */

header {

  position: fixed;

  top: 0;

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 40px 40px; /* Increased top/bottom padding */

  box-sizing: border-box;

  z-index: 1000;

  background: rgba(0, 0, 0, 0.2);

  backdrop-filter: blur(10px);

}





/* Social links */

.social-links {

  display: flex;

  gap: 15px;

}



.social-links a {

  color: #fff;

  text-decoration: none;

  opacity: 0.8;

  font-weight: 500;

  transition: 0.3s;

}

.social-links a:hover {

  opacity: 1;

}



/* Nav Links Right */

.nav-links {

  display: flex;

  gap: 30px;

}



.nav-links a {

  color: #fff;

  text-decoration: none;

  opacity: 0.8;

  transition: 0.3s;

  font-weight: 300;

}



.nav-links a:hover {

  opacity: 1;

}



/* Hamburger */

.menu-toggle {

  display: none;

  flex-direction: column;

  cursor: pointer;

  gap: 5px;

}



.menu-toggle span {

  height: 3px;

  width: 25px;

  background: #fff;

  border-radius: 2px;

  transition: 0.3s;

}



/* Mobile / Tablet Navigation */

@media (max-width: 992px) {

  .nav-links {

    position: fixed;

    top: 0;

    right: -100%;

    height: 100vh;

    width: 250px;

    background: rgba(0,0,0,0.95);

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 40px;

    transition: 0.3s;

    padding: 0;

  }



  .nav-links.active {

    right: 0;

  }



  .menu-toggle {

    display: flex;

  }

}



/* === Sections === */

section {

  width: 100%;

  margin: 80px 0;

  padding-left: 40px;

  padding-right: 40px;

  max-width: none;

}



.section-wrapper {

  background-color: #000;

  padding: 0 40px;

}



/* Frosted Glass Effect */

.frosted {

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(20px);

  border-radius: 20px;

  padding: 60px;

  box-shadow: 0 10px 40px rgba(255, 255, 255, 0.05);

}



/* Typography */

h2 {

  text-align: center;

  text-transform: uppercase;

  font-size: 2.2rem;

  margin-bottom: 40px;

  letter-spacing: 2px;



}



p {

  line-height: 1.8;

  color: #ccc;

}



/* === Hero Section === */

.hero {

  position: relative;

  width: 100%;

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  color: white;

  overflow: hidden;

}



.hero h1 {

  font-size: 3rem;

  font-weight: 600;

  letter-spacing: 1px;

  margin-bottom: 20px;

}



.hero p {

  color: #aaa;

  max-width: 700px;

  margin: 0 auto;

  font-size: 1.1rem;

}



/* === About Section === */

.about, .about-dynamic {

  background: #fff;

  border-radius: 25px;

  padding: 80px 60px;

  max-width: 1600px;

  margin: 0 auto;

  box-shadow: 0 25px 60px rgba(0,0,0,0.35);

  text-align: center;

  color: #111;

}



.about h2, .about-left h2 {

  font-size: 2.8rem;

  margin-bottom: 30px;

  color: #000;

}



.about p {

  font-size: 1.25rem;

  line-height: 1.9;

  color: #333;

  max-width: 1000px;

  margin: 0 auto;

}



.about-container {

  display: flex;

  flex-wrap: wrap;

  gap: 60px;

}



/* About Left */

.about-left {

  flex: 1 1 300px;

  max-width: 350px;

  text-align: center;

}



.about-photo {

  width: 250px;

  height: 250px;

  border-radius: 50%;

  object-fit: cover;

  margin-bottom: 40px;

  box-shadow: 0 15px 40px rgba(0,0,0,0.25);

}



.about-tabs {

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.tab-button {

  padding: 12px 20px;

  font-size: 1rem;

  border-radius: 12px;

  border: 1px solid rgba(0,0,0,0.2);

  background: rgba(0,0,0,0.05);

  cursor: pointer;

  transition: all 0.3s;

}



.tab-button.active, .tab-button:hover {

  background: #111;

  color: #fff;

  box-shadow: 0 5px 15px rgba(0,0,0,0.3);

}



/* About Right */

.about-right {

  flex: 2 1 600px;

}



.tab-content {

  display: none;

  animation: fadeIn 0.5s ease-in-out;

}



.tab-content.active {

  display: block;

}



.tab-content h3 {

  font-size: 2rem;

  margin-bottom: 20px;

}



.tab-content p {

  font-size: 1.2rem;

  line-height: 1.8;

  margin-bottom: 20px;

}



.tab-content ul {

  list-style-type: disc;

  padding-left: 20px;

  color: #333;

}



/* Fade In Animation */

@keyframes fadeIn {

  from {opacity: 0; transform: translateY(10px);}

  to {opacity: 1; transform: translateY(0);}

}



/* === Work Section === */

.video-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));

  gap: 40px;

  margin-top: 40px;

  justify-items: center;

}



.video-card {

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 16px;

  overflow: hidden;

  transition: 0.3s;

  backdrop-filter: blur(10px);

  width: 100%;

  max-width: 700px;

}



.video-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);

}



.video-card iframe {

  width: 100%;

  aspect-ratio: 16 / 9;

  border: none;

  display: block;

}



.video-card .content {

  padding: 20px;

}



.video-card h3 {

  font-size: 1.1rem;

  margin-bottom: 10px;

}



.video-card h3 a {

  color: #fff;

  text-decoration: none;

  transition: 0.3s;

}



.video-card p {

  color: #aaa;

  font-size: 0.95rem;

}



/* === Skills Section === */

.skills-list {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 25px;

  margin-top: 40px;

}



.skill {

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 20px 30px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

  font-weight: 600;

  font-size: 1.1rem;

  border: 1px solid rgba(255, 255, 255, 0.2);

  cursor: pointer;

  transition: all 0.3s ease;

  min-width: 200px; 

  min-height: 70px;

  backdrop-filter: blur(10px);

}



.skill img { width: 32px; height: 32px; }

.skill span { transition: all 0.3s ease; }

.skill:hover span { color: #fff; }



.skill.after-effects:hover {

  background: linear-gradient(135deg, #6a0dad, #9b59b6);

  box-shadow: 0 0 20px #9b59b6;

  border-color: #9b59b6;

}



.skill.premiere-pro:hover {

  background: linear-gradient(135deg, #9900ff, #b266ff);

  box-shadow: 0 0 20px #b266ff;

  border-color: #b266ff;

}



.skill.photoshop:hover {

  background: linear-gradient(135deg, #00a1f1, #1ec3ff);

  box-shadow: 0 0 20px #1ec3ff;

  border-color: #1ec3ff;

}



.skill.figma:hover {

  background: linear-gradient(135deg, #f24e1e, #ffab00);

  box-shadow: 0 0 20px #ffab00;

  border-color: #ffab00;

}



/* === Process Section === */

.process-steps {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 30px;

  text-align: center;

}



.step {

  background: rgba(255, 255, 255, 0.05);

  border-radius: 16px;

  padding: 30px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  transition: 0.3s;

}



.step:hover { background: rgba(255, 255, 255, 0.1); }

.step h3 { margin-bottom: 15px; font-size: 1.2rem; }



/* === Testimonials Section === */

.testimonials {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

  justify-content: center;

  margin-top: 40px;

}



.testimonial {

  background: rgba(255, 255, 255, 0.07);

  border-radius: 20px;

  padding: 30px;

  width: 300px;

  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.1);

}



.testimonial p {

  color: #ccc;

  font-style: italic;

}



.testimonial span {

  display: block;

  margin-top: 15px;

  color: #fff;

  font-weight: 500;

}



/* === Contact Section === */

.contact {

  text-align: center;

}



.contact a {

  display: inline-block;

  padding: 14px 40px;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: #fff;

  text-decoration: none;

  border-radius: 30px;

  transition: 0.3s;

  margin-top: 20px;

}



.contact a:hover {

  background: #fff;

  color: #000;

}



/* === Footer === */

footer {

  text-align: center;

  padding: 60px 0;

  font-size: 0.9rem;

  color: #777;

}



/* === White Section === */

.white-section {

  background: #000;

  color: #000;

  padding: 140px 0;

  text-align: center;

}



.white-section h2 { color: #fff; }

.white-section p { color: #333; }



/* === Section Pulse Animation === */

.section-pulse { position: relative; overflow: hidden; }

.section-pulse::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    120deg,

    rgba(255, 255, 255, 0) 0%,

    rgba(255, 255, 255, 0.1) 50%,

    rgba(255, 255, 255, 0) 100%

  );

  pointer-events: none;

  z-index: 1;

  opacity: 0;

  transition: opacity 0.3s ease;

}



.section-pulse.sweep::before {

  animation: gradientSweep 2s ease-out forwards;

  opacity: 1;

}



@keyframes gradientSweep {

  0% { left: -100%; }

  50% { left: 0%; }

  100% { left: 100%; opacity: 0; }

}



/* === Responsive === */

@media (max-width: 992px) {

  .about-container {

    flex-direction: column;

    align-items: center;

  }

  .about-left, .about-right { max-width: 100%; }

}



.hero {

  position: relative;

  width: 100%;

  height: 100vh;

  display: flex;

  justify-content: center; /* horizontal centering */

  align-items: center;     /* vertical centering */

  text-align: center;

  overflow: hidden;

}



.hero-video {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: -1; /* ensures video stays behind content */

}



.hero-content {

  position: relative;

  z-index: 1; /* content sits above video */

  color: #fff;

  padding: 20px;

  max-width: 800px;

}

.about-me {

  position: relative;

  background-image: url('your-image.jpg'); /* Replace with your image path */

  background-size: cover;

  background-position: center;

  height: 100vh; /* Adjust height as needed */

  display: flex;

  justify-content: center;

  align-items: center;

  color: white;

  text-align: center;

  padding: 20px;

}



.about-me .content {

  max-width: 800px;

  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */

  padding: 20px;

  border-radius: 10px;

}



.about-me h2 {

  font-size: 2.5rem;

  margin-bottom: 10px;

}



.about-me p {

  font-size: 1.2rem;

}

.logo-center {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

}



.logo-center img {

  height: 50px; /* Adjust height as needed */

  width: auto;

}

.menu-close {

  position: absolute;

  top: 20px;

  right: 20px;

  background: none;

  border: none;

  color: #fff;

  font-size: 2rem;

  cursor: pointer;

  transition: 0.3s;

}



.menu-close:hover {

  color: #ff007f; /* optional hover color */

}

.menu-close {

  display: none; /* hide by default */

}



@media (max-width: 992px) {

  .menu-close {

    display: block; /* only visible on mobile */

    position: absolute;

    top: 20px;

    right: 20px;

    background: none;

    border: none;

    color: #fff;

    font-size: 2rem;

    cursor: pointer;

    transition: 0.3s;

  }



  .menu-close:hover {

    color: #ff007f;

  }

}



/* Increase vertical padding only */





@media (max-width: 992px) {

  header {

    padding: 20px 30px; /* mobile/tablet horizontal padding stays smaller */

  }

}

body {

  background: #000; /* Main page background black */

  color: #fff;

  font-family: sans-serif;

}



h2 {

  text-align: center;

  margin-top: 40px;

  margin-bottom: 20px;

}



.video-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  gap: 20px;

  padding: 0 30px 50px 30px;

}



.video-card {

  position: relative;

  background: rgba(255,255,255,0.05); /* Glass effect */

  backdrop-filter: blur(10px);

  border-radius: 15px;

  overflow: hidden;

  cursor: pointer;

  transition: transform 0.3s, box-shadow 0.3s;

}



.video-card:hover {

  transform: scale(1.05);

  box-shadow: 0 8px 20px rgba(255,255,255,0.2);

}



.video-card img {

  width: 100%;

  display: block;

}



.video-card .content {

  padding: 15px;

}



.video-card .content h3 {

  margin: 0 0 5px 0;

  font-size: 1.1rem;

}



.video-card .content p {

  margin: 0;

  font-size: 0.9rem;

  color: #ccc;

}



/* Modal */

.modal {

  display: none;

  position: fixed;

  top: 0; left: 0; right:0; bottom: 0;

  background: rgba(0,0,0,0.9);

  justify-content: center;

  align-items: center;

  z-index: 1000;

}



.modal iframe {

  width: 80%;

  height: 80%;

  border: none;

  border-radius: 10px;

}



.modal .close {

  position: absolute;

  top: 20px;

  right: 30px;

  font-size: 40px;

  color: #fff;

  cursor: pointer;

}

.video-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr); /* 3 columns */

  gap: 20px;

  padding: 0 30px 50px 30px;

  grid-auto-rows: 200px; /* base row height */

}



.video-card {

  position: relative;

  background: rgba(255,255,255,0.05);

  backdrop-filter: blur(10px);

  border-radius: 15px;

  overflow: hidden;

  cursor: pointer;

  transition: transform 0.3s, box-shadow 0.3s;

}



/* Big tiles span 2 rows */

.video-card.big {

  grid-row: span 2;

}



.video-card:hover {

  transform: scale(1.05);

  box-shadow: 0 8px 20px rgba(255,255,255,0.2);

}



.video-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.video-card .content {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 15px;

  background: rgba(0,0,0,0.5);

  color: #fff;

}



/* Modal */

.modal {

  display: none;

  position: fixed;

  top: 0; left: 0; right:0; bottom: 0;

  background: rgba(0,0,0,0.9);

  justify-content: center;

  align-items: center;

  z-index: 1000;

  overflow: auto;

}



/* Animate iframe with a "springy" pop */

.modal iframe {

  width: 80%;

  max-width: 900px;

  height: 60%;

  max-height: 600px;

  border: none;

  border-radius: 10px;

  opacity: 0;

  transform: translateY(100px) scale(0.8);

  transition: transform 0.6s cubic-bezier(0.25, 1.5, 0.5, 1), opacity 0.1s ease-out;

}



.modal.active iframe {

  transform: translateY(0) scale(1);

  opacity: 1;

}



.hero-buttons {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 20px;

  margin-top: 30px;

}



.glass-btn {

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.2);

  border-radius: 12px;

  padding: 12px 30px;

  font-size: 1.1rem;

  color: #fff;

  text-decoration: none;

  font-weight: 600;

  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;

}



.glass-btn:hover {

  transform: translateY(-3px);

  background: rgba(255,255,255,0.2);

  box-shadow: 0 8px 20px rgba(0,0,0,0.3);

}

/* Smooth page transition overlay */

/* Smooth Page Transition */

.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
  z-index: 9999;
}

body.fade-out {
  opacity: 0;
  transition: opacity 0.7s ease;
}



/* Page fades in on load */

body.fade-in {

  animation: fadeIn 0.8s ease forwards;

}



/* Fade animation keyframes */

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



/* Body fades out on navigation */

body.fade-out .page-transition {

  opacity: 1;

  pointer-events: all;

}



.work {

    padding-top: 40px;

}



.hero-links {

    display: flex;

    gap: 30px;

    justify-content: center;

    margin-top: 30px;

  }



  .hero-links a {

    position: relative;

    font-size: 1.2rem;       /* smaller */

    font-weight: 500;

    color: rgba(255,255,255,0.7); /* less bright */

    text-decoration: none;

    padding-bottom: 3px;

    transition: color 0.3s ease;

  }



  /* underline animation */

  .hero-links a::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0%;

    height: 2px;

    background: rgba(255,255,255,0.7); /* subtle by default */

    transition: width 0.3s ease, background 0.3s ease;

  }



  .hero-links a:hover::after {

    width: 100%;

    background: #fff; /* underline turns white */

  }



  .hero-links a:hover {

    color: #fff; /* text turns bright white on hover */

  }



  /* Responsive adjustments */

  @media (max-width: 600px) {

    .hero-links {

      flex-direction: column;

      gap: 20px;

      align-items: center;

    }



    .hero-links a {

      font-size: 1rem;

    }

  }

  .contact-form {

    margin-top: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

    max-width: 500px;

    margin-left: auto;

    margin-right: auto;

  }



  .contact-form input,

  .contact-form textarea {

    width: 100%;

    padding: 12px 15px;

    border-radius: 8px;

    border: none;

    outline: none;

    font-size: 1rem;

    background: rgba(255,255,255,0.1);

    color: #fff;

  }



  .contact-form input::placeholder,

  .contact-form textarea::placeholder {

    color: rgba(255,255,255,0.7);

  }



  .contact-form button {

    padding: 12px 30px;

    border-radius: 8px;

    border: none;

    background: #fff;

    color: #000;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.3s ease;

  }



  .contact-form button:hover {

    background: #fff;

  }



  .hero-video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 1;

  }