/* Base Styles */

/* Section Styling */
#about,
#about_bottom {
    background-color: #031B1B;
    /* Dark background */
    color: #C9FEFF;
    /* Light teal for text */

    /* Padding around the section */
    margin: 0 auto;
    /* Center the section */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Align to top for better layout */
}

/* Flexbox Layout */
.about-layout,
.about-layout_bottom {
    display: flex;
    width: 100%;
}

/* Left and Right Split */
.about-left,
.about-right,
.about-left_bottom,
.about-right_bottom {
    padding: 40px;
}

/* Make the right side sticky */
.about-left {
    position: sticky;
    top: 30%;
    bottom: 20px;
    align-self: flex-start;
}

.about-right_bottom {
    position: sticky;
    top: 20px;
    /* Adjust as needed */
    align-self: flex-start;
}

/* Static Content (Left Side) */
.about-static-content {
    color: #C9FEFF;
    /* Ensure the text color matches your theme */
    font-family: 'Montserrat', sans-serif;
    line-height: 1.8;
    /* Adjust for better readability */
}

/* Heading Styling */
.about-static-content h1,
.about-content_bottom h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5em;
    color: #C9FEFF;
    /* Light teal color for heading */
    margin-bottom: 20px;
}

/* Version Cards Wrapper */
.version-card-wrapper,
.version-card-wrapper_bottom {
    position: relative;
    margin: 8em 0;
    /* Space between card sets */
    padding-top: 20px;
}

.version-card-wrapper_bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.version-card-wrapper {
    width: 800px;
}
/* Static Image Card */
.version-card.case-manager-image,
.version-card.basic-image,
.version-card.plus-image,
.version-card.premium-image,
.version-card_bottom.image {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    overflow: hidden;
    /* Ensures the image fits neatly */
    box-shadow: 0 0 10px rgba(201, 254, 255, 0.3);
    /* Light teal glow */
}


/* Ensure images fill the container and remove any gaps */
.version-card img,
.version-card_bottom.image img {
    display: block;
    /* Remove the gap below the image */
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Ensures the image covers the container without distortion */
}

/* Overlapped Info Card */
.version-card.case-manager-info,
.version-card.basic-info,
.version-card.plus-info,
.version-card.premium-info,
.version-card_bottom.info {
    position: absolute;
    bottom: 0;
    /* Positioned at the bottom */
    right: 0;
    /* Positioned to the right */
    width: 50%;
    /* Adjust the width as needed */
    padding: 20px;
    background-color: #031B1B;
    /* Match the dark background */
    color: #C9FEFF;
    /* Light teal text */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(201, 254, 255, 0.3);
    /* Light teal glow */
    z-index: 2;
    /* On top of the image card */
    transform: translate(10%, 10%);
    /* Offset for a more stylish look */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transition for hover effect */
}

.version-card_bottom.info {
    position: relative;
    width: 100%;
    transform: none;
    box-shadow: none;
    margin-top: 15px;
}

/* Hover Effect for Overlapped Info Card */
.version-card.case-manager-info:hover,
.version-card.basic-info:hover,
.version-card.plus-info:hover,
.version-card.premium-info:hover,
.version-card_bottom.info:hover {
    transform: translate(12%, 12%);
    /* Slightly more offset on hover */
    box-shadow: 0 0 20px rgba(201, 254, 255, 0.5);
    /* Larger glow on hover */
}

/* Adjust Hover Effects for Bottom Info Cards */
.version-card_bottom.info:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(201, 254, 255, 0.5);
}

/* Card Content Styling */
.version-card h2,
.version-card_bottom.info h2 {
    color: #0E9294;
    /* Match your brand color */
}

.version-card p,
.version-card_bottom.info p {
    margin-bottom: 10px;
}

