:root{
     --primary-color: #444444;
     --secondary-color: #000000;
     --border-color-01: #44444448;
     --white-color: #fff;
     --bg-light: #f5f5f5;
     --background-color: #aaaaaa;
     --body-color: #666666;
         --primary-font: "Sora", sans-serif;
    --secondary-font: "Inter", sans-serif;
}
/*----------------------- Start Comman CSS --------------------------*/
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     background: var(--white-color);
     font-size: 16px;
     line-height: 160%;
     margin: 0;
     float: left;
     width: 100%;
     color: var(--body-color);
     font-family: var(--secondary-font);
}
 h1,h2,h3,h4,h5,h6{
     line-height: 130%;
     font-weight: 400;
     font-family: var(--primary-font);
     color: var(--secondary-color);
     text-transform: uppercase;
     margin: 0;
     padding: 0;
     transition: all 400ms ease-in-out 0s;
     -webkit-transition: all 400ms ease-in-out 0s;
     -moz-transition: all 400ms ease-in-out 0s;
     -o-transition: all 400ms ease-in-out 0s;
     -ms-transition: all 400ms ease-in-out 0s;
}
 p{
     margin: 0;
     padding: 0;
}
h1{
    font-size: 60px;
    color: var(--bg-light);
}
 h2{
     font-family: var(--primary-font);
     font-size: 60px;
     line-height: 100%;
}
p span,
h2 span{
    color: var(--secondary-color);
}
 h4{
     font-size: 18px;
}
 html {
     scroll-behavior: smooth;
}
.mobile-view,
.theme-tutorial{
    padding-bottom: 100px;
}
.cms, .slide-box,
.features,
.home-pages,
.plugins, .other-pages,
.cms, .accordion-tabs, .elementer-setting{
     padding: 100px 0;
}
 a{
     float: left;
     text-decoration: none;
     color: var(--secondary-color);
     font-weight:500;
}
 section{
     float: left;
     width: 100%;
}
 .box-shadow{
     box-shadow: 0 0 4px 2px rgba(0,0,0,0.1);
}
 .page{
     float: left;
     width: 100%;
}
 @media (max-width:1600px) {
    .cms, .slide-box,
    .home-pages,
    .plugins,
    .features, .other-pages,
    .cms, .accordion-tabs, .elementer-setting{
         padding: 80px 0;
    }
.mobile-view,
.theme-tutorial{
    padding-bottom: 80px;
}
    h1{
        font-size: 54px;
    }
    h2{
         font-size: 50px;
    }
}
 @media (max-width:1400px) {
    .cms, .slide-box,
    .home-pages,
    .plugins,
    .features, .other-pages,
    .cms, .accordion-tabs, .elementer-setting{
         padding: 70px 0;
    }
.mobile-view,
.theme-tutorial{
    padding-bottom: 70px;
}
     h1{
        font-size: 48px;
    }
     h2{
         font-size: 40px;
    }
}
 @media (max-width:1199px) {
    .cms, .slide-box,
    .home-pages,
    .plugins,
    .features, .other-pages,
    .cms, .accordion-tabs, .elementer-setting{
         padding: 60px 0;
    }
.mobile-view,
.theme-tutorial{
    padding-bottom: 60px;
}
     h1{
        font-size: 42px;
    }
     h2{
         font-size: 34px;
    }
}
 @media (max-width:991px) {
    .cms, .slide-box,
    .home-pages,
    .plugins,
    .features, .other-pages,
    .cms, .accordion-tabs, .elementer-setting{
         padding: 50px 0;
    }
.mobile-view,
.theme-tutorial{
    padding-bottom: 50px;
}
     h1{
        font-size: 36px;
    }
     h2{
         font-size: 30px;
    }
     h4{
         font-size: 16px;
    }
         body {
         font-size: 15px;
    }
}
 @media (max-width:767px) {
    .cms, .slide-box,
    .home-pages,
    .plugins,
    .features, .other-pages,
    .cms, .accordion-tabs, .elementer-setting{
         padding: 40px 0;
    }
.mobile-view,
.theme-tutorial{
    padding-bottom: 40px;
}
     h1{
        font-size: 30px;
    }
     h2{
         font-size: 26px;
    }
         body {
         font-size: 14px;
    }
      h4{
         font-size: 15px;
    }
}
 @media (max-width:575px) {
    .cms, .slide-box,
    .home-pages,
    .plugins,
    .features, .other-pages,
    .cms, .accordion-tabs, .elementer-setting{
         padding: 35px 0;
    }
.mobile-view,
.theme-tutorial{
    padding-bottom: 35px;
}
     h1{
        font-size: 24px;
    }
     h2{
         font-size: 24px;
    }
     h4{
         font-size: 14px;
    }
}
 @media (max-width:481px) {
    .cms, .slide-box,
    .home-pages,
    .plugins,
    .features, .other-pages,
    .cms, .accordion-tabs, .elementer-setting{
         padding: 30px 0;
    }
.mobile-view,
.theme-tutorial{
    padding-bottom: 30px;
}
    h1{
        font-size: 20px;
    }
     h2{
         font-size: 22px;
    }
        body {
         font-size: 13px;
    }
}
/*----------------------- End Comman CSS --------------------------*/
/*----------------------- Start Contrainer --------------------------*/
 .container{
     max-width: 1590px;
     padding: 0;
}
 @media (max-width:1620px) {
     .container {
         max-width: 1370px;
    }
}
 @media (max-width:1400px) {
     .container {
         max-width: 1170px;
    }
}
 @media (max-width:1199px) {
     .container {
         max-width: 960px;
    }
}
 @media (max-width:991px) {
     .container {
         max-width: 740px;
    }
}
 @media (max-width:767px) {
     .container {
         max-width: 540px;
    }
}
 @media (max-width:575px) {
     .container {
         padding: 0 15px;
         max-width: 100%;
    }
}
/*----------------------- End Contrainer --------------------------*/
/*----------------------- Start Button --------------------------*/
 .btn-check:active+.btn:focus, .btn-check:checked+.btn:focus, .btn.active:focus, .btn.show:focus, .btn:active:focus, .btn:active, .btn:focus, .btn:hover{
     box-shadow: none;
}
 .btn{
     padding: 10px 25px;
     position: relative;
     transition: all 400ms ease-in-out 0s;
     -webkit-transition: all 400ms ease-in-out 0s;
     -moz-transition: all 400ms ease-in-out 0s;
     -o-transition: all 400ms ease-in-out 0s;
     -ms-transition: all 400ms ease-in-out 0s;
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
     overflow: hidden;
     z-index: 1;
     border: none;
     border-radius: 0;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -ms-border-radius: 0;
     -o-border-radius: 0;
}
 .btn::after{
     content: "";
     height: 100%;
     width: 0;
     position: absolute;
     transition: all 400ms ease-in-out 0s;
     -webkit-transition: all 400ms ease-in-out 0s;
     -moz-transition: all 400ms ease-in-out 0s;
     -o-transition: all 400ms ease-in-out 0s;
     -ms-transition: all 400ms ease-in-out 0s;
     top: 0;
     left: auto;
     right: 0;
     z-index: -1;
}
 img{
     width: 100%;
}
 .btn:focus::after, .btn:active::after, .btn:hover::after {
     width: 100%;
     right: auto;
     left: 0;
}
 .btn-primary.btn{
     color: var(--secondary-color);
     background-color: var(--bg-light);
}
 .btn-secondary.btn{
     color: var(--white-color);
     background-color: var(--primary-color);
}
 .btn:focus, .btn:active, .btn:hover{
     color: var(--white-color);
}
 .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary:hover{
    color: var(--white-color);
 }
 .btn-primary.btn::after{
    background-color: var(--primary-color);
 }
  .btn-secondary.btn::after{
     background-color: var(--secondary-color);
}
 @media (max-width:991px) {
     .btn{
         padding: 7px 20px;
    }
}
 @media (max-width:575px) {
     .btn{
         font-size: 15px;
         padding: 6px 18px;
    }
}
 @media (max-width:481px) {
     .btn{
         font-size: 14px;
         padding: 5px 12px;
    }
}
/*----------------------- End Button --------------------------*/
/*----------------------- Start Page Box --------------------------*/
 .page-box-title{
     display: flex;
     flex-direction: column;
     gap: 3px;
}
 .page-box:last-child .page-box-title{
     margin-bottom: 0;
}
 .page-box-title a{
     width: fit-content;
}
 .page-box-title a:hover h4{
     color: var(--primary-color);
}
 .all-pages, .page-main{
     float: left;
     width: 100%;
}
 main{
    float: left;
    width: 100%;
     overflow: hidden;
     position: relative;
     z-index: 1;
     background-color: var(--white-color);
}
 .page-box{
     display: flex;
     flex-direction: column;
     gap: 10px;
}

 .page-box-img a{
    background-color: var(--body-color);
     box-shadow: 0 0 4px 2px rgba(0,0,0,0.1);
     position: relative;
     width: 100%;
}
.page-box-img{
    background-color: var(--bg-light);
    padding: 5px;
}
 .page-box-img a img{
     width: 100%;
}
 .page-box-img > a::after {
     background:rgba(0,0,0,0.4);
     content:"";
     position:absolute;
     left:0;
     right:0;
     top:0;
     bottom:0;
     margin:auto;
     opacity: 0;
     -moz-opacity: 0;
     -khtml-opacity: 0;
     -webkit-opacity: 0;
     visibility:hidden;
     transition: all 400ms ease-in-out 0s;
     -webkit-transition: all 400ms ease-in-out 0s;
     -moz-transition: all 400ms ease-in-out 0s;
     -o-transition: all 400ms ease-in-out 0s;
     -ms-transition: all 400ms ease-in-out 0s;
}
 .page-box-img:hover > a::after {
     opacity: 1;
     -moz-opacity: 1;
     -khtml-opacity: 1;
     -webkit-opacity: 1;
     visibility:visible;
}
 .section-title{
     float: left;
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 50px;
}
.section-title p{
    font-size: 30px;
    font-family: var(--primary-font);
    line-height: 130%;
}
.section-title a{
    width: auto;
}
 @media (max-width:1600px) {
     .section-title{
         margin-bottom: 46px;
    }
    .section-title p{
        font-size: 28px;
    }
}
 @media (max-width:1400px) {
     .section-title{
         margin-bottom: 42px;
    }
    .section-title p{
        font-size: 26px;
    }
}
 @media (max-width:1200px) {
     .section-title{
         margin-bottom: 38px;
    }
}
 @media (max-width:1199px) {
     .section-title{
         margin-bottom: 34px;
    }
    .section-title p{
        font-size: 24px;
    }
}
 @media (max-width:991px) {
     .section-title{
         gap: 8px;
         margin-bottom: 30px;
    }
        .section-title p{
        font-size: 22px;
    }
    .page-box-img{
        padding: 10px;
    }
}
 @media (max-width:767px) {
     .section-title{
         gap: 6px;
         margin-bottom: 26px;
    }
     .page-box-title{
       
        margin-bottom: 20px;
    }
    .section-title p{
        font-size: 20px;
    }
}
 @media (max-width:575px) {
     .section-title{
         gap: 4px;
         margin-bottom: 22px;
    }
     .page-box{
         gap: 8px;
    }
     .page-box-title{
         gap: 0;
         margin-bottom: 15px;
    }
    .section-title p{
        font-size: 18px;
    }
    .page-box-img{
        padding: 5px;
    }
}
 @media (max-width:480px) {
     .section-title{
         margin-bottom: 18px;
    }
    .section-title p{
        font-size: 16px;
    }
}
/*----------------------- End Page Box --------------------------*/
/*----------------------- Start Home Pages --------------------------*/
 .home-pages{
     float: left;
     width: 100%;
}
  .home-pages .all-pages{
    flex-direction: row;
  }
