/*-------------global setting-----------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --green : #87a243;
    --light-green: #e0ffcd;
    --box-shadow: 0 0 10px rgb(0 0 0/15%);
}
html{
    font-size: 16px;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
    font-family: sans-serif;
    --ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body{
    background-image: url(./img/body-bg.jpg);
    width: 100%;
}
.main{
    width: 85vw;
    background: #fff;
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
    margin: 1rem auto;
    margin-top: 10rem;
    padding: 2%;   
}
a{
    text-decoration: none;
}
.title{
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    margin: 1rem 0;
    line-height: 2;
}
.title p{
    text-transform: capitalize;
}
.title .logo{
    width: 80px;
}
ul{
    list-style: none;
}
sup{
    position: absolute;
    top: 15%;
    background: #000;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 15px;
    text-align: center;
    padding: .1rem;
}
.empty{
    text-align: center;
    text-transform: capitalize;
    margin: 0 auto;
    margin-bottom: 2rem;
    width: 59%;
    padding: .5rem 1.5rem;
    border-radius: 5px;
    background: var(--light-green);
    color: var(--green);
    border: 1px solid var(--green);
}
.btn{
    line-height: 2;
    background-color: #e0ffcd;
    padding: 5px 35px;
    display: inline-block;
    border-radius: 30px;
    color: #000;
    text-transform: capitalize;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    vertical-align: middle;
    transition: color 0.3s ease;
    z-index: 2;
}
.btn::before{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    background: var(--green);
    height: 100%;
    width: 0;
    z-index: -1;
    transition: width 0.3s ease;
}
.btn:hover::before{
    width: 100%;
}
.label1{
    text-transform: capitalize;
}
input,
textarea{
    background: #fff;
    border: none;
    padding: .6rem;
    outline: none;
    box-shadow: var(--box-shadow);
    margin: .5rem 0;
    border: 1px solid var(--green);
    width: 100%;
}
button{
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}
.banner{
    background-image: url(./img/banner.jpg);
    background-size: cover;
    background-position: center;
    background-color: var(--green);
    width: 100%;
    height: 50vh;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner h1{
    text-transform: uppercase;
    color: #fff;
    margin-left: 3rem;
}
.grass{
    background-image: url(./img/image.jpg);
    background-size: cover;
    background-position: center;
    background-color: var(--green);
    width: 100%;
    height: 85vh;
    text-align: center;
    justify-content: center;
    align-items: center;
    
    
}
.grass h1{
    padding-top: 5rem;
    text-transform: uppercase;
    color: #fff;
    margin-left: 3rem;
    font-size: 3rem;
    
}
.grass h2{
    padding-top: 10rem;
    text-transform: uppercase;
    color: #fff;
    margin-left: 3rem;
    font-size: 2rem;
    
}
.grass p{
    margin-top: 3rem;
    color: #fff;
    margin-left: 3rem;
    font-size: 20px;
    
}

.plants{
    background-image: url(./img/plants.png);
    background-size: cover;
    background-position: center;
    background-color: var(--green);
    width: 100%;
    height: 75vh;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.plants h1{
    text-transform: uppercase;
    color: #fff;
    margin-left: 3rem;
}

.content{
    text-align: center;
}

.content h1{
    font-size: 50px;
    color: #fff;
    margin-bottom: 50px;
}

.content a{
    font-size: 23px;
    color: #000;
    background-color: #fff;
    text-decoration: none;
    border: 2px solid #000;
    padding: 15px 25px;
    border-radius: 50px;
    transition: 0.3s;
}

.content a:hover{
    background-color: #abf7ad;
    color: #000;
}

.title2{
    border-top: 1px solid var(--green);
    padding: 3rem 2rem;
    text-transform: uppercase;
    box-shadow: var(--box-shadow);
}
.title2 a{
    color: var(--green);
}

/*-----------------header---------------*/

