@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300&family=Saira:wght@700&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
html{
    font-size: 62.5%;}

.header{
    height: 8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 5rem;
    background: #dbdce3;}
nav ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;}
nav li{
list-style: none;
position: relative;}
nav ul li a{
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 600;
    color: #1a1a1a;
    transition: 0.3s ease;}
nav ul li a:hover, nav ul li a.active{
    color: #088178;}
nav ul li a.active::after, nav ul li a:hover::after{
    content: '';
    width: 100%;
    margin: auto;
    height: 2px;
    background: #088178;
    position: absolute;
    bottom: -2px;
    left: 0;}
#on{
    font-size: 2.5rem;
    color: black;
    display: none;}
#mark{
    font-size: 2.5rem;
    color:black;
    display: none;}   

.hero{
    width: 100%;
    height: calc(100vh - 8rem);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10rem;
    background: #e3e6f3;}
.text h4 {
    font-size: 2rem;
    font-weight: 500;
color: #1a1a1a;}
.hero img{
    width: 60%;
    height: 100%;}
.text h1{
    font-size: 4rem;
    line-height: 5rem;
font-weight: 600;}
.text h1 span{
    color: #088178;}
.text p{
    font-size: 1.6rem;
    color: #1a1a1a;
    margin-bottom: 3rem;}
.text a{
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
    padding: 14px 80px 14px 65px;
    color:#088178 ;
    background-image: url(images/button.png);}
    /**************************/
.future{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    padding:0 2rem;
     margin-top: 5rem;}
.fu-box{
    width: 15rem;
    text-align: center;
    padding: 1rem 0.5rem;
    box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;}
.fu-box img{
    width: 70%;
    margin-bottom: 2rem;}
.fu-box h3{
    display:inline-block;
    font-size: 1.2rem;
    padding: 6px 9px;
    color: #088178;
    background-color: #fddde4;}
.fu-box:nth-child(2) h3{
    background-color:#cdebbc ;}
.fu-box:nth-child(3) h3{
    background-color:#d1e8f2 ;}
.fu-box:nth-child(4) h3{
    background-color:#cdd4f8 ;}
.fu-box:nth-child(5) h3{
    background-color:#f6dbf6 ;}
.fu-box:nth-child(6) h3{
    background-color:#f6d6b5 ;}
.featured-products, .new{
    width: 90%;
    margin: auto;
    margin-top: 10rem;}
.featured-products h2, .new h2{
    font-size: 3.6rem;
    text-transform: capitalize;
    color: #1a1a1a;
    text-align: center;}
.featured-products p, .new p{
    font-size: 1.8rem;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 3rem;}
    /************************************/
.products{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap:3rem;}
    .featured-products{
        margin-top: 5rem;}
.pro{
    position: relative;
    width: 20%;
    height: 30rem;
    padding: 1rem;
    box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;}
.pro img{
    width: 100%;
    height: 65%;}
.pro span{
    font-size: 1.3rem;
    font-weight: 500;}
.pro h5{
     font-size: 1.5rem;
    margin-bottom: 0.5rem;}
.pro i{
    font-size: 1.4rem;
    color: darkorange;
    margin-bottom: 0.5rem;}
.pro h4{
    font-size: 2rem;
    font-weight: 600;
    color: #088178; }
 .pro .fa-cart-shopping{
    font-size: 1.5rem;
    color: #088178;
    background-color: #c6e5f3;
    padding: 0.5rem;
    border-radius: 50%;
    position: absolute;
    bottom: 0.4rem;
    right: 1rem;}
/***************************************/
.banner{
    width: 100%;
    height: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 5rem;
    background-image: url(images/b2.jpg);
    background-position: right;
    background-size: cover;}
.banner h4{
    font-size: 1.8rem;
    font-weight: 500;
    color: white;
text-transform: capitalize;
margin-bottom: 1rem;}
.banner h2{
    font-size: 3.2rem;
    color: white;
    text-transform: capitalize;
margin-bottom: 1rem;}
.banner h2 span{
    color: gold;}
.banner button{
    font-size: 1.8rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 2rem;
    border: none;
    background: #c6e5f3;
    cursor: pointer;}
.banner button:hover{
    background: #088178;
    color: white;}
/*******start section collections********************/
/*****************************/
.new{
    margin-top: 5rem;}
/*************************/
    .collections {
        width: 90%;
        margin: auto;
        display:flex;
       justify-content: center;
       align-items: center;
       margin-top: 10rem;
       gap: 1rem;
       flex-wrap: wrap;}
.colect{
    height:28rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;}
    .colect:nth-child(1),.colect:nth-child(2){
        width:43%;}
    .colect:nth-child(3),.colect:nth-child(4),.colect:nth-child(5){
        width:28.5%;}
        .colect:nth-child(1){
            background-image: url(images/b17.jpg);}
        .colect:nth-child(2){
            background-image: url(images/b10.jpg);}
        .colect:nth-child(3){
            background-image: url(images/b18.jpg);
            background-position: center;
            background-size: cover;}
        .colect:nth-child(4){
            background-image: url(images/b7.jpg);}
        .colect:nth-child(5){
            background-image: url(images/b4.jpg);
            background-position: center;
            background-size: cover;}
       .colect h4{
        font-size: 1.6rem;
        color: #088178;}
      .colect h2{
    font-size: 2.4rem;
    color: white;}
     .colect p{
        font-size: 1.6rem;
        color: white;
    margin-bottom: 1rem;}
     .colect button{
    width: fit-content;
    font-size: 1.4rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 2rem;
    border: none;
    background: #c6e5f3;
    cursor: pointer;}
    .colect button:hover{
        background: #088178;
        color: white;}
/*******end section collections********************/
/*******start section sign up********************/
.sign-up{
    width: 100%;
    height: 25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7rem;
    margin-top: 10rem;
    background-image: url(images/banner\ \(1\).png);
    background-position: top;
    background-size: cover;}
    .sign-left{
        width: 50%;}
.sign-left h2{
    font-size: 3.2rem;
    color: wheat;
    text-transform: capitalize;}
.sign-left p{
    font-size: 1.6rem;
    text-transform: capitalize;
color: grey;}
.sign-left span{
    font-size: 1.6rem;
    text-transform: capitalize;
    color: darkgoldenrod;}
.sign-right{
    display: flex;
    width: 30%;}
.sign-right input{
    width: 70%;
    height: 4rem;
    outline: none;
    border: none;
    background: white;}
.sign-right button{
    height: 4rem;
    width: 9rem;
    font-size: 1.6rem;
    font-weight: 500;
    border: none;
    background: #088178;
    color: white;
    cursor: pointer;}
    input::placeholder{
    padding-left: 1rem;}
/*******end section sign up********************/
/*******start section fotter********************/
footer{
    width: 100%;
    background: #dbdce3;
    padding:4rem 2rem;}
.fot{
    display: flex;
    justify-content: space-around;
    align-items: start;}
.cont h3{
    font-size: 1.6rem;
    margin: 1rem 0;}
.cont h5{
    font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.7rem;}
.cont span{
    font-size: 1.4rem;
    font-weight: 400;}
.cont i{
    font-size: 1.8rem;
    margin-right: 1rem;}
.cont  .fa-facebook{
    color: darkblue;}
.cont  .fa-twitter{
    color:dodgerblue;}
 .cont  .fa-instagram{
   color:orangered;}
 .about ul, .account ul{
    display: block;}
.about ul li a:hover::after,.account ul li a:hover::after{
    width: 0;}
 .about ul li a, .account ul li a{
    display: inline-block;
    font-size: 1.4rem;
    margin-bottom: 0.7rem;
    font-weight: 500;}
 .about h3, .account h3, .app h3{
    font-size: 1.8rem;
    text-transform: capitalize;
    margin-bottom: 1rem;}
.app p{
    font-size: 1.4rem;
    font-weight: 400;
    margin: 2rem 0;}
footer h6{
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center;
    margin-top: 1rem;}
    /*******end section fotter********************/
    /*******respnsive mobile******/
    @media(min-width:320px) and (max-width:480px){
        .header{
            height: 8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2rem 5rem;
            background: #dbdce3;}
            .header img{
                width: 60px;
                height: 50px;}
        .header nav ul{
            display: block;
            justify-content: center;
            align-items: center;
            gap: 0rem;
            position: absolute;
             top: 8rem;
             left: -100%;
             width: 40%;
             height:calc(100vh - 8rem); ;
             background-color: #dbdce3;
            padding: 3rem 0 0 1rem;}
        .header nav li{
        list-style: none;
        position: relative;
        margin: 1rem 0;}
        .header nav ul li a{
            text-decoration: none;
            font-size: 1.6rem;
            font-weight: 600;
            color: black;
            transition: 0.3s ease;}
        nav ul li a:hover, nav ul li a.active{
            width: 100%;
            color: hsl(176, 88%, 27%);}
        nav ul li a.active::after, nav ul li a:hover::after{
            content: '';
            width: 0;
            height: 2px;
            background: #088178;
            position: absolute;
            bottom: -2px;
            left: 0;}
        #on{
            display: block;
            color: black;}
        #mark{
            display: block;
            position: absolute;
            font-size: 2.5rem;
            color: black;
            top: 1rem;
            right: 1rem;}
        .hero{
            width: 100%;
            height: calc(100vh - 8rem);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 2rem;
            background: #e3e6f3;}
        .text h4 {
            font-size: 1.8rem;
            font-weight: 500;
            color: #1a1a1a;}
        .hero img{
            display: none;}
        .text h1{
            font-size: 3rem;
            line-height: 4rem;}
    /**************************************/
         /**************************/
.future{
    width: 100%;
    gap: 1rem;
    padding:0 2rem;
     margin-top: 2rem;
    flex-wrap: wrap;}
.fu-box{
    width: 40%;
    height: 14rem;
    text-align: center;
    padding: 0.8rem 0.5rem;
    box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;}
    /************************************/ 
    /************************************/
    .products{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap:2rem;}
    .featured-products h2, .new h2{
        font-size: 2.4rem;}
    .featured-products p, .new p{
        font-size: 1.2rem;}
    .pro{
        position: relative;
        width: 75%;
        height: 32rem;
        padding: 1rem;
        box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;}
        .pro h5{
            font-size: 1.4rem;
           margin-bottom: 0.5rem;}
    /***************************************/
/***************************************/
.banner{
    width: 100%;
    height: 20rem;
padding: 1rem;
text-align: center;}
.banner h4{
    font-size: 1.6rem;}
.banner h2{
    font-size: 2.2rem;}
.banner h2 span{
    color: gold;}
.banner button{
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 2rem;
    border: none;
    background: #c6e5f3;
    cursor: pointer;}
.banner button:hover{
    background: #088178;
    color: white;}
    /*************************/
/*******start section collections********************/
.collections {
    width: 98%;
   margin-top: 5rem;
   gap: 1rem;
   flex-wrap: wrap;}
.colect{
height:28rem;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 1rem;}
.colect:nth-child(1),.colect:nth-child(2){
    width:90%;}
.colect:nth-child(3),.colect:nth-child(4),.colect:nth-child(5){
    width:90%;} 
/*******end section collections********************/
/*******start section sign up********************/
.sign-up{
    width: 100%;
    height: 18rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 0rem;
    margin-top: 5rem;
    padding-left: 1rem;
    background-image: url(images/banner\ \(1\).png);
    background-position: top;
    background-size: cover;}
    .sign-left{
        width: 95%;}
.sign-left h2{
    font-size: 2.4rem;
    color: wheat;
    text-transform: capitalize;}
.sign-left p{
    font-size: 1.2rem;
    text-transform: capitalize;
    margin-bottom: 1rem;
color: grey;}
.sign-left span{
    font-size: 1.4rem;
    text-transform: capitalize;
    color: darkgoldenrod;}
.sign-right{
    display: flex;
    width: 90%;}
.sign-right input{
    width: 70%;
    height: 4rem;
    outline: none;
    border: none;
    background: white;}
.sign-right button{
    height: 4rem;
    width: 9rem;
    font-size: 1.6rem;
    font-weight: 500;
    border: none;
    background: #088178;
    color: white;
    cursor: pointer;}
    input::placeholder{
    padding-left: 1rem;}
/*******end section sign up********************/
/*******start section fotter********************/
footer{
    width: 100%;
    background: #dbdce3;
    padding: 2rem;}
.fot{
    display: flex;
    flex-direction: column;
    justify-content:start;
    align-items: start;}
.cont h3{
    font-size: 1.6rem;
    margin: 1rem 0;}
.cont h5{
    font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.7rem;}
.cont span{
    font-size: 1.4rem;
    font-weight: 400;}
.cont i{
    font-size: 1.8rem;
    margin-right: 1rem;}
.cont  .fa-facebook{
    color: darkblue;}
.cont  .fa-twitter{
    color:dodgerblue;}
 .cont  .fa-instagram{
   color:orangered;}
 .about ul, .account ul{
    display: block;}
.about ul li a:hover::after,.account ul li a:hover::after{
    width: 0;}
 .about ul li a, .account ul li a{
    display: inline-block;
    font-size: 1.4rem;
    margin-bottom: 0.7rem;
    font-weight: 500;}
 .about h3, .account h3, .app h3{
    font-size: 1.8rem;
    text-transform: capitalize;
    margin-bottom: 1rem;}
.app p{
    font-size: 1.4rem;
    font-weight: 400;
    margin: 2rem 0;}
footer h6{
    font-size: 1.2rem;
    font-weight: 400;
    text-align: center;
    margin-top: 1rem;}
    /*******end section fotter********************/








    }