.content {
    min-height: calc(100% - 100px); /* احتياطي لارتفاع الـ footer */
  }
  
  footer {
    height: 50px;
    background-color: #f2f2f2;
  }
  
  .footer-content {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }
 
main {
    display: grid;
    height: 100%;
    width: 100%;
    place-items: center;
    background: linear-gradient(315deg,#ffffff,#d7e1ec);
}
.wrappr{
    display: inline-flex;
 
}
.wrappr .icon{
   margin: 0 20px;
   display: flex;
   align-items: center;
   justify-items: center;
   flex-direction: column;
   position: relative;
   z-index: 2;
   cursor: pointer;
   transition: all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrappr .icon span{
    position: relative;
    height: 50px;
    width: 50px;
    display: block;
     background: #6B8B8A; 
    text-align: center;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 10px 10px rgba(0,0, 0, 0.1);

}
a  {
    color: inherit   ; 
    text-decoration: inherit   ;
}
.wrappr .icon span i{
  font-size: 25px;
  line-height: 50px;
  color: #fff;}
.wrappr .icon .tooltip{
  position: absolute;
  top:0;
  background: #fff;
  color: #fff;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 25px;
  box-shadow: 0 10px 10px rgba(0,0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrappr .icon:hover .tooltip{
    top: -57px;
    opacity: 1;
    pointer-events: auto;
}
.wrappr .icon:hover a  {
   color: #fff; 
}
.wrappr .icon  a  {
  color: #060505; 
}
.wrappr .icon .tooltip::before{
    position: absolute;
    content: '';
    height: 15px;
    width: 15px;
    background: #fff;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}
 
.wrappr .icon span i {
    font-size: 25px;
    line-height: 50px;
    color: #fff;}
.wrappr .icon:hover span,
.wrappr .icon:hover .tooltip

{
text-shadow: 0px -1px 0px rgba(0,0, 0, 0.4);
    
}

.wrappr .whatsapp:hover span,
.wrappr .whatsapp:hover .tooltip,
.wrappr .whatsapp:hover .tooltip::before
{
background: #25D366;
}
.wrappr .twitter:hover span,
.wrappr .twitter:hover .tooltip,
.wrappr .twitter:hover .tooltip::before
{
background: #00acee;
}
.wrappr .youtube:hover span,
.wrappr .youtube:hover .tooltip,
.wrappr .youtube:hover .tooltip::before
{
background: #FF0000;
}
.wrappr .instagram:hover span,
.wrappr .instagram:hover .tooltip,
.wrappr .instagram:hover .tooltip::before
{
background: #e1306c;
}
.wrappr .googleMap:hover span,
.wrappr .googleMap:hover .tooltip,
.wrappr .googleMap:hover .tooltip::before
{
background: #4a89f3;
}