/* ----------------------------------

Template Name: Webfix - Creative Multipurpose Template


    USAGE: 
    
<div class="banner-area bg-fixed" style="background-image: url(assets/images/background/city.webp);">
    <div class="box-cell">
        <div class="banner-text">
            <div class="banner-main-title wow fadeIn">
                <h1 style="font-size:40pt;">
                    C-BOX
                </h1>
                <h1>
                    L'evoluzione delle competenze
                </h1>
                <h5>La piattaforma di Open Badge che eleva l'esperienza formativa <br />in opportunità per organizzazioni e persone</h5>
            </div>
        </div>
        <div class="wavesshape">
            <img alt="Shape" src="assets/images/background/waves-bg.png" style="width:100%">
        </div>
    </div>
</div>

    OPPURE


    <div class="banner-area bg-fixed shapedivider" style="background-image: url(assets/images/background/city.webp);">
    <div class="box-cell">
        <div class="banner-text">
            <div class="centered wow animate__fadeIn" data-wow-duration="1.5s">
                <h1 style="font-size:40pt;">
                    C-BOX
                </h1>
                <h1>
                    L'evoluzione delle competenze
                </h1>
                <h5>La piattaforma di Open Badge che eleva l'esperienza formativa <br />in opportunità per organizzazioni e persone</h5>
            </div>
        </div>
    </div>
</div>

 */


.banner-main-title {
    text-align: center;
    color: white;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -60%);
    font-style: normal;
    font-weight: 600;
    line-height: 45px;
    letter-spacing: 0em;
    text-shadow: 0px 4px 4px rgb(0 0 0 / 40%);
    width: fit-content;
    font-size: 30pt;
}

    .banner-main-title h1 {
        line-height: 6rem;
        font-weight: 600;
        font-size: 35pt;
    }

    .banner-main-title h5 {
        font-size: 15pt;
        font-weight: 500;
        line-height: 1.2;
        margin-top: 15pt;
    }


@media (max-width: 990px) {
    .banner-main-title {
        padding-right: 10px;
        top: 39%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 770px) {
    .banner-main-title {
        padding: 30pt;
        top: 47%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

        .banner-main-title h1 {
            line-height: 40pt;
            margin-bottom: 30pt;
        }
}

.bg-fixed {
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

.banner-area,
.banner-area div {
    height: 100%;
}

.banner-area {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(../img/background/iStock-principale-intera.webp);
}

    .banner-area .box-cell {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

        .banner-area .box-cell,
        .banner-area .box-cell div {
            height: auto;
        }

    .banner-area .banner-text {
        min-height: 580pt
    }

    .banner-area .wavesshape {
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        position: absolute;
        width: 100%;
    }

    .banner-area.wavesshape {
        position: relative;
        z-index: 1;
    }


.shapedivider {
    overflow: hidden;
    position: relative;
}

    .shapedivider::before {
        content: '';
        font-family: 'shape divider from ShapeDividers.com';
        position: absolute;
        bottom: -1px;
        left: -1px;
        right: -1px;
        top: -1px;
        z-index: 3;
        pointer-events: none;
        background-repeat: no-repeat;
        background-size: 156% 94px;
        background-position: 50% 100%;
        background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 773.74 154.98"><g fill="%23ffffff"><path d="M773.74 154.98H0L386.87 77.5Z"/><path d="M773.74 154.98 386.87 0 0 154.98Z" opacity=".66"/></g></svg>');
    }

@media (min-width:768px) {
    .shapedivider::before {
        background-size: 166% 89px;
        background-position: 50% 100%;
    }
}

@media (min-width:1025px) {
    .shapedivider::before {
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 136% 102px;
        background-position: 50% 100%;
    }
}

@media (min-width:2100px) {
    .shapedivider::before {
        background-size: 136% calc(2vw + 102px);
    }
}