*{
    margin: 0;
    padding: 0;
   
}

.home{
   height: 20vh;
   width: 100%;
  
  
   display: flex;
   /* justify-content: center; */
   align-items: center;
   flex-direction: column;
}
.home>section{
    height: 180px;
    width: 85%;
    /*background-color: aliceblue;*/
}
section>header{
    height: 35%;
    width: 100%;
    background-color: rgba(20, 8, 8, 0.84);
    backdrop-filter: blur(3px);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
header>.header-item{
    display: flex;
    align-items: center;
    gap:10px;
    a{
        display: flex;
        gap: 10px;
        color: white;
        text-decoration: none;
        font-size: 1rem;
    }
}
section>nav{
    height: 65%;
    width: 100%;
    background-color:#8ec63f ;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
nav>.nav-item{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    a{
        text-decoration: none;
        color: white;
    }
    a:hover{
    transform: scale(1.1);
    transition: all .3 ease-in-out;
}
}
.bi{
    display: inline-block;
}
.bi:not(.bi:nth-child(5)) .bi{
    transform: rotate(180deg);
    transition: all .5s ease; 
}
.home-sec p{
    text-align: left;
    margin-left: 95px;
    display: flex;
}
.home-sec a{
   
    color: grey;
    font-size: 1rem;
    text-decoration: none;
    /* position: relative;
    top: -480px;
    left: 95px; */
    
}
.home-sec a:hover{
    color: black;
}
.home-sec>button{
    width: 120px;
    height: 40px;
    background-color: gold;
    color: white;
    border-radius: 3px;
    border: none;
    /* position: relative;
    top: -500px;
    left: 100px; */
}


.container{
    width:90%;
    margin:50px auto;
    display:flex;
    gap:40px;
}


.main-content{
    flex:3;
}


.sidebar{
    flex:1;
}


.product-top{
    display:flex;
    gap:40px;
    align-items:center;
}

.product-image img{
    width:300px;
    /* position: relative;
    top: -500px;
    left: 50px; */
} 
.product-info>.bi-search{
    font-size: 1rem;
    color: black;
    position: relative;
    top: 10px;
    left: -50px;
}

.product-info h1{
    font-size:40px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
}
.product-info p{
   
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.category{
    color:#7cb342;
   
}

.tabs{
    margin-top:40px;
    border-bottom:1px solid #ccc;
    /* position: relative;
    top: -500px; */
    
}

.tabs  a{
    padding:10px 20px;
    border:1px solid #ccc;
    background:#eee;
    cursor:pointer;
    text-decoration: none;
    background-color: whitesmoke;
    border-radius: 5px;
    color: black;
    /* position: relative;
    top: -11px;
    left: 35px;
    display: inline; */
}
.tabs a:hover{
    background-color:rgba(249, 217, 217, 0.272) ;
}

.tabs .active{
    background:white;
    border-bottom:1px solid white;
}

.description{
    margin-top:30px;
    /* position: relative;
    /* top: -500px;
    left: 30px; */
   
}

.description h2{
    font-size:35px;
    margin-bottom:20px;
}


.related{
    margin-top:60px;
    /* position: relative;
    top: -500px;
    left: 30px; */
}

.related h2{
    font-size:35px;
    margin-bottom:30px;
}

.related-grid{
    display:flex;
    gap:30px;
}

.card{
    background:white;
    padding:20px;
    text-align:center;
    border-radius:10px;
    border:1px solid #ddd;
    flex:1;
}

.card img{
    width:150px;
}

.card h3{
    margin:20px 0;
    color:#7cb342;
}

.card  a{
    background:#28a745;
    color:white;
    padding:10px 20px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    text-decoration: none;
}
.card a:hover{
    color: white;
    background-color: black;
}


.box{
    background:white;
    padding:25px;
    margin-bottom:30px;
    border:1px solid #8bc34a;
    /* position: relative;
    top: -450px; */
}

.box h3{
    /* margin-bottom:20px; */
    font-size:28px;
}

.search-box{
    display:flex;
}

.search-box input{
    flex:1;
    padding:10px;
    border:1px solid #ccc;
}

.search-box button{
    padding:10px 15px;
    border:1px solid #ccc;
    background:#ddd;
    cursor:pointer;
}

.box ul{
    list-style:none;
}

.box ul li{
    padding:10px 0;
    border-bottom:1px solid #ddd;
}
.container{
    width:85%;
    margin:40px auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:50px;
}

.main-content{
    width:70%;
}


@media(max-width:900px){
    .container{
        flex-direction:column;
    }

    .related-grid{
        flex-direction:column;
    }

    .product-top{
        flex-direction:column;
        text-align:center;
    }
}
.reviews-section{
    margin-top:40px;
 
    /* position: relative;
    top: -450px;
    left:30px; */
}

.reviews-section h2{
    font-size:40px;
    /* margin-top: -70px; */
}

/* .reviews-section h3{
    /* margin-top:30px;
    margin-bottom:10px; 
} */

.note{
    color:#555;
    margin-top:20px;
}

.review-form{
    display:flex;
    flex-direction:column;
}

.review-form label{
    margin:15px 0 5px;
    font-weight:500;
}

.review-form span{
    color:#7cb342;
}


.rating{
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
    margin-bottom:10px;
}

.rating input{
    display:none;
}

.rating label{
    font-size:28px;
    color:#ccc;
    cursor:pointer;
    transition:0.3s;
}

.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label{
    color:#7cb342;
}


.review-form textarea{
    height:70px;
    width: 92%;
    
    padding:10px;
    border:1px solid #ccc;
    resize:vertical;
}

.review-form input[type="text"],
.review-form input[type="email"]{
    padding:10
    

}
.review-form input{
    width: 95%;
    height: 60px;
}
.tabs a.active{
    background: white;
    border-bottom: 2px solid #7cb342;
    font-weight: bold;
}

.checkbox input{
    height: 15px;
    position: relative;
    top: 20px;
    left: -330px;

}
.checkbox label{
    margin-left: 20px;
}
.footer{
    background:#111;
    color:#ccc;
    padding:50px 80px;
    width:87%;
    /* margin-top:-400px; */
    
}
.submit-btn{
    width: 120px;
    height: 40px;
    background-color: #28a745;
    color: black;
    border-radius: 10px;
    border: white;
   
}
.submit-btn:hover{
    background-color: black;
    color: white;
}

.footer-container{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}


.footer-box{
    width:23%;
    min-width:220px;
    margin-bottom:20px;
}

.footer-box h3{
    color:#fff;
   
}

.footer-box p{
    font-size:14px;
    line-height:1.6;
}


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

.footer-box ul li{
    margin-bottom:10px;
    font-size:14px;
    cursor:pointer;
    transition:0.3s;
}

.footer-box ul li:hover{
    color:#f1c40f;
}


.buy-btn{
    background:#f1c40f;
    color:#000;
    padding:10px 20px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    font-weight:bold;
    transition:0.3s;
}

.buy-btn:hover{
    background:#ffdb4d;
}


.footer-bottom{
    text-align:center;
    border-top:1px solid #333;
    padding-top:15px;
    margin-top:30px;
    font-size:14px;
    color:#aaa;
}

.footer-bottom span{
    color:#f1c40f;
}


.icon-image a{
    color:gray;
    padding:10px;
    font-size:18px;
    text-decoration:none;
    transition:0.3s;
}

.icon-image a:hover{
    color:#f1c40f;
}


@media(max-width:768px){
    .footer-container{
        flex-direction:column;
    }
    .footer-box{
        width:100%;
    }
}

img{
    max-width:100%;
    height:auto;
}

body{
    overflow-x:hidden;
}

@media(max-width:1200px){

    .product-image img{
        position: static !important;
        width: 250px;
        margin: 20px auto;
        display: block;
    }

    .product-info h1{
        margin-top: 0 !important;
        margin-left: 0 !important;
        text-align: center;
    }

    .product-info p{
        margin-left: 0 !important;
        text-align: center;
    }

    .tabs,
    .description,
    .related,
    .reviews-section,
    .box{
        position: static !important;
        top: 0 !important;
    }

    .home-sec a{
        position: static !important;
        display: block;
        margin: 20px;
    }

}

@media(max-width:992px){

    .container{
        flex-direction: column !important;
    }

    .product-top{
        flex-direction: column !important;
        text-align: center;
    }

    .sidebar{
        width:100%;
    }

    .related-grid{
        flex-direction: column !important;
    }

    .card{
        width:100%;
        
    }

    section>header{
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 10px 0;
    }

    section>nav{
        flex-direction: column;
        height: auto;
        padding: 10px 0;
    }

    nav>.nav-item{
        width:100%;
        flex-wrap: wrap;
        gap: 10px;
    }

}

@media(max-width:576px){

    .home{
        height: auto;
        padding-bottom: 40px;
    }

    .product-info h1{
        font-size: 28px;
    }

    .description h2,
    .related h2,
    .reviews-section h2{
        font-size: 24px;
    }

    .card img{
        width:120px;
    }

    .box{
        padding:15px;
    }

    .review-form textarea{
        height:80px;
    }

    .submit-btn{
        width:100%;
    }

    .footer{
        width:100% !important;
        padding:30px 20px;
    }

    .footer-container{
        flex-direction: column;
    }

    .footer-box{
        width:100%;
    }

}