#fw-section-custom-html-c60d92bd-87be-448e-a185-58f85a3c002a {

.hero h1 {  color: #fff; }
}





#fw-section-hero-8b6aaade-f226-4809-92e1-dd95b864fa84 {

.button--secondary {
    color: var(--color-on-background);
    background-color: #9dc8ea;
}
.button--expand {
    display: block;
    width: 100%;
}

@media (max-width: 500px) {
    .button--expand {
        width: 50%;
        margin-left: 50%;  
    }
}
}
#fw-section-hero-bb1627f3-30f5-4099-9b1c-014dffb62dd0 {

.button--secondary {
    color: var(--color-on-background);
    background-color: #9dc8ea;
}
.button--expand {
    display: block;
    width: 100%;
}

@media (max-width: 500px) {
    .button--expand {
        width: 50%;
        margin-right: 50%;  
    }
}
}






#fw-section-hero-561ec0e0-8765-4daf-9250-92634b013a74 {

.button--secondary {
    color: var(--color-on-background);
    background-color: #9dc8ea;
}
.button--expand {
    display: block;
    width: 100%;
}

@media (max-width: 500px) {
    .button--expand {
        width: 50%;
        margin-left: 50%;  
    }
}
}
#fw-section-hero-949457a5-e1df-4c60-bf3d-0edf14ecbff9 {

.button--secondary {
    color: var(--color-on-background);
    background-color: #9dc8ea;
}
.button--expand {
    display: block;
    width: 100%;
}

@media (max-width: 500px) {
    .button--expand {
        width: 50%;
        margin-right: 50%;  
    }
}
}






#fw-section-hero-242eadf2-7e6e-40fd-af2f-e19006d66718 {

.button--secondary {
    color: var(--color-on-background);
    background-color: #9dc8ea;
}
.button--expand {
    display: block;
    width: 100%;
}

@media (max-width: 500px) {
    .button--expand {
        width: 50%;
        margin-left: 50%;  
    }
}
}
#fw-section-hero-3b0c8fb1-b9e1-43a2-bfcb-2e0e71ead68f {

.button--secondary {
    color: var(--color-on-background);
    background-color: #9dc8ea;
}
.button--expand {
    display: block;
    width: 100%;
}

@media (max-width: 500px) {
    .button--expand {
        width: 50%;
        margin-right: 50%;  
    }
}
}


#fw-section-custom-html-014460cb-d837-4735-a158-7f1afd7a4d40 {

body {
      font-family: 'Arial', sans-serif;
      background: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .carousel {
      display: flex;
      width: 100%;
      max-width: 1600px;
      overflow: hidden;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .carousel-item {
      position: relative;
      flex: 1;
      transition: flex 0.5s ease-in-out;
      overflow: hidden;
    }

    .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease-in-out;
    }

    .carousel-item:hover {
      flex: 2;
    }

    .carousel-item:hover img {
      transform: scale(1.1);
    }

    .carousel-item .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .carousel-item:hover .overlay {
      opacity: 1;
    }

    .carousel-item .text {
      color: white;
      font-size: 2.5rem;
      font-weight: bold;
      text-transform: uppercase;
      text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
      transition: color 0.3s ease-in-out;
    }

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

    .carousel-item .text a:hover {
      color: #9dc8ea;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .carousel {
        flex-direction: column;
        height: 200vh;
      }

      .carousel-item {
        flex: 1;
      }

      .carousel-item:hover {
        flex: 1.6;
      }

      .carousel-item .text {
        font-size: 2.5rem;
      }
    }
}