* {
    box-sizing: border-box;
}
 body {
        margin: 0;
        font-family: Arial, sans-serif;
        background: #f5f5f5;
    }

    /* HEADER IMAGE (full width) */
    header img {
        width: auto;
        height: auto;
		margin: auto;
        display: block;
    }

    /* MAIN CONTAINER (max width 1400px) */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    /* GENERAL CARD STYLING */
    .row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 20px;
    }

    .card {
        background: white;
        padding: 20px;
        border-radius: 10px;
        flex: 1;
        min-width: 250px;   
      	overflow: auto;
        box-shadow: 0px 2px 21px -1px rgba(0, 0, 0, 0.82);
		
  
    }
.responsive {
  max-width: 100%;
  height: auto;
}
    /* FIXED HEIGHT FOR FIRST ROW CARDS */
 .fixed-500 {
   width: 500px;            /* fixed width */
  max-height: 600px;           /* fixed height */
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: auto;          /* scrollbars when content exceeds size */
  box-sizing: border-box;
  padding: 12px;
  background: #fff;
  
}

.fixed-500 > * {
    min-height: 0; /* CRITICAL for scrollable children */
}
.comments-widget {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
	a:link,a:visited {
			color: #2f2d2d;
			text-decoration: none;
		}
		a:hover {
			color: #ffffff;
			text-decoration: none;
		}

    /* FOOTER */
    footer {
        background: #222;
        color: white;
        text-align: center;
        padding: 20px;
        margin-top: 40px;
    }

    /* RESPONSIVE BEHAVIOR */
    @media (max-width: 768px) {
        .row {
            flex-direction: column;
        }
		 @media (max-width: 768px) {
        .fixed-500 {
            flex-direction: column;
			min-height: 0;
        }
		
    }