body,
html { height: 100% }

section {
    padding: 100px 0;

    &:nth-child(odd) {
        background-color: $gray-200;
    }

    &.p-sm {
        padding: 30px 0 !important;
    }

    &.p-md {
        padding: 60px 0 !important;
    }

    &.has-bg-img {
        background-image: url(../imgs/bg-img-1.jpg);
        background-size: cover;
        background-position: center;
        min-height: 450px;
        position: relative;

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba($black, .7);
        }

        a {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 4px solid rgba($primary,.5);
            border-radius: 50%;
            width: 75px;
            height: 75px;
            padding: 13px 0 4px 23px;

            i {
                display: inline-block;
                height: 0;
                width: 0;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;        
                border-left: 30px solid $primary;
            }
        }
    }

    &.height-auto {
        height: auto !important;
        min-height: auto !important;
        max-height: auto !important;
    }
}

.has-bg-overlay {
    position: relative;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../imgs/header.jpg) no-repeat center center fixed;
      	-webkit-background-size: cover;
      	-moz-background-size: cover;
      	-o-background-size: cover;
      	background-size: cover;
        z-index: -1;
        opacity: .4;
    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: $black;
        z-index: -2;

    }

}

// middle center
.middle-items {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


// section title
.section-title {
    font-size: $section-title-font-size;
}


// section height
.has-height-xs {
    min-height: 75px;
}
.has-height-sm {
    min-height: 150px;
}
.has-height-md {
    min-height: 300px;
}
.has-height-lg {
    min-height: 500px;
}


/* about */
.about-wrapper {
    margin-left: 70px;
    position: relative;
    
    .content {
        background-color: $white;
        @include custom-box-shadow(blur,$gray-500,$gray-600,.3,.3);
        border-radius: $card-border-radius;
        padding: 30px;
        position: relative;
    }

    .after {
        position: absolute;
        top: 10%;
        left: -60px;
        background: $primary;
        @include custom-box-shadow(blur,$gray-500,$gray-600,.3,.3);         
        width: 200px;
        height: 80%;
        color: $white;
        border-radius: $card-border-radius;
        h1 {
            transform: rotate(-90deg);
            position: absolute;
            top: 43%;
            left: -45px;
            font-size: 35px;
        }
    }

}

@include media-breakpoint-down(sm) {
    .about-wrapper {
        margin-left: 0;

        .after {
            display: none;
        }
    }
}

.img-wrapper {
    position: relative;

    .after {
        position: absolute;
        top: 10%;
        left: -30px;
        width: 100px;
        height: 80%;
        @include custom-box-shadow(blur,$gray-500,$gray-600,.3,.3);
        border-radius: $card-border-radius;
        background: $primary;
    }

    .after.right {
        left: auto;
        right: -30px;
    }

    img {
        position: relative;
        width: 90%;
        border-radius: $card-border-radius;
        @include custom-box-shadow(blur,$gray-500,$gray-900,.5,.7);
    }

    @include media-breakpoint-down(sm) {
        .after {
            display: none;
        }

        img {
            display: block;
            margin: 20px 0;
        }
    }
}


/* testmonial */
.testmonial-wrapper {
    background: $gray-200;
    @include material-box-shadow(material-box-shadow,$gray-500,.4);
    border-radius: $card-border-radius;
    padding: 0 20px 20px;
    margin-bottom: 60px;

    img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-bottom: 15px;
        transform: translateY(-45px);
        background: white;
        padding: 5px;
    }

    .title {
        margin-top: -40px;
    }

}