body {
    margin: 0;
    padding-top: 60px; 
    font-family: 'Arial', sans-serif;
    color: #FFFFFF;
    background-color: black;

    background-size: cover; /* Adjust the sizing to your preference */
    background-repeat: repeat-y; /* Prevent image from repeating */
    background-attachment: absolute; /* Optional: Keep the image fixed while scrolling */
    background-size: 40%; 
    background-position:0px 105px;
}

.videocontainer {
    width: 70vh; /* same as the video container */
    max-width: 100%; /* Do not exceed container width */
    margin: 40px auto; /* Center horizontally */

    padding: 5px;
    border: 0px solid lightgrey;
}

.video-container {
    position: relative;
    width: 70vh; /* 70% of viewport height */
    height: 70vh; /* 70% of viewport height */
    max-width: 100%; /* Do not exceed container width */

}


/* Unvisited link */
a:link {
    color: #006DB0;
    text-decoration: none; /* Remove underlines by default */
  }
  
  /* Visited link */
  a:visited {
    color: #006DB0;
    text-decoration: none; /* Remove underlines for visited links */
  }
  
  /* Mouse over link */
  a:hover {
    text-decoration: underline; /* Add underline on hover (optional) */
  }
  
  /* Selected link (clicked/focused) */
  a:active {
    color: white; /* White color for clicked links */
    text-decoration: none; /* Remove underlines for clicked links */
  }
  
header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    position: fixed; /* Fix the header at the top */
    top: 0; /* Align the top of the header with the top of the viewport */
    left: 0; /* Align the left of the header with the left of the viewport */
    background-color: #000; /* Set a background color to make the header stand out */
    z-index: 1000; /* Ensure the header stays on top of other elements */
}

.logo {
    max-height: 100px; /* Set the maximum height for the logo */
    width: auto;
    justify-content: flex-start; /* Align the badge to the right */
}

.chrome {
    max-height: 70px; /* Set the maximum height for the logo */
    margin-top: 15px;
}
.chrome2 {
    max-height: 70px; /* Set the maximum height for the logo */
}
.download {
    max-height: 100px; /* Set the maximum height for the logo */
    display: flex;
    justify-content: flex-end; /* Align the badge to the right */
}

.intro-section {
    text-align: center; /* Center-align the text */
    padding: 20px   /* Optional padding for spacing */
}

.intro-section h1 {
    font-size: 4em; /* Large text size for the header */
    margin-bottom: 0px;
    /* Additional styling as needed */
}

.intro-section h2 {
    font-size: 1.7em; /* Large text size for the header */
    /* Additional styling as needed */
    font-style: italic;
}


.content {
    display: flex;
    flex-direction: row; /* row layout for desktop */
}
.basic {
    display: flex; /* Enable flex layout */
    flex-direction: column; /* Arrange content in a column */
    align-items: center; /* Center items horizontally */
}
.image-row-mobile {
    /* Hide images in the left position on mobile */
    display: none;
}

.text-column-mobile {
    /* Hide images in the left position on mobile */
    display: none;
}

.image-column-desktop {
    width: 40%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center images horizontally */
    justify-content: flex-start; 
}

.image-column-desktop img {
    width: 80%;
    max-height: 500px;
    /* height: auto; */
    display: block;
    margin: 10px auto;
    cursor: pointer;
}

.image-column-desktop figure {
    text-align: center; /* Center-align the entire figure */
    margin: 10px auto; /* Spacing around each figure */
}

.text-column-universal .figcaption,
.image-column-desktop figcaption {
    margin-bottom: 5px; /* Space between caption and image */
    color: #FFFFFF; /* Caption text color */
    font-size: 0.8em; /* Smaller text for the caption */
    line-height: 1em;
}


.text-column-universal p {
    width: 100%; /* Narrower width for fewer characters per line */
    margin: 0px auto; /* Maintain the larger top and bottom margin */
    font-size: 1.2em; /* Adjust font size as needed */
    line-height: 1.2em; /* Increase line height for more lines per block */
    background: linear-gradient(270deg, rgb(0, 109, 176) 0%, rgba(0, 109, 176, .5) 100%); 
    border-radius: 0px;
    padding: 20px; /* Optional padding for better spacing */
    margin-bottom: 20px; /* Add margin between consecutive paragraphs (adjust as needed) */
    margin-top: 20px; 
    text-align: left;
}

