/*===========================
    07. Campus Visit css 
===========================*/

.campus-visit-area {
    padding-top: 160px;

    @media #{$md} {
        padding-top: 100px;
    }

    @media #{$xs} {
        padding-top: 80px;
    }
}

.campus-visit-wrapper {
    position: relative;
    z-index: 9;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;

    &::before {
        position: absolute;
        content: '';
        width: 40%;
        height: 100%;
        background-color: $theme-color;
        top: 0;
        left: 0;
        z-index: -1;

        @media #{$md} {
            display: none;
        }

        @media #{$xs} {
            display: none;
        }
    }

    &::after {
        position: absolute;
        content: '';
        width: 60%;
        height: 100%;
        background-color: #F1F1F1;
        top: 0;
        right: 0;
        z-index: -1;

        @media #{$md} {
            display: none;
        }

        @media #{$xs} {
            display: none;
        }
    }

    & .campus-image-col {
        width: 50%;
        padding-top: 90px;
        padding-bottom: 85px;
        padding-left: 70px;
        padding-right: 0;

        @media #{$md} {
            background-color: $theme-color;
            width: 100%;
            padding: 80px;
        }

        @media #{$xs} {
            background-color: $theme-color;
            width: 100%;
            padding: 20px;
        }

        @media #{$sm} {
            padding: 50px;
        }
    }

    & .campus-content-col {
        width: 50%;
        padding-top: 90px;
        padding-bottom: 85px;
        padding-right: 50px;

        @media #{$md} {
            background-color: #F1F1F1;
            width: 100%;
            padding: 80px;
            padding-top: 70px;
        }

        @media #{$xs} {
            background-color: #F1F1F1;
            width: 100%;
            padding: 20px 20px 10px;
        }

        @media #{$sm} {
            padding: 50px;
            padding-top: 45px;
        }
    }
}


.campus-image {
    width: 100%;
    height: 100%;
    position: relative;
    padding-bottom: 35px;

    & img {
        width: 100%;
    }

    & .slick-arrow {
        font-size: 16px;
        color: $white;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 99;
        text-transform: capitalize;
        cursor: pointer;

        & i {
            font-size: 13px;
            margin-right: 5px;
        }

        &.next {
            left: 70px;
            margin-left: 5px;
            margin-right: auto;

            &::before {
                position: absolute;
                content: '/';
                font-size: 16px;
                color: $white;
                left: -17px;
                top: 0;
            }
        }
    }
}


.campus-content {
    max-width: 480px;
    margin-left: auto;
    padding: 0 30px;

    @media #{$md} {
        margin-left: 0;
        padding: 0;
    }

    @media #{$xs} {
        padding: 0;
    }

    & .campus-title {
        font-weight: 700;
        font-size: 46px;
        line-height: 54px;
        color: $theme-color;

        @media #{$lg} {
            font-size: 34px;
            line-height: 42px;
        }

        @media #{$xs} {
            font-size: 24px;
            line-height: 30px;
        }
    }

    & .line {
        width: 150px;
        background: transparent;
        border: 1px solid #07294d;
        margin-top: 30px;

        @media #{$xs}{
            margin-top: 15px;
        }
    }

    & p {
        font-weight: 500;
        font-size: 18px;
        line-height: 30px;
        color: $theme-color;
        margin-top: 25px;

        @media #{$lg} {
            font-size: 16px;
            line-height: 26px;
        }

        @media #{$xs} {
            font-size: 16px;
            line-height: 26px;
            margin-top: 10px;
        }
    }

    & .video-title {
        font-weight: 700;
        font-size: 46px;
        line-height: 54px;
        color: $theme-color;
        margin-top: 35px;

        @media #{$lg} {
            font-size: 34px;
            line-height: 42px;
        }

        @media #{$xs} {
            font-size: 24px;
            line-height: 30px;
            margin-top: 20px;
        }
    }

    & .play {
        font-weight: 600;
        font-size: 24px;
        line-height: 54px;
        color: $theme-color;
        margin-top: 15px;
        @include transition(0.3s);

        @media #{$lg} {
            font-size: 20px;
            line-height: 48px;
        }

        @media #{$xs} {
            font-size: 20px;
            line-height: 30px;
        }

        & i {
            margin-right: 8px;
        }

        &:hover {
            color: $theme-color-2;
        }
    }
}


/*===== Campus 2 =====*/

.campus-visit-area-2 {
    padding-top: 110px;

    @media #{$md} {
        padding-top: 35px;
    }

    @media #{$xs} {
        padding-top: 15px;
    }
}

.campus-content-2 {
    margin-left: 0;
}

.campus-image-2 {
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;

    & img {
        width: 100%;
    }

    & .campus-title-2 {
        font-weight: 700;
        font-size: 28px;
        letter-spacing: 0.15em;
        line-height: 24px;
        text-align: left;
        color: #d5d5d5;
        opacity: 0.45;
        text-transform: uppercase;
        @include transform(rotate(-90deg));
        position: absolute;
        top: 130px;
        left: -15%;

        @media #{$lg} {
            font-size: 24px;
            top: 100px;
            left: -17%;
        }

        @media #{$xs} {
            font-size: 14px;
            top: 53px;
            left: -19%;
        }

        @media #{$sm} {
            font-size: 22px;
            top: 100px;
            left: -17%;
        }
    }

    & .image-1 {
        width: 90%;
        margin-left: auto;
    }

    & .image-2 {
        width: 38%;
    }

    & .image-3 {
        width: 62%;
    }

    & .more {
        position: absolute;
        bottom: 10px;
        right: 65%;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 0.03em;
        color: $body-color;
        @include transition(0.3s);

        & i{
            margin-left: 8px;

            @media #{$xs} {
                margin-left: 4px;
            }
        }

        @media #{$xs} {
            font-size: 14px;
            bottom: 0;
        }

        &:hover {
            color: $theme-color-2;
        }
    }
}


/*===== Campus 3 =====*/

.campus-visit-area-3 {
    padding-top: 160px;

    @media #{$md} {
        padding-top: 100px;
    }

    @media #{$xs} {
        padding-top: 80px;
    }

    & .campus-visit-wrapper {
        &::before {
            left: auto;
            right: 0;           
        }

        &::after {
            right: auto;
            left: 0;
            display: none;
        }

        & .campus-image-col {
            padding-left: 0px;
            padding-right: 70px;
            background-image: url(../images/dot.png);
            background-repeat: repeat;
            background-position: 3px -6px;

            @media #{$md} {
                padding: 80px;
            }

            @media #{$xs} {
                padding: 20px;
            }

            @media #{$sm} {
                padding: 50px;
            }
        }

        & .campus-content-col {
            padding-right: 0;

            @media #{$md} {
                padding: 80px;
                padding-top: 70px;
            }

            @media #{$xs} {
                padding: 20px;
                padding-top: 15px;
            }

            @media #{$sm} {
                padding: 50px;
                padding-top: 45px;
            }
        }
    }

    & .campus-content {
        margin-left: 0;
        padding: 0px;
        max-width: 450px;
    }

    & .campus-image {
        padding-bottom: 0;
        position: relative;
        height: auto;

        &::before {
            position: absolute;
            content: '';
            bottom: 2px;
            right: 2px;
            background-color: $theme-color;
            width: 150px;
            height: 40px;
            z-index: 5;
        }

        & .slick-arrow {
            left: auto;
            right: 90px;
            bottom: 10px;

            &.next {
                left: auto;
                right: 15px;
            }
        }
    }
}