:root {
    --primary: #F37500;
    --derventio: #1976D2;
    --horizontal-edge: 150px;
}

/* #region General Styles */

.derventio-button {
    width: fit-content;
    height: fit-content;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--derventio);
    color: #FFFFFF;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    transition: 0.3s;
}

    .derventio-button:hover {
        transform: scale(1.08);
    }

section {
    padding-left: var(--de-opt2-page-gutter);
    padding-right: var(--de-opt2-page-gutter);
}

.indent-section {
    padding-left: 22px;
    border-left: 4px var(--primary) solid;
}

.box-section {
    padding: 0px var(--de-opt2-page-gutter);
}

    .box-section .box {
        width: 100%;
        height: fit-content;
        background: #eef6fb;
        padding: 35px 50px;
        border-radius: 16px;
    }

    .box-section .box h2 {
        font-size: 28px !important;
        font-weight: 800 !important;
        letter-spacing: 0.03em;
        text-align: center;
    }

.separated-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.separated-list div:not(.sep) {
    width: 30%;
}

.separated-list .sep {
    width: 2px;
    background: var(--primary);
}

/* #endregion */

/* #region Header Styles */

.simple-header {
    height: 100px;
    background: #FFF;
    border-bottom: 1px solid var(--de-opt2-border);
    box-shadow: 0 8px 28px rgba(7, 31, 68, 0.06);
    z-index: 999;
}

    .simple-header::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 5px;
        background: var(--primary);
    }

    .simple-header .header-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 85px;
        height: calc(100% - 5px);
        padding: 0px var(--horizontal-edge);
        margin-top: 5px;
    }

    .simple-header .logo-link {
        height: 80px;
    }

    .simple-header .header-logo {
        height: 80px;
    }

    .simple-header .link-group {
        display: flex;
        flex-direction: row;
        gap: 24px;
    }

        .simple-header .link-group a {
            position: relative;
            font-weight: 600;
            letter-spacing: 0.03em;
            color: #333333;
            padding: 10px 0px;
            text-decoration: none;
        }

        .simple-header .link-group a::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 0px;
            height: 1.5px;
            background-color: var(--primary);
            transform: translateX(-50%);
            transition: width 0.3s ease;
        }

        .simple-header .link-group a:hover::after {
            width: 100%;
        }

    .simple-header .btn-primary {
        margin-left: auto;
    }

/* #endregion */

/* #region Hero Styles */

.hero-section {
    display: flex;
    flex-direction: row;
    padding-top: 0px;
    padding-bottom: 40px;
}

    .hero-section .hero-info-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        padding-top: 20px;
        padding-right: 30px;
    }

        .hero-section .hero-info-container h1 {
            font-size: 60px !important;
            font-weight: 900 !important;
            margin: 0px;
        }

        .hero-section .hero-info-container .button-holder {
            display: flex;
            flex-direction: row;
            gap: 24px;
        }

        .hero-section .hero-info-container .indent-section {
            width: 85%;
        }

    .hero-section .system-preview {
        padding: 25px 40px 0px;
    }

    .hero-section .system-preview img {
        width: 100%;
    }

/* #endregion */

/* #region Challenges Section */

