* {
    margin: 0;
    padding: 0;
    font-family: Arial;
    /* border: border-box; */
    font-size: 62.5%;
}

@media only screen and (max-width: 320px) {
    * {
        font-size: 15%;
    }
}

@media (min-width: 321px) and (max-width: 500px) {
    * {
        font-size: 25%;
    }
}

@media (min-width: 501px) and (max-width: 800px) {
    * {
        font-size: 30%;
    }
}

@media (min-width: 801px) and (max-width: 1024px) {
    * {
        font-size: 45%;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    * {
        font-size: 55%;
    }
}

/*------------------------------------------------Header----------------------------------------------------------------*/
.navbar {
    height: 6rem;
    width: 100%;
    background-color: black;
    align-items: center;
    display: flex;
    justify-content: space-evenly;
}

/*-----------------------Scroll-Watcher-----------------------------------*/
.scroll {
    height: 1rem;
    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: lime;
    width: 100%;
    scale: 0 1;
    transform-origin: left;
    animation: scroll-watcher linear;
    animation-timeline: scroll(y);
}

@keyframes scroll-watcher {
    to {
        scale: 1 1;
    }
}

/* -------------------------Amazon logo-------------------------------------*/
.nav-logo {
    height: 5.6rem;
    width: 8rem;
    margin-left: 0.3rem;
}

.logo {
    height: 5rem;
    width: 10rem;
    background-image: url(images.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.border {
    border: .2rem solid transparent;
}

.border:hover {
    border: .2rem solid white;
}

/* --------------------------Location-------------------------------------*/
.add {
    width: 8.5rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#del {
    font-size: 1.2rem;
    padding-left: 3rem;
}

.icon {
    display: flex;
    font-size: 2.3rem;
    padding-left: 1.5rem;
    font-weight: 850;
}

.icon i {
    font-size: 1.5rem;
    padding-right: 0.3rem;
}

.add a {
    color: white;
}

/* --------------------------Search Box---------------------------------------*/
.search-bar {
    display: flex;
    justify-content: flex-start;
    width: 50%;
    height: 4rem;
}

.select {
    font-size: 1.3rem;
    width: 6rem;
    text-align: center;
    background-color: #e6e6e6;
    border-top-left-radius: .7rem;
    border-bottom-left-radius: .7rem;
}

.input-group {
    width: 100%;
    font-size: 1.4rem;
    padding-left: 1rem;
}

.glass {
    width: 5.5rem;
    background-color: rgb(204, 152, 55);
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: .7rem;
    border-bottom-right-radius: .7rem;
    font-size: 3rem;
}

.border1 {
    border: .2rem solid transparent;
}

.border1:hover {
    border: .3rem solid rgb(231, 154, 10);
    border-radius: 1rem;
}

/* --------------------------------Sign in----------------------------------*/
.sign {
    color: white;
}

.f {
    font-size: 1.3rem;
}

.s {
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    background-color: black;
    border: none;
}

.a {
    color: white;
}

/*---------------------------------Order------------------------------------*/
.order {
    width: 6rem;
}

.fi {
    font-size: 1.2rem;
}

.fir {
    font-size: 1.4rem;
    font-weight: 600;
}

/* -----------------------------------Cart------------------------------------*/
.cart {
    display: flex;
    justify-content: center;
    align-content: center;
}

.cart i {
    font-size: 2.5rem;
    color: white;
}

.firs {
    color: white;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1.5rem;
    padding-right: .4rem;
}

/*------------------------------------Language---------------------------------*/
.lang {
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
}

.im {
    background-image: url(usa.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 3rem;
    width: 3rem;
    padding-left: .5rem;
}

.lang select {
    width: 5rem;
    background-color: black;
    color: white;
    border: none;
    font-size: 1rem;
}

/*-----------------------------------------------------Pannel Bar-------------------------------------------------------*/
.pannel {
    width: 100%;
    height: 4rem;
    background-color: #0F1111;
    color: white;
    align-items: center;
    display: flex;
    justify-content: space-evenly;
}

.all {
    font-weight: 600;
}

.all i {
    font-size: 2rem;
}

.all a {
    padding-left: .3rem;
    font-size: 1.7rem;
    text-decoration: none;
    color: white;
}

.pannel-opt p {
    font-size: 1.4rem;
    display: inline;
    margin-left: 1.5rem;
}

.pannel-opt {
    width: 65%;
}

.pannel-opt2 p{
    font-size: 2rem;
    font-weight: 600;
}

/*------------------------------------------------------Main-Content-----------------------------------------------------*/
.container {
    background-image: url(amazon.jpg);
    background-size: cover;
    height: 40rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.msg {
    font-size: 5rem;
    height: 4rem;
    background-color: white;
    margin-bottom: 2rem;
    width: 97%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.msg p{
    font-size:1.5rem;
}

a {
    font-size: 1.5rem;
    color: #007185;
    text-decoration: none;
}

/*------------------------------------------------------Items-----------------------------------------------------------*/
.item {
    background-color: rgb(224, 153, 224);
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.box {
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 23%;
    height: 42rem;
    background-color: white;
}

.box-cont {
    margin: 1.5rem 2rem;
}

h3 {
    font-size: 2rem;
}

.img {
    background-size: cover;
    margin-top: 1rem;
    height: 32rem;
}

/*---------------------------------------------------------footers------------------------------------------------------*/
/* ------------------footer 1--------------------- */
.f1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #181136;
    width: 100%;
    height: 5rem;
    color: white;
}

.f1 p {
    font-size: 1.5rem;
}

/* --------------------footer 2---------------- */
.f2 {
    display: flex;
    justify-content: space-evenly;
    height: 40rem;
    background-color: #0b0914;
}

.f2 a {
    color: rgb(230, 226, 247);
    display: block;
    padding-top: 1rem;
}

.f2 a:hover {
    text-decoration: underline;
}

.f2 p {
    margin-top: 4rem;
    color: white;
    font-size: 1.7rem;
    font-weight: bold;
}

/* ------------------------footer 3----------------- */
.f3 {
    height: 6rem;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: .2rem solid white;
}

.logo1 {
    background-image: url(images.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 5.6rem;
    width: 8rem;
}

/*--------------------------footer 4-------------------*/
.f4 {
    height: 40rem;
    background-color: rgba(0, 0, 0, 0.952);
    display: flex;
    justify-content: space-evenly;
    padding-left: 20rem;
    padding-right: 20rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.f4 p {
    font-weight: bold;
    color: white;
}

.f4 ul {
    font-size: .75rem;
    padding-top: 2rem;
    margin-right: 2rem;
    height: 5.5rem;
    width: 9rem;
}

.f4 p {
    font-size: 1.2rem;
}

.f4 a:hover {
    text-decoration: underline;
}

.f4 a {
    color: #999999;
}

/* -------------------------footer 5-------------------*/
.f5 {
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(230, 226, 247);
    background-color: rgba(0, 0, 0, 0.952);
}

.f5 a {
    font-size: 1.2rem;
    color: rgb(230, 226, 247);
    padding-right: 1rem;
}

.f5 a:hover {
    text-decoration: underline;
}

.f5 p {
    padding-top: .4rem;
    font-size: 1.2rem;
    text-align: center;
}