* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    font-family: Arial;
}

/* Header  */
nav {
    height: 60px;
    display: flex;
    align-items: center;
    background-color: rgb(10, 73, 73); 
    color: white;
}

.nav-left {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: .5rem;
}

.nav-logo img {
    width: 100px;
    padding: .5rem;
}

.nav-logo:hover {
    outline: 1px solid white;
}

.location {
    height: 100%;
    font-size: .7rem;
    padding: .5rem 1rem;
}

.location:hover {
    outline: 1px solid white;
}

.location-icon {
    display: flex;
    align-items: center;
}


.nav-center {
    height: 40px;
    display: flex;
    flex-grow: 1;
    border-radius: 5px;
    margin-left: 1rem;
}

p.italic{

    text-align: left;
    font-weight: italic;
    color:white;

}
p.normal{

    text-align: justify;
    font-weight: bold;
    color: white;
  }


p.wht{
    text-align: justify;
    font-weight: bold;
    color: #9dbb19;
  }

p.thick {
    text-align: justify;
    font-weight: bold;
    color: #5719bb;
  }
  
h2 {

    color:#007185
}

  
.nav-center:hover {
    outline: 2px solid rgb(232, 176, 73);
}

.search-dropdown {
    width: 5rem;
    font-size: 1rem;
    background-color: rgb(210, 208, 208);
    padding: .5rem;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.search-dropdown:focus {
    outline: none;
}

.search-box {
    font-size: 1rem;
    flex-grow: 1;
    padding: .5rem;
}

.search-box:focus {
    outline: none;
}

.search-icon i {
    height: 100%;
    background-color: rgba(255, 203, 105, 0.849);
    border-radius: 0 5px 5px 0;
    padding: .7rem .5rem;
    outline: none;
}

.nav-right {
    display: flex;
    align-items: center;
    margin: 0 1rem;
}

.language-option {
    display: flex;
    padding: .5rem .5rem;
}

.language-option:hover {
    outline: 1px solid white;
}

.flag {
    width: 20px;
}

.select-language {
    font-size: .7rem;
    font-weight: bold;
    color: white;
    background: transparent;
    border: none;
}

.select-language option {
    color: black;
}

.account-option {
    padding: .5rem .5rem;
}

.account-option:hover {
    outline: 1px solid white;
}

.account-option .top-text {
    font-size: .5rem;
    margin-left: 5px;
}

.select-account {
    font-size: .7rem;
    font-weight: bold;
    background: transparent;
    color: white;
    border: none;
}

.order-option {
    padding: .5rem .5rem;
}

.order-option:hover {
    outline: 1px solid white;
}

.order-option .top-text {
    font-size: .5rem;
}

.order-option .bottom-text {
    font-size: .7rem;
    font-weight: bold;
}

.cart-option {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    padding: .5rem .5rem;
}

.cart-option:hover {
    outline: 1px solid white;
}

.cart-logo i {
    width: 20px;
}

.nav-options {
    height: 42px;
    display: flex;
    align-items: center;
    background-color: #27534c;
    color: white;
    justify-content: start;

}

.nav-options p{
    display:inline;
    align-items: center;
    width:70%
}

.nav-options * {
    cursor: pointer;
}

.all-logo {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem;
    margin-left: 2rem;
}

.all-logo:hover {
    outline: 1px solid white;
}

.nav-options .options {
    display: flex;
}

.nav-options .options p {
    padding: 0.5rem;
}

.nav-options .options p:hover {
    outline: 1px solid white;
}

/* Main */
main {
    width: min(1500px, 100%);
    position: relative;
    left: 50%;
    transform: translate(-50%);
}

.carousel {
    width: 100%;
    height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.carousel .slides-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.carousel .slides-container::-webkit-scrollbar {
    display: none;
}

.slides-container .slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100%;
    overflow: hidden;
}

.slide .content {
    width: 100%;
    height: 100%;
}

.slide .content img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.slide .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    scale: 2;
    margin: 1rem;
}

.slide .prev {
    left: 1rem;
}

