/* SITE HEADER */
body {
  background-color: whitesmoke;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 4%;
    box-shadow: 0 5px 10px rgb(163, 9, 9);
    

}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem
}

.brand-name { 
    color:blue;
    font-weight:700;
    text-decoration:none;
    font-size: 1.1rem;
}

.main-nav {
    display: flex;
     background-color: white;
     text-align: center;
     padding: 10px;
        }
        nav a {
            
            text-decoration: none;
            margin: 10px
        }
        .button {
            
            background-color: #2563eb; 
            color: #FFFFFF;
            padding: 12px 24px;
             border: solid; 
             border-radius: 46px;
        }

         .button3 {
            
            background-color: white; 
            color:#2563eb;
            
            font-weight: 600;
            padding: 12px 24px;
             border: solid; 
             border-radius: 46px;
         }

        .button:hover {
           background-color: #FFFFFF;
            color: #2563eb;
            padding: 12px 24px;

        }

        .button3:hover {
           background-color:#2563eb;
            color:  #FFFFFF;
            padding: 12px 24px;
        }
         .button2 {
            
            color: #2563eb;
            padding: 12px 24px;
             border: solid; 
             border-radius: 46px;
        }

        .button2:hover {
            background-color: #1d4ed8;
            color: aqua;
        }
         /* .potrait-frame {
          width: 190px;
         height: 190px;
         } */
         .portrait {
  flex: 0 0 auto;
  text-align: center;
}

/* The framed photo placeholder */
.portrait-frame {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0F766E 0%, red 55%, #99F6E4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 18px 40px rgba(15, 118, 110, 0.35);
}
.face {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden ;
}
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 5rem 5%;
  background: linear-gradient(160deg, #FFFFFF 0%, #FAF7F2 60%, #F0FDFA 100%);
}

/* Left text column */
.hero-text {
  flex: 1;
  max-width: 520px;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.about-card {
  background-color: #90aceb; 
  color:white;
  font-weight: 1000;
  border-radius: 14px;
  padding: 1.8rem;
  box-shadow: 0 6px 20px rgba(19, 26, 40, 0.06);
}

.about-card-thumb {
  height: 50px;
  background-color: #0693c2;
  padding: 0.5rem;
  border: solid #0693c2;
  border-radius: 15px;
  
}





/* Card heading */
.about-card h3 {

  margin-bottom: 0.8rem;
}

/* Paragraph text inside cards */
.about-card p {
  color: white;
  margin-bottom: 0.8rem;
}
.facts {
  list-style: none;
}
.facts li {
  padding: 1px;
  color: white;
  border-bottom: 1px dotted;
}
.facts li:last-child {
  border-bottom: none;
}
.section-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.skills {
  padding: 2rem 5%;

  background-color: #acbce2;
}
.skill-list {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.skill-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  
}
.skill-name {
  font-weight: 600;

}
.skill-value {
  font-weight: 600;
}

.skill-track {
  height: 12px;
  border-radius: 6px;
  background-color: aliceblue;
  
}
.skill-fill {
  height: 100%;
  background: linear-gradient;
  border-radius: 6px;
}
@keyframes fill-bar { to {
  width: 100%;
}}
.fill-html {
  width: 70%;
}



footer { 
  padding: 0.5rem;
  background-color: #1d4ed8;
  color: white;
}

.project {
  padding: 4rem 5%;
  background-color: red;
}
.project-body { 
  padding: 0.7rem;
}

.grid { 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.project-card {
  background-color: white;
  border: 1px solid #1d4ed8;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 5px 20px #1d4ed8;
  transition: trabsform 0.3s ease box-shadow 0.3s ease;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px #1d4ed8;
}
.project-thumb {
  height: 170px;
}
.thumb-pos { 
  
  background:linear-gradient( 135deg, #1d4ed8 0%)
}

.project-tags { 
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.project-tags span { 
  background-color: #0f766d;
  color: #FAF7F2;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
}

/* ===== 11. Mobile responsive rules ===== */

/* Tablets and smaller: shrink the hero and stack cards */
@media (max-width: 820px) {
  /* Hero becomes one column with centered text */
  .hero {
    flex-direction: column;
    text-align: center;
  }

  /* Hero buttons center themselves */
  .hero-buttons {
    justify-content: center;
  }

  /* About grid stacks into one column */
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* Phones: keep the header tidy and shrink type */
@media (max-width: 600px) {
  /* Hide the header button to make room */
  .btn-header {
    display: none;
  }

  /* Nav links become smaller and closer together */
  .main-nav {
    gap: 0.9rem;
    font-size: 0.85rem;
  }

  /* Smaller name in the hero */
  .hero-text h1 {
    font-size: 2.2rem;
  }

  /* Portrait shrinks to fit small screens */
  .portrait-frame {
    width: 190px;
    height: 190px;
  }

  /* The face inside also shrinks */
  .face {
    width: 150px;
    height: 150px;
  }

  .face-head {
    width: 70px;
    height: 70px;
  }

  .face-body {
    width: 120px;
    height: 70px;
  }

  /* Project grid becomes a single column */
  .project-grid {
   display: grid;
grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  }

}