.header{
    position: fixed;
    top: 5%;
    left: 7%;
    width: 85vw;
    padding: 1rem;
    z-index: 101;
    transition: .3s;
    box-shadow: var(--box-shadow);
    background-image: url('./img/body-bg.jpg');

}
.header.scrolled{
    top: 0;
    box-shadow: 0 5px 20px 0.1px rgba(0, 0, 0, 0.1);
    
}
.header .scrolled a:hover{
    color: var(--green);
}
.flex{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 0 auto;
}
.navbar a{
    margin: 0 1rem;
    font-size: 1rem;
    color: #000;
    text-transform: uppercase;

}
.navbar a:hover{
    color: var(--green);
}
.header .icons{
    display: flex;
}
.header .icons i{
    margin-left: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: #000!important;
}
#menu-btn{
    display: none;
}
.header .user-box{
    position: absolute;
    top: 120%;
    right: 0;
    box-shadow: rgb(255, 255, 255/80%);
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    padding: 1rem;
    text-align: center;
    width: 20rem;
    transform: scale(0);
    transform-origin: top right;
    line-height: 2;
}
.header .user-box .btn{
    border-radius: .5rem;
    padding: 0 1.5rem;
}
.logout-btn{
    background: #000;
    color: #fff;
    text-transform: uppercase;
    width: 11rem;
    border-radius: .5rem;
    margin: .5rem 0;
    padding: .5rem 0;
}
.header .user-box.active{
    transform: scale(1.0);
    transition: .2s linear;
}

/*---------home slider-------------------*/

