:root{
--theme-color: #b19777;
--theme-color2: #6653E8;
--primary-color: #0B59DB;
--title-color: #151611;
--body-color: #6E7070;
--smoke-color: #dadada;
--smoke-color2: #e0e0e0;
--smoke-color3: #e9e9e9;
--smoke-color4: #F4F6F8;
--black-color: #000000;
--black-color2: #0D0D0C;
--black-color3: #0d0e09;
--gray-color: #E1E4E5;
--gray-color2: #999999;
--white-color: #ffffff;
--light-color: #E1E4E5;
--light-bg-color: #242528;
--dark-bg-color: #1A1B1D;
--yellow-color: #FFB539;
--success-color: #28a745;
--error-color: #dc3545;
--th-border-color: #D5D7DA;
--th-border-color2: #E6E6E6;
--brand-color: #79F4E4;
--light-blue-color: #001C49;
--title-font: "Plus Jakarta Sans", sans-serif;
--body-font: "Inter", sans-serif;
--style-font: "Nunito", sans-serif;
--icon-font: "Font Awesome 6 Pro";
--main-container: 1320px;
--container-gutters: 24px;
--section-space: 120px;
--section-space-mobile: 80px;
--section-title-space: 60px;
--ripple-ani-duration: 2s
}
html,body{
scroll-behavior: auto !important
}
body{
font-family: var(--body-font);
font-size: 16px;
font-weight: 400;
color: var(--body-color);
line-height: 26px;
overflow-x: hidden;
-webkit-font-smoothing: antialiased
}
iframe{
border: none;
width: 100%
}
button:focus,a:focus,a:active,input,input:hover,input:focus,input:active,textarea,textarea:hover,textarea:focus,textarea:active{
outline: none
}
input:focus{
outline: none;
-webkit-box-shadow: none;
box-shadow: none
}
img:not([draggable]),embed,object,video{
max-width: 100%;
height: auto
}
ul{
list-style-type: disc
}
ol{
list-style-type: decimal
}
table{
margin: 0 0 1.5em;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid var(--th-border-color)
}
th{
font-weight: 700;
color: var(--title-color)
}
td,th{
border: 1px solid var(--th-border-color);
padding: 9px 12px
}
a{
color: var(--theme-color);
text-decoration: none;
outline: 0;
-webkit-transition: all ease .4s;
transition: all ease .4s
}
a:hover{
color: var(--title-color)
}
a:active,a:focus,a:hover,a:visited{
text-decoration: none;
outline: 0
}
button{
-webkit-transition: all ease .4s;
transition: all ease .4s
}
img{
border: none;
max-width: 100%
}
ins{
text-decoration: none
}
pre{
font-family: var(--body-font);
background: #f5f5f5;
color: #666;
font-size: 14px;
margin: 20px 0;
overflow: auto;
padding: 20px;
white-space: pre-wrap;
word-wrap: break-word
}
p:empty{
display: none
}
p{
font-family: var(--body-font);
margin: 0 0 18px 0;
color: var(--body-color);
line-height: 1.75
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,p a,span a{
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit
}
.h1,h1,.h2,h2,.h3,h3,.h4,h4,.h5,h5,.h6,h6{
font-family: var(--title-font);
color: var(--title-color);
text-transform: none;
font-weight: 700;
line-height: 1.4;
margin: 0 0 15px 0
}
.h1,h1{
font-size: 80px;
line-height: 1.18
}
.h2,h2{
font-size: 48px;
line-height: 1.327
}
.h3,h3{
font-size: 32px;
line-height: 1.278
}
.h4,h4{
font-size: 30px;
line-height: 1.333
}
.h5,h5{
font-size: 24px;
line-height: 1.417
}
.h6,h6{
font-size: 20px;
line-height: 1.5
}
@media(max-width: 1199px){.h1,h1{
font-size:54px;
line-height: 1.3
}
.h2,h2{
font-size: 36px;
line-height: 1.3
}
.h3,h3{
font-size: 30px
}
.h4,h4{
font-size: 24px
}
.h5,h5{
font-size: 20px
}
.h6,h6{
font-size: 16px
}}
@media(max-width: 767px){.h1,h1{
font-size:40px
}
.h2,h2{
font-size: 34px;
line-height: 1.3
}
.h3,h3{
font-size: 26px
}
.h4,h4{
font-size: 22px
}
.h5,h5{
font-size: 18px
}
.h6,h6{
font-size: 16px
}}
@media(max-width: 575px){.h1,h1{
font-size:34px;
line-height: 1.35
}
.h2,h2{
font-size: 30px
}}
@media(max-width: 375px){.h1,h1{
font-size:32px
}}
.breadcumb-title{
word-break: break-word
}
.gallery{
margin-bottom: 1.5em;
width: 100%
}
.blog-single.sticky{
position: relative
}
.blog-single.sticky .blog-content:before{
display: none
}
.blog-single.sticky:before{
content: "";
position: absolute;
font-family: var(--icon-font);
font-size: 16px;
font-weight: 500;
opacity: 1;
right: 0;
top: 0;
color: var(--white-color);
background-color: var(--theme-color);
z-index: 1;
height: 44px;
width: 44px;
line-height: 44px;
text-align: center;
border-radius: 0 20px 0 20px
}
@media(max-width: 767px){.blog-single.sticky:before{
border-radius:0 10px 0 10px
}}
.blog-single.sticky::before{
content: ""
}
.blog-details .blog-single:before{
display: none
}
.blog-details .blog-single .blog-content{
background-color: rgba(0,0,0,0);
overflow: hidden
}
.blog-details .blog-single.sticky{
background-color: rgba(0,0,0,0)
}
.blog-details .blog-single.sticky:before{
display: none
}
@media(max-width: 767px){.blog-single.sticky:before{
font-size:14px;
width: 40px;
height: 40px;
line-height: 40px
}}
@media(max-width: 1399px){:root{
--main-container: 1250px
}}
@media only screen and (min-width: 1300px){.container{
max-width:calc(var(--main-container) + var(--container-gutters));
padding-left: calc(var(--container-gutters)/2);
padding-right: calc(var(--container-gutters)/2)
}}
@media only screen and (min-width: 1300px){.th-container{
--main-container: 1776px
}}
@media(min-width: 1300px){.row{
--bs-gutter-x: 24px
}}
.gy-30{
--bs-gutter-y: 30px
}
.gx-0{
--bs-gutter-x: 0
}
.gy-50{
--bs-gutter-y: 50px
}
.gx-10{
--bs-gutter-x: 10px
}
.gy-10{
--bs-gutter-y: 10px
}
@media(min-width: 1299px){.gx-60{
--bs-gutter-x: 60px
}}
@media(max-width: 991px){.gy-50{
--bs-gutter-y: 40px
}}
select,.form-control,.form-select,textarea,input{
height: 64px;
padding: 0 25px 0 25px;
padding-right: 50px;
border: 1px solid var(--gray-color);
color: var(--body-color);
background-color: var(--white-color);
font-size: 14px;
width: 100%;
font-family: var(--body-font);
font-weight: 400;
border-radius: 16px;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
resize: none
}
select:focus,.form-control:focus,.form-select:focus,textarea:focus,input:focus{
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
border-color: var(--theme-color);
background-color: var(--white-color)
}
select::-moz-placeholder,.form-control::-moz-placeholder,.form-select::-moz-placeholder,textarea::-moz-placeholder,input::-moz-placeholder{
color: var(--body-color)
}
select::-webkit-input-placeholder,.form-control::-webkit-input-placeholder,.form-select::-webkit-input-placeholder,textarea::-webkit-input-placeholder,input::-webkit-input-placeholder{
color: var(--body-color)
}
select:-ms-input-placeholder,.form-control:-ms-input-placeholder,.form-select:-ms-input-placeholder,textarea:-ms-input-placeholder,input:-ms-input-placeholder{
color: var(--body-color)
}
select::-webkit-input-placeholder,.form-control::-webkit-input-placeholder,.form-select::-webkit-input-placeholder,textarea::-webkit-input-placeholder,input::-webkit-input-placeholder{
color: var(--body-color)
}
select::-moz-placeholder,.form-control::-moz-placeholder,.form-select::-moz-placeholder,textarea::-moz-placeholder,input::-moz-placeholder{
color: var(--body-color)
}
select:-ms-input-placeholder,.form-control:-ms-input-placeholder,.form-select:-ms-input-placeholder,textarea:-ms-input-placeholder,input:-ms-input-placeholder{
color: var(--body-color)
}
select::-ms-input-placeholder,.form-control::-ms-input-placeholder,.form-select::-ms-input-placeholder,textarea::-ms-input-placeholder,input::-ms-input-placeholder{
color: var(--body-color)
}
select::placeholder,.form-control::placeholder,.form-select::placeholder,textarea::placeholder,input::placeholder{
color: var(--body-color)
}
.form-select,select{
display: block;
width: 100%;
line-height: 1.5;
vertical-align: middle;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
background-position: right 26px center;
background-repeat: no-repeat;
background-size: 16px 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer
}
.form-select.style2,select.style2{
background-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.87109 1.71094L5.71484 5.62109C5.56901 5.7487 5.41406 5.8125 5.25 5.8125C5.08594 5.8125 4.9401 5.7487 4.8125 5.62109L0.65625 1.71094C0.382812 1.40104 0.373698 1.09115 0.628906 0.78125C0.920573 0.507812 1.23047 0.498698 1.55859 0.753906L5.25 4.25391L8.96875 0.753906C9.27865 0.498698 9.57943 0.498698 9.87109 0.753906C10.1263 1.08203 10.1263 1.40104 9.87109 1.71094Z' fill='%238B929C'/%3E%3C/svg%3E")
}
textarea.form-control,textarea{
min-height: 130px;
padding-top: 16px;
padding-bottom: 17px
}
.form-group{
position: relative;
margin-bottom: var(--bs-gutter-x)
}
.form-group>i,.form-group>img{
display: inline-block;
position: absolute;
right: 35px;
top: 17px;
font-size: 14px;
color: var(--body-color)
}
.form-group>i.fa-envelope,.form-group>img.fa-envelope{
padding-top: 1px
}
[class*=col-].form-group>i{
right: calc(var(--bs-gutter-x)/2 + 25px)
}
option:checked,option:focus,option:hover{
background-color: var(--theme-color);
color: var(--white-color)
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0
}
input[type=number]{
-moz-appearance: textfield
}
input[type=checkbox]{
visibility: hidden;
opacity: 0;
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
display: none
}
input[type=checkbox]:checked~label:before{
content: "";
color: var(--white-color);
background-color: var(--theme-color);
border-color: var(--theme-color)
}
input[type=checkbox]~label{
position: relative;
padding-left: 30px;
cursor: pointer;
display: block
}
input[type=checkbox]~label:before{
content: "";
font-family: var(--icon-font);
font-weight: 700;
position: absolute;
left: 0px;
top: 3.5px;
background-color: var(--white-color);
border: 1px solid var(--th-border-color);
height: 18px;
width: 18px;
line-height: 18px;
text-align: center;
font-size: 12px
}
input[type=radio]{
visibility: hidden;
opacity: 0;
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
display: none
}
input[type=radio]~label{
position: relative;
padding-left: 30px;
cursor: pointer;
line-height: 1;
display: inline-block;
font-weight: 600;
margin-bottom: 0
}
input[type=radio]~label::before{
content: "";
position: absolute;
font-family: var(--icon-font);
left: 0;
top: -2px;
width: 20px;
height: 20px;
padding-left: 0;
font-size: .6em;
line-height: 19px;
text-align: center;
border: 1px solid var(--theme-color);
border-radius: 100%;
font-weight: 700;
background: var(--white-color);
color: rgba(0,0,0,0);
-webkit-transition: all .2s ease;
transition: all .2s ease
}
input[type=radio]:checked~label::before{
border-color: var(--theme-color);
background-color: var(--theme-color);
color: var(--white-color)
}
label{
margin-bottom: .5em;
margin-top: -0.3em;
display: block;
color: var(--title-color);
font-family: var(--body-font);
font-size: 16px
}
textarea.is-invalid,select.is-invalid,input.is-invalid{
border: 1px solid var(--error-color) !important;
background-position: right calc(.375em + .8875rem) center;
background-image: none
}
textarea.is-invalid:focus,select.is-invalid:focus,input.is-invalid:focus{
outline: 0;
-webkit-box-shadow: none;
box-shadow: none
}
textarea.is-invalid{
background-position: top calc(.375em + .5875rem) right calc(.375em + .8875rem)
}
.form-messages{
display: none
}
.form-messages.mb-0 *{
margin-bottom: 0
}
.form-messages.success{
color: var(--success-color);
display: block
}
.form-messages.error{
color: var(--error-color);
display: block
}
.form-messages pre{
padding: 0;
background-color: rgba(0,0,0,0);
color: inherit
}
input[type=date]{
padding: 0 25px 0 25px;
position: relative
}
input[type=date]::-webkit-calendar-picker-indicator{
background: rgba(0,0,0,0);
position: absolute;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
cursor: pointer
}
[class*=col-].form-group>i{
right: calc(var(--bs-gutter-x)/2 + 25px)
}
input[type=time]{
padding: 0 30px;
position: relative
}
input[type=time]::-webkit-calendar-picker-indicator{
background: rgba(0,0,0,0);
position: absolute;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
cursor: pointer
}
:root{
--input-height: 56px
}
.nice-select{
-webkit-tap-highlight-color: rgba(0,0,0,0);
background-image: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
clear: both;
cursor: pointer;
position: relative;
line-height: calc(var(--input-height) - 2px);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap
}
.nice-select:after{
content: "";
font-family: var(--icon-font);
font-weight: 700;
font-size: 16px;
pointer-events: none;
border-bottom: 1px solid var(--body-color);
border-right: 1px solid var(--body-color);
position: absolute;
right: 25px;
line-height: calc(var(--input-height) - 2px);
top: 25px;
height: 8px;
width: 8px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.nice-select.open:after{
-webkit-transform: rotate(-135deg) translate(0, -5px);
transform: rotate(-135deg) translate(0, -5px)
}
.nice-select.open .list{
opacity: 1;
border-radius: 0;
pointer-events: auto;
display: block;
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
border-bottom: 1px solid var(--theme-color)
}
.nice-select.disabled{
color: #999;
pointer-events: none
}
.nice-select.right{
float: right
}
.nice-select.right .list{
left: auto;
right: 0
}
.nice-select.small{
font-size: 12px;
height: 36px;
line-height: 34px
}
.nice-select.small:after{
height: 4px;
width: 4px
}
.nice-select.small .option{
line-height: 34px;
min-height: 34px
}
.nice-select .list{
width: 100%;
background-color: #fff;
border-radius: 5px;
-webkit-box-shadow: 0 0 0 1px rgba(68,68,68,.11);
box-shadow: 0 0 0 1px rgba(68,68,68,.11);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 4px;
opacity: 0;
overflow: hidden;
padding: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
max-height: 250px;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transform: scale(0.75) translateY(-56px/2);
transform: scale(0.75) translateY(-56px/2);
-webkit-transition: all .2s cubic-bezier(0.5, 0, 0, 1.25),opacity .15s ease-out;
transition: all .2s cubic-bezier(0.5, 0, 0, 1.25),opacity .15s ease-out;
z-index: 9
}
.nice-select .list:hover .option:not(:hover){
background-color: rgba(0,0,0,0) !important
}
.nice-select .option{
cursor: pointer;
font-weight: 400;
line-height: 40px;
list-style: none;
min-height: 40px;
outline: none;
padding-left: 18px;
padding-right: 29px;
text-align: left;
-webkit-transition: all .2s;
transition: all .2s
}
.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus{
background-color: var(--smoke-color)
}
.nice-select .option.selected{
font-weight: bold
}
.nice-select .option.disabled{
background-color: rgba(0,0,0,0);
color: #999;
cursor: default
}
.no-csspointerevents .nice-select .list{
display: none
}
.no-csspointerevents .nice-select.open .list{
display: block
}
.swiper-wrapper.row{
-ms-flex-wrap: nowrap;
flex-wrap: nowrap
}
.th-slider.has-shadow{
padding-left: 12px;
padding-right: 12px;
margin: -25px -12px
}
.th-slider.has-shadow .swiper-wrapper{
padding: 25px 0
}
.swiper-fade .swiper-slide{
-webkit-transition: .6s ease-in-out;
transition: .6s ease-in-out
}
.swiper-fade .swiper-slide-prev{
opacity: 0
}
.swiper-pagination-progressbar{
--swiper-pagination-progressbar-size: 2px;
background: var(--th-border-color);
position: relative;
margin-top: 30px;
margin-bottom: 24px
}
@media(max-width: 1199px){.swiper-pagination-progressbar{
margin-top:20px
}}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
background: var(--theme-color)
}
.slider-controller{
margin-top: 60px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
.slider-controller .button{
width: calc(100% - 204px)
}
.slider-controller .slider-arrow{
min-width: 56px
}
@media(max-width: 1199px){.slider-controller{
margin-top:45px
}}
.swiper-pagination-bullets{
position: relative;
z-index: 3;
text-align: center;
margin: 45px 0 10px 0;
padding-bottom: 20px;
line-height: 20px;
height: 16px
}
.swiper-pagination-bullets .swiper-pagination-bullet{
display: inline-block;
--swiper-pagination-bullet-size: 16px;
--swiper-pagination-bullet-horizontal-gap: 15px;
margin: 5px 7px;
opacity: 1;
background-color: rgba(0,0,0,0);
border: 1px solid var(--th-border-color);
color: #e4e4e4;
border-radius: 50%;
position: relative;
cursor: pointer
}
@media(max-width: 575px){.swiper-pagination-bullets .swiper-pagination-bullet{
--swiper-pagination-bullet-horizontal-gap: 8px
}}
.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{
background-color: var(--theme-color);
border-color: var(--theme-color)
}
.slider-area{
position: relative
}
.slider-arrow{
display: inline-block;
padding: 0;
background-color: var(--white-color);
border: 1px solid var(--white-color);
-webkit-box-shadow: 0px 20px 20px hsla(0,0%,80%,.25);
box-shadow: 0px 20px 20px hsla(0,0%,80%,.25);
border-radius: 48px;
color: var(--theme-color);
position: absolute;
top: 50%;
left: var(--pos-x, -120px);
width: var(--icon-size, 88px);
height: var(--icon-size, 56px);
line-height: var(--icon-size, 56px);
font-size: var(--icon-font-size, 18px);
margin-top: calc(var(--icon-size, 56px)/-2);
z-index: 3;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
@media(max-width: 1500px){.slider-arrow{
display:none !important
}
.slider-arrow.default{
display: inline-block !important
}}
.slider-arrow.style2{
width: var(--icon-size, 56px);
height: var(--icon-size, 56px);
background-color: var(--theme-color);
color: var(--white-color);
border-color: var(--theme-color)
}
.slider-arrow.style2:hover{
background-color: var(--title-color);
color: var(--white-color);
border-color: var(--title-color);
border-color: var(--title-color)
}
.slider-arrow.style3{
background-color: var(--white-color);
color: var(--white-color);
--icon-size: 48px;
line-height: 48px;
border-radius: 50%;
border-color: var(--white-color)
}
.slider-arrow.style3:hover{
background-color: var(--title-color);
color: var(--white-color);
border-color: var(--white-color)
}
.slider-arrow.style4{
background-color: rgba(0,0,0,0);
color: var(--title-color);
border-color: #e4e4e4;
-webkit-box-shadow: none;
box-shadow: none;
font-size: var(--icon-font-size, 22px)
}
.slider-arrow.style4:hover{
background-color: var(--title-color);
color: var(--white-color);
border-color: var(--title-color);
border-color: var(--title-color)
}
.slider-arrow.style6{
--icon-size: 64px;
border: 1px solid #e1e4e5;
-webkit-box-shadow: none;
box-shadow: none
}
.slider-arrow.style6:hover{
border-color: var(--theme-color)
}
@media(max-width: 1500px){.slider-arrow.style6{
display:inline-block !important
}}
.slider-arrow.style7{
--icon-size: 64px;
border: 1px solid var(--title-color);
-webkit-box-shadow: none;
box-shadow: none;
background-color: rgba(0,0,0,0)
}
.slider-arrow.style7:hover{
background-color: var(--title-color);
border-color: var(--title-color)
}
@media(max-width: 1500px){.slider-arrow.style7{
display:inline-block !important
}}
.slider-arrow.default{
position: relative;
--pos-x: 0;
margin-top: 0
}
.slider-arrow.slider-next{
right: var(--pos-x, -120px);
left: auto
}
.slider-arrow:hover{
background-color: var(--theme-color);
color: var(--white-color);
border-color: var(--theme-color)
}
.slider-arrow:hover img{
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1)
}
.arrow-wrap{
position: relative
}
.arrow-wrap .slider-arrow{
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.4);
transform: scale(0.4)
}
@media(max-width: 1299px){.arrow-wrap .slider-arrow{
display:none
}}
.arrow-wrap:hover .slider-arrow{
opacity: 1;
visibility: visible;
-webkit-transform: scale(1);
transform: scale(1)
}
@media(max-width: 1500px){.slider-arrow{
--arrow-horizontal: -20px;
--pos-x: -70px
}}
@media(max-width: 1399px){.slider-arrow{
--arrow-horizontal: 40px;
--pos-x: -17px
}}
.icon-box .slider-arrow{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
visibility: visible
}
.icon-box .slider-arrow:not(:last-child){
margin-right: 8px
}
@media(max-width: 991px){.slider-arrow{
--icon-size: 40px;
line-height: 38px;
margin-right: 40px;
font-size: 14px
}
.slider-arrow.slider-next{
margin-right: 0;
margin-left: 40px
}
.icon-box .slider-arrow{
margin-right: 0
}}
.slider-drag-cursor{
pointer-events: none;
z-index: 99999;
position: fixed;
top: 0;
left: -2px;
padding: 0 18px;
-webkit-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
border-radius: 100%;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background: rgba(11,89,219,.7);
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
border-radius: 100%;
color: var(--white-color);
opacity: 0;
cursor: none
}
.slider-drag-cursor.active{
opacity: 1
}
.th-menu-wrapper{
position: fixed;
top: 0;
left: 0;
bottom: 0;
background-color: rgba(0,0,0,.6);
z-index: 999999;
width: 0;
width: 100%;
height: 100%;
-webkit-transition: all ease .8s;
transition: all ease .8s;
opacity: 0;
visibility: hidden
}
.th-menu-wrapper .mobile-logo{
padding-bottom: 30px;
padding-top: 40px;
display: block;
text-align: center;
background-color: var(--smoke-color)
}
.th-menu-wrapper .mobile-logo svg{
max-width: 185px
}
.th-menu-wrapper .th-menu-toggle{
border: none;
font-size: 22px;
position: absolute;
right: -16.5px;
top: 25px;
padding: 0;
line-height: 1;
width: 33px;
height: 33px;
line-height: 35px;
font-size: 18px;
z-index: 1;
color: var(--white-color);
background-color: var(--title-color);
border-radius: 50%
}
.th-menu-wrapper .th-menu-toggle:hover{
background-color: var(--title-color);
color: var(--white-color)
}
.th-menu-wrapper .th-menu-area{
width: 100%;
max-width: 310px;
background-color: #fff;
border-right: 3px solid var(--title-color);
height: 100%;
position: relative;
left: -110%;
opacity: 0;
visibility: hidden;
-webkit-transition: all ease 1s;
transition: all ease 1s;
z-index: 1
}
.th-menu-wrapper.th-body-visible{
opacity: 1;
visibility: visible
}
.th-menu-wrapper.th-body-visible .th-menu-area{
left: 0;
opacity: 1;
visibility: visible
}
.th-mobile-menu{
overflow-y: scroll;
max-height: calc(100vh - 200px);
padding-bottom: 40px;
margin-top: 33px;
text-align: left
}
.th-mobile-menu ul{
margin: 0;
padding: 0 0
}
.th-mobile-menu ul li{
border-bottom: 1px solid #fdedf1;
list-style-type: none
}
.th-mobile-menu ul li li:first-child{
border-top: 1px solid #fdedf1
}
.th-mobile-menu ul li a{
display: block;
position: relative;
padding: 12px 0;
line-height: 1.4;
font-size: 16px;
text-transform: capitalize;
color: var(--title-color);
padding-left: 0px
}
.th-mobile-menu ul li a:before{
content: "";
font-family: var(--icon-font);
position: absolute;
left: 0;
top: 12px;
margin-right: 10px;
display: inline-block;
display: none
}
.th-mobile-menu ul li.th-active>a{
color: var(--theme-color)
}
.th-mobile-menu ul li.th-active>a:before{
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
.th-mobile-menu ul li ul li:last-child{
border-bottom: none
}
.th-mobile-menu ul .menu-item-has-children>a .th-mean-expand{
position: absolute;
right: 0;
top: 50%;
font-weight: 400;
font-size: 12px;
width: 25px;
height: 25px;
line-height: 25px;
margin-top: -12.5px;
display: inline-block;
text-align: center;
background-color: var(--smoke-color);
color: var(--title-color);
-webkit-box-shadow: 0 0 20px -8px rgba(173,136,88,.5);
box-shadow: 0 0 20px -8px rgba(173,136,88,.5);
border-radius: 50%
}
.th-mobile-menu ul .menu-item-has-children>a .th-mean-expand:before{
content: "";
font-family: var(--icon-font)
}
.th-mobile-menu ul .menu-item-has-children>a:after{
content: "";
font-family: var(--icon-font);
width: 22px;
height: 22px;
line-height: 22px;
display: inline-block;
text-align: center;
font-size: 12px;
border-radius: 50px;
background-color: var(--smoke-color);
float: right;
margin-top: 1px
}
.th-mobile-menu ul .menu-item-has-children.th-active>a .th-mean-expand:before{
content: ""
}
.th-mobile-menu ul .menu-item-has-children.th-active>a:after{
content: ""
}
.th-mobile-menu>ul{
padding: 0 40px
}
.th-mobile-menu>ul>li:last-child{
border-bottom: none
}
.th-menu-toggle{
width: 56px;
height: 56px;
padding: 0;
font-size: 20px;
border: none;
border-radius: 8px;
background-color: var(--theme-color);
color: var(--white-color);
display: inline-block
}
.th-menu-toggle:hover{
background-color: var(--title-color)
}
@media(max-width: 400px){.th-menu-wrapper .th-menu-area{
width:100%;
max-width: 270px
}
.th-mobile-menu>ul{
padding: 0 20px
}}
.preloader{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
background-color: var(--white-color)
}
.preloader .th-btn{
padding: 15px 20px;
border-radius: 0;
font-size: 14px
}
.preloader-inner{
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
line-height: 1
}
.preloader-inner img{
display: block;
margin: 0 auto 0 auto
}
.loader{
font-size: 80px;
display: inline-block;
font-family: var(--title-font);
font-weight: 700;
color: var(--title-color);
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-shadow: 0 0 2px var(--theme-color),0 0 1px var(--theme-color),0 0 1px var(--theme-color);
position: relative;
line-height: normal
}
.loading-text{
position: absolute;
left: 0;
top: 0;
color: var(--theme-color);
width: 100%;
height: 100%;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: animloader 6s linear infinite;
animation: animloader 6s linear infinite
}
@-webkit-keyframes animloader{
0% {
width: 0%
}
100% {
width: 100%
}
}
@keyframes animloader{
0% {
width: 0%
}
100% {
width: 100%
}
}
.th-btn{
position: relative;
z-index: 1;
overflow: hidden;
vertical-align: middle;
text-align: center;
background-color: var(--theme-color);
color: var(--white-color);
font-family: var(--body-font);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-transform: capitalize;
border: none;
font-size: 16px;
font-weight: 400;
padding: 19px 40px;
border-radius: 10px;
-webkit-transition: all .3s 0s ease-out;
transition: all .3s 0s ease-out;
gap: 8px
}
.th-btn.th-icon i{
font-size: 20px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: .4s;
transition: .4s
}
.th-btn:before{
content: "";
width: 0;
height: 100%;
border-radius: 10px;
position: absolute;
top: 0;
left: -5%;
background-color: var(--title-color);
-webkit-transition: .5s ease;
transition: .5s ease;
display: block;
z-index: -1
}
.th-btn:hover,.th-btn.active{
color: var(--white-color);
-webkit-box-shadow: none;
box-shadow: none
}
.th-btn:hover:before,.th-btn.active:before{
width: 110%
}
.th-btn:hover.th-icon i,.th-btn.active.th-icon i{
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
.th-btn.style1 img{
-webkit-transition: .4s;
transition: .4s
}
.th-btn.style1:before,.th-btn.style1:after{
background-color: var(--white-color)
}
.th-btn.style1:hover{
color: var(--title-color)
}
.th-btn.style1:hover.th-icon:after{
background-color: var(--title-color)
}
.th-btn.style1:hover:before,.th-btn.style1:hover:after{
background-color: var(--white-color)
}
.th-btn.style1:hover img{
-webkit-filter: contrast(0) brightness(0);
filter: contrast(0) brightness(0)
}
.th-btn.style2{
background-color: rgba(0,0,0,0);
color: var(--white-color);
border: 1px solid var(--white-color)
}
.th-btn.style2:hover{
color: var(--black-color2);
border: 1px solid var(--white-color)
}
.th-btn.style2:hover:after{
background-color: var(--title-color)
}
.th-btn.style2:before{
background-color: var(--white-color)
}
.th-btn.style3{
background-color: var(--theme-color);
color: var(--white-color);
-webkit-box-shadow: none;
box-shadow: none;
border: none;
border-radius: 50px
}
.th-btn.style3:before{
background-color: var(--white-color)
}
.th-btn.style3:hover{
color: var(--title-color)
}
.th-btn.style4{
background-color: rgba(0,0,0,0);
color: var(--title-color);
border: 1px solid var(--title-color);
padding: 14px 25px
}
.th-btn.style4.th-icon:after{
background-color: var(--title-color)
}
.th-btn.style4:hover{
color: var(--white-color);
border: 1px solid var(--theme-color)
}
.th-btn.style4:hover.th-icon:after{
background-color: var(--white-color)
}
.th-btn.style4:before{
background-color: var(--theme-color)
}
.th-btn.style6{
background-color: var(--smoke-color);
color: var(--title-color);
-webkit-box-shadow: none;
box-shadow: none;
border: none
}
.th-btn.style6:before{
background-color: var(--theme-color)
}
.th-btn.style6:after{
background-color: var(--title-color)
}
.th-btn.style6:hover{
color: var(--white-color)
}
.th-btn.style6:hover:after{
background-color: var(--white-color)
}
.th-btn.style7:before,.th-btn.style7:after{
background-color: var(--white-color)
}
.th-btn.style7:hover{
color: var(--title-color)
}
.th-btn.style7:hover:before,.th-btn.style7:hover:after{
background-color: var(--white-color)
}
.th-btn.style7:hover:after{
background-color: var(--title-color)
}
.th-btn.black-btn{
background-color: var(--title-color);
color: var(--white-color)
}
.th-btn.black-btn:before{
background-color: var(--theme-color)
}
.th-btn.black-btn:hover{
color: var(--white-color)
}
.th-btn.th-radius{
border-radius: 50px
}
.th-btn.btn-2{
padding: 15px 30px
}
.icon-btn{
display: inline-block;
width: var(--btn-size, 56px);
height: var(--btn-size, 56px);
line-height: var(--btn-size, 53px);
font-size: var(--btn-font-size, 18px);
background-color: rgba(0,0,0,0);
border: 1px solid var(--th-border-color);
color: var(--title-color);
text-align: center;
border-radius: 99px;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
position: relative
}
.icon-btn.th-icon i{
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out
}
.icon-btn:hover{
background-color: var(--theme-color);
border-color: var(--theme-color);
color: var(--white-color)
}
.icon-btn:hover.th-icon i{
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
.icon-btn.style2{
background-color: var(--theme-color);
color: var(--white-color);
border: none;
border-radius: 99px
}
.icon-btn.style2:hover{
background-color: var(--theme-color)
}
.icon-btn.style3{
background-color: var(--smoke-color4);
border: 1px solid var(--th-border-color2);
color: var(--title-color);
border-radius: 99px
}
.icon-btn.style3:hover{
background-color: var(--theme-color);
color: var(--white-color)
}
.icon-btn.style3:hover img{
-webkit-filter: brightness(99) grayscale(99) invert(0);
filter: brightness(99) grayscale(99) invert(0)
}
.play-btn{
display: inline-block;
position: relative;
z-index: 1
}
.play-btn>i{
display: inline-block;
width: var(--icon-size, 56px);
height: var(--icon-size, 56px);
line-height: var(--icon-size, 56px);
text-align: center;
background: var(--white-color);
color: var(--title-color);
font-size: var(--icon-font-size, 1.7em);
border-radius: 50%;
z-index: 1;
-webkit-transition: all ease .4s;
transition: all ease .4s
}
.play-btn:after,.play-btn:before{
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: var(--white-color);
-webkit-animation-duration: var(--ripple-ani-duration);
animation-duration: var(--ripple-ani-duration);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: ripple3;
animation-name: ripple3;
z-index: -1;
border-radius: 50%;
-webkit-transition: all ease .4s;
transition: all ease .4s
}
.play-btn:after{
-webkit-animation-delay: 2s;
animation-delay: 2s
}
.play-btn:hover:after,.play-btn:hover::before,.play-btn:hover i{
background-color: var(--theme-color);
color: var(--white-color)
}
.play-btn.style2>i{
background-color: hsla(0,0%,100%,.3);
color: var(--white-color)
}
.play-btn.style2:before,.play-btn.style2:after{
background-color: rgba(0,0,0,0);
border: 1px solid var(--white-color)
}
.play-btn.style3>i{
--icon-size: 40px;
font-size: 14px;
border: 1px solid;
background-color: var(--theme-color);
color: var(--white-color)
}
.play-btn.style3:before,.play-btn.style3:after{
background-color: var(--white-color)
}
.play-btn.style3:hover>i{
background-color: var(--white-color);
color: var(--theme-color)
}
.play-btn.style3:hover:before,.play-btn.style3:hover:after{
background-color: var(--white-color)
}
.scroll-top{
position: fixed;
right: 30px;
bottom: 30px;
height: 50px;
width: 50px;
cursor: pointer;
display: block;
border-radius: 50px;
z-index: 10000;
opacity: 1;
visibility: hidden;
-webkit-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 300ms linear;
transition: all 300ms linear
}
.scroll-top:after{
content: "";
font-family: var(--icon-font);
position: absolute;
text-align: center;
line-height: 50px;
font-size: 20px;
color: var(--theme-color);
left: 0;
top: 0;
height: 50px;
width: 50px;
cursor: pointer;
display: block;
z-index: 1;
border: 2px solid var(--theme-color);
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 50%
}
.scroll-top svg{
color: var(--theme-color);
border-radius: 50%;
background: var(--white-color)
}
.scroll-top svg path{
fill: none
}
.scroll-top .progress-circle path{
stroke: var(--theme-color);
stroke-width: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 400ms linear;
transition: all 400ms linear
}
.scroll-top.show{
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
transform: translateY(0)
}
.sec-title{
line-height: 1.2;
margin-bottom: calc(var(--section-title-space) - 11px)
}
.sub-title{
display: block;
font-weight: 500;
font-size: 20px;
letter-spacing: .02em;
color: var(--theme-color);
font-family: var(--body-font);
position: relative;
margin-top: -0.2em;
margin-bottom: 5px
}
.sub-title:has(.squre-shape){
margin-bottom: 14px
}
.sub-title:has(.round-shape){
font-size: 18px;
font-weight: 500;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: normal
}
@media(max-width: 575px){.sub-title:has(.round-shape){
margin-bottom:15px;
font-size: 16px
}}
.sub-title .squre-shape{
width: 20px;
height: 20px;
display: inline-block;
position: relative
}
.sub-title .squre-shape:before,.sub-title .squre-shape:after{
content: "";
position: absolute;
width: 10px;
height: 10px;
background: var(--th-border-color);
top: 0;
left: 0
}
.sub-title .squre-shape:before{
background: var(--theme-color);
top: auto;
left: auto;
bottom: 0;
right: 0
}
.sub-title .squre-shape.right:after{
left: auto;
right: 0
}
.sub-title .squre-shape.right:before{
left: 0;
right: auto
}
.sub-title.text-white .squre-shape:after{
background: #6e7070
}
.sub-title.text-white .squre-shape:before{
background: var(--white-color)
}
.box-title{
font-size: 24px;
line-height: 1.4;
font-weight: 600;
margin-top: -0.32em
}
.box-title a{
color: inherit
}
.box-title a:hover{
color: var(--theme-color)
}
.sec-text{
font-size: 16px;
line-height: 26px
}
.sec-text.style2{
max-width: 776px
}
@media(max-width: 991px){.sec-text.style2{
display:block;
margin: auto auto 50px auto;
text-align: center
}}
.title-area{
margin-bottom: calc(var(--section-title-space) - 11px);
position: relative;
z-index: 2
}
.title-area .sec-title{
line-height: 1.2;
margin-bottom: 22px
}
.title-area.mb-0 .sec-title{
margin-bottom: -0.24em
}
.title-area .th-btn{
margin-top: 20px;
margin-bottom: 10px
}
@media(max-width: 1199px){.title-area,.sec-title{
--section-title-space: 60px
}}
@media(max-width: 991px){.title-area,.sec-title{
--section-title-space: 50px
}
.sub-title.h4{
font-size: 22px
}}
@media(max-width: 767px){.sub-title{
margin-bottom:10px
}}
.shape-mockup-wrap{
z-index: 2;
position: relative
}
.shape-mockup{
position: absolute;
z-index: -1;
pointer-events: none
}
.shape-mockup .svg-img{
height: 110px;
width: 110px
}
.media-body{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
.th-social a{
display: inline-block;
width: var(--icon-size, 32px);
height: var(--icon-size, 32px);
border: 1px solid var(--th-border-color);
line-height: var(--icon-size, 32px);
background: none;
color: var(--white-color);
font-size: 16px;
border-radius: 50%;
text-align: center;
margin-right: 10px;
-webkit-transition: all .4s ease;
transition: all .4s ease
}
.th-social a:last-child{
margin-right: 0
}
.th-social a:hover{
color: var(--white-color);
background-color: var(--theme-color);
border: 1px solid var(--theme-color)
}
.th-social a:hover i{
-webkit-animation: slideTop .5s;
animation: slideTop .5s
}
.bg-mask{
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat
}
.btn-group{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 30px
}
.btn-group.style1{
gap: 40px
}
@media(max-width: 375px){.btn-group.style1{
-webkit-box-pack:start;
-ms-flex-pack: start;
justify-content: flex-start
}}
.btn-group.style2{
gap: 20px 70px
}
@media(max-width: 767px){.btn-group.style2{
gap:20px 30px
}}
@media(max-width: 767px){.btn-group{
gap:20px
}}
@media(max-width: 375px){.btn-group{
-webkit-box-pack:center;
-ms-flex-pack: center;
justify-content: center
}}
.mfp-zoom-in .mfp-content{
opacity: 0;
-webkit-transition: all .4s ease;
transition: all .4s ease;
-webkit-transform: scale(0.5);
transform: scale(0.5)
}
.mfp-zoom-in.mfp-bg{
opacity: 0;
-webkit-transition: all .4s ease;
transition: all .4s ease
}
.mfp-zoom-in.mfp-ready .mfp-content{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
.mfp-zoom-in.mfp-ready.mfp-bg{
opacity: .7
}
.mfp-zoom-in.mfp-removing .mfp-content{
-webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0
}
.mfp-zoom-in.mfp-removing.mfp-bg{
opacity: 0
}
.bg-smoke4{
background-color: var(--smoke-color4) !important
}
.bg-black2{
background-color: var(--black-color2) !important
}
.bg-title{
background-color: var(--title-color) !important
}
.background-image,[data-bg-src]{
background-repeat: no-repeat;
background-size: cover;
background-position: center center
}
.bg-top-center{
background-size: auto;
background-position: top center
}
.th-radius{
border-radius: 20px
}
.smoke-bg{
background-color: var(--smoke-color)
}
.smoke-bg2{
background-color: var(--smoke-color2)
}
.black-bg3{
background-color: var(--black-color3)
}
.text-white{
color: var(--white-color) !important
}
.text-gray2{
color: var(--gray-color2) !important
}
.overlay{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%
}
[data-overlay]{
position: relative;
z-index: 2
}
[data-overlay] [class^=col-],[data-overlay] [class*=col-]{
z-index: 1
}
[data-overlay]:before{
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1
}
[data-overlay=theme]:before{
background-color: var(--theme-color)
}
[data-overlay=title]:before{
background-color: var(--title-color)
}
[data-overlay=smoke]:before{
background-color: var(--smoke-color)
}
[data-overlay=white]:before{
background-color: var(--white-color)
}
[data-overlay=black]:before{
background-color: var(--black-color)
}
[data-overlay=overlay1]:before{
background-color: #080E1C
}
[data-opacity="1"]:before{
opacity: 0.1
}
[data-opacity="2"]:before{
opacity: 0.2
}
[data-opacity="3"]:before{
opacity: 0.3
}
[data-opacity="4"]:before{
opacity: 0.4
}
[data-opacity="5"]:before{
opacity: 0.5
}
[data-opacity="6"]:before{
opacity: 0.6
}
[data-opacity="7"]:before{
opacity: 0.7
}
[data-opacity="8"]:before{
opacity: 0.8
}
[data-opacity="9"]:before{
opacity: 0.9
}
[data-opacity="10"]:before{
opacity: 1
}
.animated{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.ripple-animation{
-webkit-animation-duration: var(--ripple-ani-duration);
animation-duration: var(--ripple-ani-duration);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: ripple;
animation-name: ripple
}
.ripple-animation3{
-webkit-animation-duration: var(--ripple-ani-duration);
animation-duration: var(--ripple-ani-duration);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: ripple3;
animation-name: ripple3
}
@-webkit-keyframes ripple{
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
30% {
opacity: .3
}
100% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0
}
}
@keyframes ripple{
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
30% {
opacity: .3
}
100% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0
}
}
@-webkit-keyframes ripple2{
0% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: .4
}
50% {
opacity: .3
}
80% {
opacity: .2
}
100% {
-webkit-transform: scale(2.2);
transform: scale(2.2);
opacity: 0
}
}
@keyframes ripple2{
0% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: .4
}
50% {
opacity: .3
}
80% {
opacity: .2
}
100% {
-webkit-transform: scale(2.2);
transform: scale(2.2);
opacity: 0
}
}
@-webkit-keyframes ripple3{
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
30% {
opacity: .4
}
100% {
-webkit-transform: scale(2.9);
transform: scale(2.9);
opacity: .2
}
}
@keyframes ripple3{
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
30% {
opacity: .4
}
100% {
-webkit-transform: scale(2.9);
transform: scale(2.9);
opacity: .2
}
}
.movingX{
-webkit-animation: movingX 8s linear infinite;
animation: movingX 8s linear infinite
}
@-webkit-keyframes movingX{
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
50% {
-webkit-transform: translateX(50px);
transform: translateX(50px)
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes movingX{
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
50% {
-webkit-transform: translateX(50px);
transform: translateX(50px)
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
.spin{
-webkit-animation: spin 15s linear infinite;
animation: spin 15s linear infinite
}
@-webkit-keyframes spin{
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes spin{
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-webkit-keyframes slideTop{
49% {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
50% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
51% {
opacity: 1
}
}
@keyframes slideTop{
49% {
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
50% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
51% {
opacity: 1
}
}
@-webkit-keyframes animate-positive{
0% {
width: 0
}
}
@keyframes animate-positive{
0% {
width: 0
}
}
.slideinleft,.slideinright,.slideindown,.slideinup{
opacity: 0;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-delay: .3s;
animation-delay: .3s;
-webkit-animation-name: var(--animation-name);
animation-name: var(--animation-name)
}
.th-ani{
-webkit-transition: all 500ms ease;
transition: all 500ms ease
}
.th-ani:hover{
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px)
}
.swiper-slide-active .slideinleft{
--animation-name: slideinleft
}
.swiper-slide-active .slideinright{
--animation-name: slideinright
}
.swiper-slide-active .slideinup{
--animation-name: slideinup
}
.swiper-slide-active .slideindown{
--animation-name: slideindown
}
@-webkit-keyframes slideinup{
0% {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes slideinup{
0% {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@-webkit-keyframes scroll{
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(calc(-100% - var(--gap)));
transform: translateX(calc(-100% - var(--gap)))
}
}
@keyframes scroll{
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(calc(-100% - var(--gap)));
transform: translateX(calc(-100% - var(--gap)))
}
}
@-webkit-keyframes slideinright{
0% {
opacity: 0;
-webkit-transform: translateX(180px);
transform: translateX(180px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes slideinright{
0% {
opacity: 0;
-webkit-transform: translateX(180px);
transform: translateX(180px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@-webkit-keyframes slideindown{
0% {
opacity: 0;
-webkit-transform: translateY(-100px);
transform: translateY(-100px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes slideindown{
0% {
opacity: 0;
-webkit-transform: translateY(-100px);
transform: translateY(-100px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@-webkit-keyframes slideinleft{
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes slideinleft{
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@-webkit-keyframes fadeInLeft{
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes fadeInLeft{
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
.fadeInLeft{
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
@-webkit-keyframes fadeInRight{
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes fadeInRight{
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
.fadeInRight{
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}
@-webkit-keyframes fadeInUp{
0% {
opacity: 0;
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInUp{
0% {
opacity: 0;
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInUp{
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}
@-webkit-keyframes fadeInDown{
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes fadeInDown{
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown
}
@keyframes fadeInLeft{
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
.fadeInLeft{
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
@keyframes fadeInRight{
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
.fadeInRight{
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}
@keyframes fadeInUp{
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
.fadeInUp{
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}
@keyframes fadeInDown{
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown
}
@-webkit-keyframes slideUp{
0% {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes slideUp{
0% {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
.slideUp{
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp
}
.scroll-text-ani{
background: -webkit-gradient(linear, left top, right top, from(var(--title-color)), color-stop(0%, var(--th-border-color)));
background: linear-gradient(to right, var(--title-color) 0%, var(--th-border-color) 0%);
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,0);
-webkit-text-fill-color: rgba(0,0,0,0);
line-height: 1.2;
-webkit-transition: background .4s ease-out;
transition: background .4s ease-out;
background-size: 100% 100%;
background-repeat: no-repeat
}
.scroll-text-ani2{
background: -webkit-gradient(linear, left top, right top, from(var(--white-color)), color-stop(0%, var(--th-border-color)));
background: linear-gradient(to right, var(--white-color) 0%, var(--th-border-color) 0%);
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,0);
-webkit-text-fill-color: rgba(0,0,0,0);
line-height: 1.2;
-webkit-transition: background .4s ease-out;
transition: background .4s ease-out;
background-size: 100% 100%;
background-repeat: no-repeat
}
.widget_nav_menu ul{
list-style: none;
padding: 0;
margin: 0 0 0 0
}
.widget_nav_menu>ul,.widget_nav_menu .menu{
margin: 0 0 -10px 0
}
.widget_nav_menu a{
display: block;
background-color: var(--white-color);
border: 1px solid var(--smoke-color);
margin: 0 0 10px 0;
padding: 16.5px 45px 16.5px 25px;
font-size: 16px;
font-weight: 400;
line-height: 1.313;
color: var(--body-color);
border-radius: 8px
}
.widget_nav_menu a::before{
content: "";
position: absolute;
right: 25px;
top: 17px;
font-family: var(--icon-font);
font-weight: 600;
color: var(--body-color);
-webkit-transition: all ease .4s;
transition: all ease .4s
}
.widget_nav_menu li{
display: block;
position: relative
}
.widget_nav_menu li>span{
color: var(--title-color);
background-color: #fff;
font-weight: 600;
text-align: center;
position: absolute;
right: 24px;
top: 15px;
-webkit-transition: all ease .4s;
transition: all ease .4s;
pointer-events: none;
min-width: 20px;
text-align: right
}
.widget_nav_menu a:hover{
color: var(--white-color);
background-color: var(--theme-color);
border-color: var(--theme-color)
}
.widget_nav_menu a:hover:before{
color: var(--white-color)
}
.widget_nav_menu a:hover~span{
color: var(--white-color);
background-color: var(--theme-color)
}
.widget_nav_menu .children{
margin-left: 10px
}
.widget_nav_menu a{
padding-right: 20px
}
.widget_nav_menu .sub-menu{
margin-left: 10px
}
.widget{
padding: var(--widget-padding-y, 40px) var(--widget-padding-x, 40px);
background-color: var(--smoke-color);
border-radius: 20px;
margin-bottom: 40px;
position: relative
}
.widget:last-child{
margin-bottom: 0
}
.widget:last-child.footer-widget{
margin-bottom: 50px
}
.widget[data-overlay]:before{
z-index: -1
}
.widget select,.widget input,.widget .form-select,.widget .form-control,.widget textarea{
background-color: rgba(0,0,0,0);
border-radius: 32px;
border: 1px solid hsla(0,0%,100%,.3)
}
.widget select:focus,.widget input:focus,.widget .form-select:focus,.widget .form-control:focus,.widget textarea:focus{
border-color: var(--theme-color)
}
.widget select::-moz-placeholder,.widget input::-moz-placeholder,.widget .form-select::-moz-placeholder,.widget .form-control::-moz-placeholder,.widget textarea::-moz-placeholder{
color: var(--white-color)
}
.widget select::-webkit-input-placeholder,.widget input::-webkit-input-placeholder,.widget .form-select::-webkit-input-placeholder,.widget .form-control::-webkit-input-placeholder,.widget textarea::-webkit-input-placeholder{
color: var(--white-color)
}
.widget select:-ms-input-placeholder,.widget input:-ms-input-placeholder,.widget .form-select:-ms-input-placeholder,.widget .form-control:-ms-input-placeholder,.widget textarea:-ms-input-placeholder{
color: var(--white-color)
}
.widget select::-webkit-input-placeholder,.widget input::-webkit-input-placeholder,.widget .form-select::-webkit-input-placeholder,.widget .form-control::-webkit-input-placeholder,.widget textarea::-webkit-input-placeholder{
color: var(--white-color)
}
.widget select::-moz-placeholder,.widget input::-moz-placeholder,.widget .form-select::-moz-placeholder,.widget .form-control::-moz-placeholder,.widget textarea::-moz-placeholder{
color: var(--white-color)
}
.widget select:-ms-input-placeholder,.widget input:-ms-input-placeholder,.widget .form-select:-ms-input-placeholder,.widget .form-control:-ms-input-placeholder,.widget textarea:-ms-input-placeholder{
color: var(--white-color)
}
.widget select::-ms-input-placeholder,.widget input::-ms-input-placeholder,.widget .form-select::-ms-input-placeholder,.widget .form-control::-ms-input-placeholder,.widget textarea::-ms-input-placeholder{
color: var(--white-color)
}
.widget select::placeholder,.widget input::placeholder,.widget .form-select::placeholder,.widget .form-control::placeholder,.widget textarea::placeholder{
color: var(--white-color)
}
.widget textarea{
min-height: 120px
}
.widget .form-group>i{
background-color: var(--white-color)
}
.widget .form-group input[type=checkbox]~label:before{
background-color: var(--theme-color);
border: 1px solid var(--theme-color);
border-radius: 6px
}
.widget .form-group label{
color: var(--body-color);
padding-left: 16px;
text-align: left
}
.widget_title{
position: relative;
font-size: 24px;
font-weight: 600;
line-height: 34px;
font-family: var(--title-font);
line-height: 1em;
margin: -0.12em 0 30px 0
}
.widget_title{
font-size: 24px
}
.donwload-media-wrap{
margin-top: -4px;
margin-bottom: -4px
}
.donwload-media-wrap .download-media{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
background-color: var(--white-color);
padding: 14.5px;
-webkit-box-shadow: 0px 2px 4px 0px rgba(2,29,53,.1);
box-shadow: 0px 2px 4px 0px rgba(2,29,53,.1);
margin-bottom: 15px;
border-bottom: 1px solid #e7e7e7;
border-radius: 10px;
-webkit-transition: .4s;
transition: .4s
}
.donwload-media-wrap .download-media:last-child{
margin-bottom: 0;
border-bottom: none
}
.donwload-media-wrap .download-media:hover{
background: var(--theme-color)
}
.donwload-media-wrap .download-media:hover .download-media_icon i{
color: var(--white-color)
}
.donwload-media-wrap .download-media:hover .download-media_title a{
color: var(--white-color)
}
.donwload-media-wrap .download-media_icon{
margin-right: 5px
}
.donwload-media-wrap .download-media_icon i{
-webkit-transition: .4s;
transition: .4s
}
@media(max-width: 375px){.donwload-media-wrap .download-media_icon{
margin-right:10px
}}
.donwload-media-wrap .download-media_icon i{
font-size: 16px;
color: var(--theme-color)
}
.donwload-media-wrap .download-media_title{
line-height: 26px;
font-weight: 400;
margin-bottom: 0;
text-transform: uppercase
}
.donwload-media-wrap .download-media_title a{
display: block;
font-size: 14px;
color: var(--title-color)
}
@media(max-width: 375px){.donwload-media-wrap .download-media_title{
line-height:24px
}}
@media(max-width: 1199px){.widget{
--widget-padding-y: 30px;
--widget-padding-x: 30px
}
.widget_title{
font-size: 22px;
margin: -0.12em 0 28px 0
}}
@media(max-width: 991px){.widget{
--widget-padding-y: 40px;
--widget-padding-x: 40px
}}
@media(max-width: 575px){.widget{
--widget-padding-y: 30px;
--widget-padding-x: 30px
}}
.footer-widget{
margin-bottom: 50px
}
@media(max-width: 991px){.footer-widget{
margin-bottom:0
}}
.footer-widget,.footer-widget .widget{
padding: 0;
border: none;
padding-bottom: 0;
background-color: rgba(0,0,0,0);
-webkit-box-shadow: none;
box-shadow: none
}
.footer-widget .form-group>i{
color: var(--theme-color);
top: 18px
}
.footer-widget .widget_title{
font-size: 20px;
padding: 0;
margin: -0.12em 0 30px 0;
color: var(--white-color)
}
.footer-widget .widget_title:before,.footer-widget .widget_title:after{
display: none
}
.footer-widget.widget_nav_menu ul{
margin-top: -4px
}
.footer-widget.widget_nav_menu .menu,.footer-widget.widget_nav_menu>ul{
margin-bottom: -4px
}
.footer-widget.widget_nav_menu a{
font-size: 16px;
font-weight: 400;
padding: 0;
margin-bottom: 21px;
font-family: var(--body-font);
color: #b1b8c3;
display: block;
max-width: 100%;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
padding: 0 0 0 25px;
background-color: rgba(0,0,0,0);
border-bottom: none;
position: relative;
border: none
}
.footer-widget.widget_nav_menu a:before{
content: "";
position: absolute;
font-weight: 600;
left: 0;
top: 2px;
font-family: var(--icon-font);
-webkit-transform: translateY(0);
transform: translateY(0);
font-size: .9em;
background-color: rgba(0,0,0,0);
border: none;
color: inherit
}
.footer-widget.widget_nav_menu a:hover{
background-color: rgba(0,0,0,0);
color: var(--theme-color);
-webkit-box-shadow: none;
box-shadow: none
}
.footer-widget.widget_nav_menu a:hover:before{
color: var(--theme-color)
}
.footer-widget.widget_nav_menu li>span{
width: auto;
height: auto;
position: relative;
background-color: rgba(0,0,0,0);
color: var(--body-color);
line-height: 1
}
.footer-widget.widget_nav_menu li:last-child a{
margin-bottom: 0
}
.footer-widget .th-widget-contact .info-box_text a{
color: #b1b8c3
}
.footer-widget .th-widget-contact .info-box_text a:hover{
color: var(--theme-color)
}
.footer-widget .th-widget-contact .info-box_text .details p{
color: #b1b8c3
}
.about-logo{
margin-bottom: 15px
}
.th-widget-about .about-logo{
margin-bottom: 33px
}
.th-widget-about .about-text{
margin-bottom: 20px;
margin-top: -0.5em
}
.th-widget-about .th-social a{
color: var(--title-color)
}
.th-widget-about .th-social a:hover{
color: var(--white-color)
}
.th-widget-contact .info-box_text a{
color: var(--body-color)
}
.th-widget-contact .info-box_text .details p{
color: var(--body-color)
}
@media(max-width: 1199px){.footer-widget.widget_nav_menu a{
margin-bottom:16px
}}
@media(max-width: 767px){.footer-widget .widget_title{
margin-bottom:35px
}
.th-widget-about .about-text{
margin-bottom: 20px
}}
.th-header{
position: relative;
z-index: 41
}
.th-header .icon-btn{
border-radius: 99px
}
.th-header .menu-area{
position: relative
}
.sticky-wrapper{
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out
}
.sticky-wrapper.sticky{
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: var(--white-color);
-webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.07));
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.07));
-webkit-animation: stickyAni .4s ease-in-out;
animation: stickyAni .4s ease-in-out
}
@-webkit-keyframes stickyAni{
0% {
-webkit-transform: translate3d(0, -40px, 0) scaleY(0.8);
transform: translate3d(0, -40px, 0) scaleY(0.8);
opacity: .7
}
100% {
-webkit-transform: translate3d(0, 0, 0) scaleY(1);
transform: translate3d(0, 0, 0) scaleY(1);
opacity: 1
}
}
@keyframes stickyAni{
0% {
-webkit-transform: translate3d(0, -40px, 0) scaleY(0.8);
transform: translate3d(0, -40px, 0) scaleY(0.8);
opacity: .7
}
100% {
-webkit-transform: translate3d(0, 0, 0) scaleY(1);
transform: translate3d(0, 0, 0) scaleY(1);
opacity: 1
}
}
.main-menu a{
display: block;
position: relative;
font-weight: 400;
font-size: 16px;
font-family: var(--body-font);
color: var(--black-color2);
text-transform: capitalize
}
.main-menu a:hover{
color: var(--theme-color)
}
.main-menu>ul>li{
margin: 0 14px
}
.main-menu>ul>li>a{
padding: 32.5px 0
}
.main-menu>ul>li>a:hover{
color: var(--theme-color)
}
.main-menu ul{
margin: 0;
padding: 0
}
.main-menu ul li{
list-style-type: none;
display: inline-block;
position: relative
}
.main-menu ul li:has(.sub-menu)>a:after,.main-menu ul li:has(.mega-menu)>a:after,.main-menu ul li.menu-item-has-children>a:after{
content: "";
position: relative;
font-family: var(--icon-font);
margin-left: 4px;
font-weight: 600;
top: 0;
font-size: 14px
}
.main-menu ul li:last-child{
margin-right: 0 !important
}
.main-menu ul li:first-child{
margin-left: 0 !important
}
.main-menu ul li:hover>ul.sub-menu{
visibility: visible;
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
z-index: 9
}
.main-menu ul.sub-menu{
position: absolute;
text-align: left;
top: 100%;
left: 0;
background-color: var(--white-color);
visibility: hidden;
min-width: 230px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
padding: 7px;
left: -14px;
opacity: 0;
z-index: -1;
-webkit-box-shadow: 0px 4px 15px rgba(1,15,28,.06);
box-shadow: 0px 4px 15px rgba(1,15,28,.06);
border-radius: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
border-bottom: 3px solid var(--theme-color);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all .4s ease 0s;
transition: all .4s ease 0s
}
.main-menu ul.sub-menu a{
font-size: 16px;
line-height: 30px
}
.main-menu ul.sub-menu{
padding: 18px 20px 18px 18px;
left: -27px
}
.main-menu ul.sub-menu li{
display: block;
margin: 0 0;
padding: 0px 9px
}
.main-menu ul.sub-menu li.menu-item-has-children>a:after{
content: "";
float: right;
top: 1px
}
.main-menu ul.sub-menu li.menu-item-has-children:hover:after{
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.main-menu ul.sub-menu li a{
position: relative;
padding-left: 0;
text-transform: capitalize
}
.main-menu ul.sub-menu li a:before{
content: "";
position: absolute;
top: 6px;
left: 10px;
width: 18px;
height: 18px;
background: url('../images/favicon.png') no-repeat center/contain;
font-family: var(--icon-font);
text-align: center;
border-radius: 50%;
display: inline-block;
font-size: 1em;
line-height: 1;
color: var(--theme-color);
font-weight: 900;
opacity: 0;
visibility: visible;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out
}
.main-menu ul.sub-menu li a:hover{
padding-left: 23px
}
.main-menu ul.sub-menu li a:hover:before{
visibility: visible;
opacity: 1;
left: 0
}
.main-menu ul.sub-menu li ul.sub-menu{
left: 100%;
right: auto;
top: 0;
margin: 0 0;
margin-left: 20px
}
.main-menu ul.sub-menu li ul.sub-menu li ul{
left: 100%;
right: auto
}
@media(max-width: 1500px){.main-menu>ul>li{
margin:0 13px
}}
.main-menu ul.sub-menu li.menu-item-has-children>a:after{
content: "";
float: right;
top: 1px
}
.simple-icon{
border: none;
background-color: rgba(0,0,0,0);
padding: 0;
font-size: 24px;
position: relative
}
.simple-icon:has(.badge){
padding-right: 8px
}
.header-button{
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px
}
.header-button .th-btn{
margin-left: 10px;
padding: 15px 29px
}
@media(max-width: 1299px){.header-button .th-btn{
display:none
}}
.header-button .icon-btn{
line-height: var(--btn-size, 0)
}
.header-button .icon-btn>img{
-webkit-filter: brightness(0) invert(0);
filter: brightness(0) invert(0);
-webkit-transition: .4s;
transition: .4s
}
.header-button .icon-btn:hover>img{
-webkit-filter: brightness(99) invert(0);
filter: brightness(99) invert(0)
}
.header-links ul{
margin: 0;
padding: 0;
list-style-type: none
}
.header-links li{
display: inline-block;
position: relative;
font-family: var(--body-font);
font-size: 14px;
font-weight: 500
}
.header-links li:not(:last-child){
margin: 0 46px 0 0
}
.header-links li:not(:last-child):after{
content: "";
height: 14px;
width: 1px;
background-color: #999;
position: absolute;
top: 5px;
right: -27px
}
.header-links li>i{
color: var(--black-color2);
margin-right: 8px
}
.header-links li,.header-links span,.header-links p,.header-links a{
color: var(--black-color2)
}
.header-links a:hover{
color: var(--theme-color)
}
.header-links b,.header-links strong{
font-weight: 600;
margin-right: 6px
}
.header-top{
padding: 10px 0;
--body-color: $block-color2
}
.header-top a:hover{
color: var(--theme-color)
}
.header-layout1{
background-color: var(--white-color)
}
@media(max-width: 1199px){.header-layout1 .th-container{
max-width:100%
}}
.header-layout1 .header-top{
position: relative;
padding: 6px 0;
border-bottom: 1px solid #e1e4e5;
z-index: 2
}
.header-layout1 .main-menu>ul>li>a:before{
content: "";
position: absolute;
height: 1px;
left: 0;
background: var(--black-color2);
width: 0%;
margin-top: 30px;
-webkit-transition: .4s;
transition: .4s
}
.header-layout1 .main-menu>ul>li>a:hover,.header-layout1 .main-menu>ul>li>a.active{
color: var(--black-color2)
}
.header-layout1 .main-menu>ul>li>a:hover:before,.header-layout1 .main-menu>ul>li>a.active:before{
width: 100%
}
.header-layout1 .main-menu ul li.menu-item-has-children>a:hover:after{
color: var(--black-color2)
}
.header-layout1 .header-right{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 24px
}
@media(max-width: 1799px){.header-layout1 .header-right{
margin-right:0
}}
@media(max-width: 375px){.header-layout1 .header-right{
gap:15px
}}
.header-layout1 .header-right .header-links li:not(:last-child){
margin: 0 28px 0 0
}
@media(max-width: 375px){.header-layout1 .header-right .header-links li:not(:last-child){
margin:0 9px 0 0
}}
.header-layout1 .header-right .header-links li:not(:last-child):after{
top: 7px;
right: -17px
}
@media(max-width: 375px){.header-layout1 .header-right .header-links li:not(:last-child):after{
right:-6px
}}
@media(max-width: 375px){.header-layout1 .header-right .header-links li{
font-size:12px
}}
.header-layout1 .header-right i{
margin-left: 0;
font-size: 14px
}
.header-layout1 .sticky-wrapper.sticky .menu-area{
background-image: none !important
}
@media(max-width: 1199px){.header-layout1 .sticky-wrapper .menu-area{
padding:12px 0
}}
.header-layout1 .main-menu{
position: relative;
padding-left: 116px;
left:1px;
}
@media(min-width: 1930px){.header-layout1 .main-menu{
padding-left:150px
}}
@media(max-width: 1399px){.header-layout1 .main-menu{
padding-left:40px
}}
.header-layout1 .main-menu>ul>li{
margin: 0px 21px
}
@media(max-width: 1500px){.header-layout1 .main-menu>ul>li{
margin:0 16px
}}
@media(max-width: 1399px){.header-layout1 .main-menu>ul>li{
margin:0 10px
}}
.header-layout2 .main-menu{
padding-left: 0;
float:right;
}
.header-layout2 .main-menu>ul>li>a{
padding: 38.5px 0px
}
.header-layout2 .sticky-wrapper.sticky .menu-area{
padding-top: 0
}
@media(max-width: 1199px){.header-layout2 .sticky-wrapper.sticky .menu-area{
padding:auto
}}
.header-layout2 .header-top{
position: absolute;
width: 100%;
border-bottom: 1px solid #e1e4e5
}
@media(max-width: 1199px){.header-layout2 .header-top{
border-bottom:0;
top: 15px;
border-bottom: 0;
max-width: 270px;
-o-object-fit: cover;
object-fit: cover;
text-align: center;
margin: auto;
left: 0;
right: 0
}}
@media(max-width: 575px){.header-layout2 .header-top{
display:none
}}
.header-layout2 .menu-area{
padding-top: 38px
}
@media(max-width: 1199px){.header-layout2 .menu-area{
padding-top:60px;
padding-bottom: 15px
}}
.header-layout2 .header-button{
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: end
}
.animated-character{
-webkit-animation: animateCharacter .5s forwards;
animation: animateCharacter .5s forwards
}
@-webkit-keyframes animateCharacter{
from {
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
}
@keyframes animateCharacter{
from {
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
}
.title-area{
-webkit-transition: all .3s linear 0s;
transition: all .3s linear 0s
}
.row:after{
display: none
}
.footer-wrapper{
position: relative;
z-index: 2;
overflow: hidden
}
.widget-area{
padding-bottom: 70px
}
@media(max-width: 1199px){.footer-widget{
margin-bottom:40px
}}
.footer-widget .th-social a{
color: var(--white-color)
}
.copyright-wrap{
padding: 22px 0;
background-color: #3d4859
}
.copyright-wrap .copyright-text{
color: var(--white-color)
}
.copyright-wrap .copyright-text a{
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.copyright-wrap .copyright-text a:hover{
color: var(--theme-color)
}
.copyright-wrap.bg-title .copyright-text a:hover{
color: var(--theme-color)
}
.th-widget-contact{
max-width: 260px;
margin-bottom: -0.4em
}
.info-box_text{
line-height: 1.75em;
margin-top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 16px
}
.info-box_text .icon{
color: var(--body-color);
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
width: 40px;
height: 40px;
line-height: 37px;
background-color: var(--white-color);
border-radius: 50%;
text-align: center;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.info-box_text .icon img{
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
width:25px;
height:25px;
}
.info-box_text .icon:hover{
background-color: var(--theme-color)
}
.info-box_text .icon:hover img{
-webkit-filter: contrast(0) brightness(2);
filter: contrast(0) brightness(2)
}
.info-box_text .details{
margin-top: -0.3em
}
.info-box_text .details p{
color: #b1b8c3;
margin-bottom: 0
}
.info-box_text a{
color: #b1b8c3
}
.info-box_text a:hover{
color: var(--theme-color)
}
.info-box_text:not(:last-child){
margin-bottom: 18px
}
.th-widget-about .about-text{
color: #b1b8c3
}
.copyright-text{
margin: 0
}
@media(max-width: 991px){.copyright-text{
text-align:center
}}
.copyright-text a{
color: var(--theme-color)
}
.copyright-text a:hover{
color: var(--white-color)
}
.footer-links ul{
margin: 0;
padding: 0
}
.footer-links ul li{
display: inline-block
}
.footer-links ul li:not(:last-child){
margin-right: 40px
}
@media(max-width: 1199px){.footer-links ul li:not(:last-child){
margin-right:10px
}}
.footer-links ul li a{
color: #f8f8f8
}
.footer-links ul li a:hover{
color: var(--theme-color)
}
.footer-layout2{
--body-color: #0d0e09;
}
.footer-layout2 .widget-area{
padding-bottom: 93px
}
@media(max-width: 1199px){.footer-layout2 .widget-area{
padding-bottom:80px
}}
@media(max-width: 991px){.footer-layout2 .widget-area{
padding-bottom:30px
}}
.footer-layout2 .footer-widget .widget_title{
color: var(--white-color)
}
.footer-layout2 .footer-widget.widget_nav_menu a{
font-weight: 300
}
.footer-layout2 .about-text{
color: #b1b8c3;
font-weight: 300;
margin-bottom: 22px
}
.footer-layout2 .copyright-wrap{
background-color: rgba(0,0,0,0);
border-top: 1px solid rgba(233,246,249,.2);
padding: 18px 0
}
.footer-layout2 .copyright-wrap .copyright-text a{
color: var(--white-color)
}
.footer-layout2 .th-btn img{
-webkit-filter: contrast(1) brightness(1);
filter: contrast(1) brightness(1);
-webkit-transition: .9s;
transition: .9s
}
.footer-layout2 .th-btn:hover img{
-webkit-filter: contrast(0) brightness(0);
filter: contrast(0) brightness(0)
}
.breadcumb-content{
position: relative
}
.breadcumb-menu{
max-width: 100%;
padding: 0;
margin: 25px 0 -0.5em 0;
list-style-type: none;
position: relative
}
.breadcumb-menu li{
display: inline-block;
margin-right: 3px;
padding-right: 3px;
list-style: none;
position: relative
}
.breadcumb-menu li:after{
content: "";
background-size: 100% 100%;
top: -1px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
margin-left: 12px;
font-weight: 700;
font-size: 12px;
color: inherit;
font-family: var(--icon-font)
}
.breadcumb-menu li:last-child{
padding-right: 0;
margin-right: 0
}
.breadcumb-menu li:last-child:after{
display: none
}
.breadcumb-menu li,.breadcumb-menu a,.breadcumb-menu span{
white-space: normal;
word-break: break-word;
font-family: var(--body-font);
font-weight: 400;
font-size: 20px;
color: var(--white-color)
}
.breadcumb-title{
margin: -0.23em 0 -0.18em 0;
font-size: 64px;
font-family: var(--title-font);
color: var(--white-color);
font-weight: 700;
text-transform: capitalize
}
.breadcumb-area.style2{
padding: 24px
}
@media(max-width: 575px){.breadcumb-area.style2{
padding:12px
}}
.breadcumb-area.style2 .breadcumb-wrapper{
overflow: hidden;
border-radius: 16px
}
.breadcumb-wrapper{
position: relative;
background-color: var(--title-color);
background-position: left top;
padding: 152px 0;
overflow: hidden;
text-align: center;
background-repeat: repeat-x;
background-size: cover
}
.breadcumb-wrapper::before{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
background: rgba(11,20,34,.8)
}
@media(max-width: 1199px){.breadcumb-wrapper{
padding:150px 0
}
.breadcumb-title{
margin: -0.18em 0 -0.18em 0;
font-size: 54px
}
.breadcumb-menu li,.breadcumb-menu a,.breadcumb-menu span{
font-size: 16px;
line-height: 26px
}}
@media(max-width: 991px){.breadcumb-wrapper{
padding:130px 0
}}
@media(max-width: 767px){.breadcumb-title{
font-size:44px;
line-height: 54px
}}
@media(max-width: 575px){.breadcumb-wrapper{
padding:130px 0
}
.breadcumb-title{
font-size: 44px;
line-height: 54px
}}
@media(max-width: 375px){.breadcumb-wrapper{
padding:120px 0
}
.breadcumb-title{
font-size: 34px;
line-height: 44px
}
.breadcumb-menu{
margin: 15px 0 -0.5em 0
}}
blockquote{
font-size: 18px;
line-height: 1.777;
padding: 22px 16px 22px 60px;
font-weight: 400;
display: block;
position: relative;
background-color: var(--white-color);
margin: 50px 0 58px 0;
color: var(--title-color);
font-family: var(--body-font);
font-style: normal;
border: 1px solid rgba(110,112,112,.2) !important;
border-radius: 10px
}
@media(max-width: 1199px){blockquote{
font-size:16px
}}
blockquote p{
font-size: inherit;
font-family: inherit;
margin-top: -0.3em;
margin-bottom: 9px;
line-height: inherit;
color: inherit;
width: 100%;
position: relative;
z-index: 3
}
blockquote p a{
color: inherit
}
blockquote:before{
content: "";
position: absolute;
top: -1px;
left: -1px;
height: 50px;
width: 33px;
background-color: var(--white-color)
}
blockquote:after{
content: "";
position: absolute;
top: -10px;
left: 0px;
height: 20px;
width: 25px;
background-color: var(--theme-color);
clip-path: path("M2.21945 18.2759C0.775335 16.6762 0 14.8819 0 11.9734C0 6.8553 3.44484 2.26804 8.45438 0L9.70641 2.01506C5.03057 4.65307 4.11643 8.07633 3.75189 10.2347C4.5048 9.82818 5.49044 9.68633 6.45645 9.77992C8.98576 10.0241 10.9795 12.1898 10.9795 14.8819C10.9795 16.2393 10.4625 17.5411 9.54219 18.5009C8.62192 19.4608 7.37376 20 6.07229 20C5.35256 19.9934 4.64126 19.8376 3.97981 19.5416C3.31836 19.2457 2.71996 18.8154 2.21945 18.2759ZM16.24 18.2759C14.7959 16.6762 14.0205 14.8819 14.0205 11.9734C14.0205 6.8553 17.4654 2.26804 22.4749 0L23.7269 2.01506C19.0511 4.65307 18.137 8.07633 17.7724 10.2347C18.5253 9.82818 19.511 9.68633 20.477 9.77992C23.0063 10.0241 25 12.1898 25 14.8819C25 16.2393 24.483 17.5411 23.5627 18.5009C22.6424 19.4608 21.3943 20 20.0928 20C19.3731 19.9934 18.6618 19.8376 18.0003 19.5416C17.3389 19.2457 16.7405 18.8154 16.24 18.2759Z")
}
blockquote cite{
display: inline-block;
font-size: 20px;
line-height: 1;
font-weight: 500;
font-style: normal;
font-family: var(--body-font);
white-space: nowrap;
position: absolute;
bottom: -17px;
left: 100px;
background-color: var(--theme-color);
color: var(--white-color);
padding: 7px 45px 7px 20px;
clip-path: polygon(0 0, 100% 0, calc(100% - 25px) 100%, 0% 100%);
border-radius: 0px;
overflow: hidden
}
@media(max-width: 375px){blockquote cite{
left:50px
}}
blockquote cite br{
display: none
}
blockquote:not(:has(>cite)) p:last-child{
margin-bottom: -0.3em
}
blockquote p:has(cite){
padding-bottom: 10px
}
blockquote p cite{
margin-top: 20px;
margin-bottom: -0.5em;
bottom: -32px
}
@media(max-width: 1199px){blockquote{
padding:22px 30px
}}
@media(max-width: 767px){blockquote cite{
font-size: 18px
}}
@media(max-width: 575px){blockquote{
padding:20px 20px 30px
}}
@media(max-width: 375px){blockquote cite{
font-size:14px
}
blockquote cite:before{
width: 20px;
bottom: 40px;
right: 20px
}}
.blog-meta{
display: block
}
.blog-meta span,.blog-meta a{
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--body-color);
font-family: var(--body-font);
position: relative;
text-transform: capitalize;
margin-right: 12px
}
.blog-meta span i,.blog-meta a i{
margin-right: 8px;
color: var(--theme-color)
}
.blog-meta span:not(:last-child),.blog-meta a:not(:last-child){
padding-right: 16px
}
.blog-meta span:not(:last-child):after,.blog-meta a:not(:last-child):after{
content: "";
height: 10px;
width: 1px;
background-color: #999;
position: absolute;
top: 50%;
right: 0;
margin-top: -4px
}
.blog-meta .author img{
border-radius: 50%;
width: 30px;
height: 30px;
margin-right: 6px
}
.blog-meta a:hover{
color: var(--theme-color)
}
@media(max-width: 1199px){.blog-meta span,.blog-meta a{
margin-right:15px
}
.blog-meta span:not(:last-child),.blog-meta a:not(:last-child){
padding-right: 15px
}}
@media(max-width: 575px){.blog-meta span,.blog-meta a{
margin-right:20px
}
.blog-meta span:not(:last-child),.blog-meta a:not(:last-child){
padding-right: 0
}
.blog-meta span:not(:last-child):after,.blog-meta a:not(:last-child):after{
display: none
}}
.blog-img{
line-height: 1px
}
.blog-img img{
width: 100%;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out
}
.th-blog{
margin-bottom: 30px
}
.blog-single{
position: relative;
margin-bottom: 40px;
overflow: hidden
}
.blog-single .blog-meta{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 10px;
z-index: 2;
gap: 10px 0
}
.blog-single .blog-meta span,.blog-single .blog-meta a{
display: inline-block;
font-size: 14px;
font-weight: 400;
color: #1c2d37;
font-family: var(--body-font);
position: relative;
line-height: normal
}
.blog-single .blog-meta span img,.blog-single .blog-meta span svg,.blog-single .blog-meta span i,.blog-single .blog-meta a img,.blog-single .blog-meta a svg,.blog-single .blog-meta a i{
margin-right: 11px;
color: #1c2d37
}
.blog-single .blog-meta span:last-child,.blog-single .blog-meta a:last-child{
margin-right: 0;
padding-right: 0;
border: 0
}
.blog-single .blog-meta span:last-child:after,.blog-single .blog-meta a:last-child:after{
display: none
}
.blog-single .blog-meta .author img{
border-radius: 50%;
width: 30px;
height: 30px;
margin-right: 6px
}
.blog-single .blog-content{
margin: 0 0 0 0;
padding: 0;
position: relative
}
.blog-single .blog-content .blog-single{
padding: 20px
}
.blog-single .blog-content .th-btn{
padding: 14px 35px
}
.blog-single .th-btn{
border: 1px solid var(--th-border-color)
}
.blog-single .blog-img{
position: relative;
overflow: hidden;
background-color: var(--smoke-color);
margin-bottom: 0
}
.blog-single .blog-img{
position: relative;
overflow: hidden;
-webkit-transition: all .4s ease;
transition: all .4s ease;
border-radius: 10px;
margin-bottom: 40px
}
.blog-single .blog-img:before{
background: hsla(0,0%,100%,.5);
content: "";
height: 0;
left: 0;
opacity: 1;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 9
}
.blog-single .blog-img img{
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: 1.3s all ease;
transition: 1.3s all ease
}
.blog-single .blog-img .slider-arrow{
--pos-x: 30px;
--icon-size: 44px;
border: none;
background-color: var(--white-color);
color: var(--black-color2);
-webkit-box-shadow: none;
box-shadow: none;
visibility: visible;
opacity: 1;
-webkit-transform: none;
transform: none
}
.blog-single .blog-img .slider-arrow:hover{
background-color: var(--theme-color);
color: var(--white-color)
}
@media(max-width: 1199px){.blog-single .blog-img .slider-arrow{
display:none
}}
.blog-single .blog-img .play-btn{
--icon-size: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: calc(var(--icon-size)/-2) 0 0 calc(var(--icon-size)/-2)
}
@media(max-width: 767px){.blog-single .blog-img .play-btn{
--icon-size: 70px
}}
.blog-single:hover .blog-img:before{
height: 100%;
opacity: 0;
-webkit-transition: all .4s linear;
transition: all .4s linear
}
.blog-single:hover .blog-img img{
-webkit-transform: scale(1.3);
transform: scale(1.3)
}
.blog-details .blog-content>p:last-child{
margin-bottom: 0
}
@media(max-width: 1199px){.blog-single{
--blog-space-x: 20px;
--blog-space-y: 20px
}}
@media(max-width: 991px){.blog-single{
--blog-space-x: 40px;
--blog-space-y: 40px
}}
@media(max-width: 767px){.blog-single{
--blog-space-x: 30px;
--blog-space-y: 30px
}}
.blog-details{
overflow: hidden
}
.th-hero-wrapper{
position: relative;
z-index: 2;
overflow: hidden
}
.th-hero-bg{
position: absolute;
inset: 0;
overflow: hidden
}
.th-hero-bg img{
position: relative;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden
}
.hero-title{
font-size: 42px;
color: var(--white-color);
line-height: 1.1;
margin-bottom: 25px;
text-transform: capitalize
}
@media(max-width: 1500px){.hero-title{
font-size:37px
}}
@media(max-width: 1299px){.hero-title{
font-size:34px
}}
@media(max-width: 1199px){.hero-title{
font-size:25px
}}
@media(max-width: 991px){.hero-title{
font-size:25px
}}
@media(max-width: 767px){.hero-title{
font-size:22px;
line-height: 1.4
}}
@media(max-width: 575px){.hero-title{
font-size:18px
}}
.hero-1{
position: relative;
overflow: hidden
}
.hero-1 .th-hero-bg{
z-index: 2
}
.hero-1-shape{
position: absolute;
top: 0;
left: 0;
z-index: 2
}
.hero-1 .th-swiper-custom{
position: absolute;
top: 47%;
margin: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
right: 55px;
z-index: 9
}
@media(max-width: 991px){.hero-1 .th-swiper-custom{
display:none
}}
.hero-1 .th-swiper-custom .swiper-pagination-bullets{
position: relative;
z-index: 3;
text-align: center;
margin: 25px 0 0px 0;
line-height: 10px;
height: 3px
}
.hero-1 .th-swiper-custom .swiper-pagination-bullets .swiper-pagination-bullet{
display: inline-block;
--swiper-pagination-bullet-size: 24px;
--swiper-pagination-bullet-horizontal-gap: 12px;
margin: 5px 7px;
height: 2px;
opacity: 1;
border-radius: 0;
background-color: var(--white-color);
border: 1px solid var(--white-color);
position: relative;
-webkit-transition: .4s;
transition: .4s;
cursor: pointer
}
.hero-1 .th-swiper-custom .swiper-pagination-bullets .swiper-pagination-bullet:before{
display: none
}
.hero-1 .th-swiper-custom .swiper-pagination-bullets .swiper-pagination-bullet:hover,.hero-1 .th-swiper-custom .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{
background-color: var(--theme-color);
border: 1px solid var(--theme-color)
}
.hero-1 .th-swiper-custom .swiper-pagination-bullets .swiper-pagination-bullet:first-child{
margin-left: 0
}
.hero-1 .th-swiper-custom .swiper-pagination-bullets .swiper-pagination-bullet:last-child{
margin-right: 0
}
.hero-1 .slider-pagination .swiper-pagination-bullets .swiper-pagination-bullet{
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
background: var(--white-color);
height: 3px
}
.hero-1 .slider-arrow{
--icon-size: 64px;
background: rgba(250,252,244,.2);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
border-radius: 36px;
color: var(--white-color);
-webkit-box-shadow: none;
box-shadow: none;
border: none;
opacity: 1;
visibility: visible;
left: var(--pos-x, -90px)
}
@media(max-width: 1399px){.hero-1 .slider-arrow{
display:none
}}
.hero-1 .slider-arrow img{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg)
}
.hero-1 .slider-arrow.slider-next{
right: var(--pos-x, -90px);
left: auto
}
.hero-1 .slider-arrow:hover{
background-color: var(--theme-color);
color: var(--white-color)
}
.hero-1:hover .slider-arrow{
opacity: 1;
visibility: visible;
-webkit-transform: scale(1);
transform: scale(1)
}
.hero-style1{
position: relative;
z-index: 9;
padding: 150px 0 150px 0
}
@media(max-width: 1199px){.hero-style1{
padding:90px 0 90px 0
}}
@media(max-width: 991px){.hero-style1{
max-width:700px
}}
.feature-item_icon i{
font-size: 42px;
color: var(--theme-color);
line-height: 1;
}
@media (min-width: 1200px){.feature-item{ padding: 30px 18px; }
.feature-item .box-title{ font-size: 18px; }}
.hero-style1 .sub-title{
position: relative;
font-weight: 500;
font-size: 30px;
display: block;
margin-bottom: 20px;
padding-left: 62px;
color: var(--white-color)
}
@media(max-width: 767px){.hero-style1 .sub-title{
padding-left:0
}}
.hero-style1 .sub-title::before{
position: absolute;
width: 35px;
height: 2px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
content: "";
background: var(--white-color);
z-index: 3
}
@media(max-width: 767px){.hero-style1 .sub-title::before{
display:none
}}
.hero-style1 .sub-title::after{
position: absolute;
width: 10px;
height: 10px;
top: 50%;
left: 35px;
border-radius: 50%;
content: "";
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: var(--white-color)
}
@media(max-width: 767px){.hero-style1 .sub-title::after{
display:none
}}
@media(max-width: 575px){.hero-style1 .sub-title{
font-size:18px
}}
.hero-style1 .hero-title{
margin-bottom: 15px
}
.hero-style1 .hero-text{
font-family: var(--style-font);
font-weight: 500;
font-size: 20px;
line-height: 1.5;
max-width: 700px;
margin-bottom: 30px
}
.hero-style1 .btn-group{
gap: 16px
}
@media(max-width: 480px){.hero-style1 .btn-group{
-webkit-box-pack:center;
-ms-flex-pack: center;
justify-content: center
}}
.hero-style1 .th-btn{
padding: 15px 29.5px
}
.hero-style1 .th-btn:not(:last-child){
margin-right: 10px
}
@media(max-width: 767px){.hero-style1{
text-align: center;
margin-left: auto;
margin-right: auto;
padding-bottom:150px;
}}
@media(max-width: 375px){.hero-style1 .hero-title{
font-size:37px;
line-height: 47px
}}
@media(max-width: 330px){.hero-title{
font-size:32px
}}
.heroThumbs{
max-width: 848px;
position: absolute;
bottom: 70px;
bottom: 250px;
right: -88px;
margin-right: 0 !important;
padding-right: 400px
}
.heroThumbs.style2{
bottom: 70px
}
@media(max-width: 1199px){.heroThumbs{
display:none
}}
.hero-slider-3{
position: relative
}
.hero3Thumbs{
position: relative;
right: 0;
bottom: 110px;
max-width: 424px;
height: 186px
}
@media(max-width: 1299px){.hero3Thumbs{
bottom:99px
}}
@media(max-width: 1199px){.hero3Thumbs{
bottom:65px
}}
@media(max-width: 991px){.hero3Thumbs{
display:none
}}
@media(max-width: 1299px){
}
.th-hero-bg.overlay::before{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
background-color: var(--title-color);
opacity: .7;
z-index: 1
}
.popup-search-box{
position: fixed;
top: 0;
left: 50%;
background-color: rgba(0,0,0,.95);
height: 0;
width: 0;
overflow: hidden;
z-index: 99999;
opacity: 0;
visibility: hidden;
border-radius: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all ease .4s;
transition: all ease .4s
}
.popup-search-box button.searchClose{
width: 60px;
height: 60px;
position: absolute;
top: 40px;
right: 40px;
border-width: 1px;
border-style: solid;
border-color: var(--theme-color);
background-color: rgba(0,0,0,0);
font-size: 22px;
border-radius: 50%;
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transition: all ease .4s;
transition: all ease .4s;
color: var(--theme-color)
}
.popup-search-box button.searchClose:hover{
color: var(--body-color);
background-color: #fff;
border-color: rgba(0,0,0,0);
border-color: rgba(0,0,0,0);
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
.popup-search-box form{
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
padding-bottom: 40px;
cursor: auto;
width: 100%;
max-width: 700px;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
-webkit-transition: -webkit-transform ease .4s;
transition: -webkit-transform ease .4s;
transition: transform ease .4s;
transition: transform ease .4s, -webkit-transform ease .4s
}
@media(max-width: 1199px){.popup-search-box form{
max-width:600px
}}
.popup-search-box form input{
font-size: 18px;
height: 70px;
width: 100%;
border: 2px solid var(--theme-color);
background-color: rgba(0,0,0,0);
padding-left: 30px;
color: #fff;
border-radius: 50px
}
.popup-search-box form input::-moz-placeholder{
color: #fff
}
.popup-search-box form input::-webkit-input-placeholder{
color: #fff
}
.popup-search-box form input:-ms-input-placeholder{
color: #fff
}
.popup-search-box form input::-ms-input-placeholder{
color: #fff
}
.popup-search-box form input::placeholder{
color: #fff
}
.popup-search-box form button{
position: absolute;
top: 0px;
background-color: rgba(0,0,0,0);
border: none;
color: #fff;
font-size: 24px;
right: 12px;
color: var(--white-color);
cursor: pointer;
width: 70px;
height: 70px;
-webkit-transition: all ease .4s;
transition: all ease .4s;
-webkit-transform: scale(1.001);
transform: scale(1.001)
}
.popup-search-box form button:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
.popup-search-box.show{
opacity: 1;
visibility: visible;
width: 100.1%;
height: 100%;
-webkit-transition: all ease .4s;
transition: all ease .4s;
border-radius: 0
}
.popup-search-box.show form{
-webkit-transition-delay: .5s;
transition-delay: .5s;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1)
}
.sidemenu-wrapper{
position: fixed;
z-index: 99999;
right: 0;
top: 0;
height: 100%;
width: 0;
background-color: rgba(0,0,0,.75);
opacity: 0;
visibility: hidden;
-webkit-transition: all ease .8s;
transition: all ease .8s
}
.sidemenu-wrapper .th-social a{
-webkit-box-shadow: none;
box-shadow: none;
color: var(--title-color)
}
.sidemenu-wrapper .closeButton{
display: inline-block;
border: 2px solid;
width: 50px;
height: 50px;
line-height: 48px;
font-size: 24px;
padding: 0;
position: absolute;
top: 20px;
right: 20px;
background-color: var(--white-color);
border-radius: 50%;
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transition: all ease .4s;
transition: all ease .4s
}
.sidemenu-wrapper .closeButton:hover{
color: var(--theme-color);
border-color: var(--theme-color);
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
.sidemenu-wrapper .sidemenu-content{
background-color: #fff;
width: 450px;
margin-left: auto;
padding: 80px 30px;
height: 100%;
overflow: scroll;
position: relative;
right: -500px;
cursor: auto;
-webkit-transition-delay: 1s;
transition-delay: 1s;
-webkit-transition: right ease 1s;
transition: right ease 1s
}
@media(max-width: 450px){.sidemenu-wrapper .sidemenu-content{
width:300px
}}
.sidemenu-wrapper .sidemenu-content::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.1);
box-shadow: inset 0 0 1px rgba(0,0,0,.1);
background-color: #f5f5f5
}
.sidemenu-wrapper .sidemenu-content::-webkit-scrollbar{
width: 2px;
background-color: #f5f5f5
}
.sidemenu-wrapper .sidemenu-content .widget_title{
color: var(--title-color)
}
.sidemenu-wrapper .widget{
padding: 0;
border: none;
background-color: rgba(0,0,0,0)
}
.sidemenu-wrapper.show{
opacity: 1;
visibility: visible;
width: 100%;
-webkit-transition: all ease .8s;
transition: all ease .8s
}
.sidemenu-wrapper.show .sidemenu-content{
right: 0;
opacity: 1;
visibility: visible
}
.sidemenu-wrapper .info-box_text .icon{
background-color: #f2f5fa
}
.sidemenu-wrapper .info-box_text .icon:hover{
background-color: var(--theme-color)
}
.sidemenu-wrapper .th-widget-about .about-text{
color: var(--body-color);
font-family: var(--style-font)
}
.woocommerce-message,.woocommerce-info{
position: relative;
padding: 11px 20px 11px 50px;
background-color: var(--theme-color);
color: var(--white-color);
font-size: 14px;
font-weight: 500;
margin-bottom: 15px
}
.woocommerce-message a,.woocommerce-info a{
color: var(--white-color);
text-decoration: underline
}
.woocommerce-message a:hover,.woocommerce-info a:hover{
color: var(--title-color)
}
.woocommerce-message:before,.woocommerce-info:before{
content: "";
font-family: var(--icon-font);
font-weight: 400;
margin-right: 10px;
font-size: 18px;
position: absolute;
left: 20px;
top: 11px
}
.woocommerce-notices-wrapper .woocommerce-message{
background-color: var(--theme-color);
color: var(--white-color)
}
.woocommerce-notices-wrapper .woocommerce-message:before{
content: "";
font-weight: 300
}
.woocommerce-form-login-toggle .woocommerce-info{
background-color: var(--theme-color);
color: var(--white-color)
}
.woocommerce-form-login-toggle .woocommerce-info a{
color: inherit
}
.woocommerce-form-login-toggle .woocommerce-info a:hover{
color: var(--title-color)
}
.woocommerce-form-register,.woocommerce-form-coupon,.woocommerce-form-login{
padding: 35px 40px 35px 40px;
background-color: var(--smoke-color);
border-radius: 8px;
margin-bottom: 0
}
@media(max-width: 575px){.woocommerce-form-register,.woocommerce-form-coupon,.woocommerce-form-login{
padding:40px 20px
}}
.woocommerce-form-register .form-group,.woocommerce-form-coupon .form-group,.woocommerce-form-login .form-group{
margin-bottom: 20px
}
.woocommerce-form-register .form-group:last-child,.woocommerce-form-coupon .form-group:last-child,.woocommerce-form-login .form-group:last-child{
margin-bottom: 0
}
.woocommerce-form-register .form-group select,.woocommerce-form-register .form-group .form-control,.woocommerce-form-register .form-group .form-select,.woocommerce-form-register .form-group textarea,.woocommerce-form-register .form-group input,.woocommerce-form-coupon .form-group select,.woocommerce-form-coupon .form-group .form-control,.woocommerce-form-coupon .form-group .form-select,.woocommerce-form-coupon .form-group textarea,.woocommerce-form-coupon .form-group input,.woocommerce-form-login .form-group select,.woocommerce-form-login .form-group .form-control,.woocommerce-form-login .form-group .form-select,.woocommerce-form-login .form-group textarea,.woocommerce-form-login .form-group input{
background-color: var(--white-color)
}
.woocommerce-error{
background-color: var(--error-color);
color: #fff;
list-style: none;
padding: 10px 26px;
margin: 0 0 30px 0;
border-radius: 0;
font-weight: 500;
font-size: 14px
}
nav.woocommerce-MyAccount-navigation li{
border: 1px solid #ddd;
margin: 0;
border-top: none
}
nav.woocommerce-MyAccount-navigation li:first-child{
border-top: 1px solid #ddd
}
nav.woocommerce-MyAccount-navigation li a{
color: var(--title-color);
font-weight: 700;
padding: 7px 17px;
display: block
}
nav.woocommerce-MyAccount-navigation li a:hover{
color: var(--white-color);
background-color: var(--theme-color)
}
.woocommerce-MyAccount-content h3{
margin-top: -0.3em
}
.woocommerce-grouped-product-list-item{
border-collapse: separate;
border-spacing: 0 15px;
margin-bottom: 5px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: none
}
.woocommerce-grouped-product-list-item td{
border: none;
vertical-align: middle;
padding: 0 5px
}
.woocommerce-grouped-product-list-item td:first-child{
padding: 0
}
.woocommerce-grouped-product-list-item label{
margin: 0;
font-size: 14px;
text-transform: capitalize
}
.woocommerce-grouped-product-list-item label a{
color: var(--title-color)
}
.woocommerce-grouped-product-list-item label a:hover{
color: var(--theme-color)
}
.woocommerce-grouped-product-list-item .label{
border: none
}
.woocommerce-grouped-product-list-item__label{
border: none !important;
font-weight: 600
}
.woocommerce-grouped-product-list-item__price{
border: none !important
}
.woocommerce-grouped-product-list-item__price .amount{
font-size: 18px !important
}
.woocommerce-grouped-product-list-item del{
margin-left: 12px
}
.woocommerce-product-attributes th,.woocommerce-product-attributes td{
border: 1px solid var(--th-border-color)
}
.woocommerce-product-attributes th p:last-child,.woocommerce-product-attributes td p:last-child{
margin-bottom: 0
}
.woocommerce-grouped-product-list-item__label:after,.woocommerce-grouped-product-list-item__price:after{
display: none
}
table.woocommerce-product-attributes{
margin-bottom: 30px
}
.rating-select label{
margin: 0;
margin-right: 10px
}
.rating-select p.stars{
margin-bottom: 0;
line-height: 1
}
.rating-select p.stars a{
position: relative;
height: 14px;
width: 18px;
text-indent: -999em;
display: inline-block;
text-decoration: none
}
.rating-select p.stars a::before{
display: block;
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 14px;
line-height: 1;
font-family: var(--icon-font);
content: "";
font-weight: 400;
text-indent: 0;
color: var(--yellow-color)
}
.rating-select p.stars a:hover~a::before{
content: "";
font-weight: 400
}
.rating-select p.stars:hover a::before{
content: "";
font-weight: 700
}
.rating-select p.stars.selected a.active::before{
content: "";
font-weight: 700
}
.rating-select p.stars.selected a.active~a::before{
content: "";
font-weight: 400
}
.rating-select p.stars.selected a:not(.active)::before{
content: "";
font-weight: 700
}
@media(max-width: 767px){.woocommerce-message,.woocommerce-info{
font-size:14px;
line-height: 22px;
padding: 10px 15px 10px 37px
}
.woocommerce-message:before,.woocommerce-info:before{
font-size: 16px;
top: 10px;
left: 15px
}}
.th-product{
-webkit-transition: all ease .4s;
transition: all ease .4s;
background: var(--white-color);
padding: 20px;
border-radius: 16px;
-webkit-box-shadow: 0px 4px 50px rgba(0,0,0,.06);
box-shadow: 0px 4px 50px rgba(0,0,0,.06)
}
@media(max-width: 1299px){.th-product{
padding:25px
}}
.th-product .product-title{
font-size: 20px;
margin: 2px 0 2px 0;
font-weight: 600
}
@media(max-width: 1299px){.th-product .product-title{
font-size:18px
}}
.th-product .product-title a{
color: inherit
}
.th-product .product-title a:hover{
color: var(--theme-color)
}
.th-product .product-tag{
font-size: 14px;
position: absolute;
top: 10px;
left: 10px;
background-color: var(--theme-color);
color: var(--white-color);
padding: 0 12px;
min-width: 60px;
border-radius: 4px;
z-index: 3;
line-height: 24px
}
.th-product .woocommerce-product-rating{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
margin-top: 3px;
margin-bottom: -0.4rem
}
.th-product .product-content{
margin-bottom: -0.4rem
}
.th-product .product-img{
--space: 0px;
background-color: var(--smoke-color);
overflow: hidden;
position: relative;
margin: 0 0 20px 0;
border-radius: 8px;
text-align: center;
z-index: 2
}
.th-product .product-img:before{
--space: 0px;
content: "";
height: calc(100% - var(--space)*2);
width: calc(100% - var(--space)*2);
border-radius: inherit;
position: absolute;
top: var(--space);
left: var(--space);
background-color: var(--title-color);
z-index: 1;
border-radius: 8px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
visibility: hidden;
opacity: 0;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out
}
.th-product .product-img img{
width: 100%;
-webkit-transition: all ease .4s;
transition: all ease .4s;
-webkit-transform: scale(1);
transform: scale(1)
}
.th-product .actions{
height: 100%;
position: absolute;
left: 0;
top: 50%;
right: 0;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 3;
margin-top: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.th-product .actions .icon-btn{
--btn-size: 45px;
line-height: 42px;
font-size: 16px;
border-radius: 50%;
border-color: var(--white-color);
background-color: var(--white-color);
color: var(--title-color);
-webkit-transform: translateY(30px);
transform: translateY(30px)
}
.th-product .actions .icon-btn:hover{
color: var(--white-color);
background-color: var(--theme-color);
border-color: var(--theme-color)
}
.th-product .actions>*{
margin: 0 var(--icon-gap-x, 5px)
}
.th-product .actions>*>a{
margin: 0
}
.th-product:hover .product-img img{
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
.th-product:hover .product-img:before{
-webkit-transform: scaleX(1);
transform: scaleX(1);
visibility: visible;
opacity: 1
}
.th-product:hover .actions{
margin-top: 0;
opacity: 1;
visibility: visible
}
.th-product:hover .actions .icon-btn{
-webkit-transform: translateY(0);
transform: translateY(0)
}
.swiper-slide.style2 .th-product{
-webkit-box-shadow: 0px 2px 14px rgba(0,0,0,.06);
box-shadow: 0px 2px 14px rgba(0,0,0,.06)
}
.mfp-content{
margin: 1.5rem auto
}
.mfp-content .product-about{
padding-top: 20px;
padding-bottom: 20px
}
.mfp-content .container{
position: relative
}
.mfp-content .product-big-img{
margin-top: 12px;
margin-bottom: 12px
}
.mfp-fade.mfp-bg{
opacity: 0;
-webkit-transition: all .15s ease-out;
transition: all .15s ease-out
}
.mfp-fade.mfp-bg.mfp-ready{
opacity: .8
}
.mfp-fade.mfp-bg.mfp-removing{
opacity: 0
}
.mfp-fade.mfp-wrap .mfp-content{
opacity: 0;
-webkit-transition: all .4s ease-out;
transition: all .4s ease-out
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{
opacity: 1
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content{
opacity: 0
}
.product-big-img{
background-color: var(--smoke-color);
text-align: center;
overflow: hidden;
border-radius: 16px
}
.product-big-img .img{
width: 100%;
border-radius: 16px
}
.product-big-img .img img{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 16px;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out
}
.product-big-img .slider-pagination{
position: absolute;
bottom: 40px;
left: 0
}
.product-tab-style2{
border-bottom: 1px solid #e4e4e4;
margin: 95px 0 40px 0
}
.product-tab-style2 li{
margin: 0 45px 0 0
}
.product-tab-style2 li:last-child{
margin-right: 0
}
.product-tab-style2 a{
font-family: var(--title-font);
color: var(--title-color);
font-size: 20px;
font-weight: 600;
display: inline-block;
position: relative;
line-height: 1;
padding: 0 0 17px 0;
text-transform: capitalize
}
.product-tab-style2 a:before{
content: "";
position: absolute;
left: 0;
bottom: -1px;
height: 1px;
width: 0;
background-color: var(--theme-color);
-webkit-transition: all ease .4s;
transition: all ease .4s
}
.product-tab-style2 a.active:before{
width: 100%
}
#productTabContent{
margin-bottom: -10px
}
.product-about .product-title{
margin: 0 0 5px 0
}
.product-about .woocommerce-product-rating{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 5px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
top: 2px;
font-size: 16px;
line-height: 20px;
padding: 0 0 0 0;
margin: 0 0 0 0;
margin-bottom: 15px
}
.product-about .woocommerce-review-link{
color: var(--body-color)
}
.product-about .actions{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 15px;
margin: 35px 0 25px 0
}
.product-about .actions .th-btn{
padding: 17px 44.5px
}
.product-about .actions .icon-btn{
--btn-size: 60px;
border-color: var(--theme-color);
background-color: var(--theme-color);
color: var(--white-color);
border-radius: 99px;
font-size:30px;
}
.product-about .actions .icon-btn:hover{
background-color: var(--title-color);
border-color: var(--title-color)
}
.product-about .th-social a{
--icon-size: 40px;
line-height: 38px;
font-size: 14px;
border: 1px solid var(--th-border-color);
border-radius: 0
}
.product-about .th-social a:hover{
border-color: var(--theme-color)
}
.woocommerce-Reviews .comment-list{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 0 24px;
margin: -12px !important;
margin-bottom: 28px !important
}
.woocommerce-Reviews .comment-list li{
width: 50%
}
@media(max-width: 991px){.woocommerce-Reviews .comment-list li{
width:100%
}}
@media(max-width: 991px){.woocommerce-Reviews .comment-list{
grid-template-columns:repeat(1, 1fr)
}}
#description{
margin-bottom: 30px
}
@media(max-width: 1199px){.product-about{
padding-left: 0
}}
@media(max-width: 991px){.product-big-img{
margin-bottom:40px
}}
@media(max-width: 575px){.product-about .actions{
gap:15px 15px
}}
.product-thumb{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
cursor: pointer
}
.product-thumb .tab-btn{
border: 1px solid var(--title-color);
width: 60px;
height: 60px
}
@media(max-width: 375px){.product-thumb .tab-btn{
width:40px;
height: 40px
}}
.product-thumb .tab-btn.active{
border: 1px solid var(--theme-color)
}
.woocommerce-cart-form{
text-align: center
}
.case-slider .swiper-slide{
border-radius: 24px;
-webkit-filter: blur(4px);
filter: blur(4px)
}
.case-slider .swiper-slide.swiper-slide-active{
border-radius: 24px;
-webkit-filter: none !important;
filter: none !important
}
.case-slider .swiper-slide.swiper-slide-active .case-img::before{
opacity: .8;
visibility: visible
}
.case-slider .swiper-slide.swiper-slide-active .case-img .case-action{
opacity: 1;
visibility: visible
}
.case-slider .case-box .case-content{
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
.case-box{
position: relative;
border-radius: 24px;
overflow: hidden;
--space: 40px
}
@media(max-width: 991px){.case-box{
--space: 20px
}}
@media(max-width: 575px){.case-box{
padding:10px;
border-radius: 20px;
--space: 10px
}}
.case-box .case-img{
position: relative;
overflow: hidden;
border-radius: 24px;
z-index: 2
}
@media(max-width: 991px){.case-box .case-img{
margin-bottom:0
}}
.case-box .case-img:before{
position: absolute;
content: "";
inset: 0;
border-radius: 24px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(11, 20, 34, 0.8)), to(rgba(11, 20, 34, 0.8)));
background: linear-gradient(180deg, rgba(11, 20, 34, 0.8) 0%, rgba(11, 20, 34, 0.8) 100%);
opacity: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: .4s;
transition: .4s
}
@media(max-width: 575px){.case-box .case-img{
border-radius:15px
}}
.case-box .case-img img{
width: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 24px;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out
}
@media(max-width: 575px){.case-box .case-img img{
max-width:100%;
max-height: 100%;
border-radius: 15px
}}
.case-box .case-content{
position: absolute;
bottom: 40px;
z-index: 2;
padding: 0 40px;
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out
}
@media(max-width: 991px){.case-box .case-content{
max-width:380px;
padding: 0 20px;
bottom: 20px;
gap: 60px
}}
@media(max-width: 767px){.case-box .case-content{
max-width:100%;
display: block;
margin: auto
}}
.case-box .box-title{
margin-bottom: 0px
}
.case-box .box-title a{
color: var(--white-color)
}
.case-box .case-subtitle{
font-size: 16px;
color: var(--white-color);
margin-bottom: 8px
}
.case-box .case-action{
opacity: 0;
visibility: hidden;
z-index: 2;
-webkit-transition: .4s;
transition: .4s
}
.case-box .th-btn{
padding: 11.5px 34px
}
.case-box .th-btn:after{
-webkit-mask-image: url("../img/icon/arrow-right3.svg");
mask-image: url("../img/icon/arrow-right3.svg");
width: 16px;
height: 16px
}
@media(max-width: 1199px){.case-box .th-btn{
padding:10px 20px
}}
@media(max-width: 767px){.case-box .th-btn{
padding:7px 20px;
margin-top: 10px
}
.case-box .th-btn:after{
display: none
}}
@media(max-width: 375px){.case-box .th-btn{
padding:7px 10px
}}
.case-box:hover .case-img:before{
-webkit-transform: scale(1);
transform: scale(1)
}
.case-action{
position: absolute;
top: 20px;
right: 20px
}
.case-btn{
position: relative;
font-size: 24px;
width: 55px;
height: 56px;
line-height: 56px;
text-align: center;
display: inline-block;
border-radius: 30px;
color: var(--white-color);
border: 1px solid #fff;
-webkit-transition: .4s;
transition: .4s
}
.case-btn i{
position: relative;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: .4s;
transition: .4s
}
.case-btn::before{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border-radius: 50%;
background-color: var(--theme-color);
-webkit-transition: .4s;
transition: .4s
}
.case-btn:hover{
border: 1px solid var(--theme-color)
}
.case-btn:hover i{
color: var(--white-color);
-webkit-transform: rotate(0);
transform: rotate(0)
}
.case-btn:hover::before{
opacity: 1;
visibility: visible;
-webkit-transform: scale(1);
transform: scale(1)
}
.case-action{
position: absolute;
top: 20px;
right: 20px
}
.case-btn{
position: relative;
font-size: 24px;
width: 55px;
height: 56px;
line-height: 56px;
text-align: center;
display: inline-block;
border-radius: 30px;
color: var(--white-color);
border: 1px solid #fff;
-webkit-transition: .4s;
transition: .4s
}
.case-btn i{
position: relative
}
.case-btn::before{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border-radius: 50%;
background-color: var(--theme-color);
-webkit-transition: .4s;
transition: .4s
}
.case-btn:hover{
border: 1px solid var(--theme-color)
}
.case-btn:hover i{
color: var(--white-color)
}
.case-btn:hover::before{
opacity: 1;
visibility: visible;
-webkit-transform: scale(1);
transform: scale(1)
}
.case-box{
position: relative
}
.case-box.style2 .case-img{
position: relative;
height: 360px;
overflow: hidden;
z-index: 2;
border-radius: 16px
}
.case-box.style2 .case-img img{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 16px
}
@media(max-width: 991px){.case-box.style2 .case-img img{
margin-bottom:0
}}
.case-box.style2 .case-img::before{
width: 100%;
height: 100%;
-webkit-transition: .4s ease;
transition: .4s ease
}
.case-box.style2 .case-img:after{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
inset: 0;
background: rgba(11,20,34,.7);
border-radius: 16px;
opacity: 0;
-webkit-transition: .4s ease;
transition: .4s ease;
-webkit-transform: scale(0);
transform: scale(0);
z-index: 2
}
@media(max-width: 575px){.case-box.style2 .case-img.global-img{
margin-bottom:0
}}
.case-box.style2 .icon-btn{
position: absolute;
width: 56px;
height: 56px;
top: 20px;
right: 20px;
line-height: 56px;
text-align: center;
border: 1px solid var(--white-color);
z-index: 3;
-webkit-transform: scale(0);
transform: scale(0);
font-size: 15px;
font-weight: 300;
color: var(--white-color)
}
.case-box.style2 .icon-btn:hover{
background-color: rgba(0,0,0,0)
}
@media(max-width: 991px){.case-box.style2 .box-title{
font-size:24px
}}
.case-box.style2 .case-content{
z-index: 2;
text-align: start
}
@media(max-width: 991px){.case-box.style2 .case-content{
padding:0 20px;
bottom: 50px
}}
.case-box.style2:hover .case-img:after{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
.case-box.style2:hover .case-content{
opacity: 1;
visibility: visible;
-webkit-transform: scale(1);
transform: scale(1)
}
.case-box.style2:hover .icon-btn{
-webkit-transform: scale(1);
transform: scale(1)
}
.woocommerce-checkout .form-group{
margin-bottom: 0
}
.woocommerce-checkout .form-select,.woocommerce-checkout .form-control{
margin-bottom: 0
}
.woocommerce-checkout .shipping_address{
margin-top: -3px
}
.woocommerce-form-login select,.woocommerce-form-login .form-select,.woocommerce-form-login .form-control,.woocommerce-form-coupon select,.woocommerce-form-coupon .form-select,.woocommerce-form-coupon .form-control,.woocommerce-checkout select,.woocommerce-checkout .form-select,.woocommerce-checkout .form-control{
margin-bottom: var(--bs-gutter-x)
}
#ship-to-different-address{
margin-top: 15px
}
.woocommerce-checkout .form-group input:not(:last-child){
margin-bottom: var(--bs-gutter-x)
}
.woocommerce-checkout-payment{
text-align: left
}
.woocommerce-checkout-payment ul{
margin: 0;
padding: 0;
list-style-type: none
}
.woocommerce-checkout-payment ul li{
padding-top: 12px;
border-bottom: 1px solid #d8d8d8;
border-radius: 0;
font-size: 16px
}
.woocommerce-checkout-payment ul input[type=radio]~label{
margin-bottom: 17px;
color: var(--body-color)
}
.woocommerce-checkout-payment ul input[type=radio]~label img{
margin-bottom: -2px;
margin-left: 10px
}
.woocommerce-checkout-payment .payment_box{
color: #a1b1bc;
background-color: #ecf0f1;
border: 1px solid #d8d8d8;
border-bottom: none;
font-size: 14px;
padding: 10px 20px;
border-radius: 4px;
display: none
}
.woocommerce-checkout-payment .payment_box p{
margin: 0
}
@media(max-width: 767px){.woocommerce-checkout-payment ul input[type=radio]~label img{
max-width: 150px
}}
.contact-form{
background-color: var(--white-color);
-webkit-box-shadow: 0px 20px 20px hsla(0,0%,80%,.25);
box-shadow: 0px 20px 20px hsla(0,0%,80%,.25);
border-radius: 16px;
padding: 40px
}
@media(max-width: 1299px){.contact-form{
padding:30px
}}
.contact-form select::-moz-placeholder,.contact-form .form-control::-moz-placeholder,.contact-form .form-select::-moz-placeholder,.contact-form textarea::-moz-placeholder,.contact-form input::-moz-placeholder{
color: var(--body-color)
}
.contact-form select::-webkit-input-placeholder,.contact-form .form-control::-webkit-input-placeholder,.contact-form .form-select::-webkit-input-placeholder,.contact-form textarea::-webkit-input-placeholder,.contact-form input::-webkit-input-placeholder{
color: var(--body-color)
}
.contact-form select:-ms-input-placeholder,.contact-form .form-control:-ms-input-placeholder,.contact-form .form-select:-ms-input-placeholder,.contact-form textarea:-ms-input-placeholder,.contact-form input:-ms-input-placeholder{
color: var(--body-color)
}
.contact-form select::-webkit-input-placeholder,.contact-form .form-control::-webkit-input-placeholder,.contact-form .form-select::-webkit-input-placeholder,.contact-form textarea::-webkit-input-placeholder,.contact-form input::-webkit-input-placeholder{
color: var(--body-color)
}
.contact-form select::-moz-placeholder,.contact-form .form-control::-moz-placeholder,.contact-form .form-select::-moz-placeholder,.contact-form textarea::-moz-placeholder,.contact-form input::-moz-placeholder{
color: var(--body-color)
}
.contact-form select:-ms-input-placeholder,.contact-form .form-control:-ms-input-placeholder,.contact-form .form-select:-ms-input-placeholder,.contact-form textarea:-ms-input-placeholder,.contact-form input:-ms-input-placeholder{
color: var(--body-color)
}
.contact-form select::-ms-input-placeholder,.contact-form .form-control::-ms-input-placeholder,.contact-form .form-select::-ms-input-placeholder,.contact-form textarea::-ms-input-placeholder,.contact-form input::-ms-input-placeholder{
color: var(--body-color)
}
.contact-form select::placeholder,.contact-form .form-control::placeholder,.contact-form .form-select::placeholder,.contact-form textarea::placeholder,.contact-form input::placeholder{
color: var(--body-color)
}
.contact-form .nice-select .option{
color: var(--title-color)
}
.contact-form .nice-select .option.selected{
color: var(--theme-color) !important;
background: var(--theme-color) !important
}
.contact-form .nice-select .option.selected.focus{
color: #fff !important;
background: var(--theme-color) !important
}
.contact-form .nice-select .option:hover,.contact-form .nice-select .option.focus{
background: var(--theme-color) !important;
color: #fff !important
}
.contact-form .nice-select.open .list{
border-bottom: 3px solid var(--theme-color)
}
.contact-form i{
color: #888c97
}
.contact-form textarea.form-control,.contact-form textarea{
min-height: 159px;
padding-top: 16px;
padding-bottom: 17px
}
.contact-form .nice-select:after{
border-bottom: 1px solid var(--body-color);
border-right: 1px solid var(--body-color)
}
.contact-form .th-btn{
padding: 19.5px 42px
}
.contact-form .th-btn i{
color: var(--white-color)
}
.contact-form.style2 textarea.form-control,.contact-form.style2 textarea{
min-height: 130px
}
.contact-form.style2 select,.contact-form.style2 .form-control,.contact-form.style2 .form-select,.contact-form.style2 textarea,.contact-form.style2 input{
height: 64px
}
.about-contact-grid{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 24px;
border: 1px solid #e1e4e6;
border-radius: 8px;
padding: 24px 24px 18px;
-webkit-transition: .4s;
transition: .4s
}
@media(max-width: 375px){.about-contact-grid{
gap:14px;
padding: 15px 15px 18px
}}
.about-contact-grid:not(:last-child){
margin-bottom: 30px
}
.about-contact-grid .about-contact-icon{
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
width: 70px;
height: 70px;
line-height: 68px;
text-align: center;
background: var(--title-color);
border-radius: 50%;
color: var(--white-color);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
@media(max-width: 375px){.about-contact-grid .about-contact-icon{
width:60px;
height: 60px;
line-height: 60px
}}
.about-contact-grid .about-contact-icon img{
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1)
}
.about-contact-grid .box-title{
font-size: 20px;
font-weight: 600;
margin-top: -0.3em;
margin-bottom: 2px
}
.about-contact-grid .about-contact-details-text{
color: var(--title-color);
margin-bottom: 0
}
.about-contact-grid .about-contact-details-text a:not(:hover){
color: initial
}
.about-contact-grid:hover .about-contact-icon{
background: var(--theme-color)
}
.contact-map{
position: relative;
line-height: 0px;
border-radius: 30px
}
@media(max-width: 991px){.contact-map{
margin-bottom:40px
}}
.contact-map iframe{
width: 100%;
height: 365px;
border-radius: 30px
}
.contact-map.style2 iframe{
width: 100%;
height: 398px;
border-radius: 0
}
.contact-map.style3 iframe{
border-radius: 16px
}
.form-select{
line-height: 64px
}
.contact-infobox{
padding: 60px;
border-radius: 30px
}
@media(max-width: 1299px){.contact-infobox{
padding:40px
}}
@media(max-width: 575px){.contact-infobox{
padding:20px
}}
.contact-infobox .title-area{
margin-bottom: 15px
}
.contact-infobox .sec-title{
margin-bottom: 15px
}
.about-contact-grid.inner-style{
border: 0;
padding: 0 0 30px 0;
border-bottom: 1px solid var(--th-border-color);
border-radius: 0
}
.about-contact-grid.inner-style .about-contact-details-text{
font-weight: 500;
font-size: 24px;
color: var(--title-color)
}
@media(max-width: 575px){.about-contact-grid.inner-style .about-contact-details-text{
font-size:20px;
line-height: 1.5
}}
.about-contact-grid:hover .about-contact-icon{
color: var(--white-color);
background: var(--theme-color)
}
.about-contact-grid:last-child{
border: 0;
padding-bottom: 0;
margin-bottom: 0
}
.about-contact-grid .about-contact-icon{
font-size: 26px;
color: var(--title-color);
background: var(--white-color)
}
.contact-formbox .contact-form{
padding: 60px
}
@media(max-width: 767px){.contact-formbox .contact-form{
padding:40px
}}
@media(max-width: 575px){.contact-formbox .contact-form{
padding:20px
}}
.contact-formbox .contact-form .th-btn{
padding: 14px 26px
}
.contact-formbox form{
border: 1px solid var(--th-border-color)
}
.contact-formbox .form-group .form-select{
padding: 5px 25px 5px 25px;
background: var(--smoke-color)
}
.contact-formbox .form-group>img{
-webkit-filter: contrast(0);
filter: contrast(0)
}
.contact-formbox .form-control{
border: 0;
background-color: var(--smoke-color)
}
.contact-formbox textarea.form-control{
min-height: 229px
}
.contact-map.style2 iframe{
height: 600px;
border-radius: 30px
}
.global-img{
position: relative;
overflow: hidden;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out
}
.global-img:after{
background: hsla(0,0%,100%,.5);
content: "";
height: 0;
left: 0;
opacity: 1;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 9
}
.global-img img{
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: 1.3s all ease;
transition: 1.3s all ease
}
@media(max-width: 991px){.global-img{
min-width:100%;
margin-bottom: 30px
}}
.global-img:hover:after{
height: 100%;
opacity: 0;
-webkit-transition: all .4s linear;
transition: all .4s linear
}
.global-img:hover img{
-webkit-transform: scale(1.3);
transform: scale(1.3)
}
.img-box2{
position: relative;
left: -40px
}
@media(max-width: 1199px){.img-box2{
left:0;
margin-bottom: 80px
}}
@media(max-width: 767px){.img-box2{
margin-bottom:40px
}}
@media(max-width: 575px){.img-box2 img{
width:100%
}}
.img-box2 .img1 img{
border-radius: 24px
}
.img-box2 .img2{
position: absolute;
bottom: -11.4%;
right: 4.5%
}
@media(max-width: 767px){.img-box2 .img2{
position:relative;
right: unset;
bottom: 0;
margin-top: 30px
}}
@media(max-width: 575px){.img-box2 .img2{
position:relative;
margin-top: 20px
}}
.img-box2 .img2 img{
width: 100%;
border-radius: 24px
}
.img-box2 .img2 .play-btn{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.img-box2 .img2 .play-btn i{
background-color: var(--theme-color);
color: var(--white-color)
}
.about4-titlebox .sec-title{
line-height: 1.2
}
.title-area .sec-title{
line-height: 1.1
}
.choose-wrapp{
display: grid;
grid-template-columns: auto auto;
gap: 24px
}
.choose-wrapp .img1{
overflow: hidden;
border-radius: 24px
}
@media(max-width: 991px){.choose-wrapp .img1{
margin-bottom:0
}}
.choose-wrapp .img1 img{
width: 100%;
border-radius: 24px
}
.about-circle{
position: absolute;
left: 0;
z-index: 2;
right: 0;
text-align: center;
margin: auto;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
.about-circle>.icon{
cursor: none
}
.testiSlider1{
overflow: hidden
}
@media(max-width: 991px){.testiSlider1{
margin-top:0 !important
}}
@media(max-width: 767px){.testiSlider1{
margin:0 !important
}}
.testiSlider1 .swiper-slide{
margin-top: 98px !important;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out
}
@media(max-width: 991px){.testiSlider1 .swiper-slide{
margin-top:58px !important
}}
.testiSlider1 .swiper-slide.swiper-slide-active{
margin-top: 0 !important;
margin-bottom: 80px !important
}
@media(max-width: 991px){.testiSlider1 .swiper-slide.swiper-slide-active{
margin-bottom:40px !important
}}
@media(max-width: 767px){.testiSlider1 .swiper-slide.swiper-slide-active{
width:100% !important
}}
.testiSlider1 .swiper-slide.swiper-slide-active .testi-card-quote{
background-color: var(--theme-color)
}
.testiSlider1 .swiper-slide.swiper-slide-active .testi-card-quote img{
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1)
}
.testiSlider1 .swiper-slide.swiper-slide-active .testi-card-quote svg{
fill:#333;
}
.testiSlider1 .swiper-wrapper{
visibility: visible
}
.testiSlider1 .swiper-pagination-bullets{
margin: 45px 0 14px 0
}
.testiSlider6{
overflow: visible;
margin: 0 -30px !important
}
@media(max-width: 991px){.testiSlider6{
margin-top:0 !important
}}
@media(max-width: 767px){.testiSlider6{
margin:0 !important
}}
.testiSlider6 .swiper-slide{
margin-top: 40px !important;
-webkit-transition: all .5s ease-out;
transition: all .5s ease-out
}
@media(max-width: 991px){.testiSlider6 .swiper-slide{
margin-top:58px !important
}}
.testiSlider6 .swiper-slide.swiper-slide-active{
margin-top: 0 !important;
margin-bottom: 30px !important;
width: 672px !important
}
@media(max-width: 991px){.testiSlider6 .swiper-slide.swiper-slide-active{
width:65% !important;
margin-bottom: 0px !important
}}
@media(max-width: 767px){.testiSlider6 .swiper-slide.swiper-slide-active{
width:100% !important
}}
.testiSlider6 .swiper-slide.swiper-slide-active .testi-card-quote{
background-color: var(--theme-color)
}
.testiSlider6 .swiper-slide.swiper-slide-active .testi-card-quote img{
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1)
}
.testiSlider6 .swiper-wrapper{
visibility: visible
}
.testi-card{
position: relative;
padding: 40px 40px 64px;
background: #f2f5fa;
border-radius: 24px;
margin: 10px
}
.testi-card.style2 .testi-card_profile{
width: 316px;
height: 153px;
background-color: var(--theme-color);
margin: -40px 0 -50px -60px;
padding: 10px 25px 50px 25px
}
@media(max-width: 480px){.testi-card.style2 .testi-card_profile{
margin:-24px 0 -50px -60px
}}
.testi-card.style2 .testi-card_desig{
color: var(--white-color)
}
.testi-card.style2 .box-title{
color: var(--white-color)
}
@media(max-width: 991px){.testi-card{
padding:30px 30px 64px
}}
@media(max-width: 575px){.testi-card{
padding:25px 25px 64px
}}
.testi-card_wrapper{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 20px
}
@media(max-width: 480px){.testi-card_wrapper{
display:block
}}
.testi-card_wrapper:nth-child(even) .testi-card{
margin-top: 0px
}
.testi-card_profile{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 16px
}
.testi-card_avater{
min-width: 72px
}
@media(max-width: 575px){.testi-card_avater{
min-width:40px
}}
.testi-card_avater img{
width: 100%;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover
}
.testi-card .box-title{
margin-bottom: 0
}
@media(max-width: 575px){.testi-card .box-title{
font-size:20px
}}
.testi-card_review i{
color: #ffa944;
font-size: 14px;
margin-right: 3px
}
@media(max-width: 991px){.testi-card_review i{
font-size:12px
}}
.testi-card_text{
color: var(--black-color2);
font-size: 20px;
font-weight: 500;
margin-bottom: -0.3rem
}
@media(max-width: 575px){.testi-card_text{
font-size:18px
}}
.testi-card-quote{
width: 78px;
height: 78px;
line-height: 70px;
text-align: center;
background-color: var(--white-color);
border: 4px solid var(--white-color);
border-radius: 50%;
position: absolute;
left: 48%;
bottom: -30px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.pricing-tabs{
margin-top: 30px;
margin-bottom: 60px
}
@media(max-width: 575px){.pricing-tabs{
margin-bottom:0px
}}
.blog-box{
position: relative
}
.blog-box .blog-img{
margin-bottom: 35px;
border-radius: 16px
}
.blog-box .blog-img img{
border-radius: 16px
}
.blog-box .blog-img{
position: relative;
overflow: hidden;
-webkit-transition: all .4s ease;
transition: all .4s ease
}
.blog-box .blog-img img{
width: 100%;
-webkit-transition: all .4s ease;
transition: all .4s ease
}
.blog-box .box-title{
line-height: 34px;
margin-bottom: 30px
}
.blog-box .blog-meta{
margin: -0.3rem 0 18px 0
}
@media(max-width: 375px){.blog-box .blog-meta span,.blog-box .blog-meta a{
font-size:14px
}}
.blog-box .th-btn{
padding: 10px 25px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.blog-box .th-btn:after{
width: 16px;
height: 16px;
-webkit-mask-image: url(../img/icon/arrow-right2.svg);
mask-image: url(../img/icon/arrow-right2.svg)
}
.blog-box:hover .blog-img img{
-webkit-transform: scale(1.08);
transform: scale(1.08)
}
.blog-area{
padding-bottom: 60px
}
.brand-area .th-container{
--main-container: 1830px
}
.brand-box{
width: 100%;
height:100px;
overflow: hidden;
margin: auto;
position: relative;
display: block;
-webkit-filter: grayscale(0);
filter: grayscale(0);
-webkit-transition: .4s;
transition: .4s
}
.brand-box:hover{
-webkit-filter: grayscale(9);
filter: grayscale(9)
}
.brand-box:hover a img.gray{
opacity: 1;
visibility: visible;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
-webkit-transform: translateY(0%);
transform: translateY(0%)
}
.brand-box:hover a img.original{
opacity: 0;
visibility: hidden;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
-webkit-transform: translateY(100%);
transform: translateY(100%)
}
.brand-box img{
margin: 0 auto;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
position: absolute;
top: 0;
left: 0;
right: 0
}
.brand-box img.gray{
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
opacity: 0;
visibility: hidden;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
.brand-box img.original{
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
-webkit-transform: translateY(0%);
transform: translateY(0%)
}
.brand-box.style2{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 5px solid hsla(0,0%,100%,.1);
height: 200px;
border-radius: 50%;
border-right: 1px solid hsla(0,0%,100%,.1);
position: relative;
overflow: hidden;
cursor: pointer
}
@media(max-width: 1399px){.brand-box.style2{
height:300px
}}
@media(max-width: 1299px){.brand-box.style2{
height:300px
}}
@media(max-width: 1199px){.brand-box.style2{
height:280px
}}
@media(max-width: 991px){.brand-box.style2{
height:210px
}}
@media(max-width: 767px){.brand-box.style2{
height:240px
}}
@media(max-width: 575px){.brand-box.style2{
width:200px;
height: 200px
}}
.brand-box.style2 a{
display: block;
position: relative
}
.brand-box.style2 a .original{
position: relative
}
.btn-wrap{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px 30px
}
@media(max-width: 1199px){p.mb-40{
margin-bottom:35px
}}
@-webkit-keyframes loaded{
from {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0
}
to {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1
}
}
@keyframes loaded{
from {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0
}
to {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1
}
}
@-webkit-keyframes overlay{
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
55% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
}
@keyframes overlay{
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
55% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
}
.call-btn{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px
}
.call-btn .btn-title{
font-size: 16px;
color: var(--white-color);
font-weight: 500
}
.call-btn.style2{
gap: 14px
}
.call-btn.style2 .btn-title{
font-size: 18px;
font-weight: 600;
margin-bottom: 2px
}
.loadcontent{
display: none
}
.categorySlider .swiper-pagination-bullets{
max-width: 15%;
display: block;
margin: auto;
overflow: hidden;
position: relative;
bottom: 20px;
margin-bottom: 10px
}
@media(max-width: 1199px){.categorySlider .swiper-pagination-bullets{
bottom:30px
}}
.category-area .th-container{
--main-container: 1750px
}
.category-area .swiper .swiper-slide{
width: 312px
}
.category-card{
position: relative;
text-align: center;
margin-bottom: 50px
}
.category-card.style2 .box-img{
border-radius: 50%;
border: 10px solid var(--smoke-color);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.category-card.style2 .box-img img{
border-radius: 50%
}
.category-card.style2:hover .box-img{
border-color: var(--theme-color)
}
.category-card .box-img{
border-radius: 24px;
margin-bottom: 22px
}
.category-card .box-img img{
border-radius: 24px;
-webkit-transition: 1.3s all ease;
transition: 1.3s all ease
}
.category-card .sec-text{
font-family: var(--style-font)
}
.category-card.single .box-title{
margin-bottom: 5px
}
.category-card.single .sec-text{
padding: 0 10px
}
.category-card:hover .box-img img{
-webkit-transform: scale(1.3);
transform: scale(1.3)
}
.category-card{
position: relative;
text-align: center;
margin-bottom: 50px
}
.category-card.style3 .box-img{
border-radius: 24px;
border: 10px solid var(--smoke-color);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.category-card.style3 .box-img img{
border-radius: 24px
}
.category-card.style3:hover .box-img{
border-color: var(--theme-color)
}
.category-card.style4{
height: 476px
}
@media(max-width: 375px){.category-card.style4{
height:100%
}}
.category-card.style4 .box-img{
height: 416px;
-webkit-transition: all .6s ease;
transition: all .6s ease;
margin-bottom: 30px
}
@media(max-width: 375px){.category-card.style4 .box-img{
height:100%
}}
.category-card.style4 .box-img img{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.category-card.style4 .box-title{
margin-bottom: 7px
}
.category-card.style4:hover .box-img{
height: 312px
}
.category-card .box-img{
border-radius: 24px;
margin-bottom: 22px
}
.category-card .box-img img{
border-radius: 24px;
-webkit-transition: 1.3s all ease;
transition: 1.3s all ease
}
.category-card .box-title{
margin-bottom: 0
}
.category-card:hover .box-img img{
-webkit-transform: scale(1.3);
transform: scale(1.3)
}
.accordion-card{
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
border-radius: 4px;
border: 1px solid var(--title-color);
overflow: hidden;
background-color: rgba(0,0,0,0);
text-align: left;
position: relative;
z-index: 3
}
.accordion-card:not(:last-child){
margin-bottom: 24px
}
.accordion-card .accordion-button{
font-size: 24px;
font-weight: 600;
font-family: var(--title-font);
border: 0;
color: var(--title-color);
background-color: rgba(0,0,0,0);
border-radius: 0;
padding: 12px 45px 12px 30px;
min-height: 75px;
gap: 10px;
margin-bottom: 0;
text-align: left;
-webkit-transition: .3s;
transition: .3s;
position: relative
}
.accordion-card .accordion-button:after{
content: "";
height: 100%;
width: auto;
line-height: 1;
background-color: rgba(0,0,0,0);
background-image: none;
font-family: var(--icon-font);
color: var(--white-color);
font-weight: 500;
font-size: 18px;
display: grid;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
position: absolute;
top: 0;
right: 30px;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out
}
.accordion-card .accordion-button:focus{
outline: none;
-webkit-box-shadow: none;
box-shadow: none
}
.accordion-card .accordion-button:not(.collapsed){
-webkit-box-shadow: none;
box-shadow: none
}
.accordion-card .accordion-button:not(.collapsed):after{
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
color: var(--brand-color)
}
.accordion-card .accordion-collapse{
border: none
}
.accordion-card .accordion-body{
border-radius: 0;
border: none;
padding: 0px 30px 30px
}
.accordion-card .faq-text{
color: var(--th-border-color);
margin-bottom: -0.48em;
margin-top: -0.48em
}
.accordion-card.style3{
border-radius: 20px;
border: 0
}
.accordion-card.style3 .accordion-button{
font-size: 18px;
font-weight: 500;
border-radius: 20px
}
.accordion-card.style3 .accordion-button:after{
content: "+"
}
.accordion-card.style3 .accordion-button:not(.collapsed):after{
content: ""
}
@media(max-width: 991px){.accordion-card .accordion-button{
font-size:20px;
min-height: 70px
}}
@media(max-width: 575px){.accordion-card .accordion-button{
padding:12px 45px 12px 20px
}
.accordion-card .accordion-body{
padding: 0px 20px 30px
}}
@media(max-width: 575px){.accordion-card .accordion-button{
font-size:16px
}}
.faq-area{
position: relative;
overflow: hidden
}
.accordion-item-wrapp{
padding: 0
}
.accordion-item-wrapp li{
list-style: none
}
.according-img-tab{
position: absolute;
right: 40px;
top: 20px;
-webkit-transition: all .6s ease-in-out;
transition: all .6s ease-in-out
}
@media(max-width: 1399px){.according-img-tab{
right:20px
}}
@media(max-width: 1299px){.according-img-tab{
top:0;
max-width: 250px
}}
@media(max-width: 1199px){.according-img-tab{
max-width:100%
}}
@media(max-width: 991px){.according-img-tab{
right:0
}}
@media(max-width: 767px){.according-img-tab{
position:relative;
margin-top: 50px
}}
.according-img-tab img{
border-radius: 16px;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
-webkit-transition: all 1.3s ease;
transition: all 1.3s ease
}
.loadcontent{
display: none
}
.faq-img4{
margin-bottom: -30px
}
@media(max-width: 1199px){.faq-img4{
display:none
}}
.accordion-card.style4{
border: 0;
background: var(--smoke-color);
border-radius: 20px
}
.accordion-card.style4 .faq-text{
color: var(--body-color)
}
.accordion-card.style4 .accordion-button{
font-weight: 600;
font-size: 18px;
min-height: 73px
}
.accordion-card.style4 .accordion-button:after{
color: var(--theme-color);
content: "+"
}
.accordion-card.style4 .accordion-button:not(.collapsed):after{
content: ""
}
.ui-slider .ui-slider-handle{
width: 16px;
height: 16px;
border-radius: 50%;
background: none;
border: none;
background-color: #fff;
top: -7px;
margin-left: 0;
border: 3px solid var(--primary-color)
}
.ui-slider{
height: 6px;
border-radius: 16px;
background-color: #e1e4e5;
margin: 12px 8px
}
.ui-slider .ui-slider-range{
height: 6px;
border-radius: 16px;
background: none;
border: none;
background-color: var(--primary-color)
}
.ui-slider .ui-slider-handle{
top: -5px;
margin-left: -6px;
border: 3px solid var(--primary-color)
}
.service-img{
border-radius: 8px
}
.service-img img{
border-radius: 8px
}
.service-style-1 .service-img{
overflow: hidden;
border-radius: 16px 16px 0 0
}
.service-style-1 .service-img a{
display: block
}
.service-style-1 .service-img a img{
width: 100%;
-webkit-transition: 1.4s;
transition: 1.4s;
border-radius: 16px 16px 0 0
}
.service-style-1 .service-content{
border-top: 0;
padding: 30px 27px;
border-radius: 0 0 16px 16px;
background-color: var(--white-color);
border: 1px solid var(--th-border-color);
-webkit-transition: .4s;
transition: .4s
}
.service-style-1 .service-content .th-btn{
font-size: 14px;
padding: 10px 24.5px
}
.service-style-1 .th-btn{
border: 1px solid var(--th-border-color)
}
.service-style-1 .th-btn i{
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: .4s;
transition: .4s
}
.service-style-1 .th-btn:hover i{
-webkit-transform: rotate(0);
transform: rotate(0)
}
.service-style-1:hover .service-img a img{
-webkit-transform: scale(1.2);
transform: scale(1.2)
}
.service-style-1:hover .service-content{
-webkit-box-shadow: 0 20px 20px 0 hsla(0,0%,80%,.25);
box-shadow: 0 20px 20px 0 hsla(0,0%,80%,.25)
}
.service-list-wrap{
-webkit-box-flex: 100%;
-ms-flex: 100%;
flex: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s linear;
transition: all .3s linear
}
.service-list-wrap.style2.active{
-webkit-box-flex: 205%;
-ms-flex: 205%;
flex: 205%
}
.service-list-wrap.style3 .service-content{
opacity: 0;
-webkit-transform: none;
transform: none;
bottom: -30px;
left: 40px
}
@media(max-width: 1199px){.service-list-wrap.style3 .service-content{
left:20px;
bottom: -20px
}}
.service-list-wrap.style3 .icon-btn{
background-color: rgba(0,0,0,0);
border: none;
font-size: 18px;
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid var(--white-color);
border-radius: 50%;
color: var(--white-color);
position: absolute;
right: 24px;
top: 24px;
z-index: 2;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.service-list-wrap.style3 .icon-btn:hover{
background-color: var(--theme-color);
border-color: var(--theme-color)
}
.service-list-wrap.style3.active .service-content{
opacity: 1
}
.service-list-wrap.style3.active .icon-btn{
opacity: 1;
visibility: visible
}
.service-list-wrap.active{
-webkit-box-flex: 324%;
-ms-flex: 324%;
flex: 324%
}
@media(max-width: 1199px){.service-list-wrap.active{
max-width:100%
}}
.service-list-wrap.active .th-btn{
opacity: 1;
visibility: visible
}
.service-list-wrap.active .service-content{
left: 40px;
bottom: 40px;
-webkit-transform: none;
transform: none
}
@media(max-width: 1199px){.service-list-wrap.active .service-content{
left:20px;
bottom: 20px
}}
.process-box-img{
border-radius: 30px;
overflow: hidden;
position: absolute;
inset: 0;
-webkit-transition: .4s;
transition: .4s;
-webkit-transform: rotate(-40deg) translate(-65px, -110px);
transform: rotate(-40deg) translate(-65px, -110px);
z-index: -2
}
@media(max-width: 575px){.process-box-img{
border-radius:16px
}}
.process-box-img img{
width: 100%
}
.process-box-img:nth-child(2){
-webkit-transform: rotate(-30deg) translate(-35px, -50px);
transform: rotate(-30deg) translate(-35px, -50px);
z-index: -1
}
.process-box-img.active-img{
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
position: relative;
z-index: 1
}
.process-box-img.active-img~.process-box-img{
-webkit-transform: rotate(-30deg) translate(-35px, -50px);
transform: rotate(-30deg) translate(-35px, -50px)
}
.process-box-img.active-img~.process-box-img~.process-box-img{
-webkit-transform: rotate(-40deg) translate(-65px, -110px);
transform: rotate(-40deg) translate(-65px, -110px)
}
.feature-list-wrap{
background: #f2f5fa
}
.feature-item{
position: relative;
border-radius: 0;
padding: 35px 140px;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
@media(max-width: 1900px){.feature-item{
padding:40px 100px
}}
@media(max-width: 1600px){.feature-item{
padding:40px 80px
}}
@media(max-width: 1500px){.feature-item{
padding:40px
}}
@media(max-width: 575px){.feature-item{
padding:20px
}}
.feature-item_icon{
width: 64px;
height: 64px;
line-height: 64px;
text-align: center;
display: block;
margin: auto;
background: var(--white-color);
border-radius: 20px;
margin-top: 0;
margin-bottom: 0;
margin-right: 20px
}
.feature-item_text{
font-family: var(--style-font);
font-weight: 400;
line-height: 26px;
margin-bottom: -0.4rem;
-webkit-transition: .4s;
transition: .4s
}
.feature-item .box-title{
font-size: 24px;
margin-bottom: 7px;
-webkit-transition: .4s;
transition: .4s
}
@media(max-width: 1299px){.feature-item .box-title{
font-size:20px
}}
.feature-item img{
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.feature-item:hover{
background-color: var(--theme-color)
}
.feature-item:hover .feature-item_icon{
background-color: var(--white-color)
}
.feature-item:hover .feature-item_icon img{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
.feature-item:hover .feature-item_text{
color: var(--white-color)
}
.feature-item:hover .box-title{
color: var(--white-color)
}
.feature-circle{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
max-width: 289px
}
@media(max-width: 767px){.feature-circle:not(:last-child){
margin-bottom:30px
}}
.feature-circle .box-title{
line-height: 34px;
margin-bottom: 0px
}
.feature-circle .progressbar{
position: relative;
max-height: 100px
}
.feature-circle .circle-num{
font-size: 30px;
font-weight: 600;
color: var(--title-color);
font-family: var(--title-font);
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
line-height: 100px;
margin: 5px;
text-align: center
}
@media(max-width: 767px){.about-circle:not(:last-child){
margin-bottom:30px
}}
.about-circle .box-title{
color: var(--white-color);
font-weight: 500;
text-align: center;
font-size: 18px;
line-height: 28px;
margin-bottom: 0px
}
.about-circle .progressbar{
position: relative;
max-height: 160px;
margin-bottom: 24px
}
@media(max-width: 767px){.about-circle .progressbar{
text-align:center
}}
.about-circle .circle-num{
font-size: 40px;
font-weight: 600;
color: var(--white-color);
font-family: var(--title-font);
position: absolute;
top: 0;
left: 0;
width: 160px;
height: 160px;
line-height: 160px;
margin: 5px;
text-align: center
}
@media(max-width: 767px){.about-circle .circle-num{
right:0;
left: 0;
margin: auto
}}
.featured-wrapp-3{
position: relative;
padding: 40px;
border-radius: 100px;
background: var(--white-color);
border-bottom: 2px solid var(--theme-color);
margin-top: -60px;
z-index: 2
}
@media(max-width: 991px){.featured-wrapp-3{
margin-top:-130px
}}
.featured-wrapp-3 .feature-item{
padding: 0
}
.featured-wrapp-3 .feature-item:hover{
background: none
}
.featured-wrapp-3 .feature-item:hover .box-title{
color: var(--title-color)
}
.featured-wrapp-3 .feature-item:hover .feature-item_text{
color: var(--body-color)
}
.featured-wrapp-3 .feature-item_icon{
width: auto;
height: auto;
line-height: 1;
text-align: start;
display: inline-block
}
@media(max-width: 575px){.featured-wrapp-3 .feature-item_icon{
margin-bottom:20px
}}
.gallery-area .row{
--bs-gutter-x: 17px
}
.gallery-card:nth-child(2){
margin-top: 17px
}
.gallery-card .box-img{
border-radius: 24px
}
@media(max-width: 991px){.gallery-card .box-img{
margin-bottom:10px
}}
.gallery-card .box-img img{
border-radius: 24px
}
.gallery-card .box-img .icon-btn{
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
z-index: 3;
-webkit-transform: scale(0);
transform: scale(0);
border: none;
font-size: 40px;
font-weight: 300;
color: var(--white-color)
}
.gallery-card .box-img .icon-btn:hover{
background-color: rgba(0,0,0,0)
}
.gallery-card:hover .icon-btn{
-webkit-transform: scale(1);
transform: scale(1)
}
.swiper-slide .gallery-card.style2{
-webkit-transform: scale(0.95) translateX(0%);
transform: scale(0.95) translateX(0%)
}
@media(max-width: 767px){.swiper-slide .gallery-card.style2{
-webkit-transform:none;
transform: none
}}
.swiper-slide-active .gallery-card.style2{
-webkit-transform: scale(1) translateX(0);
transform: scale(1) translateX(0)
}
@media(max-width: 767px){.swiper-slide-active .gallery-card.style2{
-webkit-transform:none;
transform: none
}}
.gallery-card.style2 .box-img{
position: relative;
z-index: 2
}
.gallery-card.style2 .box-img:before{
content: "";
position: absolute;
inset: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.3)));
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
border-radius: inherit;
z-index: 1;
opacity: 0;
visibility: hidden
}
.gallery-card.style2:hover .box-img:before{
opacity: 1;
visibility: visible
}
.app-mockup{
position: relative;
margin-bottom: -170px;
z-index: 2
}
@media(max-width: 991px){.app-mockup{
margin-bottom:-40px
}}
.app-mockup:before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 315.67px;
height: 7.89px;
background: rgba(0,0,0,.8);
-webkit-filter: blur(13.15px);
filter: blur(13.15px)
}
.cta-wrap3{
max-width: 1760px;
margin-left: auto;
margin-right: auto;
padding-bottom: 30px;
padding-top: 30px;
}
.cta-img3-1{
margin-left: -107px
}
@media(max-width: 1500px){.cta-img3-1{
margin-left:0
}}
.cta-img3-2{
margin-right: -107px
}
@media(max-width: 1500px){.cta-img3-2{
margin-right:0
}}
.cta-4_title-box .sec-title{
text-transform: uppercase;
line-height: 1.3
}
.cta-4_title-box .duration-title{
font-weight: 700;
font-size: 24px;
margin-bottom: 25px
}
.cta-4-action .th-btn{
padding: 19px 34.5px;
border-radius: 50px
}
.cta-4-action .th-btn.style6:hover{
color: var(--white-color);
border-color: var(--title-color)
}
.cta-4-action .th-btn.style6:hover::before{
background-color: var(--title-color)
}
.mfp-wrap{
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out
}
.mfp-wrap.mfp-ready{
-webkit-transform: translateY(0);
transform: translateY(0)
}
.color-scheme-wrap{
position: fixed;
right: 0;
top: 50%;
z-index: 99;
background: var(--white-color);
padding: 20px 30px;
border-radius: 10px 0 0 10px;
display: inline-block;
text-align: center;
-webkit-transition: .4s;
transition: .4s;
-webkit-box-shadow: 0px 0px 4px 0px rgba(51,51,51,.2);
box-shadow: 0px 0px 4px 0px rgba(51,51,51,.2)
}
.color-scheme-wrap .switchIcon{
position: absolute;
left: 0;
top: 10px;
border: 0;
background: var(--theme-color);
color: var(--white-color);
height: 45px;
width: 45px;
border-radius: 5px 0 0 5px;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0)
}
.color-scheme-wrap .color-switch-btns{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
margin-bottom: 25px
}
.color-scheme-wrap .color-switch-btns button{
padding: 0;
border: 0;
background: rgba(0,0,0,0);
font-size: 34px;
color: var(--theme-color);
text-align: left
}
.color-scheme-wrap.active{
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0)
}
.mt-30{
margin-top: 30px
}
.mt-40{
margin-top: 40px
}
.mt-45{
margin-top: 45px
}
.mb-10{
margin-bottom: 10px
}
.mb-15{
margin-bottom: 15px
}
.mb-20{
margin-bottom: 20px
}
.mb-25{
margin-bottom: 25px
}
.mb-30{
margin-bottom: 30px
}
.mb-40{
margin-bottom: 40px
}
.mb-60{
margin-bottom: 60px
}
.mt-60{
margin-top: 60px
}
.space,.space-top{
padding-top: var(--section-space)
}
.space,.space-bottom{
padding-bottom: var(--section-space)
}
.space-extra-top{
padding-top: calc(var(--section-space) - 30px)
}
.space-extra-bottom{
padding-bottom: calc(var(--section-space) - 30px)
}
.space-extra2-bottom{
padding-bottom: calc(var(--section-space) - 40px)
}
@media(max-width: 991px){.space,.space-top{
padding-top:var(--section-space-mobile)
}
.space,.space-bottom{
padding-bottom: var(--section-space-mobile)
}
.space-extra-top{
padding-top: calc(var(--section-space-mobile) - 30px)
}
.space-extra-bottom{
padding-bottom: calc(var(--section-space-mobile) - 30px)
}
.space-extra2-bottom{
padding-bottom: 70px
}}