/* ==========================================================================
   WWWW Creative Programmes
   ========================================================================== */

.wwww-programmes-section {
    width: 100%;
    padding: 100px 30px;

    background: #101010;
    color: #f5f3f1;

    overflow: hidden;

    border: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================================
   Prevent Elementor / Theme Pseudo Elements
   ========================================================================== */

.wwww-programmes-section::before,
.wwww-programmes-section::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================================
   Inner
   ========================================================================== */

.wwww-programmes-inner {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(400px, 1fr);

    gap: 90px;

    align-items: center;
}


/* ==========================================================================
   Left Content
   ========================================================================== */

.wwww-programmes-content {
    width: 100%;
}


/* ==========================================================================
   Eyebrow
   ========================================================================== */

.wwww-programmes-eyebrow {
    margin: 0 0 58px;

    font-family: "ageoMedium", "Ageo", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #f3aaa3;
}


/* ==========================================================================
   Heading
   ========================================================================== */

.wwww-programmes-heading {
    width: 100%;
    max-width: 850px;

    margin: 0;

    font-family: "ageoMedium", "Ageo", sans-serif;
    font-size: clamp(58px, 6.2vw, 92px);
    line-height: 0.93;
    font-weight: 500;

    letter-spacing: -0.045em;
    text-transform: uppercase;

    color: #f5f3f1;
}


/* ==========================================================================
   Intro
   ========================================================================== */

.wwww-programmes-intro {
    width: 100%;
    max-width: 900px;

    margin-top: 78px;

    font-family: "ageoMedium", "Ageo", sans-serif;
    font-size: 25px;
    line-height: 1.55;
    font-weight: 400;

    letter-spacing: -0.01em;

    color: #e3dfdd;
}


/* ==========================================================================
   Secondary Text
   ========================================================================== */

.wwww-programmes-secondary {
    width: 100%;
    max-width: 850px;

    margin-top: 28px;

    font-family: "ageoMedium", "Ageo", sans-serif;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 400;

    color: #c8c3c1;
}


/* ==========================================================================
   Bold Statement
   ========================================================================== */

.wwww-programmes-bold {
    width: 100%;
    max-width: 900px;

    margin-top: 8px;

    font-family: "ageoMedium", "Ageo", sans-serif;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 600;

    color: #f5f3f1;
}


/* ==========================================================================
   Button
   ========================================================================== */

.wwww-programmes-button {
    width: 395px;
    max-width: 100%;

    min-height: 50px;

    margin-top: 48px;

    padding: 16px 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    background: #1e1e1e;

    border: 1px solid #f5f3f1;
    border-radius: 0;

    color: #f5f3f1;

    font-family: "ageoMedium", "Ageo", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    text-decoration: none !important;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* ==========================================================================
   Button Text
   ========================================================================== */

.wwww-programmes-button span {
    color: inherit;

    font-family: "ageoMedium", "Ageo", sans-serif;

    text-decoration: none !important;
}


/* ==========================================================================
   Button Arrow
   ========================================================================== */

.wwww-programmes-arrow {
    display: inline-block;

    font-family: "ageoMedium", "Ageo", sans-serif;

    font-size: 25px;
    line-height: 1;

    font-weight: 400;

    transform: translateY(-1px);

    transition: transform 0.25s ease;
}


/* ==========================================================================
   Button Hover
   ========================================================================== */

.wwww-programmes-button:hover {
    background: #ffffff;

    border-color: #ffffff;

    color: #101010;

    text-decoration: none !important;

    transform: translateY(-2px);
}


.wwww-programmes-button:hover span {
    color: #101010;

    text-decoration: none !important;
}


.wwww-programmes-button:hover .wwww-programmes-arrow {
    color: #101010;

    transform: translateX(5px);
}


/* ==========================================================================
   Methodology Card
   ========================================================================== */

.wwww-programmes-methodology {
    width: 100%;

    padding: 38px 34px 32px;

    background: #1d1b1b;

    box-sizing: border-box;
}


/* ==========================================================================
   Methodology Header
   ========================================================================== */

.wwww-programmes-methodology-header {
    width: 100%;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


/* ==========================================================================
   Methodology Title
   ========================================================================== */

.wwww-programmes-methodology-title {
    font-family: "ageoMedium", "Ageo", sans-serif;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: #d9d4d2;
}


/* ==========================================================================
   Card Icon
   ========================================================================== */

.wwww-programmes-card-icon {
    font-family: "ageoMedium", "Ageo", sans-serif;

    font-size: 30px;
    line-height: 1;

    color: #f3aaa3;

    transform: rotate(0deg);
}


/* ==========================================================================
   Methodology Description
   ========================================================================== */

.wwww-programmes-methodology-description {
    margin-top: 38px;

    font-family: "ageoMedium", "Ageo", sans-serif;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 400;

    color: #c8c3c1;
}


/* ==========================================================================
   Statistics
   ========================================================================== */

.wwww-programmes-stats {
    width: 100%;

    margin-top: 28px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;
}


/* ==========================================================================
   Individual Statistic
   ========================================================================== */

.wwww-programmes-stat {
    min-height: 78px;

    padding: 13px 10px;

    background: #201e1e;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    box-sizing: border-box;
}


/* ==========================================================================
   Statistic Value
   ========================================================================== */

.wwww-programmes-stat-value {
    font-family: "ageoMedium", "Ageo", sans-serif;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;

    letter-spacing: 0.02em;

    color: #f5f3f1;
}


/* ==========================================================================
   Statistic Label
   ========================================================================== */

.wwww-programmes-stat-label {
    margin-top: 8px;

    font-family: "ageoMedium", "Ageo", sans-serif;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;

    letter-spacing: 0.04em;
    text-transform: uppercase;

    color: #c8c3c1;
}


/* ==========================================================================
   Elementor / Theme Link Override
   ========================================================================== */

.wwww-programmes-section a,
.wwww-programmes-section a:hover,
.wwww-programmes-section a:focus,
.wwww-programmes-section a:active {
    text-decoration: none !important;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1100px) {

    .wwww-programmes-section {
        padding: 90px 30px;
    }

    .wwww-programmes-inner {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .wwww-programmes-heading {
        max-width: 900px;

        font-size: clamp(52px, 7vw, 78px);
    }

    .wwww-programmes-intro {
        margin-top: 55px;

        font-size: 22px;
    }

    .wwww-programmes-methodology {
        max-width: 700px;
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767px) {

    .wwww-programmes-section {
        padding: 80px 22px;
    }

    .wwww-programmes-inner {
        gap: 48px;
    }

    .wwww-programmes-eyebrow {
        margin-bottom: 30px;

        font-size: 13px;

        letter-spacing: 0.08em;
    }

    .wwww-programmes-heading {
        font-size: clamp(44px, 11vw, 64px);

        line-height: 0.96;

        letter-spacing: -0.035em;
    }

    .wwww-programmes-intro {
        margin-top: 42px;

        font-size: 19px;
        line-height: 1.5;
    }

    .wwww-programmes-secondary {
        margin-top: 24px;

        font-size: 17px;
    }

    .wwww-programmes-bold {
        font-size: 17px;
    }

    .wwww-programmes-button {
        width: 100%;

        min-height: 68px;

        margin-top: 38px;

        padding: 18px 24px;

        gap: 22px;

        font-size: 15px;
    }

    .wwww-programmes-arrow {
        font-size: 23px;
    }

    .wwww-programmes-methodology {
        padding: 30px 24px 24px;
    }

    .wwww-programmes-methodology-description {
        margin-top: 30px;

        font-size: 17px;
    }

    .wwww-programmes-stats {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .wwww-programmes-stat {
        min-height: 72px;
    }
}


/* ==========================================================================
   Small Mobile
   ========================================================================== */

@media (max-width: 480px) {

    .wwww-programmes-section {
        padding: 65px 18px;
    }

    .wwww-programmes-heading {
        font-size: 40px;
    }

    .wwww-programmes-intro {
        font-size: 17px;
    }

    .wwww-programmes-secondary,
    .wwww-programmes-bold {
        font-size: 16px;
    }

    .wwww-programmes-methodology {
        padding: 26px 20px 20px;
    }

    .wwww-programmes-methodology-title {
        font-size: 13px;
    }

    .wwww-programmes-methodology-description {
        font-size: 16px;
    }
}