.challenges-section {

}

    .challenges-section .headed-section {
        display: flex;
        flex-direction: column;
    }

        .challenges-section .headed-section h3 {
            font-size: 20px !important;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .challenges-section .headed-section p {
            font-size: 16px !important;
            font-weight: 500;
        }

/* #endregion */

/* #region Cycle Section */

.cycle-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 25px;
    padding-bottom: 25px;
}

    .cycle-section h2 {
        height: fit-content;
        font-size: 28px !important;
        font-weight: 800 !important;
        letter-spacing: 0.03em;
        text-align: center;
    }

    .cycle-section .process-list {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: start;
        gap: 40px;
        width: 100%;
    }

    .cycle-section .process-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100px;
    }

        .cycle-section .process-item i {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            font-size: 50px;
            background: var(--primary);
            color: #FFF;
            border-radius: 100%;
        }

        .cycle-section .process-item span {
            font-weight: 800;
            text-align: center;
        }

        .cycle-section .process-list i.fa-arrow-right-long {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100px;
            font-size: 38px;
            transform: scaleX(1.5);
        }

        /* Colours repeat every 3 */

        .cycle-section .process-item:nth-of-type(3n + 1) i {
            background: #0AA3A6;
        }

        .cycle-section .process-item:nth-of-type(3n + 2) i {
            background: #F37500;
        }

        .cycle-section .process-item:nth-of-type(3n) i {
            background: var(--derventio);
        }

    .cycle-section p {
        width: 60%;
        font-size: 18px !important;
        text-align: center;
    }

/* #endregion */

/* #region Core Processes Section */

.core-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 50px;
}

    .core-section h2 {
        height: fit-content;
        font-size: 28px !important;
        font-weight: 800 !important;
        letter-spacing: 0.03em;
        text-align: center;
        padding-top: 15px;
        border-top: 2px solid #DDDDDD;
    }

    .core-section .core-list {
        display: flex;
    }

        .core-section .core-item {
            display: flex;
            flex-direction: column;
            width: 17%;
            padding: 0px 32px;
            border-left: 2px solid #DDDDDD;
        }

        .core-section .core-item:last-of-type {
            border-right: 2px solid #DDDDDD;
        }

            .core-section .core-item h3 {
                height: 72px;
                font-size: 20px !important;
                font-weight: 800;
                margin-bottom: 10px;
            }

            .core-section .core-item p {
                font-size: 16px !important;
                font-weight: 500;
                margin-bottom: auto !important;
            }


            .core-section .core-item::after {
                content: '';
                display: block;
                width: 65%;
                height: 3px;
                margin-top: 24px;
                background: var(--item-colour);
            }

            /* Colours repeat every 3 */
            .core-section .core-item:nth-of-type(3n + 1) {
                --item-colour: #F37500;
            }

            .core-section .core-item:nth-of-type(3n + 2) {
                --item-colour: var(--derventio);
            }

            .core-section .core-item:nth-of-type(3n) {
                --item-colour: #0AA3A6;
            }

/* #endregion */

/* #region Who Section */

.who-section {
    
}

    .who-section .box {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .who-section .who-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

        .who-section .who-item {
            display: flex;
            flex-direction: column;
        }

        .who-section .who-item i {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 75px;
            height: 75px;
            font-size: 36px;
            color: #FFFFFF;
            margin-right: 15px;
            border-radius: 100%;
        }

        .who-section .who-item .top {
            display: flex;
            flex-direction: row;
        }

            .who-section .who-item .top div {
                width: calc(100% - 90px);
            }

            .who-section .who-item h3 {
                font-size: 20px !important;
                font-weight: 900;
                margin-bottom: 10px;
            }

            .who-section .who-item div:not(.top) {
                margin-top: auto;
            }

        .who-section .who-item:first-child {
            padding-right: 35px;
        }

        .who-section .who-item:last-child {
            padding-left: 35px;
        }

        .who-section .who-item ul {
            list-style: none;
            padding-left: 0px;
            margin: 10px 0px 0px 5px;
        }

        .who-section .who-item li {
            position: relative;
            padding-left: 1.5em;
            margin-bottom: 5px;
        }

        .who-section .who-item li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.4em;
            width: 10px;
            height: 10px;
            background: #F37500;
            border-radius: 50%;
        }

            /* Colour Styles */

            .who-section .who-item.green i {
                background: #0AA3A6;
            }

            .who-section .who-item.green h3 {
                color: #0AA3A6;
            }

            .who-section .who-item.green li::before {
                background: #0AA3A6;
            }

            .who-section .who-item.orange {
                padding: 0px 35px;
                border-left: 2px solid #DDDDDD;
                border-right: 2px solid #DDDDDD;
            }

            .who-section .who-item.orange i {
                background: #F37500;
            }

            .who-section .who-item.orange h3 {
                color: #F37500;
            }

            .who-section .who-item.orange li::before {
                background: #F37500;
            }

            .who-section .who-item.blue i {
                background: #1976D2;
            }

            .who-section .who-item.blue h3 {
                color: #1976D2;
            }

            .who-section .who-item.blue li::before {
                background: #1976D2;
            }

