* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #121212;
  color: #e0e0e0;
  line-height: 1.6;
  transition: background 0.3s, color 0.3s;
}

header {
  position: sticky;
  top: 0;
  background: #1e1e1e;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  z-index: 10;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: auto;
  padding: 1rem;
}

.logo {
  font-weight: bold;
  font-size: 1.5rem;
  color: #ffffff;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  text-decoration: none;
  color: #aaa;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #4f9cff;
}

section {
  padding: 4rem 1rem;
  max-width: 1000px;
  margin: auto;
}

#hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80vh; /* 80% of the screen height on desktop */
  padding: 3rem 1rem;
  text-align: center;
  color: #ffffff;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  opacity: 1;
  filter: blur(6px);
  z-index: -1;
}


/* Hero text styling */
#hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

#hero p {
  font-size: 1.4rem;
}

/* Responsive adjustments for smaller devices */
@media (max-width: 768px) {
  #hero {
    min-height: auto;
    padding: 2rem 1rem;
  }

  #hero h1 {
    font-size: 2rem;
  }

  #hero p {
    font-size: 1rem;
  }
}

.typed-text {
  border-right: 2px solid #4f9cff;
  font-weight: bold;
  font-size: 3rem;
  display: inline-block;

  display: inline;
  font-weight: bold;
  border-right: 2px solid #4f9cff;
}


.project-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

.project-card {
  background: #1e1e1e;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  text-align: center;
  color: white; /* ✅ Set text color to white */
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  background: #2a2a2a;
}

footer {
  background: #000;
  color: #666;
  text-align: center;
  padding: 1rem 0;
}

/* Responsive nav */
@media (max-width: 768px) {
  .nav-links {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

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

/* Hide hamburger menu on desktop */
.menu-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: #aaa;
}

/* Mobile menu hidden by default */
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

/* Mobile view */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 60px;
    right: 0;
    background: #1e1e1e;
    flex-direction: column;
    width: 200px;
    padding: 1rem;
    display: none; /* hide initially */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border-radius: 6px;
  }

  .nav-links.show {
    display: flex;
  }

  .nav-links li {
    margin-bottom: 1rem;
  }
}

/* Hide hamburger menu on desktop */
.menu-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: #aaa;
}

/* Mobile menu hidden by default */
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

/* Mobile view */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 60px;
    right: 0;
    background: #1e1e1e;
    flex-direction: column;
    width: 200px;
    padding: 1rem;
    display: none; /* hide initially */
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border-radius: 6px;
  }

  .nav-links.show {
    display: flex;
  }

  .nav-links li {
    margin-bottom: 1rem;
  }
}
.slide-in {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

.slide-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.skills-list {
  list-style-type: disc;
  margin-left: 2rem;
}

.skills-list li {
  margin-bottom: 0.5rem;
}

/* Smooth page transition */
body {
  opacity: 0;
  transition: opacity 0.6s ease;
}

body.fade-in {
  opacity: 1;
}

body.fade-out {
  opacity: 0;
}
          .contact-info-box,
          .contact-form-box {
              max-width: 1000px;
              margin: 2rem auto;
              padding: 2rem;
              background: #1e1e1e;
              border-radius: 10px;
              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
          }
    
          .contact-info-box ul {
              list-style: none;
              padding-left: 0;
              margin: 0;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-around;
              gap: 1.5rem;
          }
    
          .contact-info-box li {
              display: flex;
              align-items: center;
              color: #e0e0e0;
              font-size: 1rem;
          }
    
          .contact-info-box i {
              margin-right: 0.5rem;
              color: #4f9cff;
              font-size: 1.2rem;
              min-width: 20px;
          }
    
          .contact-info-box a {
              color: #e0e0e0;
              text-decoration: none;
          }
    
          .contact-info-box a:hover {
              text-decoration: underline;
              color: #4f9cff;
          }
    
          .contact-form-box h2 {
              text-align: center;
              margin-bottom: 1.5rem;
              color: #fff;
          }
    
          .contact-form input,
          .contact-form textarea {
              width: 100%;
              padding: 0.75rem;
              margin-bottom: 1rem;
              border: none;
              border-radius: 5px;
              background-color: #333;
              color: #eee;
              font-size: 1rem;
          }
    
          .contact-form input::placeholder,
          .contact-form textarea::placeholder {
              color: #aaa;
          }
    
          .contact-form button {
              padding: 0.5rem 1rem;
              background-color: #4f9cff;
              color: white;
              border: none;
              border-radius: 5px;
              font-size: 0.9rem;
              cursor: pointer;
              transition: background 0.3s ease;
              display: block;
              margin: 1rem auto 0;
          }
    
          .contact-form button:hover {
              background-color: #327ed3;
          }
    
          @media (max-width: 768px) {
              .contact-info-box ul {
                  flex-direction: column;
                  align-items: center;
              }
          }

.about-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4rem 1rem;
  max-width: 1200px;
  margin: auto;
}

