@font-face {
font-family: myfont;
src: url(../fonts/400.woff);
font-weight:400;
}
@font-face {
font-family: myfont;
src: url(../fonts/500.woff);
font-weight:500;
}
html{
box-sizing: border-box	
}
body{
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: scroll;
font-family: myfont;
font-weight:400;
color: #353b48;
margin-top: 143px;
background-color:#f8f8ff;
letter-spacing:-0.3px;
}
section{
position:relative;
}
a, a *{
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
text-decoration:none;
box-sizing: border-box;
}
a:hover{
text-decoration:none;
}
button:focus, input:focus, textarea:focus{
outline:none;
box-shadow:none;
}
img{
width:100%;
}
input, button{
outline:none;
box-shadow:none;
}
p{
margin: 0;
padding: 0;
font-size: 18px;
line-height: 27px;
color:#353b48;
}
p.center{
text-align:center;
}
b{
}
h1, h2, h3{
margin:0;
font-weight:500;
}
h4, h5, h6{
margin:0;
font-weight:400;
}
ul, ul li{
list-style:none;
margin:0;
padding:0;
}
.btn-dif {
    background-color: #b71540;
}
.text-dif {
    color: #32324e;
}
.topstrip {
    background-color: #b71540;
}
.topstrip span {
    background: radial-gradient(circle at 100%, #e58e26, #ffffff 50%, #e58e26 75%, #ffffff 75%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animatedTextGradient 5s linear infinite;
}
.title.white, .subtitle.white{
color:#fff;
}
.title.center, .subtitle.center{
text-align:center;
}
.title{
font-size: 50px;
color: #32324e;
line-height: 60px;
}
.title.small{
font-size: 25px;
font-weight: 400;
}
.subtitle{
font-size: 18px;
font-weight: 400;
margin-bottom:10px;
color: #777885;
margin-top:5px;
}
.col-30{
width:30%;
}
.col-50{
width:50%;
}
.col-45{
width:45%;
}
.banner {
height: 600px;
margin-bottom: -1px;
background-image: url(../img/banner.jpg);
background-position: center right;
}
.banner .container{
z-index:1;
}
.banner .container .col-50{
text-align: center;
}
.banner h4{
margin: 20px auto;
width: 70%;
font-size: 19px;
}
.banner h1{
font-size: 50px;
margin-top:40px;
font-weight: 500;
}
.banner-brand{
width: 150px;	
}
.banner .bannerimg{
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: auto;
height: 600px;	
}
.banner .btn{
margin:0px auto;
}
.banner .cover{
display: table;
background-color: #ffffffe3;
width: 75%;
padding: 40px 0px;
border-radius: 10px;
backdrop-filter: blur(20px);
box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
border: dashed 2px #b7154054;
}
.intro{
padding:100px 0px;
background-color:#fff;
}
.intro h2{
margin-bottom:30px;
}
.intro h6{
}
.colors{
padding:70px 0px;
}
ul.pallete{
margin-top:50px;
justify-content: space-evenly;
}
ul.pallete li {}
ul.pallete li b {
display: block;
width: 56px;
height: 56px;
box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
border-radius: 5px;
}
ul.pallete li span{
display:block;
text-align:center;	
padding-top:10px;
}
.sws{
padding:80px 0px;
}
.sws .item{
padding:20px;
text-align:center;
}
.sws .item .thumb{
height:400px;
margin-bottom:20px;
}
.sws .item .thumb img {
display: none;
width:auto;
height:370px;
}
.sws .item .thumb img.active {
display: block;
}
.sws .item p{
font-size: 17px;
}
.cls{
padding-bottom:80px;
}
.cls .container.flex{
gap:20px;
flex-wrap:wrap;
margin-top:50px;
}
.cls .item{
width: 23%;
padding-bottom: 30px;
border-radius: 10px;
overflow:hidden;
background-color:#fff;
}
.cls .item.bs{
border:0;
}
.cls .item.bs:after{
content: 'Best selling';
width: max-content;
margin: 5px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
padding: 5px 10px 5px 10px;
border-radius: 10px;
background-color: #fff;
background-repeat: no-repeat;
background-size: 16px;
background-position: 10% 50%;
padding-left: 35px;
font-size: 16px;
color: #b71540;
background-color: #fdeeef;
}
.cls .item.bs.men:after{
background-image: url(../img/men.png);	
}
.cls .item.bs.women:after{
background-image: url(../img/women.png);		
}
.cls .item svg {
position: absolute;
inset: 0;
width: 99%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
filter: blur(0.8px);
}
.cls .item rect {
fill: none;
stroke: #b71540;
stroke-width: 0.5px;
stroke-dasharray: 1;
stroke-dashoffset: 0;
animation: strokeMove 5s linear infinite;
}
@keyframes strokeMove {
to {
stroke-dashoffset: -40;
}
}
.cls .item .figure{
height: 300px;
background-color:#fff;
overflow:hidden;
}
.cls .item img{
width: auto;
height: auto;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
max-width: 80%;
max-height: 75%;
}
.cls .item p{
text-align: center;
margin-top: 20px;
padding: 0px 20px;
font-size: 16px;
line-height: 20px;
}
.cls .item:hover img{
transform:scale(1.1);
}
footer{
background-color:#e2e3f8;
padding:100px 0px;
}
footer .footer-ph{
color: #01243a;
font-weight: 500;
font-size: 22px;
}
footer .footer-ph img{
width:30px;
margin-right:10px;
position:relative;
top:5px;
}
footer p.hilight{
margin-top: 30px;
width: 62%;
line-height: 29px;
}
footer .links{
margin-left: 20%;	
}
footer .link-title{
font-weight: 400;
font-size: 18px;
margin-bottom: 30px;	
}
footer .links a{
display: block;
color: inherit;
font-size: 15px;
line-height: 34px;
}
footer .links a:hover{
color: #660f53;	
}
footer .end{}
footer .end .container{
border-top: solid 1px #c9cae9;
margin-top: 50px;
padding-top: 50px;	
}
footer .end p{
font-size:13px;
}
footer .end .connect{
gap:10px;
}
footer .end .connect a{
width: 38px;
background-color: #fff;
border-radius: 50px;
height: 38px;
padding: 7px;	
filter:grayscale(0.3);
}
footer .end .connect a img{
opacity:0.8;
}
footer .end .connect a:hover{
background-color: #ffe8f2;	
}