@font-face{
    font-family: "against-Regular";
    src: url("../fonts/893fdce7fe8ecb381f012ce2edd2dd6c.eot");
    src: url("../fonts/893fdce7fe8ecb381f012ce2edd2dd6c.eot?#iefix")format("embedded-opentype"),
        url("../fonts/893fdce7fe8ecb381f012ce2edd2dd6c.woff")format("woff"),
        url("../fonts/893fdce7fe8ecb381f012ce2edd2dd6c.woff2")format("woff2"),
        url("../fonts/893fdce7fe8ecb381f012ce2edd2dd6c.ttf")format("truetype"),
        url("../fonts/893fdce7fe8ecb381f012ce2edd2dd6c.svg#against-Regular")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}


html{
overflow-x: hidden;
} 


body{ 
font-family: 'Raleway', sans-serif;
    overflow-x: hidden;
} 

h1, h2, h3, h4, h5, h6{
font-family: "against-Regular";
}

a {
text-decoration: none !important;
}

p{
font-size: 14px;
color: #000;
}

.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

.heading{
color: #000;
font-size: 46px;
margin-bottom: 12px;
}



/*----------- button -------------*/

.butn-default {
display: inline-block;
padding: 12px 40px;
line-height: 1;
font-size: 15px;
transition: 0.5s;
background: linear-gradient(90deg, var(--c1, #FF8500), var(--c2, #CE3113) 51%, var(--c1, #FF8500)) var(--x, 100%)/ 200%;
color: #fff;
text-decoration: none;
text-align: center;
border-radius: 40px;
font-weight: 400;
--c1: #FF8500;
--c2: #CE3113;
border: 0;
box-shadow: none;
}

.butn-default:hover {
--x: 0%; 
color: #fff;
}


/*--------------- navbar ---------------*/

.header-area{
background: url(../img/header-bg.webp) no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 9;
position: relative;
padding-top: 10px;
-webkit-transition: aall 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.header-area:before {
position: absolute;
content: '';
background: #fff;
top: 0;
left: 0;
width: 45%;
height: 86%;
z-index: -1;
border-radius: 0px 0px 90px 0px;
}

.header-area:after {
position: absolute;
content: '';
background: #fff;
top: 0;
right: 0;
width: 45%;
height: 86%;
z-index: -1;
border-radius: 0px 0px 0px 90px;
}


.sticky{
position: fixed;
padding-top: 5px;
-webkit-animation: slideDown 0.7s ease-out;
animation: slideDown 0.7s ease-out;
}


@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}


.logo {
text-align: center;
margin-bottom: 12px;
}

.logo a {
display: inline-block;
}

.logo a img {   
transition: all 0.3s ease-in-out;
width: 50px;
}

.sticky .logo a img{
width: 42px;
}


/*--- menu ---*/

.header-menu {
margin: 0px;
padding: 0px;
list-style: none;
display: flex;
align-items: center;
}

.header-menu li{
margin-left: 40px;
}

.header-menu li:nth-child(1){
margin-left: 0px;
}

.header-menu li a{
color: #200702;
font-size: 15px;
display: inline-block;
transition: all 0.2s ease-In;
}

.header-menu li a:hover{
color: #FF8500;
}



.header-button {
margin: 0px;
padding: 0px;
list-style: none;
display: flex;
align-items: center;
justify-content: end;
}

.header-button li{
margin-left: 40px;
}

.header-button li:nth-child(1){
margin-left: 0px;
}

.header-button li a img{
width: 30px;
transition: all 0.2s ease-In;
}

.header-button li a img:hover{
filter: invert(31%) sepia(83%) saturate(4918%) hue-rotate(356deg) brightness(83%) contrast(92%);
}


.header-btn{
color: #200702;
border: 1px solid #200702;
font-size: 13px;
border-radius: 20px;
padding: 6px 10px;
background: #fff;
position: relative;
transition: 0.3s ease-out;
z-index: 1;
display: block;
}

.header-btn:after {
position: absolute;
content: "";
left: 0px;
top: 0px;
width: 100%;
height: 100%;
border-radius: 20px;
background: linear-gradient(90deg,#CE3113 10%,#FF8500 100%);
z-index: -1;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.header-btn:hover:after {
-webkit-transform: scale(1);
transform: scale(1);
}

.header-btn:hover {
color: #fff;
border-color: #FF8500;
}


.menu-button{
cursor: pointer;
display: none;
}

.menu-button span{
width: 21px;
display: block;
background: #000;
height: 2px;
border-radius: 50px;
transition: all 0.2s ease-In;
}

.menu-button:hover span{
background: #FF8500;
}

.menu-button span:nth-child(2),
.menu-button span:nth-child(3){
margin-top: 5px;
}


/*--------------- mobile menu ---------------*/

.menu-button {
display: none;
text-align: right;
transition: all 0.3s ease-out;
}

.menu-button img{
display: inline-block;
cursor: pointer;
}

.black-drop{
position:fixed;
right:0px;
top:0px;
width:100%;
height:100%;
opacity:0;
background:rgba(0,0,0,0.70);
visibility:hidden;
z-index:9;
transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;  
}

.cosult-form-visible .black-drop{
opacity:1;
visibility:visible;
}

.mobile-menu{
position:fixed;
left:-450px;
top:0px;
width: 300px;
max-width:100%;
z-index:9;
opacity:0;
visibility:hidden;
height: 100%;
background: linear-gradient(248deg,#CE3113 10%,#FF8500 100%);
transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
}

.cosult-form-visible .mobile-menu{
left:0px;
opacity:1;
visibility:visible;
}

.mobile-menu .inner-box{
position: relative;
padding: 90px 20px 20px;
overflow-x: hidden;
overflow-y: scroll;
height: 100vh;
}

.mobile-menu .inner-box .cross-icon{
position: absolute;
right: 16px;
top: 20px;
width: 30px;
height: 30px;
cursor: pointer;
border-radius: 50%;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
}

.mobile-menu .inner-box .cross-icon img{
width: 10px;
}

/*.mobile-link{
overflow-x: hidden;
overflow-y: scroll;
height: 100vh;
}*/

.mobile-link ul{
margin-bottom: 0px;
list-style: none;
}

.mobile-link ul li{
margin-bottom: 15px;
}

.mobile-link ul li a{
color: #fff;
font-weight: 400;
font-size: 16px;
transition: all 0.2s ease-In;
}

.mobile-link ul li a:hover{
color: #000;
}

.mobile-drop-menu a{
display: block;
margin: 12px 0px;
font-size: 18px !important;
}


/*---sidebar menu dropdown----*/

.sidebar-menu ul{
margin: 0;
padding: 0;
}

.sidebar-link{
display: flex !important;
align-items: center;
justify-content: space-between;
}

.sidebar-menu ul li a {
display: inline-block;
width: 100%;
text-decoration: none;
position: relative;
padding: 0.25rem 0rem;
}

.sidebar-menu ul li a i {
margin-left: 10px;
font-size: 14px;
font-weight: 600;
}

.sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
padding-top: 8px;
list-style: none;
margin-left: 20px;
border-bottom: 1px solid #fff;
}

.sidebar-menu .sidebar-submenu {
display: none;
}

.sidebar-dropdown.active .fa-angle-down{
transform: rotate(180deg);
}


/*--------------------*/

.banner-section{
background: url(../img/banner-bg.webp) no-repeat;
background-size: cover;
background-position: center;
padding: 20px 0px;
}

.banner-rotate{
position: relative;
z-index: 1;
}

.banner-rotate .img-responsive{
animation: loaderRotate 30s linear infinite;
}

.ban-arrow{
position: absolute;
top: 70px;
right: -60px;
width: 170px;
z-index: -1;
}


@keyframes loaderRotate {
0%{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(1turn);
-moz-transform: rotate(1turn);
-o-transform: rotate(1turn);
transform: rotate(1turn);
}
}


.banner-content p{
color: #FFF500;
font-size: 17px;
font-weight: 300;
}

.banner-content .heading{
color: #fff;
margin-bottom: 0px;
}

.banner-content img{
display: block;
width: 160px;
margin: 8px 0px 30px;
}

/*--------------------*/

.about-area{
padding: 80px 0px;
position: relative;
}

.aboutcenter-box p{
text-align: justify;
}

.aboutcenter-box ul{
margin: 0;
padding-left: 15px;
}

.aboutcenter-box ul li{
color: #000;
font-size: 14px;
margin-bottom: 3px;
}

.guchchi-vector{
position: absolute;
top: 0;
bottom: 0;
right: -40px;
height: 100%;
}
/*--------------------*/

.product-cart-section {
  display: flex;
  justify-content: space-between;
}
.product-buy {
  display: flex;
  justify-content: center;
}
p.product-name {
  font-size: 22px;
  font-weight: 100;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
}
.product-img img {
  width: 100%;
}
.product-description {
  padding: 20px 40px;
  border: 1px solid #ff8500;
  background-color: #fff;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.product-description .product-name span {
  text-transform: lowercase;
  font-weight: 600;
}

.product-box {
  width: 40%;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.product-cart-bg {
  position: absolute;
  bottom: 0;
  z-index: -1;
}
.quantity span {
    color: #fff !important;
	align-items: center;
    display: flex;
    justify-content: center;
}






/*--------------------*/

.process-area{
background: url(../img/process-bg.webp) no-repeat;
background-size: cover;
background-position: center;
padding-bottom: 60px;
}

.process-area .process-row{
backdrop-filter: blur(5px);
background-color: rgb(0 0 0 / 40%);
padding: 50px 35px;
border-radius: 0px 0px 100px 100px;
}

.process-box {
padding-left: 30px;
}

.process-box .heading {
color: #fff;
margin-bottom: 25px;
position: relative;
}

.process-box .heading:before {
position: absolute;
content: '';
background: #FFF500;
width: 38%;
height: 1.4px;
bottom: 10px;
right: -50px;
}

.process-box p{
color: #fff;
text-align: justify;
}

.process-box p:last-child{
margin-bottom: 0px;
}

/*--------------------*/

.creation-area{
margin: 60px 0px;
}

.creation-area .heading {
text-align: center;
margin-bottom: 30px;
}

/*--------------------*/

.benefit-area {
margin-bottom: 20px;
position: relative;
border-bottom: 1.9px dashed #A5461D;
position: relative;
}

.benefit-area:before{
position: absolute;
content: '';
background: #fff;
width: 100%;
height: 20px;
left: 0;
right: 0;
bottom: -22px;
z-index: 1;
}

.benefit-area .heading {
text-align: center;
margin-bottom: 40px;
}

.benefit-vector{
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: -1;
}

.mobile-benefit{
display: none;
}

.benefit-box{
text-align: center;
margin-bottom: 50px;
}

.benefit-box img{
width: 54px;
}

.benefit-box p{
margin: 8px 0px 0px;
color: #606060;
font-size: 15px;
}

.heart-benefit img{
width: 46px;
}

.benefit-center-image{
position: relative;
margin-bottom: -55px;
margin-top: 80px;
}

.benefit-center-image:before{
position: absolute;
content: '';
background: #fff;
width: 107%;
height: 107%;
left: 50%;
top: 50%;
border-radius: 100%;
transform: translate(-50%, -50%);
}

.benefit-center-image:after{
position: absolute;
content: '';
border: 1.9px dashed #A5461D;
width: 107%;
height: 107%;
left: 50%;
top: 50%;
border-radius: 100%;
transform: translate(-50%, -50%);
}


.benefit-center-image img{
animation: loaderRotate 30s linear infinite;
position: relative;
z-index: 1;
}

.benefit-box-right{
display: flex;
justify-content: end;
}

.benefit-box-left{
display: flex;
}


.mobile-benefit-grid{
display: flex;
flex-wrap: wrap;
justify-content: center;
}


/*--------------------*/

.client-area{
background: url(../img/client-bg.webp) no-repeat;
background-size: cover;
background-position: center;
padding: 60px 0px;
position: relative;
z-index: 0;
}

.client-area .heading {
text-align: center;
margin-bottom: 20px;
color: #fff;
}


.clientslide-box{
position: relative;
margin: 0 15px;
}

.clientslide-box .img-responsive{
position: absolute;
top: 0;
left: 0;
width: 180px;
z-index: 1;
}

.clientslide-content{
backdrop-filter: blur(3px);
background-color: rgb(255 255 255 / 28%);
padding: 50px 50px 0px 110px;
box-shadow: 0 2px 16px 4px rgba(40,44,63,.08);
margin-left: 80px;
margin-top: 80px;
margin-bottom: 20px;
}

.clientslide-content p{
color: #fff;
font-style: italic;
margin: 20px 0 0;
position: relative;
padding-bottom: 50px;
}

.clientslide-content p:before{
content: '';
position: absolute;
background: url(../img/quote.webp) no-repeat;
background-size: cover;
left: -40px;
top: -10px;
width: 32px;
height: 24px;
z-index: 1;
transform: rotate(180deg);
}

.clientslide-content p:after{
content: '';
position: absolute;
background: url(../img/quote.webp) no-repeat;
background-size: cover;
right: 0;
bottom: -24px;
width: 73px;
height: 60px;
z-index: 1;
}

.clientslide-content label{
display: block;
margin: 0;
font-weight: 500;
color: #fff;
font-size: 18px;
line-height: 1;
}

.clientslide-content span{
color: #fff;
font-size: 13px;
display: block;
}



.client-slider{
padding-bottom: 30px;
}

.client-slider .slick-dots {
text-align: center;
bottom: 0px;
margin: 0;
cursor: auto;
}

.client-slider .slick-dots button {
display: block;
width: 12px;
height: 12px;
padding: 0;
border: 2px solid #fff;
border-radius: 100%;
background-color: #fff;
margin: 0px!important;
}

.client-slider .slick-dots li {
height: 11px;
width: 12px;
margin: 0;
margin-right: 8px;
}

.client-slider .slick-dots li.slick-active button {
background-color: transparent;
border-color: #FFF500;
}

.client-slider .slick-dots li button:before{
display: none;
}

/*--------------------*/

.foot-banner{
background: url(../img/guchchi-buy.webp) no-repeat;
background-size: cover;
background-position: center;
padding: 110px 0px;
margin-top: 20px;
}

.foot-banner-box span{
color: #fff;
font-style: italic;
font-size: 12px;
line-height: 1.4;
display: block;
margin-bottom: 15px;
border-left: 3px solid #FFF500;
padding-left: 8px;
}

.foot-banner-box p{
color: #FFF500;
font-size: 17px;
letter-spacing: .5px;
margin-bottom: 5px;
}

.foot-banner-box .heading{
color: #fff;
margin-bottom: 20px;
}


/*--------------------*/

.footer-copyright{
background: #000;
text-align: center;
padding: 10px 15px;
}

.footer-copyright p{
margin: 0;
color: #fff;
font-size: 12px;
}

.footer-copyright p a{
color: #fff;
}

.footer-copyright p a:hover{
color: #FF8500;
}

.mobile-footimage{
display: none;
}


/*---------- popup ----------*/

.contact-popup .modal-content{
border: 0;
background: url(../img/contact-bg.webp) no-repeat;
background-size: cover;
background-position: center;
padding: 70px 30px 70px;
}

.contact-popup .modal-dialog {
max-width: 400px;
}

.contactpop-close {
border: 0;
background: none;
position: absolute;
top: 14px;
right: 20px;
outline: none;
padding: 0;
z-index: 1;
}

.contactpop-close .fa-xmark {
font-size: 20px;
color: #fff;
transition: all 0.2s ease;
}

.contactpop-close .fa-xmark:hover {
color: #FF8500 !important;
}

.contactpop-content .heading{
color: #fff;
font-size: 32px;
margin-bottom: 20px;
}

.contactpop-content form{
background: rgb(255 255 255 / 80%);
border-radius: 7px;
padding: 30px;
}

.contactpop-content form .form-field{
margin-bottom: 20px;
display: flex;
align-items: end;
}

.contactpop-content form .form-field span{
color: #000;
font-size: 14px;
margin-right: 5px;
line-height: 1;
}

.contactpop-content form .form-field input, .contactpop-content form .form-field select{
border: 0;
border-bottom: 1.9px dashed #000;
background: none;
outline: none;
box-shadow: none;
font-size: 14px;
}
.contactpop-content form .form-field select{
  width: 110px;
  cursor: pointer;
}

.contactpop-content form label{
color: #000;
font-size: 14px;
margin-bottom: 3px;
display: block;
}

.contactpop-content form textarea {
margin-bottom: 20px;
border: 0;
}

.contactpop-content form .form-control:focus {
box-shadow: none;
}



/*---------- popup ----------*/
.quantity {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quantity .button {
  background: linear-gradient(90deg, var(--c1, #FF8500), var(--c2, #CE3113) 51%, var(--c1, #FF8500)) var(--x, 100%)/ 200%;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 20px;
  width: 30px;
  height: auto;
  text-align: center;
  transition: background-color 0.2s;
}

.quantity .button:hover {
  background: linear-gradient(90deg, var(--c1, #FF8500), var(--c2, #CE3113) 51%, var(--c1, #FF8500)) var(--x, 100%)/ 200%;
}

.input-box {
  width: 40px;
  text-align: center;
  border: none;
  padding: 8px 10px;
  font-size: 16px;
  outline: none;
}


.faq-section {
  margin: 60px 0;
}
.faq-section .heading{
  text-align: center;
    margin-bottom: 20px;
}
.faq-section p{
  margin-bottom: 40px;
}
.faq-popup .modal-dialog {
max-width: 400px;
}

.faqpop-content{
padding: 50px 30px 30px;
}

.faqpop-content h4{
font-size: 28px;
margin-bottom: 10px;
}

.faq-popup .contactpop-close .fa-xmark {
color: #000;
}

.faqpop-content p a{
color: #000;
text-decoration: underline !important;
}

.faqpop-content p a:hover{
color: #FF8500;
}

.faq-vector{
position: absolute;
top: 0;
right: 0;
width: 140px;
z-index: 0;
}


/* .faq-accord{
height: 260px;
overflow-y: auto;
padding-right: 7px;
} */


.faq-accord::-webkit-scrollbar{
width: 3px;
background: #e8dfdf;
}

.faq-accord::-webkit-scrollbar-track{
-webkit-box-shadow: none;
}

.faq-accord::-webkit-scrollbar-thumb{
background-color: #ff85005e;
outline: none;
border-radius: 50px;
}



.faq-accord .card{
border: 0px;
background: none;
margin-bottom: 20px;
}

.faq-accord .card-header {
padding: 0px;
margin-bottom: 0;
background-color: transparent;
border-bottom: 0px;
}

.faq-accord .card-header button{
outline: none;
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
box-shadow: none;
padding: 10px;
border: 1px solid #000;
border-radius: 0px 0px 8px 8px;
background: #fff;
}

.faq-accord .card-header button span{
color: #000;
font-size: 14px;
text-align: left;
}

.faq-accord .card-header .fa-plus,
.faq-accord .card-header .fa-minus {
color: #000;
font-size: 10px;
margin-left: 5px;
}

.faq-accord .card-body{
padding: 0px 15px 15px;
background: #000;
}

.faq-accord .card-body p{
color: #fff;
margin: 0;
font-size: 13px;
}


.faq-accord .card-header button[aria-expanded="true"] {
background: #000;
border-radius: 8px 8px 0px 0px;
}

.faq-accord .card-header button[aria-expanded="true"] span {
color: #FFF500;
}

.faq-accord .card-header button[aria-expanded="true"] .fa-plus,
.faq-accord .card-header button[aria-expanded="true"] .fa-minus {
color: #FFF500;
}