/*
|--------------------------------------------------------------------------
| WWWW Why CANO
|--------------------------------------------------------------------------
*/

.wwww-why-cano {
    width: 100%;
    box-sizing: border-box;

    background: #101010;

    font-family: "AGEO Medium", "AGEO", Arial, sans-serif;

    color: #f4f1f1;

    text-decoration: none;
}

.wwww-why-cano *,
.wwww-why-cano *::before,
.wwww-why-cano *::after {
    box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| REMOVE UNWANTED LINK STYLES
|--------------------------------------------------------------------------
|
| Prevent Elementor / theme styles from adding underlines or backgrounds
| to links, buttons and their children.
|--------------------------------------------------------------------------
*/

.wwww-why-cano a,
.wwww-why-cano a:hover,
.wwww-why-cano a:focus,
.wwww-why-cano a:active,
.wwww-why-cano button,
.wwww-why-cano button:hover,
.wwww-why-cano button:focus,
.wwww-why-cano button:active {
    text-decoration: none !important;

    text-decoration-line: none !important;

    box-shadow: none;
}


/*
|--------------------------------------------------------------------------
| INNER
|--------------------------------------------------------------------------
*/

.wwww-why-cano-inner {
    width: 100%;
    max-width: 1380px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(360px, 0.9fr);

    gap: 48px;

    align-items: start;
}


/*
|--------------------------------------------------------------------------
| LEFT SIDE
|--------------------------------------------------------------------------
*/

.wwww-why-cano-left {
    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| EYEBROW
|--------------------------------------------------------------------------
*/

.wwww-why-cano-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    font-family: "AGEO Medium", "AGEO", Arial, sans-serif;

    font-size: 17px;

    line-height: 1.2;

    font-weight: 500;

    letter-spacing: 1.5px;

    color: #f3aaa3;

    text-transform: uppercase;

    text-decoration: none !important;
}


/*
|--------------------------------------------------------------------------
| MAIN HEADING
|--------------------------------------------------------------------------
*/

.wwww-why-cano-heading {
    max-width: 1050px;

    margin: 0 0 58px;

    font-family: "AGEO Medium", "AGEO", Arial, sans-serif;

    font-size: clamp(48px, 5.4vw, 76px);

    line-height: 0.98;

    font-weight: 500;

    letter-spacing: -2.5px;

    color: #f4f1f1;

    text-transform: uppercase;

    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| INTRO
|--------------------------------------------------------------------------
*/

.wwww-why-cano-intro {
    max-width: 850px;

    margin-bottom: 62px;

    font-family: "AGEO Medium", "AGEO", Arial, sans-serif;

    font-size: 24px;

    line-height: 1.55;

    font-weight: 400;

    letter-spacing: -0.2px;

    color: #d0cccc;

    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| FEATURE CARDS
|--------------------------------------------------------------------------
*/

.wwww-why-cano-features {
    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-bottom: 30px;
}


/*
|--------------------------------------------------------------------------
| FEATURE CARD
|--------------------------------------------------------------------------
*/

.wwww-feature-card {
    width: 100%;

    min-height: 98px;

    padding: 24px 26px;

    display: flex;

    align-items: center;

    gap: 26px;

    background: #1d1b1b;

    border: 0;

    border-radius: 0;

    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| FEATURE ICON
|--------------------------------------------------------------------------
|
| Keep icon completely clean:
| - no background
| - no inherited Elementor background
| - fixed dimensions
| - no distortion
|--------------------------------------------------------------------------
*/

.wwww-feature-icon {
    flex: 0 0 42px;

    width: 42px;

    min-width: 42px;

    height: 42px;

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent !important;

    border: 0 !important;

    border-radius: 0;

    padding: 0;

    margin: 0;

    color: #f3aaa3;

    font-size: 30px;

    line-height: 1;

    text-decoration: none !important;

    box-shadow: none !important;

    overflow: visible;
}


/*
|--------------------------------------------------------------------------
| FEATURE ICON SVG
|--------------------------------------------------------------------------
*/

.wwww-feature-icon svg {
    display: block;

    width: 30px;

    height: 30px;

    max-width: 30px;

    max-height: 30px;

    min-width: 30px;

    min-height: 30px;

    margin: 0;

    padding: 0;

    background: transparent !important;

    border: 0 !important;

    fill: none !important;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    overflow: visible;

    shape-rendering: geometricPrecision;
}


/*
|--------------------------------------------------------------------------
| PREVENT SVG PATHS FROM GETTING FILLED / DISTORTED
|--------------------------------------------------------------------------
*/

.wwww-feature-icon svg path,
.wwww-feature-icon svg line,
.wwww-feature-icon svg polyline,
.wwww-feature-icon svg polygon,
.wwww-feature-icon svg circle,
.wwww-feature-icon svg rect {
    fill: none !important;

    stroke: currentColor;

    vector-effect: non-scaling-stroke;
}


/*
|--------------------------------------------------------------------------
| FEATURE TEXT
|--------------------------------------------------------------------------
*/

.wwww-feature-text {
    flex: 1;

    min-width: 0;

    font-family: "AGEO Medium", "AGEO", Arial, sans-serif;

    font-size: 19px;

    line-height: 1.55;

    font-weight: 400;

    color: #d0cccc;

    text-decoration: none !important;
}


/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
|
| Shared button style.
| Fixed height = 50px.
|--------------------------------------------------------------------------
*/

.wwww-why-cano-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 34px;

    min-height: 50px;

    height: 50px;

    max-height: 50px;

    padding: 0 26px;

    margin: 0;

    border: 1px solid #f4f1f1;

    border-radius: 0;

    outline: none;

    background: transparent !important;

    color: #f4f1f1 !important;

    text-decoration: none !important;

    text-decoration-line: none !important;

    text-decoration-style: none !important;

    text-decoration-color: transparent !important;

    font-family: "AGEO Medium", "AGEO", Arial, sans-serif;

    font-size: 15px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    box-shadow: none !important;

    cursor: pointer;

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


/*
|--------------------------------------------------------------------------
| BUTTON CHILDREN
|--------------------------------------------------------------------------
|
| Prevent underline from appearing on the label or arrow.
|--------------------------------------------------------------------------
*/

.wwww-why-cano-button *,
.wwww-why-cano-button span,
.wwww-why-cano-button strong,
.wwww-why-cano-button i {
    text-decoration: none !important;

    text-decoration-line: none !important;

    text-decoration-style: none !important;

    text-decoration-color: transparent !important;

    border-bottom: 0 !important;

    box-shadow: none !important;
}


/*
|--------------------------------------------------------------------------
| BUTTON HOVER
|--------------------------------------------------------------------------
*/

.wwww-why-cano-button:hover {
    background: #f4f1f1 !important;

    border-color: #f4f1f1 !important;

    color: #101010 !important;

    text-decoration: none !important;
}


/*
|--------------------------------------------------------------------------
| BUTTON FOCUS / ACTIVE
|--------------------------------------------------------------------------
*/

.wwww-why-cano-button:focus,
.wwww-why-cano-button:focus-visible,
.wwww-why-cano-button:active {
    background: transparent !important;

    border-color: #f4f1f1 !important;

    color: #f4f1f1 !important;

    text-decoration: none !important;

    outline: none !important;

    box-shadow: none !important;
}


/*
|--------------------------------------------------------------------------
| BUTTON ARROW
|--------------------------------------------------------------------------
*/

.wwww-button-arrow {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    font-family: Arial, sans-serif;

    font-size: 21px;

    line-height: 1;

    color: inherit;

    text-decoration: none !important;

    border: 0 !important;

    box-shadow: none !important;

    transition: transform 0.25s ease;
}


/*
|--------------------------------------------------------------------------
| BUTTON ARROW HOVER
|--------------------------------------------------------------------------
*/

.wwww-why-cano-button:hover .wwww-button-arrow {
    transform: translateX(4px);

    color: inherit;

    text-decoration: none !important;
}


/*
|--------------------------------------------------------------------------
| RIGHT SIDE
|--------------------------------------------------------------------------
*/

.wwww-why-cano-right {
    min-width: 0;

    padding-top: 300px;
}


/*
|--------------------------------------------------------------------------
| METHODOLOGY CARD
|--------------------------------------------------------------------------
*/

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

    padding: 48px 50px;

    background: #201e1e;

    border: 0;

    border-radius: 0;
}


/*
|--------------------------------------------------------------------------
| METHODOLOGY LABEL
|--------------------------------------------------------------------------
*/

.wwww-methodology-label {
    margin-bottom: 28px;

    font-family: "AGEO Medium", "AGEO", Arial, sans-serif;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 500;

    letter-spacing: 1.4px;

    color: #f3aaa3;

    text-transform: uppercase;

    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| METHODOLOGY QUOTE
|--------------------------------------------------------------------------
*/

.wwww-methodology-quote {
    margin-bottom: 36px;

    font-family: "AGEO Medium", "AGEO", Arial, sans-serif;

    font-size: clamp(26px, 2.3vw, 36px);

    line-height: 1.22;

    font-weight: 500;

    letter-spacing: -0.6px;

    color: #f4f1f1;

    text-transform: uppercase;

    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| METHODOLOGY DESCRIPTION
|--------------------------------------------------------------------------
*/

.wwww-methodology-description {
    font-family: "AGEO Medium", "AGEO", Arial, sans-serif;

    font-size: 17px;

    line-height: 1.55;

    font-weight: 400;

    color: #c9c5c5;

    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

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

        gap: 55px;
    }

    .wwww-why-cano-right {
        padding-top: 0;
    }

    .wwww-why-cano-heading {
        margin-bottom: 45px;
    }

    .wwww-why-cano-intro {
        margin-bottom: 45px;
    }

    .wwww-methodology-card {
        max-width: 800px;
    }
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {

    .wwww-why-cano-inner {
        gap: 40px;
    }


    /*
    |----------------------------------------------------------------------
    | EYEBROW
    |----------------------------------------------------------------------
    */

    .wwww-why-cano-eyebrow {
        font-size: 14px;

        letter-spacing: 1.2px;

        margin-bottom: 16px;
    }


    /*
    |----------------------------------------------------------------------
    | HEADING
    |----------------------------------------------------------------------
    */

    .wwww-why-cano-heading {
        margin-bottom: 34px;

        font-size: clamp(40px, 11vw, 58px);

        line-height: 0.98;

        letter-spacing: -1.5px;
    }


    /*
    |----------------------------------------------------------------------
    | INTRO
    |----------------------------------------------------------------------
    */

    .wwww-why-cano-intro {
        margin-bottom: 34px;

        font-size: 19px;

        line-height: 1.5;
    }


    /*
    |----------------------------------------------------------------------
    | FEATURE CARD
    |----------------------------------------------------------------------
    */

    .wwww-feature-card {
        min-height: auto;

        padding: 22px 20px;

        gap: 18px;
    }


    /*
    |----------------------------------------------------------------------
    | ICON
    |----------------------------------------------------------------------
    */

    .wwww-feature-icon {
        flex: 0 0 34px;

        width: 34px;

        min-width: 34px;

        height: 34px;

        min-height: 34px;

        font-size: 25px;
    }

    .wwww-feature-icon svg {
        width: 27px;

        height: 27px;

        max-width: 27px;

        max-height: 27px;

        min-width: 27px;

        min-height: 27px;
    }


    /*
    |----------------------------------------------------------------------
    | FEATURE TEXT
    |----------------------------------------------------------------------
    */

    .wwww-feature-text {
        font-size: 17px;

        line-height: 1.5;
    }


    /*
    |----------------------------------------------------------------------
    | BUTTON
    |----------------------------------------------------------------------
    */

    .wwww-why-cano-button {
        width: auto;

        min-height: 50px;

        height: 50px;

        max-height: 50px;

        padding: 0 20px;

        gap: 24px;

        font-size: 13px;
    }


    /*
    |----------------------------------------------------------------------
    | METHODOLOGY
    |----------------------------------------------------------------------
    */

    .wwww-methodology-card {
        padding: 34px 28px;
    }

    .wwww-methodology-label {
        margin-bottom: 22px;

        font-size: 13px;
    }

    .wwww-methodology-quote {
        margin-bottom: 28px;

        font-size: 25px;

        line-height: 1.22;
    }

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


/*
|--------------------------------------------------------------------------
| SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

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

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


    /*
    |----------------------------------------------------------------------
    | FEATURE CARD
    |----------------------------------------------------------------------
    */

    .wwww-feature-card {
        padding: 20px 17px;
    }

    .wwww-feature-text {
        font-size: 16px;
    }


    /*
    |----------------------------------------------------------------------
    | BUTTON
    |----------------------------------------------------------------------
    */

    .wwww-why-cano-button {
        width: 100%;

        min-height: 50px;

        height: 50px;

        max-height: 50px;

        padding: 0 18px;

        gap: 20px;

        font-size: 12px;
    }


    /*
    |----------------------------------------------------------------------
    | METHODOLOGY
    |----------------------------------------------------------------------
    */

    .wwww-methodology-card {
        padding: 28px 22px;
    }

    .wwww-methodology-quote {
        font-size: 22px;
    }
}