*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
body{
    background-color: #eeeeee;
    position: relative;
}
ul{
    list-style: none;
}
nav{
    position: sticky;
    z-index: 1000000;
    top: 0;
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background-color:#eeeeee;
    border-bottom: 1px solid rgba(128, 128, 128, 0.945);
}
nav .logo{
    font-weight:700;
    font-size: x-large;
    font-family: 'Lato', sans-serif;

}
nav ul{
    list-style: none;
    display: flex;
    gap: 2rem;
}
nav a{
    text-decoration: none;
    color: black;
}
nav li:hover{
    /* transition-duration: 1s; */
    color: rgb(87, 86, 86);
    border-bottom: 2px solid rgb(73, 73, 73);
}
.landing{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: auto;
}
.landing .text{
    margin-left: 20px;
}
.landing .heads{
    color:rgb(1, 190, 190); 
}
.landing .text h1{
    font-size: 54px;
}
.heads{
    color: rgb(2, 131, 131);
}
.landing .text h5{
    font-size: larger;
}
.landing .text p{
    margin-top: 22px;
}
.landing .text h2{
    color: rgb(63, 63, 63);
}
.text button{
    width: 140px;
    height: 40px;
    margin-top: 23px;
    background-color: rgb(2, 131, 131);
    border: none;
    outline: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
}
button a{
    text-decoration: none;
    color: #dadada;
}
.landing img{
    width: 35%;
    height: 50%;
}
.text button:hover{
    background-color: transparent;
    border: 2px solid rgb(2, 131, 131);
    color:  rgb(2, 131, 131);;
}

.about{
    display: none ;
}
.aboutText{
    background-color: rgb(1, 1, 43);
    color: white;
    padding: 54px;
    font-size: 18px;

}
.aboutus{
    display: flex;
    justify-content: center;
    width: 800px;
    background-color: #fff;
    padding: 22px;
    margin: 20px auto;
    border-radius: 6px;
}
.dumiText{
    margin-top: 66px;
}
.dumiText p{
    margin-top: 11px;
}

.aboutus img{
    width: 54%;
}
.contact{
    display: none;
}
.contactBanner{
    background-color: rgb(4, 4, 44);
    color: white;
    padding: 55px;
}
.connect{
    display: flex;
    justify-content: center;
    margin-top: 33px;
    
    
}
.connectText{
    background-color: #fff;
    padding: 53px;
}
.connectText p{
    margin-top: 21px;
}
.contact img{
    width: 50%;
    transition: 0.8s ease;
}
.contact img:hover{
    width: 52%;
    cursor: pointer;

}
.form{
    text-align: center;
    margin-top: 73px;
}
.form .submit{
    width: 340px;
    height: 40px;
    border: none;
    background-color: rgb(1, 87, 87);
    color: white;
    font-size: 22px;
    margin-top: 22px;
    cursor: pointer;
}
.form input{
    width: 320px;
    padding: 8px;
    outline: none;
    margin: 3px;
    margin-top: 11px;
}

footer{
    margin-top: 30px;
    word-break: break-word;
    width: 100%;
    color: #dadada;
    height: fit-content;
}
.sign-up{
    padding: 50px;
    background-color: rgb(2, 2, 41);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    line-height: 2rem;
    margin: auto;
}
footer span{
    background-color:  rgb(2, 131, 131);
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}
footer input{
    padding: 7px;
    border-radius: 5px;
    outline: none;
    border: none;
    width: 60%;
}
footer .text{
    word-break: break-word;
}
footer .links{
    display: flex;
    color: black;
    gap: 2rem;
    justify-content: center;
    width: 100%;
    margin: auto;
    text-align: center;
    padding-left: 100px;
}
.links ul{
    width: 25%;
    margin-top: 50px;
    text-align: start;
}
.links ul li{
    line-height: 1.5rem;
    margin: 20px auto;
}
.cards{
    display: flex;
    text-align: center;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}
.shops{
    text-align: center;
    margin-top: 5rem;
    margin-bottom: 5rem;
}
.shops span{
    color: rgb(4, 155, 155);
}
.shops h1{
    margin: 50px auto ;
}
.card img{
    width: 80%;
    margin: auto;
    height: 50%;
    transition-duration: 0.6s ;
    border-radius: 30px;
}
.cards .card{
    width: 20%;
}
.cards .card:hover img{
    transform: scale(1.1);
}
.cards .card:hover .txt{
    transform: scale(1.1);
}
.card .txt {
    margin-top: 1rem;
    transition-duration: 0.6s ;
}
.txt i{
    color: rgb(255, 196, 0);
    margin-top: 4px;
    font-size:19px;
}
.txt button{
    width: 110px;
    height: 33px;
    border: none;
    background-color: rgb(1, 148, 148);
    color: white;
    font-size: 16px;
    margin-top: 8px;
    cursor: pointer;
}

.cart{
    position: absolute;
    height: fit-content;
    
    background-color: rgba(0, 0, 0, 0.658);
    right: 0;
    display: none;
    width: 25%;
    color: #dadada;
    text-align: center;
    padding: 20px;
}
.cart button{
    width: 100%;
    margin: 20px auto;
    bottom: 0;
    height: 50px;
    position: relative;
    right: 0;
    color: blue;
    cursor: pointer;
}
.contentItem{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 30px;
}
.contentItem img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.fullPage{
    display: flex;
    justify-content: center;
    display: none;
    margin-top: 22px;
}
.fullPage .cartText{
    padding: 22px;
    margin-top: 33px;
}
#cartImg{
    width: 30%;
    height: 10%;
}
.cartText p{
    margin-top: 11px;
}
.cartText .btn button{
    width: 140px;
    height: 40px;
    background: rgb(247, 133, 2);
    color: white;
    border: none;
    font-size: 22px;
    margin-top: 22px;
}
.btn button:hover{
    background-color: rgb(253, 173, 25);
    cursor: pointer;
}
.cartText h2{
    margin-top: 11px;
}
.relode{
    background-color: rgb(3, 75, 75);
    color: white;
    width: 140px;
    height: 34px;
    border: none;
    font-size: 22px;
    margin-top: 22px;
}
.relode:hover{
    background-color: rgb(4, 141, 141);
    cursor: pointer;

}