.text-column-universal {
    width: 60%; /* Two-thirds of the page */
    display: flex; 
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Align items to the start vertically */
    padding: 20px; /* Optional padding for better spacing */
}

.text-column-basic  {
        width: 80%; /* Narrower width for fewer characters per line */
        margin: 30px auto; /* Maintain the larger top and bottom margin */
        font-size: 1.8em; /* Adjust font size as needed */
        line-height: 1.2em; /* Increase line height for more lines per block */
        background: linear-gradient(270deg, rgb(0, 109, 176) 0%, rgba(0, 109, 176, .5) 100%); 
        border-radius: 0px;
        padding: 20px; /* Optional padding for better spacing */
        margin-bottom: 20px; /* Add margin between consecutive paragraphs (adjust as needed) */
        margin-top: 20px; 
        text-align: left;
    }

.text-column-desktop p {
    width: 80%; /* Narrower width for fewer characters per line */
    margin: 40px auto; /* Maintain the larger top and bottom margin */
    font-size: 1.7em; /* Adjust font size as needed */
    line-height: 1.5em; /* Increase line height for more lines per block */
    padding: 10px;
    background: linear-gradient(270deg, rgb(0, 109, 176) 0%, rgba(0, 109, 176, .5) 100%); 
    border-radius: 0px;
    padding: 20px; /* Optional padding for better spacing */
    margin-bottom: 20px; /* Add margin between consecutive paragraphs (adjust as needed) */
    margin-top: 20px; 
}

.footer,
.outro-section {
    text-align: center; /* Center-align the text */
    margin: 0px 40px; /* Add some vertical space around the section */
    padding: 0px 0px;  /* Optional padding for spacing */
    justify-content: center; /* Align the badge to the right */
}

.outro-section h1 {
    font-size: 2em; /* Large text size for the header */
    /* Additional styling as needed */
}

.outro-section h2 {
    font-size: 1.7em; /* Large text size for the header */
    /* Additional styling as needed */
}

.download2 {
    max-height: 100px; /* Set the maximum height for the logo */
}

.social-media {
    text-align: center;
    margin: 30px 0;
}

.social-icon {
    margin: 0 10px;
    font-size: 24px;
    color: #006DB0;
    transition: color 0.3s ease-in-out;
} 

.social-icon:hover {
    color: #007dca;
}

.footer {
    margin-bottom: 20px; /* Adjust the value to set the desired margin size */
  }


.faq-section {
    width: 80%; /* Narrower width for fewer characters per line */
    margin: 0px auto; /* Maintain the larger top and bottom margin */
    font-size: 1.2em; /* Adjust font size as needed */
    line-height: 1.2em; /* Increase line height for more lines per block */
    background: linear-gradient(270deg, rgb(0, 109, 176) 0%, rgba(0, 109, 176, .5) 100%); 
    border-radius: 0px;
    padding: 20px; /* Optional padding for better spacing */
    margin-bottom: 20px; /* Add margin between consecutive paragraphs (adjust as needed) */
    margin-top: 20px; 
    text-align: left;
}

.faq-section h2 {
    text-align: left;
    margin-bottom: 20px;
}

.faq-item h3 {
    margin: 10px 0;
    text-align: left;
    margin-left: 10px;
}
.faq-item h3::before {
    content: "\2022 \00A0";  /* bullet and non-breaking space */
}

.faq-answer {
   
    margin-left: 15px;
    text-align: left;
}

.faq-question {
    margin-left: 10px;
    text-align: left;

}

