@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Josefin+Sans:wght@200;300;400&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'spartan', sans-serif;
    transition: all .5s linear;
    list-style: none;
    text-decoration: none;
    font-family: 'Josefin Sans';
}

html{
    scroll-behavior: smooth;
}
/* Global class */

:root{
    --text-color-1:#444;
    --text-color-2:#666;
    --bg-color-1:#fff;
    --bg-color-2:#eee;
    --shiny-shadow2:rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    --box-shadow:0 .5rem 1.5rem rgba(0,0,0,.4);
    --gray:#F8FBF5;
    --green:#088178;
    --dark:#002240;
    --midnightblue:#0e2a47;
    --gradient2:linear-gradient(#0e2a47, #002240) ;
    --orange:#FEBD00;
    --gray2:#979797;
    /* --orange-1:#FF6C2C;
    --purple:#945B9F;
    --gray:#E7F5F8; */
    --shadow3: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
    --shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    --shadow2:rgba(0, 0, 0, 0.04) 0px 3px 5px;
    --clp:polygon(0 0, 100% 0, 100% 100%, 0 100%);
    --clip-path2: polygon(0 0, 100% 0, 100% 0, 0 0);
    --gradient:linear-gradient(#59882B, #8CB560);
}
h5{
    font-family:"Cookie";
    color: var(--orange);
    font-size: 1.5rem;
    font-weight: 550;
    margin: .5rem 0;
}

body{
    background: var(--bg-color-2);
}
body.active{
    --text-color-1:#fff;
    --text-color-2:#eee;
    color: white;
    --bg-color-1:#333;
    --bg-color-2:#222;
    --box-shadow:0 .5rem 1.5rem rgba(0,0,0,.4);
}

.btn{
    padding:.6rem 1rem;
    background-image: var(--gradient);
    color: white;
    border: none;
    border-radius:3px;
    outline: none;
    cursor: pointer;
    box-shadow: var(--shadow3);
}
.btn:hover{
    background-image:var(--gradient2);
}
input{
    background-color: white;
    border:1px solid white;
    padding: 0.6rem 1rem;
    box-shadow: var(--shadow3);
    outline: none;
    border-radius:3px;
}
input:focus{
    transition:all .3s ease;
    border:1px solid #8CB560;
}
#theme-btn{
    cursor: pointer;
    font-size: 1.2rem;
}
#theme-btn:hover{
    color:#59882B;
}
/* Global class end */
header{
    position:sticky;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:1rem 15rem;
    z-index: 1;
}
header.scroll-header{
    background-color:white;
    box-shadow: var(--shadow2);
}
header .logo img{
    cursor: pointer;
    width: 50%;
}
header .logo:hover{
    transform: scale(.98);
}
header .navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar li{
    position: relative;
    margin-right:2rem;
}
.navbar li a{
    color: #002240;
    background-color:transparent;
    padding: 0.3rem;
    border-radius:3px;
}
.navbar li a:hover{
    
}
.menubar{
    display: none;
}
/* active-link */
.navbar li a.active-Link{
    color:white;
    background-color:#59882B;
 }
.container{
    margin: 0 8rem;
}
header .menubar{
    cursor: pointer;
    /* display: none; */
}
header .close{
    display: none;
}
/* hero */
.hero, .showcase{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin:2rem 0;
}
.hero .col-2,
.showcase .col-2{
    flex-basis:40%;
    min-width:300px;
}
.hero .col-2 img{
    max-width:100%;
}
.hero .col-2 h1{
    text-transform: capitalize;
    font-size:3.5rem;
    line-height: 1.2;
}
.hero .col-2 p{
    font-size: 1.3rem;
    margin: 1.4rem 0;
    line-height: 1.2;
    font-weight:390;
}
/* showcase */
.showcase{
    position: relative;
    margin: 4rem 0;
}
.showcase .flow{
    position: absolute;
    left: 5%;
    bottom:5%;
}
.showcase .box .img{
    background-color:rgb(243, 241, 238);
    width:100%;
    border-radius:10px;
    box-shadow:10px 10px 30px rgba(0, 0, 0, 0.1);
}
.showcase .box .img img{ 
    display: block;
    width: 100%;
    height: 100%;
    border-radius:10px;
}
.showcase .col-2 h4{
    font-family: 'Cookie';
    color: var(--orange);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 550;
}
.showcase .col-2 h3{
    font-size:1.8rem;
    line-height: 1.2;
}
.showcase .col-2 p{
    line-height:1.5;
    margin: 1rem 0;
    font-size:17px;
    font-weight:390;
}