/* #endregion */

/* #region Case Studies Section */

.case-studies-section {
    padding-top: 50px;
}

    .case-studies-section h2 {
        font-size: 28px !important;
        font-weight: 800 !important;
        letter-spacing: 0.03em;
        text-align: center;
        margin-bottom: 15px;
    }

    .case-studies-section .case-studies-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
    }

        .case-studies-section .case-studies-list .case-study {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
            padding: 16px 24px;
            border: 1px solid #DDDDDD;
            border-radius: 10px;
        }

        .case-studies-section .case-studies-list .details {
            display: flex;
            flex-direction: column;
            gap: 18px;
            width: 60%;
        }

            .case-studies-section .case-studies-list p {
                font-weight: 600;
            }

            .case-studies-section .case-studies-list .quote {
                font-weight: 600;
            }

            .case-studies-section .case-studies-list .details div {
                display: flex;
                flex-direction: column;
                margin-top: auto;
            }

        .case-studies-section .case-studies-list img {
            width: 40%;
            padding-top: 15px;
            padding-right: 25px;
            object-fit: contain;
            object-position: top;
        }

        .case-studies-section .case-studies-list a {
            display: inline-block;
            width: fit-content;
            height: fit-content;
            font-weight: 600;
            color: var(--derventio);
            margin-top: auto;
            text-decoration: none;
            transition: 0.2s;
        }

            .case-studies-section .case-studies-list a:hover {
                transform: scale(1.07);
            }

/* #endregion */

/* #region CTA Section */

.cta-box {
    padding-top: 25px;
    padding-bottom: 25px;
}

