/* =================================== */
/*  Homepage Styles
/* =================================== */

.section-gap {
    padding: 120px 0;
}


.alert-msg {
    color: #008000;
}

.primary-btn {
    background: $primary-color;
    line-height: 42px;
    padding-left: 30px;
    padding-right: 30px;
    border: none;
    color: $white;
    display: inline-block;
    font-weight: 500;
    position: relative;
    @include transition();
    cursor: pointer;
    position: relative;
    &:focus {
        outline: none;
    }
    span {
        color: $white;
        position: absolute;
        top: 50%;
        transform: translateY(-60%);
        right: 30px;
        @include transition();
    }
    &:hover {
        color: $white;
        span {
            color: $white;
            right: 20px;
        }
    }
    &.white {
        border: 1px solid $white;
        color: $white;
        span {
            color: $white;
        }
        &:hover {
            background: $white;
            color: $primary-color;
            span {
                color: $primary-color;
            }
        }
    }
}

.primary-btn.wh{
    background:$white;
    color:$black;
    text-transform: uppercase;
    &:hover{
        background:$black;
        color:$white;
    }
}


.primary-btn.squire {
    border-radius: 0px!important;
    border: 1px solid transparent;
    &:hover {
        border: 1px solid $white;
        background: transparent;
        color: $white;
    }
}

.overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.section-title {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
    h1 {
        margin-bottom: 10px;
    }
}

