/* Desktop: Keep the image static */
@media (min-width: 1024px) {

    .sub-page .container{ max-width: 1024px; margin: auto;}

    .mobile {
        display: none;
    }

    .ticker-wrapper {
        display: block;
        width: 100%;
        animation: none; /* Disable animation for larger screens */
    }

    .ticker-wrapper img {
        width: 100%;
    }
}

/* Tablet Portrait */
@media screen and (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
    .sub-page .container {
        max-width: 90%;
        margin: auto;
    }

    .ticker-wrapper {
        display: flex;
        width: 100%;
        animation: none; /* Disable animation for larger screens */
        height: 10vh;
        background: #752763;
        align-items: center;
        justify-content: center;
    }

    .ticker-wrapper img {
        width: 100%;
    }

    .ticker-mobile {
        display: none;
    }

    #home #media .container {
        margin-left: 5%;
        width: 60%;
    }

    #home #about-karen .col {
        margin-left: 35%;
        flex: 0 0 65%;
        max-width: 65%;
    }

    #clients.p-5 {
        padding: 10vw 4vw !important;
    }

    #clients .slideshow-container {
        display: none;
    }

    #clients .static-images {
        display: block;
    }

    #clients .static-images img {
        width: 100%;
        margin-bottom: 10px;
    }

    .carousel-slide .customer-name {
        margin: 0;
        font-weight: bold;
        font-size: 1.5vh;
    }

    .carousel-slide .text-small {
        font-size: 1.5vh;
    }

    .container {
        margin: 2vw;
    }
}

/* Default: Show carousel, hide static images */
.slideshow-container {
    display: block;
}

.static-images {
    display: none;
}

/* General Mobile & Tablet Styles */
@media (max-width: 1024px) {

  .sub-page #hero .container {
    position: absolute;
    bottom: 5vh;
    max-width: 90%; margin: auto;
  }

    .sub-page .container{ max-width: 90%; margin: auto;}

    #hero .container {
        text-align: left !important;
    }

    body.removeScroll {
        overflow: hidden;
    }

    .podcast-episode {
        margin-bottom: 30px;
    }

    .responsive-iframe-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .responsive-iframe-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {


    .sub-page #hero h1{font-size: clamp(1rem, 15vmin, 2rem); margin: 20vh 0 0 0; }
    .sub-page #hero h2{ font-weight: normal; }
    .sub-page h2{font-size: clamp(1rem, 11vmin, 2rem); font-weight: bold; }
    .sub-page h3{font-size: clamp(1rem, 7vmin, 2rem); margin-top: 3vh; margin-bottom: 1vh; font-weight: bold;}
    .sub-page h4{font-size: clamp(1rem, 6vmin, 2rem); margin-top: 1vh; margin-bottom: 1vh; font-weight: bold;}
    .sub-page h5{font-size: clamp(1rem, 4vmin, 2rem); margin-top: 1vh; margin-bottom: 1vh; font-weight: normal;}
    .sub-page .lead{ font-size: clamp(1rem, 5vmin, 2rem); font-weight: normal; }
    .sub-page .list-item{ padding-bottom: 8vh;}

    #speaking .container h3{ font-weight: normal; font-size: 3vh;}
    #speaking-keynote .container h3{ font-weight: normal; font-size: 3vh;}

    .btn{margin-top: 2vh;}
    .programmes{margin-top: 5vh ;}

    #home #clients.p-5 {
        padding: 10vw 4vw !important;
    }

    .slideshow-container {
        display: none;
    }

    .static-images {
        display: block;
    }

    .static-images img {
        width: 100%;
        margin-bottom: 10px;
    }

    #call-to-action-book-karen {
        height: 15vh;
    }

    #home #hero .overlay-content {
        width: 80%;
        padding-top: 20vh;
    }


    #featured {
        overflow: hidden;
        position: relative;
        width: 100%;
        background: #752763;
        height: 100px;
    }

    .ticker-wrapper {
        display: flex;
        width: 300%; /* Twice the width to allow seamless looping */
        animation: ticker-scroll 10s linear infinite;
    }

    .ticker-wrapper img {
        width: 300vw; /* Full viewport width */
        height: auto; /* Maintain aspect ratio */
        max-height: 100%; /* Ensure it fits within container */
        flex-shrink: 0; /* Prevents images from shrinking */
    }

    @keyframes ticker-scroll {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }


    .desktop {
        display: none;
    }

    .container .mobile {
        display: block;
    }

    .carousel {
        position: relative;
        width: 80vw;
        height: 70vh;
        margin: auto;
    }

    .footer-menu {
        margin-bottom: 4vh;
    }

    footer ul li {
        display: block;
        margin: 0 0px;
    }

    .list-inline {
        display: flex;
        flex-direction: column;
    }

    .list-inline-item:first-child {
        order: 2; /* Move the first item to the last */
    }

    .list-inline-item:nth-child(2),
    .list-inline-item:nth-child(3) {
        order: 1; /* Keep the other items at the top */
    }

    .copyright {
        margin-top: 2vh;
        opacity: 0.8;
    }

    .container {
        width: 90%;
    }
}