.home-section{
    position: relative;
    margin-bottom: 2rem;
    
}
.slider{
    font-family: "Roboto", sans-serif;
    max-height: 80vh;
    width: 100%;
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
}
.slider__slider{
    height: 80vh;
    min-width: 100vw;
    width: 100%;
    scroll-snap-align: start;
    background-position: center center;
    background-size: cover;
    position: relative;
}
.slider__slider .slider-detail{
    position: absolute;
    top: 30%;
    left: 23%;
    text-align: center;
}
.slider__slider .slider-detail h1{
    font-size: 30px;
    color: #fff;
    text-transform: uppercase;
    position: relative;
}
.slider__slider .slider-detail h1::before{
    position: absolute;
    content: '';
    background: #e2e2e244;
    width: 380px;
    height: 1px;
    bottom: -40%;
    left: 20%;
}
.slider__slider .slider-detail h1::after{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    bottom: -50%;
    left: 50%;
    background: #f7b90f;
}
.slider__slider .slider-detail p{
    font-size: 1.5rem;
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.slider1{
    background-image: url('./img/slider.jpg');
    
}
.slider2{
    background-image: url('./img/1.png');
}
.slider3{
    background-image: url('./img/9.jpg');
}
.slider4{
    background-image: url('./img/0.webp');
}
.slider5{
    background-image: url('./img/4.jpg');
}
.left-arrow,
.right-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: var(--light-green);
    box-shadow: 0 0 0 6px rgb(255 255 255 / 40%);
    z-index: 2;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #000;
}
.right-arrow{
    right: 1rem;
}
.left-arrow{
    left: 1rem;
}
.hero-dec-top,
.hero-dec-bottom{
    position: absolute;
    left: 5%;
    width: 100px;
    height: 100px;
}
.hero-dec-top{
    top: 4%;
    border-left: 2px solid #e2e2e255;
    border-top: 2px solid #e2e2e255;
}
.hero-dec-bottom{
    bottom: 5%;
    border-left: 2px solid #e2e2e255;
    border-bottom: 2px solid #e2e2e255;
}
.thumb{
    max-width: 1200px;
    box-shadow: var(--box-shadow);
    margin: 2rem auto;
    padding: 2%;
}
.box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.thumb .box-container .box{
    text-align: center;
    margin: 1rem;
    line-height: 1.5;
    background: #fff;
    padding-bottom: 1rem;
    color: gray;
}
.thumb .box-container .box img{
    transition: all 800ms ease-in-out;
}
.thumb .box-container .box:hover img{
    transform: rotateY(180deg);
}
.thumb .box-container .box h3{
    text-transform: capitalize;
    color: var(--green);
}
.box-container .box p{
    color: #555;
    margin: .5rem;
}
.thumb .box-container .box i{
    color: var(--green);
    font-size: 40px;
    line-height: 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid var(--green);
    cursor: pointer;
}
.container .box{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container .box span{
    color: var(--green);
    font-size: 2rem;
    margin: 1rem 0;
    text-transform: capitalize;
    font-style: italic;
    font-weight: bold;
}
.container .box h1{
    font-size: 3rem;
    margin-bottom: 1rem;
}
.shop{
    background-image: url('img/bg.jpg');
    margin: 2rem 0;
    padding: 2rem 1rem;
}
.shop .row{
    display: flex;
    justify-content: space-evenly;
}
.shop .row .top-footer{
    margin-top: 2rem;
    text-align: center!important;
    text-transform: capitalize;
    font-size: 1.5vw;
    padding: 3rem 1rem;
}
.shop .box-container{
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
}
.shop .box-container .box{
    margin: 1rem;
    box-shadow: var(--box-shadow);
    position: relative;
    background-color: #fff;
}
.shop .box-container img{
    width: 100%;
}
.shop .btn{
    position: absolute;
    left: 30%;
    bottom: -3%;
}
.shop-category .box{
    position: relative;
    color: #fff;
    margin-bottom: 2rem;
}
.shop-category .detail{
    position: absolute;
    top: 20%;
    left: 5%;
    line-height: 2;
    text-align: center;
}
.shop-category .detail h1{
    font-size: 2em;
}
.shop-category .detail span{
    font-size: 1.3rem;
}

.services{
    padding: 3rem 0;
    text-align: center;
    background-image: url(./img/bg.jpg);
    line-height: 2;
    margin: 3rem 0;
}
.services h3{
    text-transform: capitalize;
    color: var(--green);
}
.services img{
    width: 30%;
}
.brand{
    margin: 2rem auto;
    text-align: center;
}

/*------------------search product-------------------*/

.search-form form{
    max-width: 1200px;
    margin:0 auto;
    display: flex;
    height: 5rem;
    gap:2rem;
    font-size: 1rem;
 }
 
 .search-form form .btn{
    margin-top: 15;
    width: 10rem;
    height: 3rem;
 }
 
 .search-form form .box{
    width: 100%;
    padding:1.2rem 1.4rem;
    border:var(--border);
    font-size: 2rem;
    color:var(--black);
    background-color: var(--light-bg);
    border-radius: .5rem;
 }
 

/*---------About-------------------*/

.about-category{
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    margin: 2rem auto;
}
.about-category .box{
    position: relative;
    margin: 1rem;
    box-shadow: var(--box-shadow);
}
.about-category .box1{
    position: relative;
    margin: 1rem;
    box-shadow: var(--box-shadow);
}
.about-category .box img{
    width: 60%;
    margin-bottom: 3.5rem;
    
}
.about-category .box:nth-child(3) img{
    width: 75%;
}
.about-category .box1 img{
    width: 100%;
    
}
.about-category .box1:nth-child(3) img{
    width: 100%;
}

.about-category .box .detail h1{
    position: absolute;
    top: 30%;
    right: 10%;
    
}
.about-category .box .detail p{
    position: absolute;
    top: 80%;
    left: 5%;
    font-size: 20px;

    
    
}
.about-category .box .detail .btn{
    opacity: .6;
}


.about .row{
    display: flex;
    justify-content: center;
    align-items: center;
}
.about .row .detail{
    width: 50%;
    margin: 1rem;
    line-height: 1.5;
    text-align: center;
}
.about .row .detail p{
    margin-bottom: 2rem;
    font-size: 1.2rem;
}
.about .row .img-box{
    width: 50%;
}
.about .row .detail h1{
    text-align: center;
    margin: 1rem 0;
}


.about1 .row{
    display: flex;
    justify-content: center;
    align-items: center;
}
.about1 .row .detail{
    width: 50%;
    margin: 1rem;
    line-height: 1.5;
    text-align: center;
}
.about1 .row .detail p{
    margin-bottom: 2rem;
    font-size: 1.2rem;
}
.about1 .row .detail1 p{
    margin-bottom: 2rem;
    font-size: 1.2rem;
}
.about1 .row .img-box{
    width: 50%;
}
.about1 .row .detail h1{
    text-align: center;
    margin: 1rem 0;
}

.about1 .row .img-box1{
    width: 30%;
    
}

.about1 .row .detail1{
    width: 50%;
    margin: 1rem;
    line-height: 1.5;
    text-align: center;
    
}


.testimonial-container{
    padding: 6% 0;
    background-image: url(./img/bg.jpg);
}
.testimonial-container .container{
    position: relative;
    perspective: 1000;
    padding-top: 2rem;
}
.testimonial-container .container .testimonial-item{
    border-radius: 5px;
    box-shadow: var(--box-shadow);
    color: grey;
    width: 50vw;
    margin: 0 auto;
    text-align: center;
    display: none;
    padding: 1rem;
    transform-style: preserve-3d;
    animation: slide .4s linear;
}
@keyframes slide{
    0%{
        transform: rotateX('180deg');
    }
}
.testimonial-container .container .testimonial-item > *{
    animation: slideContent .2s linear .4s backwards;
}
@keyframes slideContent{
    0%{
        transform: scale(.5);
        opacity: 0;
    }
}

.testimonial-container .container .testimonial-item.active{
    display: block;
}
.testimonial-container .container .testimonial-item h1{
    color: var(--green);
    font-size: 1.3rem;
    padding-bottom: .5rem;
    text-transform: capitalize;
}
.testimonial-container .container .testimonial-item img{
    padding: 1rem 0;
    border-radius: 50%;
}
.testimonial-container .container .left-arrow,
.testimonial-container .container .right-arrow{
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    font-size: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    box-shadow: var(--box-shadow);
    background: var(--green);
    z-index: 2;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.testimonial-container .container .right-arrow{
    right: 3rem;
}
.testimonial-container .container .left-arrow{
    left: 3rem;
}


/*---------contact-------------------*/

.main-container{
    background: #fff;
    width: 60vw;
    min-width: 80vh;
    box-shadow: var(--box-shadow);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;
    padding: 1rem 0;
}
.form-container{
    width: 50vw;
    margin: 0 auto;
}
.form-container input,
textarea{
    background-color: transparent;
    width: 85%;
}
textarea{
    height: 200px;
}
.form-container p{
    color: var(--green);
}
.form-container sub{
    color: red;
    font-size: 1.6rem;
    
}
.main-container input[type=submit]{
    color: #000!important;
    cursor: pointer;
}
.form-container form{
    margin: 1rem auto;
    background-color: rgb(255 255 255 / 80%);
    box-shadow: var(--box-shadow);
    padding: 2rem;
    position: relative;
    border-radius: 5px;
}
.form-container form p{
    text-transform: uppercase;
}
.form-container form input{
    width: 85%;
}
.form-container form button{
    width: 85%;
    border-radius: 10px;
    outline: none;
}


.address{
    background-image: url(./img/bg.jpg);
    padding: 4rem 0;
    min-height: 50vh;
}
.address .box-container{
    justify-content: center;
    align-items: center;
}
.address .box-container .box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem;
    box-shadow: var(--box-shadow);
    line-height: 2;
    padding: 1rem 0;
}
.address .box-container .box h4{
    text-transform: uppercase;
    color: var(--green);
}
.address .box-container .box i{
    font-size: 1.5rem;
    margin-right: 1rem;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--green);
    color: #fff;
}


