.hdp {
    background-color: var(--dark-hdp);
    position: relative;
    display: flex;
    align-items: end;

    @media (min-width: 1200px) {
        max-height: 660px;
    }


    @media (max-width: 1200px) {
        align-items: center;
    }

    .decouvrir {
        display: none !important;
    }

    &.home {
        min-height: 70vh;
        max-height: unset;
        padding-bottom: 0px !important;

    }

    &:not(.home) {
        padding: 20px 0 0 0;
        align-items: end;
        min-height: 600px;

        .container {
            align-items: end;

            @media (min-width: 992px) and (max-width: 1199px) {
                align-items: center;
                width: 100%;
                flex-direction: column-reverse;
                gap: 30px;

                .hdp__content {
                    margin-bottom: 30px;
                }
            }

            .hdp__content {
                margin: auto;

                @media (min-width: 1200px) {
                    padding-bottom: 45px;

                    .hdp__intro {
                        padding-right: 30px;
                    }
                }

                @media (max-width: 1199px) {
                    text-align: center;
                }
            }
        }
    }


    &:after {
        content: '';
        background-image: url('../../img/bg_hdp.png');
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        background-repeat: no-repeat;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        background-position: right;
    }

    .container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        height: 100%;
        z-index: 1;
        position: relative;
        align-items: start;

        @media (max-width: 1100px) {
            flex-direction: column-reverse;
            gap: 50px;
        }

        h1:not(span) {
            color: var(--white);
        }

        span {
            font-family: var(--title-font);
        }

        .hdp__intro p {
            color: var(--cream);
            opacity: 0.75;
        }

        .hdp__image {
            max-width: 50%;
            height: 100%;
            display: flex;
            align-items: end;

            @media (max-width: 1100px) {
                max-width: 100%;
            }

            img {
                width: 100%;
                object-fit: contain;
            }
        }

        .hdp__content {
            display: flex;
            flex-direction: column;
            gap: 30px;

            @media (max-width: 1100px) {
                width: 100%;
            }

            @media (min-width: 1200px) {
                .section__btn {
                    text-align: left;
                }

                .cta {
                    margin: 0px !important;
                }
            }
        }
    }
}

.hdp.home {
    @media (min-width: 992px) {
        .decouvrir {
            background-color: var(--cream);
            width: 47px;
            height: 42px;
            border-radius: 50px 50px 0px 0px;
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: var(--transition);
            z-index: 1;
            cursor: pointer;

            &:before {
                border-radius: 0 0 100% 0;
                box-shadow: 5px 8px 0 var(--cream);
                height: 21px;
                content: "";
                left: -23px;
                position: absolute;
                transition: all 0.3s;
                width: 27px;
                bottom: -2px;
            }

            &:after {
                border-radius: 0 0 0 100%;
                box-shadow: -5px 8px 0 var(--cream);
                height: 21px;
                content: "";
                right: -23px;
                position: absolute;
                bottom: -1px;
                transition: all 0.3s;
                width: 27px;
            }

            .btn_slide {
                transition: var(--transition);

                &:before {
                    content: '';
                    width: 6px;
                    height: 5px;
                    border-radius: 50px;
                    background-color: var(--main-color2);
                    z-index: 11;
                    position: relative;
                    display: inline-block;
                    top: -6px;
                    transition: var(--transition);
                    bottom: 0;
                }

                &:after {
                    content: '';
                    background: linear-gradient(180deg, rgba(80, 120, 240, 0.6) 0%, rgba(243, 145, 24, 0) 80%);
                    width: 11px;
                    height: 70%;
                    position: absolute;
                    z-index: 10;
                    top: 50%;
                    transform: translate(-50%, -30%);
                    left: 50%;
                    border-radius: 50px;
                    transition: var(--transition);
                }
            }

            &:hover {
                .btn_slide {
                    &:before {
                        bottom: -10px !important;
                        top: 10px;
                    }

                    &:after {
                        background: linear-gradient(180deg, rgba(80, 120, 240, 0.3) 120%, rgba(243, 145, 24, 0) 0%);
                    }
                }

                .decouvrir__svg {
                    fill: var(--cream);
                }
            }

            .decouvrir__svg {
                position: absolute;
                top: -35px;
                left: 50%;
                transform: translateX(-50%);
                width: 85px;
                height: 70px;
                pointer-events: none;
                font-size: 12px;
                fill: var(--main-color1);
                text-transform: uppercase;
                transition: var(--transition);
                letter-spacing: 2px;
            }
        }
    }
}