/* HERO SECTION */

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

body {
  font-family: "Inter", sans-serif;
  background: #0b0b0b;
  color: #eaeaea;
}

/* HERO LAYOUT */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-inner {
  max-width: 760px;          /* fixed readable column like reference */
  margin: 0 auto;
  padding: 0 24px;
}

/* TEXT STYLES */
.name {
  font-size: 14px;
  color: #a8a8a8;
  margin-bottom: 25px;
}

.headline {
  font-size: clamp(30px, 4.8vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 32px;
}

.role {
  font-size: 15px;
  color: #9a9a9a;
  margin-bottom: 24px;
}

.description {
  font-size: 16px;
  line-height: 1.75;
  color: #cfcfcf;
  margin-bottom: 36px;
}

/* AVAILABILITY */
.availability {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #b5b5b5;
}

/* GLOWING DOT */
.pulse-dot {
  width: 9px;
  height: 9px;
  background-color: #1ed760;
  border-radius: 50%;
  position: relative;
}

.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(30, 215, 96, 0.5);
  animation: pulse 2s infinite ease-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* DIVIDER LINE */
.divider {
  margin-top: 48px;
  height: 1px;
  background: #1f1f1f;
  width: 100%;
  margin-bottom: 0px;
}

/* MOBILE REFINEMENT */
@media (max-width: 640px) {
  .headline {
    font-size: 22px;
    
  }
  
  @media (max-width: 640px) {
  .role {
    font-size: 13px;
    }
    
    .description {
    font-size: 14px;
    }
    
    .availability {
    font-size: 13px; 
    gap: 9px;
    }
    
    .pulse-dot {
  width: 8px;
  height: 8px; 
  }
    
  }


@media (max-width: 640px) {
  .hero {
    align-items: flex-start;   /* stop vertical centering */
    min-height: auto;          /* remove forced full height */
    padding-top: 20px;         /* small, controlled top spacing */
  }
}

@media (max-width: 640px) {
  .name {
    margin-bottom: 20px;
  }
}
  .hero-inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Fix for mobile + mobile desktop-view */
@media (max-width: 1024px) {
  .hero {
    align-items: flex-start;
    min-height: auto;
    padding-top: 24px;
  }
}

/* Fix for mobile + mobile desktop-view */
@media (max-width: 1024px) {
  .hero {
    align-items: flex-start;
    min-height: auto;
    padding-top: 24px;
  }
}
/* HERO SECTION END */



/* ABOUT / IMPACT SECTION */

.about {
  padding-top: 0;          /* IMPORTANT */
  padding-bottom: 80px;
  margin-top: 0px;
}

.about-inner {
  max-width: 760px;          /* SAME fixed column */
  margin: 0 auto;
  padding: 0 15px;
}

.about-title {
  font-size: 22px;
  font-weight: 500;
  margin-top: 0px;
  margin-bottom: 32px;
  color: #eaeaea;
}

.about-text {
  font-size: 16px;
  line-height: 1.8;
  color: #cfcfcf;
  margin-bottom: 24px;
}

/* MOBILE REFINEMENT — SAME MEDIA QUERY */
@media (max-width: 640px) {
  .about {
    padding-top: 0px;
    padding-bottom: 50px;
  }

  .about-title {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .about-text {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* MOBILE + DESKTOP VIEW FIX — SAME AS HERO */
@media (max-width: 1024px) {
  .about {
    padding-top: 40px;
  }
}

/* ABOUT SECTION END */

/* SKILLS SECTION */
.skills {
   padding-top: 0;          /* IMPORTANT */
  padding-bottom: 80px;
  margin-top: 0px;
  background: #0b0b0b; /* match body background */
}

.skills-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 15px;
}

.skills-title {
  font-size: 22px;
  font-weight: 500;
  color: #eaeaea;
  margin-bottom: 32px;
}

/* Skill categories */
.skill-category {
  margin-bottom: 32px;
}

.skill-category h3 {
  font-size: 16px;
  font-weight: 500;
  color: #cfcfcf;
  margin-bottom: 12px;
}

.skill-category ul {
  list-style: none;
  padding-left: 0;
}

.skill-category ul li {
  font-size: 15px;
  color: #b5b5b5;
  margin-bottom: 8px;
  line-height: 1.6;
  border: 1px solid #1f1f1f;  /* subtle box style like tags */
  padding: 6px 10px;
  border-radius: 12px;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

/* Mobile refinement */
@media (max-width: 640px) {
  .skills-title {
    font-size: 18px;
    margin-bottom: 24px;
  }
  .skill-category h3 {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .skill-category ul li {
    font-size: 13px;
    padding: 4px 8px;
    margin-right: 6px;
  }
}

/* Fix for tablets / desktop-view <=1024px */
@media (max-width: 1024px) {
  .skills {
    padding-top: 40px;
  }
}


/* SKILLS SECTION END */





/* FOCUS SECTION */
.focus {
  padding-top: 0;          /* IMPORTANT */
  padding-bottom: 80px;
  margin-top: 0px;
  background: #0b0b0b;
}

.focus-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 15px;
}

.focus-title {
  font-size: 22px;
  font-weight: 500;
  color: #eaeaea;
  margin-bottom: 32px;
}

/* Cards container */
.focus-cards {
  display: flex;
  gap: 24px;
  flex-wrap: wrap; /* stack on mobile */
  justify-content: center;
}

/* Individual cards */
.focus-card {
  flex: 1 1 300px; /* grow, shrink, base width */
  background: #121212;
  border: 1px solid #1f1f1f;
  border-radius: 12px;
  padding: 24px;
  text-align: left;
}

.focus-card h3 {
  font-size: 16px;
  font-weight: 500;
  color: #cfcfcf;
  margin-bottom: 16px;
}

.focus-card ul {
  list-style: none;
  padding-left: 0;
}

.focus-card ul li {
  font-size: 15px;
  color: #b5b5b5;
  margin-bottom: 12px;
  line-height: 1.6;
  border: 1px solid #1f1f1f;
  padding: 6px 10px;
  border-radius: 12px;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

/* Mobile refinement */
@media (max-width: 640px) {
  .focus-title {
    font-size: 18px;
    margin-bottom: 24px;
  }
  .focus-cards {
    flex-direction: column;
    gap: 16px;
  }
  .focus-card h3 {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .focus-card ul li {
    font-size: 13px;
    padding: 4px 8px;
    margin-right: 6px;
  }
}

/* Tablets / <=1024px */
@media (max-width: 1024px) {
  .focus {
    padding-top: 40px;
  }
}


/* FOCUS SECTION ENDS */


/* PROJECTS SECTION - LIST STYLE */
.projects {
   padding-top: 0;          /* IMPORTANT */
  padding-bottom: 80px;
  margin-top: 0px;
  background: #0b0b0b; /* dark theme */
}

.projects-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 15px;
}

.projects-title {
  font-size: 22px;
  font-weight: 500;
  color: #eaeaea;
  margin-bottom: 32px;
}

.project-item {
  margin-bottom: 32px;
}

.project-item h3 {
  font-size: 18px;
  font-weight: 500;
  color: #eaeaea;
  margin-bottom: 8px;
}

.project-item p {
  font-size: 15px;
  color: #b5b5b5;
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Mobile refinement */
@media (max-width: 640px) {
  .projects-title {
    font-size: 18px;
    margin-bottom: 24px;
  }
  .project-item h3 {
    font-size: 16px;
  }
  .project-item p {
    font-size: 14px;
  }
}

/* PROJECTS SECTION - LIST STYLE  ENDS*/


/* ELSEWHERE / ONLINE PRESENCE */

.elsewhere {
  padding-top: 0;          /* IMPORTANT */
  padding-bottom: 80px;
  margin-top: 0px;
  background: #0b0b0b; /* dark theme */
}

.elsewhere-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 15px;
}

.elsewhere-title {
  font-size: 22px;
  font-weight: 500;
  color: #eaeaea;
  margin-bottom: 32px;
}

.elsewhere-item {
  margin-bottom: 28px;
}

.elsewhere-item h3 {
  font-size: 18px;
  font-weight: 500;
  color: #eaeaea;
  margin-bottom: 6px;
}

.elsewhere-item p {
  font-size: 15px;
  color: #b5b5b5;
  line-height: 1.6;
}

/* Mobile refinement */
/* MOBILE REFINEMENT */
@media (max-width: 640px) {

  .elsewhere {
    padding: 30px 0 50px;
  }

  .elsewhere-title {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .elsewhere-item {
    padding: 14px 12px;   /* better tap area */
    margin-bottom: 20px;
  }

  .elsewhere-item h3 {
    font-size: 16px;
  }

  .elsewhere-item p {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Disable translate shift on mobile (touch devices) */
  .elsewhere-item:hover {
    transform: none;
  }

}
/* SOCIAL LINKS HOVER HIGHLIGHT EFFECT */

.elsewhere-item {
  padding: 12px 12px;
  border-radius: 12px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.elsewhere-item a {
  color: #eaeaea;
  text-decoration: none;
  transition: color 0.3s ease;
}

.elsewhere-item:hover {
  background: #121212;       /* subtle highlight */
  transform: translateX(6px);
  /* slight shift */
}

.elsewhere-item:hover a {
  color: #ffffff;
}

/* Optional subtle border glow on hover */
.elsewhere-item:hover {
  border: 1px solid #1f1f1f;
}
/* Tablets / <=1024px */
@media (max-width: 1024px) {
  .elsewhere {
    padding-top: 40px;
  }
}


/* elsewhere css end */





/* WRITING & ACHIEVEMENTS SECTION */

.writing {
  padding-top: 0;          /* IMPORTANT */
  padding-bottom: 80px;
  margin-top: 0px;
  background: #0b0b0b; /* dark theme */
}

.writing-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 15px;
}

.writing-title {
  font-size: 22px;
  font-weight: 500;
  color: #eaeaea;
  margin-bottom: 32px;
}

.writing-item {
  margin-bottom: 32px;
}

.writing-item h3 {
  font-size: 18px;
  font-weight: 500;
  color: #eaeaea;
  margin-bottom: 10px;
}

.writing-item p {
  font-size: 15px;
  color: #b5b5b5;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* Logos Layout */
.writing-logos {
  display: flex;
  gap: 24px;
  margin: 18px 0 20px;
  flex-wrap: wrap;
}

.logo-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  background: #121212;
  padding: 4px;
}

.logo-item span {
  font-size: 14px;
  color: #cfcfcf;
}

/* Writing Impact */
.writing-impact {
  margin-top: 12px;
}

/* Motto */
.motto {
  font-style: italic;
  color: #9a9a9a;
  margin-top: 10px;
}


/* ============================= */
/* MOBILE REFINEMENT (≤640px)   */
/* ============================= */

@media (max-width: 640px) {

  .writing {
    padding: 30px 0 50px;
  }

  .writing-title {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .writing-item {
    margin-bottom: 24px;
  }

  .writing-item h3 {
    font-size: 16px;
  }

  .writing-item p {
    font-size: 14px;
  }

  .writing-logos {
    gap: 16px;
    margin: 14px 0 16px;
  }

  .logo-item img {
    width: 24px;
    height: 24px;
    padding: 3px;
  }

  .logo-item span {
    font-size: 13px;
  }

}


/* ============================= */
/* TABLET / ≤1024px FIX         */
/* ============================= */

@media (max-width: 1024px) {
  .writing {
    padding-top: 40px;
  }
}

/* WRITING & ACHIEVEMENTS SECTION END */




/* GROWTH TRACKER SECTION */

.growth {
  padding-top: 0;          /* IMPORTANT */
  padding-bottom: 80px;
  margin-top: 0px;
  background: #0b0b0b; /* dark theme */
}

.growth-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 15px;
}

.growth-title {
  font-size: 22px;
  font-weight: 500;
  color: #eaeaea;
  margin-bottom: 32px;
}

/* 2 Column Grid */
.growth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

/* Text Styling */
.growth-left p,
.growth-right p {
  font-size: 15px;
  color: #b5b5b5;
  line-height: 1.7;
  margin-bottom: 8px;
}

.growth-list {
  margin: 16px 0 20px;
}

.growth-phase {
  margin-top: 12px;
}

.growth-commitment {
  color: #cfcfcf;
  margin-top: 14px;
}


/* ============================= */
/* MOBILE REFINEMENT (≤640px)   */
/* ============================= */

@media (max-width: 640px) {

  .growth {
    padding: 30px 0 50px;
  }

  .growth-title {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .growth-grid {
    grid-template-columns: 1fr;   /* stack vertically */
    gap: 28px;
  }

  .growth-left p,
  .growth-right p,
  .growth-commitment {
    font-size: 14px;
  }
}


/* ============================= */
/* TABLET FIX (≤1024px)         */
/* ============================= */

@media (max-width: 1024px) {
  .growth {
    padding-top: 40px;
  }
}

/* GROWTH TRACKER SECTION END */



/* MISC SECTION */

.misc {
  padding-top: 0;          /* IMPORTANT */
  padding-bottom: 80px;
  margin-top: 0px;
  background: #0b0b0b; /* dark theme */
}

.misc-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 15px;
  
}

.misc-title {
  font-size: 22px;
  font-weight: 500;
  color: #eaeaea;
  margin-bottom: 32px;
}

/* Button Container */
.misc-buttons {
  display: flex;
  
  gap: 20px;
  flex-wrap: wrap;
}

/* Buttons */
.misc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #292524;
  color: #eaeaea;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.misc-btn:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.misc-btn .icon {
  font-size: 14px;
}


/* ============================= */
/* MOBILE REFINEMENT (≤640px)   */
/* ============================= */

@media (max-width: 640px) {

  .misc {
    padding: 30px 0 50px;
  }

  .misc-title {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .misc-btn {
    font-size: 13px;
    padding: 10px 18px;
  }

}


/* ============================= */
/* TABLET FIX (≤1024px)         */
/* ============================= */

@media (max-width: 1024px) {
  .misc {
    padding-top: 40px;
  }
}

/* MISC SECTION END */