.cta-box .box {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

    .cta-box .info-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-right: 25%;
        border-right: 2px solid #DDDDDD;
    }

    .cta-box .info-section h2 {
        text-align: left !important;
        margin-bottom: 4px;
    }

    .cta-box .info-section .btn {
        width: fit-content;
    }

    .cta-box .list-section {
        padding-left: 50px;
    }

        .cta-box .list-section h3 {
            font-size: 20px !important;
            font-weight: 800;
        }


        .cta-box .list-section ul {
            list-style: none;
            padding-left: 0px;
            margin: 10px 0px 0px 5px;
        }

        .cta-box .list-section li {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        .cta-box .list-section li i {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
            font-size: 14px !important;
            background: var(--primary);
            color: #FFFFFF;
            padding-top: 1px;
            border-radius: 50%;
        }

/* #endregion */

/* #region Responsive Styles */



/* #region Mobile Styles */

@media(max-width: 767px) {


    .separated-list {
        flex-direction: column;
        gap: 20px;
    }

        .separated-list div {
            width: 100% !important;
            background: #ffffff;
            padding: 10px 10px 10px 25px;
            border-left: 4px solid var(--primary);
            border-start-start-radius: 6px;
            border-end-start-radius: 6px;
        }

            .separated-list .headed-section h3 {
                font-size: 18px !important;
                margin-bottom: 4px;
            }

            .separated-list .headed-section p {
                font-size: 14px !important;
            }

        .separated-list .sep {
            /*height: 2px;*/
            display: none;
        }

    .box-section .box {
        padding: 15px 15px;
    }

    .hero-section {
        flex-direction: column;
        padding-bottom: 25px;
    }

        .hero-section .system-preview {
            padding: 0px 25px 0px;
            order: 1;
        }

        .hero-section .hero-info-container {
            gap: 12px;
            padding: 0px;
            order: 2;
        }

            .hero-section .hero-info-container h1 {
                font-size: 40px !important;
            }

        .hero-section .hero-info-container .indent-section {
            width: 100%;
        }

    .hero-section .button-holder {
        flex-direction: column !important;
        gap: 12px !important;
    }



    .cycle-section {
        padding-left: 20px;
        padding-right: 20px;
    }

        .cycle-section h2 {
            font-size: 22px !important;
        }

        .cycle-section .process-list {
            flex-direction: column;
            align-items: center;
            gap: 2px;
            width: fit-content;
            margin: 0 auto;
        }

        .cycle-section .process-item {
            flex-direction: column;
            align-items: center;
            gap: 0px;
            width: auto;
        }

            .cycle-section .process-item i {
                flex-shrink: 0;
                width: 64px;
                height: 64px;
                font-size: 30px;
            }

            .cycle-section .process-item span {
                text-align: left;
                font-size: 17px;
            }

        .cycle-section .process-list i.fa-arrow-right-long {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 64px;
            height: 28px;
            font-size: 16px;
            transform: rotate(90deg) scaleX(1.5);
        }

        .cycle-section p {
            width: 100%;
            font-size: 16px !important;
        }




    .core-section {
        padding-bottom: 25px;
    }

    .core-section h2 {
        padding-top: 25px;
    }
    
    .core-section .core-list {
        flex-direction: column;
        gap: 16px;
    }

        .core-section .core-list .core-item {
            width: 100%;
            background: #eef6fb;
            padding: 10px 10px 10px 25px;
            border-left: 4px solid var(--item-colour);
            border-start-start-radius: 6px;
            border-end-start-radius: 6px;
        }

            .core-section .core-list .core-item h3 {
                height: fit-content;
                font-size: 18px !important;
                margin: 0px;
            }

            .core-section .core-list .core-item p {
                font-size: 14px !important;
            }

        .core-section .core-list .core-item::after {
            display: none;
        }






    .who-section .who-list {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 10px;
    }

        .who-section .who-item {
            padding: 0px !important;
            border: 0px !important;
        }

            .who-section .who-item .top div {
                width: calc(100% - 65px);
            }

            .who-section .who-item i {
                width: 50px;
                height: 50px;
                font-size: 28px;
            }

            .who-section .who-item h3 {
                font-size: 18px !important;
                margin-bottom: 5px;
            }

            .who-section .who-item p {
                font-size: 14px !important;
            }

            .who-section .who-item ul {
                margin: 5px 0px 0px 65px;
            }

                .who-section .who-item div:not(.top) {
                    margin: 0px;
                }

            .who-section .who-item li {
                font-size: 14px !important;
                padding-left: 1em;
            }

                .who-section .who-item li::before {
                    width: 7px;
                    height: 7px;
                    top: 0.45em;
                }



    .case-studies-section {
        padding-top: 25px;
    }

    .case-studies-section .case-studies-list {
        grid-template-columns: 1fr;
    }

        .case-studies-section .case-studies-list .case-study {
            flex-direction: row-reverse;
        }

        .case-studies-section .case-studies-list img {
            padding: 15px 0px 0px 15px;
        }

        .case-studies-section .case-studies-list a {
            font-size: 15px !important;
            margin-top: -24px;
        }

    .cta-box .box {
        grid-template-columns: 1fr;
    }

        .cta-box .info-section {
            padding: 0px;
            margin-bottom: 25px;
            border: 0px;
        }
            
            .cta-box .info-section p {
                font-size: 14px !important;
            }

            .cta-box .info-section .btn {
                width: 100%;
            }

        .cta-box .list-section {
            padding: 0px;
        }

            .cta-box .list-section h3 {
                font-size: 18px !important;
            }

            .cta-box .list-section li {
                font-size: 14px !important;
                margin-left: 28px;
            }

            .cta-box .list-section li i {
                position: absolute;
                width: 18px;
                height: 18px;
                font-size: 12px !important;
                margin-left: -28px;
            }
}

/* #endregion */

/* #region Tablet Styles */

@media (min-width: 768px) and (max-width: 1200px) {
   
    .separated-list {
        flex-direction: column;
        row-gap: 15px;
    }

        .separated-list .sep {
            display: none;
        }

        .separated-list .headed-section {
            width: 100% !important;
            background: #FFFFFF;
            padding: 10px 5px 10px 25px;
            border-left: 4px solid var(--primary);
            border-radius: 6px;
        }

    .hero-section .hero-info-container {
        width: 100%;
    }

        .hero-section .hero-info-container h1 {
            width: 50%;
            font-size: 40px !important;
        }

        .hero-section .hero-info-container p {
            width: 55%;
        }

        .hero-section .hero-info-container .button-holder {
            width: 100%;
        }

        .hero-section .hero-info-container .indent-section {
            width: 100%;
        }

            .hero-section .hero-info-container .indent-section p {
                width: 100%;
            }

    .hero-section .system-preview {
        position: absolute;
        padding: 30px 20px 0px 50%;
    }





    .cycle-section .process-list {
        justify-content: space-between;
        gap: 10px;
    }

        .cycle-section .process-list .process-item {
            width: 70px;
        }

            .cycle-section .process-list .process-item i {
                width: 70px;
                height: 70px;
                font-size: 36px;
            }

            .cycle-section .process-list .process-item span {
                width: 150%;
            }

        .cycle-section i.fa-arrow-right-long {
            height: 70px !important;
            font-size: 24px !important;
        }

    .cycle-section p {
        width: 100%;
    }


    
    .core-section .core-list {
        flex-wrap: wrap;
        row-gap: 16px;
        column-gap: 16px;
    }

        .core-section .core-list .core-item {
            width: calc(50% - 8px);
            background: #eef6fb;
            padding: 5px 10px 5px 25px;
            border-left: 4px solid var(--item-colour);
            border-right: 0px;
            border-radius: 6px;
        }

        .core-section .core-list .core-item h3 {
            height: fit-content;
            margin-bottom: 5px;
        }

        .core-section .core-list .core-item::after {
            display: none;
        }

    

    .who-section .who-list {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

        .who-section .who-list .who-item {
            padding: 0px;
            border: 0px;
        }

        .who-section .who-list .who-item .top div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 0px;
        }

        .who-section .who-list .who-item .top h3 {
            margin-bottom: 5px;
        }

        .who-section .who-list .who-item ul {
            padding-left: 90px;
            margin-top: 5px;
        }




    .case-studies-section .case-studies-list {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }

        .case-studies-section .case-studies-list .case-study {
            align-items: center;
        }

        .case-studies-section .case-studies-list .case-study img {
            width: 200px;
            max-height: 150px;
            padding-top: 0px;
        }
        
        .case-studies-section .case-studies-list .case-study .details {
            width: calc(100% - 200px);
        }

        .case-studies-section .case-studies-list .case-study a {
            margin-top: -36px;
            margin-left: auto;
        }

    .cta-box .box {
        column-gap: 20px;
    }

        .cta-box .box .info-section {
            width: 100%;
            padding: 0px;
            border: 0px;
        }

        .cta-box .box .list-section {
            width: 100%;
            padding: 0px;
            border: 0px;
        }

        .cta-box .box .list-section li {
            margin-left: 30px;
        }

        .cta-box .box .list-section li i {
            position: absolute;
            margin-left: -30px;
        }

}

/* #endregion */

/* #region Smaller Desktop Styles */

@media (min-width: 1200px) and (max-width: 1800px) {
    .hero-section .hero-info-container {
        width: 50%;
    }

    .hero-section .system-preview {
        width: 50%;
        padding: 40px 0px 0px;
    }



    .cycle-section p {
        width: 100%;
    }

    .core-section .core-item h3 {
        min-height: 96px;
    }

}

/* #endregion */

/* #endregion */