/* Root Variables */
:root {
    --primary-color: #0E9294;
    --secondary-color: #085859;
    --text-color: #dbdbdb;
    --border-color: #ccc;
    --hover-filter: grayscale(100%) brightness(0.5);
    --transition-speed: 0.3s;
    --font-family: 'Poppins', sans-serif;
    /* Additional Variables */
    --background-color: #1a1a1a;
    --light-background: #2c2c2c;
    --extended-section-bg: #141414;
    --comparison-bg: #1f1f1f;
    --roi-bg: #1a1a1a;
    --cta-bg: #0E9294;
}

/* Feature Card Wrapper */
.feature-card-wrapper {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    /* Centers the card horizontally */
    padding: 40px;
    max-width: 1200px;
    /* Sets a maximum width */
    width: 100%;
    /* Allows the card to take full width up to max-width */
    background-color: var(--light-background);
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    text-align: center;
}

/* Alternate background for even-numbered cards */
.feature-card-wrapper:nth-child(even) {
    background-color: var(--background-color);
}

/* Image Section */
.feature-card.image-section {
    flex: 1 1 40%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-card.image-section img {
    max-width: 80%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-speed) ease;
}

.feature-card.image-section img:hover {
    transform: scale(1.05);
}

/* Info Section */
.feature-card.info-section {
    flex: 1 1 60%;
    padding: 20px;
}

.feature-title {
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 20px;
    position: relative;
    font-family: 'Poppins', sans-serif;
}

.detail-intro {
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 20px;
    position: relative;
    font-family: 'Poppins', sans-serif;
}

.feature-title::after {
    content: '';
    width: 60px;
    height: 5px;
    background-color: var(--primary-color);
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    border-radius: 2px;
}

.feature-description {
    font-size: 1.2rem;
    color: var(--text-color);
    line-height: 1.8;
    margin-bottom: 25px;
    font-family: 'Montserrat', sans-serif;
}

.feature-highlights {
    list-style-type: disc;
    padding-left: 20px;
    margin: 20px 0;
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
}

