@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*{
    margin: 0;
    padding: 0 ;
    font-family:  "poppins",sans-serif ;
    box-sizing: border-box;
}

body {
    height: 100vh;
    background: linear-gradient(#8a2432 ,#14748e  );
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-card {
    height: 600px;
    width: 350px;
    border-radius: 24px;
    
     box-shadow: 1px 1px 20px #14748e ;
    background:#fff;
    border: 3px solid #14748e;
    
}

.profile-card .logo img{
   display: flex;
   justify-content: center;
   margin: auto;
   margin-top:20px ;
    width: 171;
    height: 90px;
}

 .line1{
    height: 1px;
    width: 280px;
    background: #14748e;
    box-shadow: 1px 1px 5px #14748e;
    margin:10px 0 0 33px;
 }

 .find{
    display: flex;
    justify-content: center;
    font-size: 19px;
    font-weight: 600;
    margin-top: 10px;
    text-transform: capitalize;
    color: #8a2432;
 }

 .icons{
    border-radius: 10px;
    margin-top: 7px;
    margin-left: 13px;
    height: 275px;
    width: 320px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 1px 1px 10px #14748e;
    border: 2px solid #14748e;
 }

 

 a{
   color: #8a2432 !important;
 }

 .item1{
    padding: 20px;
    margin-left: 15px;
    margin-top: 3px;
   
 }

 .item1 a{
    color: #fc0000;
    margin-left: 11px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
 }

 .item2{
    margin-top: 2px;
    padding: 20px;
    margin-left: 10px;
 }

 .item2 a{
    color: #3a3a3c;
    text-decoration: none;
    font-size: 13px;
    margin-left: 12px;
    text-transform: capitalize;
    font-weight: 600;
 }

 .item3{
    padding: 20px;
    margin-left: 10px;
 }

 .item3 a{
    color:#117422;
    text-decoration: none;
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 600;
    margin-left: 10px;
 }

 .facebook{
    padding: 20px;
    margin-left: 10px;
 }

 .facebook a{
    color: #3b5998 ;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 600;
    margin-left: 13px;
 }

 .insta{
    padding: 20px;
    margin-left: 5px;
 }

 .insta a{
    color:#fe096c ;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 600;
    margin-left: 15px;
 }

 .x{
    padding: 20px;
    margin-left: 10px;
    margin-top: 13px;
 }

 .x a{
    color: black; 
 }

 .youtube{
    padding: 20px;
    margin-left: 15px;
  
 }

 .youtube a{
    color: #fc0000;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 600;
    margin-left: 12px;
 }

 .linkedin{
    padding: 20px;
    margin-left: 10px;
    margin-top: 2px;
   
 }

 .linkedin a{
    color: #0286c4;
    text-transform: capitalize;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    margin-left: 14px;
 }

 .item4{
    padding: 15px;
    margin-left: 17px;
    margin-top: 10px;

 }

 .item4 a{
    color: #e85b4d ;
    text-transform: capitalize;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    margin-left: 6px;
 }

 .share-btn{
   position: relative;
   border: none;
   background-color: #fff;
   color: #fff;
   border-radius: 50%;
    width: 30px;
   height: 30px; 
   font-size: 20px;
   padding-top: 2.5px;
   padding-right: 3px;
   cursor: pointer;
   z-index: 2;
   display: flex;
   justify-content: center;
  

  

}


.share-btn a{
   color: #14748e !important;
   text-decoration: none;
   display: inline;
   justify-content: center;
   font-weight: 600;
}

.share-btn a p{
   display: flex;
   font-size: 15px;
   margin-top: -5px;
   
}

.share-options{
   position: absolute;
   bottom: 20%;
   left: 53%;
   width: 65px;
   height: 70px;
   transform-origin: bottom right;
   transform: scale(0);
   border-top-right-radius: 20px;
   border-bottom-left-radius: 20px;
   background: rgba(15, 15, 15, 0.5);
   color: #fff;
   padding: 10px;
   font-family: 'roboto';
   transition: .5s;
   transition-delay: .5s;;
}



.share-options.active{
   transform: scale(1);
   transition-delay: 0s;
}


.share-options.active ,
.share-options.active .social-media,
.share-options.active {
   opacity: 1;
   transition: .5s;
   transition-delay: .5s;
}


.share{
   display: flex; 
   justify-content: center;
  gap: 30px;
  margin-top: 10px;
 
}

#overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 999;
}

#closePopupButton{       
   font-size:17px;
   margin-top:10px;
   }

   #installPopup {
       display: none;
       padding: 15px  30px;
       width: 80%;
       max-width: 400px;
       border: 1px solid black;
       background: #f9f9f9;
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 1000;
       text-align: center;
       
   }
   

   /* Install button styling */
   #multiActionButton {
       display:none;
       padding: 0px 15px;
       font-size: 25px;
       color:#14748e ;
       background-color:#fff;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       margin-top: 3px;
       transition: 0.2s;
   }


 .line2{
   display: flex;
   margin: auto;
   margin-top: 30px;
    height: 1px;
    width: 175px;
    background: #14748e;
    box-shadow: 1px 1px 10px #14748e;

 }

 .profile-card .footer {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    font-size: 13px;
    color: black;
    letter-spacing: 1px;
    font-weight: 600;

}

.profile-card .footer a {
    color: black;
    margin-left: 3px;
    text-decoration: none;
    transition: 0.2s;
}

.profile-card .footer a:hover {
    color: #14748e !important;
}