/**** DELOITTE BRAND COLORS ****/
:root {
    --deloitte-green: #86bc25;
    --accessible-green: #26890D;
    --green-1: #E3E48D;
    --green-2: #C4D600;
    --green-4: #43B02A;
    --green-5: #009A44;
    --green-6: #046A38;
    --green-7: #2C5234;
    --accessible-teal: #0d8390;
    --teal-1: #DDEFE8;
    --teal-2: #9DD4CF;
    --teal-3: #6FC2B4;
    --teal-4: #00ABAB;
    --teal-5: #0097A9;
    --teal-6: #007680;
    --teal-7: #004F59;
    --accessible-blue: #007CB0;
    --blue-1: #A0DCFF;
    --blue-2: #62B5E5;
    --blue-3: #00A3E0;
    --blue-4: #0076A8;
    --blue-5: #005587;
    --blue-6: #012169;
    --blue-7: #041E42;
    --cool-gray-1: #f6f6f6;
    --cool-gray-2: #D0D0CE;
    --cool-gray-4: #BBBCBC;
    --cool-gray-6: #A7A8AA;
    --cool-gray-7: #97999B;
    --cool-gray-9: #75787B;
    --cool-gray-10: #63666A;
    --cool-gray-11: #53565A;
}

.bodyresponsivegridcontainer {
    padding-inline: 0 !important;
    max-width: 100%;
}

.htmlfragment.aem-GridColumn.aem-GridColumn--default--12 {
    padding-inline: 0;
}

/* GENERAL LAYOUT STYLES */
.dmod-container {
    width: min(100%, 1400px);
    padding: 5rem 1rem;
    margin: auto;

    @media(width<=768px) {
        padding-block: 3rem;
    }
}

.dmod-container--margin {
    width: min(100%, 1400px);
    padding-inline: 1rem;
    margin: 5rem auto;

    @media(width<=768px) {
        margin-block: 3rem;
    }
}

.dmod-container__header {
    margin-bottom: 3rem;
}

.dmod-container__title {
    font-family: 'Open Sans Light', 'Open Sans', 'Calibri', sans-serif;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 300;
}

.dmod-cta {
    display: inline-block;
    font-size: 1rem;
    color: white;
    background: var(--accessible-blue);
    padding: .75rem 1.5rem;
    border-radius: 2rem;
    transition: .3s;
    max-width: fit-content;

    &:hover {
        background-color: var(--blue-5);
    }

    & .dmod-cta--white {
        color: var(--accessible-blue);
        background: white;

        &:hover {
            color: white;
            background: var(--accessible-blue);
        }
    }
}

/* HERO --STYLES */
#hero-container {
    background: black;
    color: white;

    @media(width <=768px) {
        margin-block-start: 0;
    }
}

#hero {
    display: flex;
    flex-flow: row wrap-reverse;
    align-items: center;
    justify-content: center;
    width: min(100%, 1400px);
    min-height: 360px;
    padding-inline: 1rem;
    margin: 0rem auto;
    box-sizing: border-box;

    & .hero__text-container {
        width: min(100%, 700px);
        padding-block-end: 3rem;
    }

    & .hero__title {
        font-size: min(7vw, 2.5rem);
        font-weight: 400;
        font-family: 'open sans light', 'open sans', 'helvetica', 'calibri';
    }

    & .hero__subtitle {
        font-size: 1.2rem !important;
        font-weight: normal !important;
        margin-block-end: 3rem;
        width: 75%
    }

    & .hero__text-cta {
        font-size: 1rem;
        color: white;
        font-weight: 600;
        min-width: 250px;
        display: inline-block;
        padding: 1rem 1.5rem;
        border-radius: 50px;
        text-align: center;

        &::after {
            content: '\f107';
            margin-inline-start: 1rem;
            font-family: 'DCOM-EDE';
            font-weight: normal;
        }
    }

    & .hero__image {
        width: min(60%, 550px);
        align-self: end;
        display: none;
    }

    @media(width<=1400px) {
        & .hero__image {
            border-radius: 50%;
            margin-block-end: 2rem;
            display: block;
        }

        & .hero__video-container {
            display: none;
        }

        & a {
            font-size: 1rem;
        }
    }

    @media(width<=500px) {
        & #hero-container {
            margin-block-start: 0;
        }

        & .hero__text-container {
            text-align: center;
        }

        & h3 {
            width: 100%;
        }

        & .hero__download-cta {
            margin-inline: 0;
            margin-block-end: 2em;
        }
    }

    /* BRIGHTCOVE HERO  */
    .hero__video-container {
        width: min(100%, 500px);
        display: flex;
        align-items: start;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }
}

/* SUBNAV --STYLES*/
#dossier-subnav-container {
    background: var(--accessible-teal);
    box-shadow: 0 1px 5px black;
    position: sticky;
    top: 48px;
    z-index: 10;

    & a,
    & a:visited {
        color: white;
    }

    & a:hover {
        text-decoration: underline;
    }

    & a:focus {
        outline: 1px solid;
        outline-offset: .5rem;
    }

    & .dossier-subnav {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        width: min(100%, 1400px);
        margin: 0rem auto;
        padding: 1rem;
    }

    & .dossier-subnav li {
        list-style: none;
        margin: 0;
        font-size: 1rem;
    }
}

@media(width <=768px) {

    /* TEMPLATE OVERRIDE */
    #dossier-subnav-container {
        top: 0;
    }

    .dossier-subnav li:not(:nth-child(4)) {
        display: none
    }

    .dossier-subnav li:nth-child(4) {
        margin-inline: auto
    }
}

