/* ROOT VARIABELES */
:root {
    --text-default-color: #3E3E3E;

    --max-width-layout: 1312px;

    --primary-linear-gradient: linear-gradient(134.71deg, rgba(0, 176, 255, 0.977355) -0.5%, #861FFC 76.33%, #861FFC 98.45%);
    --secondary-linear-gradient: linear-gradient(134.71deg, #E0F5FF 0%, #F6EEFF 78%, #E8D4FF 100%);
}

* {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

/* FONTS */

/* HEADER */
.header {
    position: relative;
    width: 100%;
    height: 456px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header > * {
    position: relative;
    z-index: 1;
}

.header:before {
    content: ' ';
    position: absolute;
    background: var(--primary-linear-gradient);
    top: -96px;
    bottom: 0;
    left: 0;
    right: 0;
}

.header .inner {
    max-width: var(--max-width-layout);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .left {
        h1 {
            font-style: normal;
            font-weight: 700;
            font-size: 45px;
            line-height: 61px;
            color: #ffffff;
            position: relative;
            margin: 0 0 48px 0;

            
        }

        h2 {
            font-style: normal;
            font-weight: 400;
            font-size: 20px;
            line-height: 27px;
            color: #FFFFFF;
            
        }
    }

    .right {
        height: 100%;
        .poster {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* margin: 36px 0 48px 0; */

            &.bottom {
                justify-content: flex-end;
            }

            /* img {
                max-height: 300px;
                width: 100%;
            } */
        }
    }
}

/* TITLES */
/* Section Titles */
.section-title {
    font-family: 'Open Sans' !important;
    width: 100% !important;
    max-width: 100% !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    background: linear-gradient(134.71deg, #169FF2 -0.5%, #5C0DCE 98.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title.center {
    text-align: center;
}

.section-title span {
    background: linear-gradient(134.71deg, #169FF2 -0.5%, #5C0DCE 98.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    max-width: 687px !important;
    font-family: 'Open Sans' !important;
    width: 100% !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 40px;
    color: #3E3E3E;
    margin-top: 0;
    text-align: center;
}

.section-description {
    padding: 0 !important;
    max-width: 611px !important;
    font-family: 'Open Sans' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    width: 100% !important;
    line-height: 27px !important;
    margin: 0 !important;
    color: #3E3E3E !important;
        text-align: center;
}

.section-description.center, .section-subtitle.center {
    text-align: center;
    margin-left: 50% !important;
    transform: translateX(-50%);
}

/* BUTTONS */
.button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: #169FF2;
    border-radius: 8px;
    box-sizing: border-box;
    align-self: center;
    margin: 12px 0;
    text-decoration: none;
    color: #ffffff;
    padding: 0 24px;
    font-weight: 600;
    border: 1px solid #fff;
    transition: background .25s, color .25s, opacity 1s, transform .35s ease-out;

    &.outline {
        color: #169FF2;
        border-color: #169FF2;
        background-color: transparent;

        &:hover {
            background-color: #169FF2;
            color: #ffffff;
        }
    }
}


@media only screen and (max-width: 732px) {
    .header {
        height: 600px;
    }

    .header .inner {
        padding: 0 28px;
        flex-direction: column;
        overflow: hidden;

        .left {
            h1 {
                font-size: 35px;
                font-weight: 700;
                margin-top: 60px;
                text-align: center;

                &::after {
                    width: 24px;
                    left: 50%;
                    height: 3px;
                    margin-left: -12px;
                }
            }

            h2 {
                font-size: 20px;
                text-align: center;
            }
        }

        .right {
            .poster {
                display: flex;
                align-items: center;

                img {
                    width: 100%;
                    height: 100%;
                }

                &.bottom {
                    margin-top: 60px;

                    img {
                        height: 100%;
                        width: 115%;
                    }
                }
            }
            
        }
    }

    .section-title{
        align-self: center;
        text-align: center;
    }

    .section-subtitle{
        font-size: 30px;
    }
}