@media(max-width:800px){
    .slider {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  margin-top:40px;
 
}
}
.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  animation: slide 10s infinite;
  opacity: 0;
  
  
  
   
}
@media(max-width:800px){
    .slide {
  width: 100%;
  height: 100%;
  position: absolute;
  animation: slide 10s infinite;
  opacity: 0;
  
}
}
/* Add more slides as needed */

@keyframes slide {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  8% {
    opacity: 1;
    transform: translateX(0);
  }
  33% {
    opacity: 1;
    transform: translateX(0);
  }
  41% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
#ci{
    
    margin-left:10%;
    width:40%;
    height:50%;
    border-radius:50%;
    background-color:transparent;
    border:30px solid #069cc2;
    border-right:46px solid #069cc2;
     border-bottom:10px solid #069cc2;
    float:left;
    position:absolute;
    z-index:1;
    font-size:6em;
    color:white;
    font-family:sans-serif;
    text-align:right;
    
}
@media(max-width:800px){
    #ci{
    
    margin-left:1%;
    width:20%;
    height:30%;
    border-radius:50%;
    background-color:transparent;
    border-top:60px solid #069cc2;
    border-right:46px solid #069cc2;
    border-left:5px solid #069cc2;
     border-bottom:10px solid #069cc2;
    float:left;
    position:absolute;
    font-size:6em;
    color:white;
    font-family:sans-serif;
    text-align:right;
    
}
}
#de{
    width:25%;
    height:50px;
    color:white;
    background-color:#ff5347;
    float:right;
    border-radius:15px;
    margin-top:-15px;
    margin-right:-15px;
    font-family:sans-serif;
    font-size:1.4em;
    
}
#car{
    width:20%;
    height:37px;
    background-image:url("car1.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    float:right;
    border:none;
    
    
    
}
@media(max-width:800px){
    #car{
    width:27%;
    height:37px;
    background-image:url("car1.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    float:right;
    border:none;
    
    
    
}
}
#car2{
    width:3%;
    height:30px;
    background-image:url("car2.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    float:left;
    border:none;
display:inline-block;
margin-left:10px;
    margin-top:27px;
    
    
}
@media(max-width:800px){
    #car2{
    width:10%;
    height:30px;
    background-image:url("car2.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    float:right;
    border:none;
     margin-top:10px;
    display:block;
}
}
#menu{
    width:3%;
    height:30px;

    float:left;
    border:none;
display:inline-block;
margin-left:10px;
    margin-top:30px;
   
    
    
}
@media(max-width:800px){
    #menu{
    width:10%;
    height:30px;
    margin-top:5px;
    float:left;
    border:none;
    display:inline-block;
}
}
#lin{
    width:100%;
    height:3px;
    margin-top:7px;
    background-color:#0783a2;
}
#lin1{
    width:100%;
    height:3px;
    margin-top:7px;
    background-color:#0783a2;
}
@media(max-width:800px){
    #lin1{
    width:100%;
    height:3px;
    margin-top:7px;
    background-color:white;
}
}

#sec4{
    width:24%;
    height:200px;
  background: rgb(2,0,36);
background:background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, #1f0045 11%, rgb(97 97 133) 100%);;
    display:inline-block;
}
@media(max-width:800px){
    #sec4{
    width:43%;
    height:270px;
  background: rgb(2,0,36);
background:background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, #1f0045 11%, rgb(97 97 133) 100%);;
    display:inline-block;
}
}
#sec4 img{
    width:100%;
    height:100%;
    
}
#ca1{
        display:none;
        background-color:rgba(0,0,0,0.30);
        width:100%;
        height:100%;
        position:fixed;
        z-index:10000;
        top:0;
        left:0px;
    }
    #cas{
        margin-top:20px;
        width:70%;
        height:85%;
        background-color:white;
        text-align:left;
        overflow:auto;
    }
    @media(max-width:800px){
         #cas{
        margin-top:80px;
        width:100%;
        height:90%;
        background-color:white;
        text-align:left;
        
    }
    }
    #cas img{
        margin-top:0px;
        width:10%;
        height:70px;
        background-image:url('$img');
        background-repeat: no-repeat;
        background-size:contain;
        background-position:center;
        float:left;
        display:block;
    }
     #cas form{
       
        float:left;
        
    }
    #buton{
        padding:10px;
        background-color:#9dc206;
        color:white;
    }
    #ba{
        margin-top:16px;
        padding:10px;
        background-color:#ff5347;
        color:white;
        float:right;
    }
    #me{
      width:245px;
      height:40px;
      background-color:green;
      color:white;
      position:fixed;
      bottom:10px;
      left:10px;
      animation:my 1s;
      display:none;
      font-family:sans-serif;
      font-size:1.4em;
      z-index:100;
      
    }
    @keyframes my{
        
      from{ left:-300px; }
      
      to{left:10px;}
    }
    
     #menus{
      width:370px;
      height:100%;
      background-color:white;
      color:#0783a2;
      position:fixed;
      top:0;
      left:0px;
      animation:myp 1s;
      display:none;
      font-family:sans-serif;
      font-size:1.4em;
      z-index:100000;
       overflow:auto;
      
    }
    #menus p{
   margin-top:15px;
      font-family: Helvetica;
      font-size:1.3em;
    float:left;
