#research-overview-section,
#feature-exploration-section {
    padding: 8rem 0rem;
    text-align: center;
}


#testimonial-section{
    padding-bottom: 4rem;
    text-align: center;
}

#product-section{
    margin:0 auto;
    text-align:center;
}

#subscribe-container{
    align-items: center;
    text-align: center;
}


#dashboard-photo{
    max-width: 60%;
    height: auto;
    opacity: 1;
}

#research-overview-section{
    margin: 0 auto;

}

#product-section p, h2{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

#product-section h2,
#feature-exploration-section h3,
#research-overview-section h3{
    margin-bottom:2rem;
    color: rgb(34, 33, 81);

}

#research-overview-section h2,
#research-overview-section h1,
#feature-exploration-section h2 {
    font-size: 3rem;
    font-weight:600;
    line-height: 105%;
    position: relative;
    z-index: 1;
    color: rgb(34, 33, 81);
    margin-bottom: 2rem;
    margin-top: 5rem;
}

#product-section p,
#research-overview-section p,
#feature-exploration-section .feature p {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: rgb(104, 106, 158);
}


.testimonial-highlight {
    max-width: 80%;
    margin: 0 auto;
    border-radius: 10px;
    padding: 2rem;
    margin-top: 3rem;
    position: relative;
    background-color: #a9aaab;
}

.testimonial-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1rem;
}

blockquote {
    font-style: italic;
    color: #555;
}

.testimonial-author {
    font-weight: bold;
    color: #333;
    margin-top: 1rem;
}

.feature-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.feature {
    margin: 1rem;
    max-width: 400px;
    text-align: center; /* Center the content inside the feature */
    display: flex; /* Use flexbox to layout the content */
    flex-direction: column; /* Stack the items vertically */
    align-items: center; /* Align items in the center */
}

/* Apply styles to individual images if necessary */
#network-photo,
#hand-photo,
#meeting-photo {
    border-radius: 10px; /* Optional: if you want rounded corners */
}


/* Image specific styles */
.feature img {
    max-width: 100%; /* Make sure images are not wider than their container */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 1rem; /* Add some space below the image */
}

.feature h3 {
    color: #005f73;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

#research-overview-section {
    display: flex; /* This will enable flexbox */
    justify-content: center; /* This will center the content */
    align-items: center; /* This will vertically align the content */
    text-align: left; /* Assuming you want the text aligned to the left within its div */
}

#research-left-img,
#research-right-img {
    flex: 1; /* This will allow the images to take up equal space on the sides */
}

#research-text {
    align-items: center;
    text-align: center;
    max-width: 600px; /* Adjust the max-width as needed */
    margin: 0 20px; /* This gives space on the left and right inside the flex item */
    flex: 0 0 auto; /* This will prevent the text box from growing or shrinking */
}

#research-right-img img {
    transform: scaleX(-1); /* Flips the image horizontally */
}

/* Ensure the images inside the divs do not stretch */
#research-left-img img,
#research-right-img img {
    width: 100%;
    height: auto;
    display: block; /* Remove any extra space below the image */
}

/* Ensure the announcement banner sticks to the bottom of the nav */
nav {
    grid-template-rows: auto 0px; /* Adjust 40px to match the height of your announcement banner */
}


/* Responsive adjustments for mobile */
@media screen and (max-width: 800px) {
    #research-overview-section {
        flex-direction: column; /* Stack the items vertically on small screens */
    }

    #research-left-img,
    #research-right-img {
        display: none; /* Hide the images on small screens */
    }

    #research-text {
        margin: 0; /* Remove the margin on small screens */
    }
}


/* Additional responsive design styles as needed */

@media screen and (max-width: 798px) {
    #dashboard-photo {
        max-width: 80%; /* Shrinks to 80% of its container */
    }
}

@media screen and (max-width: 800px) {
    #dashboard-photo {
        display: none; /* Completely hides the image */
    }
}