/* TESTING */

      /* Outer wrapper to manage overflow and positioning */
      .slideshow-wrapper {
        position: relative;
        max-width: 1440px;
        margin: auto;
        /* overflow: visible; */
    }

    /* Set a fixed height for the container */
    .slideshow-container {
        position: relative;
        background-color: #F0F5F9;
        height: 320px;
        overflow: hidden;
        border-radius: 8px;
    }

    /* Slides */
    .mySlides {
        display: none;
        text-align: left;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }



    #h4-slides {
        font-weight: 500;
        font-size: 30px;

        margin: 0 0 24px 0;
    }

    /* Next & previous buttons */
    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        padding: 10px;
        width:48px;
        height:48px;
        border-radius:50%;
        color: #272D3A;
        background-color:#F0F5F9;
        user-select: none;
        transform: translateY(-50%);
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .prev {
        left: -60px;
    }

    .next {
        right: -60px;

    }

    /* The dot/bullet/indicator container */
    .dot-container {
        text-align: center;
        padding: 16px;
        background-color: #FFFFFF;
        max-width: 1440px;
        margin: auto;
    }

    /* The dots/bullets/indicators */
    .dot {
        cursor: pointer;
        height: 12px;
        width: 12px;
        margin: 0 8px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }


    .active-slide, .dot:hover {
        background-color: #717171;
    }

    .add-on {
        color: #1075FA;
        line-height: 28px;
        margin: 0 0 12px 0;
    }

    .text-addons {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        line-height: 24px;
        font-size: 16px;
        padding: 40px 40px 30px 40px;
    }

    .p-slides {
        margin-bottom: 24px;
    }

    .slides-img {
        width: 345px;
        object-fit: scale-down;
    }

    .slides-image {
        display: flex;
        align-items: center;
        margin-bottom: 0px;
        height: 100%;
    }
    /* Testing  PW-751*/
    .new-slideshow-container {
        position:relative;
        background-color: #005EB8;
        /* height: 300px; */
        border-radius: 8px;
        color:#FFFFFF;  
        margin: 0 auto 32px;
        padding-inline: 20px;
        max-width: 1230px;
    }
    .new_mySlides {
        display:flex;
        gap:16px;
        text-align: left;
        /* position: absolute; */
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    #new-h4-slides {
        font-weight: 500;
        font-size: 30px;
        margin: 0 0 24px 0;
    } 
    .new-add-on {
        line-height: 28px;
        margin: 0 0 12px 0;
    }

    .new-text-addons {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        line-height: 24px;
        font-size: 16px;
        padding: 40px 40px 30px 40px;
    }

    .new-p-slides {
        margin-bottom: 24px;
    }
    .new-note-slides {
        margin-bottom:16px;
    }

    .new-slides-img {
        width: 345px;
        height:300px;
        object-fit: scale-down;
        padding:30px;
    }

    .new-slides-image {
        display: flex;
        align-items: center;
        margin-bottom: 0px;
        height: 100%;
    }
  
    @media screen and (max-width: 1107px) and (min-width:320px)  {
        .new-slideshow-container {
            padding-inline:4px;
        }
        #new-h4-slides{
            line-height:1.2;
        }
        .new_mySlides {
            flex-direction: column;
            align-items: center;
            text-align: left;
            padding:0;
            position:relative;
            gap:0px;
        }
        .new-slideshow-container{
            min-height:500px;
            height:auto;
        }
        .new-slides-image {
            min-height:auto;
        }
        .new-text-addons{
            padding:20px 12px 0 12px;
        }
        .new-slides-img {
            width: 270px;
            object-fit: scale-down;
            padding:0;
        }

        .new_mySlides > div {
            margin-right: 0;
            /* min-height:244.11px */
        }

        .new-slides-img {
            margin:0 auto;
            width:270px;
        }
        .new-image-desktop{
            display:none;
        }
        .new-image-mobile{
            display:block;
        }
        #new-h4-slides {
            margin:0 0 16px 0;
        }
        .new-p-slides {
            margin-bottom:16px;
        }

    }

/* End Test PW-751 */

    /* Media query for smaller screens */
    @media screen and (max-width: 1400px) {
        .prev, .next {
            display: none; /* Hide buttons on small screens */
        }
    }
    @media screen and (max-width: 950px) and (min-width:850px) {
        .slideshow-container {
           height:350px;
        }
    }

    @media screen and (max-width: 850px) {
        .mySlides {
            flex-direction: column;
            align-items: center;
            text-align: left;
            padding:0;
            position:relative;
        }
        .slideshow-container{
            min-height:500px;
            height:auto;
        }
        .slides-image {
            min-height:auto;
        }
        .text-addons{
            padding:20px 12px;
        }

        .mySlides > div {
            margin-right: 0;
            /* min-height:244.11px */
        }

        .slides-img {
            margin:0 auto;
            width:360px;
            height:258px
        }
        .image-desktop{
            display:none;
        }
        .image-mobile{
            display:block;
        }
        #h4-slides {
            margin:0 0 16px 0;
        }
        .p-slides {
            margin-bottom:16px;
        }

    }
    @media screen and (max-width: 500px) {
        .slideshow-container {
            min-height:530px;
        }
        .p-slides {
            min-height:120px;
        }

    }

    @media screen and (max-width: 401px) {
        .p-slides {
            min-height:144px;
        }
    }
    @media screen and (max-width:353px){
        .p-slides {
            min-height:168px;
        }
    }