style.css

body {
    background-color: whitesmoke;
}



#main div {
    height: 100px;
    width: 100%;
    border: 1px solid black
}

#Nav0 {
    height: 50px;
}


#find {
    margin-top: 0px;
    margin-left: 50px;
    margin-bottom: 50px;
    border-radius: 5%;
    color: red;
    padding: 5px;
    border: 3px solid black;
    background-color: whitesmoke;
}

#Nav1>button>a {
    text-decoration: none;
}


#logo {
    margin-left: 400px;
    margin-top: 0px;
    height: 70px;
    width: 300px;

}

#search {
    margin-left: 250px;
    font-size: bold;    
}

#SignIn {
    margin-left: 40px;
    
}

#signup1{
    margin-left: 280px;
    margin-top: 20px;
    border: 3px solid black;
    color: black;
    border-radius: 5%;
    padding: 10px;
    background-color: whitesmoke;
}

#Cart {
    margin-left: 40px;

}

#Language {
    margin-left: 50px;
    border: 3px solid black;
    font-size: 20px;
    padding: 7px 40px;
    text-decoration: none;
    /* color: red; */


}

#Nav2 {
    border: 1px solid rgb(239, 12, 12);
    height: 100px;
    width: 100%;
    margin-top: 0px;
    text-align: center;
}

#Nav2 button {
    margin-top: 42px;
    align-content: space-around;
    border: none;
    font-size: 10px
}

#Nav2>button>a {
    text-decoration: none;
}

#add {
    display: flex;
    height: 600px;
    width: auto;
    margin-left: auto;
    padding: 40px 250px;
    text-shadow: 0rem;
    align-self: stretch;
    margin-top: 50px;

}

.para {
    background-color: rgb(107, 52, 107);
    text-align: center;
    color: aliceblue;

}

.para>h1 {
    margin-top: 150px;

}

#gift {

    height: 400px;
    width: 1000px;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    padding: 20px 20px;
    transition: 1s;
}

#gift img {
    height: 400px;
    width: 300px;
    border-radius: 10%;
    /* height: 500; */
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

#shop {
    text-align: center;
    display: flex;
    width: 60%;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    /* border: 1px solid black; */
    transition: 1s;
}

.simg>img {
    width: 95%;
    border-radius: 1%;
}

button:hover {
    background-color: teal;
    transition: 1s;
}

#gift :hover {
    transform: scale(1.1);
    z-index: 2;
}

#shop .simg:hover {
    transform: scale(1.1);
    z-index: 2;

}

.container {
    height: 600px;
    width: 90%;
    /* border: 1px solid black; */
    margin: auto;
    margin-top: 30px;
    background-color: white;
    display: grid;
    place-items: center;
    background: linear-gradient(90deg, #00d2ff 0% #3a47d5 100%);
    position: relative;
    overflow: hidden;
    border-radius: 1%;
}

.slide-img>img {
    height: 200px;
    width: 250px;
    background-color: white;

}

.slide-container {
    display: flex;
    width: calc(250px*18);
    animation: scroll 10s linear infinite;

}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 9));
    }
}

.slide-img {
    height: 150 px;
    width: 350px;
    display: flex;
    align-items: center;
    padding: 15px;
    perspective: 100px;
}

img {
    width: 20 px;
    transition: transform 1s;
}

img:hover {
    transform: translateZ(30px);
}

button {
    font-size: 25px;
}

#Nav2 button {
    font-size: 20px;
}

.slide-container div {
    background-color: white;
    text-align: left;
}

#derm {
    height: 420px;
    width: 90%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin: auto;
    background-color: antiquewhite;


}

#flex-img>img {
    height: 300px;
    width: 260px;
    align-self: center;
    margin-left: 40px;
    margin-top: 20px;

}

#flex-img h4 {
    margin-left: 40px;
}

.btn {
    border: 2px solid black;
    border-radius: 5px;
    background-color: white;
    height: 40px;
    width: 90%;
    /* background-color: gray; */

}

#green {
    height: 300px;
    width: 80%;
    background-color: turquoise;
    margin: auto;
    padding-top: 60px;
    margin-top: 40px;
}

#white {
    height: 200px;
    width: 90%;
    background-color: white;
    margin: auto;
    padding-top: 30px;
    display: flex;
}

#white>div {
    margin-left: 40px;
}

#lab {
    height: 500px;
    width: 80%;
    background-color: bisque;
    margin: auto;
    display: flex;
    /* padding-top: 60px;*/
    margin-top: 40px;
}

#lab>div>div>img {
    height: 300px;
    width: 430px;
    justify-content: space-between;
}

#lab div div {
    justify-content: space-evenly;
}

.bt {
    margin-top: 60px;
    margin-left: 40px;
}

#la {
    margin-left: 40px;
}

.ba {
    border: none;
}

#Prod {
    display: flex;
}

#Pro {
    display: flex;
    height: 500px;
    width: 80%;
    margin: auto;
    margin-top: 30px;
    background-color: bisque;
}

#Prod>div>img {
    height: 450px;
    width: 400px;
    padding: 10px 10px;
}

.ds {
    margin-top: 120px;
    margin-left: 10px;
}

.foot {
    border-bottom: 2px solid black;
    border-top: 2px solid black;
    height: 500px;
    width: 100%;
    display: flex;
    margin-top: 40px;
}

.foot div {
    justify-content: space-around;
}

.d1 {
    margin-left: 40px;
}

.d3 {
    margin-left: 900px;
}

.foot>div>h3,
h2 {
    color: black;
    ;
}

#signup {

    margin-left: 10px;
    padding: 20px 20px 20px 20px;
    text-decoration: none;
    color: black;
    font-size: large;

}

#login {

    margin-left: 50px;
    border: 3px solid black;
    font-size: 20px;
    padding: 7px 40px;
    text-decoration: none;
    color: black;
    
}

#signup2{
    margin-left: 50px;
    border: 3px solid black;
    font-size: 20px;
    padding: 7px 40px;
    text-decoration: none;
    color: black;
}

 #gh{

     font-size: 50px;
     margin-bottom: 50px;
     color: greenyellow;
 }
 #gz{

    font-size: 30px;
    margin-bottom: 50px;
    color: black;
}