/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/

/* 1. Theme default css */
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');
 body {
	font-family: $saira;
	font-weight: 500;
    font-style: normal;
    color:$body-text-color;
    font-size: 16px;
}
.custom-container {
    max-width: 1530px;
    min-width: 1530px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    @media #{$desktop} {
        max-width: 1400px;
        min-width: 1400px;
    }
    @media #{$laptop,$lg,$md,$xs} {
        max-width: 100%;
        min-width: 100%;
    }
}
.img,img {
	max-width: 100%;
	transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
}
.f-left {
	float: left
}
.f-right {
	float: right
}
.fix {
	overflow: hidden
}
a,
button,
i {
	@include transition(.3s);
    text-decoration: none;
}
a:focus,
.button:focus {
	text-decoration: none;
	outline: none;
}
a:focus,
a:hover
{
	color: inherit;
	text-decoration: none;
}
a,
button {
	color: inherit;
	outline: medium none;
    text-decoration: none;
}
button:focus,input:focus,input:focus,textarea,textarea:focus{outline: 0}
.uppercase {
	text-transform: uppercase;
}
.capitalize {
	text-transform: capitalize;
}
input,
select,
textarea {
    font-family: $saira;
    font-weight: 500;
    opacity: 1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: $saira;
	color: $heading-color;
	margin: 0px;
	font-style: normal;
	font-weight: 600;
	text-transform: normal;
    margin-bottom: 10px;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
}
ul {
	margin: 0px;
	padding: 0px;
}
p {
	font-size: 16px;
	font-weight: 500;
	line-height: 28px;
	color: $body-text-color;
	margin-bottom: 10px;
}
hr {
	border-bottom: 1px solid $hr-border-color;
	border-top: 0 none;
	margin: 30px 0;
	padding: 0;
}
label {
	color: $black-soft;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
}
.display-inline {
    display: inline-block;
}
*::-moz-selection {
	background: $black;
	color: $white;
	text-shadow: none;
}
::-moz-selection {
	background: $black;
	color:$white;
	text-shadow: none;
}
::selection {
	background: $black;
	color: $white;
	text-shadow: none;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
}
input,
select {
   font-family: $saira;
    font-weight: 500;
}
.custom-pad-20 {
    padding-left: 10px;
    padding-right: 10px;
}
.custom-mar-20 {
    margin-right: -10px;
    margin-left: -10px;
}
/*--
    - Input Placeholder
-----------------------------------------*/
*input::-moz-placeholder {
	font-size: 16px;
	opacity: 1;
    font-family: $saira;
    font-weight: 500;
}
*input::placeholder {
	font-size: 16px;
	opacity: 1;
    font-family: $saira;
    font-weight: 500;
}


/*--
    - Common Classes
-----------------------------------------*/
.fix {
    overflow:hidden
}
.clear{
    clear: both;
}


/*--
    - Background color
-----------------------------------------*/
.grey-bg {
	background: $grey;
}
.grey-soft-bg {
	background: $grey2;
}
.white-bg {
	background:$white;
}
.black-bg {
	background: $black;
}
.black-soft-bg {
	background: $black-soft;
}
.theme-bg {
	background: $theme-color;
}
.theme-bg-blue {
	background: $theme-color-blue;
}


/*--
    - color
-----------------------------------------*/
.white-color {
	color: $white;
}
.black-color {
	color: $black;
}
.theme-color {
	color: $theme-color;
}
// .primary-color {
// 	color: #222;
// }

/*--
    - Margin & Padding
-----------------------------------------*/
/*-- Margin Top --*/
@for $i from 1 through 40 {
    .mt-#{5 * $i}{margin-top: 5px * $i;}
}

/*-- Margin Bottom --*/
@for $i from 1 through 40 {
    .mb-#{5 * $i}{margin-bottom: 5px *$i;}
}
/*-- Margin Left --*/
@for $i from 1 through 40 {
    .ml-#{5 * $i}{margin-left: 5px * $i;}
}

/*-- Margin Right --*/
@for $i from 1 through 40 {
    .mr-#{5 * $i}{margin-right: 5px *$i;}
}

/*-- Padding Top --*/
@for $i from 1 through 40 {
    .pt-#{5 * $i}{padding-top: 5px *$i;}
}