/*---------footer-------------------*/

.top-footer{
    width: 100%;
    background: var(--green);padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}
.top-footer h2 i{
    margin-right: .5rem;
}
.top-footer input{
    width: 40vw;
    border-radius: 5px;
}
footer{
    background-image: url('img/0.webp');
    width: 100%;
    min-height: 65vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}
footer .overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.5;
}
.footer-content{
    position: absolute;
    top: 10%;
}
.footer-content .img-box{
    text-align: center;
    
}
footer .inner-footer{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1rem;
    color: #fff;
    
}
footer .inner-footer .card{
    margin: .5rem;
}
footer .inner-footer .card li{
    cursor: pointer;
    line-height: 1.5rem;
    text-transform: capitalize;
    font-size: 16px;
}
footer .inner-footer .card li:nth-child(1),
footer .inner-footer .card p{
    margin-top: 1rem;
}
footer .inner-footer .card h3{
    text-transform: uppercase;
}
footer .inner-footer .card p{
    margin-bottom: 1rem;
    font-size: 16px;
}
footer .inner-footer .card .social-links{
    margin-top: 1rem;
}
footer .inner-footer .card .social-links i{
    width: 50px;
    height: 50px;
    line-height: 30px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--box-shadow);
    text-align: center;
    color: var(--green);
    cursor: pointer;
    padding: .6rem;
    font-size: 1.3rem;
}
footer .inner-footer .card .social-links i:hover{
    background: var(--green);
    color: #fff;
}
footer .bottom-footer {
    text-transform: capitalize;
    text-align: center;
    padding: 3rem 0;
    color: #fff;
    padding-bottom: 1rem;
}

/*--------product--------------*/

