@import '_colors';
@import 'custom_fonts';

.banner {
    height: 30vh;
    background-image: url('../images/cover-image.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    position: relative;

    &:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgba($color: $dark_brown, $alpha: 0.6)
    }

    h3 {
        text-align: center;
        align-self: center;
        font-size: $heading_size;
        color: white;
        z-index: 1;
    }
}

.about-content {
    width: 90%;
    margin: 50px auto;

    .inner-container {
        display: flex;
        justify-content: space-between;

        .description {
            width: 60%;
            align-self: center;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .heading {
                font-weight: bold;
                font-size: $heading_size;
            } 
        }
    }

    figure {
        width: 30%;

        img {
            width: 100%;
        }
    }

    p {
        margin-top: 30px;
    }
}

#our-team {
    width: 90%;
    margin: 30px auto 100px;

    h3 {
        font-size: $heading_size;
        color: $dark_brown;
        text-align: center;
    }

    .owl-team {
        margin: 50px 0;
    }

    .section-container {
        margin: 0 20px;
    }

    figure {
        width: 100%;
        display: block;
        margin: 0 auto;

        img {
            width: 100%;
        }
    }

    p {
        text-align: center;
        margin-top: 10px;
    }

    .owl-team-btn {
		margin: 20px auto;
		text-align: center;
		padding: 20px 0;
	
		i {
			font-size: 16px;
			padding: 0 10px;
			color: $blue;
			cursor: pointer;
		}
	}
}