/* ==========================================
   SKILLED WEBINAR - LEGAL PAGES
   PREMIUM PURPLE THEME
========================================== */

:root{

  --primary:#7c3aed;
  --primary-dark:#6d28d9;
  --primary-light:#ede9fe;

  --text:#1e1b4b;
  --text-light:#64748b;

  --white:#ffffff;

  --border:#e9d5ff;

  --bg:#f8f5ff;

  --shadow:
      0 20px 40px rgba(124,58,237,.08);

  --radius:20px;
}

/* ==========================================
   PAGE BACKGROUND
========================================== */

body{

  background:
      radial-gradient(
          circle at top right,
          rgba(124,58,237,.10),
          transparent 35%
      ),
      radial-gradient(
          circle at bottom left,
          rgba(139,92,246,.08),
          transparent 30%
      ),
      #fafaff;

}

/* ==========================================
   WRAPPER
========================================== */

.legal-wrapper{

  max-width:950px;

  margin:70px auto;

  padding:0 20px;
}

/* ==========================================
   HERO SECTION
========================================== */

.legal-title{

  background:
      linear-gradient(
          135deg,
          #7c3aed,
          #9333ea
      );

  color:white;

  padding:40px;

  border-radius:24px 24px 0 0;

  font-size:38px;

  font-weight:700;

  letter-spacing:-0.5px;

  box-shadow:
      0 20px 50px rgba(124,58,237,.20);
}

.legal-updated{

  background:white;

  padding:18px 40px;

  color:#64748b;

  font-size:14px;

  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);

  border-radius:0 0 24px 24px;
}

/* ==========================================
   CONTENT CARD
========================================== */

.legal-content{

  margin-top:28px;

  background:white;

  border-radius:24px;

  padding:40px;

  border:1px solid #f1e8ff;

  box-shadow:var(--shadow);

  color:#475569;

  font-size:16px;

  line-height:1.9;
}

/* ==========================================
   PARAGRAPHS
========================================== */

.legal-content p{

  margin-bottom:18px;
}

/* ==========================================
   SECTION HEADINGS
========================================== */

.legal-content h2{

  position:relative;

  margin-top:45px;

  margin-bottom:18px;

  font-size:24px;

  font-weight:700;

  color:#1e1b4b;

  padding-left:18px;
}

.legal-content h2::before{

  content:"";

  position:absolute;

  left:0;
  top:3px;

  width:6px;
  height:28px;

  border-radius:10px;

  background:
      linear-gradient(
          to bottom,
          #7c3aed,
          #a855f7
      );
}

/* ==========================================
   SUB HEADINGS
========================================== */

.legal-content h3{

  margin-top:25px;

  margin-bottom:12px;

  font-size:18px;

  font-weight:600;

  color:#5b21b6;
}

/* ==========================================
   LISTS
========================================== */

.legal-content ul,
.legal-content ol{

  margin-bottom:22px;

  padding-left:28px;
}

.legal-content li{

  margin-bottom:10px;

  color:#475569;

  line-height:1.8;
}

/* custom bullets */

.legal-content ul li::marker{

  color:#7c3aed;
}

/* ==========================================
   STRONG TEXT
========================================== */

.legal-content strong{

  color:#4c1d95;

  font-weight:700;
}

/* ==========================================
   INFO HIGHLIGHT
========================================== */

.legal-content p strong{

  background:#f3e8ff;

  padding:3px 8px;

  border-radius:8px;
}

/* ==========================================
   LINKS
========================================== */

.legal-content a{

  color:#7c3aed;

  text-decoration:none;

  font-weight:600;

  transition:.3s;
}

.legal-content a:hover{

  color:#5b21b6;

  text-decoration:underline;
}

/* ==========================================
   LAST NOTE
========================================== */

.legal-content p:last-child{

  margin-top:40px;

  padding-top:25px;

  border-top:1px solid #ede9fe;

  text-align:center;

  color:#64748b;

  font-size:14px;
}

/* ==========================================
   SMOOTH ANIMATION
========================================== */

.legal-content,
.legal-title{

  transition:.35s ease;
}

.legal-content:hover{

  transform:translateY(-3px);

  box-shadow:
      0 25px 60px rgba(124,58,237,.12);
}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

  .legal-wrapper{

      margin:40px auto;
  }

  .legal-title{

      font-size:28px;

      padding:28px;
  }

  .legal-updated{

      padding:14px 28px;
  }

  .legal-content{

      padding:24px;
  }

  .legal-content h2{

      font-size:20px;
  }

  .legal-content h3{

      font-size:17px;
  }

  .legal-content{

      font-size:15px;
  }
}

/* ==========================================
   LEGAL NAVIGATION
========================================== */

.legal-nav{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:20px 0 25px;

    padding:18px;

    background:white;

    border:1px solid #f1e8ff;

    border-radius:18px;

    box-shadow:
        0 10px 30px rgba(124,58,237,.06);
}

.legal-nav a{

    text-decoration:none;

    color:#6d28d9;

    font-weight:600;

    font-size:14px;

    padding:10px 16px;

    border-radius:10px;

    background:#f5f3ff;

    transition:.3s ease;
}

.legal-nav a:hover{

    background:#7c3aed;

    color:white;

    transform:translateY(-2px);
}

@media(max-width:768px){

    .legal-nav{

        gap:10px;
    }

    .legal-nav a{

        width:100%;

        text-align:center;
    }
}