/* RESET & GLOBAL */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { max-width: 100%; overflow-x: hidden; font-family: 'Lato', sans-serif; }

    /* WRAPPER */
    #wrapper {
      width: 90%;
      margin: 50px auto;
    }

    /* SLIDER OUTER */
    .slider-outer {
      width: 100%;
      height: 300px;
      position: relative;
      perspective: 1600px;
      overflow: hidden;
    }

    /* SLIDER INNER */
    .slider-inner {
      width: 100%;
      transform-style: preserve-3d;
      transition: all 0.3s ease-in-out;
      transform-origin: 50% 100%;
    }

    /* SLIDES */
    .slide {
      width: 100%;
      height: 300px;
      position: absolute;
      background: linear-gradient(to bottom, #dfdfdf, #f8f8f8);
      padding: 27px;
      color: #4ECDC4;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      transform-origin: 0% 0%;
      gap: 30px;
      overflow: hidden;
    }

    .slide img {
      max-width: 240px;
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .slide-title {
      max-width: 50%;
      padding-right: 40px;
    }

    .slide-title h1 {
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      font-weight: bold;
      margin-bottom: 10px;
    }

    .slide-title h3 {
      font-size: clamp(1rem, 1.5vw, 1.3rem);
      font-weight: 400;
      color: #333;
    }

    /* FACE TRANSFORMS */
    .slide.top { background: #556270; color: #fff; transform: rotateX(90deg) translateY(-300px); }
    .slide.back { background: #FF6B6B; color: #fff; transform: rotateX(180deg) translateY(-300px) translateZ(300px); }
    .slide.bottom { background: #4ECDC4; color: #fff; transform: rotateX(-90deg) translateZ(300px); }

    /* ROTATIONS */
    .slider-inner.rotate.two { transform: rotateX(-90deg) translateZ(300px); }
    .slider-inner.rotate.three { transform: rotateX(-180deg) translateY(-300px) translateZ(300px); }
    .slider-inner.rotate.four { transform: rotateX(-270deg) translateY(-300px); }

    /* NAVIGATION */
    #nav {
      margin-top: 30px;
      text-align: center;
    }

    #nav ul {
      display: flex;
      justify-content: center;
      list-style: none;
      gap: 15px;
      flex-wrap: wrap;
    }

    #nav ul li a.btn {
      width: 40px;
      height: 40px;
      color: white;
      border: 3px solid white;
      border-radius: 50%;
      display: inline-block;
      line-height: 34px;
      font-weight: 300;
      font-size: 1rem;
      text-decoration: none;
      transition: all 0.2s ease-in-out;
    }

    #nav ul li a.btn:hover,
    #nav ul li a.btn:focus { color: #FF6B6B; border-color: #FF6B6B; }
    #nav ul li a.btn:active { color: #C44D58; border-color: #C44D58; }
    #nav ul li a.btn.focus { color: #C7F464; border-color: #C7F464; }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .slide { flex-direction: column-reverse; text-align: center; justify-content: center; padding: 20px; height: auto; }
      .slide-title { max-width: 100%; padding: 0; }
      .slide img { margin-bottom: 20px; }
      .slider-outer { height: auto; }
    }