.home-pages .circle-img {
	 animation: circle 10s linear infinite;
}
 @keyframes circle {
	 0% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(360deg);
	}
}

/*----------------------- End Home Pages --------------------------*/
/*----------------------- Start Service & Plugins --------------------------*/
.service{
    padding: 100px 0 160px;
    background-color: var(--bg-light);
}
.service .marquee-wrapper{
    position: relative;
}
.service .marquee-wrapper::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    bottom: auto;
    height: 1px;
    width: 100%;
    background-color: var(--border-color-01);
}
.service-inner{
    position: relative;
}
.service .service-inner{
    padding-top: 50px;
}
.service .service-inner::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    height: 50px;
    margin: auto;
    width: 1px;
    background-color: var(--border-color-01);
}
.service .service-inner::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    margin: auto;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.plugins{
    position: relative;
    overflow: hidden;
    background: var(--bg-light);
} 
.plugins .service-box{
    padding: 30px 30px 0 0;
}
.service .service-inner{
    max-width: 600px;
}
 .service-box{
     gap: 12px;
     padding: 0 20%;
}
.service .service-icon{
        background: var(--primary-color);
}
.service-icon{
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #444;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-bottom: 5px;
     transition: all 400ms ease-in-out 0s;
     -webkit-transition: all 400ms ease-in-out 0s;
     -moz-transition: all 400ms ease-in-out 0s;
     -o-transition: all 400ms ease-in-out 0s;
     -ms-transition: all 400ms ease-in-out 0s;
}
.plugins .service-icon{
    border: none;
}
.plugins .service-icon > div{
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
       transition: all 400ms ease-in-out 0s;
     -webkit-transition: all 400ms ease-in-out 0s;
     -moz-transition: all 400ms ease-in-out 0s;
     -o-transition: all 400ms ease-in-out 0s;
     -ms-transition: all 400ms ease-in-out 0s;
}
.plugins .service-box:hover .service-icon> div,
 .service-box:hover .mask-icon {
     transform: rotateY(180deg);
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
     -ms-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
}
 .service-icon .mask-icon {
          transition: all 400ms ease-in-out 0s;
     -webkit-transition: all 400ms ease-in-out 0s;
     -moz-transition: all 400ms ease-in-out 0s;
     -o-transition: all 400ms ease-in-out 0s;
     -ms-transition: all 400ms ease-in-out 0s;
 }
 .service-icon .mask-icon svg{
     width: 45px;
     height: 45px;
 }
  @media(max-width: 1600px){
    .service{
         padding: 80px 0 150px;
    }
}
 @media(max-width: 1400px){
    .service{
         padding: 70px 0 130px;
    }
}
 @media(max-width: 1199px){
    .service{
         padding: 60px 0 110px;
    }
    .service-icon{
        width: 85px;
        height: 85px;
    }
    .service-icon .mask-icon svg{
        width: 40px;
        height: 40px;
    }
}
 @media(max-width: 991px){
    .service .service-inner{
        width: 500px;
    }
    .service-box{
        padding: 0 14%;
    }
    .service{
         padding: 50px 0 100px;
    }
}
 @media(max-width: 767px){
     .service-box{
        gap: 8px;
        padding: 0 10%;
    }
    .service .service-inner{
        width: 400px;
    }
    .service{
         padding: 40px 0 80px;
    }
}
 @media(max-width: 575px){
     .service-box{
         gap: 4px;
    }
    .service{
         padding: 35px 0 70px;
    }
    .service .service-inner{
        padding-top: 30px;
    }
    .service .service-inner::after{
        height: 30px;
    }
}
 @media(max-width: 480px){
       .service{
         padding: 30px 0 50px;
    }
    .plugins .service-box{
        padding: 20px 0 0;
    }
    .plugins .service-inner:first-child .service-box{
        padding: 0;
    }
.service .service-inner{
    width: 300px;
}
     .service-box{
        padding: 0 15px;
    }
 }

