*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family:'poppins',sans-serif;
    background:url('images/Background 4.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #b5b5b5;
;
}
.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;;
    margin-right: 20px;
    background: hwb(303 2% 23%); /* Background color for the boxes */
    padding: 10px 20px; /* Padding inside the boxes */
    border-radius: 5px; /* Rounded corners for the boxes */
}

a{
    text-decoration: none;
    color: rgb(241, 229, 229);
}
p{
    color:hsl(0, 65%, 5%);
}
.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: 50px 0;
}
.col-2 h1{
    font-size: 30px;
    line-height:60px;
    margin:25px 0;
    text-align: center;
}

.btn{
    display: inline-block ;
    background: #0e0707;
    color:#fff;
    padding:8px 30px;
    margin:30px 0;
    border-radius: 30px;
    transition: background 0.5s;
}

   

.header .row{

    margin-top: 70px;

}
.btn:hover{
    background:#563434;
}
.Categories{
   margin: 70px 0;

    
}
.col-3{
    flex-basis: 30%;
    min-width: 250px;
    margin-bottom:30px;
}
.col-3 img{
    width:100%;
    border-radius:100px ;
}
.small-container{
    max-width: 1080px;
    margin:auto;
    padding-left:25px;
    padding-right: 25px;
}
.small-container .row h2{
    padding-bottom: 25px;

}

.col-4{
    flex-basis: 25%;
    padding:10px;
    min-width:200px;
    margin-bottom: 50px;
    transition: transform 0.5s;
}
.small-container .row .col-4 img{
    width: 100%;
    height: 200px; /* Set your desired height */
    object-fit: cover; /* Ensures the image covers the entire area */
    border-radius: 8px; /* Optional: Adds rounded corners */
    
}
.small-container .row .col-3 img{
    width: 100%;
    height: 400px; /* Set your desired height */
    object-fit: cover; /* Ensures the image covers the entire area */
    border-radius: 8px; /* Optional: Adds rounded corners */
    
    
}
.small-container .row .col-4 h4{
    color: #0f0303;
}


.title{
    text-align:center;
    margin: 0 auto 80px;
    position: relative;
    line-height: 60px;
    color:hsl(0, 75%, 3%);


}
.title::after{
    content:'';
    background:#ff523b;
    width:80px;
    height: 5px;
    border-radius: 5px;
    position:absolute;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
}
.h4{
color:#cd0c8d;
font-weight: normal;
}
.col-4 p{
font-size: 14px;
}
.rating .fa{
    color: #0f0303;
}
.col-4:hover{
    transform: translateY(-5px);
}
.offer{
    
    margin-top: 80px;
    padding: 30px 30px;
    
    

}
.offer .col-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px; /* Adjust this value as needed for spacing */
}

.offer .col-2 p{
    text-align: center;
    margin-bottom: 20px; /* Add some space below the heading **/
}

.col-2 .offer-img{
    padding:50px;
    box-shadow:0 0 20px 0px rgba(227, 14, 14, 0.1);
  
}
.offer .btn {
    width: auto; /* Ensures the button width is auto and not stretched */
    align-self: flex-start; /* Aligns the button to the start */
    padding: 10px 20px; /* Adjust padding as needed */
    text-align: center; /* Center the button text */
    margin-top: 20px; /* Add some space above the button */
}
small{
    color:hwb(0 1% 95%);
   
}

.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);
}
.col-3 p{
    font-size: 12px;
    margin: 12px 0px;
}


.footer{
    background: #000;
    color:#8a8a8a;
    font-size: 14px;
    padding:  0 10px;
}
.footer p{
    color:#8a8a8a ;
}
.footer h3{
    color:#fff;
    margin-bottom: 20px;

}
.footer-col-1, .footer-col-2, .footer-col-3{
   min-width: 200px;
   margin-bottom: 10px;

}
.footer-col-1{
    flex-basis: 30%;
}
.footer-col-2{
    flex-basis: 1;
    text-align: center;
}
.footer-col-2 img{
    width:180px;
    margin-bottom: 20px;

}
 .footer-col-3{
    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: 10px;
 }
 .copyright{
    text-align: center;
 }
 .menu{
    width: 20px;
    margin-left: 20px;
    display:none;
 }

 /**All Products**/

 .row-2{
    justify-content:space-between ;
    margin:100px auto 50px;
 }

 select{
    border:1px solid #ff523b;
    padding: 5px;
 }

 select:focus{
    outline:none;
 }

 .page-btn{
    margin: 0 auto 80px;
 }
.page-btn span{
    display: inline-block;
    border: 1px solid #ff523b;
    margin-left:10px;
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
    cursor: pointer;

}
.page-btn span:hover{
    background:#ff523b ;
    color:#fff;
}
.single-product{
    margin-top: 80px;
}
.single-product .col-2 img{
    padding: 0;

}
.single-product .col-2{
    padding: 20px;
}
.single-product .col-2 h4{
    margin: 20px 0;
    font-size: 22px;
    font-weight:bold;
}


.single-product select{
    display:block;
    padding: 10px;
    margin-top: 20px;
}
.single-product input{
    width:50px;
    height:40px;
    padding-left: 10px;
    font-size: 20px;
    margin-right: 10px;
    border: 1px solid #ff523b;

}
input:focus{
    outline:none;
}
.small-img-row{
    display:flex;
    justify-content:space-between;
}
.small-img-col{
    flex-basis: 49%;
    cursor:pointer;
    display:flex;
}

.footer-col-3 ul {
    padding: 0;
    list-style: none;
}

.footer-col-3 ul li {
    margin-bottom: 10px;
}

.footer-col-3 ul li a {
    color: #8a8a8a;
    text-decoration: none;
    font-size: 14px;
}

.footer-col-3 ul li a:hover {
    color: #ff523b;
}

.footer-col-3 ul li a .fab {
    margin-right: 8px;
}

.footer-col-3 a[href*="facebook.com"] i  {
    color: #3b5998; /* Facebook blue */
}

.footer-col-3 a[href*="wa.me"] i  {
    color: #25D366; /* WhatsApp green */
}

.footer-col-3 ul li a.instagram .fab {
    color: #E1306C; /* Instagram pinkish */
}

.footer-col-3 ul li a.tiktok .fab {
    color: #010101; /* TikTok black */
}
/* Sliding text styles */
.sliding-text {
    position: relative;
    background-color:hwb(303 2% 23%) ;
    display: inline-block;
    color: white;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 10px;
    
}

/* Keyframes for the sliding effect */
@keyframes slide-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

 @media only screen and (max-width: 800px) {
    nav ul{
        position:absolute;
        top:70px;
        left:0;
        background: #333;
        width:100%;
        overflow: hidden;
        transition: max-height 0.5s;

    }
    nav ul li{
        display: block;
        margin-right:50px;
        margin-top: 10px;
        margin-bottom: 10px;;
    }
    nav ul li a{
        color:#fff;
    }
    .menu{
        display:block;
        cursor:pointer;
    }
 }


 /*------media query for less than 600-----*/
 @media only screen and (max-width: 600px){
    .row{
        text-align: center;

    }
    .col-2, .col-3, .col-4{
        flex-basis: 100%;

    }
    .single-product .row{
        text-align: left;
    
    }
    .single-product .col-2{
        padding: 20px 0;
    
    }
    .single-product h1{
        font-size: 26px;
        line-height:32px;
    
    }
    
    
    
 }