/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 25 2026 | 18:40:27 */
/* =============================================
   Author Widget — Sistel Blog
   Unique prefix: .sw- (sistel-widget)
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Nunito:wght@400;500;600;700&display=swap');

/* ---- CSS Variables ---- */
.sw-author-widget {
  --sw-green-deep:    #1a4a2e;
  --sw-green-mid:     #2d7a4f;
  --sw-green-bright:  #3db870;
  --sw-green-light:   #a8f0c6;
  --sw-green-glow:    rgba(61, 184, 112, 0.18);
  --sw-white:         #ffffff;
  --sw-off-white:     #f4faf7;
  --sw-text-main:     #162b1f;
  --sw-text-muted:    #5a7a68;
  --sw-border:        rgba(61, 184, 112, 0.22);
  --sw-radius-card:   20px;
  --sw-radius-avatar: 50%;
  --sw-shadow-card:   0 8px 40px rgba(26, 74, 46, 0.13), 0 2px 8px rgba(26, 74, 46, 0.07);
  --sw-shadow-hover:  0 16px 56px rgba(26, 74, 46, 0.20), 0 4px 16px rgba(26, 74, 46, 0.10);
  --sw-font-display:  'Playfair Display', Georgia, serif;
  --sw-font-body:     'Nunito', sans-serif;
  --sw-transition:    0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Card Base ---- */
.sw-author-widget {
  font-family: var(--sw-font-body);
  background: var(--sw-off-white);
  border: 1px solid var(--sw-border);
  border-radius: var(--sw-radius-card);
  box-shadow: var(--sw-shadow-card);
  padding: 28px 32px 28px 28px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 680px;
  width: 100%;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--sw-transition), transform var(--sw-transition);
  box-sizing: border-box;
}

.sw-author-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--sw-green-bright) 0%, var(--sw-green-deep) 100%);
  border-radius: var(--sw-radius-card) 0 0 var(--sw-radius-card);
}

.sw-author-widget::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--sw-green-glow) 0%, transparent 70%);
  pointer-events: none;
}

.sw-author-widget:hover {
  box-shadow: var(--sw-shadow-hover);
  transform: translateY(-2px);
}

/* ---- Avatar ---- */
.sw-avatar-wrap {
  flex-shrink: 0;
  position: relative;
  width: 88px;
  height: 88px;
}

.sw-avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: var(--sw-radius-avatar);
  background: conic-gradient(
    var(--sw-green-bright) 0deg,
    var(--sw-green-light) 120deg,
    var(--sw-green-mid) 240deg,
    var(--sw-green-bright) 360deg
  );
  animation: sw-spin 8s linear infinite;
  opacity: 0.85;
}

.sw-avatar-ring-inner {
  position: absolute;
  inset: -1px;
  border-radius: var(--sw-radius-avatar);
  background: var(--sw-off-white);
}

.sw-avatar-img {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  border-radius: var(--sw-radius-avatar);
  object-fit: cover;
  display: block;
}

@keyframes sw-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Content ---- */
.sw-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Label ---- */
.sw-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-green-mid);
  background: rgba(61, 184, 112, 0.12);
  border: 1px solid rgba(61, 184, 112, 0.28);
  border-radius: 100px;
  padding: 3px 10px;
  width: fit-content;
}

.sw-label-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sw-green-bright);
  animation: sw-pulse 2s ease-in-out infinite;
}

@keyframes sw-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

/* ---- Name ---- */
.sw-name {
  font-family: var(--sw-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--sw-text-main);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ---- Bio ---- */
.sw-bio {
  font-size: 13.5px;
  color: var(--sw-text-muted);
  line-height: 1.65;
  margin: 0;
  font-weight: 500;
}

/* ---- Divider ---- */
.sw-divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--sw-green-bright), transparent);
  border-radius: 2px;
  margin: 2px 0;
}

/* ---- Social Row ---- */
.sw-social {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.sw-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sw-green-mid);
  background: var(--sw-white);
  border: 1.5px solid var(--sw-border);
  border-radius: 100px;
  padding: 5px 14px 5px 10px;
  text-decoration: none;
  transition: background var(--sw-transition), color var(--sw-transition), border-color var(--sw-transition), box-shadow var(--sw-transition);
  letter-spacing: 0.01em;
}

.sw-social-link svg {
  flex-shrink: 0;
  transition: transform var(--sw-transition);
}

.sw-social-link:hover {
  background: var(--sw-green-bright);
  color: var(--sw-white);
  border-color: var(--sw-green-bright);
  box-shadow: 0 4px 16px rgba(61, 184, 112, 0.35);
}

.sw-social-link:hover svg {
  transform: scale(1.15) rotate(-5deg);
}

/* ---- Experience Badge ---- */
.sw-badge {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sw-green-deep);
  background: linear-gradient(135deg, var(--sw-green-light) 0%, rgba(168, 240, 198, 0.5) 100%);
  border: 1px solid rgba(61, 184, 112, 0.3);
  border-radius: 100px;
  padding: 4px 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .sw-author-widget {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px 24px;
    gap: 16px;
  }

  .sw-author-widget::before {
    width: 100%;
    height: 4px;
    top: 0; left: 0;
    border-radius: var(--sw-radius-card) var(--sw-radius-card) 0 0;
  }

  .sw-badge {
    position: static;
    align-self: center;
    margin-top: 2px;
  }

  .sw-divider {
    margin: 2px auto;
  }

  .sw-label,
  .sw-social {
    justify-content: center;
  }
}