@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  overflow-x: hidden;
  background-color: black;
  color: white;
}

/* ===== Header/Navbar ===== */
header {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  padding: 1.5rem 9%;
  background-color: rgba(0,0,0,0.85);
  border: 2px solid #b74b4b;
  box-shadow: 0 0 25px #b74b4b, 0 0 40px rgba(183,75,75,0.6);
  border-radius: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(10px);
  transition: 0.3s ease;
}
header:hover { transform: translateX(-50%) scale(1.01); }

.logo { font-size: 3rem; color: #b74b4b; font-weight: 800; cursor: pointer; transition: 0.5s ease; }
.logo:hover { transform: scale(1.1); }

nav a {
  font-size: 1.8rem;
  color: white;
  margin-left: 4rem;
  font-weight: 500;
  transition: 0.3s ease;
  border-bottom: 3px solid transparent;
}
nav a:hover, nav a.active { color: #b74b4b; font-weight: 700; border-bottom: 3px solid #b74b4b; }

/* ===== Sections ===== */
section {
  min-height: 100vh;
  padding: 8rem 9% 4rem;
  background-color: black;
  color: white;
}

/* ===== Fade-Up Animation ===== */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Home Section ===== */
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
}
.home-content h1 { font-size: 6rem; font-weight: 700; line-height: 1.3; }
.home-content h3 { font-size: 4rem; margin-bottom: 1rem; font-weight: 700; }
.home-content p { font-size: 1.6rem; max-width: 600px; }
span { color: #b74b4b; }
.home-img img {
  width: 22vw;
  border-radius: 50%;
  box-shadow: 0 0 25px #b74b4b;
  cursor: pointer;
  transition: 0.2s linear;
}

/* ===== Social Icons ===== */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}
.social-icons a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background-color: transparent;
  border: 0.2rem solid #b74b4b;
  font-size: 2rem;
  border-radius: 50%;
  transition: 0.3s ease;
  color: #b74b4b;
}
.social-icons a:hover {
  color: black;
  transform: scale(1.3) translateY(-5px);
  background-color: #b74b4b;
  box-shadow: 0 0 25px #b74b4b;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 1rem 2.8rem;
  background-color: black;
  border-radius: 4rem;
  font-size: 1.6rem;
  color: #b74b4b;
  letter-spacing: 0.3rem;
  font-weight: 600;
  border: 2px solid #b74b4b;
  transition: 0.3s ease;
  cursor: pointer;
}
.btn:hover {
  transform: scale(1.05);
  background-color: #b74b4b;
  color: black;
  box-shadow: 0 0 25px #b74b4b;
}

/* ===== Section Titles ===== */
h2.section-title { font-size: 4rem; text-align: center; margin-bottom: 3rem; color: #b74b4b; }

/* ===== Cards ===== */
.card {
  background-color: rgba(255,255,255,0.05);
  border: 1.5px solid #b74b4b;
  border-radius: 1.5rem;
  padding: 2rem 3rem;
  font-size: 1.8rem;
  font-weight: 500;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.card:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 0 20px #b74b4b;
  background-color: #b74b4b;
  color: black;
  border-color: black;
}

#Projects .card {
    text-align: left;
    padding: 15px;
}

