*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:'Inter',sans-serif;
      scroll-behavior:smooth;
    }

    body{
      overflow-x:hidden;

      background:
      linear-gradient(
      135deg,
      #eef4ff 0%,
      #dce8ff 25%,
      #f3e7ff 60%,
      #ffffff 100%
      );

      color:#111;
    }

    /* SCROLLBAR */

    ::-webkit-scrollbar{
      width:10px;
    }

    ::-webkit-scrollbar-thumb{
      background:linear-gradient(#6ea8ff,#9b7bff);
      border-radius:20px;
    }

    /* SIDEBAR */

    .sidebar{
      position:fixed;
      left:25px;
      top:50%;
      transform:translateY(-50%);
      width:70px;
      height:500px;

      background:rgba(255,255,255,0.3);

      backdrop-filter:blur(20px);

      border-radius:35px;

      border:1px solid rgba(255,255,255,0.5);

      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:25px;

      z-index:1000;

      box-shadow:
      0 10px 40px rgba(0,0,0,0.08);
    }

    .sidebar a{
      width:48px;
      height:48px;

      border-radius:50%;

      display:flex;
      align-items:center;
      justify-content:center;

      text-decoration:none;

      background:rgba(255,255,255,0.7);

      color:#333;

      font-size:18px;

      transition:0.4s;
    }

    .sidebar a:hover{
      background:
      linear-gradient(
      135deg,
      #6ea8ff,
      #9b7bff
      );

      color:white;

      transform:scale(1.1);
    }

    /* HEADER */

    header{
      position:fixed;
      top:0;
      width:100%;

      padding:22px 8%;

      display:flex;
      justify-content:space-between;
      align-items:center;

      z-index:999;

      backdrop-filter:blur(15px);

      background:rgba(255,255,255,0.3);

      border-bottom:
      1px solid rgba(255,255,255,0.5);
    }

    .company-brand{
      display:flex;
      align-items:center;
      gap:15px;
    }

    .company-logo{
      width:58px;
      height:58px;

      border-radius:18px;

      display:flex;
      align-items:center;
      justify-content:center;

      font-size:24px;
      font-weight:800;
      color:white;

      background:none

      box-shadow:
      0 10px 25px rgba(123,123,255,0.35);
    }

    .company-info h2{
      font-size:18px;
      font-weight:800;
      color:#222;
    }

    .company-info p{
      font-size:13px;
      color:#666;
      margin-top:3px;
    }

    nav{
      display:flex;
      gap:35px;
    }

    nav a{
      text-decoration:none;
      color:#333;
      font-weight:500;
      position:relative;
    }

    nav a::after{
      content:'';
      position:absolute;
      left:0;
      bottom:-6px;

      width:0%;
      height:2px;

      background:
      linear-gradient(
      135deg,
      #5f8dff,
      #985eff
      );

      transition:0.4s;
    }

    nav a:hover::after{
      width:100%;
    }

    /* SECTION */

    section{
      padding:140px 10%;
      min-height:100vh;
      position:relative;
    }

    .section-title{
      font-size:65px;
      margin-bottom:25px;
      line-height:1;
      letter-spacing:-3px;
    }

    .section-desc{
      font-size:20px;
      line-height:1.8;
      color:#555;
      max-width:850px;
    }

    /* HERO */

    .hero{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:60px;
    }

    .hero-text{
      flex:1;
    }

    .hero-text h1{
      font-size:95px;
      line-height:0.95;
      letter-spacing:-5px;
      margin-bottom:30px;
    }

    .hero-text p{
      font-size:21px;
      line-height:1.8;
      color:#555;
      max-width:700px;
      margin-bottom:40px;
    }

    .btn{
      display:inline-block;
      padding:18px 42px;
      border-radius:100px;
      text-decoration:none;

      color:white;
      font-weight:600;

      background:
      linear-gradient(
      135deg,
      #6ea8ff,
      #9b7bff
      );

      box-shadow:
      0 10px 30px rgba(123,123,255,0.35);

      transition:0.4s;
    }

    .btn:hover{
      transform:translateY(-5px) scale(1.03);
    }

    .hero-image{
      flex:1;
      display:flex;
      justify-content:center;
    }

    .hero-image img{
      width:100%;
      max-width:550px;

      border-radius:40px;

      box-shadow:
      0 20px 60px rgba(0,0,0,0.15);
    }

    /* ABOUT */

    .about-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:40px;
      margin-top:70px;
    }

    .glass-box{
      padding:45px;

      background:rgba(255,255,255,0.4);

      backdrop-filter:blur(18px);

      border-radius:30px;

      border:1px solid rgba(255,255,255,0.45);

      box-shadow:
      0 10px 30px rgba(0,0,0,0.05);
    }

    .glass-box h3{
      font-size:30px;
      margin-bottom:20px;
    }

    .glass-box p{
      line-height:1.9;
      color:#555;
    }

    /* SERVICES */

    .services-grid{
      margin-top:70px;

      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

      gap:30px;
    }

    .service-card{
      padding:45px;

      background:white;

      border-radius:35px;

      transition:0.5s;

      box-shadow:
      0 10px 30px rgba(0,0,0,0.06);
    }

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

      background:
      linear-gradient(
      135deg,
      #7daeff,
      #9f82ff
      );

      color:white;
    }

    .service-card h3{
      font-size:28px;
      margin-bottom:20px;
    }

    .service-card p{
      line-height:1.8;
    }

    /* PRODUCT & CUSTOMER */

    .portfolio-grid{
      margin-top:70px;

      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

      gap:30px;
    }

    .portfolio-item{
      overflow:hidden;
      border-radius:30px;
      position:relative;
      cursor:pointer;
    }

    .portfolio-item img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:0.6s;
    }

    .portfolio-item:hover img{
      transform:scale(1.08);
    }

    .overlay{
      position:absolute;
      inset:0;

      background:
      linear-gradient(
      to top,
      rgba(0,0,0,0.75),
      transparent
      );

      display:flex;
      align-items:flex-end;

      padding:35px;

      color:white;
    }
    /* ABOUT */

    .about-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:40px;
      margin-top:70px;
    }

    .glass-box{
      padding:45px;

      background:rgba(255,255,255,0.4);

      backdrop-filter:blur(18px);

      border-radius:30px;

      border:1px solid rgba(255,255,255,0.45);

      box-shadow:
      0 10px 30px rgba(0,0,0,0.05);
    }

    .glass-box h3{
      font-size:30px;
      margin-bottom:20px;
    }

    .glass-box p{
      line-height:1.9;
      color:#555;
    }

    /* CONTACT */

    .contact-box{
      margin-top:70px;

      padding:60px;

      border-radius:35px;

      background:
      linear-gradient(
      135deg,
      #7daeff,
      #9f82ff
      );

      color:white;
    }

    .contact-box h2{
      font-size:55px;
      margin-bottom:20px;
    }

    .contact-box p{
      font-size:20px;
      line-height:1.8;
      margin-bottom:30px;
    }

    .company-contact{
      margin-top:35px;

      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

      gap:20px;
    }

    .contact-item{
      background:rgba(255,255,255,0.2);

      padding:25px;

      border-radius:20px;

      backdrop-filter:blur(15px);
    }

    .contact-item h4{
      margin-bottom:10px;
      font-size:18px;
    }

    .contact-item p{
      line-height:1.7;
      color:#f5f5f5;
      font-size:15px;
    }

    .contact-item a{
      color:white;
      text-decoration:none;
    }

    /* FOOTER */

    footer{
      background:#111;
      padding:60px 10%;
      color:white;
      margin-top:80px;
    }

    .footer-content{
      display:flex;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
      gap:30px;
    }

    .footer-left{
      display:flex;
      align-items:center;
      gap:18px;
    }

    .footer-logo{
      width:65px;
      height:65px;

      border-radius:18px;

      display:flex;
      align-items:center;
      justify-content:center;

      font-size:28px;
      font-weight:800;

      background:none

      color:white;
    }

    .footer-text h2{
      font-size:22px;
    }

    .footer-text p{
      color:#aaa;
      margin-top:8px;
      line-height:1.7;
    }

    .footer-right{
      color:#999;
      line-height:1.8;
    }

    /* WHATSAPP FLOAT */

    .whatsapp-float{
      position:fixed;

      left:25px;
      bottom:25px;

      width:70px;
      height:70px;

      border-radius:50%;

      background:#25D366;

      display:flex;
      align-items:center;
      justify-content:center;

      z-index:9999;

      text-decoration:none;

      box-shadow:
      0 10px 30px rgba(37,211,102,0.45);

      animation:floatWA 2s infinite ease-in-out;
    }

    .whatsapp-float img{
      width:38px;
    }

    @keyframes floatWA{

      0%{
        transform:translateY(0px);
      }

      50%{
        transform:translateY(-8px);
      }

      100%{
        transform:translateY(0px);
      }

    }

    /* RESPONSIVE */

    @media(max-width:1100px){

      .hero{
        flex-direction:column;
      }

      .hero-text h1{
        font-size:70px;
      }

      .about-grid{
        grid-template-columns:1fr;
      }

      .section-title{
        font-size:50px;
      }

      .sidebar{
        display:none;
      }

    }

    @media(max-width:700px){

      nav{
        display:none;
      }

      .hero-text h1{
        font-size:52px;
      }

      .section-title{
        font-size:40px;
      }

      .contact-box h2{
        font-size:38px;
      }

      .contact-box{
        padding:35px;
      }

    }
    img{
  max-width:100%;
  display:block;
}

html,body{
  overflow-x:hidden;
}

@media(max-width:768px){

  header{
    padding:18px 5%;
  }

  .hero{
    gap:40px;
  }

  .hero-text h1{
    font-size:48px;
    line-height:1.05;
  }

  .hero-text p{
    font-size:17px;
  }

  .section-title{
    font-size:38px;
  }

  .section-desc{
    font-size:17px;
  }

  .portfolio-grid{
    grid-template-columns:1fr;
  }

  .services-grid{
    grid-template-columns:1fr;
  }

  .company-brand{
    gap:10px;
  }

  .company-logo{
    width:50px;
    height:50px;
    font-size:20px;
  }

  .company-info h2{
    font-size:14px;
  }

  .company-info p{
    font-size:11px;
  }

  .btn{
    width:100%;
    text-align:center;
  }

  .contact-box{
    padding:30px 25px;
  }

  .footer-content{
    flex-direction:column;
    align-items:flex-start;
  }

}