/* boxes */
.boxes{
    position: relative;
    margin:5rem 0;
}
.boxes .flow1{
    position: absolute;
    right:20%;
    top:-15%;
}
.boxes .head{
    text-align: center;
}

.boxes .head h5{
    color: var(--orange);
    font-size: 1.5rem;
    font-family: 'Cookie';
    font-weight: 550;
}

.boxes .head h3{
    margin:2rem 0;
    text-transform: capitalize;
    font-size: 1.6rem;
}
.boxes .card{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:2rem;
}
.boxes .card .col-3{
    flex-basis:26%;
    min-width:100px;
    min-height:200px;
    background-color:var(--gray);
    border-radius: 5px;
    cursor: pointer;
    transition: all .5s ease-in-out;
}
.boxes .card .col-3 div{
    width: 100%;
    height: 100%;
    text-align: center;
}
.boxes .card .col-3 div i{
    font-size:3.5rem;
    color:#8CB560;
    margin:1rem;
}
.boxes .card .col-3 p{
    line-height: 1.5;
    margin: 1rem;
    text-align: left;
    margin-left:1.8rem;
}
.boxes .card .col-3:hover{
    transform: scale(.98);
    border-bottom:1px solid #59882B;
    box-shadow: var(--shadow3);
    background-color:white;
}

/* menu */
.menu-title{
    margin: 2rem 0;
}
.menu-title .fluid{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left:7rem;
}
.menu-title .head{
    text-align: center;
    margin-top:2rem;
}
.menu-title .head h5{
    color: var(--orange);
    font-family:'Cookie';
    font-size: 1.5rem;
    margin: 1rem 0;
    font-weight:550;
}
.menu-title .head h2{
    font-size:2rem;
}
.menu-col{
    position: relative;
}
.menu-col .line{
    position: absolute;
    height:305px;
    width:2px;
    left:-1rem;
    top:1.8rem;
    background-color:var(--orange);
}
.menu-title .menu-col ul li{
    margin:2.4rem 0;
}
.menu-title .menu-col ul li a{
    color:var(--gray2);
}
.menu-title .menu-col ul li a:hover{
    color: var(--orange);
}
.slideshow-container {
  max-width: 1000px;
  margin: auto;
}
.mySlides{
  display: none;
}

.mySlides{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:1rem;
    margin-top:2rem;
}
.mySlides .col-3{
    flex-basis:20%;
    min-width:280px;
    min-height:320px;
    background-color: var(--gray);
    cursor: pointer;
    border-radius:5px;
}
.mySlides .col-3 .card{
    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 1rem;
}
.mySlides .col-3 .card .img{
    position: relative;
    width:16rem;
    height:14rem;
}
.mySlides .col-3 .card .img img{
    /* position:relative; */
    width: 100%;
    height: 100%;
}
.mySlides .col-3 .card .img .fly{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:1rem;
    width:12.98rem;
    height:12.98rem;
    border-radius:50%;
    background-color:rgba(0, 0, 0, 0.1);
    top:3%;
    right:8%;
    z-index:-1; 
    transition: all .5s ease;
} 

