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

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


.alert-msg {
    color: #008000;
}

#logo{
    padding-left:15px;
}
#nav-menu-container{
    padding-right:15px;
}


.primary-btn {
    background: $primary-color;
    line-height: 42px;
    padding-left: 30px;
    padding-right: 30px;
    border: none;
    color: $white;
    display: inline-block;
    font-size:14px;
    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/hero-bg.jpg) center;
    background-size:cover;
    .overlay-bg{
        background:rgba(#04091e,.40);
    }
    @media(max-width:767px){
        .fullscreen{
            height:auto!important;
        }
    }
}

.banner-left{
    h6{
        text-transform:uppercase;
        font-weight:400;
        font-size:14px;
        letter-spacing: 2px;
    }
    h1{
        margin:20px 0;
        font-size:60px;
        text-transform:uppercase;
        @media(max-width:1199px){
            font-size:40px;
        }
        @media(max-width:413px){
            font-size:33px;
        }
    }
    @media(max-width:991px) and (min-width: 768px){
        h1{
           font-size:36px; 
        }
        h6{
            font-size:12px;
        }
    }    
    p{
        margin:20px 0px;
    }
    .primary-btn{
       background:$primary-color;
        &:hover{    
            background:$black;
            color:$white;
        }
    }
    @media(max-width:767px){
        margin-top:120px;
        margin-bottom:60px;
    }
}

.banner-right{
    .nav-tabs{
        border-bottom:none;
    }
    .nav-item{
        background:rgba(#fff,.25);
        text-transform:uppercase;
        font-weight:600;
        font-size:13px;
        margin-right:1px;
        a{
            color:$white;
        }
        &:hover{
            a{
              border-color:transparent !important;  
            }
        }
    }
    .nav-tabs .nav-link{
        border-radius:0 !important;
    }
    .tab-content{
        background:$white;
    }

    .form-wrap{
        padding:40px 30px;
        text-align:center;
        .form-control{
            padding:0.675rem 0.75rem;
            font-size:13px;
            font-weight:300;
            border-radius:0px;
            margin-bottom:10px;
            border-color:#eee;            
            &:focus{
                box-shadow:none;

            }
        }
    }
    @media(max-width:1024px){
        margin-top:40px;
    }
    @media(max-width:767px){
        padding-bottom:50px;
    }
}



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



/*-------- start Popular-destination Area ------------*/

.single-destination{
    @include transition();
    .overlay-bg{
        background:rgba(#04091e,.4);
        @include transition();
        opacity:0;
    }
    .thumb{
        position:relative;
        img{
            width:100%;
        }
    }
    .desc{  
        text-align:center;
        position: absolute;
        width:100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        .price-btn{
            background:$primary-color;
            text-align:center;
            color:$black;
            padding:6px 30px;
            font-size:14px;
            font-weight:600;
            display:inline-block;
            margin:10px; 
            opacity:0;
            @include transition();
        }
        h4{
            color:$white;
        }
        p{
            color:$white;
            font-size:14px;
            font-weight:300;
            margin-bottom:0px;
        }
    }

    &:hover{
        .price-btn{
            opacity:1;
        }
        .overlay-bg{
            opacity:1;
        }
    }
    @media(max-width:991px){
        margin-bottom:30px;
    }

}


/*-------- end Popular-destination Area ------------*/


/*-------- start price Area ------------*/

.price-area{
    background:url(../img/price-bg.png);
    background-size:cover;
    .single-price{
        background:$white;
        padding:30px;
        h4{
            text-align:center;
            border-bottom: 1px solid $primary-color;
            padding-bottom:20px;
        }
        .price-list{
            margin-top:30px;
            li{
                margin-bottom:10px;
                .price-btn{
                    background:$offwhite;
                    border:1px solid #eee;
                    color:$black;
                    font-size: 14px;
                    font-weight:600;
                    padding:5px 20px;
                    &:hover{
                        border-color:$primary-color;
                        background:$primary-color;
                        color:$white;
                    }
                }
            }
        }
        @media(max-width:991px){
            margin-bottom:30px;
        }
    }
}

/*-------- end price Area ------------*/

/*-------- start other-issue Area ------------*/

.single-other-issue{
    .thumb{
        overflow:hidden;
        img{
            width:100%;
            @include transition();
        }
    }
    h4{
        margin:20px 0; 
        @include transition();
    }
    &:hover{
        h4{
            color:$primary-color;
        }
        .thumb img{
            transform:scale(1.08) rotate(-3deg);
        }
    }
}

/*-------- end other-issue Area ------------*/

/*--------- start testimonial area  -------------*/

.testimonial-area{  
    background-color:$offwhite;
    .owl-dots {
        text-align: center;
        bottom: 5px;
        margin-top:70px;
        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($primary-color, .2);
        margin-left: 5px;
        margin-right: 5px;
        @include transition();
    }

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


.single-testimonial{
    background-color:$white;
    padding: 25px 30px 12px 30px;
    @include transition();
    &:hover{
        cursor:pointer;
    }
    .thumb{
        margin-right:30px;
    }
    h4{
        @include transition();
        margin-bottom:5px;
    }
    .star{
        .checked {
            color: orange;
        }
    }    
    &:hover{
         h4{
            color:$primary-color;
            cursor:pointer;
         }  
    }
}

/*--------- end testimonial area  -------------*/


/*--------- start home-about area  -------------*/

.home-about-area{
    .home-about-left{
        padding-left:20%; 
        @media(max-width:1366px){
            padding-left:5%;
        }        
        h1{
            max-width:510px;
            @media(max-width:1366px){
                font-size:20px;
            }
        }       
        p{
            max-width:500px;
            padding:20px 0;
            @media(max-width:991px){
                margin-left:auto;
                margin-right:auto;
                display:block;
            }
        }
        .primary-btn{
            margin-top:10px;
            background:$black;
            font-size:14px;
            &:hover{
                background:$primary-color;
            }
        }

        @media(max-width:991px){
            padding:100px 15px;
            text-align:center;
            margin-left:auto;
            margin-right:auto;
            display:inline-block;
            h1{
                margin-left:auto;
                margin-right:auto;
                display:inline-block;
            }
        }
    }
    .home-about-right{
        img{
            width:100%;
        }
    }
}


/*--------- end home-about area  -------------*/

/*--------- start recent-blog Area -------------*/


.recent-blog-area{
    .owl-dots {
        text-align: center;
        bottom: 5px;
        margin-top:70px;
        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($primary-color, .2);
        margin-left: 5px;
        margin-right: 5px;
        @include transition();
    }

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

    .single-recent-blog-post{
        .thumb{
            overflow: hidden;
            img{
                @include transition();
            }
        }
        .tags{
            margin:20px 0px;
            li{
                display:inline-block;
                border:1px solid #eee;
                padding:4px 12px;
                @include transition();
                &:hover{
                    background-color:$primary-color;
                    a{
                        color:$white;
                    }
                }
                a{
                    font-weight:400;
                    font-size:12px;
                    color:$black;
                }
            }
        }
        .title{
            @include transition();
            margin:20px 0;
            &:hover{
                color:$primary-color;
            }
        }
        .date{
            color:$black;
            font-weight:300;
        }
        @media(max-width:575px){
            margin:15px;
        }
        &:hover{
            .thumb img{
                transform:scale(1.05);
            }
        }

    }

}

/*--------- end recent-blog Area -------------*/


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

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

.about-banner {
   background:url(../img/top-banner.jpg) center;
   background-size:cover;
   .overlay-bg{
    background: rgba(#04091e,.40);
   }
}

.about-content {
    margin-top: 70px;
    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   -------------*/