/*-------- Start Banner Area ------------*/
.banner-area {
    background: url(../img/banner-bg.jpg) right;
    background-size: cover;
    .overlay-bg {
        background-color: rgba(#04091e, .8);
    }
}

@media(max-width:767px) {
    .fullscreen {
        height: 700px !important;
    }
}

.banner-content {
    text-align: left;
    h1 {
        font-size: 48px;
        font-weight: 700;
        line-height: 1em;
        margin-top: 10px;
        color: $white;
        @include media-breakpoint-down(md) {
            font-size: 36px;
        }
        br {
            @include media-breakpoint-down (md) {
                display: none;
            }
        }
        @include media-breakpoint-down (lg) {
            font-size: 45px;
        }
        @media ( max-width:480px) {
            font-size: 32px;
        }
    }

    .primary-btn {
        background-color: $primary-color;
        color: $white;
        font-weight: 600;
        font-size: 14px;
        &:hover {
            background-color: $white;
            color:$primary-color;
        }
    }
}

/*-------- End Banner Area ------------*/


/*-------- Start feature Area ------------*/

.feature-area{
    margin-top:-62px;
}

.single-feature{
    text-align: center;    
    .title{
        background:rgba(#fff,.15);
        padding:20px 0px;
        @include transition();
        h4{
            color:$white;
        }
    }
    .desc-wrap{
        padding:20px;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 10px 30px 0px rgba(153, 153, 153, 0.1);
        a{
            font-size:14px;
            font-weight:600;
            @include transition();
            color:$black;
        }
    }
    &:hover{
        cursor:pointer;
        .title{
            background:$primary-color;
        }
        .desc-wrap{
            a{
                color:$primary-color;
            }
        }
    }
    @media(max-width:991px){
        margin-bottom:30px;
        .title{
            background:$primary-color;
        }
    }
}


/*-------- End feature Area ------------*/


/*-------- Start popular-course Area ------------*/

.popular-course-area{
    .owl-dots {
        text-align: center;
        bottom: 5px;
        margin-top:40px;
        width: 100%;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .owl-dot {
        height: 10px;
        width: 10px;
        display: inline-block;
        background: rgba(127,127,127, 0.5);
        margin-left: 5px;
        margin-right: 5px;
        @include transition();
    }

    .owl-dot.active {
        @include transition;
        background:$primary-color;
    }

}

.single-popular-carusel{
    .thumb-wrap{
    }
    .thumb{
        overflow:hidden;
        img{
            width:100%;
            @include transition();
        }
    }
    .meta{
        margin-top: -26px;
        z-index: 2;
        position: inherit; 
        padding:0px 10px;  
        p{
            font-size:12px;
            font-weight:300;
            color:$white;
            margin-bottom:0px;
            .lnr{
                margin:0px 5px;
            }
        }
        h4{
            color:$white;
        }
    } 
    .details{
        h4{
            @include transition();
            margin:20px 0px; 
            &:hover{
                color:$primary-color!important;
            }
        }
    }  
    @media(max-width:576px){
        margin:15px;
    }
    &:hover{
        .thumb{
            img{
                transform:scale(1.1);
            }
        }
    }
}



/*-------- End popular-course Area ------------*/


/*-------- Start search-course Area ------------*/

.search-course-area{
    background:url(../img/s-bg.jpg) center;
    background-size:cover;
    .overlay-bg{
        background:rgba(#04091e,.8);
    }
    .search-course-left{
        h1{
            margin-bottom:20px;
            @media(max-width:991px){
                font-size:30px;
            }
        } 
        p{
            font-size:12px;
        }   
        @media(max-width:991px){
            padding-top:120px;
            margin-bottom:40px;
        }   
    }
    .search-course-right{
        background:rgba(#fff,.10);
        .form-wrap{
            padding:0px 40px;
            .form-control{
                margin-bottom:5px;
                border-radius:0px;
                padding: 0.675rem 0.75rem;                
                font-size:13px;
                font-weight:300;
            }
            .current{
                margin-left:-32px;
                font-size:13px;
            }
            .form-select .nice-select .list .option{
                padding-left:15px;
            }            
            .primary-btn{
                width:100%;
                margin-top:5px;
            }
        }
    }
    .details-content{
        margin-top:50px;
        .single-detials{
            span{
                color:$primary-color;
                font-size:30px;
            }
            h4{
                margin:20px 0px;
                color:$white;
            }
            p{
                margin-bottom:0px;
            }
            @media(max-width:991px) and (min-width:768px){
                h4{
                    font-size:12px;
                }
            }             
        }
    }
}

/*-------- End search-course Area ------------*/


/*-------- Start upcoming-event Area -------------*/


.active-upcoming-event-carusel{
    .owl-dots {
        display: inline-grid;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        left: 101%;
        top: 40%;
    }

    .owl-dot {
        height: 10px;
        width: 10px;
        display: inline-block;
        background: rgba(127,127,127, 0.5);
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom:5px;
        @include transition();
    }

    .owl-dot.active {
        @include transition;
        background:$primary-color;
    } 
    @media(max-width:1024px){
        .owl-controls{
            display:none;
        }
    }   
}

.single-carusel{
    @media(max-width:576px){
        margin:15px;
    }
    h4{
        margin-top:20px;
        margin-bottom:20px;
    }
    p{
        margin-top:0px!important;
        margin-bottom:0px;
    }
    .thumb{
        overflow:hidden;
        img{
            @include transition();
            width:100%;
        }
    }
    .detials{
        h4{
            @include transition();
            &:hover{
                color:$primary-color;
            }
        }
        p{
            margin-top:20px;
        }
    }
    &:hover{
        .thumb img{
            transform:scale(1.05) rotate(-1.05deg);
        }
    }
}




/*-------- End upcoming-event Area -------------*/


/*-------- Start review Area -------------*/

.review-area{
    background:$offwhite;
    h4{
        color:$black;
    }

    .owl-carousel .owl-item img{
        width:auto!important;
    }

    .owl-dots {
        text-align: center;
        bottom: 5px;
        margin-top:20px;
        width: 100%;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .owl-dot {
        height: 10px;
        width: 10px;
        display: inline-block;
        background: rgba(127,127,127, 0.5);
        margin-left: 5px;
        margin-right: 5px;
        @include transition();
    }

    .owl-dot.active {
        @include transition;
        background:$primary-color;
    }   
}


.single-review{

    .title{
        margin:20px 0;
    }
    .star{
        margin-left:30px;
        .checked {
            color: orange;
        }
    }

    @media(max-width:414px){
        padding:15px;
    }

}   

/*-------- End review Area -------------*/


/*-------- Start Latest blog Style   -------------*/

.blog-area{

}

.single-blog{

    .thumb{
        overflow: hidden;
        img{
            width:100%;
            @include transition();
        }
    }
    &:hover{
        img{
            transform:scale(1.1);
        }
        h5{
            color:$primary-color;
        }
    }
    h5{
        margin-bottom:12px;
        @include transition();
        border-bottom:1px solid #eee;
        padding-bottom:20px;
    }
    a{
        color:$text-color;
    }
    .meta{
        font-weight:400;
        text-align: left;
        margin-top: 40px;
    }

    @media(max-width:991px){
        margin-bottom:30px;
    }

    .details-btn {
        border: 1px solid #eee;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        @include flexbox();
        overflow: hidden;
        .details {
            visibility: hidden;
            opacity: 0;
            margin-left: -53px;
            font-weight: 600;
            text-transform: uppercase;
            @include flexbox();
        }
        .lnr{
            color:$black;
            line-height:inherit;
        }
        &:hover {
            width: 140px;
            .details {
                margin-left: 0;
                visibility: visible;
                opacity: 1;
                margin-right: 8px;
            }
            span {
                color: $white;
                font-weight: 600;
            }
            background: $primary-color;
            box-shadow: 0px 10px 20px 0px rgba(60, 64, 143, 0.2);
        }
    }   
}

/*-------- End Latest blog Style   -------------*/

/*-------- Start Cta area Style   -------------*/

.cta-one-area{
    background:url(../img/cta-bg.jpg) center;
    background-size:cover;
    text-align:center;
    color:$white;
    h1,p{
        position:relative;
    }
    p{
        max-width:670px;
        margin:20px 0px; 
        @media(max-width:576px){
            padding:0% 5%;
        }        
    }
    .overlay-bg{
        background:rgba(#04091e,.20);
    }
}

.cta-two-area{
    background:$primary-color;
    padding:90px 0px;
    .cta-left{
        text-align:left;
        h1{
            color:$white;
            font-weight: 700;
        }
    }
    .cta-right{
        text-align:right;
        @media(max-width:991px){
            text-align:left;
            margin-top:20px;
        }
    }
}


/*-------- End Cta area Style   -------------*/


/*-------- Start Common Page Style   -------------*/

.link-nav {
    margin-top: 10px;
    margin-bottom: 0px;
}

.about-banner {
    background: url(../img/top-banner.jpg) right no-repeat;
    background-size:cover;
}

.about-content {
    margin-top: 110px;
    padding: 90px 0px;
    text-align: center;
    @media(max-width: 767px) {
        margin-top: 70px;
    }
    h1 {
        font-size: 48px;
        font-weight: 600;
    }
    a {
        color: $white;
        font-weight: 300;
        font-size: 14px;
    }
    .lnr {
        margin: 0px 10px;
        font-weight: 600;
    }
}


/*-------- End Common Page Style   -------------*/