.feature-highlights li {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/* Ordered List Styling */
.feature-highlights {
    list-style-position: inside;
}

.feature-additional {
    font-size: 1.1rem;
    color: var(--text-color);
    line-height: 1.8;
    font-family: 'Montserrat', sans-serif;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .feature-card-wrapper {
        margin: 1rem auto;
        padding: 35px;
    }

    .feature-title {
        font-size: 2.3rem;
    }

    .detail-intro {
        font-size: 1.9rem;
    }

    .feature-description,
    .feature-additional,
    .feature-highlights li {
        font-size: 1.15rem;
    }
}

@media (max-width: 992px) {
    .feature-card-wrapper {
        flex-direction: column;
        padding: 30px 20px;
    }

    .feature-card.image-section,
    .feature-card.info-section {
        flex: 1 1 100%;
        padding: 10px;
    }

    .feature-title {
        font-size: 2rem;
    }

    .feature-description,
    .feature-additional,
    .feature-highlights li {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .feature-title {
        font-size: 1.85rem;
    }

    .detail-intro {
        font-size: 1.75rem;
    }

    .feature-description,
    .feature-additional,
    .feature-highlights li {
        font-size: 0.95rem;
    }

    .feature-card-wrapper {
        margin: 1rem auto;
        padding: 25px 15px;
    }
}

@media (max-width: 600px) {
    .feature-title {
        font-size: 1.75rem;
    }

    .feature-description,
    .feature-additional,
    .feature-highlights li {
        font-size: 0.95rem;
    }

    .feature-card.image-section img {
        max-width: 90%;
    }
}

@media (max-width: 576px) {
    .feature-title {
        font-size: 1.65rem;
    }

    .detail-intro {
        font-size: 1.6rem;
    }

    .feature-description,
    .feature-additional,
    .feature-highlights li {
        font-size: 0.9rem;
    }

    .feature-card-wrapper {
        margin: 1rem auto;
        padding: 20px 10px;
    }
}

@media (max-width: 480px) {
    .feature-title {
        font-size: 1.5rem;
    }

    .detail-intro {
        font-size: 1.5rem;
    }

    .feature-description,
    .feature-additional,
    .feature-highlights li {
        font-size: 0.85rem;
    }

    .feature-card-wrapper {
        margin: 1rem auto;
        padding: 15px 5px;
    }

    .feature-card.image-section img {
        max-width: 95%;
    }
}

@media (max-width: 375px) {
    .feature-title {
        font-size: 1.4rem;
    }

    .detail-intro {
        font-size: 1.4rem;
    }

    .feature-description,
    .feature-additional,
    .feature-highlights li {
        font-size: 0.8rem;
    }

    .feature-card-wrapper {
        margin: 1rem auto;
        padding: 10px 5px;
    }
}

/* Typography Enhancements */
.feature-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.detail-intro {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.feature-description,
.feature-additional,
.feature-highlights li {
    font-family: 'Montserrat', sans-serif;
}

/* Color Variables Application */
.feature-title {
    color: var(--text-color);
}

.feature-description,
.feature-additional,
.feature-highlights li {
    color: var(--text-color);
}

.feature-title::after {
    background-color: var(--primary-color);
}

/* =======================
   Why Choose AiDGENT Section
   ======================= */

/* Container for the Extended Feature Overview */
#extended-feature-overview {
    background-color: var(--extended-section-bg);
    padding: 80px 20px;
    text-align: center;
    color: var(--text-color);
}

/* Section Heading */
.extended-heading {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    position: relative;
}

.extended-heading::after {
    content: '';
    width: 80px;
    height: 5px;
    background-color: var(--secondary-color);
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Introductory Paragraph */
.extended-intro {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 60px;
    font-family: 'Montserrat', sans-serif;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1250px){
    /* Container for Takeaway Cards */
.extended-takeaways {

    flex-wrap: wrap;

}
}
/* Container for Takeaway Cards */
.extended-takeaways {
    display: flex;

    justify-content: center;
    gap: 30px;
}

/* Individual Takeaway Card */
.takeaway-item {
    border: 2px solid #05e4f7;
    background-color: var(--light-background);
    border-radius: 12px;
    padding: 30px 20px;
    width: 300px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}


.takeaway-item:hover {
    border: 2px solid #E5F6F7;
    box-shadow: 
        0px 0px 4px rgba(229, 246, 247, 0.904),
        0px 0px 8px rgba(0, 251, 255, 0.842),
        0px 0px 15px rgba(99, 221, 223, 0.911),
        0px 0px 25px rgba(31, 201, 204, 0.808),
        0px 0px 40px rgba(0, 189, 192, 0.575);
}

/* Icon within the Takeaway Card */
.takeaway-item .takeaway-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Title of the Takeaway */
.takeaway-item h3 {
    font-size: 1.75rem;
    color: var(--text-color);
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
}

/* Description of the Takeaway */
.takeaway-item p {
    font-size: 1.1rem;
    color: var(--text-color);
    line-height: 1.6;
    font-family: 'Montserrat', sans-serif;
}



.takeaway-item:hover .takeaway-icon {
    transform: scale(1.2);
    color: white;
}

/* Extended Conclusion Paragraph */
.extended-conclusion {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-top: 60px;
    font-family: 'Montserrat', sans-serif;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Design for Tablets */
@media (max-width: 992px) {
    .extended-takeaways {
        gap: 20px;
    }

    .takeaway-item {
        width: 45%;
    }
}

@media (max-width: 768px) {
    .extended-heading {
        font-size: 2.5rem;
    }

    .extended-intro {
        font-size: 1.2rem;
        margin-bottom: 40px;
    }

    .takeaway-item {
        width: 60%;
        padding: 25px 15px;
    }

    .takeaway-item h3 {
        font-size: 1.6rem;
    }

    .takeaway-item p {
        font-size: 1rem;
    }

    .takeaway-item .takeaway-icon {
        font-size: 2.2rem;
    }
}

@media (max-width: 600px) {
    .extended-heading {
        font-size: 2.5rem;
    }

    .extended-intro {
        font-size: 1.2rem;
        margin-bottom: 40px;
    }

    .takeaway-item {
        width: 90%;
        padding: 20px 15px;
    }

    .takeaway-item h3 {
        font-size: 1.5rem;
    }

    .takeaway-item p {
        font-size: 1rem;
    }

    .takeaway-item .takeaway-icon {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .extended-heading {
        font-size: 2.2rem;
    }

    .extended-intro {
        font-size: 1.1rem;
    }

    .takeaway-item {
        width: 100%;
        padding: 15px 10px;
    }

    .takeaway-item h3 {
        font-size: 1.4rem;
    }

    .takeaway-item p {
        font-size: 0.95rem;
    }

    .takeaway-item .takeaway-icon {
        font-size: 1.8rem;
    }
}

/* =======================
   Comparison Section
   ======================= */
#comparison-section {
    background-color: var(--comparison-bg);
    padding: 60px 20px;
    text-align: center;
}

.comparison-heading {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

.comparison-intro,
.comparison-conclusion {
    font-size: 1.5rem;
    color: var(--text-color);
    margin: 20px auto;
    max-width: 800px;
    font-family: 'Montserrat', sans-serif;
}

.comparison-intro {
    margin-bottom: 40px;
}

.comparison-conclusion {
    margin-top: 40px;
}

/* Optional: Add a comparison table or cards */
.comparison-table {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    border: 1px solid var(--border-color);
    padding: 15px;
    text-align: center;
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
}

.comparison-table th {
    background-color: var(--primary-color);
    color: #fff;
}

.comparison-table tr:nth-child(even) {
    background-color: var(--light-background);
}

/* Responsive Design for Comparison Section */
@media (max-width: 1200px) {
    .comparison-heading {
        font-size: 2.8rem;
    }

    .comparison-intro,
    .comparison-conclusion {
        font-size: 1.4rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px;
    }
}

@media (max-width: 992px) {
    .comparison-heading {
        font-size: 2.5rem;
    }

    .comparison-intro,
    .comparison-conclusion {
        font-size: 1.3rem;
    }

    .comparison-table {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .comparison-heading {
        font-size: 2.2rem;
    }

    .comparison-intro,
    .comparison-conclusion {
        font-size: 1.2rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px;
    }
}

@media (max-width: 600px) {
    .comparison-heading {
        font-size: 2rem;
    }

    .comparison-intro,
    .comparison-conclusion {
        font-size: 1.1rem;
    }

    .comparison-table {
        max-width: 100%;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .comparison-heading {
        font-size: 1.8rem;
    }

    .comparison-intro,
    .comparison-conclusion {
        font-size: 1rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 8px;
    }
}

@media (max-width: 375px) {
    .comparison-heading {
        font-size: 1.6rem;
    }

    .comparison-intro,
    .comparison-conclusion {
        font-size: 0.95rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 6px;
    }
}

/* =======================
   ROI Section
   ======================= */
#roi-section {
    padding: 60px 20px;
    text-align: center;
}

.roi-heading {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

.roi-intro {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 40px;
    font-family: 'Montserrat', sans-serif;
}

.roi-list {
    list-style-type: none;
    padding: 0;
    max-width: 1200px;
    margin: 0 auto 40px auto;
}

.roi-list li {
    background-color: var(--light-background);
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Montserrat', sans-serif;
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.roi-list li strong {
    color: var(--primary-color);
    margin-right: 5px;
    /* Adjust the value as needed for desired spacing */
    display: inline;
}

.roi-list li:hover {
    background-color: var(--background-color);
    transform: translateY(-3px);
}

.roi-summary {
    font-size: 1.2rem;
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    max-width: 800px;
    margin: 0 auto;
}

/* Responsive Design for ROI Section */
@media (max-width: 1200px) {
    .roi-heading {
        font-size: 2.8rem;
    }

    .roi-intro {
        font-size: 1.4rem;
    }

    .roi-list li {
        padding: 14px 18px;
    }

    .roi-summary {
        font-size: 1.1rem;
    }
}

@media (max-width: 992px) {
    .roi-heading {
        font-size: 2.5rem;
    }

    .roi-intro {
        font-size: 1.3rem;
    }

    .roi-list li {
        padding: 13px 16px;
    }

    .roi-summary {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .roi-heading {
        font-size: 2.3rem;
    }

    .roi-intro {
        font-size: 1.25rem;
    }

    .roi-list li {
        padding: 12px 14px;
    }

    .roi-summary {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .roi-heading {
        font-size: 2rem;
    }

    .roi-intro {
        font-size: 1.2rem;
    }

    .roi-list li {
        padding: 11px 13px;
        font-size: 0.95rem;
    }

    .roi-summary {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .roi-heading {
        font-size: 1.8rem;
    }

    .roi-intro {
        font-size: 1.1rem;
    }

    .roi-list li {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .roi-summary {
        font-size: 0.9rem;
    }
}

@media (max-width: 375px) {
    .roi-heading {
        font-size: 1.6rem;
    }

    .roi-intro {
        font-size: 1rem;
    }

    .roi-list li {
        padding: 9px 11px;
        font-size: 0.85rem;
    }

    .roi-summary {
        font-size: 0.85rem;
    }
}

/* Banner Section */
.banner-section {
    background-color: #010e19;
    padding: 40px 0;
    overflow: hidden;
}

.banner-header {
    text-align: center;
    margin-bottom: 30px;
}

.banner-header h2 {
    color: #05e4f7;
    font-size: 2.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

/* Scroller Container */
.banner-scroller {
    width: 100%;
    overflow: hidden;
}

/* Banner Cards Container */
.banner-cards {
    display: flex;
    /* Animation moves left by 50% (i.e. one group width) */
    animation: scroll 40s linear infinite;
}

/* Grouping the cards */
.banner-group {
    display: flex;
    padding: 2rem 0;
}

/* Individual Banner Card */
.banner-card {
    border: 2px solid #05e4f7;
    background-color: #03111a;
    border-radius: 12px;
    padding: 20px;
    width: 50rem;
    /* Adjust as needed */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin: 0 15px;
    /* Space between cards */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    cursor: pointer;
}

.banner-card:hover {
    border: 2px solid #E5F6F7;
    box-shadow:
        0px 0px 4px rgba(229, 246, 247, 0.904),
        0px 0px 8px rgba(0, 251, 255, 0.842),
        0px 0px 15px rgba(99, 221, 223, 0.911),
        0px 0px 25px rgba(31, 201, 204, 0.808),
        0px 0px 40px rgba(0, 189, 192, 0.575);
    transform: scale(1.05);
}

/* Card Title */
.banner-card h3 {
    font-size: 1.5rem;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    margin: 0;
}

/* Keyframes for seamless scrolling */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Translate left by exactly one group's width */
        transform: translateX(-50%);
    }
}