@import url('https://fonts.googleapis.com/css2?family=Joan&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;400;500&family=Joan&family=Cinzel:wght@400;500&family=Montserrat:wght@300;400;500&display=swap');

    body {
      margin: 0;
      /* font-family: 'Joan','Arial', sans-serif; */
      background-color: rgb(239,239,239);
      color: #1e1e3f;
    }

    

    /* Card styles */
    .card-section {
      font-family: 'Raleway', serif;
      color: #222;
      padding: 70px 5px;
      max-width: 1400px;
      margin: 0 auto;
    }

    
    .card-data {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 40px !important;
      width: 100% !important;
      margin: 60px 0 0 !important;
    }

    .card-content {
      padding: 28px 20px !important;
    }

    .card-date {
      color: #888 !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: 1px !important;
      margin-bottom: 14px !important;
    }

    .card-title {
      font-family: 'Joan', serif !important;
      color: #403f3f !important;
      font-size: 22px !important;
      font-weight: 100 !important;
      line-height: 1.3 !important;
      margin: 10px 0 22px !important;
    }

    .card-tag {
      font-family: 'Cinzel', serif !important;
      display: inline-block !important;
      font-size: 12px !important;
      font-weight: 750 !important;
      padding: 8px 16px !important;
      border: 1px solid #ccc !important;
      border-radius: 25px !important;
      color: #000 !important;
      background-color: #fff !important;
      text-transform: uppercase !important;
      letter-spacing: 1px !important;
      transition: all 0.3s ease !important;
      cursor: pointer !important;
    }

    .card-tag:hover {
      background-color: #f2f2f2 !important;
      border-color: #999 !important;
    }
    


    /* Card scroll animation */
    .card-animate {
      background: white !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
      cursor: pointer !important;
      opacity: 0 !important;
      transform: scale(0.8) translateY(40px) !important;
      transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    .card-animate img {
      width: 100% !important;
      height: 280px !important;
      object-fit: cover !important;
      transition: transform 0.3s ease !important;
    }

    .card-animate:hover img {
      transform: scale(1.1) !important;
    }

    /* Visible Activate */
    .card-animate.visible {
      opacity: 1 !important;
      transform: scale(1) translateY(0) !important;
    }


    @media (max-width: 768px) {

      .hero-heading h2{
        font-size: 35px !important;
        line-height: 40px !important;
        text-align: center !important;
      }
      
      .hero-sub-heading {
        gap: 10px !important;
        padding: 6px 12px !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
      }
      
      .hero-line {
        min-width: 25px !important;
      }
      
      .heading-text {
        font-size: 10px !important;
        text-align: center !important;
      }
      
      .card-section {
        padding: 60px 15px !important;
        max-width: 100% !important;
      }
      
      .card-data {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 30px !important;
        margin: 40px 0 0 !important;
        padding: 0 !important;
        width: 100% !important;
      }
      
      .card-animate {
        width: 320px !important;
        margin: 0 auto !important;
      }
      
      .card-animate img {
        height: 220px !important;
      }
      
      .card-content {
        padding: 24px 18px !important;
      }
      
      .card-title {
        font-size: 20px !important;
      }
    }