/*----------------------- End Service --------------------------*/
/*----------------------- Start theme-tutorial --------------------------*/
 .theme-tutorial {
	 float: left;
	 width: 100%;
     margin-top: -100px;
     text-align: center;
}
 .theme-tutorial .theme-preview {
     display: inline-block;
}
 .theme-tutorial #tilt .popup_overlay1 {
     display: none;
     float: left;
     width: 100%;
     position: fixed;
     height: 100%;
     left: 0;
     right: 0;
     top: 0;
     text-align: center;
     justify-content: center;
     z-index: 9;
     background: rgba(0, 0, 0, 0.3);
}
 .theme-tutorial #tilt .popup_overlay1 .popup {
     display: inline-block;
     position: relative;
     width: 50%;
     max-width: 100%;
     max-height: 100%;
     padding: 20px;
     color: var(--white-color);
     vertical-align: middle;
     margin: 8% 0;
     z-index: 99999;
     float: none;
}
 .theme-tutorial #tilt .popup_overlay1 .popup .popup_close1 {
     position: absolute;
     height: 20px;
     width: 20px;
     top: 5px;
     bottom: auto;
     right: 5px;
     left: auto;
     color: var(--white-color);
     cursor: pointer;
     font-size: 14px;
     line-height: 20px;
}
 .theme-tutorial #tilt #popup_toggle .play-icon {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
     height: 70px;
     width: 70px;
     cursor: pointer;
     opacity: 0;
     -moz-opacity: 0;
     -khtml-opacity: 0;
     -webkit-opacity: 0;
     visibility: hidden;
     color: var(--white-color);
     transition: all 400ms ease-in-out 0s;
     -webkit-transition: all 400ms ease-in-out 0s;
     -moz-transition: all 400ms ease-in-out 0s;
     -o-transition: all 400ms ease-in-out 0s;
     -ms-transition: all 400ms ease-in-out 0s;
}
 #popup_toggle img{
     max-width: 900px;
}
 .theme-tutorial #tilt:hover #popup_toggle .play-icon {
     opacity: 1;
     -moz-opacity: 1;
     -khtml-opacity: 1;
     -webkit-opacity: 1;
     visibility: visible;
}
 .theme-tutorial #tilt #popup_toggle .play-icon {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
     height: 70px;
     width: 70px;
     cursor: pointer;
     opacity: 0;
     -moz-opacity: 0;
     -khtml-opacity: 0;
     -webkit-opacity: 0;
     visibility: hidden;
     color: var(--white-color);
     transition: all 400ms ease-in-out 0s;
     -webkit-transition: all 400ms ease-in-out 0s;
     -moz-transition: all 400ms ease-in-out 0s;
     -o-transition: all 400ms ease-in-out 0s;
     -ms-transition: all 400ms ease-in-out 0s;
}
 .theme-tutorial #tilt #popup_toggle #playVideo i {
     line-height: 70px;
     font-size: 70px;
     float: none;
     display: inline-block;
     vertical-align: top;
     transition: all 400ms ease-in-out 0s;
     -webkit-transition: all 400ms ease-in-out 0s;
     -moz-transition: all 400ms ease-in-out 0s;
     -o-transition: all 400ms ease-in-out 0s;
     -ms-transition: all 400ms ease-in-out 0s;
}
 .theme-tutorial #tilt #popup_toggle {
     position: relative;
     overflow: hidden;
     border: 5px solid var(--primary-color);
}
 .theme-tutorial #tilt #popup_toggle::before {
     background: rgba(0, 0, 0, .2);
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     content: "";
     height: 100%;
     width: 100%;
     -webkit-opacity: 0;
     -moz-opacity: 0;
     -khtml-opacity: 0;
     opacity: 0;
     transition: all 400ms ease-in-out 0s;
     -webkit-transition: all 400ms ease-in-out 0s;
     -moz-transition: all 400ms ease-in-out 0s;
     -o-transition: all 400ms ease-in-out 0s;
     -ms-transition: all 400ms ease-in-out 0s;
}
 .theme-tutorial #tilt:hover #popup_toggle::before {
     -webkit-opacity: 1;
     -moz-opacity: 1;
     -khtml-opacity: 1;
     opacity: 1;
     visibility: visible;
}
 .theme-tutorial #tilt .popup_overlay1 .popup .video-wrapper {
     position: relative;
     height: auto;
     max-width: 100%;
     overflow: hidden;
     padding-bottom: 50%;
}
 .theme-tutorial #tilt .popup_overlay1 .popup .video-wrapper iframe {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     left: 0;
}
 @media(max-width: 1600px){
    .theme-tutorial{
        margin-top: -90px;
    }
     .theme-tutorial #tilt .popup_overlay1 .popup{
         width: 60%;
    }
}
 @media(max-width: 1401px){
    .theme-tutorial{
        margin-top: -80px;
    }
     .theme-tutorial #tilt .popup_overlay1 .popup{
         width: 70%;
    }
}
 @media(max-width: 1199px){
    .theme-tutorial{
        margin-top: -70px;
    }
     .theme-tutorial #tilt .popup_overlay1 .popup{
         width: 80%;
    }
}
 @media(max-width: 991px){
    .theme-tutorial{
        margin-top: -60px;
    }
     .theme-tutorial #tilt .popup_overlay1 .popup{
         width: 90%;
    }
}
 @media(max-width: 767px){
    .theme-tutorial{
        margin-top: -50px;
    }
     .theme-tutorial #tilt .popup_overlay1 .popup{
         width: 100%;
    }
}
 @media(max-width: 575px){
    .theme-tutorial{
        margin-top: -40px;
    }
}
 @media(max-width: 480px){
    .theme-tutorial{
        margin-top: -30px;
    }
}
/*----------------------- End theme-tutorial --------------------------*/
/*----------------------- Start Other pages --------------------------*/
 .other-pages{
    background: var(--secondary-color);
 }
 .other-pages .section-title span{
    color: var(--white-color);
 }
