/* =========================
   SOCIAL MEDIA SECTION
========================= */

.social-section{
  position: relative;

  padding: 120px 20px;

  background:
    linear-gradient(
      to bottom,
      #ffffff,
      #f7fbff
    );

  overflow: hidden;
}

/* BLUR */

.social-blur{
  position: absolute;

  border-radius: 50%;

  filter: blur(90px);

  animation:
    socialBlur 8s ease-in-out infinite;
}

.social-blur-1{
  width: 300px;
  height: 300px;

  background:
    rgba(255,0,120,0.10);

  top: -100px;
  left: -100px;
}

.social-blur-2{
  width: 260px;
  height: 260px;

  background:
    rgba(0,110,255,0.10);

  bottom: -80px;
  right: -100px;
}

/* TOP */

.social-top{
  position: relative;
  z-index: 2;

  text-align: center;

  max-width: 900px;

  margin:
    0 auto 70px;

  animation:
    fadeUp 1s ease-in-out;
}

.social-badge{
  display: inline-block;

  padding: 12px 24px;

  border-radius: 100px;

  background:
    rgba(255,0,120,0.08);

  color:
    #ff0066;

  border:
    1px solid rgba(255,0,120,0.10);

  font-size: 14px;
  font-weight: 600;

  margin-bottom: 24px;
}

.social-top h2{
  font-size:
    clamp(42px,6vw,74px);

  line-height: 1.1;

  color:
    #111;

  margin-bottom: 24px;

  font-weight: 800;
}

.social-top h2 span{
  background:
    linear-gradient(
      90deg,
      #ff0066,
      #006eff
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.social-top p{
  color:
    #666;

  font-size: 18px;

  line-height: 1.9;
}

/* GRID */

.social-grid{
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 30px;
}

/* CARD */

.social-card{
  position: relative;

  display: flex;
  align-items: center;

  gap: 28px;

  padding: 40px;

  border-radius: 36px;

  overflow: hidden;

  text-decoration: none;

  background:
    rgba(255,255,255,0.92);

  border:
    1px solid rgba(0,0,0,0.06);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.05);

  transition:
    all 0.55s ease-in-out;
}

.social-card:hover{
  transform:
    translateY(-12px)
    scale(1.02);

  box-shadow:
    0 35px 70px rgba(0,0,0,0.10);
}

/* GLOW */

.social-glow{
  position: absolute;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  top: -120px;
  right: -120px;

  opacity: 0.3;
}

.instagram-card .social-glow{
  background:
    radial-gradient(
      circle,
      #ff0066,
      transparent 70%
    );
}

.facebook-card .social-glow{
  background:
    radial-gradient(
      circle,
      #006eff,
      transparent 70%
    );
}

/* ICON */

.social-icon{
  position: relative;
  z-index: 2;

  min-width: 110px;
  height: 110px;

  border-radius: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    white;

  box-shadow:
    0 15px 35px rgba(0,0,0,0.08);

  transition:
    all 0.45s ease-in-out;
}

.social-card:hover .social-icon{
  transform:
    rotate(8deg)
    scale(1.08);
}

.social-icon img{
  width: 58px;
}

/* CONTENT */

.social-content{
  position: relative;
  z-index: 2;
}

.social-content h3{
  font-size: 34px;

  color:
    #111;

  margin-bottom: 14px;
}

.social-content p{
  color:
    #666;

  line-height: 1.8;

  margin-bottom: 20px;
}

.social-content span{
  display: inline-flex;
  align-items: center;

  gap: 10px;

  font-size: 16px;
  font-weight: 700;

  color:
    #111;

  transition:
    all 0.35s ease-in-out;
}

.social-card:hover .social-content span{
  transform:
    translateX(6px);
}

/* ANIMATION */

@keyframes fadeUp{

  from{
    opacity: 0;
    transform: translateY(40px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }

}

@keyframes socialBlur{

  0%{
    transform: translateY(0);
  }

  50%{
    transform: translateY(20px);
  }

  100%{
    transform: translateY(0);
  }

}

/* RESPONSIVE */

@media(max-width:992px){

  .social-grid{
    grid-template-columns: 1fr;
  }

}

@media(max-width:768px){

  .social-section{
    padding: 90px 18px;
  }

  .social-top h2{
    font-size: 42px;
  }

  .social-card{
    flex-direction: column;
    text-align: center;
  }

}

@media(max-width:480px){

  .social-card{
    padding: 28px;
  }

  .social-content h3{
    font-size: 28px;
  }

  .social-icon{
    min-width: 90px;
    height: 90px;
  }

  .social-icon img{
    width: 46px;
  }

}
/* LINKEDIN GLOW */

.linkedin-card .social-glow{

  background:
    radial-gradient(
      circle,
      #0a66c2,
      transparent 70%
    );

}