*{
    padding: 0;
    margin: 0;
}

body{
    background-color: navy;
    background-image: url("ceramic2.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

/* for navbar section */
nav{
display: flex;
justify-content: space-between;
align-items: center;
background-color:black;
padding: 20px;
position: fixed;
top: 0;
left: 0;
right:0 ;

}


nav span{
    color: white;
    font: bold;
    font-weight: bold;
    font-size: larger;
}
nav a{
color: aqua;
font-weight: bolder;
font-size: x-large;
text-decoration: none;
}

ul{
display: flex;
gap: 25px;
}

ul li{
list-style-type: none;
color: azure;
font-weight: 600;
font-size: large;
}

li:hover{
background-color: orange;
color: black;
transition: all .5s ease;
border-radius: 2px;
padding-left: 4px;
padding-right: 4px;

}

/* Home section */
#Home{
/* background-color: gray; */
padding: 40px;
height: 250px;

}

.Home-container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 100px;
z-index: 9999;
position: fixed;
left: 0;
right: 0;

}

.Home-container h1{
font-size: xx-large;
font-weight: bold;
color: aqua;
/* background-color: black; */
}

.Home-container p{
font-size: x-large;
font-weight: bold;
/* background-color: navy; */
color: yellow;
}

.Home-container button{
padding: 10px 40px;
background-color: cyan;
outline: 0;
color:black;
font-size: large;
border-radius: 15px;
z-index: 99;
}

button:hover{
cursor: pointer;
border-color: blueviolet;
transform: translatey(10px);
transition: 0.7s all ease-out;

}

/* footer section */
footer{
position: fixed;
background-color:navy;
padding: 20px;
bottom: 0;
left: 0;
right: 0;
text-align: center;

color: white;
}


  #video-section{
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    position: relative;
  }


video{
    width: 382px;
    height: 300px;
    z-index: 99999999;
    
}



@media (max-width:600px) {
     nav{
        width: 100%;
        padding: 30px;

     }

     ul li{
        display: flex;
         justify-content:space-evenly;
          margin-right: 40px;
     }

     .Home-container p{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 50px;
     }


     .Home-container button{
        font-size: larger;
        color: navy;
        margin-right: 20px;
     }

     #video-section{
     margin-top: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     justify-self: center;
     position: relative;
     margin-left: 20px;
  }


  video{
    width: 382px;
    height: 200px;
    z-index: 99999999;
}

}


/* images slider section */
.slider {
    width: 100vw;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
}
.slides {
    display: flex;
    width: 100vw;
    position: fixed;
    height: 100%;
    animation: slide 8s linear infinite;
}
.slide {
    width: 100vw;
    height: 100%;
}
.slide img {
    width: 150px;
    margin: 6px;
    height: 150px;
    object-fit:cover;
}
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-200vw); }
}




@media only screen and (max-width:400px){
nav{
width: 100%;
z-index: 9999;
}

nav ul{
display: flex;
justify-content: space-between;
gap: 8px;
}

section{
width: 100%;
}

.slider {
    width: 100vw;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin-top: 40px;
}


}