.products .box-container{
    grid-template-columns: repeat(auto-fit,25rem);
    justify-content: center;

   
}
.products .box-container .box{
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    padding: 2rem 1rem;
    margin: 1rem;
    position: relative;
}
.products .box-container .box .img{
    width: auto;
    height: 20rem;
    margin-top: 2rem;
    
}
.products .box-container .box .name{
    font-size: 1.2rem;
    color: #555;
    text-transform: capitalize;
    margin-top: 4rem;
}
.products .box-container .box .button{
    text-align: center;
    position: absolute;
    bottom: 30%;
    right: 7%;
    border-radius: 20px;
    background: var(--light-green);
    padding: .5rem 1.5rem;
}
.products .box-container .box .button i,
.products .box-container .box .button a{
    font-size: 1.3rem;
    font-weight: bold;
    margin-right: .5rem;
    color: #000;
}
.products .box-container .box .flex{
    padding-bottom: 1rem;
    display: flex;
    margin-right: auto;
}
.products .box-container .box .price{
    font-size: 1.1rem;
    color: var(--green);
    margin-right: auto;
}
.products .box-container .box .btn{
    position: absolute;
    top: 5%;
}
.products .box-container .box .flex .qty{
    border-radius: .5rem;
    padding: .5rem 1rem;
    width: 4.5rem;
    font-size: 1.1rem;
    color: #000;
}
.products .box-container .box .flex .fa-edit{
    border-radius: .5rem;
    font-size: 1.7rem;
    color: #fff;
    height: 2.7rem;
    width: 4.5rem;
    cursor: pointer;
    background: var(--green);
    margin-left: .5rem;
}
.products .box-container .box .flex .fa-edit:hover{
    background: var(--light-green);
    color: #000;
}
.products .box-container .box .sub-total{
    padding-bottom: 1rem;
    font-size: 1.7rem;
    color: grey;
}
.products .box-container .box .sub-total span{
    color: red;
}
.products .box-container .box .button{
    align-items: center;
}
.products .cart-total{
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    max-width: 50vw;
    margin: 1rem auto;
    text-align: center;
    padding: 2rem;
}
.products .cart-total p{
    padding-bottom: 1rem;
    font-size: 2rem;
    color: #555;
    text-transform: capitalize;
}
.products .cart-total p span{
    color: var(--green);
}

/*--------view product--------------*/