.mySlides .col-3 .card:hover .fly{
    z-index: 1;
}
.mySlides .col-3 .fly i{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 3px;
    border:1px solid white;
    background-color:transparent;
    width:28px;
    height:28px;
    box-shadow: var(--shadow2);
}
.mySlides .col-3 .fly i:hover{
    background-color:var(--dark);
    border:1px solid var(--dark);
    color: white;
}
.mySlides .col-3 .card .icons{
    margin: 0.5rem;
    color: #59882B;
}
.mySlides .card .cash{
    color: #59882B;
    margin: 0.3rem 0;
}
.mySlides .card .cash span{
    font-size: 0.8rem;
    text-decoration-line: line-through;
}
.mySlides .col-3:hover{
    transform: scale(.98);
    box-shadow: var(--shadow3);
    border-bottom:1px solid #59882B;
}
.menu-title .btn-1{
    display: flex;
    align-items:flex-end;
    justify-content:flex-end;
    margin-right:7rem;
    gap:1rem;
    margin-top: 1rem;
}
.menu-title .btn-1 button{
    background-color: var(--gray);
    padding: 0.5rem 1rem;
    box-shadow: var(--shadow);
    border: none;
    cursor: pointer;
    color: var(--dark);
}
.menu-title .btn-1 button:hover{
    background-color: #59882B;
    color: white;
}
.menu-title .btn-1 button:nth-child(1){
    border-top-left-radius:25px;
    border-bottom-left-radius:25px;
}
.menu-title .btn-1 button:nth-child(2){
    border-top-right-radius:25px;
    border-bottom-right-radius:25px;
}
.menu .flow3{
    position: absolute;
    top:-30%;
    right: 0;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/* History */
.history{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:2rem;
    margin: 3rem 0;
}
.history .flow4{
    position: absolute;
    left: 0;
    top:-20%;
}
.history .col-2{
    flex-basis:45%;
    min-height:300px;
}
.history .col-2 h2{
    font-size: 2rem;
    text-transform: capitalize;
    line-height: 1.3;
    margin: 1.5rem 0;
}
.history .col-2 p{
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 390;
    text-align:left;
    margin-bottom: 1rem; 
}
.history .btn{
    margin-top: 1rem;
    padding: 1rem;
}
.history .box{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis:35%;
    min-width: 250px;
    min-height:450px;
    background-color: var(--gray);
}
.history .box .img{
    width: 20rem;
    height: 20rem;
}
.history .box .img img{
    width:100%;
    height:100%;
}
/* Testimonials */
.testimonials{
    margin:3rem 0 0 0;
}
.testimonials .title{
    text-align: center;
}
.testimonials .row{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:1rem;
    margin:3rem 0;
}
.testimonials .row .flow5{
    position: absolute;
    right: 0;
    top: 0;
}
.testimonials .row .card{
    flex-basis:27%;
    min-width:250px;
    margin:0;
}
.testimonials .box{
    position: relative;
    background-color:white;
    min-width:300px;
    min-height:90px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow3);
    border-radius:3px;
}
.testimonials .box .closeX{
    position: absolute;
    bottom:5%;
    right:3%;
    background-color:transparent;
    padding: 0.3rem .45rem;
    cursor: pointer;
    font-size: 0.7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.testimonials .box .closeX:hover{
    background-color: var(--gray2);
    color:white;
}
.testimonials .box-info,
.testimonials .box-info1,
.testimonials .box-info2,
.testimonials .box-info3,
.testimonials .box-info4{
    opacity:0;
    left: -5%;
}
.testimonials .box-info.active1{
    
}
.testimonials .box-info.active,
.testimonials .box-info1.active,
.testimonials .box-info2.active,
.testimonials .box-info3.active,
.testimonials .box-info4.active{
    opacity:1;
    left: 0;
}
.testimonials .box p{
    margin: 0 .8rem;
    color: var(--gray2);
}
.testimonials .tool-tip{
    position:absolute;
    width:15px;
    height: 15px;
    left:5%;
    top:100%;
    background-color:white;
    box-shadow: var(--shadow3);
    clip-path: polygon(0 0, 100% 50%, 100% 50%, 0% 100%);
    transform:rotate(-270deg);
}
.testimonials .info{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:.5rem;
    margin-top:1.5rem;
    cursor: pointer;
}
.testimonials .card .img{
    width: 70px;
    height: 70px;
}
.testimonials .card .img img{
    width: 100%;
    height: 100%;
    border-radius: 50px;
}
.testimonials .name h4{
    font-size: 1.3rem;
    font-family:"Josefin regular";
    font-weight: 390;
    margin-bottom: 0.3rem;
}
.testimonials .name h3{
    font-style: italic;
    font-family:'Cookie';
    font-weight: lighter;
    color: var(--gray2);
}
.testimonials .row .down{
    margin-bottom:8rem;
}
.testimonials .row .up{
    margin-bottom:5rem;
}

/* News */
.news .title{
    text-align: center;
}
.news .title h5{
    margin-bottom: 1rem;
}
.news .row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:1rem;
    flex-wrap: wrap;
    margin: 3rem 0;
}
.news .row .col-3{
    flex-basis:27%;
    min-width:300px;
}
.news .col-3 .box{
    display: flex;
    align-items: flex-start;
    justify-content:flex-start;
    flex-direction: column;
    width:20rem;
    cursor: pointer;
}
.news .col-3 .box .img{
    width:100%;
}
.news .col-3 .box .img img{
    width: 100%;
}
.news .details{
    display: flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:.7rem;
    flex-direction: column;
    margin-top: 0.5rem;
}
.news .details p{
    color: var(--gray2);
    line-height: 1.4;
}
.news .details a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
}
.news .details i{
    margin-left: 0.4rem;
}
.news .details a:hover i{
    color:#59882B;
    margin-left: 0.7rem;
}

