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

    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
#foot_div>.container{
   width: 78%;
   height: 360px;
    /* background-color: #f3efef; */
    margin:auto;
    margin-top:40px;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    flex-wrap: wrap;
    aspect-ratio:1/1;
}

ul{
    list-style: none;
}

.footer-col ul li:not(:last-child)
{
    margin-bottom:17px;
}
p{
    margin-bottom:15px;
    font-size: 15px;
    color:lightslategray;
}
h4{
   font-weight:500;
   font-size:18px;
}
ul li a{
    font-size: 15px;
    text-transform:capitalize;
    color:lightslategray;
    text-decoration: none;
    
}
.footer-col{
    background-color:white;
}
.footer-col ul li a:hover{

   color:sandybrown;
   padding-left: 8px;
}
.cont{
    text-decoration: none;
    color: lightslategray;
}
.cont:hover{
    color:sandybrown;
    padding-right: 2px;
}

#icon{
   
    text-align: center;

}
#icon>a{
    /* display:inline; */
    height: 40px;
    width: 40px;
    /* border:1px solid black; */
    margin:0 7px 0 7px;
    padding:8px;
    text-align: center;
    line-height: 40px;
    border-radius:50%;
    color: gray;
    background-color:whitesmoke;
    transition: all 0.5s ease;
}
.fa-facebook-f{
    padding-left: 7px;
    padding-right:7px;
    
}
.fa-twitter{
    padding-left: 4px;
    padding-right:4px; 
}
.fa-instagram{
    padding-left: 4px;
    padding-right:4px; 
}
.fa-youtube{
    padding-left: 3px;
    padding-right:3px; 
}
#f:hover{
    color: white;
    background-color:darkblue;
}
#t:hover{
    color: white;
    background-color:dodgerblue;
}
#i:hover{
    color: white;
    background-color:sandybrown;
}
#y:hover{
    color: white;
    background-color:red;
}
.footer-col>input{
    padding:10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    border:none;
    width: 250px;
    border-radius: 10px;
    
}
#button{
    padding: 10px;
    border-radius: 10px;
    border: none;
    color: white;
    background-color:sandybrown; 
}
#button:hover{
    color: white;
    background-color:black; 
    cursor: pointer;
}