.view_page{
    padding: 5% 8%;
    background-image: url('./img/bg.jpg');
}
.view_page form{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
    justify-content: center;
    align-items: center;
    box-shadow: var(--box-shadow);
    background: #fff;
    margin-left: 1rem;
    padding: 1.5rem;
}
.view_page form .img{
    padding: .5rem;
    width: 90%;
    box-shadow: var(--box-shadow);
}
.view_page form .name{
    font-size: 2rem;
    text-transform: capitalize;
    color: var(--green);
}
.view_page form .price{
    font-size: 24px;
    line-height: 1;
}
.view_page form .detail{
    font-size: 16px;
    color: gray;
    line-height: 2;
    margin-bottom: .5rem;
}
.view_page .btn{
    background: var(--light-green);
    cursor: pointer;
}
.cart-total .button{
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-total .button .btn{
    margin: 1rem;
}

/*--------checkout page--------------*/

.checkout .row{
    display: flex;
    flex-direction: column;
    flex-flow: column-reverse;
}
.checkout .row form,
.checkout .row .summary{
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    width: 900px;
    padding: 1rem;
    margin: 1rem auto;
}
.checkout h3{
    font-size: 2rem;
    color: #000;
    padding-bottom: 1rem;
    text-align: center;
    text-transform: capitalize;
    color: var(--green);
}
.checkout .row form .input{
    width: 100%;
    box-shadow: var(--box-shadow);
    padding: 1rem;
    color: #000;
    font-size: 1.1rem;
    margin: 1rem 0;
}
.checkout .row form .flex{
    display: flex;
    column-gap: 1.5rem;
    flex-wrap: wrap;
}
.checkout .row form .flex .box{
    flex: 1 1 20rem;
}
.checkout .row form p{
    padding-top: 1rem;
    font-size: 1.3rem;
    color: #555;
    text-transform: capitalize;
}
.checkout .row form p span{
    color: red;
}
.checkout .row form .btn{
    width: 100%;
}
.summary .title{
    font-size: 2.2rem;
    color: #000;
    margin-bottom: .5rem;
    text-transform: capitalize;
    padding-bottom: 1.5rem;
}
.summary .flex{
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1.5rem;
    padding: 1rem;
    margin: .4rem;
}
.summary .flex img{
    box-shadow: var(--box-shadow);
    border-radius: 50%;
    width: 50%;
    height: 100%;
    padding: .4rem;
    margin-right: 2rem;
}
.summary .flex .name{
    font-size: 1.1rem;
    padding-bottom: .5rem;
    text-transform: capitalize;
    color: #000;
}
.summary .flex .price{
    font-size: 1.5rem;
    color: red;
}
.summary .grand-total{
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 2rem;
    margin-top: 1.5rem;
    text-transform: capitalize;
}
.summary .grand-total span{
    color: #555;
}
.summary .grand-total p{
    color: red;
}

/*--------order--------------*/

.orders .box-container{
    padding: 2% 6%;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
}
.orders .box-container .box{
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    position: relative;
    overflow-x: hidden;
}
.orders .box-container .box a{
    display: flex;
    align-items: center;
}
.orders .box-container .box a .row{
    position: absolute;
    right: 1%;
}
.orders .box-container .box .date{
    position: absolute;
    top: 0;
    left: 0;
    padding: .5rem .1.5rem;
    background: var(--light-green);
    font-size: .6rem;
    display: inline-block;
    margin-bottom: 1.5rem;
    border-radius: .5rem;
}
.orders .box-container .box .img{
    height: 20rem;
    width: 100%;
    object-fit: contain;
    margin-left: -4rem;
}
.orders .box-container .box .name{
    font-size: 1rem;
    text-transform: capitalize;
    text-overflow: ellipsis;
    overflow-x: hidden;
    color: #000;
}
.orders .box-container .box .price{
    color: orange;
    font-size: 1rem;
}
.orders .box-container .box .status{
    margin-left: .5rem;
    font-size: 1rem;
    text-transform: capitalize;
}
.orders .box-container .box:hover{
    box-shadow: var(--box-shadow);
}

/*--------view order--------------*/

.order-detail .box-container{
    box-shadow: var(--box-shadow);
    border-radius: .5rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 1rem auto;
}
.order-detail .box-container .box{
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
    overflow: hidden;
}
.order-detail .box-container .box .col{
    flex: 1 1 30rem;
    font-size: 1rem;
}
.order-detail .box-container .box .col .img{
    height: auto;
    width: 80%;
    object-fit: fill;
    margin: 1rem 0;
    
    
}
.order-detail .box-container .box .col .title{
    border-radius: .5rem;
    margin-bottom: 1rem;
    padding: .5rem 2rem;
    font-size: 1rem;
    color: var(--green);
    background: var(--light-green);
    border: 2px solid var(--green);
    display: inline-block;
    text-transform: capitalize;
}
.order-detail .box-container .box .col .title i{
    margin-right: 1rem;
    color: #000;
}
.order-detail .box-container .box .col .price{
    color: crimson;
    font-size: 1rem;
    padding: .5rem 0;
    margin-top: -3rem;
}
.order-detail .box-container .box .col .name{
    font-size: 1.5rem;
    color: #000;
    text-overflow: ellipsis;
    overflow-x: hidden;
}
.order-detail .box-container .box .col .user{
    padding: .5rem 0;
    font-size: 1.3rem;
    color: #000;
    
}
.order-detail .box-container .box .col .user i{
    margin-right: 1rem;
    color: gray;
}
.order-detail .box-container .box .col .grand-total{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    flex-wrap: wrap;
    background: var(--light-green);
    font-size: 1.5rem;
    color: var(--green);
    border: 1px solid var(--green);
    border-radius: .5rem;
    text-transform: capitalize;
}
.order-detail .box-container .box .col .grand-total span{
    color: orange;
}
.order-detail .box-container .box .col .status{
    font-size: 1.4rem;
    padding: .5rem 0;
    text-transform: capitalize;
}
.order-detail .box-container .box .col .btn{
    width: 100%;
    border-radius: .5rem;
    border: 1px solid var(--green);
    margin-top: 10.9rem;
}

/*--------media screen--------------*/

@media (max-width: 991px){
    #menu-btn{
        display: block;
    }
    .header .flex .navbar{
        position: absolute;
        width: 100%;
        padding: 0 2rem;
        top: 130%;
        left: 0;
        display: block;
        right: 0;
        border-top: 1px solid var(--green);
        background: #fff;
        transition: .3s ease;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .header .flex .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .header .flex .navbar a{
        display: block;
        margin: 2rem;
        
    }
    .form-container{
        width: 100%;
    }
    form{
        width: 100%;
    }
}