/* style/stylesheet.css */
    /* General styles for indext.html*/    
    @import 'button.css';
    @import 'h2-p.css';
    @import 'language_colors.css';
    @import 'lang-title';
    @import 'responsive.css';
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      background-color: #efefef;
    }

    /* Navbar */
    .navbar {
      justify-content: space-between;
      align-items: center;
      background: #000000;
      position: fixed; /* Fix the navbar at the top */
      text-align: center;
      padding: 30px;
      width: 100%;
      color: #edd500;
      font-size: 30px;
      font-weight: bold;
      text-decoration: none;
      border-radius: 5px;
    }
    
    .welcome {
      text-align: left;
      margin: 100px auto; /* Adjust top margin to avoid overlap with fixed navbar or brand logo*/
      padding: 0 20px;
      width: 60%;
      font-size: 0.8em;
      margin-bottom: -60px;
    }

    .main-container {
      width: 70%;
      margin: 80px auto;
      margin: 100px auto; /* Adjust top margin to avoid overlap with fixed navbar or brand logo*/

      /*padding: 0 20px; Add top margin to avoid overlap with navbar */
      /* min-height: calc(100vh - 60px - 40px); adjust 40px if your footer is taller */
    }
    
    /* Header Welcome and Language bar */
    /* .header {
      background: #f4f4f4;
      padding: 1px;
      border-radius: 5px;
      text-align: center;
      border: 2px solid #dadada;
    } */

    /* Cards container */
    .card-container {
      display: flex;
      justify-content: center;
      gap: 2px; /* 2px gap */
      padding: 20px;
      flex-direction: row; 
      flex-wrap: wrap; /* the content in the main-container will wrap */
      align-items: center;
      margin: auto;
    }

    .card {
      width: 140px;
      height: 30px;
      margin: 1px;
      padding: 10px;
      background: #fcfcfc;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.07);
      display: flex;
      align-items: center;    /* Center vertically */
      justify-content: center;/* Center horizontally */
      border: 2px solid #cdcdcd;
    }
      .card-text {
      display: inline-block;
      max-width: 140px;
      text-align: center;
      vertical-align: middle;
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      pointer-events: all;
      font-family: 'Merriweather', 'Times New Roman', Times, serif;
      transition: transform 0.3s ease, color 0.2s;
      cursor: pointer;
      }

    .card-text:hover{
      transform: scale(1.09);
      color: #0b5db6;
    }

    @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap');
    .card {
      font-family: 'DM Serif Text', 'Times New Roman', Times, serif;
      font-weight: 900;
      font-size: 1em;
        }

    /* Footer */
    .footer {
      background: #000000;
      color: white;
      text-align: center;
      padding: 15px;
      bottom: 0;
      left: 0;
      width: auto;
      margin-top: auto; /* Push footer to the bottom */
      text-decoration: none;
    }
    /* about andd t&c */
    .footer a:link,
    .footer a:visited,
    .footer a:hover,
    .footer a:active {
      text-decoration: none;
      text-decoration-color: #edd500;
      color: inherit; /* Optional: anchor inherits footer's color */
    }