.footer{
    max-width: 100%;
    position:sticky;
        bottom:0;
        left:0;
    height:420px;
    color:#fbfbfb;
    background-color:#141414;
    padding-top: 1rem;
    padding-bottom:1rem;
    --gap:0.5rem;
    margin-top: 2rem;
}
.phone,
.mail{
    align-items: center;
 
}
.mail{
    --gap:0rem;
}
.footer,
.footer_list,
.contact_info,
.location
{
  
    flex-direction: column;
    --gap:1rem;
    padding-left: 0.5rem;
}

.footer_logo{
    width:90px;
    height:70px;
}

.footer_list li,
.contact_info,
.footer_list>p
{
    font-size: 12px;
    margin-bottom:0.5rem;
    background-image:linear-gradient(
    45deg,
    hsl(46deg 67% 51%) 0%,
    hsl(45deg 68% 62%) 9%,
    hsl(46deg 73% 69%) 18%,
    hsl(46deg 81% 75%) 27%,
    hsl(46deg 83% 77%) 36%,
    hsl(45deg 70% 70%) 45%,
    hsl(45deg 63% 62%) 55%,
    hsl(45deg 60% 50%) 64%,
    hsl(45deg 58% 52%) 73%,
    hsl(45deg 58% 60%) 82%,
    hsl(45deg 60% 65%) 91%,
    hsl(46deg 63% 71%) 100%
  );
  background-size: 100%;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
.footer_item a:hover{
    color:var(--body-white);
    transition:0.7s ease;
}
.contact__us p{
    font-size: 12px;
}
.linkedin{
    background-color: white;
    border-radius: 50%;
}
.contact_social> img{
    width:20px !important;
    height:20px !important;
}
.contact_social{
   
    margin-right:0.8rem;
}


.contact__us{
    width:100%;
    display:flex;
    flex-direction: column;
    gap:1rem;
}

@media(min-width:540px){
    .footer{
        flex-direction: row;
        justify-content: space-between;
        padding-inline: 4rem;
        height:250px;
        padding-top: 2rem;
        padding-bottom:0;
     
    }
   
}
@media (min-width:768px) {
    .footer{
        flex-direction: row;
        justify-content: space-between;
        padding-inline: 4rem;
        height:250px;
        padding-top: 2rem;
        padding-bottom:0;
     
    }
    
    .footer_list,
    .contact_info,
    .location
    {
        flex-direction: column;
        padding-left: 0;
    }
    .social_media{
        padding-left: 0;
        flex-direction: column;
    }
    .location{
        padding:0;
        --gap:0.5rem;
    }
    .footer_list li{
        margin-bottom:0.5rem;
    }
    
    .linkedin{
        /* background-color: white; */
        border-radius: 50%;
    }
}
@media (min-width:1024px) {
    .footer{
        font-size: 15px ;
        padding-inline: 10rem;
    }
    .contact__us p{
        font-size: 14px;
    }
    .footer_list li,
    .contact_info,
    .footer_list>p
    {
        font-size: 14px;
    }
}
@media (min-width:1440px) {

   
    .footer_logo{
        width:130px;
        height:100px;
    }
    .footer_nav{
        margin-top: 1rem;
    }
    .footer_item a:hover,
    .contact__us p:hover
    {
        cursor:pointer;
        font-weight: 800;
        transition:0.7s ease;
    }
    
}