html

html{
  scroll-behavior:smooth;
  }
  

ul{
list-style:none;
margin:auto;

}

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:left;
  font-size:20px;
  font-family:Arial, Helvetica, sans-serif;
  color:black;
  text-indent:100px;
  padding: 15px;
  text-indent:4px;

  

  
}
  
p{
  width:100%
}


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


nav{

width:100%;


padding:10px;
margin:auto;
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;


//ight:300px;

}

footer
{

display:flex;
width:100%;
background:black;
color:white;
height: 400px;;
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 ;
border-radius: 25px;
}

#news
{
color:white;
width:800%;
height:100px;
font-family:arial black;
font-size:60px;
padding:10px;
transition:2s;
z-index:-1;
border-radius: 25px;
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: 0.6s all ease-in-out;
}

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



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



 @keyframes showadd
 {
 0% {background-image:url(images/1.png); }
 10% {background-image:url(images/4.png); }
 20% {background-image:url(images/8.png); }
 30% {background-image:url(images/15.png); }
 40% {background-image:url(images/18.png) }
 50% {background-image:url(images/36.jpg); }
 60% {background-image:url(images/25.jpg); }
 70% {background-image:url(images/23.jpg); }
 90% {background-image:url(images/14.png); }
 100% {background-image:url(images/6.png); }
 }
 
 
 
 #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:whitesmoke;
 font-size:40px;
 font-family:arial black ;
 box-shadow:10px 10px 10px black ;
 animation:multicolor 12s infinite ;
 text-align: center;
 }
 
 #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;
  align-items: center;
  gap:20px;
  margin: auto;
 padding: 25px;
 display: block;

}

.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:10px 10px 10px gray;
margin: auto;
height:100px;

}

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

}



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





.car-5{
  background-image: url(images/12.png);
}







.car3{
  background:goldenrod;
  width:270px;
  height:100px;
  margin:10px;
  background-size: cover;
  border-radius: 30px;
  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;
  
  }




  /*small devices (portrait tab andlarge phones.600px and up)*/

@media only screen and (min-width:600px)
{

  

}

/* medium devices(landscapes tab ,768px and up)*/

@media only screen and (min-width:768px)
{

    
}

/* large devices(laptop/destop,992px and up)*/

@media only screen and (min-width:992px)
{




}

/*extra large devices(large laptop and desktop,1200px and up)*/

@media only screen and (min-width:1200px)
{

 
 
}

.explore{
  width:100%;
  height: 100vh;
  background-image:url("images/26.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.explore-content{
  width: 50%;
  padding: 50px;
  color: whitesmoke;
  margin: 50px;
  flex-direction: column;
  display: flex;
  align-items: center;
}

.explore-content p{
  color: azure;
}

.pi{

  margin:100px 0 0 200px;
  width:70%;
  height:450px;
  display:flex;
  justify-content:center;
  gap:30px;
  align-items: flex-start;
  margin: auto;
  
}

.pi img{
  width:20%;
  height:100%;
  object-fit:cover;
  border-radius: 5px solid teal;
  transition: all ease-in-out;
  border-radius: 25px;
}

.pi img:hover{
  width:35%;
 
}


.most-popular {
  margin-top: 60px;
  padding: 30px;
  
  border-radius: 23px;
}

.most-popular .item {
  
  padding: 30px 15px;
  border-radius: 23px;
  margin-bottom: 30px;
}

.most-popular .item .item {
  padding: 0px;
  border-radius: 0px;
  background-color: transparent;
  margin-bottom: 0px;
}

.most-popular .item img {
  border-radius: 23px;
}

.most-popular .item h4 {
  font-size: 15px;
  margin-top: 20px;
  margin-bottom: 0px;
  display: inline-block;
}

.most-popular .item span {
  color: #666;
  display: block;
  margin-top: 7px;
  font-weight: 400;
}

.most-popular .item ul {
  float: right;
  margin-top: 20px;
}

.most-popular .item ul li {
  text-align: right;
  color: #fff;
  font-size: 14px;
}

.most-popular .item ul li:first-child i {
  color: yellow;
}

.most-popular .item ul li:last-child i {
  color: #ec6090;
}

.most-popular .main-button {
  text-align: center;
  margin-bottom: -53px;
}


.hero-section {
  position: relative;
  overflow: hidden;
  padding-top: 100px;
  height: calc(100vh - 51px);
}

.hero-section small {
  color: var(--white-color);
  text-transform: uppercase;
}

.hero-section .section-overlay {
  z-index: 2;
  opacity: 0.45;
}

.hero-section .container {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-bottom: 50px;
}

.hero-section .container .row {
  height: 100%;
}