*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
}
.btn1{
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
    font-family: monospace;
    font-weight: 800;
    color: #fff; 
    padding: 8px 30px;
    margin: 30px 0;
    border-radius: 30px;
    transition: background 0.3s;
}
.btn1:hover{
    font-family: 'Stick';
    color:#fff;
    background: #999;
}
.logo h6{
    font-family: 'Stick',sans-serif;
    font-size:38px;
    /* text-shadow: #fff; */

	text-transform:uppercase;

	padding:0;
	margin:0;

	position:absolute;
	margin-top: -130px;
	margin-left: 150px;

	transform:translate(-50%,-50%);

}
.navbar{
    display: flex;
    align-items: center;
    padding: 20px;
}
nav{
    flex: 1;
    text-align: right;
}
nav ul{
    display: inline-block;
    list-style-type: none;
}
nav ul li{
    display: inline-block;
    margin-right:20px;
}
a{
    text-decoration: none;
    color: #f0f0ff;
    font-size: 23px;
}
p{
    color: #000;
    font-family: monospace;
}
.container{
    max-width: 1300px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}
.row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}
.col-2{
    flex-basis: 50%;
    min-width: 300px;
}
.col-2 img{

    max-width:100%;
    padding: 5px 0;
}
.col-2 h1{
    font-size: 50px ;
    line-height: 60px;
    margin: 25px 0;
}
.btn{
    display: inline-block;
    background: #08c0d8;
    color: #fff;
    padding: 8px 30px;
    margin: 30px 0;
    border-radius: 30px;
    transition:  background 0.5s;
}
.btn:hover{
    background: #563434;
}
.header{
    /* background: radial-gradient(#fff,#ffd6d6); */
    background: #000;
}
.header .row{
    margin-top: 70px;
}
/* catagories */
.categories{
    margin: 70px 0;
}
.col-3{
    flex-basis: 30px ;
    min-width:  250px;
    margin-bottom: 30px;
}
.col-3 img{
    width: 100% ;
}
.small-container{
    max-width: 600px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px ;
}
/* featured products */
.col-4{
     flex-basis: 25%;
     padding: 10px;
     min-width: 200px;
     margin-bottom: 50px;
     transition:  transform 0.5s;
}
.col-4 img{
    width: 100% ;
}
.title{
    text-align: center;
    margin: 0 auto 80px;
    position: relative;
    line-height: 60px;
    color: #555; 
}
.title::after{
    content: '';
    background:  #ff523b ;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
h4{
    color: #555;
    font-weight: normal;
    font-size: 18px;
}
.col-4 p{
    font-size: 14px;
}
.rating .fa{
     color: #ff523b ;
}
.col-4:hover{
    transform: translateY(-5px);
}
/* offer  */
.offer{
    background: radial-gradient(#fff,#ffd6d6);
    margin-top: 80px;
    padding: 30px 0;
}
.col-2 .offer-img{
    padding: 50px;
}
small{
    color: #555;
}
/* --------------testimonial------------------ */
.testimonial{
     padding-top: 100px;
}
.testimonial .col-3{
    text-align: center;
    padding:40px 20px;
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.5s;
}
.testimonial .col-3 img{
    width: 50px;
    margin-top: 20px;
    border-radius: 50%;
}
.testimonial .col-3:hover{
    transform: translateY(-10px);
}
.fa.fa-quote-left{
    font-size: 34px;
    color: #ff523b;
}
.col-3 p{
    font-size: 12px;
    margin: 12px 0;
    color: #777;
}
.testimonial .col-3 h3{
    font-weight: 600;
    color: #555;
    font-size: 16px;
}
/* brands */
.brands{
     margin: 100px auto;
}
.col-5{
     width: 160px;
}
.col-5 img{
    width: 100%;
    cursor: pointer;
    filter: grayscale(100%);
}
.col-5 img:hover{
    filter: grayscale(0 );
}
/* footer */

.footer{
    background: #000;
    color: #8a8a8a;
    font-size: 14px;
    padding: 60px 0 20px;
}
.footer p{
    color: #8a8a8a;
}
.footer h3{
    color: #fff;
    margin-bottom: 20px;
}
.footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4{
    min-width: 250px;
    margin-bottom: 20px;
}
.footer-col-1{
    flex-basis: 30%;
}
.footer-col-2{
    flex: 1;
    text-align: center;
}
.footer-col-2 img{
    width: 180px;
    margin-bottom: 20px;
}
.footer-col-3, .footer-col-4{
    flex-basis: 12%;
    text-align: center;
}
ul{
    list-style-type: none ;
}
.app-logo{
    margin-top: 20px;
}
.app-logo img{
    width: 140px;
}
.footer hr{
    border: none;
    background: #b5b5b5;
    height: 1px;
    margin: 20px 0;
}
.copyright{
    text-align: center;
}
/* menu icon responsive */
.menu-icon{
    width: 28px ;
    margin-left: 20px;
    display:none;
}
/* media query for menu */
/* @media only screen and (max-width: 800px){
    nav ul{
        position: absolute;
        top: 70px;
        left: 0;
        background: #333;
        width: 100%;
        overflow: hidden;
        transition: maxh-height 0.5s;
    }
    nav ul li{
        display: block;
        margin-right: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    nav ul li a{
        color: #fff;
    }
    .menu-icon{
        display: block;
        cursor: pointer;
    }
} */

.footer-col-1{
	display: flex;	
	text-align: center;
}
.icon{
	width: 90px;
	height: 90px;
	background-color: #f1f1f1;
	color:#08c0d8;
	border-radius: 30%;
	box-shadow: 0 3px 10px rgba(0,0,0,0.5);

	margin: 10px;
    margin-left: auto;
   

	position: relative;

	overflow: hidden;
}

.icon i{
	font-size: 25px;
	line-height: 90px;
	transition: all 0.2s;

}

.icon:hover i{
	transform: scale(1.3);
	color:#f1f1f1;
}

.icon::before{
	content: '';
	width: 130%;
	height: 130%;
	background-color: #08c0d8;

	position: absolute;
	top: 90%;
	left: -120%;

	transform: rotate(45deg);
}

.icon:hover::before{
	/*animation: myani 0.7s 1 forwards;*/
	animation-name: myani;
	animation-duration: 0.7s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes myani{
	0%{
		top: 90%;
		left: -120%;
	}
	50%{
		top:-30%;
		left:9%;
	}
	100%{
		top:-10%;
		left: -15%;
	}
}


.krex-footer ul{
    list-style-type: none;
    padding: 0;
    margin: 0;

    display: flex;
}
.krex-footer ul li{
    color:#484848;
    font-family: 'Stick';
    font-size: 80px;
    letter-spacing: 15px;

    animation:myani1 1s linear infinite;
}
@keyframes myani1{
    0%{
        color:#484848;
        text-shadow: none;
    }
    30%{
        color:#484848;
        text-shadow: none;
    }
    60%{
        color:#484848;
        text-shadow: none;
    }
    90%{
        color:#484848;
        text-shadow: none;
    }


    100%{
        color: #fff;
        text-shadow: 0 0 7px #fff,0 0 50px red;
    }
}

ul li:nth-child(1){
    animation-delay: 0s;
}
u li:nth-child(2){
    animation-delay: 0.1s;
}
ul li:nth-child(3){
    animation-delay: 0.2s;
}
u li:nth-child(4){
    animation-delay: 0.3s;
}
ul li:nth-child(5){
    animation-delay: 0.4s;
}
u li:nth-child(6){
    animation-delay: 0.5s;
}
ul li:nth-child(7){
    animation-delay: 0.6s;
}
u li:nth-child(8){
    animation-delay: 0.7s;
}
ul li:nth-child(9){
    animation-delay: 0.8s;
}
u li:nth-child(10){
    animation-delay: 0.9s;
}
ul li:nth-child(11){
    animation-delay: 1.0s;
}
u li:nth-child(12){
    animation-delay: 1.1s;
}
ul li:nth-child(13){
    animation-delay: 1.2s;
}
p7{
   font-family: monospace;
    font-size: 20px;
    font-weight: 400;
    color:#fff;   
    margin-left: 30px;
}
p8{
    font-family: 'Stick';
    font-size: 23px;
}
p9{
    font-family: 'Stick';
    font-size: 18px;
}
p10{
    font-family: monospace;
    font-size: 20px;
    font-weight: bold;
    color: darkgray;
    text-decoration: line-through;

}
p11{
    font-family: monospace;
    font-size: 20px;
    font-weight: bold;
    color: green;
    text-decoration:none;
}
b{
    font-size: 20px;
}