/* :: 12.0 About CSS */

.about-us-content {
    position: relative;
    z-index: 1;

    h2 {
        font-size: 48px;
        display: block;
        margin-bottom: 25px;

        @media #{$breakpoint-lg} {
            font-size: 36px;
        }

        @media #{$breakpoint-md} {
            font-size: 30px;
        }

        @media #{$breakpoint-xs} {
            font-size: 30px;
        }
    }
}

.about-us-thumbnail {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-right: 100px;

    img {
        width: 100%;
    }

    @media #{$breakpoint-md} {
        padding-right: 0;
    }

    @media #{$breakpoint-xs} {
        padding-right: 0;
    }
}

.uza-video-area {
    position: absolute;
    top: 50%;
    right: 65px;
    z-index: 99;
    @include transform(translateY(-50%));

    @media #{$breakpoint-md} {
        right: auto;
        left: 50%;
        @include transform(translate(-50%, -50%));
    }

    @media #{$breakpoint-xs} {
        right: auto;
        left: 50%;
        @include transform(translate(-50%, -50%));
    }

    .video-play-btn {
        display: inline-block;
        border-radius: 50%;
        width: 70px;
        height: 70px;
        background-color: $primary;
        color: $white;
        line-height: 70px;
        text-align: center;
        font-size: 24px;

        i {
            padding-left: 5px;
        }

        &:focus,
        &:hover {
            box-shadow: none;
            background-color: $primary;
        }
    }
}

.uza-about-us-area {
    position: relative;
    z-index: 1;

    .about-bg-pattern {
        position: absolute;
        width: 40%;
        left: 0;
        bottom: 0;
        z-index: -1;
        height: 100%;

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

.uza-video-area {
    .video-play-btn {
        @include transform(scale(0.93));

        &:after {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            content: '';
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            top: 0;
            left: 0;
            padding: 0;
            z-index: -1;
            box-shadow: 0 0 0 2px $primary;
            opacity: 1;
            @include transform(scale(0.9));
            @include animation(sonarEffect 1.3s ease-out 75ms infinite);
        }
    }
}

@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }

    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }

    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

@-moz-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }

    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }

    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }

    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
    }

    100% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}

.uza-why-choose-us-area {
    position: relative;
    z-index: 1;

    ul {
        li {
            font-size: 16px;
            margin-bottom: 15px;
            color: $text;
            @include display-flex(flex);
            @include align-items-center;

            i {
                color: $primary;
                margin-right: 15px;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.about-tab-area {
    position: relative;
    z-index: 1;

    .nav-tabs .nav-item {
        margin-bottom: 0;
    }

    .nav-tabs .nav-link {
        position: relative;
        z-index: 1;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 0 0 15px 0;
        border: none;
        margin-right: 30px;
        background-color: transparent;

        @media #{$breakpoint-xs} {
            letter-spacing: 1px;
            margin-right: 15px;
            font-size: 14px;
        }

        &.active:after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            background-color: $primary;
            width: 100%;
            height: 2px;
        }
    }
}