.about-left img {
  max-width: 300px;
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.about-right {
  flex: 1;
  min-width: 300px;
}

.skills-list {
  list-style-type: disc;
  margin-left: 1.5rem;
}

.skills-list > li > ul {
  list-style-type: circle;
  margin-left: 1.5rem;
}
.about-text-box {
  background: #1e1e1e;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  margin-bottom: 2rem;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.skills-list {
  display: contents;
}

.skills-list > li {
  background: #1e1e1e;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  list-style-type: none;
}

.skills-list > li > ul {
  list-style-type: circle;
  margin-left: 1.5rem;
}

@media (max-width: 768px) {
  .skills-grid {
    grid-template-columns: 1fr;
  }
}
.about-text-box,
.skills-box {
  background: #1e1e1e;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  margin-bottom: 2rem;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.skills-list {
  display: contents;
}

.skills-list > li {
  background: #222;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  list-style-type: none;
}

.skills-list > li > ul {
  list-style-type: circle;
  margin-left: 1.25rem;
}

@media (max-width: 768px) {
  .skills-grid {
    grid-template-columns: 1fr;
  }
}
.report-section {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem;
}

.report-box {
  background: #1e1e1e;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  text-align: center;
}

.report-box a {
  color: #4f9cff;
  text-decoration: none;
}

.report-box a:hover {
  text-decoration: underline;
}

/* Optional: add margin between report and footer */
footer {
  background: #000;
  color: #666;
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
}
.download-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: #d32f2f;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease;
}

.download-btn:hover {
  background-color: #b71c1c;
}
.about-photo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-btn {
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #d32f2f;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease;
}

.fullscreen-hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

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

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2;
  padding: 1rem;
}

.hero-text h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: 1.4rem;
}

@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-text p {
    font-size: 1rem;
  }
}

.hero-text h1 {
  white-space: nowrap;
  display: inline-block;
}

.project-image {
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: 1.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Make hero GIF responsive */
.hero-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Keep full GIF visible */
  top: 0;
  left: 0;
  z-index: -1;
}

/* Adjust hero text sizing for smaller screens */
.hero-text h1 {
  font-size: clamp(1.5rem, 5vw, 3rem); /* Responsive font scaling */
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: clamp(1rem, 3vw, 1.4rem); /* Responsive font scaling */
}

/* Adjust typed text separately so it shrinks with screen size */
.typed-text {
  font-size: clamp(1.2rem, 4vw, 3rem);
}

/* Extra tweaks for very small devices */
@media (max-width: 480px) {
  .hero-text {
    padding: 0.5rem;
  }
}
/* Make hero GIF always fill the full width of the screen */
.hero-bg {
  position: absolute;
  width: 100%;
  height: auto;
  min-height: 100%; /* Ensures it still fills vertically if needed */
  object-fit: contain; /* Keeps full GIF visible without cropping */
  top: 0;
  left: 0;
  z-index: -1;
}

/* Responsive hero text sizing */
.hero-text h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: clamp(1rem, 3vw, 1.4rem);
}

.typed-text {
  font-size: clamp(1.2rem, 4vw, 3rem);
}

/* Fullscreen hero section */
.fullscreen-hero {
  position: relative;
  width: 100vw;
  height: 100vh; /* Still fills screen height area */
  overflow: hidden;
}

/* Extra small screen tweaks */
@media (max-width: 480px) {
  .hero-text {
    padding: 0.5rem;
  }
}
/* Hero text sizing */
.hero-text h1 {
  font-size: clamp(1.5rem, 5vw, 3rem); /* scales between 1.5rem and 3rem */
  margin-bottom: 1rem;
}
.hero-text h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  margin-bottom: 1rem;
  white-space: nowrap;
}

.hero-text p {
  font-size: clamp(.2rem, 3vw, 1.4rem); /* scales between 1rem and 1.4rem */
  line-height: 1.4;
  max-width: 90%; /* keeps text from stretching too wide */
  margin: 0 auto; /* center the text */
}
.hero-text p {
  display: block;         /* Forces <p> onto its own line */
  font-size: clamp(1rem, 3vw, 1.4rem);
  line-height: 1.4;
  max-width: 90%;
  margin: 0.5rem auto 0;  /* Centers and spaces it under h1 */
  text-align: center;     /* Keeps text centered */
}
.hero-text h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  margin-bottom: 1rem;
  white-space: nowrap;  /* keeps typed text in one line */
  display: block;       /* makes sure it doesn’t share a line with <p> */
}

.hero-text p {
  display: block;       /* forces <p> to start on a new line */
  font-size: clamp(1rem, 3vw, 1.4rem);
  line-height: 1.4;
  max-width: 90%;
  margin: 0.5rem auto 0; /* centers and adds space from h1 */
  text-align: center;
}
/* Stop hero-text from changing size while typing */
.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 900px);   /* <- fixed box; adjust 900px if you want */
  text-align: center;
  padding: 1rem;
}

.typed-text {
  white-space: nowrap;        /* typed words stay on one line */
  display: inline-block;
}

/* Make sure <p> is independent of the <h1> width */
.hero-text p {
  display: block;
  margin-top: .5rem;
}
/* Let <p> scale for small screens */
.hero-text p {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(0.9rem, 3vw, 1.4rem); /* scales with screen size */
  line-height: 1.4;
  max-width: 100%;
  word-break: break-word; /* keeps long words from overflowing */
}