/* Global styles */
html {
    box-sizing: border-box;
    size-adjust: 75%;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
h1.header-name {
    font-size: 3.5rem; /* Increase font size for name */
    color: #ffffff; /* blue dark */
    margin-bottom: 10px; /* Add space below the name */
  }
  
  h2.header-title {
    font-size: 2rem; /* Increase font size for title */
    color: #ffffff; /* blue dark */
  }
  body {
    color: #343434;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background-color: #F7FFF7; /* almost white */
  }
  .container.my-5 .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid, adjust as needed */
    grid-gap: 20px;
  }
  
  .container.my-5 .card {
    background-color: #F7FFF7; /* almost white */
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
  }
  
  .container.my-5 .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  
  .container.my-5 .card h3 {
    color: #2F3061; /* blue dark */
    margin-bottom: 10px;
  }
  
  .container.my-5 .card p {
    color: #343434; /* dark gray */
    margin-bottom: 0;
  }
  
  img {
    margin-top: 10%;
    width: 300px;
    display:inline-block;
    border-radius: 150px;
    width:70%;
    margin:left auto;
    padding:20px;
    border: 3px solid gold;
  }
  
  a {
    color: #FFE66D; /* yellow */
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  h1, h2 {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    margin: 0;
    text-align: center;
  }
  
  h1 {
    font-size: 3rem;
    color: #fafafa; /* blue dark */
  }
  
  h2 {
    font-size: 2rem;
    color: #2F3061; /* blue dark */
  }
  
  .content-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
  }
  
  /* Profile */
  header {
    background: #2F3061; /* blue dark */
    color: #F7FFF7; /* almost white */
    text-align: center;
    padding: 40px 20px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  /*skills */
  .container.my-5 .skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.container.my-5 .row {
  display: flex;
  justify-content: space-between;
}

.container.my-5 .skill-btn {
  background-color: #2F3061;
  color: #FFF;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}

.container.my-5 .skill-btn:hover {
  background-color: #4CAF50;
}

  
  /* Projects */
  .projects {
    background: #F7FFF7; /* almost white */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  
  .project-item {
    border-bottom: 1px dashed #343434;
    padding: 25px 0;
  }
  
  .project-item img {
    display: block;
    margin: 0 auto 20px;
    border-radius: 10px;
    max-width: 100%;
  }
  
  .project-item h3 {
    margin-top: 0;
    color: #2F3061; /* blue dark */
  }
  
  /* Work Experience */
  .work-experience {
    background: #A1C6D7; /* light blue */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .job-item {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 40px;
  }
  
  /* Contact Info */
  footer {
    background: #343434; /* dark gray - almost black */
    color: #F7FFF7; /* almost white */
    text-align: center;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .contact-list {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
  }
  
  .contact-list a {
    padding: 10px 20px;
    margin: 10px;
    display: inline-block;
    background-color: #2F3061; /* blue dark */
    color: #F7FFF7; /* almost white */
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .contact-list a:hover {
    background-color: #FFD700; /* gold */
    color: #343434; /* dark gray - almost black */
  }