/* Subscription */
.subscribe{
    margin:5rem 0;
}
.subscribe .title{
    text-align: center;
}
.subscribe .title h5{
    margin-bottom: 1rem;
}
.subscribe .txt{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
}
.subscribe .txt .col .circle{
    display: flex;
    align-items: center;
    justify-content: center;
}
.subscribe .col .circle{
    position: relative;
}
.subscribe .txt .col input{
    width: 20rem;
    box-shadow: var(--shadow);
    border-radius:25px;
}
.subscribe .txt .col .btn-circle{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width:30px;
    height:30px;
    right:1%;
    outline: none;
    border: none;
    background-color: #59882B;
    color: white;
    box-shadow: var(--shadow);
    cursor: pointer;
}
.subscribe .txt .col .btn-circle:hover{
    background-color: var(--dark);
}
.subscribe .col .flow5{
    position: absolute;
    left:-100%;
    top:-300%;
}
.subscribe .col .flow6{
    position: absolute;
    right:-80%;
    top:-55%;
}

/* Footer */
footer{
    background-color: #F8FBF5;
    min-height:40vh;
}

footer .container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:5rem;
    padding-top:5rem;
}
footer .container .logo{
    flex-basis:25%;
    min-width:200px;
}
footer .logo .sml img{
    width:50px;
    cursor: pointer;
    margin-bottom: .5rem;
}
footer .logo .social ul{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
footer .logo .social div{
    width:25px;
    height:25px;
    background-image:var(--gradient);
    color:white;
    margin-right: 0.5rem;
    margin-top: 1rem;
    cursor: pointer;
    border-radius:3px;
    box-shadow:var(--shadow2);
}
footer .logo .social div:hover{
    background-image: var(--gradient2);
    transform: scale(.99);
}
footer .logo .social div i{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

footer .logo p{
    line-height: 1.5;
    color: var(--gray2);
}
footer .container .links{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:9rem;
}

footer .links .head{
    display: flex;
    align-items:flex-start;
    justify-content: center;
    flex-direction: column;
    gap:1rem;
}
footer .links .head h4{
    margin-bottom:.5rem;
}
footer .links .head a{
    color: var(--gray2);
}
footer .links .head a:hover{
    color: var(--orange);
}
.foot{
    position: relative;
}
.foot .lead{
    text-align: center;
    margin-top: 3rem;
    background-image: var(--gradient);
    padding:.8rem;
    color: white;
}
.foot .foot-left,
.foot .foot-right{
    position: absolute;
}
.foot .foot-left{
    top:20%;
    left: 5%;
}
.foot .foot-right{
    top:20%;
    right: 5%;
}
.foot .foot-left,
.foot .foot-right{
    width:140px;
    height:140px;
}
.foot .foot-left img,
.foot .foot-right img{
    width:100%;
    height: 100%;
}
/* cart */
.cart-head{
    max-width:1000px;
    font-family: 'Cookie';
    margin: 0 auto;
}
.cart-head h1{
    padding: 20px 0;
}
.cart-head h1 i{
    color: #8CB560;
}
.cart-title{
    display: flex;
}
.products{
    flex:0.75;
}
.product{
    display: flex;
    align-items: center;
    justify-content:flex-start;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border:1px solid #59882B;
    border-radius:5px;
    margin-bottom:1rem;
}
.product:hover{
    border:none;
    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.2);
    transform:scale(1.0);
    border-radius:5px;
    border:1px solid 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.product .img{
    cursor: pointer;
    width:180px;
    object-fit: cover;
}
.product .img img{
    width: 100%;
}
.product .img img:hover{
    transform: scale(1.04);
}
.product-info{
    position: relative;
    width: 100%;
    display: flex;
    align-items:flex-start;
    justify-content:flex-start;
    flex-direction: column;
    gap:.5rem;
}
.product-name{
    font-weight:390;
    font-size: 1.5rem;
    color: #FEBD00;
    font-family: 'Cookie';
}
.product-price{
    color: #59882B;
}
.product-offer{
    color: var(--orange);
}
.quantity{
    color: #59882B;
}
.quantity input{
    width:20%;
    padding: 0.3rem;
    text-align: center;
    border:1px solid #EBEBEB;
}
.product-remove{
    position: absolute;
    cursor: pointer;
    bottom:0px;
    right: 20px;
    padding:8px 20px;
    background-image:var(--gradient);
    border-radius:5px;
    color: white;
}
.product-remove:hover{
    background-image:var(--gradient2);
}
.product-remove i{
    color:var(--orange);
}
.cart-total{
    flex: 0.25;
    margin-left: 25px;
    height:180px;
    padding: 20px;
    background-color:white;
    cursor: pointer;
    box-shadow: var(--shadow2);
    border-radius: 5px;
}
.cart-total:hover{
    box-shadow: var(--shadow);
}
.cart-total p{
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border:1px solid #FEBD00; */
    margin-bottom: 1rem;
}
.cart-total .btn{
    width: 100%;
}










/* Responsivenes */
@media(max-width:1440px){
    .menu-title .btn-1 {
        margin-right:9.5rem;
    }
    footer{
        min-height:30vh;
    }
    footer .container {
        gap:10rem;
    }
}
@media(max-width:1024px){
    .cart-head .products{
        flex:0.65;
        margin:0 4rem;
    }
    .cart-head h1{
        margin-left: 4rem;
    }
    .container{
        margin: 0;
    }
    header{
        padding: 1rem 4rem;
    }
    .hero .col-2 h1 {
        font-size: 2.5rem;
    }
    .hero .col-2 {
        flex-basis:42%;
        min-width:300px;
    }
    .showcase .flow {
        left:3%;
    }

    .mySlides .col-3 {
    flex-basis: 20%;
    min-width: 250px;
    min-height:290px;
    }
    .menu-title .fluid {
        margin-left:5rem;
    }
    .menu-title .btn-1 {
        margin-right: 3rem;
    }
    .testimonials .row {
    gap:2rem;
    margin: 3rem 0;
    }
    .testimonials .row .card {
        flex-basis: 27%;
        min-width: 200px;
        margin: 0;
    }
    .news .row {
        gap:2rem;
    }
    .news .row .col-3 {
        min-width:280px;
    }
    .news .col-3 .box {
        width:18rem;
    }
    .news .col-3 .box .img {
        width:18rem;
    }
    footer .container {
    flex-wrap:nowrap;
    gap:1rem;
    padding-top:3rem;
    }
    .foot .foot-left, .foot .foot-right {
        width:80px;
        height:80px;
    }
    .foot .foot-left {
        left:-2%;
    }
    .foot .foot-right{
        right:0%;
    }
}
@media(max-width:768px){
    .cart-total{
        flex: 0.40;
        margin-left: 0px;
        margin-right: 2rem;
    }
    .container{
        overflow: hidden;
    }
    header .close{
    display:block;
    padding-left:10px;
    position: absolute;
    top:5%;
    }
    header .close:hover{
        color: var(--orange);
    }
    header{
        padding:1rem 2.8rem;
    }
    header .navbar{
        display:flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        position:fixed;
        right:-300px;
        top:0;
        width:140px;
        height:100vh;
        background-color:var(--gray);
        box-shadow: var(--shadow3);
        padding: 70px 0 0 20px;
        transition: all .5s ease;
    }
    .navbar li{
        margin-bottom: 25px;
    }
    header .navbar.active{
        right: 0px;
    }
    .close{
        position: absolute;
        top: 30px;
        left: 30px;
        color: var(--dark);
        font-size:18px;
        display:initial;
        left:8%;
        cursor: pointer;
    }
    .menubar{
        display: inline-block;
    }
    .hero .col-2 h1 {
        font-size:2rem;
    }
    .showcase .box{
        flex-basis: 45%;
    }
    
    .showcase  .box .img {
        width:22rem;
        height:22rem;
    }
    .showcase .col-2 h4{
        font-size: 1.3rem;
        margin-bottom:.5rem;
    }
    .showcase .col-2 h3{
        font-size:1.4rem;
    }
    .showcase .col-2 p,
    .history .col-2 p{
        line-height:1.2;
        margin:.5rem 0;
        font-size: 1rem;
    }   
    .boxes .card .col-3{
        flex-basis:20%;
        min-width:327px;
    }
    .slideshow-container {
        max-width:600px;
    }
    
    .boxes .flow1 {
        top: -5%;
        right: 10%;
    }
    .menu-title .fluid {
     margin-left:3rem;
    }
    .mySlides .col-3{
    flex-basis:20%;
    min-width:185px;
    min-height:200px;
    }
    .mySlides .col-3 .card .img{
    position:relative;
    width:8.5rem;
    height:7.5rem;
    }
    .mySlides .col-3 .card .img .fly{
    width:6.9rem;
    height:6.9rem;
    /* background-color:red; */
    top:3.5%;
    right:8%;
    }
    .menu-title .menu-col ul{
        margin-top:3rem;
    }
    .menu-title .menu-col ul li{
        margin:1.2rem 0;
    }
    .menu-col .line {
    height:205px;
    top:2.5rem;
    }
    .menu-title .btn-1 {
    margin-right:2.4rem;
    }
    
    .history{
        gap:1rem;
    }
    .history .col-2{
        flex-basis:45%;
    }
    .history .col-2 br{
        display: none;
    }
    .history .box{
        min-height:400px;
    }
    .testimonials .row{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin:2rem;
        grid-gap:1rem;
    }
    .testimonials .row .card {
        margin: .5rem 0 0 0 0;
    }
    .testimonials .row .down{
        margin-bottom: 0;
    }
    .testimonials .row .up{
        margin-bottom: 0rem;
    }
    .news .col-3 .box .img {
        width:14rem;
    }
    .showcase .flow {
    left:-15%;
    bottom: 5%;
    }
    .testimonials .row .flow5 {
        right: 0;
        top:-20%;
    }
    .news .row .col-3 {
        min-width:200px;
    }
    .news .col-3 .box {
        width:15rem;
    }
    .subscribe .col .flow6 {
    right:-10%;
    top: -355%;
    }
    footer .container {
        gap:1rem;
        flex-wrap: nowrap;
    }
    footer .container .links {
        gap:2rem;
    }
    .foot .foot-left, .foot .foot-right {
        width:80px;
        height:80px;
    }
    .foot .foot-left {
        left:-2%;
    }
    .foot .foot-right{
        right:0%;
    }
}

@media(max-width:426px){
    .container{
        overflow: hidden;
    }
    header {
        padding: 1rem 4rem;
    }
    .history .col-2 {
        min-width: 300px;
    }
    .mySlides .col-3{
    flex-basis:20%;
    min-width:300px;
    min-height:300px;
    margin-right:3rem;
    }
    .mySlides .col-3 .card .img{
    position:relative;
    width:12.5rem;
    height:11rem;
    margin-top: 0.5rem;
    }
    .mySlides .col-3 .card .img .fly{
    width:10rem;
    height:10rem;
    top:5%;
    right:8%;
    }
    .menu-title .head h2 {
        font-size: 1.5rem;
    }
    
    .showcase  .box .img{
        width: 100%;
        height: 100%;
    }
    .showcase .flow {
        display: none;
    }
    .boxes .card .col-3 {
        min-width: 300px;
    }
    .menu-title .fluid .menu-col{
        display: none;
        
    }
    .menu-title .btn-1 {
        margin-right:4rem;
    }
    .testimonials .row {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap:1.5rem;
    }
    .testimonials .row .flow5 {
        right:-5%;
        top:-12%;
    }
    .testimonials .row .card {
        margin: 0rem 2rem;
    }
    .news .row .col-3 {
        min-width:300px;
        margin-right:1rem;
    }
    .news .col-3 .box {
        width:20rem;
    }
    .news .col-3 .box .img {
        width:20rem;
    }
    footer .container .logo{
        min-width:200px;
    }
    footer .container{
        margin:0 3.4rem;
    }
    footer .container .links {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap:1rem;
    }
    footer .container {
        margin-right:0rem;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    footer .logo p {
        width:70%;
    }
    .cart-title{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .product-remove {
    bottom:-50px;
    right: 10px;
    }
    .product {
        height: 230px;
    }
    .cart-total {
    width:275px;
    margin-left:2rem;
    margin-bottom: 2rem;
    }
    .foot .foot-left {
        top: 2%;
        left:-2%;
    }
    .foot .foot-right{
        right:12%;
        top:80%;
    }
    
}

@media(max-width:376px){
    .container{
        overflow: hidden;
    }
    header {
        padding: 1rem 2.2rem;
    }
    .testimonials .row .card {
        margin:0 .5rem;
    }
    .news .row .col-3 {
        min-width:280px;
    }
    .news .col-3 .box .img{
        width:280px;
    }
    .menu-title .btn-1 {
    margin-right:2.2rem;
    }
    .subscribe .txt .col input {
        width:18rem;
    }
    footer .container {
    margin:0 2.3rem;
    }
    .foot .foot-left {
        top:0;
        left:2%;
    }
}
@media(max-width:320px){
    .container{
        overflow: hidden;
    }
    .hero .col-2 h1 {
        font-size:1.7rem;
    }
    .hero .col-2 {
        flex-basis:30%;
        min-width:280px;
    }
    .hero .col-2 p {
        font-size: 1.1rem;
    }
    input {
        padding: 0.6rem .8rem;
    }
    .showcase .box {
        flex-basis: 40%;
        min-width: 280px;
    }
    .showcase  .box .img {
        height:17rem;
    }
    .showcase .col-2 {
        flex-basis: 40%;
        min-width:280px;
    }
    .boxes .card .col-3 {
        flex-basis: 20%;
        min-width:280px;
    }
    .menu-title .head h2 {
        font-size:1.5rem;
    }
    .menu-head .col-3 {
        min-width: 280px;
    }
    .mySlides .col-3 {
        flex-basis: 20%;
        min-width:280px;
        min-height:280px;
        margin-right: 3rem;
    }
    .menu-title .btn-1 {
    margin-right:2rem;
    }
    .history .col-2 h2 {
        font-size:1.4rem;
    }
    .news .row .col-3 {
        min-width:280px;
    }
    .news .col-3 .box .img {
        width:18rem;
    }
    .history .col-2 {
        min-width:280px;
    }
    .testimonials .box{
        min-width:280px;
        min-height:90px;
    }
    .testimonials .row .card {
        margin-right:1.5rem;
    }
    .testimonials .row .card {
        margin-right:5rem;
    }

    .news .row .col-3 {
        margin-right:0rem;
    }
    .subscribe .col .flow6 {
        right:5%;
        top: -555%;
    }
    .subscribe .txt .col input {
    width:18rem;
    }
    .subscribe .title h2{
        font-size:1rem;
    }
    footer .container{
        margin-left: 1.2rem;
    }
    footer .foot .logo p{
        width:100%;
    }
    footer .container .links {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
}