.cursos-hero {
    background: linear-gradient(90deg, #192A5F 0%, #1560c6 100%);
    background-color: #1a5bc4;
    /* Fallback */
    background: url('../images/cursos/background-section-one-courses.png') right center no-repeat, linear-gradient(90deg, #192A5F 0%, #1560c6 100%);
    color: white;
    padding: 120px 0 80px 0;
    /* Adjust for navbar spacing */
    position: relative;
    overflow: hidden;
}

/* Background graphic/lines if I can simulate, or just keep clean. 
   The design has some faint lines on the right. */

.ch-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.ch-text {
    max-width: 600px;
    z-index: 2;
}

.academy-logo {
    margin-bottom: 30px;
}

.academy-logo img {
    height: 80px;
    /* Adjust as needed */
    width: auto;
}

.ch-text h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 120%;
    margin-bottom: 25px;
}

.ch-text h1 strong {

    font-weight: 800;
}

.hero-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 150%;
    margin-bottom: 25px;
    opacity: 0.9;
}

.hero-subdesc {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 40px;
    opacity: 0.8;
}

.btn-hero-cursos {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    color: white;
    padding: 18px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;


    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-hero-cursos:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-hero-cursos img {
    width: 20px;
    height: 20px;
}

.ch-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    z-index: 2;
}

.ch-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    /* Reference img shows rounded corners on the photo */
}


/* Learning Section */
.learning-section {
    background-color: white;
    padding: 100px 0;
}

.learning-content {
    display: flex;
    align-items: flex-start;
    /* Align top for columns */
    justify-content: center;
    gap: 80px;
}

.learning-left-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* align-items: flex-start;  maybe keep left align or center? Design seems left centered block? Title left aligned to image. */
    max-width: 600px;
}

.learning-right-col {
    flex: 1;
    max-width: 600px;
    padding-top: 20px;
    /* Align slightly with the image top or title? Title is big. Let's see. 
                          The image shows the list starting roughly aligned with the top of the IMAGE, not title. 
                          Title is above image.
                          So list might need some top margin to align with image if desired, or just top align with column.
                       */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* If we want it centered vertically relative to the whole left block? 
                                Actually, existing design: Title -> Image. Right: List.
                                List seems vertically centered to the whole Left Block (Title + Image)? 
                                Or aligned with the Image? 
                                The print shows List is roughly centered vertically against the Title+Image combo, 
                                but maybe slightly downwards. 
                                Let's stick to flex-start or center. Center looks safe. */
}

/* Adjust alignment: The user said "Title stays above image, on left side". */

