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

@font-face {
  font-family: 'Apple Garamond';
  src: url('fonts/AppleGaramond.ttf') format('truetype');
}

  .bg {
  background-image: url("home/bg.png"); /* no need to escape space */
  background-attachment: fixed; /* key for parallax effect */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 50%;
  z-index: -1; /* push behind everything */
}

  body {
    font-family: 'Apple Garamond' , serif;
  background-color: #0052ff;
  color: black;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.skill-section {
  flex: 1; 
  margin-top: 100px;
  position: relative;
  overflow: hidden;
}


    nav {
      margin-top: 60px;
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
    }

    nav a {
      text-decoration: none;
      color: white;
      font-size: 20px;
      font-weight: bold;
      padding: 8px 12px;
      transition: 0.3s;
    }

    nav a:hover {
      text-decoration: underline;
    }

    .logo-left, .logo-right {
      position: absolute;
      top: 0;
  z-index: 9999; 

    }

      
  .logo-left img,
.logo-right img {
  display: inline-block;
  transition: transform 0.3s ease;
  pointer-events: all;
}

.logo-left img:hover,
.logo-right img:hover {
  transform: scale(1.1);
}

 
    .logo-left img {
        width: 210px;
        height: auto;
        
    }

    .logo-right {
      right: 50px;
      top: 32px;
    }

    .logo-right img {
      width: 80px;
      height: auto;

    }


    .about-section {
      position: relative;
      top: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: calc(100vh - 150px); /* adjust for nav + footer */
      overflow: hidden;
    }

  .background-img {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 79%; /* fixed width */
max-width: none; /* disable max-width limit */
z-index: -1;
}


.skills-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 50px;
  justify-items: center;
  margin-top: 75px;
  z-index: 2;
}

    .skill-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 40%;
    }

    .skill-logo {
      width: 80px;
      margin-bottom: 10px;
    }

    .progress-bar {
      width: 160px;
      height: 25px;
      background-color: #FF6CB5;
      border-radius: 25px;
      overflow: hidden;
      margin-bottom: 10px;
      position: relative;
    }

    .progress-fill {
      height: 100%;
      background-color: white;
      width: 70%;
      transition: width 0.5s ease;
      border-radius: 25px;
    }

    .skill-label {
      font-weight: bold;
      font-size: 16px;
    }

.title {
  width: 100%;
  max-width: 580px; /* or another suitable limit */
  margin: 35px auto 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-left: 65px;
}

.title img {
  max-width: 100%;
  height: auto;
}


.footer {
  background-color: white;
  padding: 10px 0;
  font-size: 14px;
  color: blue;
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
}


@media screen and (max-width: 1180px) {
  .background-img {
    height: 50vw;
    width: 95vw;

  }

  .title {
    margin-top: 70px;
    margin-left: 75px;
  }


  .skills-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 45px;
    margin-top: 90px;
    justify-items: center;
    z-index: 2;
  }
}

    @media (max-width: 768px) {

          html, body {
      overflow: scroll;
    }

.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background-image: url("home/bg.png");
  background-repeat: repeat-y;
  background-size: 100% 1000px;
  z-index: -1;
}

  nav {
    gap: 20px;
  }

  nav a {
    font-size: 20px;
    margin-top: 100px;
  }

  .logo-left{
        width: 100px;
        top: -13px;
        left: -10px;

      }

  .logo-right img {
    width: 60px;
  }

    .background-img {
      width: 350%;
      height: 84%;
      margin-bottom: 90px;
    }

  .title img {
    width: 500px;
    margin-top: -35px;
    margin-left: -190px;
  }

.skills-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 5px;
  justify-items: center;
  margin-top: 0px;
  z-index: 2;
}

  .skill-box {
    width: 200px;
  }

  .skill-logo {
    width: 60px;
  }

  .progress-bar {
    width: 140px;
    height: 20px;
  }

  .skill-label {
    font-size: 15px;
  }

  .footer {
    margin-bottom: 0px;
  }

    }