/* General styles */
body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header styles */
.header-container {
    position: fixed;
    left: 50%; /* Move to the center of the viewport */
    transform: translateX(-50%); /* Adjust position to center */
    width: 80%; /* Smaller width */
    max-width: 800px; /* Maximum width */
    background-color: rgba(245, 241, 241, 0.8); /* Semi-transparent background */
    backdrop-filter: blur(10px); /* Blurry effect */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin: 20px 0; /* Vertical margin */
    padding: 10px 20px; /* Padding inside the container */
    text-align: center; /* Center align text */
    font-size: 18px;
    font-family: 'Roboto Slab', serif;
    
  }

/* Navigation styles */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-logo {
    height: 50px; /* Adjust the height as needed */
    margin-right: 20px; /* Space between logo and nav links */
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-item {
    margin: 0 15px;
}

.nav-link {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #007BFF;
}

/* Blank11 Styling */
.blank11 {
    height: 200px;
    background: linear-gradient(to bottom, #6ca2b8, white);
    width: 100%;
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    flex-direction: column; /* Stack items vertically */
  }
 

/* Blog cards container */
.blog-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

/* Blog card styles */
.blog-card {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 20px;
    width: 300px;
    cursor: pointer;
    transition: transform 0.3s;
}

.blog-card:hover {
    transform: scale(1.05);
}

.blog-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}



/* Card styling */
.card {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    width: 600px; /* Set a fixed width */
    margin: 20px auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* Add pointer cursor on hover */
}

  
  /* Title styling */
  .card h1 {
    font-size: 22px;
    color: #188897; /* Text color */
    margin-bottom: 10px;
    
  }
  
  /* Date styling */
  .card .date {
    text-align: right;
    font-size: 12px;
    color: #666; /* Lighter text color for the date */
    margin-top: 20px; /* Add space between title and date */
  }
  
  /* Hover effect */
  .card:hover {
    transform: translateY(-10px); /* Float the card upwards */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a stronger shadow */
  }
  
  /* Media Query for Tablets */
@media (max-width: 768px) {
    .card {
        width: 80%; /* Adjust width to 80% of the viewport */
        padding: 15px; /* Reduce padding */
    }

    .card h1 {
        font-size: 20px; /* Slightly reduce font size */
    }

    .card .date {
        font-size: 11px; /* Reduce font size for date */
    }
}

/* Media Query for Mobile Phones */
@media (max-width: 480px) {
    .caution{
        font-size: 10px;
        text-align: center;
    }

    .header-container{
      width: 95%;
      padding: 10px;
      font-size: 11px;
    }

    .card {
        width: 90%; /* Adjust width to 90% of the viewport */
        padding: 10px; /* Further reduce padding */
    }

    .card h1 {
        font-size: 18px; /* Further reduce font size */
    }

    .card .date {
        font-size: 10px; /* Further reduce font size for date */
    }
}