* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Questrial, Arial, sans-serif;
    }
    .anton-regular {
      font-family: "Anton", sans-serif;
      font-weight: 550;
      font-style: normal;
      text-shadow: 
            0 2px 6px rgba(0,0,0,0.6),
            0 4px 12px rgba(0,0,0,0.4);
    }

    .questrial-regular {
      font-family: "Questrial", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
   
    body {
      line-height: 1.6;
      color: #111;
      background: #f9f9f9;
    }

    header {
      padding: 20px 40px;
      background: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      z-index: 9999;
    }

    header h1 {
      font-size: 18px;
    }

    nav a {
      margin-left: 20px;
      text-decoration: none;
      color: #333;
      font-weight: 500;
    }

    .hero {
      padding: 100px 40px;
      text-align: center;
      background: url("images/blue-image.jpg") center / cover no-repeat;
      color: white;
    }

    .hero h2 {
      font-size: 42px;
      margin-bottom: 20px;
    }

    .hero p {
      font-size: 18px;
      max-width: 600px;
      margin: 0 auto 30px;
    }

    .btn {
      display: inline-block;
      padding: 12px 24px;
      background: #38bdf8;
      color: black;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

   

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }

    .card {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .services-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:25px;
    }

    .service-card{
      background:white;
      padding:30px;
      border-radius:16px;
      box-shadow:0 10px 25px rgba(0,0,0,0.08);
      transition:0.3s;
    }

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

    .service-card h3{
      margin-bottom:15px;
      color:#38bdf8;
    }

    .portfolio img {
      width: 100%;
      border-radius: 10px;
    }


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

    .section-title h2{
      font-size:40px;
      margin-bottom:10px;
    }

    .section-title p{
      color:#666;
    }
    /* CONTACT */
    .contact-box{
      background:white;
      padding:40px;
      border-radius:16px;
      box-shadow:0 10px 25px rgba(0,0,0,0.08);
      max-width:700px;
      margin:50px auto;
    }

    form{
      display:grid;
      gap:15px;
    }

    input,
    textarea{
      padding:14px;
      border:1px solid #ddd;
      border-radius:8px;
      font-size:18px;
    }


    button {
      padding: 12px;
      border: none;
      background: #0f172a;
      color: white;
      cursor: pointer;
      border-radius: 6px;
      font-size: 18px;
    }

    footer {
      text-align: center;
      padding: 40px;
      font-size: 14px;
      color: #666;
      margin-top: 150px;
    }
.social-icons{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top: 15px;
}

.social-icons a{
  width:40px;
  height:40px;
  background:#38bdf8;
  color:white;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  text-decoration:none;
  transition:0.3s ease;
}

.social-icons a:hover{
  background:#38bdf8;
  color:white;
  transform:translateY(-5px);
}

    .logo {
      height: 90px;       /* Controls logo size */
      width: auto;        /* Keeps proportions */
      object-fit: contain;
      padding: 0px;
      margin: 0px;
    }
    .btn-outline {
      display: inline-block;
      padding: 12px 24px;
      color: white;
      background: transparent;
      border: 2px solid white;
      border-radius: 30px; /* makes it rounded */
      text-decoration: none;
      font-weight: bold;
      transition: all 0.3s ease;
      margin-right: 20px;
    }
    .btn-outline:hover {
      background: white;
      color: black;
    }
    .btn-outline:hover svg {
      fill: black;
    }

    .btn-outline-blue {
      display: inline-block;
      padding: 12px 24px;
      color: rgb(9, 154, 244);
      background: transparent;
      border: 2px solid rgb(9, 154, 244);
      border-radius: 30px; /* makes it rounded */
      text-decoration: none;
      font-weight: bold;
      transition: all 0.3s ease;
    }
    .btn-outline-blue:hover {
      background: rgb(9, 154, 244);
      color: white;
      border: 2px solid white;
    }
    .btn-outline-blue:hover svg {
      fill: white;
    }

    .slider {
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      z-index: 1;
      width: 100%;
      margin: 30px auto;
      min-height: 250px;
    }


    /* Desktop */
    @media (max-width: 768px) {
      .slider {
        width: 100%;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
      }

    }


        /*trying out */
    .slides {
      position: relative;
    }

    .slide {
      display: none;
      width: 100%;
    }

    .slide.active {
      display: block;
    }

    /* arrows */
    .prev, .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: white;
      border: none;
      padding: 8px 12px;
      cursor: pointer;
      border-radius: 6px;
      z-index: 10;
    }

    .prev { left: 10px; }
    .next { right: 10px; }
  
    #work .card {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
    }
    #work_part2 .card {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
    }
    #work_part3 .card {
      width: 100%;
      max-width: 800px;
      margin: 50px auto;
    }
    #work_part4 .card {
      width: 100%;
      max-width: 800px;
      margin: 50px auto;
    }

    .slide img,
    .slider img {
      width: 100%;
      height: auto;
    }

    .button-margin{
      margin: 20px auto;
    }

#pricing .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:30px;

  max-width:1300px;
  margin:0 auto;
  padding:0 30px;
}

#services .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:30px;

  max-width:1300px;
  margin:0 auto;
  padding:0 30px;
}

#work .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:30px;

  max-width:1300px;
  margin:55px auto;
  padding:0 30px;
}