.learning-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 110%;
    margin-bottom: 30px;
    /* Space between title and image */
    text-align: left;

    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.learning-title .blue-light {
    font-weight: 400;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.learning-image {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.learning-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}


.learning-cards {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.learn-card {
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    border-radius: 8px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
    transition: transform 0.2s;
    width: 100%;
}

.learn-card:hover {
    transform: translateX(5px);
}

.learn-icon {
    background-color: white;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.learn-icon img {
    width: 18px;
    height: 18px;
}

.learn-text {
    font-family: 'Poppins', sans-serif;


    font-weight: 500;
    font-size: 16px;
    line-height: 120%;
}



.audience-section {
    background: url('../images/cursos/background-section-three-courses.png') center center no-repeat, linear-gradient(180deg, #192A5F 0%, #1560c6 100%);
    /* Same deep blue theme */
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    text-align: center;
    color: white;
}

.audience-header {
    margin-bottom: 60px;
}

.audience-subtitle {
    font-family: 'Poppins', sans-serif;


    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
    opacity: 0.8;
}

.audience-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 120%;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.audience-card {
    background-color: white;
    border-radius: 20px;
    padding: 50px 30px;
    color: #192A5F;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s;
}

.audience-card:hover {
    transform: translateY(-10px);
}

.audience-icon-box {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #192A5F 0%, #0D8EF4 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    box-shadow: 0 10px 20px rgba(13, 142, 244, 0.3);
}

.audience-icon-box img {
    width: 55px;
    height: 55px;
    filter: brightness(0) invert(1);
    /* Ensure icon is white */
}

.audience-card h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 24px;
    margin-bottom: 20px;
    text-transform: uppercase;

    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.audience-card p {
    font-family: 'Poppins', sans-serif;


    font-size: 14px;
    line-height: 150%;
    color: #192A5F;
    max-width: 250px;
}


/* How It Works Section */
.how-it-works-section {
    background-color: #FAFAFA;
    /* Slightly off-white */
    padding: 100px 0;
    text-align: center;
}

.how-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 38px;
    margin-bottom: 80px;

    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.how-title .blue-light {
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
}

.how-grid {
    display: flex;
    justify-content: center;
    gap: 100px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto 80px auto;
}

.how-grid.row-2 {
    margin-bottom: 0px;
}

.how-item {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 20px;
    max-width: 350px;
}

.how-item img {
    height: 50px;
    width: auto;
}

.how-item p {
    font-family: 'Poppins', sans-serif;


    font-size: 24px;
    line-height: 140%;
    /* Gradient Text */
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    /* Fallback/Standard */

    font-weight: 500;
    /* Ensure base weight is correct */
}

.how-item p strong {
    font-weight: 800;
    /* Make bold stand out more in gradient if needed, or stick to 700 */
    /* color: inherit; or just transparent text fill handles it */
    color: transparent;
    /* Ensure it takes the gradient */
    -webkit-text-fill-color: transparent;
}


/* Responsive */
@media (max-width: 992px) {
    .ch-content {
        flex-direction: column;
        text-align: center;
    }

    .ch-text {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .ch-image {
        justify-content: center;
    }

    .ch-text h1 {
        font-size: 28px;
        line-height: 130%;
    }

    .ch-text h1 br {
        display: none;
    }

    .hero-desc {
        font-size: 16px;
    }

    .hero-desc br {
        display: none;
    }

    .hero-subdesc {
        font-size: 10px;
    }

    .btn-hero-cursos {
        font-size: 12px;
        padding: 14px 20px;
    }

    .learning-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        /* Center text on mobile */
    }

    .learning-left-col {
        width: 100%;
        max-width: 100%;
        align-items: center;
        /* Center image and title on mobile */
        margin-bottom: 40px;
    }

    .learning-title {
        text-align: center;
        font-size: 26px;
    }

    .learning-title br {
        display: none;
    }

    .learning-image {
        justify-content: center;
    }

    .learning-right-col {
        max-width: 100%;
        width: 100%;
    }

    /* New Sections Responsive */
    .audience-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .how-grid {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        margin: 0 auto 40px auto;
    }

    .how-item {
        max-width: 100%;
        justify-content: center;
        text-align: left;
    }

    .how-item p {
        font-size: 20px;
    }

    .audience-title {
        font-size: 26px;
    }

    .how-title {
        font-size: 28px;
    }

}

/* Logo Carousel Section */
.logo-carousel-section {
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    padding: 20px 0;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.carousel-track {
    display: inline-flex;
    gap: 50px;
    animation: scroll 20s linear infinite;
    align-items: center;
}

.carousel-track img {
    height: 35px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


/* Online Training Section */
.online-training-section {
    padding: 100px 0;
    /* Standard padding */
    background-color: #FDFDFD;
}

.ot-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.ot-text {
    max-width: 500px;
}

.ot-subtitle {
    font-family: 'Poppins', sans-serif;


    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;

    /* Gradient Text */
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.ot-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 42px;
    line-height: 120%;
    margin-bottom: 40px;

    /* Gradient Text */
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.ot-title .blue-highlight {
    font-weight: 700;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.btn-ot {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    color: white;
    padding: 15px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;


    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(13, 142, 244, 0.2);
}

.btn-ot:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(13, 142, 244, 0.4);
}

.btn-ot img {
    width: 20px;
    height: 20px;
}

.ot-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.ot-image img {
    max-width: 100%;
    height: auto;
}


/* Extra Responsive for OT */
@media (max-width: 992px) {
    .ot-content {
        flex-direction: column;
        text-align: center;
    }

    .ot-text {
        max-width: 100%;
        margin-bottom: 50px;
    }

    .ot-title {
        font-size: 28px;
    }

    .ot-title br {
        display: none;
    }

    .video-title {
        font-size: 24px!important;
    }
}


/* Video Shorts Section */
.video-section {
    padding: 0 0 100px 0;
    background-color: white;
    /* Or matching the surrounding? Usually white. */
    text-align: center;
}

.video-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 120%;
    margin-bottom: 60px;

    /* Gradient Text */
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.video-title .blue-bold {
    font-weight: 700;
    color: transparent;
    /* Making it transparent to inherit gradient */
    -webkit-text-fill-color: transparent;
}

.video-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    /* Allow wrapping on mobile */
    margin-bottom: 80px;
}

.video-item {
    border-radius: 20px;
    overflow: hidden;
    /* Only clip the video item's own border radius */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 325px;
    min-height: 580px;
    /* Slightly taller to accommodate full instagram embed without cut */
    background: #fff;
    position: relative;
    /* For absolutely positioning the loader */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center loader */
}

/* Loading Spinner for Instagram Embeds */
.video-item::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0949A0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
    /* Behind the iframe */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Instagram embed overrides */
.video-item .instagram-media {
    margin: 0 !important;
    border-radius: 20px !important;
    position: relative;
    z-index: 2;
    /* In front of the loader */
    background: white;
    /* Cover the loader once loaded */
    width: 100% !important;
    min-width: 100% !important;
}

/* Responsive Iframe (legacy fallback) */
.video-item iframe {
    width: 100%;
    height: 100%;
}

.section-divider {
    height: 1px;
    background-color: #E0E0E0;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 60px auto;
}

.video-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    gap: 40px;
}

.video-cta-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 130%;

    /* Gradient Text */
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.video-cta-text .blue-bold {
    font-weight: 700;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.btn-video-cta {

    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    color: white;
    padding: 18px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(13, 142, 244, 0.2);
}

.btn-video-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(13, 142, 244, 0.4);
}

.btn-video-cta img {
    width: 18px;
    height: 18px;
}

.box-icon-button-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: white;
    padding: 7px;
    margin-right: 12px;
}

.box-icon-button-cta img {
    width: 12px;
    height: 12px;
}

/* Community Section */
.community-section {
    padding: 100px 0;
    background-color: #ffffff;
    /* Or white, based on design. Let's use #FAFAFA to separate from white video section */
}

.community-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 120px;
    max-width: 1200px;
    margin: 0 auto;
}

.community-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.community-image img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

.community-text {
    flex: 1;
    max-width: 600px;
}

.community-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 45px;
    line-height: 110%;
    margin-bottom: 25px;

    /* Gradient Text */
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.community-desc {
    font-family: 'Poppins', sans-serif;


    font-weight: 500;
    font-size: 25px;
    line-height: 140%;

    /* Gradient Text */
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;

    margin-bottom: 40px;
}

.community-list {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.community-list li {
    display: flex;
    align-items: center;
    font-family: 'Poppins', sans-serif;


    font-weight: 500;
    font-size: 18px;

    /* Gradient Text */
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;

    gap: 15px;
}

.community-list li img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.btn-community-cta {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(90deg, #192A5F 0%, #0D8EF4 100%);
    color: white;
    padding: 18px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(13, 142, 244, 0.2);
}

.btn-community-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(13, 142, 244, 0.4);
}

/* Responsive Video Section */
@media (max-width: 992px) {
    .video-grid {
        gap: 20px;
    }

    .video-item {
        width: 100%;
        max-width: 300px;
        min-height: 533px;
        /* Ensure mobile also has minimum height */
    }

    .video-cta-box {
        flex-direction: column;
        text-align: center;
    }

    .video-cta-text {
        font-size: 28px;
    }

    .video-cta-text br {
        display: none;
    }

    .btn-video-cta {
        white-space: normal;
        width: 100%;
        justify-content: center;
        text-align: center;
        font-size: 12px;
        padding: 14px 20px;
    }

    /* Community Section Responsive */
    .community-content {
        flex-direction: column;
        text-align: center;
    }

    .community-image {
        margin-bottom: 40px;
        order: 2;
        /* Image below text on mobile */
    }

    .community-text {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .community-title {
        font-size: 28px;
    }

    .community-title br {
        display: none;
    }

    .community-desc {
        font-size: 16px;
    }

    .community-desc br {
        display: none;
    }

    .community-list {
        align-items: flex-start;
        text-align: left;
    }

    .community-list li {
        font-size: 16px;
    }

    .community-section {
        padding-top: 0;
    }
}