letter-spacing:2px;
    margin-left:20px;
    display:inline-block;
}
    @keyframes myp{
        
      from{ left:-300px; }
      
      to{left:0px;}
    }
    #co {
    padding: 2px;
    font-size: 0.5em;
    width:15px;
    height:15px;
    border-radius:50%;
    background-color:white;
    float:right;
    margin-top:3px;
}
@media(max-width:800px){
       #co {
    padding: 2px;
    font-size: 0.6em;
    width:17px;
    height:17px;
    border-radius:50%;
    background-color:white;
    float:right;
    margin-top:0;
}
}

#sli{
    width:100%;
    height:300px;
    overflow:auto;
}
#sli::-webkit-scrollbar {
  display: none;
}
#slid{
    width:3000px;
    height:280px;
  
  position: relative;
  transition: left 0.5s;
}
#slid1{
    width:3000px;
    height:280px;
  
  position: relative;
  transition: left 0.5s;
}
#slid2{
    width:3000px;
    height:280px;
  
  position: relative;
  transition: left 0.5s;
}
#cu{
    width:300px;
    height:300px;
    display:inline-block;
    background-color:grey;
    margin:15px;
     background-repeat: no-repeat;
        background-size:cover;
        background-position:center;
}
#lu{
    width:100%;
    height:100%;
    display:inline-block;
    background-color:grey;
  border-radius:50%;
     background-image:url('lu.png');
        background-repeat: no-repeat;
        background-size:cover;
        background-position:center;
}
@media(max-width:800px){
    #lu{
    width:100%;
    height:100%;
    display:inline-block;
    background-color:grey;
    border-radius:2%;
     background-image:url('lu.png');
        background-repeat: no-repeat;
        background-size:cover;
        background-position:center;
}
}
   #lef{
       left:0px;
       height:30px;
       width:30px;
       color:white;
       background-color:black;
      position:absolute;
      z-index:10;
         margin-top:140px;
   }
   #rig{
       margin-top:140px;
       right:0px;
         height:30px;
       width:30px;
       color:white;
       background-color:black;
       position:absolute;
      z-index:10;
   }
   @media(max-width:800px){
        #lef{
       display:none;
   }
   #rig{
     display:none;
   }
   }

#vent{
    width:100%;
    height:100%;
    overflow:auto;
    background-color:white;
    
}
@media(max-width:800px){
    #vent{
    width:100%;
    height:100%;
    background-color:white;
    overflow:auto;
    
}
}
#vent1{
    width:71%;
    height:100%;
    position:fixed;
    z-index:10000;
    right:0px;
    bottom:0px;
    background-color:rgba(0,0,0,0.20);
    display:none;
    
}
@media(max-width:800px){
#vent1{
    width:80%;
    height:100%;
    position:fixed;
    z-index:1000000;
    left:0px;
    bottom:0px;
    background-color:rgba(0,0,0,0.20);
    display:none;
    
}
}

#foot ul{
    width:100%;
    height:20%;
   
    
}
#foot li{
    width:20%;
    height:20%;
    display:inline-block;
    
}
#foot img{
    width:70%;
    height:80px;
    display:inline-block;
    
}