.version-card .btn,
.btn_bottom {
    color: #fff;
    background-color: #0E9294;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.version-card .btn:hover,
.btn_bottom:hover {
    background-color: #085859;
}

/* Testimonials */
.testimonials blockquote {
    margin: 20px 0;
    padding-left: 20px;
    border-left: 4px solid #0E9294;
    font-style: italic;
}

.testimonials footer {
    margin-top: 10px;
    font-weight: bold;
    color: #0E9294;
}

/* Buttons for Bottom Section */
.btn_bottom {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0E9294;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn_bottom:hover {
    background-color: #085859;
}

/* Responsive Design */

/* Extra Large Devices (Large Desktops, 1200px and above) */
@media (min-width: 1201px) {



    .about-layout,
    .about-layout_bottom {
        gap: 60px;
    }

    .about-left,
    .about-right,
    .about-left_bottom,
    .about-right_bottom {
        width: 40%;
    }

    .about-static-content h1,
    .about-content_bottom h1 {
        font-size: 4em;
    }
}

/* Media Query for Viewports Between 1024px and 1400px */
@media (min-width: 1024px) and (max-width: 1440px) {
    

    /* Adjust the About-Right Container */
    .about-right,
    .about-right_bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3em;
        /* Adjust gap as needed */
    }

    /* Adjust the Version Card Wrappers */
    .version-card-wrapper,
    .version-card-wrapper_bottom {
        width: 700px;
        /* Reduce width to prevent overflow */
        margin-top: 2em;
        margin-bottom: 2em;
        margin-right: -12em;
        /* Reduce bottom margin */
    }

}

/* Large Devices (Desktops, 1024px and below) */
@media (max-width: 1200px) and (min-width: 1025px) {



    .about-layout,
    .about-layout_bottom {
        gap: 50px;
    }

    .about-left,
    .about-right,
    .about-left_bottom,
    .about-right_bottom {
        width: 43%;
    }

    .about-static-content h1,
    .about-content_bottom h1 {
        font-size: 3.8em;
    }
}

/* Medium Devices (Tablets, 1024px and below) */
@media (max-width: 1024px) {

    .about-layout,
    .about-layout_bottom {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .about-left,
    .about-right,
    .about-left_bottom,
    .about-right_bottom {
        width: 100%;
        padding: 10px;
    }

    /* Disable sticky on smaller screens */
    .about-left {
        position: relative;
        top: 0;
        bottom: 0;
        align-self: center;
    }

    .about-right_bottom {
        position: static;
    }

    .version-card-wrapper,
    .version-card-wrapper_bottom {
        margin-bottom: 20px;
        width: 100%;
        /* Ensure the cards take up full width */
    }

    .version-card.case-manager-info,
    .version-card.basic-info,
    .version-card.plus-info,
    .version-card.premium-info {
        position: relative;
        transform: none;
        width: 100%;
        /* Ensure the info card is full width */
        left: 0;
        bottom: 0;
        right: 0;
        padding: 20px;
        box-shadow: none;
        /* Remove shadow for a simpler look */
    }

    .version-card_bottom.info {
        width: 100%;
        margin-top: 20px;
    }

    .version-card img,
    .version-card_bottom.image img {
        height: 250px;
        /* Standardize image height on smaller screens */
    }

    .need-help img {
        object-position: center bottom;
    }

    .about-static-content h1,
    .about-content_bottom h1 {
        font-size: 2.5em;
        /* Reduce font size for smaller screens */
        text-align: center;
    }
}

/* Small Devices (Large Phones, 768px and below) */
@media (max-width: 768px) {
    

    .about-layout,
    .about-layout_bottom {
        flex-direction: column;
    }

    .about-left,
    .about-right,
    .about-left_bottom,
    .about-right_bottom {
        width: 100%;
        padding: 10px;
    }

    .version-card-wrapper,
    .version-card-wrapper_bottom {
        margin-bottom: 20px;
    }

    /* Ensure images retain quality and size properly */
    .version-card img,
    .version-card_bottom.image img {
        width: 100%;
        height: auto;
        min-width: 300px;
        min-height: 300px;
        object-fit: cover;
        /* Ensures the image covers the container without distortion */
    }

    /* Ensure all cards are the same size and remove hover effects */
    .version-card.case-manager-info,
    .version-card.basic-info,
    .version-card.plus-info,
    .version-card.premium-info,
    .version-card_bottom.info {
        position: relative;
        transform: none;
        width: 100%;
        left: 0;
        bottom: 0;
        right: 0;
        margin-top: 20px;
        /* Increase margin between image and description */
        box-shadow: none;
        /* Remove hover effect shadow */
    }

    .version-card.case-manager-info:hover,
    .version-card.basic-info:hover,
    .version-card.plus-info:hover,
    .version-card.premium-info:hover,
    .version-card_bottom.info:hover {
        transform: none;
        /* Remove hover effect transform */
        box-shadow: none;
        /* Remove hover effect shadow */
    }

    /* Adjust image height for bottom section */
    .version-card_bottom.image img {
        height: 250px;
    }

    .about-content_bottom h1 {
        font-size: 2em;
    }
}

/* Extra Small Devices (Phones, 576px and below) */
@media (max-width: 576px) {



    .about-layout,
    .about-layout_bottom {
        flex-direction: column;
    }

    .about-left,
    .about-right,
    .about-left_bottom,
    .about-right_bottom {
        width: 100%;
        padding: 5px;
    }

    .version-card-wrapper,
    .version-card-wrapper_bottom {
        margin-bottom: 15px;
    }

    /* Adjust image size for small screens */
    .version-card img,
    .version-card_bottom.image img {
        width: 100%;
        height: auto;
        min-width: 250px;
        min-height: 250px;
        object-fit: cover;
        /* Ensures the image covers the container without distortion */
    }

    /* Maintain card size and spacing */
    .version-card.case-manager-info,
    .version-card.basic-info,
    .version-card.plus-info,
    .version-card.premium-info,
    .version-card_bottom.info {
        position: relative;
        transform: none;
        width: 100%;
        left: 0;
        bottom: 0;
        right: 0;
        margin-top: 15px;
        /* Increase margin between image and description */
        box-shadow: none;
        /* Remove hover effect shadow */
    }

    .version-card_bottom.info {
        margin-top: 15px;
    }

    .version-card_bottom.info:hover {
        transform: none;
        /* Remove hover effect transform */
        box-shadow: none;
        /* Remove hover effect shadow */
    }

    .about-content_bottom h1 {
        font-size: 2em;
    }

    .testimonials blockquote {
        padding-left: 15px;
    }

    .version-card_bottom.image img {
        height: 200px;
    }
}

/* Additional Breakpoints */

/* Ultra Small Devices (Very Small Phones, 400px and below) */
@media (max-width: 400px) {

    .about-static-content h1,
    .about-content_bottom h1 {
        font-size: 1.8em;
    }

    .version-card img,
    .version-card_bottom.image img {
        min-width: 200px;
        min-height: 200px;
    }

    .btn_bottom,
    .version-card .btn {
        padding: 8px 16px;
        font-size: 0.9em;
    }

    .testimonials blockquote {
        padding-left: 10px;
    }
}