<head>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">

  <style>
    body {
      min-height: 100vh;
      background: linear-gradient(120deg, #f8fafc 10%, #e1bee7 45%, #fbc2eb 100%);
      font-family: 'Poppins', 'Montserrat', Arial, sans-serif;
      color: #34325e;
      margin: 0;
      padding: 0;
    }
    .navbar {
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
      background: rgba(255,255,255,0.90);
      backdrop-filter: blur(10px);
      border-radius: 0 0 24px 24px;
    }
    .navbar-brand, .navbar-nav .nav-link {
      color: #8e24aa !important;
      font-family: 'Montserrat', Arial, sans-serif;
      font-weight: 700;
      letter-spacing: 1px;
      font-size: 1.12rem;
      transition: color 0.21s;
    }
    .navbar-nav .nav-link.active, .navbar-nav .nav-link:hover {
      color: #fff !important;
      background: linear-gradient(90deg, #d81b60 50%, #8e24aa 100%);
      border-radius: 30px;
      box-shadow: 0 2px 16px #a979d688;
    }
    .container, .card {
      border-radius: 20px;
      box-shadow: 0 6px 28px 0 rgba(120,90,140,0.17);
      background: rgba(255,255,255,0.96);
      padding: 34px 18px;
      margin-bottom:18px;
    }
    h1 {
      color: #fff !important;
      letter-spacing: 1px;
      font-family: 'Montserrat', Arial, sans-serif;
      font-weight: 700;
      font-size: 2.2rem;
      text-shadow: 0 3px 30px #8e24aa66, 0 1px 8px #fbc2eb99;
      margin-bottom: 10px;
      background: linear-gradient(90deg, #d81b60 10%, #8e24aa 90%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    h2 {
      color: #8e24aa;
      font-family: 'Montserrat', Arial, sans-serif;
      font-weight: 700;
      letter-spacing: 1px;
      font-size: 1.45rem;
      margin-bottom: 13px;
    }
    .btn-primary, .btn.btn-primary {
      background: linear-gradient(90deg, #8e24aa 70%, #d81b60 100%);
      border: none;
      color: #fff;
      font-family: 'Poppins', Arial, sans-serif;
      padding: 14px 44px;
      font-size: 1.18rem;
      border-radius: 60px;
      font-weight: 600;
      box-shadow: 0 4px 18px #8e24aa33;
      transition: box-shadow 0.25s, transform 0.18s;
    }
    .btn-primary:hover, .btn.btn-primary:hover {
      background: linear-gradient(90deg, #d81b60 70%, #8e24aa 100%);
      color:#fff;
      box-shadow: 0 14px 28px #d81b6044;
      transform: scale(1.08);
    }
    .card-title {
      font-family: 'Montserrat', Arial, sans-serif;
      font-weight: 700;
      color: #d81b60;
      font-size: 1.2rem;
    }
    /* Carousel */
    .carousel-item img {
      width: 100%;
      height: 320px;
      object-fit: cover;
      border-radius: 18px;
      box-shadow: 0 6px 22px #d81b6052;
    }
    @media(max-width:900px){
      .container, .card { padding:18px 6px; }
      h1 { font-size: 1.34rem; }
      h2 { font-size: 1.15rem; }
      .carousel-item img { height: 170px; border-radius:10px;}
      .navbar { border-radius: 0 0 10px 10px;}
    }
  </style>
</head>