/* Overlay Buttons */
.btn-overlay {
  display: inline-block;
  padding: 0.8rem 2rem;
  background-color: transparent;
  border: 2px solid white;
  color: white;
  border-radius: 3rem;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.card:hover .btn-overlay {
  opacity: 1;
  transform: translateY(0);
  background-color: black;
  color: #b74b4b;
  border-color: black;
  box-shadow: 0 0 10px black;
}
.btn-overlay:hover { background-color: white; color: black; box-shadow: 0 0 10px white; }

/* ===== Grid Layouts ===== */
.box-container, .projects-container { display: grid; gap: 2rem; margin-top: 3rem; }
#Skills .box-container { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
#Certifications .box-container, #Education .box-container { grid-template-columns: repeat(2,1fr); justify-items: center; gap:1.5rem; }
#Projects .projects-container { grid-template-columns: repeat(2,1fr); justify-items: center; align-items:center; margin-top:4rem; }

#Education .card { width:90%; min-height:120px; }
#Education .secondary-box { grid-column: span 2; justify-self:center; width:50%; }
#Certifications .card { width:90%; min-height:20px; }
#Projects .card { width:90%; min-height:150px; }

.project-img, .cert-img { width:100%; max-height:200px; object-fit:cover; border-radius:1rem; margin-bottom:1.5rem; box-shadow:0 0 15px #b74b4b; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.project-img:hover, .cert-img:hover { transform:scale(1.05); box-shadow:0 0 25px #b74b4b; }

/* ===== Skill Icon Colors ===== */
#Skills .card:nth-child(1) i { color: #217346; } /* Excel */
#Skills .card:nth-child(2) i { color: #E97627; } /* Tableau */
#Skills .card:nth-child(3) i { color: #F2C811; } /* Power BI */
#Skills .card:nth-child(4) i { color: #00758F; } /* SQL */
#Skills .card:nth-child(5) i { color: #3776AB; } /* Python */
#Skills .card:nth-child(6) i { color: #F05032; } /* Git */
#Skills .card:nth-child(7) i { color: #FF9900; } /* AWS */
#Skills .card:nth-child(8) i { color: #0078D4; } /* Azure */

/* ===== Contact Form ===== */
.contact-form { display:flex; flex-direction:column; align-items:center; gap:1.5rem; margin-top:2rem; }
.contact-form input, .contact-form textarea {
  width:60%; background-color: rgba(255,255,255,0.05);
  border:1px solid #b74b4b; border-radius:0.8rem;
  padding:1rem 1.5rem; color:white; font-size:1.6rem;
  transition:0.3s ease;
}
.contact-form input:focus, .contact-form textarea:focus { box-shadow:0 0 10px #b74b4b; border-color:#b74b4b; }
.contact-form button { width:30%; text-align:center; }

/* ===== Mobile Menu ===== */
.menu-toggle { display:none; font-size:2.5rem; color:#b74b4b; cursor:pointer; }

/* ===== Responsive ===== */
@media (max-width:995px) {
  header { width:95%; padding:1.2rem 6%; }
  .home { flex-direction:column; margin:5rem 4rem; }
  .home-content h3 { font-size:2.5rem; }
  .home-content h1 { font-size:5rem; }
  .home-img img { width:55vw; margin-top:4rem; }
}
@media (max-width:768px) {
  nav { display:none; position:absolute; top:100%; right:2rem; background-color:rgba(0,0,0,0.9); border:2px solid #b74b4b; border-radius:1rem; padding:1rem 2rem; flex-direction:column; }
  nav.show { display:flex; }
  nav a { margin:1rem 0; display:block; text-align:right; padding:1rem 0; font-size:1.8rem; }
  .menu-toggle { display:block; }
  #Projects .projects-container { grid-template-columns:1fr; }
  #Projects .card { width:100%; }
}
@media (max-width:600px) {
  html { font-size:55%; }
  .home-content h1 { font-size:3.5rem; }
  .home-content h3 { font-size:2rem; }
  .btn { font-size:1.4rem; padding:0.8rem 2rem; }
  .contact-form input, .contact-form textarea { width:90%; }
  .home-img img { width:45vw; margin-top:2rem; }
  .card { padding:2.5rem 2rem; font-size:1.7rem; }
  .fade-up { transition-duration:0.6s; }
}

/* Spinner inside button */
.btn .spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #b74b4b; /* button color */
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Optional: button disabled style */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== === MOBILE FIXES / EXTRA RESPONSIVENESS === ===== */
@media (max-width:480px) {
  /* Header & Navbar */
  header { padding: 1rem 2rem; border-radius:1rem; }
  .logo { font-size:2.5rem; }
  .menu-toggle { font-size:2rem; }

  /* Home Section */
  .home { gap:2rem; margin:3rem 1rem; }
  .home-content h1 { font-size:3rem; line-height:1.2; }
  .home-content h3 { font-size:1.8rem; }
  .home-content p { font-size:1.4rem; max-width:100%; }
  .home-img img { width:60vw; margin-top:2rem; }

  /* Projects & Certifications */
  #Projects .projects-container,
  #Certifications .box-container,
  #Education .box-container { grid-template-columns:1fr; }
  .card, .project-img, .cert-img { width:100%; max-width:100%; padding:1.5rem; font-size:1.5rem; }

  /* Buttons */
  .btn { font-size:1.2rem; padding:0.6rem 1.5rem; letter-spacing:0.2rem; }
  .btn-overlay { font-size:1.2rem; padding:0.5rem 1.5rem; }

  /* Contact Form */
  .contact-form input, .contact-form textarea { width:95%; font-size:1.4rem; padding:0.8rem 1rem; }
  .contact-form button { width:80%; }

  /* Optional: Reduce shadows */
  header, .card, .btn { box-shadow:none; }
}