/* Add custom CSS styles below */
/* Animation Logo */ 
 .container .navbar-brand img {
   animation: growShrink 2s ease-in-out infinite;
 }
 @keyframes growShrink {
    0% {
        transform: scale(1);    
    }
    50% {
        transform: scale(1.2); 
    }
    100% {
        transform: scale(1); 
    }
}
/* hidden Email */
.s-contacts-topnav-link {
opacity: 0
}
.s-contacts-topnav-link:hover {
opacity: 0
}

/* Zoom Products In Position Hover */
 .s-product-card-image-cover {
     transition: transform 0.6s ease-in-out;   
}
.s-product-card-image-cover:hover {
    transform: scale(1.1);    
}
/* Background Buttons */
.s-button-element {
         background: linear-gradient(to right, #000000 20%, #D3D3D3 30%, #000000 70%, #D3D3D3 80%);
    background-size: 300% 100%;
    animation: moveBackground 8s ease-in-out infinite alternate;
    border: none;   
    color: #fff;  
    padding: 10px 20px; 
}  
@keyframes moveBackground {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}

@keyframes shake {
    0% {
    transform: rotate(0deg);
    }  
    80% {
    transform: rotate(0deg);
    }
    85% {
    transform: rotate(5deg);
    }
    95% {
    transform: rotate(-5deg);
    }
    100% {
    transform: rotate(0deg);
    }   
}
.phon{
height: 35px;
    width: 35px;
    position:fixed;
    bottom: 80px;
    right: 10px;
   background: #2ab947;
    border-radius: 100%;
    font-size: 10px ;
     display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
   z-index: 1000;
   
}
 path {
color: #fff !important;



}
.s-cart-summary-wrapper {
    animation: shake 2.5s infinite;  
}
.header-btn ,.icon {
   
   background: linear-gradient(to right, #000000 20%, #D3D3D3 30%, #000000 70%, #D3D3D3 80%);
         border-radius: 50%; 
         

         background-size: 400% 400%;

}
.s-product-card-content{
justify-content: center !important;
align-items: center !important;

}
.store-footer a{
position: relative;
    left: 0;

}
.store-footer a:hover{
left: 8px;
color: #ffea07;}
   



 

.swiper-horizontal{
 box-shadow: rgb(98, 98, 98) 5px 8px 8px;

}
.shadow-default{
      box-shadow: rgb(98, 98, 98) 5px 8px 8px;
}
/*cont1*/

.cont1{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.cont2{
    margin: 20px;
    background:#e6f7ff !important ;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}
.container2{
    position: relative;
    width: 1100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px;

}
.container2 .cards{
    position: relative;
    max-width: 300px;
    height: 200px;
    background-color: #fff;
    margin: 30px 10px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 20px rgba(0,0,0,.3);
    
    transition: all 0.3s ease;

}
.container2 .cards:hover{
    height: 420px;
}
.container2 .cards .imgs{
    position: relative;
    width: 200px;
    height: 300px !important;
    top: -60px;
   
    z-index: 1;
    transition: all .3s ease;
   
}
.container2 .cards .imgs img{
    border-radius: 4px;
    height: 205px;
   
    box-shadow: 0 5px 20px rgba(0,0,0,.3);
    

}
.container2 .cards .content2{
    position: relative;
    top: 5px;
    padding: 15px 5px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    color: #000;
    visibility: hidden;
    opacity: 0;
    transition: all .5s ease;
}
.container2 .cards:hover .content2{
    visibility: visible;
    opacity: 1;
    margin-top: -70px;
    transition: all 0.3s ease;
}

.banner img{
box-shadow: 0 5px 20px rgba(0,0,0,.5);


}
.bio{
    padding: 20px;
    border: 2px solid #000;
    border-top: 2px solid #c2c206;
    box-shadow: 2px 2px 10px #d7d7d7;
    border-radius: 5px;
    margin: 50px;
    }
.s-product-card-vertical{
padding: 20px;
    border: 2px solid #000;


}
.row{
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 5px 20px rgba(0,0,0,.3);
}
.col-6{
    width: 50%;
    padding: 15px;
    
     display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
}
.col-6 p{
transition: all .3s ease;
    text-decoration: none;
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}
.col-6  a {
 color: #c02a2a;
 transition: all .3s ease;
    text-decoration: none;
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}
h3 {
color:#efe70c;
}

.col-6 p:hover{
left: 8px;
    color:#efe70c;
    text-decoration: dashed;
    background: #2e2d2d80;
    border-radius: 10px;

}
.col-6 h1{
background: #efe70c;
    padding: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,.3);
    margin:20px;
    border-radius: 5px;
    font-size: 20px;
}
@media (max-width: 480px) {
    
    .col-6 { 
        width: 100%;
    }
    
    
}
[title="instagram"],[title="twitter"],
[title="snapshat"] , [title="tiktok"]
{
 transition: background 1s ease-in-out;
}
[title="instagram"]:hover {
background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}
[title="twitter"]:hover {
background-color: #1DA1F2;
}
[title="snapchat"]:hover {
background-color: #FFFC00;
}
[title="tiktok"]:hover {
background: linear-gradient(45deg, #FE2C55, #25F4EE);
}
.s-slider-prev:hover ,.s-slider-next:hover {
cursor: pointer;
background-color: #808080; 
} 
.header-btn__icon.sicon-user-circle::before ,
.icon::before 
{
   color: white;  
}
@media (min-width: 1024px) {
    .s-payments-list {
        margin-left: 40%;
    }
}  
@media (min-width: 768px) and (max-width: 1024px)  {
    .s-payments-list {
        margin-left: 30%;
    }
}