/* =========================
   COLORS
========================= */

:root {
  --blue: #1d4ed8;
  --dark-blue: #172554;
  --light-blue: #eff6ff;
  --gray: #64748b;
  --border: #dbeafe;
}


/* =========================
   GENERAL
========================= */

body {
  background: white;
  color: var(--dark-blue);
}


/* =========================
   HERO
========================= */

.hero {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 3rem;

  align-items: center;

  padding: 5rem 2rem;

  max-width: 1400px;

  margin: auto;
}


.eyebrow {
  color: var(--blue);
  font-weight: 600;
}


.hero-text h1 {
  color: var(--dark-blue);

  font-size: 4.5rem;

  font-weight: 800;

  line-height: 1;

  margin-bottom: 1.5rem;
}


.subtitle {
  color: var(--blue);

  font-weight: bold;

  letter-spacing: 4px;
}


.description {
  color: var(--gray);

  font-size: 1.2rem;

  line-height: 1.7;

  margin-top: 1.5rem;
}


/* =========================
   PHOTO
========================= */

.hero-photo {
  text-align: center;
}


.profile-image {
  width: 330px;

  height: 330px;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  object-position: center;

  border-radius: 50%;

  border: 4px solid var(--blue);

  box-shadow:
    0 20px 50px
    rgba(29, 78, 216, 0.2);
}


/* =========================
   SKILLS
========================= */

.skills-card {
  padding: 2rem;

  border: 1px solid var(--border);

  border-radius: 15px;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.05);
}


.skills-card h3 {
  color: var(--blue);
}


/* =========================
   BUTTONS
========================= */

.buttons {
  display: flex;

  gap: 1rem;

  margin-top: 2rem;
}


.primary-button {

  background: var(--blue);

  color: white;

  padding: 0.9rem 1.5rem;

  border-radius: 6px;

  text-decoration: none;

  font-weight: bold;
}


.secondary-button {

  border: 1px solid var(--blue);

  color: var(--blue);

  padding: 0.9rem 1.5rem;

  border-radius: 6px;

  text-decoration: none;

  font-weight: bold;
}


/* =========================
   PROJECTS
========================= */

.project-grid {

  display: grid;

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

  gap: 1.5rem;

  margin-top: 2rem;
}


.project-card {

  border: 1px solid var(--border);

  border-radius: 15px;

  padding: 2rem;

  transition: 0.2s;
}


.project-card:hover {

  transform: translateY(-5px);

  box-shadow:
    0 15px 30px
    rgba(29, 78, 216, 0.12);
}


.project-card h2 {

  color: var(--dark-blue);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  .hero {

    grid-template-columns: 1fr;

    text-align: center;
  }


  .buttons {

    justify-content: center;
  }


  .project-grid {

    grid-template-columns: 1fr;
  }


  .profile-image {

    width: 350px;

    height: 350px;

    object-fit: cover;

    object-position: center;

    border-radius: 50%;
  }

}