.elementor-5976 .elementor-element.elementor-element-4c49edb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-5976 .elementor-element.elementor-element-33dcb96{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5976 .elementor-element.elementor-element-45d8a99{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5976 .elementor-element.elementor-element-6a6b9ef{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5976 .elementor-element.elementor-element-2e07b61{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5976 .elementor-element.elementor-element-1da5117{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-6486d43 *//* --- Main Hero Section Wrapper --- */
.hero-section {
    width: 100%;
    max-width: 1200px; /* Max width of the card */
    margin: 0 auto; /* Centers the card */
}

/* --- Hero Card Container --- */
/* This is the main flex container for the two columns */
.hero-card {
    display: flex;
    flex-direction: row; /* Columns side-by-side */
    background-color: #ffffff;
    border-radius: 16px; /* Rounded corners for the whole card */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    overflow: hidden; /* Clips the image to match the rounded corners */
}

/* --- Left Column: Content --- */
.hero-content {
    flex-basis: 50%; /* Takes up 50% of the width */
    flex-grow: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Right Column: Image --- */
.hero-image {
    flex-basis: 50%; /* Takes up 50% of the width */
    flex-grow: 1;
    min-height: 500px; /* Gives the image a minimum height */

    /* !!! IMPORTANT !!!
      Update this URL to your image's path.
    */
    background-image: url('https://careskill.cloudtechnologiestest.com/wp-content/uploads/2025/09/pexels-kampus-6111612-scaled-1.jpg'); /* Using a placeholder */
    
    background-size: cover; /* Covers the entire div */
    background-position: center; /* Centers the image */
}


/* --- 1. The Tag (Your 1st Button) --- */
.hero-tag {
    display: inline-block;
    width: fit-content;
    background-color: #0381A8;
    color: #ffffff;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    margin-bottom: 1.5rem;
}

/* --- 2. The Title --- */
.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #1A2E44;
    line-height: 1.2;
    margin: 0;
    margin-bottom: 0.5rem;
}

/* --- 3. The Subtitle (1st Text Editor) --- */
.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    margin: 0;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

/* --- 4. The Description (2nd Text Editor) --- */
.hero-description {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
    margin-bottom: 2rem;
}

/* --- 5. & 6. The Buttons --- */
.hero-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons on mobile */
}

.hero-button-primary,
.hero-button-secondary {
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid #0381A8;
    cursor: pointer;
}

.hero-button-primary {
    background-color: #0381A8;
    color: #ffffff;
}
.hero-button-primary:hover {
    background-color: #0381A8;
    border-color: #0381A8;
}

.hero-button-secondary {
    background-color: transparent;
    color: #0381A8;
    margin-top: 0.75rem;
}
.hero-button-secondary:hover {
    background-color: #0381A8;
    color: #ffffff;
}

/* --- 📱 Reponsiveness (Tablet & Mobile) --- */

@media (max-width: 991px) {
    body {
        padding: 1rem; /* Less padding on smaller screens */
    }

    .hero-card {
        flex-direction: column; /* Stack columns vertically */
    }
    
    .hero-content {
        padding: 2rem;
        /* Center-align content on tablets/mobile */
        align-items: center;
        text-align: center;
    }
    
    .hero-image {
        min-height: 300px; /* Reduce image height on mobile */
    }
    
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }
}

/* On desktops, put buttons side-by-side */
@media (min-width: 992px) {
    .hero-buttons {
        flex-direction: row; /* Side-by-side */
    }
    
    .hero-button-secondary {
        margin-top: 0;
        margin-left: 0.75rem;
    }
}

/* For small mobile phones */
@media (max-width: 480px) {
    body {
        padding: 0; /* Full-width card on small phones */
    }

    .hero-card {
        border-radius: 0; /* Remove border radius */
    }
    
    .hero-content {
        padding: 1.5rem;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    /* Make buttons full-width */
    .hero-button-primary,
    .hero-button-secondary {
        width: 100%;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6349c2b */.info-bar {
    background-color: #F0F4F8; /* Light blue/grey background */
    padding: 3rem 1.5rem; /* Vertical and horizontal padding */
}

.info-bar-container {
    display: grid;
    /* 4 columns on desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 1.5rem; /* Space between items */
    
    max-width: 1200px;
    margin: 0 auto; /* Center the container */
}

.info-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-aligns all content */
    text-align: center;
}

.info-icon {
    height: 45px; /* Set a consistent icon height */
    width: 45px;
    object-fit: contain;
    margin-bottom: 1rem;
    /* Note: The icons in the design are a dark blue. 
      If using SVGs, you could set 'fill: #1A2E44;'.
      If using PNGs, they should be a dark color.
    */
}

.info-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1A2E44; /* Dark blue from design */
    margin: 0 0 0.5rem 0; /* No top margin, small bottom margin */
}

.info-text {
    font-size: 1rem;
    color: #555;
    margin: 0;
    line-height: 1.4;
}

/* --- 📱 Reponsiveness --- */

/* For Tablets */
@media (max-width: 991px) {
    .info-bar-container {
        /* 2 columns on tablet */
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem; /* A bit more gap for the 2x2 layout */
    }
}

/* For Mobile Phones */
@media (max-width: 480px) {
    .info-bar-container {
        /* 1 column on mobile */
        grid-template-columns: 1fr;
        gap: 2.5rem; /* More space when stacked vertically */
    }
    
    .info-bar {
        padding: 2.5rem 1rem;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3b0f23e */.about-section-v2 {
    width: 100%;
    max-width: 1200px; /* Max width of the card */
    margin: 2rem auto; /* Centers the card and adds space */
}

.about-card {
    display: flex;
    flex-direction: row; /* Columns side-by-side */
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

/* --- Left Column: Content --- */
.about-content-left {
    flex-basis: 50%;
    flex-grow: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Right Column: Image --- */
.about-image-right {
    flex-basis: 50%;
    flex-grow: 1;
    min-height: 500px;
    
    /* !!! IMPORTANT !!!
      Update this URL to your background image.
      This should be the faded healthcare professionals image.
    */
    background-image: url('https://careskill.cloudtechnologiestest.com/wp-content/uploads/2025/09/pexels-kampus-6111612-scaled-1.jpg'); /* Placeholder */
    background-size: cover;
    background-position: center;
    
    /* This centers the new white card */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem; /* Padding so the card doesn't touch the edges */
    box-sizing: border-box; /* Include padding in the div's size */
}

/* --- Text & Button Styles (Reusing from Hero) --- */
/* We can reuse the hero styles you already have.
   I've renamed them here for clarity.
*/
.about-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #1A2E44;
    line-height: 1.2;
    margin: 0;
    margin-bottom: 0.5rem;
}
.about-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    margin: 0;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}
.about-description {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
    margin-bottom: 2rem;
}
.about-buttons {
    display: flex;
    flex-direction: column;
}
/* You should already have .hero-tag, .hero-button-primary, 
   and .hero-button-secondary in your CSS file. 
   If not, add them back from the Hero Section code. 
   I'll add .hero-tag here just in case. */
.hero-tag {
    display: inline-block;
    width: fit-content;
    background-color: #0381A8; /* <-- This color has been changed */
    color: #ffffff;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    margin-bottom: 1.5rem;
}


/* --- New "Audience Card" (The white inset card) --- */
.audience-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    text-align: center;
    width: 100%;
    max-width: 400px; /* Stops it from getting too wide */
}

.audience-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1A2E44;
    margin: 0 0 0.75rem 0;
}

.audience-text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
}

.audience-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 icon columns */
    gap: 1rem;
}

.audience-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.audience-icon {
    height: 35px; /* Adjust as needed */
    width: 35px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.audience-item span {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
}


/* --- 📱 Reponsiveness --- */

@media (max-width: 991px) {
    body {
        padding: 1rem;
    }
    .about-card {
        flex-direction: column; /* Stack columns */
    }
    .about-content-left {
        padding: 2rem;
        align-items: center;
        text-align: center;
    }
    .about-image-right {
        min-height: auto; /* Let the card define the height */
        padding: 2rem 1.5rem; /* Adjust padding for mobile */
    }
    .about-title {
        font-size: 2.5rem;
    }
}

/* On desktops, put buttons side-by-side */
@media (min-width: 992px) {
    .about-buttons {
        flex-direction: row;
    }
    /* Re-add this if it's not in your main CSS */
    .hero-button-secondary {
        margin-top: 0;
        margin-left: 0.75rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0;
    }
    .about-card {
        border-radius: 0;
    }
    .about-content-left {
        padding: 1.5rem;
    }
    .about-title {
        font-size: 2.2rem;
    }
    /* Re-add this if it's not in your main CSS */
    .hero-button-primary,
    .hero-button-secondary {
        width: 100%;
    }
    .hero-button-secondary {
        margin-top: 0.75rem;
        margin-left: 0;
    }
    .audience-card {
        padding: 1.5rem;
    }
    .audience-title {
        font-size: 1.3rem;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-06c4327 *//* Re-usable helper class for centering text */
.text-center {
    text-align: center;
}

/* Re-usable .section-title from previous section.
  Add this if you don't have it.
*/
.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #1A2E44; /* Dark blue from design */
    margin-top: 0;
    margin-bottom: 3rem; /* More space for a centered title */
}


/* =====================================
  LEARNING OUTCOMES SECTION
=====================================
*/
.learning-section {
    background-color: #F0F4F8; /* Light blue/grey background */
    padding: 4rem 1.5rem;
}

.learning-container {
    max-width: 1200px;
    margin: 0 auto; /* Center the container */
}

.learning-grid {
    display: grid;
    /* This creates the 2-column layout */
    grid-template-columns: 1fr 1fr;
    
    /* This tells the grid to make 8 rows */
    grid-template-rows: repeat(8, auto);
    
    /* This tells items to fill column 1 (up to 8 rows) first,
       then flow into column 2 */
    grid-auto-flow: column;
    
    gap: 1rem 2rem; /* 1rem between rows, 2rem between columns */
}

.learning-item {
    display: flex;
    /* Aligns icon to the top of the text, not center */
    align-items: flex-start; 
    gap: 0.75rem; /* Space between icon and text */
}

.learning-check-icon {
    width: 20px;
    height: 20px;
    /* This tweaks the icon to line up nicely with the first line of text */
    margin-top: 3px; 
    flex-shrink: 0; /* Prevents icon from shrinking */
}

.learning-text {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}


/* --- 📱 Reponsiveness --- */

/* For Tablets */
@media (max-width: 991px) {
    .learning-grid {
        /* Stack to 1 column */
        grid-template-columns: 1fr;
        /* Remove the 8-row limit */
        grid-template-rows: auto;
        /* Return to normal row flow */
        grid-auto-flow: row;
        gap: 1.5rem; /* A single gap value */
    }

    .learning-section {
        padding: 3rem 1.5rem;
    }
}

/* For Mobile Phones */
@media (max-width: 480px) {
    .section-title {
        font-size: 1.8rem; /* Smaller title */
        margin-bottom: 2rem;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-16dce79 *//* Re-usable .hero-button-primary from previous sections.
  Add this if you don't have it.
*/
.hero-button-primary {
    display: inline-block; /* Ensures it's not full-width by default */
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid #ffffff;
    background-color: #ffffff;
    color: #0381A8;
    cursor: pointer;
}
.hero-button-primary:hover {
    background-color: #ffffff;
    border-color:  #0381A8;
     border: 2px solid #ffffff;
}


/* =====================================
  FINAL CALL TO ACTION (CTA) SECTION
=====================================
*/
.cta-section {
    background-color: #0381A8; /* Dark blue background from image */
    color: #ffffff; /* White text */
    padding: 5rem 1.5rem;
    
    /* This centers the content container */
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-container {
    /* This centers the text and button inside the container */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    max-width: 600px; /* Constrains the width of the text */
}

.cta-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.2rem; /* Large title */
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 1rem;
    color:  #ffffff;
}

.cta-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 2rem;
     #ffffff
    /* Makes the text slightly transparent, as in the image */
    opacity: 0.9; 
}

/* We add .cta-button to slightly increase the button 
  size for this specific section, making it a stronger CTA.
*/
.cta-button {
    padding: 1rem 2.5rem; /* Larger padding */
    font-size: 1.1rem;
}


/* --- 📱 Reponsiveness --- */

@media (max-width: 767px) {
    .cta-section {
        padding: 4rem 1.5rem;
    }
    
    .cta-title {
        font-size: 2rem; /* Smaller title on mobile */
    }
    
    .cta-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .cta-button {
        width: 100%; /* Make button full-width on small phones */
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5e854de *//* Re-usable .section-title from previous sections.
  Add this if you don't have it.
*/
.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #1A2E44; /* Dark blue from design */
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* =====================================
  ASSESSMENT & CERTIFICATION (NO-IMAGE)
=====================================
*/
.assessment-section-no-image {
    background-color: #ffffff; /* Clean white background */
    padding: 4rem 1.5rem;
}

.assessment-container-no-image {
    display: grid;
    /* Creates the 50/50 split */
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    
    /* Vertically centers the content in both columns */
    align-items: center; 
}

/* --- Left Column: Content --- */
.assessment-content-no-image {
    max-width: 500px; /* Constrains text width */
}

.assessment-text-no-image {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.7;
    margin: 0 0 2rem 0;
}

.assessment-text-no-image strong {
    color: #1A2E44; /* Make bold text darker */
}

/* --- Benefits Box --- */
.benefits-box {
    background-color: #F0F4F8; /* Light grey background */
    border: 1px solid #e0e6ec; /* Thin border */
    border-radius: 8px;
    padding: 1.5rem;
}

.benefits-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.benefits-list li {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}

/* Add space between list items */
.benefits-list li + li {
    margin-top: 1rem;
}

/* Style for the icons in the list */
.benefits-list i {
    color: #0381A8; /* Your new primary color */
    font-size: 1.2rem;
    width: 30px; /* Gives text consistent alignment */
    margin-right: 0.5rem;
}

/* --- Right Column: CSS Certificate Block --- */
.assessment-certificate-wrapper {
    /* This centers the certificate if the column is taller */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* Padding around the certificate */
}

.certificate-frame {
    background-color: #1A2E44; /* Frame "color" */
    border: 8px solid #1A2E44;  /* The thick frame border */
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Prominent shadow */
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}

.certificate-mat {
    background-color: #F0F4F8; /* Light grey "matting" */
    padding: 1rem;
}

.certificate-document {
    background-color: #ffffff; /* White "document" */
    padding: 2rem;
    text-align: center;
    border: 1px solid #e0e6ec; /* Faint inner border */
}

/* --- Certificate Content --- */
.certificate-icon {
    font-size: 3rem;
    color: #E1B51A; /* Gold color */
    margin-bottom: 1rem;
}

.certificate-accreditation {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 2px; /* Letter-spaced as requested */
    margin: 0;
}

.certificate-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1A2E44;
    margin: 0.75rem 0;
}

.certificate-subtitle {
    font-size: 1rem;
    color: #333;
    font-style: italic;
    margin: 0;
}

.certificate-divider {
    border: 0;
    border-top: 2px solid #F0F4F8; /* Light divider line */
    margin: 1.5rem auto;
    width: 50%;
}

.certificate-validity {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}


/* --- 📱 Reponsiveness --- */

/* For Tablets & Mobile Phones */
@media (max-width: 991px) {
    .assessment-container-no-image {
        /* Stack to 1 column */
        grid-template-columns: 1fr;
    }
    
    .assessment-content-no-image {
        /* Center text when stacked */
        text-align: center;
    }

    .benefits-box {
        max-width: 400px;
        margin: 0 auto; /* Center the box */
    }

    .benefits-list li {
        /* Center the list items */
        justify-content: center;
    }

    .assessment-certificate-wrapper {
        /* Ensure certificate is first on mobile */
        order: -1; 
    }
}/* End custom CSS */