/* INTRO */
#about-dossier-container {
    background-image: linear-gradient(0deg,#000a,#000a), url(/content/dam/html/us/2025/consulting/gen-ai-use-cases/img/ai-dossier-background-1920x600.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: black;
    background-position: center;
    /* min-height: 500px; */
    display: flex;
    align-items: center;

    & .about-dossier {
        color: white;
        width: min(100%, 800px);
        margin-inline: auto;
        padding: 5rem 1rem;
        text-align: center;
    }

    & .about-dossier__title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: .5rem;
    }
}

/* TWO COL CALLOUT */
#callout-1 {
    background-color: var(--teal-1);
}

.two-col-callout {
    width: min(100%, 1400px);
    margin-inline: auto;
    padding: 5rem 1rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;

    & .two-col-callout__text {
        max-width: 480px;
    }

    & .two-col-callout__image {
        max-width: 600px;
    }
}

/* INDUSTRY CUTS --STYLES*/
#industry-cuts {
    background-color: var(--teal-1);

    & .industry-cuts__container {
        width: min(100%, 1400px);
        margin-inline: auto;
        padding: 5rem 1rem;
    }

    & .industry-cuts__blocks {
        display: flex;
        gap: 3rem 1rem;
        justify-content: center;
        flex-flow: row wrap;
    }

    & .industry-cuts__block {
        width: min(100%, 370px);
        display: grid;
        justify-items: center;
        gap: 1rem;
    }

    & .industry-cuts__block__img {
        max-width: 100%;
    }

    @media(width<1024px) {
        & .indsutry-cuts__container {
            padding-block: 3rem;
        }
    }
}

/* LEADERS --STYLES*/
.get-in-touch {
    width: min(100%, 1400px);
    margin: 5rem auto;
    padding-inline: 1rem;
    display: flex;
    flex-flow: row wrap;

    & h3 {
        font-weight: 400;
        width: 100%;
        margin-block-end: 3rem;
    }

    & div {
        width: min(290px, 100%);
        box-sizing: border-box;
        display: inline-block;
        margin-block-end: 3rem;
    }

    & .united-states {
        width: max(100%, 300px);
        display: flex;
        flex-flow: row wrap;
        align-content: start;
        
        >p {
            width: 100%;
        }
    }
}

/* EXPLORE BANNER --STYLES*/
#explore-banner-container {
    background: url(/content/dam/html/us/2025/consulting/gen-ai-use-cases/img/dossier-ai-institute.jpg), black;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 360px;
    display: grid;
    align-items: center;
}

.explore-banner {
    display: grid;
    align-items: center;
    background: transparent;
    width: min(100%, 1400px);
    margin-inline: auto;
    padding-inline: 1rem;
    color: white;
    text-shadow: 0 2px 5px black;
    box-sizing: border-box;

    @media (width <=768px) {
        & {
            backdrop-filter: brightness(.5);
            -webkit-backdrop-filter: brightness(.5);
        }
    }

    & p {
        width: min(100%, 500px);
        margin-block: 0 2rem;
        padding-block: 1em;
    }

    & .explore-banner__cta {
        background: #007CB0;
        border: 1px solid #007cb0;
        text-decoration: none;
        text-shadow: none;
        font-weight: 600;
        font-size: 1rem;
        padding: .5rem 2rem;
        border-radius: 50px;
        width: fit-content;
        transition: .3s;
        color: white;
    }

    & .explore-banner__cta:visited {
        color: white;
    }

    & .explore-banner__cta:hover {
        border-color: currentColor;
        background: white;
        color: #007cb0;
        text-decoration: none;
    }
}

/* RECOMMENDED PAGES --STYLES */
#recommended-pages {
    & header {
        text-align: center;
    }

    & .recommended-pages__disclaimer {
        width: min(100%, 1400px);
        margin-inline: auto;
        margin-top: 3rem;
    }

    & .recommended-pages__card-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
        width: min(100%, 1400px);
        margin-inline: auto;
        padding-block: .5rem;
        overflow: hidden;

        & .recommended-pages__card-block {
            flex: 0 0 330px;
        }

        & .recommended-pages__card {
            display: block;
            width: min(100%, 330px);
            padding: 1rem;
            margin-inline: auto;
            background: white;
            color: black;
            border-radius: .5rem;
            border: 1px solid #f6f6f6;
            transition: .3s;
            box-shadow: 0 3px 6px #00000029;
            text-decoration: none;
            cursor: pointer;
            box-sizing: border-box;
            position: relative;

            &:hover .recommended-pages__card__title {
                text-decoration: underline;
            }

            &:hover .recommended-pages__card__image {
                background-size: 110%;
            }
        }

        & .recommended-pages__card__title {
            font-size: 1.25rem;
            font-weight: 400;
            margin-right: 2rem;
        }

        & .recommended-pages__card__title--full {
            margin-right: 0;
        }

        & .recommended-pages__card__external-icon {
            font-family: 'DCOM-EDE', sans-serif;
            font-size: 1rem;
            color: inherit;
            position: absolute;
            top: 1.5rem;
            left: calc(100% - 2rem);
        }

        & .recommended-pages__card__description {
            font-size: .9rem;
        }

        & .recommended-pages__card__image {
            border-radius: .5rem;
            background-image: radial-gradient(circle at center, var(--deloitte-green), white 50%);
            background-position: center;
            background-size: 100%;
            background-repeat: no-repeat;
            width: min(100%, 300px);
            aspect-ratio: 1;
            margin-inline: auto;
            display: inline-block;
            transition: .3s;
        }

        & .recommended-pages__card__label {
            font-weight: 600;
            font-size: .9rem;
            margin-bottom: .5rem;
        }

        & .recommended-pages__card__time {
            font-weight: normal;
        }
    }
}