.slide .next {
    right: 1rem;
}

.carousel .text {
    width: 95%;
    position: absolute;
    text-align: center;
    font-size: .7rem;
    background-color: #f5f6f6;
    padding: 1rem;
    margin-bottom: 2rem;
}

.carousel .text a {
    text-decoration: none;
    font-weight: bold;
    color: #007185;
}

.items-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    background-color: #55978e82;
    padding: 0 2rem 2rem 2rem;
    font-weight: bold;
}


.items-containermain {
  
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    background-color: #55978e82;
    padding: 0 2rem 2rem 2rem;
    font-weight: bold;
}


.container {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    overflow: hidden;
    background-color: #55978e82;
}


.item-card {
    height: 100%;
    width: 100%;
    
    font-weight: bold;
    

    display: flex;
    flex-direction: column;
    flex: 1 0 300px;
    gap: 1rem;
    font-size: 1rem;
    background-color: #55978e82;
    
    padding: 1rem;
    cursor: pointer;
    overflow: hidden;
}

.item-cardmain {
    height: 90%;
    width: 100%;
    
    font-weight: bold;
    

    display: flex;
    flex-direction: column;
    flex: 1 0 300px;
    gap: 1rem;
    font-size: 1rem;
   
   margin: 0; 
    padding: 1rem;
    cursor: pointer;
    overflow: hidden;
}

.item-card1 {
    height: 300px;
    width: 250px;
    display: flex;
    flex-direction: column;
    flex: 1 0 300px;
    gap: 1rem;
    font-size: .7rem;
    background-color: #55978e82;
    padding: 1rem;
    cursor: pointer;
    overflow: hidden;
}

.img{

    width: 100px;
    height: 100px;
    overflow:hidden;

}
/*
.item-card-page img {
   
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:50%;
    /*height : 50%;
    object-fit: cover 
}*/


.item-card img {
    height: 300px;
    width: 100%;
    border: 2px solid black;
    object-fit: cover;
}

.item-card a {
    text-decoration: none;
    font-weight: bold;
    color: #007185;
}

/* Footer */
.back-option {
    text-decoration: none;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .5rem;
    font-weight: bold;
    color: white;
    background-color: #37475A;
}


.nav-left {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: .5rem;
}


.footer-links {
    height: 300px;
    display: flex;
    justify-content: space-evenly;
    background-color: #232F3E;
    color: white;
}

.footer-links ul {
    margin-top: 3rem;
}

.footer-links ul p {
    font-weight: bold;
}

.footer-links ul a {
    display: block;
    font-size: .7rem;
    color: #dddddd;
    margin-top: 1rem;
    cursor: pointer;
}

.footer-links ul a:hover {
    text-decoration: underline;
}

.policies {
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .5rem;
    color: white;
    background-color: #131A22;
}

.pages a {
    text-decoration: none;
    color: white;
    margin-left: 1rem;

}

/* Small Devices */
@media screen and (max-width: 900px) {
    :root {
        font-size: 2vw;
    }

    /* Header  */
    nav {
        height: 5vw;
    }

    .nav-logo img {
        width: 7vw;
    }

    .nav-center {
        height: 4vw;
    }

    .search-dropdown {
        width: 7vw;
    }

    .search-box {
        width: 1vw;
    }

    .search-icon i {
        padding: .5rem .5rem;
    }

    .flag {
        width: 2vw;
    }

    .cart-logo {
        width: 3vw;
    }

    .nav-options {
        height: 5vw;
    }

    /* Main */
    .carousel {
        height: 30vw;
    }

    .arrow i {
        height: 4vw;
    }


    .item-card {
        height: 25vw;
        flex: 1 0 20vw;
        font-size: .5rem;
    }

    .item-card img {
        height: 14vw;
    }

    /* Footer */
    .back-option {
        height: 5vw;
    }

    .footer-links {
        height: 40vw;
    }

    .country-info .logo img {
        width: 7vw;
    }

    .policies {
        height: 8vw;
    }
}