/*-- Padding Bottom --*/
@for $i from 1 through 40 {
    .pb-#{5 * $i}{padding-bottom: 5px *$i;}
}

/*-- Padding Left --*/
@for $i from 1 through 40 {
    .pl-#{5 * $i}{padding-left: 5px *$i;}
}

/*-- Padding Right --*/
@for $i from 1 through 40 {
    .pr-#{5 * $i}{padding-right: 5px *$i;}
}


// others common css here :)


//section title style
.subtitle {
    font-size: 20px;
    color: $theme-color;
    font-weight: 500;
    & img {
        margin-right: 5px;
    }
}
.subtitle-border {
    position: relative;
    display: inline-block;
    &:before,
    &:after {
        position: absolute;
        content: '';
        height: 2px;
        width: 30px;
        background: $theme-color;
        top: 50%;
        transform: translateY(-50%);
        left: -40px;
    }
    &:after {
        left: auto;
        right: -40px;
    }
}
.section-title {
    font-size: 50px;
    line-height: 1.08;
    margin-bottom: 0px;
    @media #{$lg} {
        font-size: 48px;
    }
    @media #{$md} {
        br {
            display: none;
        }
    }
    @media #{$xs} {
        font-size: 42px;
        br {
            display: none;
        }
    }
    & span {
        color: $theme-color;
    }
    &.text-white {
        & span {
            color: $theme-color !important;
        }
    }
}



//btn style

.theme-btn {
    font-size: 16px;
    color: $white;
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0px 45px;
    border-radius: 50px;
    display: inline-block;
    background: $theme-color;
    font-weight: 600;
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:before {
        background-color: #fff;
        content: "";
        height: 150px;
        left: -75px;
        position: absolute;
        top: -35px;
        transform: rotate(35deg);
        transition: all 1600ms cubic-bezier(.19,1,.22,1);
        width: 40px;
        opacity: 0;
    }
    &.theme-btn-white {
        background: $white;
        color: $heading-color;
        &:hover {
            background: $theme-color;
            color: $white;
        }
    }
    &.theme-btn-blue {
        background: $theme-color-blue;
        color: $white;
        &:hover {
            background: $theme-color;
            color: $white;
        }
    }
    &.grey-btn {
        background: #f7f7f7;
        border: 1px solid #ccc;
        color: $heading-color;
        line-height: 58px;
        &:hover {
            color: $white;
            background: $theme-color;
            border-color: $theme-color;
        }
    }
    &.black-btn {
        background: $heading-color;
        color: $white;
        &:hover {
            color: $theme-color;
            background: $white;
        }
    }
    &.gradient-btn {
        background-image: -moz-linear-gradient( 20deg, rgb(246,55,97) 0%, rgb(255,142,41) 100%);
        background-image: -webkit-linear-gradient( 20deg, rgb(246,55,97) 0%, rgb(255,142,41) 100%);
        background-image: -ms-linear-gradient( 20deg, rgb(246,55,97) 0%, rgb(255,142,41) 100%);
        &:hover {
            background: $theme-color;
        }
    }
    &:hover {
        background: $theme-color-blue;
        color: $white;
        &:before {
            left: 120%;
            transition: all 1300ms cubic-bezier(.19,1,.22,1);
            opacity: .25;
        }
    }
}

//custom z-index

.z-index {
    z-index: 2;
    position: relative;
}
.pb-310 {
    padding-bottom: 310px;
}
.pt-260 {
    padding-top: 260px;
}
.pt-250 {
    padding-top: 250px;
}
.pt-240 {
    padding-top: 240px;
}
.pt-235 {
    padding-top: 235px;
}
.pt-230 {
    padding-top: 230px;
}
.pt-220 {
    padding-top: 220px;
}
.pt-210 {
    padding-top: 210px;
}
//custom swipper dots
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
    width: inherit;
}
.swiper-container-horizontal.common-dots {
    position: relative;
    & .slide-dots {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
    }
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    display: inline-block;
    margin: 0px 5px;
    padding: 0px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 3px solid #c6c9cb;
    display: inline-block;
    outline: none;
    cursor: pointer;
    background: none;
    font-size: 0px;
    opacity: 1;
    &.swiper-pagination-bullet-active {
        border-color: $theme-color-blue;
    }
}