body{
margin: 0;
padding: 0;
margin-top: 20px;
}
#menu li{
    list-style: none;
    display: inline-block;
}
#menu li{
    list-style: none;
}
    #menu li a{
  text-decoration: none;  
  position: relative;
  color: #313131;
  font-size: 30px;
  font-weight: 700;
  font-family: sans-serif;
  display: block;
  overflow: hidden;
  transition: 0.7 all;
  padding: 14px 30px; 
  text-transform: uppercase;
    }
    #menu li a:before{
  content: '';
  width: 60px;
 position: absolute;
 border-bottom: 8px solid blue;
 bottom: 0;
 right: 350px;
 transition: 0.7s all;
    }
    #menu li a:hover:before{
        right: 0;
    }
    .slider{
        width: 800px;
        height: 500px;
        border-radius: 10px;
        overflow: hidden;
        }
        
        .slides{
        width: 500%;
        height: 500px;
        display: flex;
        
        }
        
        .slides input{
        display: none;
        }
        
        .slide{
        width: 20%;
        transition: 2s;
        }
        
        .slide img{
        width: 800px;
        height: 500px;
        }
        
        /*css for manual slide navigation*/
        
        .navigation-manual{
        position: absolute;
        width: 800px;
        margin-top: -40px;
        display: flex;
        justify-content: center;
        
        }
        
        .manual-btn{
        border: 2px solid #40D3DC;
        padding: 5px;
        border-radius: 10px;
        cursor: pointer;
        transition: 1s;
        }
        
        .manual-btn:not(:last-child){
        margin-right: 40px;
        }
        
        manual-btn:hover{
        background: #40D3DC;
        }
        
        #radio1:checked ~ .first{
        margin-left: 0;
        }
        
        #radio2:checked ~ .first{
            margin-left: -20%;
            }
        
        #radio3:checked ~ .first{
        margin-left: -40%;
        }
        
        #radio4:checked ~ .first{
        margin-left: -60%;
        }
        
        /*css for automatic navigation*/
        
        .navigation-auto{
        position: absolute;
        display: flex;
        width: 800px;
        justify-content: center;
        margin-top: 460px;
        }
        
        .navigation-auto div{
        border: 2px solid #40D3DC;
        padding: 5px;
        border-radius: 10px;
        transition: 1s;
        }
        
        .navigation-auto div:not(:last-child){
        margin-right: 40px;
        }
        
        #radio1:checked ~ .navigation-auto .auto-btn1{
        background: #40D3DC;
        }
        
        #radio2:checked ~ .navigation-auto .auto-btn2{
        background: #40D3DC;
        }
        
        #radio3:checked ~ .navigation-auto .auto-btn3{
        background: #40D3DC;
        }
        
        #radio4:checked ~ .navigation-auto .auto-btn4{
        background: #40D3DC;
        }

        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body{
line-height: 1.5;
font-family: 'Poppins', sans-serif;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
max-width: 1170px;
margin: auto;
}

.row{
display: flex;
flex-wrap: wrap;
}

ul{
list-style: none;

}

.footer{
background-color: #24262b;
padding: 70px 0;

}

.footer-col{
width: 25%;
padding: 0 15px;

}

.footer-col h4{
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;

}

.font-col h4::before{
content: ;
position: absolute;
left: 0;
bottom: 10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}

.footer-col ul li a{
font-size:16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}

.footer-col ul li a:hover{
color: #ffffff;
padding-left: 10px;
}

.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2) ;
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s  ease;
}

.footer-col .social-links a:hover{
color:#24262b;
background-color: #ffffff;
}