@import url('css2.css');
*{
box-sizing:border-box;

 } 
body{
justify-content:center;
  align-items:center;
  min-height:100vh;
 } 
.container111{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:40px 60px;
  padding: 50px 0;
      background:#f1f0fe;
 } 
.container111 .drop{
  position:relative;
  width:23%;
  height:305px;
  margin-right: 26px;
    margin-bottom: 25px;
    float:left;
  box-shadow:inset 20px 20px 20px rgba(0,0,0, 0.05), 
    25px 35px 20px rgba(0,0,0, 0.05), 
    25px 30px 30px rgba(0,0,0, 0.05), 
    inset -20px -20px 25px rgba(255,255,255,0.9); 
  transition:0.5s ease-in-out;
  display:flex;
  justify-content:center;
  align-items:center;
  }
  @media screen and (max-width: 450px){
.container111{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:20px 30px;
  padding: 25px 0;
      background:#f1f0fe;
 } 
      
      .container111 .drop{
  position:relative;
  width:160px;
  height:220px;
  box-shadow:inset 20px 20px 20px rgba(0,0,0, 0.05), 
    25px 35px 20px rgba(0,0,0, 0.05), 
    25px 30px 30px rgba(0,0,0, 0.05), 
    inset -20px -20px 25px rgba(255,255,255,0.9); 
  transition:0.5s ease-in-out;
  display:flex;
  justify-content:center;
  align-items:center;
  }
  }     

.container111 .drop:nth-child(1){
  border-radius: 15% 15% 11% 19%/17% 19% 11% 13%;
  }
.container111 .drop:nth-child(2){
  border-radius: 15% 15% 11% 19%/17% 19% 11% 13%;
  }
.container111 .drop:nth-child(3){
  border-radius: 15% 15% 11% 19%/17% 19% 11% 13%;
  }
  .container111 .drop:nth-child(4){
  border-radius: 15% 15% 11% 19%/17% 19% 11% 13%;
  }
  .container111 .drop:nth-child(5){
  border-radius: 15% 15% 11% 19%/17% 19% 11% 13%;
  }
  .container111 .drop:nth-child(6){
  border-radius: 15% 15% 11% 19%/17% 19% 11% 13%;
  }
  .container111 .drop:nth-child(7){
  border-radius: 15% 15% 11% 19%/17% 19% 11% 13%;
  }
   .container111 .drop:nth-child(8){
  border-radius: 15% 15% 11% 19%/17% 19% 11% 13%;
  
  }
   .container111 .drop:nth-child(9){
  border-radius: 15% 15% 11% 19%/17% 19% 11% 13%;
  
  }
.container111 .drop:hover{
  border-radius:50%;
 } 
.container111 .drop::before{
  content:'';
  top:50px;
  left:85px;
  position:absolute;
  width:35px;
  height:35px;
  background:#fff;
  border-radius:50%;
  opacity:0.9;
  }
.container111 .drop::after{
  content:'';
  top:90px;
  left:110px;
  position:absolute;
  width:15px;
  height:15px;
  background:#fff;
  border-radius:50%;
  opacity:0.9;
  }
.container111 .drop .content{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  text-align:center;
  padding:40px;
  gap:15px;
  gap: 15px;
  color: #797979;
  }
  
  
  
  
.container111 .drop .content h2{
  position:relative;
  width:80px;
  height:80px;
  background:#eff0f4;
  border-radius:50%;
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), 
    inset -2px -5px 10px rgba(255,255,255,1), 
    15px 15px 10px rgba(0,0,0,0.5), 
    15px 10px 15px rgba(0,0,0,0.025);
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:2em;
  font-weight: 600;
  color:#be01fe;
 } 
 
  @media screen and (max-width: 450px){
  
  .container111 .drop .content{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  text-align:center;
  padding:10px;
  gap:15px;
  color: #797979;
  }
 .container111 .drop .content h2{
  position:relative;
  width:40px;
  height:40px;
  background:#eff0f4;
  border-radius:50%;
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), 
    inset -2px -5px 10px rgba(255,255,255,1), 
    15px 15px 10px rgba(0,0,0,0.5), 
    15px 10px 15px rgba(0,0,0,0.025);
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:2em;
  color:#be01fe;
 } }
 
.container111 .drop .content a{
  position:relative;
  padding:10px 25px;
  color:#fff;
  background:#be01fe;
  border-radius:25px;
  text-decoration:none;
  font-weight: 500;
  text-shadow: 0px 2px 2px rgba(0,0,0,0.25);
  transition:0.5s;
  opacity:0.75;
 } 
.containe111r .drop .content a:hover{
  opacity:1;
 } 
.container111 .drop .content a::before{
  content:'';
  left:50%;
  top:8px;
  transform:translateX(-50%);
  position:absolute;
  width:65%;
  height:3px;
  border-radius:5px;
  background:rgba(255,255,255,0.5);
 }