/* ===========================
         RESET & BASE
         =========================== */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }

      body {
        scroll-behavior: smooth;
        overflow-x: hidden;
        background-color: #000000;
        color: #fff;
      }

      /* ===========================
         NAVIGATION
         =========================== */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 1vh 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1000;
        backdrop-filter: blur(10px);
        background: #00000087;
      }

      #logo {
        color: #ffffff;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 2px;
        cursor: pointer;
        transition: 0.3s;
        height: 70px;
        width: auto;
        object-fit: contain;
      }

      #nav-links ul {
        display: flex;
        list-style: none;
        color: #ffffff;
        min-width: 400px;
        border-radius: 10px;
        justify-content: space-around;
        gap: 10px;
      }

      #nav-links li {
        padding: 0px 10px;
        cursor: pointer;
        font-size: 18px;
        transition: 0.3s;
        list-style: none;
      }

      #nav-links li a {
        text-decoration: none;
        color: #ffffff;
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: all ease-in-out 0.3s;
        text-decoration-color: rgba(255, 0, 0, 0);
      }

      #nav-links li a:hover {
        color: #ff00cc;
        text-decoration: underline;
        text-underline-offset: 10px;
        text-decoration-thickness: 5px;
      }

      #nav-links li.active a {
        color: #ff00cc;
        text-decoration: underline;
        font-weight: bold;
      }

      /* Menu burger caché par défaut */
      #menu-burger {
        display: none;
      }

      /* ===========================
         MENU MOBILE
         =========================== */
      .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        max-width: 85vw;
        height: 100vh;
        background: linear-gradient(180deg, #1a0015 0%, #000000 100%);
        z-index: 2000;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.8);
        overflow-y: auto;
      }

      .mobile-menu.active {
        right: 0;
      }

      .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2vh 20px;
        border-bottom: 2px solid #2b0022;
      }

      #logo-mobile {
        height: 50px;
        width: auto;
        object-fit: contain;
      }

      .close-menu {
        background: none;
        border: none;
        color: #ff00d0;
        font-size: 2rem;
        cursor: pointer;
        padding: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        border-radius: 50%;
      }

      .close-menu:hover {
        background: rgba(255, 0, 208, 0.1);
        transform: rotate(90deg);
      }

      .mobile-menu-links {
        list-style: none;
        padding: 3vh 0;
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .mobile-menu-links li {
        border-bottom: 1px solid #2b0022;
      }

      .mobile-menu-links a {
        display: block;
        padding: 2vh 30px;
        color: #ffffff;
        text-decoration: none;
        font-size: 1.1rem;
        font-weight: 500;
        transition: all 0.3s ease;
      }

      .mobile-menu-links a:hover {
        background: rgba(255, 0, 208, 0.1);
        color: #ff00d0;
        padding-left: 40px;
      }

      /* Overlay */
      .mobile-menu::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: -1;
      }

      .mobile-menu.active::before {
        opacity: 1;
        visibility: visible;
      }

      /* ===========================
         TYPOGRAPHY
         =========================== */
      h1 {
        font-size: 48px;
        text-align: center;
        letter-spacing: 2px;
        transition: all ease-in-out 1s;
        color: rgb(207, 207, 207);
        font-weight: 400;
      }

      h1 strong {
        color: #ffffff;
      }

      h1:hover {
        transform: scale(1.05);
      }

      h2,
      .ttl-main {
        font-size: 36px;
        margin-top: 2vw;
        margin-bottom: 2vh;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: all ease-in-out 1s;
        color: rgb(235, 234, 234);
        animation: objet-fade-in linear forwards;
        animation-timeline: view();
        animation-range: cover;
        padding: 2vh;
      }

      h3,
      .ttl-slide {
        font-size: 1.8rem;
        margin-bottom: 2vh;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all ease-in-out 1s;
        color: #ff00d0;
        padding: 5px;
      }

      h4 {
        font-size: 2rem;
        color: #ffffff;
      }

      h1 span,
      h2 span,
      h3 span {
        color: #ff00d0;
        font-family: lora;
        text-transform: uppercase;
      }

      p {
        font-size: 0.8rem;
        line-height: 1.8;
        text-align: center;
        color: #c2c2c2;
        padding: 2vh;
        margin-top: 10px;
      }

      p span {
        color: #ff00d0;
        font-weight: bold;
      }

      .txt-sub {
        font-size: 0.9rem;
        text-align: center;
        line-height: 2;
        color: #c2c2c2;
        margin-bottom: 5vh;
        max-width: 800px;
        padding: 0 2vh;
      }

      .paragraphe {
        max-width: 600px;
        text-align: justify;
        font-size: 0.9rem;
        line-height: 1.8;
      }

      /* ===========================
         SECTIONS
         =========================== */
      section,
      .blk-section {
        width: 100vw;
        min-height: 100vh;
        background: #000000;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 10vh;
        padding: 5vh 2vh;
      }

      /* ===========================
         HERO SECTION
         =========================== */
      #home {
        background: url(/img/IMG9.jpg);
        background-position: 50% 20%;
        background-size: cover;
        height: 100vh;
        padding: 0;
        margin: 0;
      }

      .overlay {
        height: 100%;
        width: 100%;
        background-color: #0000003a;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 5vw;
      }

      .intro-text {
        padding: 5vh;
        border-radius: 1vh;
        background-color: #0000008f;
        width: 50vh;
        min-width: 450px;
        max-width: 90%;
        margin: 0 5vh;
      }

      .intro-text p {
        color: #ffffff;
      }

      /* ===========================
         BUTTONS & CTA
         =========================== */
      .cta {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 2vh;
      }

      .cta button,
      .btn-cta {
        padding: 2vh 3vh;
        font-size: 0.9rem;
        color: #ffffff;
        background-color: #6b0057;
        border: 2px solid #6b0057;
        border-radius: 1vh;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 5px;
        min-width: 200px;
        text-align: center;
      }

      .cta button:hover,
      .btn-cta:hover {
        background-color: #940079;
        border-color: #cc00a7;
        box-shadow: 0 0 30px 2px rgba(255, 0, 208, 0.35);
        transform: translateY(-3px);
        color: #ff75e6;
      }

      .btn-cta-alt {
        background-color: transparent;
        border: 2px solid #6b0057;
      }

      .btn-cta-alt:hover {
        background-color: #2b0022;
      }

      .row-cta {
        display: flex;
        gap: 2vh;
        margin-top: 4vh;
        flex-wrap: wrap;
        justify-content: center;
      }

      /* ===========================
         VIDEO SECTION
         =========================== */
      #presentation-video {
        padding: 10vh 2vh;
      }

      .video-playlist-container {
        width: 100%;
        max-width: 80vw;
        margin: 0 auto;
        border-radius: 16px;
        overflow: hidden;
      }

      #playlistVideo,
      .video-playlist-container video {
        width: 100%;
        display: block;
        border-radius: 16px;
        margin-top: 5vh;
      }

      /* ===========================
         CAROUSEL WHY
         =========================== */
      #why {
        padding: 10vh 2vh;
      }

      .carousel.why {
        height: auto;
        min-height: 60vh;
        width: 90%;
        max-width: 1200px;
        position: relative;
        z-index: 4;
        padding: 4vh 2vh;
        border: 2px solid #2b0022;
        border-radius: 10px;
        background-color: #2b0022;
        display: flex;
        opacity: 0;
        animation: fade linear forwards;
        animation-timeline: view();
        animation-range: 15% 40%;
      }

      .carousel ul {
        padding-inline: 0;
        margin-block: 0;
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .carousel button {
        position: absolute;
        background: rgba(255, 0, 208, 0.8);
        border: none;
        color: white;
        font-size: 2rem;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
      }

      .carousel button:hover {
        background: rgba(255, 0, 208, 1);
        transform: translateY(-50%) scale(1.1);
      }

      #prev {
        left: 20px;
      }

      #next {
        right: 20px;
      }

      .carousel li {
        list-style: none;
        display: flex;
      }

      .slide {
        position: absolute;
        min-height: 50vh;
        width: 100%;
        opacity: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2vh;
        padding: 2vh;
        transition: opacity 0.5s ease-in-out;
      }

      .slide.active {
        opacity: 1;
        position: relative;
      }

      .slide-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 2vh;
        width: 100%;
        padding: 2vh;
        flex-wrap: wrap;
      }

      .slide-item p {
        min-width: 200px;
        width: 100%;
        padding: 1vh 2vh;
        text-align: justify;
      }

      .slide-item h3 {
        font-size: 1.5rem;
        margin-bottom: 1vh;
      }

      .item-image {
        width: 400px;
        max-width: 100%;
        height: auto;
      }

      .item-image img {
        width: 100%;
        height: auto;
        max-height: 500px;
        border-radius: 0.5vh;
        object-fit: cover;
        object-position: center;
      }

      .item-description {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 400px;
        max-width: 100%;
        padding: 20px;
      }

      /* ===========================
         ABOUT SECTION
         =========================== */
      #about {
        padding: 10vh 2vh;
      }

      .story-telling {
        min-height: 60vh;
        padding: 10vh 5vw;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3vh;
        flex-wrap: wrap;
      }

      .story-telling img,
      .story-telling .video-playlist-container {
        max-width: 500px;
        width: 100%;
        height: auto;
        border-radius: 5px;
        object-fit: cover;
        object-position: center;
      }

      .story-telling h3 {
        font-size: 2.5rem;
        text-align: center;
        width: 100%;
        max-width: 600px;
      }

      .vertical-line {
        display: block;
        width: 2px;
        height: 200px;
        background-color: #444444;
      }

      .story-text {
        font-size: 2rem;
        width: 100%;
        max-width: 600px;
        text-align: center;
        padding: 2vh;
        opacity: 0;
        animation: fade linear forwards;
        animation-timeline: view();
        animation-range: 15% 40%;
      }

      .story-text.name-description {
        font-size: 1.2rem;
        margin-top: 3vh;
        text-align: justify;
        line-height: 1.8;
      }

      #story-1 {
        background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
          url(img/IMG10.jpg) no-repeat center 20% / cover;
      }

      #story-2 {
        background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
          url(img/IMG3.jpg) no-repeat 80% 20% / cover;
      }

      #story-3 {
        background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
          url(img/IMG7.jpg) no-repeat center 10% / cover;
      }

      /* ===========================
         GALLERIES
         =========================== */
      .galerie-title {
        font-size: 2rem;
        margin: 5vh 0;
        text-align: center;
        width: 100%;
        padding: 2vh;
        color: #ff00d0;
      }

      .galeries-phils {
        min-height: 60vh;
        width: 100%;
        display: flex;
        gap: 2vh;
        flex-wrap: wrap;
        justify-content: center;
        padding: 3vh 2vh;
      }

      .galerie-phils {
        border: solid #272727 1px;
        width: 300px;
        border-radius: 2vh;
        padding: 2vh;
        text-align: center;
      }

      .galerie-phils h3 {
        margin-top: 2vh;
        font-size: 1.2rem;
      }

      .google-map {
        height: 200px;
        width: 100%;
        display: flex;
        overflow: hidden;
        border-radius: 1vh;
        border: #444444 solid 1px;
      }

      .google-map iframe {
        width: 100%;
        height: 100%;
      }

      /* ===========================
         SHOWROOM
         =========================== */
      .showroom {
        min-height: 80vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 5vh;
        padding: 5vh 5vw;
        justify-content: center;
        align-items: center;
        background-color: #161616;
      }

      .showroom h4 {
        font-size: 2.5rem;
        text-align: center;
        max-width: 800px;
      }

      #agoe-showroom {
        width: 100%;
        max-width: 1000px;
      }

      /* ===========================
         COLLECTIONS CAROUSEL
         =========================== */
      #collection {
        padding: 10vh 2vh;
      }

      .wrap-carousel {
        width: 90vw;
        max-width: 1400px;
        position: relative;
        padding: 4vh 0;
      }

      .box-carousel {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        background-color: #0a0a0a;
        border: 2px solid #2b0022;
        padding: 4vh 2vh;
      }

      .row-carousel-inner {
        display: flex;
        transition: transform 0.5s ease-in-out;
      }

      .col-slide {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3vh;
        padding: 2vh;
      }

      .grid-items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2vh;
        width: 100%;
        max-width: 1200px;
      }

      .card-collection {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        height: 500px;
        transition: transform 0.3s ease;
        border: 1px solid #444444;
        background-color: #000;
      }

      .card-collection:hover {
        transform: scale(1.02);
        border-color: #ff00d0;
      }

      .card-collection img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        transition: transform 0.5s ease;
      }

      .card-collection:hover img {
        transform: scale(1.05);
      }

      /* Carousel Navigation */
      .btn-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 0, 208, 0.8);
        border: none;
        color: white;
        font-size: 2rem;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
      }

      .btn-nav:hover {
        background: rgba(255, 0, 208, 1);
        transform: translateY(-50%) scale(1.1);
      }

      .btn-prev {
        left: 20px;
      }

      .btn-next {
        right: 20px;
      }

      /* Carousel Dots */
      .row-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 3vh;
      }

      .dot-item {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #555555;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .dot-item.active {
        background: #ff00d0;
        width: 40px;
        border-radius: 6px;
      }

      /* ===========================
         CONTACT & FORMS
         =========================== */
      #join-us {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 5vh;
        padding: 10vh 5vw;
      }

      .join-us-content {
        flex: 1;
        min-width: 300px;
        max-width: 500px;
        display: flex;
        flex-direction: column;
        gap: 2vh;
      }

      #join-us h2 {
        width: 100%;
        text-align: left;
        margin: 0;
        padding: 0;
      }

      .form-container {
        flex: 1;
        min-width: 300px;
        max-width: 600px;
        width: 100%;
        height: auto;
        border: #6b0158 1px solid;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
      }

      .form-container form {
        display: flex;
        flex-direction: column;
        padding: 1vh;
        width: 100%;
        justify-content: center;
        align-items: center;
      }

      .form-container input {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 1.5vh;
        border-radius: 1vh;
        border: solid #555555 1px;
        margin: 1vh 0;
        width: 100%;
        background-color: #2b2b2b;
        color: rgb(255, 255, 255);
        transition: all ease-in-out 0.3s;
      }

      .form-container input:hover {
        background-color: #444444;
        border: solid 1px #707070;
      }

      .form-container input:focus {
        outline: none;
        border: solid 1px #ff00d0;
      }

      .text-area {
        min-height: 100px;
        resize: vertical;
      }

      .button.form {
        border: solid #6b0057 2px;
        padding: 1.5vh 3vh;
        width: 100%;
        border-radius: 1vh;
        background-color: #6b0057;
        color: rgb(255, 255, 255);
        transition: all ease-in-out 0.3s;
        cursor: pointer;
        font-size: 1rem;
      }

      .button.form:hover {
        color: white;
        border: solid 1px #cc00a7;
        background-color: #940079;
        box-shadow: 0 0 30px 2px rgba(255, 0, 208, 0.35);
        transform: translateY(-3px);
      }

      /* ===========================
         FOOTER
         =========================== */
      footer {
        width: 100vw;
        min-height: 200px;
        background-color: #000000;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #ffffff;
        border-top: #2b0022 2px solid;
        padding: 3vh 5vw;
        gap: 3vh;
        flex-wrap: wrap;
      }

      footer p {
        font-size: 0.8rem;
      }

      footer a {
        color: #ff00d0;
        text-decoration: none;
        transition: all 0.3s ease;
      }

      footer a:hover {
        text-decoration: underline;
        color: #ffffff;
      }

      .footer-links {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .footer-links ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        list-style: none;
      }

      footer ul li {
        margin: 0;
      }

      footer ul li:hover {
        transform: translateX(5px);
      }

      #signature {
        font-size: 0.8rem;
        color: #c2c2c2;
        max-width: 600px;
      }

      footer #signature h3 {
        color: #ff00d0;
        font-size: 1.2rem;
        margin-bottom: 1vh;
      }

      footer #signature h4 {
        color: #aaaaaa;
        font-size: 1rem;
        margin-bottom: 1vh;
      }

      footer #signature p {
        margin-top: 1vh;
        text-align: justify;
        line-height: 1.6;
      }

      footer img {
        height: 80px;
        width: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
      }

      footer img:hover {
        transform: scale(1.1);
      }

      /* ===========================
         ANIMATIONS
         =========================== */
      @keyframes objet-fade-in {
        0% {
          opacity: 0;
          transform: scale(0.95);
        }
        50%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }

      @keyframes fade {
        from {
          opacity: 0;
          filter: blur(10px);
          transform: translateY(100%);
        }
        to {
          opacity: 1;
          filter: blur(0px);
          transform: translateY(0%);
        }
      }

      /* ===========================
         RESPONSIVE
         =========================== */

      /* TABLETTE & MOBILE - 1400px */
      @media (max-width: 1400px) {
        nav {
          padding: 1vh 20px;
        }

        #nav-links {
          display: none;
        }

        #menu-burger {
          background-color: #00000000;
          box-shadow: #00000081 0px 0px 30px 1px;
          padding: 1vh;
          display: flex;
          flex-direction: column;
          gap: 1vh;
          border-radius: 5px;
          transition: all ease-in-out 0.3s;
          cursor: pointer;
        }

        #menu-burger span {
          display: block;
          height: 6px;
          width: 36px;
          background-color: white;
          border-radius: 1vh;
        }

        #menu-burger:hover {
          transform: scale(1.1);
        }

        .story-telling {
          flex-direction: column;
          padding: 5vh 2vh;
        }

        .vertical-line {
          display: none;
        }
      }

      /* TABLETTE - 1024px */
      @media (max-width: 1024px) {
        h1 {
          font-size: 36px;
        }

        h2,
        .ttl-main {
          font-size: 28px;
        }

        h3,
        .ttl-slide {
          font-size: 1.5rem;
        }

        /* Grid items - 2 colonnes sur tablette */
        .grid-items {
          grid-template-columns: repeat(2, 1fr);
        }

        .intro-text {
          min-width: 300px;
          width: 90%;
          margin: 0 2vh;
        }

        .showroom h4 {
          font-size: 2rem;
        }

        #prev,
        .btn-prev {
          left: 10px;
        }

        #next,
        .btn-next {
          right: 10px;
        }

        .story-text {
          font-size: 1.5rem;
        }
      }

      /* MOBILE - 768px */
      @media (max-width: 768px) {
        h1 {
          font-size: 28px;
        }

        h2,
        .ttl-main {
          font-size: 24px;
        }

        h3,
        .ttl-slide {
          font-size: 1.3rem;
        }

        nav {
          padding: 1vh 15px;
        }

        #logo {
          font-size: 18px;
          height: 50px;
        }

        /* Collections grid - 1 colonne sur mobile */
        .grid-items {
          grid-template-columns: 1fr;
        }

        .card-collection {
          height: 450px;
        }

        /* Carousel buttons */
        .carousel button,
        .btn-nav {
          width: 35px;
          height: 35px;
          font-size: 1.3rem;
        }

        #prev,
        .btn-prev {
          left: 5px;
        }

        #next,
        .btn-next {
          right: 5px;
        }

        .cta {
          flex-direction: column;
        }

        .cta button,
        .btn-cta {
          min-width: 100%;
          max-width: 300px;
        }

        .slide-item {
          flex-direction: column;
        }

        .item-image,
        .item-description {
          width: 100%;
        }

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

        .footer-links ul {
          align-items: center;
        }

        #signature {
          max-width: 90%;
          text-align: center;
        }

        #signature p {
          text-align: center;
        }
      }

      /* PETIT MOBILE - 640px */
      @media (max-width: 640px) {
        .intro-text {
          min-width: 250px;
          margin: 0 1vh;
          padding: 3vh;
        }

        #home {
          height: 70vh;
        }

        .card-collection {
          height: 400px;
        }

        .story-text {
          font-size: 1.2rem;
        }

        .galerie-title {
          font-size: 1.5rem;
        }

        .showroom h4 {
          font-size: 1.5rem;
        }
      }

      /* TRÈS PETIT MOBILE - 480px */
      @media (max-width: 480px) {
        h1 {
          font-size: 24px;
        }

        h2,
        .ttl-main {
          font-size: 20px;
        }

        .carousel button,
        .btn-nav {
          width: 30px;
          height: 30px;
          font-size: 1rem;
        }

        .card-collection {
          height: 350px;
        }

        .intro-text {
          padding: 2vh;
          min-width: 200px;
        }
      }