#slideshow {
    font-family: "Roboto",sans-serif;
    position: relative;
    overflow-x: hidden;
    width: 100%;
    height: 700px; /* Adjust based on the content */
    border: 1px solid;
    margin: 20px 0px;
    overflow-y: hidden;
}

#slideshow .slide {
    position: absolute;
    width: 100%;
    top: 0;
    left: 100%; /* Start offscreen */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 700px;
    background-color: #E1EFEE;
}

.slide { 
    font-size: 18px;
    color: #244654;
}

.slide h1 {
    font-size: 50px;
    font-family: "Roboto",sans-serif;
    font-weight: bold;
    color: #2A9D8F;
    line-height: 48px
}

#slideshow .slide.active {
    left: 0; /* Active slide positions in the view */
}

#slide1 {
    background-color: #ccf;
    overflow-y:hidden;
    background: url('/wp-content/plugins/gscw-module/images/bg_1_fatherAndDaughter.jpg');
    background-size: cover;
    background-position: left center;
}

#slide7 {
    background: url('/wp-content/plugins/gscw-module/images/bg_PCS-gradientmesh.jpg');
    background-size: cover;
}

#slide1 .moduleLogo {
    max-width: 120px;
}

#slide1 h1,#slide7 h1 {
    color: #244654;
}

#slide1 .content {
    position: absolute;
    left: 5%;
    width: 40%;
    background-color: #fff;
    text-align: left;
    padding: 50px;
    height: 100%;
    margin-top: 0px;
}

#slide1 #inlineImage {
    display: none;
}

.navbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #2c4552; /* Ensure this background color is only set once */
    color: #fff;
    padding: 10px 20px; /* Adds 20px padding to left and right */
    position: absolute;
    top: 0;
    align-items: center;
    font-size: 20px;
    box-sizing: border-box; /* Include padding in the total width and height */
    height: 70px;
}

.content {
    text-align: center;
    padding: 0px 5%;
    box-sizing: border-box; /* Include padding in the total width and height */
    margin-top: 80px;
}

button {
    cursor: pointer;
    padding: 10px 20px;
    background-color: #ea9e40;
    border: 0px;
    border-radius: 30px 30px;
    color: #fff;
    font-weight: bold;
}

.options-container {
    display: flex;
    justify-content: space-around; /* Adjust spacing as needed */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.option {
    flex-basis: 30%;
    text-align: center;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    justify-content: center;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
    height: 300px; /* Add a fixed height for consistency */
    box-sizing: border-box;
}

.optionImg {
    width: 100%;
    background-color: #fff;
    height: 70%; /* Adjusted height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.optionButton {
    width: 100%;
    height: 30%; /* Adjusted height */
    background-color: #F8F8F8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.options-container img {
    width: calc(80%);
    max-width: 200px;
    aspect-ratio: auto; /* Adjusted aspect ratio */
    cursor: pointer;
}

.optionImage {
    width: 100%; /* Full width of the container */
    aspect-ratio: 1 / 1; /* Maintain a 1:1 aspect ratio */
}

.optionContent {
    display: flex;
    width: 100%;
    gap: 20px;
}

.optionDescriptionContainer {
    order: 1;
    flex-basis: 50%;
    text-align: left;
}

.optionDescriptionContainer .optionDisclaimer, .topicDisclaimer {
    font-size: .8em;
    margin-top: 1em;
}

.optionDescriptionContainer .optionButtonBack {
    font-size: 1em;
    margin-left: 0px;
}
.optionDescriptionContainer button {
  margin-top: 20px;
}

.optionImageContainer {
    flex-basis: 50%;
    order: 2;
    
}

.optionImageContainer img {
    width: 100%;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
    background: #fff;
}

.navbar .nav-number {
    font-weight: bold;
    margin-right: 5px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: inline-block;
    line-height: 24px;
    text-align: center;
    border-radius: 20px;
    background-color: #49626F;
    color: #A5B8C3;
}

.navbar .nav-number.viewed {
    background-color: #2a9d8f;
    color: #fff;
}

.navbar .nav-list {
    margin: 20px 0px;
}

.navbar .nav-item {
    margin-right: 10px; /* Space between items */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    #slideshow {
        height: 1050px;  
        border: none;
        margin: 2em 0;
        overflow-y: hidden;
        background: #E1EFEE;
    }

    #slideshow .slide {
        height: 1050px;
        width: 100%;
        justify-content: flex-start;
    }
    
    #slide1 {
        overflow-y: hidden;
        background: #E1EFEE;
    }
    
    #slide1 .content {
        position: relative;
        width: 100vw;
        left: 0px;
        height: 100vh;
        background-color: #E1EFEE;
    }
    
    #slide1 h1, .slide h1 { 
        color: #2A9D8F;
        font-size: 36px;
    }
    
    #slide1 #inlineImage {
        display: inline-block;
    }

    .navbar {
        position: relative;
    }
    
    .nav-title {
        display: none;
    }
    
    .back { 
        order: 1;
    }
    
    .next, .restart { 
        order: 3;
    }
    
    .nav-list {
        order: 2;
    }
    
   .back, .next, .restart {
       width: 40px; /* Set width */
       height: 40px; /* Set height */
       border-radius: 50%; /* Make it round */
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 0; /* Hide the text */
       padding: 0; /* Remove padding for round shape */
   }
   
   .back::before {
       content: '\2190'; /* Unicode for left arrow */
       font-size: 24px;
   }
   .next::before {
       content: '\2192'; /* Unicode for right arrow */
       font-size: 24px;
   }
   .restart::before {
       content: '\21BB'; /* Unicode for restart icon */
       font-size: 24px;
   }
    
    .slide {
        display: grid;
    }
    

    .content {
        padding: 20px; /* Add padding for better spacing on mobile */
        text-align: left;
        margin-top: 0px;
    }

    .options-container {
        flex-direction: column; /* Stack options vertically on mobile */
    }

    .option {
        flex-basis: 100%;
        margin: 10px 0; /* Adjust margin for stacked options */
        flex-direction: row;
        aspect-ratio: auto;
        overflow: hidden;
        height: auto; /* Reset height for mobile */
    }
    
    .optionImg {
        flex-basis: 50%;
    }
    
    .optionButton {
        min-height: 120px;
        padding: 20px;
        box-sizing: border-box;
    }
    
    .options-container img {
        width: calc(80%);
        max-width: 100%;
        aspect-ratio: auto;
        cursor: pointer;
    }

    .optionContent {
        flex-direction: column; /* Stack content vertically */
    }

    .optionDescriptionContainer,
    .optionImageContainer {
        flex-basis: 100%; /* Full width on mobile */
        order: initial; /* Default order */
    }

    .optionImageContainer img {
      background: #fff;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 820px) and (orientation: portrait) {
    /* Your CSS rules for iPad in portrait mode */
    #slide1 {
        background-position:center;
    }
    #slide1 .content {
      width: 60%!important;
      left: 0%;
    }
}

@media only screen and (max-device-width: 1000px) and (orientation: landscape) {
    /* Rules for mobile devices in landscape mode */
    #slide1 {
        background-position:center;
    }
    #slide1 .content {
        width: 50%!important;
        left: 0%;
    }
}