/* --- Desktop & Base Styles --- */
body{
  margin-left: 10%;
  margin-right: 20%;
  position: relative;
  background-color:  #ffffff;
  font-family: 'inter', sans-serif;
  transition: background-color 0.4s ease, color 0.4s ease;
}

body.dark-mode{
  background-color: #212121;
  color: #ffffff;
}

body.dark-mode span {
  color: white; 
  background-color: black;
  transition: ease-in;
}

header div{
  background-color: transparent;
  border: none;
  display: flex;
  flex-wrap :wrap;
  gap: 12px;          
  margin: 5px;         
  justify-content: center;
}

header button{
  background-color: transparent;
  border: none;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

header button:hover{
  background-color: #f5f7fa;
}

.re .cv{
  position: absolute;
  top: 0%;
  right: 5%;
  text-decoration: none;
  color: black;
  font-weight: bolder;
  font-size: 1rem;
  border-radius: 10px;
  padding: 8px 24px; 
}

.re .cv:hover{
  background-color: #f5f7fa;
}

.re button{
  position: absolute;
  top: -1%;
  left: 80%  
}

.github{
  background-color: transparent; /* Corrected from 'none' */
  font-size: 2rem;
}

.github:hover{
  background-color: transparent;
  border: none;
}

.me{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
}

.aboutme{
  margin-top: 15px;
  background-color: transparent;
  max-width: 100%;
  border: 0px solid black;
  max-height: 100%;
  margin-bottom: 30px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.grid span {
  background-color: #f5f7fa;
  padding: 10px;
  text-align: center;
  font-size: 1em;
  border-radius: 6px;
  font-weight: 500;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.aboutme,
.skills,
.Projects,
.reachme {
  margin-top: 50px;
}

.p01, .p02, .p03 {
  padding: 8px 14px;
}

.p span{
  max-width: 100%;
  background-color: #f5f7fa;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
}

.p span:hover{
  background-color: black;
  color: white;
}

body.dark-mode .p span:hover{
  background-color: #ffffff;
  color: black;
}

.getintouch {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.getintouch button {
  background-color: #f5f5f5;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333;
}

.getintouch button:hover {
  background-color: #e0e0e0;
  transform: scale(1.1);
}

footer {
  text-align: center;
  padding: 20px 0;
  margin-top: 50px;
  position: relative;
  background-color: transparent;
}

.scrollBtn {
  background-color: transparent;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #333;
  transition: transform 0.3s ease, color 0.3s ease;
}

.scrollBtn:hover {
  transform: scale(1.2);
  color: black;
}

body.dark-mode .scrollBtn {
  color: #fff;
}

body.dark-mode .scrollBtn:hover {
  color: #fff;
}

/* ============================================== */
/* === MOBILE RESPONSIVE STYLES (ADD AT END) === */
/* ============================================== */

@media (max-width: 768px) {

  /* 1. Body Layout */
  body {
    /* This is the key fix for the content alignment.
       It overrides the desktop margins for mobile. */
    margin: 0 15px;
  }

  /* 2. Header Cleanup */
  header {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding-top: 20px; /* Add some space at the top */
  }

  .re {
    position: static;
    order: 3;
    gap: 20px;
    margin-top: 10px;
  }

  .re .cv, .re button {
    position: static;
  }

  .nav {
    order: 2;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* 3. Content Sections */
  .me {
    flex-direction: column;
    align-items: center;
    text-align: justify; /* Justify text for a cleaner block */
  }
  
  /* Center all section titles */
  .aboutme h3, .skills h3, .Projects h3, .reachme h3 {
    text-align: center;
  }
}