.other-pages .section-title p{
    color: var(--background-color);
}
 .other-pages .page-box{
    padding: 0 15px;
 } 
 .other-pages .page-box-img{
    background-color: var(--white-color);
 }
 .tab-content{
     float: left;
     width: 100%;
}
 .main-product .view-demo li a {
     font-size: 15px;
     line-height: 26px;
     font-weight: 400;
     font-family: var(--secondary-font);
     background: var(--white-color);
     color: var(--secondary-color);
     padding: 10px 18px;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     -ms-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     border: none;
     border-radius: 0;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     -ms-border-radius: 0;
     -o-border-radius: 0;
}
 .main-product .product-detail {
     padding: 80px 0 60px;
     background-color: var(--white-color);
}
 .main-product .view-demo {
     margin: 0 0 50px;
     float: left;
     width: 100%;
}
 .main-product .view-demo li a:hover {
     color: var(--white-color);
}
 .main-product .view-demo li a.active span {
     background: var(--white-color);
}
 .main-product .view-demo>ul {
     margin: 0;
     padding: 0;
     float: none;
     display: flex;
     justify-content: center;
     gap: 25px;
     vertical-align: top;
     width: auto;
     border: none;
}
 .main-product .view-demo li {
     float: none;
     display: inline-block;
     vertical-align: top;
     list-style: outside none none;
}
 .main-product .view-demo li a.active, .main-product .view-demo li a::after {
     background: var(--primary-color);
     color: var(--white-color);
}
 .main-product h4{
    color: var(--white-color);
 }
 .main-product a:hover h4{
    color: var(--background-color);
 }
 .main-product .owl-wrapper {
   display: flex !important;
    align-items: flex-end;
}
 .main-product .view-demo li a span {
     height: 26px;
     width: 34px;
     float: none;
     display: inline-block;
     vertical-align: top;
     background: var(--bg-light);
     color: var(--secondary-color);
     margin-left: 8px;
}
 .owl-carousel .owl-wrapper:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0 
}
 .owl-carousel {
    float: left;
     display: none;
     position: relative;
     width: 100%;
     -ms-touch-action: pan-y 
}
 .owl-carousel .owl-wrapper {
     display: none;
     position: relative;
     -webkit-transform: translate3d(0, 0, 0) 
}
 .owl-carousel .owl-wrapper-outer {
     overflow: hidden;
     position: relative;
     width: 100% 
}
 .owl-carousel .owl-wrapper-outer.autoHeight {
     -webkit-transition: height .5s ease-in-out ;
     -moz-transition: height .5s ease-in-out ;
     -ms-transition: height .5s ease-in-out ;
     -o-transition: height .5s ease-in-out ;
     transition: height .5s ease-in-out ;
}
 .owl-carousel .owl-item {
     float: left 
}
 .owl-controls .owl-buttons div, .owl-controls .owl-page {
     cursor: pointer 
}
 .owl-controls .owl-buttons div {
     position: absolute 
}
 .owl-controls .owl-buttons .owl-prev {
     left: 10px;
     top: 40% 
}
 .owl-controls .owl-buttons .owl-next {
     right: 10px;
     top: 40% 
}
 .owl-controls {
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     -webkit-tap-highlight-color: transparent 
}
 .owl-carousel .owl-item, .owl-carousel .owl-wrapper {
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -ms-backface-visibility: hidden;
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0) 
}
 @media(max-width: 1401px){
     .main-product .view-demo{
         margin-bottom: 44px;
    }
}
 @media(max-width: 1199px){
     .main-product .view-demo{
         margin-bottom: 40px;
    }
}
 @media(max-width: 991px){
     .main-product .view-demo{
         margin-bottom: 36px;
    }
     .main-product .view-demo li a{
         padding: 7px;
    }
}
 @media(max-width: 767px){
     .main-product .view-demo{
         margin-bottom: 30px;
    }
     .main-product .view-demo li a{
         font-size: 14px;
    }
     .main-product .view-demo>ul{
         gap: 10px;
    }
}
 @media(max-width: 481px){
     .main-product .view-demo li a{
         font-size: 13px;
         line-height: 24px;
    }
     .main-product .view-demo li a span{
         height: 24px;
    }
     .main-product .view-demo{
         margin-bottom: 20px;
    }
}
/*----------------------- End Other pages --------------------------*/
/*----------------------- Start Marquee --------------------------*/
 .marquee-wrapper {
     width: 100%;
     overflow: hidden;
}
 .marquee-content {
     display: flex;
     width: max-content;
     animation: scroll-left 30s linear infinite;
     -webkit-animation: scroll-left 30s linear infinite;
}
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}
.marquee-content .nav-ticker {
  transition: opacity 0.3s ease;
}
.marquee-content:hover .nav-ticker {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.marquee-content:hover .nav-ticker:hover {
  opacity: 1;
}

 @keyframes scroll-left {
     0% {
         transform: translateX(0);
    }
     100% {
         transform: translateX(-50%);
    }
}
/*----------------------- End Marquee --------------------------*/
/*----------------------- Start Elementer Setting --------------------------*/
 .elementer-setting .service-box{
     padding: 80px 30px 0;
}
 .elementer-setting .service-icon{
    background-color: var(--primary-color);
    border-color: var(--secondary-color);
 }
.elementer-img{
    float: left;
    width: 100%;
    position: relative;
    padding: 0 10%;
}
.elementer-img img{
    box-shadow: 0 0 4px 3px rgba(0,0,0,0.1);
}
.elementer-img .element-img{
    position: absolute;
    height: fit-content;
    padding: 0.8%;
    border: 1px solid #ffffff50;
}
.elementer-img .element-img.element-01{
    left: 0;
    top: 0;
    bottom: 0;
    width: 17.8%;
    right: auto;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.elementer-img .element-img.element-02{
    left: auto;
    top: -8%;
    width: 21%;
    bottom: auto;
    right: 0;
}
.elementer-img .element-img.element-03{
    left: auto;
    top: auto;
    width: 17.8%;
    bottom: 6%;
    right: 0;
}

 @media(max-width: 1401px){
     .elementer-setting .service-box{
         padding: 70px 30px 0;
    }
}
 @media(max-width: 1199px){
     .elementer-setting .service-box{
         padding: 60px 0 0;
    }
}
 @media(max-width: 991px){
     .elementer-setting .service-box{
         padding: 50px 0 0;
    }
     .service-icon{
         width: 80px;
         height: 80px;
    }
     .service-icon .mask-icon svg{
         width: 35px;
         height: 35px;
    }
}
 @media(max-width: 767px){
    .service-icon {
        width: 70px;
        height: 70px;
    }
    .service-icon .mask-icon svg{
        width: 30px;
        height: 30px;
    }
 }
 @media(max-width: 575px){
     .elementer-setting .service-box{
         padding: 40px 0 0;
    }
}
 @media(max-width: 481px){
     .elementer-setting .service-box{
         padding: 30px 0 0;
    }
}
/*----------------------- End Elementer Setting --------------------------*/
/*----------------------- Start Accordian --------------------------*/
 .accordian{
     float: left;
     width: 100%;
}
.accordion-tabs .section-title p{
    color: var(--secondary-color);
}

 .card {
       margin: 0 0 30px;
       float: left;
       width: 100%;
       border-radius: 0;
       padding: 20px;
       background: var(--bg-light);
       -webkit-border-radius: 0;
       -moz-border-radius: 0;
       -ms-border-radius: 0;
       -o-border-radius: 0;
}
 .card .card-header{
     text-align: left;
     font-size: 20px;
}
 .card .card-header > button{
     float: left;
     width: 100%;
     text-align: left;
     text-decoration: none;
     font-family: var(--primary-font);
     font-size: 20px;
     background: var(--bg-light);
     border: none;
     line-height: normal;
}
 .card .card-header > button > svg{
     float: right;
}
 .card .card-body{
     text-align: left;
     padding: 15px 0 0;
     margin-top: 15px;
     border-top: 1px solid var(--border-color-01);
     font-size: 16px;
}
.card .card-body p{
    color: #888;
}
 .card .card-body ul li {
     margin: 10px 0;
    color: #888;

}
 .feather-minus, .collapsed .feather-plus{
     display: block;
}
 .feather-plus, .collapsed .feather-minus{
     display: none;
}
 @media(max-width: 991px){
     .card .card-header > button{
         font-size: 18px;
    }
     .card{
         margin-bottom: 10px;
    }
     .card .card-body ul li{
         margin: 3px 0;
    }
}
 @media(max-width: 767px){
     .card{
         margin-bottom: 8px;
         padding: 15px;
         border-radius: 20px;
         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         -ms-border-radius: 20px;
         -o-border-radius: 20px;
}
     .card .card-body{
         font-size: 15px;
         padding: 10px 0 0;
         margin-top: 10px;
    }
    .card .card-header > button > svg{
        width: 15px;
    }
}
 @media(max-width: 481px){
     .card .card-header > button{
         font-size: 15px;
    }
     .card{
         margin-bottom: 5px;
    }
     .card .card-body ul li{
         margin: 0;
    }
     .card .card-body{
         font-size: 14px;
    }
}
/*----------------------- End Accordian --------------------------*/
/*----------------------- Start QR CODE --------------------------*/
 .scan-code {
     float: right;
     position: fixed;
     z-index: 10;
     top: auto;
     bottom: 80px;
     right: 0;
     left: auto;
     opacity: 1;
     visibility: visible;
     transition:all .5s ease-in-out;
     cursor:pointer;
     overflow: hidden;
}
 .QR-code .qr-popup{
     width: 200px;
}
 .QR-code.active .qr-popup{
     z-index: 99;
     position: fixed;
     top: auto;
     bottom: 80px;
     right: 0;
     left: auto;
     transition:all .5s ease-in-out;
     opacity:1;
     background-color: var(--white-color);
     padding: 8px;
     visibility:visible;
}
 .qr-popup{
     transition:all .5s ease-in-out;
     opacity:0;
     visibility:hidden;
     right:-200px;
     position: fixed;
     z-index: 99;
     top: auto;
     bottom: 80px;
}
 .QR-code.active .scan-code{
     right:200px;
}
/*----------------------- End QR CODE --------------------------*/
/*----------------------- Start Back to top --------------------------*/
 .goToTop {
     bottom: 20px;
     background: var(--white-color);
     cursor: pointer;
     height: 42px;
     position: fixed;
     right: 20px;
     text-align: center;
     width: 42px;
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all .4s ease-in-out;
     -webkit-transition: all .4s ease-in-out 0s;
     -moz-transition: all .4s ease-in-out 0s;
     -o-transition: all .4s ease-in-out 0s;
     -ms-transition: all .4s ease-in-out 0s;
     text-decoration: none;
     outline: 0 
}
 .goToTop::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f106";
    font-size: 18px;
         transition: all .4s ease-in-out;
     -webkit-transition: all .4s ease-in-out 0s;
     -moz-transition: all .4s ease-in-out 0s;
     -o-transition: all .4s ease-in-out 0s;
     -ms-transition: all .4s ease-in-out 0s;
    color: var(--secondary-color);
}
 .goToTop:hover {
     background: var(--primary-color);
}
 .goToTop:hover::before {
    color: var(--white-color);
}
/*----------------------- End Back to top --------------------------*/
/*----------------------- Start Footer --------------------------*/
 footer, .footer-bg, .footer_link{
     float: left;
     width: 100%;
}

 footer{
     position: relative;
     z-index: 1;
     background: url(../images/footer-bg.png);
     background-repeat: no-repeat;
     background-size: cover;
}
 footer::after{
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background-color: #000000ab;
     z-index: -1;
}
.footer-bg{
     padding: 80px 0;
}
 .footer-gap{
     gap: 25px;
     color: var(--white-color);
}
 footer h4{
     margin: auto;
     vertical-align: top;
     width: fit-content;
     background: var(--white-color);
     color: var(--secondary-color);
     padding: 6px 15px;
     font-size: 15px;
}
 footer .btn{
    margin-top: 10px;
    font-size: 18px;
 }
 footer h3{
     color: var(--white-color);
}
 .footer-content{
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 15px;
}
 .footer_link{
     display: flex;
     justify-content: center;
}
 @media(max-width: 1401px){
    .footer-bg{
         padding: 70px 0;
    }
}
 @media(max-width: 1199px){
    .footer-bg{
         padding: 60px 0;
    }
}
 @media(max-width: 991px){
    .footer-bg{
         padding: 50px 0;
    }
}
 @media(max-width: 767px){
    .footer-bg{
         padding: 40px 0;
    }
     .footer-gap{
         gap: 22px;
    }
     footer h4{
         padding: 8px 18px;
         font-size: 16px;
    }
     .footer-content svg{
         width: 20px;
    }
     .footer-content span{
         font-size: 14px;
    }
}
 @media(max-width: 575px){
    .footer-bg{
         padding: 30px 0;
    }
     .footer-content{
         gap: 5px;
         flex-direction: column;
    }
}
/*----------------------- End Footer --------------------------*/
/*----------------------- Start Feature List --------------------------*/
.features{
    position: relative;
    z-index: 1;
    background-color: var(--secondary-color);
}
.features h2 span{
    color: var(--white-color);
}
.features .section-title p{
    color: var(--background-color);
}
.features-title{
    background-color: var(--bg-light);
    position: relative;
}
.features-title::after{
    content: '';
    position: absolute;
    left: -10%;
    right: auto;
    bottom: auto;
    top: 0;
    border-radius:50% 50% 0 0;
    height: 500px;
    width: 120%;
    background-color: var(--secondary-color);
    -webkit-border-radius:50% 50% 0 0;
    -moz-border-radius:50% 50% 0 0;
    -ms-border-radius:50% 50% 0 0;
    -o-border-radius:50% 50% 0 0;
    z-index: 0;
}
.features-title .section-title{
    position: relative;
    z-index: 1;
}
.feature-inner{
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.features-box{
    width: 25%;
    gap: 15px;
    padding-right: 30px;
    margin-top: 45px;
}
.features-box:hover .features-img svg{
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}
.features-box:hover
.features-box p{
    font-size: 14px;
}
.feature-inner:hover .features-box {
  opacity: 0.5;
}
.feature-inner .features-box{
  transition: opacity 0.3s ease-in-out;
}
.feature-inner .features-box:hover {
  opacity: 1;
}
.features-img{
    margin-bottom: 5px;
}
.features-img svg{
    width: 40px;
    height: 40px;
    transition: all .4s ease-in-out;
     -webkit-transition: all .4s ease-in-out 0s;
     -moz-transition: all .4s ease-in-out 0s;
     -o-transition: all .4s ease-in-out 0s;
     -ms-transition: all .4s ease-in-out 0s;
}
.features-box h4{
    color: #cccccc;
}
.features-box p{
    color: #777777;
}

@media(max-width: 1199px){
    .features-box{
        width: 33.33%;
        margin-top: 40px;
    }
}
@media(max-width: 991px){
    .features-box {
        gap: 10px;
        padding-right: 15px;
        margin-top: 25px;
    }
}
@media(max-width: 767px){
    .features-box{
        gap: 5px;
        width: 50%;
    }
    .features-img{
        width: 40px;
    }
}
@media(max-width: 575px){
    .features-box p{
        font-size: 13px;
    }
    .features-img{
        width: 38px;
    }
}
@media(max-width: 480px){
    .features-box{
        width: 100%;
        padding: 0;
        margin-top: 15px;
    }
}
/*----------------------- End Feature List --------------------------*/
/*----------------------- Start Mobile View --------------------------*/
 .mobile-view {
     position: relative;
}
 .mobile-view .page1 span{
     float: left;
     width: 100%;
     margin: 15px 0 0;
     text-align: center;
     color: var(--secondary-color);
}
 .mobile-view .page1{
     float: left;
     width: 100%;
     margin: auto;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
}.mobile-view .page1 .innerpage{
    padding: 5px;
    background: var(--secondary-color);
}
 .mobile-view .section-title h2{
     color: var(--secondary-color);
}
.mobile-view .section-title p{
    color: var(--secondary-color);
}
 .mobile-view .owl-carousel .owl-item{
     padding: 0 50px 0 0;
}
 @media(max-width: 1400px){
     .mobile-view .owl-carousel .owl-item{
         padding: 0 20px;
    }
}
 @media(max-width: 1199px){
     .mobile-view .owl-carousel .owl-item{
         padding: 0 15px 0;
    }
}
 @media(max-width: 767px){
     .mobile-view .owl-carousel .owl-item{
         padding: 0 10px 0;
    }
}
 @media(max-width: 575px){
.mobile-view .page1 .innerpage{
    padding: 10px;
}
 }
/*----------------------- End Mobile View --------------------------*/

/*----------------------- Start Header-Footer --------------------------*/
.slide-box{
    float: left;
    width: 100%;
    background-color: var(--background-color);
    padding-left: 23%;
    padding-right: 23%;
}
.slide-box-main .owl-item{
    padding: 0 15px;
}
.slide-box-main>.row{
    background-color: var(--secondary-color);
}
.slide-box-main h2{
    font-size: 68px;
}
.slide-box-main .section-title{
    padding: 0 40px;
    margin: 0;
}
.header-footer .slide-box{
    background-color: var(--bg-light);
}
.bg-primary-color .slide-box{
    background-color: transparent;
}
@media(max-width:1400px){
    .slide-box-main h2{
        font-size: 43px;
    }
}
@media(max-width:1199px){
    .slide-box-main h2{
        font-size: 34px;
    }
}
@media(max-width:991px){
    .slide-box-main h2{
        font-size: 28px;
    }
    .slide-box-main .section-title{
        padding: 0 21px;
    }
}
@media(max-width:767px){
    .slide-box-main .section-title {
        width: 68%;
        margin: auto;
        padding: 30px;
    }
}
@media(max-width:575px){
    .slide-box-main .section-title {
        width: 71%;
    }
    .slide-box-main h2{
        font-size: 24px;
    }
}
@media(max-width:480px){
    .slide-box-main .section-title {
        width: 100%;
    }
    .slide-box-main h2{
        font-size: 20px;
    }
}

/*----------------------- End Header-Footer --------------------------*/

.home-pages .page-box-img a{
    width: 100%;
    height: 700px; /* fixed height */
    overflow: hidden;
    position: relative;
}
.home-pages .coming .page-box-img img{
    filter: blur(12px);
    transition: filter 0.3s ease;
    -webkit-filter: blur(12px);
}
.home-pages .all-pages .page-main .coming .page-box-img h2{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    z-index: 1;
    font-weight: 600;
    color: var(--secondary-color);
    font-size: 60px;
}
.home-pages .page-box-img a img {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    transition: all 2s ease-in-out 0s;
    -webkit-transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
    -ms-transition: all 2s ease-in-out 0s;
    -o-transition: all 2s ease-in-out 0s;
}

.home-pages .page-box-img:hover a img:not(.home-pages .coming .page-box-img a img) {
    transform: translateY(calc(-100% + 700px));
    -webkit-transform: translateY(calc(-100% + 700px));
    -moz-transform: translateY(calc(-100% + 700px));
    -ms-transform: translateY(calc(-100% + 700px));
    -o-transform: translateY(calc(-100% + 700px));
}
@media(max-width:1600px){
    .home-pages .page-box-img:hover a img {
        transform: translateY(calc(-100% + 600px));
        -webkit-transform: translateY(calc(-100% + 600px));
        -moz-transform: translateY(calc(-100% + 600px));
        -ms-transform: translateY(calc(-100% + 600px));
        -o-transform: translateY(calc(-100% + 600px));
}
    .home-pages .page-box-img a{
        height: 600px;
    }
}
@media(max-width:1400px){
    .home-pages .page-box-img:hover a img {
        transform: translateY(calc(-100% + 500px));
        -webkit-transform: translateY(calc(-100% + 500px));
        -moz-transform: translateY(calc(-100% + 500px));
        -ms-transform: translateY(calc(-100% + 500px));
        -o-transform: translateY(calc(-100% + 500px));
}
    .home-pages .page-box-img a{
        height: 500px;
    }
    .home-pages .all-pages .page-main .coming .page-box-img h2{
        font-size: 44px;
    }
}
@media(max-width:1199px){
    .home-pages .page-box-img:hover a img {
        transform: translateY(calc(-100% + 400px));
        -webkit-transform: translateY(calc(-100% + 400px));
        -moz-transform: translateY(calc(-100% + 400px));
        -ms-transform: translateY(calc(-100% + 400px));
        -o-transform: translateY(calc(-100% + 400px));
}
    .home-pages .page-box-img a{
        height: 400px;
    }
    .home-pages .all-pages .page-main .coming .page-box-img h2{
        font-size: 38px;
    }
}
@media(max-width:991px){
    .home-pages .page-box-img:hover a img {
        transform: translateY(calc(-100% + 380px));
        -webkit-transform: translateY(calc(-100% + 380px));
        -moz-transform: translateY(calc(-100% + 380px));
        -ms-transform: translateY(calc(-100% + 380px));
        -o-transform: translateY(calc(-100% + 380px));
}
    .home-pages .page-box-img a{
        height: 380px;
    }
    .home-pages .all-pages .page-main .coming .page-box-img h2{
        font-size: 32px;
    }
}
@media(max-width:767px){
    .home-pages .all-pages .page-main .coming .page-box-img h2{
        font-size: 26px;
    }
}
@media(max-width: 575px){
    .home-pages .all-pages .page-main .coming .page-box-img h2{
        font-size: 20px;
    }
}
@media(max-width:480px){
    .home-pages .page-box-img:hover a img {
        transform: translateY(calc(-100% + 330px));
        -webkit-transform: translateY(calc(-100% + 330px));
        -moz-transform: translateY(calc(-100% + 330px));
        -ms-transform: translateY(calc(-100% + 330px));
        -o-transform: translateY(calc(-100% + 330px));
}
    .home-pages .page-box-img a{
        height: 330px;
    }
    .home-pages .all-pages .page-main .coming .page-box-img h2{
        font-size: 14px;
    }
}

/* Owl Navigation Buttons */
.owl-theme .owl-controls .owl-buttons div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    cursor: pointer;
    transition: all 0.3s ease;
}
.owl-theme .owl-controls .owl-buttons div:hover {
    opacity: 1;
    color: var(--secondary-color);
}

/* Position */
.owl-theme .owl-controls .owl-buttons .owl-prev { left: 10px; }
.owl-theme .owl-controls .owl-buttons .owl-next { right: 10px; }

/* Font Awesome Icons using ::before */
.owl-theme .owl-controls .owl-buttons .owl-prev::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f104"; /* Left arrow */
    font-size: 18px;
}
.owl-theme .owl-controls .owl-buttons .owl-next::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f105"; /* Right arrow */
    font-size: 18px;
}
.owl-theme .owl-controls .owl-buttons .owl-prev{
    left: -50px;
}
.owl-theme .owl-controls .owl-buttons .owl-next{
    right: -50px;
}


