html

html{
  scroll-behavior:smooth;
  }
  

ul{
list-style:none;
margin:auto;
background:black;
}

ul li{
display:inline-block;
position:relative;

}

ul li a{
display:block;
border-radius:25px;
padding:15px;
color:white;
text-decoration:none;
text-align:center;
font-size:20px;

}

ul li ul.dropdown li{
display:block;

}

ul li ul.dropdown{
width:200%;
backgroun:gray;
position:absolute;
z-index:1;
display:none;
opacity:0.60;

}


ul li a:hover{
background:teal;
}

ul li:hover ul.dropdown{
display:block;
}

#zz{
  width:100%;
  margin:auto;
}



{
*{transition:0.60s;}
}

p{
  text-align:justify;
  font-size:20px;
  font-family:Arial, Helvetica, sans-serif;
  color:black;
  text-indent:100px;
  
}
  
p{
  width:100%
}


//div{border:1px black solid;}


nav{

width:100%;

//border:1px black solid;
padding:10px;
margin:auto;
//margin:3% 5% 10px  5%;
margin-top:5px;

}

#logo{
width:20%;
height:200px;
border:1px black solid;
}

#banner
{
width:100%;
height:100px;
}



#leftbar{
 width:80%;
padding:30px;
//hght:300px;

}


#main1{ 
  width:100%;
 padding:15px;
 margin:auto;
 height:auto;
 flex-direction:column;
 
 
 }

#middlebar{ 
 width:100%;
padding:5px;



}

footer
{

display:flex;
width:100%;
background:black;
color:white;
height: 500px;;
margin:auto;
justify-content:space-between;

}
#mcopy{
width:50%;
padding:20px;
height:300px;
}

#sitemap
{
width:50%;
padding:20px;
height:300px;
}


#socialmedia{
width:30%;
padding:20px;
height:300px;

}



@keyframes ani1
{
from{margin-left:0px;}
to{margin-left:-690%}
}


#mask
{
background:black;
width:90%;
margin:auto;
margin-top:10px ;
height:100px;
box-shaddow:10px 10px 10px gray;
overflow:hidden;
box-shadow:10px 10px 10px gray ;
}

#news
{
color:white;
width:800%;
height:100px;
font-family:arial black;
font-size:60px;
padding:10px;
transition:2s;
z-index:-1;
animation:ani1 40s linear infinite;
}





#divpic
{
width:100%;
display:flex;
justify-content:center;
justify-content:start;
align-items:center;
//flex-wrap:wrap;
padding:-100px;
margin:auto;
}

.picstyle
{
width:100px;
height:80px;
border-radius:13px;
box-shadow:4px 7px 7px 0px gray;
cursor:pointer;
margin:10px;
transition:400ms;
}

.picstyle:hover{
transform:scale(1.90)rotateY(29deg);
filter: blur(0.50);
}



#divpic
{
width:100%;
display:flex;
justify-content:center;
justify-content:start;
align-items:center;
flex-wrap:wrap;
padding:-100px;
margin:auto;
}


header{

width:100%;
height:100vh;
padding-left: 0%;
margin:auto;
background-image:url("images/2.png");
opacity:0.80;
background-position: bottom;
background-size:cover;
display: flex;
align-items:flex-end ;
justify-content:center ;

}

#body{
  overflow-x: hidden;
}

.header-content{

margin-bottom:150px;
color:white;

text-align:center;

}


.header-content h2 {

font-size:50px ;

}

.header-content h1 {

    font-size:60px ;
    margin-top:50px;
    margin-bottom:30px;
 }

 .cl{
   padding:15px 20px;
   background:black;
   border-radius:10px;
   color:white;
 }

 .cl:hover{
  transform:scale(1.80);
  filter:grayscale(1);
  }

 @keyframes showadd
 {
 0% {background-image:url(images/1.jpg); }
 10% {background-image:url(images/2.png); }
 20% {background-image:url(images/3.jpg); }
 30% {background-image:url(images/4.jpg); }
 40% {background-image:url(images/5.jpg); }
 50% {background-image:url(images/6.jpg); }
 60% {background-image:url(images/7.jpg); }
 70% {background-image:url(images/1.jpg); }
 90% {background-image:url(images/2.png); }
 100% {background-image:url(images/3.jpg); }
 }
 
 
 
 #banner2
 {
 width:80%;
 height:500px;
 //box-shadow:10px 10px 5px gray;
 top:10%;
 margin:auto;
 background-image:url(images/6.jpg);
 background-size:100% 100%;
 animation:showadd 29s infinite;
 }
 
 #topad
 {
 color:green;
 font-size:40px;
 font-family:arial black ;
 text-transform:uppercase ;
 box-shadow:10px 10px 10px black ;
 animation:multicolor 12s infinite ;
 }
 
 #About

 {
 margin:auto;
 width:90%;
 height:auto;

 
 }
 

 .pic1
 {
 box-shadow:10px 10px 10px gray;
 width:10%;
 height:100px;
 position:relative;
 margin-top:-10px;
 

 }


#cont{
  margin:auto;
  width: 100%;
  height:450px;
  justify-content:center;
  gap:20px;


}

.cont img{

  width:10%;
  height:100%;
  object-fit: cover;
  border-radius: 10px;
  border:2px solid black;
  transition: all ease-in-out 0.5s;
}

.cont img:hover{
  width:25%;

}

#inner-box{
  width: 100%;
  height:auto;
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  border:2px solid black;
}

.text
{
display: flex;
flex-wrap: wrap;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;  
box-shadow:2px 3px 2px gray;
margin: auto;
height:100px;

}

.author-info{
width:70% ;
border-radius: 10px;
border:2px solid black;
display: block;
text-align: center;
flex-wrap: wrap;
margin: auto;

}

.wow{
display:flex;
justify-content:center;
flex-wrap: wrap;

}

.car9{
  width:270px;
  height:300px;
  margin:10px;
  background-size: cover;
  border-radius: 10px;
  text-align: center;
  }



.car{
background:aqua;
width:270px;
height:300px;
margin:10px;
background-size: cover;
border-radius: 10px;
text-align: center;
}

.car-img{
text-align: center;
justify-content:center;
height:200px;
margin-bottom: 15px;
background-size: cover;
}

.car-1{
  background-image: url(images/26.jpg);
}

.car-2{
  background-image: url(images/19.jpg);
}

.car-3{
  background-image: url(images/33.jpg);
}

.car-4{
  background-image: url(images/18.jpg);
}


.car-5{
  background-image: url(images/35.jpg);
}


.car a{
  background-color: black;
  color:white;
  padding:15px;
  display:block;
  text-align: center;

}

.car:hover{

  background-color: bisque;
  color: white;
  cursor:pointer;
  transform:scale(1.03) rotate(-10deg);
  transition: all 1s ease;

}





.car3{
  background:aqua;
  width:270px;
  height:100px;
  margin:10px;
  background-size: cover;
  border-radius: 10px;
  text-align: center;
  }
  
  
  
  .car3 a{
    background-color: black;
    color:white;
    padding:15px;
    display:block;
    text-align: center;
  
  }
  
  .car3:hover{
  
    background-color:blanchedalmond;
    color: green;
    cursor:pointer;
    transform:scale(1.03);
    transition: all 1s ease;
  
  }
  
  .wow3{
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  
  }