@media (max-width: 480px) {
nav{
  width:100vw ;
}

main{
  display:flex;
  flex-direction:column ;
  margin-bottom: 47%;
}

.main-container{
   margin-left:0;
}
.s{
  display:flex;
  flex-direction: column;
  margin-bottom:3%;
  gap:2%;
}

.s1{
  display: flex;
  justify-content: space-between;
  height:2.6rem;
}
.s1 button{
  width:25%;
  height:100%;
  margin-left:3%;
  border-radius:3px;

}

.s1 .btn2{
  display:none;
  
}

.c{
 width:96vw;
 height:5rem;
}

.s3{
  display:flex;
  flex-direction: column;
  gap:2%;
}

.chart{
  height:17rem;
  width:95.5vw;
}

.container{
  width:96vw;
  margin-left:2%;
}

/*Side bar code start */
aside {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 10%;
min-height: unset;  
top: unset;          
background-color: #202020;
justify-content:unset ;
display: flex;
padding: unset;
z-index: 1000;
}


.sidebar-list{
  display:flex;
  justify-content:space-around;
  padding-left: 5%;
}


.list-items ul{
display:flex;
gap:60%;
}



.list-items ul li a{
  text-decoration: none;
}


.list-items ul li i,
.profile ul li i{
font-size:1.7rem ;
}

.logo{
  padding-bottom: unset;
  padding-left:unset;
  display: none;
 }

 .logo i{
   font-size:3rem;
 }

 .profile{
   position:unset;
   margin-left:95%;
   padding-left:35%;
  
   
 }

 .d{
   display:none;
 }
 /*----Sidebar Code End--------*/

 /*Modal arrows */
 .modal-arrow {
 position: absolute;
 top: 25%;
 transform: translateY(-50%);
 font-size: 35px;
 color: #333;
 cursor: pointer;
 z-index: 1001;
 user-select: none;
 transition: color 0.2s ease;
 }

 #modal-prev {
 left: 2%; /* distance from modal left edge */
 }



 #modal-next {
 right: 2%; /* distance from modal right edge */
 }

 .modal-arrow:hover {
 color: #0056b3;
 }
  
   }