/* Mobile styles */
@media screen and (max-width: 1024px) {

    body {
        background-size: cover; /* Adjust the sizing to your preference */
        background-repeat: repeat-y; /* Prevent image from repeating */
        background-attachment: absolute; /* Optional: Keep the image fixed while scrolling */
        background-size: 80%; 
        background-position:0px 100px;

    }
    .video-container {

        width: 70vh; /* 70% of viewport height */
        height: 70vh; /* 70% of viewport height */
        max-width: 100%; /* Do not exceed container width */
    
    }
    xheader {
        justify-content: space-between; /* Keep the logo and download icon at the ends */
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .xlogo {
        width: 200px; /* Adjust the width of the logo */
        max-width: 50%; /* Increase max-width for better visibility */
        height: auto; /* Maintain the aspect ratio */
        float: left; 
        justify-content: left;
    }
    
    .xdownload {
        width: 400px; /* Adjust the width of the download icon */
        max-width: 50%; /* Adjust max-width as needed */
        float: right; 
        height: auto;
        justify-content: right;
    }

    .intro-section {
        text-align: center; /* Center-align the text */
        margin: 0px 20px; /* Add some vertical space around the section */
        padding: 0px 20px;  /* Optional padding for spacing */
    }

    .intro-section h1 {
        font-size: 2em; /* Large text size for the header */
        /* Additional styling as needed */
    }

    .intro-section h2 {
        font-size: 1.5em; /* Large text size for the header */
        /* Additional styling as needed */
    }

    .content {
        display: flex; /* Enable flex layout */
        flex-direction: column; /* Arrange content in a column */
        align-items: center; /* Center items horizontally */
    }

    .faq-section,
    .text-column-mobile {
        width: 100%; /* Two-thirds of the page */
        font-size: 0.8em; /* Adjust font size as needed */
        line-height: 1.3em; /* Increase line height for more lines per block */
        display: flex; 
        flex-direction: column;
        align-items: center; /* Center items horizontally */
        justify-content: flex-start; /* Align items to the start vertically */
    }

    .faq-section,
    .text-column-mobile p {
        /*width: 100%; /* Narrower width for fewer characters per line */
        /*margin: 30px auto; /* Maintain the larger top and bottom margin */
        width: -webkit-fill-available;
        font-size: 1.8em; /* Adjust font size as needed */
        line-height: 1.2em; /* Increase line height for more lines per block */
        background: linear-gradient(270deg, rgb(0, 109, 176) 0%, rgba(0, 109, 176, .5) 100%); 
        border-radius: 0px;
        padding: 20px; /* Optional padding for better spacing */
        margin-bottom: 20px; /* Add margin between consecutive paragraphs (adjust as needed) */
        margin-top: 20px; 
        text-align: left;
    }

    .image-row-mobile {
        display: flex; /* Enable flex layout */
        flex-direction: row; /* Arrange images in a row */
        overflow-x: auto; /* Allow horizontal scrolling */
        overflow-y: hidden; /* Prevent vertical scrolling */
        width: 100%; /* Full width of the container */
        scroll-snap-type: x mandatory; /* Enable snap scrolling */
        scroll-padding: 0 20vw; /* Add horizontal padding for peek */
        position: relative;
    }

    .peek-left,
    .peek-right {
      flex: 0 0 20vw; /* Set the width of the peek elements */
      background-color: transparent; /* Set background color as needed */
    }

    .image-container {
        display: flex; /* Keep the images in a flex container */
        scroll-snap-type: x mandatory;
    }

    .responsive-figure {
        width: 90vw;
        max-width: 250px;
        flex: 0 0 auto;
        scroll-snap-align: center;
        display: flex; /* Add flex display */
        flex-direction: column; /* Stack caption and image vertically */
        align-items: center; /* Center content horizontally */
        justify-content: flex-start; /* Center content vertically */
        text-align: center;
    }

    .image-row-mobile figcaption {
        text-align: center;
        margin-bottom: 5px;
        color: #FFFFFF;
        font-size: 0.8em;
    }

    .image-row-mobile .responsive-image {
        max-width: 100%; /* Ensure the image fits within the container */
        max-height: 100%; /* Ensure the image fits within the container */
        display: block; /* Remove any default inline behavior */
    }



    .image-column-desktop {
        /* Hide images in the left position on mobile */
        display: none;
    }

    .text-column-desktop {
        /* Hide images in the left position on mobile */
        display: none;
    }
}

@media screen and (max-width: 500px) {
    header {
        padding: 0px;
    }

    .logo {
        max-height: 50px; /* Set the maximum height for the logo */
        width: auto;
        justify-content: flex-start; /* Align the badge to the right */
    }
    .chrome {
        max-height: 35px; /* Set the maximum height for the logo */
        margin-top: 7px;
    }
        
    .chrome2 {
        max-height: 60px; /* Set the maximum height for the logo */
    }
    .download2 {
        max-height: 90px; /* Set the maximum height for the logo */
    }    
    .download {
        max-height: 50px; /* Set the maximum height for the logo */
        display: flex;
        justify-content: flex-end; /* Align the badge to the right */
    }

}