@media(max-width:1199px){
   .owl-theme .owl-controls .owl-buttons div{
        width: 35px;
        height: 35px;
    }
    .owl-theme .owl-controls .owl-buttons .owl-prev{
        left: -40px;
    }
    .owl-theme .owl-controls .owl-buttons .owl-next{
        right: -40px;
    }
    .owl-theme .owl-controls .owl-buttons .owl-next::before,
    .owl-theme .owl-controls .owl-buttons .owl-prev::before{
        font-size: 15px;
    }
}
@media(max-width:575px){
    .owl-theme .owl-controls .owl-buttons div{
        width: 25px;
        height: 25px;
    }
    .owl-theme .owl-controls .owl-buttons .owl-prev{
        left: -35px;
    }
    .owl-theme .owl-controls .owl-buttons .owl-next{
        right: -35px;
    }
    .owl-theme .owl-controls .owl-buttons .owl-next::before,
    .owl-theme .owl-controls .owl-buttons .owl-prev::before{
        font-size: 13px;
    }
}

/*----------------------- Start offer banner --------------------------*/
.offer-banner .marquee-wrapper{
    transition: opacity 0.5s ease; /* Smooth effect */
}
 .offer-banner {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    color: white; 
    text-align: center;
    z-index: 1;
    background: var(--secondary-color); 
}
.offer-banner .nav-ticker{
    padding: 0 15px;
    width: 20vw;
}
.offer-banner .nav-ticker .slide-box-main h4{
	color: var(--white-color);
    text-align: start;
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 142%;
	font-weight: 400;
}
.main-text{
    top: auto;
    bottom: 0;
    z-index: 1;
    position: absolute;
}
.main-text .section-heading {
    font-size: 21vw;
    font-weight: 300;
    line-height: 65%;
    color: #FFFFFF;
}
@media(max-width:1199px){
    .offer-banner .nav-ticker .slide-box-main h4{
        font-size: 14px;
    }
}
@media(max-width:991px){
    .offer-banner .nav-ticker{
        padding: 0 10px;
        width: 25vw;
    }
    .offer-banner .nav-ticker .slide-box-main h4{
        font-size: 13px;
    }
}
@media(max-width:767px){
    .offer-banner .nav-ticker{
        padding: 0 10px;
        width: 34vw;
    }
}
@media(max-width:575px){
    .offer-banner .nav-ticker{
        width: 40vw;
    }
}
@media(max-width:480px){
    .offer-banner .nav-ticker{
        width: 60vw;
    }
}
@media(max-width:400px){
    .offer-banner .nav-ticker{
        width: 80vw;
    }
}
/*----------------------- end offer banner --------------------------*/

