/***

==================================================================
	Call To Action
==================================================================

***/

.call-to-action {
    position: relative;
    padding: 240px 0 400px;
    .bg{
        &::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2);
        }
    }
    .outer-box{
        text-align: center;
        .play-now-two{
            position: relative;
            font-size: 40px;
            color: var(--theme-color-light);
            height: 128px;
            width: 128px;
            border: 1px solid var(--theme-color-light);
            border-radius: 50%;
            line-height: 128px;
            display: inline-block;
            &:hover {
                background-color: var(--theme-color1);
                border-color: var(--theme-color1);
            }
        }
    }
}

/***

==================================================================
	Call To Action Two
==================================================================

***/

.call-to-action-two {
    position: relative;
    padding: 200px 0 200px;
    @include media-breakpoint-down(sm){
        padding: 120px 0;
    }
    .bg{
        background-position: top;
        &::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }
    }
    .inner-box{
        text-align: center;
        @include flex-center;
        .sec-title{
            position: relative;
            h2 {
                color: var(--theme-color-light);
                font-size: 80px;
                line-height: 92px;
                @include media-breakpoint-down(sm){
                    font-size: 42px;
                    line-height: 1.2em;
                }
            }
        }
    }
}

/***

==================================================================
	Call To Action Three
==================================================================

***/

.call-to-action-three {
    position: relative;
    padding: 105px 0 435px;
    .bg{
        background-position: top;
        &::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }
    }
    .inner-box{
        text-align: center;
        @include flex-center;
        .sec-title{
            position: relative;
            .icon-leave-4 {
                margin: 0 auto;
            }
            h2 {
                color: var(--theme-color-light);
                text-transform: uppercase;
            }
        }
    }
}

/***

==================================================================
	Call To Action Four
==================================================================

***/

.call-to-action-four {
    position: relative;
    padding: 135px 0 380px;
    .bg{
        background-position: top;
        &::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.1);
        }
    }
    .inner-box{
        text-align: center;
        .sec-title{
            position: relative;
            .icon-heart {
                position: relative;
                display: block;
                margin: 0 auto 50px;
                animation: pulse 2s infinite linear;
                &:after,
                &:before{
                    position: absolute;
                    left: 100%;
                    top: 48px;
                    height: 1px;
                    width: 130px;
                    margin-left: 18px;
                    border-bottom: 1px solid #ffffff;
                    content: "";
                }
                &:after{
                    left: auto;
                    right: 100%;
                    margin-left: 0;
                    margin-right: 18px;
                }
            }
            h1 {
                color: var(--theme-color-light);
                font-size: 100px;
                font-weight: 400;
                font-family: var(--style-font);
                line-height: 1em;
                margin-bottom: 0;
                @include media-breakpoint-down(lg){
                    font-size: 80px;
                }
                @include media-breakpoint-down(md){
                    br {
                        display: none;
                    }
                }
                @include media-breakpoint-down(sm){
                    font-size: 60px;
                }
            }
        }
    }
}

/***

==================================================================
	Call To Action Five
==================================================================

***/

.call-to-action-five {
    position: relative;
    padding: 100px 0 370px;
    @include media-breakpoint-down(lg){
        padding-bottom: 300px;
    }
    .bg {
        filter: grayscale(1);
        @include media-breakpoint-down(lg){
            &:before{
                @include overlay;
                content: "";
                background-color: var(--theme-color-dark);
                opacity: .7;
            }
        }
    }
    .icon-flower-21 {
        margin: 0 auto 30px;
    }
    .inner-box{
        text-align: center;
        @include flex-center;
        .sec-title{
            position: relative;
            .sub-title {
                color: var(--theme-color-light);
                font-size: 48px;
                font-family: var(--style-font);
                font-weight: 400;
                margin-bottom: 50px;
            }
            h2 {
                font-size: 90px;
                line-height: 1.1;
            }
        }
    }
}