*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:Arial, Helvetica, sans-serif;
    }

    body{
      background:#f5f7fa;
      color:#222;
    }

    /* HEADER */
    header{
      background:#0d1b2a;
      color:white;
      padding:20px 8%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
    }

    .logo{
      font-size:20px;
      
    }

    .logo span{
      color:#00b4d8;
    }

    nav a{
      color:white;
      text-decoration:none;
      margin-left:20px;
      font-size:20px;
      transition:0.3s;
    }

    nav a:hover{
      color:#00b4d8;
    }

    /* HERO */
    .hero{
      background:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
      url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1400&auto=format&fit=crop');
      background-size:cover;
      background-position:center;
      height:70vh;
      display:flex;
      justify-content:center;
      align-items:center;
      text-align:center;
      color:white;
      padding:20px;
    }

    .hero-content h1{
      font-size:50px;
      margin-bottom:15px;
    }

    .hero-content p{
      font-size:18px;
      margin-bottom:25px;
    }

    .btn{
      display:inline-block;
      padding:12px 28px;
      background:#00b4d8;
      color:white;
      text-decoration:none;
      border-radius:6px;
      transition:0.3s;
    }

    .btn:hover{
      background:#0096c7;
    }

    /* SECTION */
    section{
      padding:70px 8%;
    }

    .section-title{
      text-align:center;
      margin-bottom:50px;
    }

    .section-title h2{
      font-size:36px;
      color:#0d1b2a;
    }

    .section-title p{
      color:#666;
      margin-top:10px;
    }

    /* PROJECTS */
    .projects{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
      gap:25px;
    }

    .project-card{
      background:white;
      border-radius:12px;
      overflow:hidden;
      box-shadow:0 4px 12px rgba(0,0,0,0.08);
      transition:0.3s;
    }

    .project-card:hover{
      transform:translateY(-5px);
    }

    .project-card img{
      width:100%;
      height:220px;
      object-fit:cover;
    }

    .project-content{
      padding:20px;
    }

    .project-content h3{
      margin-bottom:10px;
      color:#0d1b2a;
    }

    .project-content p{
      color:#555;
      line-height:1.6;
      font-size:15px;
    }

    /* CLIENTS */
    .clients{
      background:#ffffff;
    }

    .client-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
      gap:20px;
      margin-top:40px;
    }

    .client-box{
      background:#f1f5f9;
      padding:30px;
      text-align:center;
      border-radius:10px;
      font-weight:bold;
      color:#0d1b2a;
    }

    /* FOOTER */
    footer{
      background:#0d1b2a;
      color:white;
      text-align:center;
      padding:25px;
    }

    footer p{
      margin:5px 0;
    }

    @media(max-width:768px){

      .hero-content h1{
        font-size:34px;
      }

      nav{
        margin-top:15px;
      }

      nav a{
        margin:10px;
        display:inline-block;
      }
    }

    @media(max-width:768px){

  header{
    flex-direction:column;
    text-align:center;
  }

  nav{
    margin-top:15px;
  }

  .hero{
    height:auto;
    padding:100px 20px;
  }

  .hero-content h1{
    font-size:32px;
    line-height:1.2;
  }

  .hero-content p{
    font-size:16px;
  }

  section{
    padding:50px 5%;
  }

  .project-card img{
    height:200px;
  }

  .btn{
    width:100%;
    max-width:250px;
  }
}

.social-icons {
    display: flex;
    justify-content: center; /* THIS centers the icons horizontally */
    align-items: center;
    gap: 15px;
    margin-top: 10px;
 
}

.social-icons a {
  text-decoration: none;
  font-size: 20px;
  color: white;
  background: #333;
  padding: 10px;
  border-radius: 30%;
  transition: 0.3s;
}

.social-icons a:hover {
  background: #0077b5; /* Change color on hover */
  transform: scale(1.1);
}

html {
  scroll-behavior: smooth;
}