 <style> 
    
    .responsive {
  width: 100%;
  height: auto;
        border-radius:20px;
}
    
.floatdivpop{
	position:fixed;
	
  z-index:100;
       width:60%;
height:auto;
 top:125px;
      display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
 left:20%;
     /* box-shadow: 20px 10px 30px grey;*/
}
    
            .floatdiv{
            position:fixed;
            bottom:40px;
                right:10px;
            text-align:center;
          z-index:100;
        }
    
                 .wpshadow{
                width:10px;
                height:10px;

                background-color:#d5f1df;
                color:#FFF;
                border-radius:50px;
                text-align:center;
              font-size:10px;
                box-shadow: 2px 2px 3px #999;
                }

                   .float2{
                width:45px;
                height:45px;
                background-color:#25d366;
                color:#FFF;
                border-radius:50px;
                text-align:center;
              font-size:25px;
                box-shadow: 2px 2px 3px #999;
              z-index:100;
            }
   
            .my-float{
                margin-top:16px;
            }
             .mob-web-icon{
        margin-top:7px

            }
    
          .mobile-articles {
                  visibility:hidden;
                  display: none;
            }
        @media (max-width: 414px) and (min-width: 367px) {
          @viewport {
            width: device-width;
          }
    
    }
    
    @media screen and (max-width : 414px) {
        .mobile-articles {
            visibility:visible;
            display: block;
    
        }
              .floatdivpop{  /* for mobile screen */
              position:fixed;

            z-index:100;
                 width:100%;
          height:auto;
           top:10px;
                display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
left:00%;
          }
 
        .mob-web-icon{
    margin-top:3px

        }

          .my-float{
          margin-top:26px;
      }
    
    
  }
    
    
<!-- The Modal style -->

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
 /* position: fixed;  Stay in place */
  z-index: 1; /* Sit on top */
  /*padding-top: 100px;  Location of the box */
 
   /*width: 100%; Full width */
  /* height: 100%;  Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.btnpop{
      display: none; /* Hidden by default */
    }
    
    
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;

  width:100%;
    height:auto;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: red;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

// new floater css

.floatdiv {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center icons horizontally */
    justify-content: space-around; /* Equal vertical spacing */
    height: 200px; /* Adjust total height */
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
}

.icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
    color: #000;
    font-size: 18px;
    text-decoration: none;
}

.icon-link:hover {
    background: #f0f0f0;
}

/* Hide fb & insta on mobile */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}

</style>