.cms-main,
.cms-inner-top{
    display: flex;
    align-items: start;
    justify-content: center;
}
.cms-left{
    width: 73%;
}
.cms-right{
    width: 27%;
}
.cms-inner-top{
    margin-bottom: 4.5vw;
    padding-right: 6vw;
}
.cms-inner-box-1{
    width: 30%;
}
.cms-inner-box-2{
    width: 70%;
    padding: 10vw 5vw 0;
}
.cms .section-title{
    margin: 0;
}
.cms .section-title p{
    font-size: 16px;
    line-height: 165%;
}
.border-btn a.btn{
    background: transparent;
    padding: 10px 0 0;
    color: var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
}
.border-btn a::after{
    height: 2px;
    bottom: -2px;
    top: auto;
}
.cms-right-box{
    width: 200%;
    margin-left: -6vw;
    padding: 50px 20px 20px;
    border: 2px solid var(--secondary-color);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    position: relative;
}
.cms-right-box::after{
    content: '';
    position: absolute;
    left: 20px;
    right: auto;
    top: 20px;
    bottom: auto;
    margin: auto;
    width: 40px;
    border-bottom: 10px dotted var(--secondary-color);
}
.cms-right-box img{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

@media(max-width:1600px){
    .cms-inner-box-2{
        padding: 8vw 4vw 0;
    }
    .cms .section-title p{
        font-size: 15px;
    }
}
@media(max-width:1400px){
    .cms-inner-box-2{
        padding: 7vw 4vw 0;
    }
    .cms .section-title p{
        font-size: 14px;
    }
    .cms-inner-top {
        margin-bottom: 3.5vw;
        padding-right: 3vw;
    }
    .cms-right-box{
        margin-left: -3vw;
    }
}
@media(max-width:991px){
    .cms-right-box {
        width: 250%;
        padding: 50px 15px 15px;
    }
}
@media(max-width:767px){
.cms-main{
    flex-wrap: wrap;
    gap: 20px;
}
.cms .section-title p{
    font-size: 13px;
}
.cms-inner-top{
    padding: 0;
}
.cms-right,
.cms-right-box,
.cms-left{
    width: 100%;
    margin: 0;
}

}
@media (max-width: 575px) {
    .cms-inner-top{
        flex-wrap: wrap;
        margin-bottom: 5vw;
    }
    .cms-inner-box-1,
    .cms-inner-box-2{
        width: 100%;
    }
    .cms-right-box::after{
        top: 16px;
    }
    .cms-right-box {
        padding: 40px 10px 10px;
    }
}

.yith-quick-view-content.woocommerce div.product .product{
    flex-direction: column;
}
#yith-quick-view-modal.open .yith-wcqv-wrapper{
    height: 100vh;
    width: 400px;
}
#yith-quick-view-modal .single-product .product .entry-summary .quantity{
    width: 80px;
}
.yith-wcqv-main #yith-quick-view-content .cart-wrap{
    width: calc(100% - 80px);
}