/*==============Common CSS===================*/

body {
    font-family: $body-font;
    color: $body-color;
    font-style: normal;
    font-weight: 300;
    background-color: $secondary-color;
    font-size: 18px;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 15px;
    font-weight: 400;
    font-family: $heading;
}
p {
    &:last-child{
    	margin-bottom: 0;
    }
}
// a, button, img, input, span {
//     @extend %basetransition; 
// }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], textarea {
    @extend %borderradius8;
    border: 1px solid #cacaca;
    height: 54px;
    padding: 13px 20px;
    // background-color: #F5F5F5;
    font-size: 16px;
    width: 100%;
    border-radius: 12px;
    @include tablet{
        font-size: 18px;
    }
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=url]:focus, textarea:focus{
    @extend %primary-border-color;
}
input[type=submit], button[type=submit]{
    @extend %cursorpointer;
}
input, textarea{
	@include placeholder{
		color: $body-color;
	}
}
textarea {
    height: 150px;
    padding: 10px 20px;
    @extend %w100;
    // margin-bottom: -7px;
    border-color: #ced4da;
    @extend %basetransition1;
    &:focus {
        @extend %primary-border-color;
    }
    &:hover {
        @extend %primary-border-color;
    }
}

.heading-42, 
.heading-40, 
.heading-32,
.heading-30,
.heading-28, 
.heading-24,
.heading-18{
    font-family: $body-font;
    color: $color-white;
    font-weight: 400;
}
.heading-42{
    font-size: 42px;
    line-height: 48px;
    @include all-below-med{
        font-size: 38px;
    }
}
.heading-40{
    font-size: 40px;
    line-height: 46px;
    @include all-below-med{
        font-size: 36px;
    }
}
.heading-32{
    font-size: 32px;
    line-height: 38px;
    @include all-below-med{
        font-size: 28px;
    }
}
.heading-30{
    font-size: 30px;
    line-height: 36px;
    @include all-below-med{
        font-size: 26px;
    }
}
.heading-28{
    font-size: 28px;
    line-height: 36px;
    @include all-below-med{
        font-size: 24px;
    }
}
.heading-24{
    font-size: 24px;
    line-height: 30px;
    @include all-below-med{
        font-size: 22px;
    }
}
.heading-18{
    font-size: 18px;
    line-height: 24px;
    // @include all-below-med{
    //     font-size: 20px;
    // }
}


/*======.owl-dots customization=======*/
// .owl-dots {
//     @extend %textcenter;
//     margin-top: 30px;
//     div {
//         height: 20px;
//         width: 20px;
//         background-color: #23222A;
//         @extend %displayinline;
//         margin: 0 4px;
//         @extend %borderradiusfiftypercent;
//         &.active {
//             @extend %secondary-bg-color;
//         }
//     }
// }
    
/*=====owl nav customization======*/
.owl-nav div{
    background: linear-gradient(#000000, #000000) 50% 50%/calc(100% - 2px) calc(100% - 2px) no-repeat,
    linear-gradient(130deg, #ea1b1b 0%, #000000 50%, #EA1B1B 100%);
    left: -85px;
    top: 50%;
    line-height: 80px;
    margin-top: -40px;
    width: 96px;
    height: 80px;
    font-size: 30px;
    @extend %posabsolute;
    @extend %displayinline;
    @extend %textcenter;
    @extend %basetransition1;
    color: $accent;
    @extend %secondary-bg-color;
    transform: skewX(-4deg);
    @include mx-large-desktops2{
        left: -26px;
        width: 48px;
    }
    // @include mx-desktops{
    //     left: -30px;
    //     width: 30px;
    // }
    // @include all-below-med{
    //     width: 30px;
    // }
    &.owl-next, &.next {
        left: auto;
        right: -85px;
        @include mx-large-desktops2{
            left: auto;
            right: -26px;
        }
        // @include mx-desktops{
        //     left: auto;
        //     right: -30px;
        // }
    }
    // &:hover {
    //     @extend %primary-color;
    // }
}



/*========.nice-select=============*/ 
.nice-select {
    @extend %w100;
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    @extend %uppercase;
    font-size: 13px;
    font-weight: 300;
    color: #191c22;
    border: 1px solid #cacaca;
    border-radius: 12px;
    @include all-below-mobile-lg{
        height: 48px;
        line-height: 48px;
    }
    .list {
        @extend %w100;
        box-shadow: none;
        border: 1px solid #ced4da;
        max-height: 205px;
        @extend %borderradius0;
        z-index: 8;
        border-radius: 12px;
    }
    &:focus {
        @extend %primary-border-color;
    }
    // &:hover {
    //     @extend %primary-border-color;
    // }
    &:after{
        right: 25px;
        border-color: #ced4da;
        width: 10px;
        height: 10px;
        margin-top: -6px;
    }
    &:hover:after {
        @extend %primary-border-color;
    }
}

/*========== default checkbox style =============*/
input[type=checkbox]{
    display:none;
}
input[type=checkbox] + label:before {
    border: 1px solid rgb(255, 255, 255);
    content: "";
    @extend %displayinline;
    font-size: 30px;
    height: 20px;
    line-height: 11px;
    margin: -4px 5px 0 0;
    @extend %textcenter;
    vertical-align: middle;
    width: 20px;
    @extend %borderradiusfiftypercent;
    @extend %white-bg-color;
}
input[type=checkbox]:checked + label:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    color: #1d1d1b;
    font-size: 15px;
    padding-top: 4px;
}
label {
    margin-right: 10px;
    font-weight: normal;
    cursor: pointer;
}
/*========== default radio button style =============*/
input[type=radio]{
    display:none;
}
input[type=radio] + label:before {
    border: 1px solid $border-color;
    content: "";
    @extend %displayinline;
    font-size: 30px;
    height: 20px;
    line-height: 11px;
    margin: -4px 5px 0 0;
    @extend %textcenter;
    vertical-align: middle;
    width: 20px;
    @extend %borderradiusfiftypercent;
    @extend %white-bg-color;
}
input[type=radio]:checked + label:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    color: #0F4A6E;
    font-size: 15px;
    padding-top: 4px;
}
label{
    @extend %body-color;
}


// Extra large containers
.container{
    /*------min-width:1352px------*/ 
    @include large-desktops-mid{
        max-width: 1240px;
    }
    /*------min-width:1500px------*/ 
    @include extra-large-desktops{
        max-width: 1440px;
    }
    /*------min-width:2000px------*/ 
    @include xx-large-desktops{
        max-width: 1840px;
    }
}




// .pagination-wrap
// .pagination-wrap{
// 	margin-bottom: 20px; 
//     .pagination-list a , .np-btn a {
//         font-size: 14px;
//         font-weight: 700;
//         color: #000;
// 		border: 1px solid #000;
//         padding: 12px 10px;
//         width: 100px;
//         text-align: center;
//         transition: .3s;
//         height: 45px;
//     }
//     .pagination-list {
//         a {
//             font-size: 16px;
//             width: 45px;
//             font-weight: 400;
//             margin: 0 3px;
//             &:hover {
//                 background-color: #E3A900;
// 				color: #fff;
//             }
//         }
// 		a.active { background-color: #E3A900; color: #fff; }
//     }
//     .np-btn {
//         a {
//             text-transform: uppercase;
//             &:hover {
//                 background: #E3A900;
//                 color: #fff;
//             }
//         }
//     }
// }