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


/*
FAMILY TIPOGRAFIAS
Source+Serif+4
Roboto

Roboto

*/
body {
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      background-color: #f8fafc;
      color: #0f1724;
    }

    .brand-display {
      font-family: 'Playfair Display', serif;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .hero {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 60vh;
      background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('../image/bg-1.jpg') center/cover no-repeat;
      color: white;
      border-radius: 0 0 20px 20px;
      overflow: hidden;
    }

    .hero h1, .hero p {
      animation: fadeInUp 1.2s ease forwards;
      font-family: 'Playfair Display', serif;
    }

    @keyframes fadeInUp {
      from {opacity: 0; transform: translateY(30px);}
      to {opacity: 1; transform: translateY(0);}
    }

    .card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    .objective-card {
      border-radius: 20px;
      background-color: white;
      box-shadow: 0 6px 20px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
      padding: 25px;
      text-align: center;
    }

    .objective-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

    .objective-card img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      margin-bottom: 15px;
    }

    footer {
      background-color: #0b1120;
      color: #e2e8f0;
      padding: 60px 0 30px;
      font-size: 0.95rem;
    }

    footer a {
      color: #06b6d4;
      text-decoration: none;
    }

    footer a:hover {
      color: #38d6f8;
      text-decoration: underline;
    }

    .footer-top {
      border-bottom: 1px solid rgba(255,255,255,0.1);
      padding-bottom: 30px;
      margin-bottom: 30px;
    }

    .social-icons a {
      color: #e2e8f0;
      margin: 0 10px;
      font-size: 1.2rem;
      transition: color 0.3s;
    }

    .social-icons a:hover {
      color: #06b6d4;
    }