/* Universal box-sizing rule */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* Basic body styling */
    body {
      font-family: Arial, sans-serif;
      line-height: 1.4;
      color: #333;
      background-color: #f4f4f4;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }


       /* Header with Monogram */
header {
				background: linear-gradient(-90deg,#009900, #fff);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0px 20px;
				border-bottom: 4px solid #fff;
			}
 /* Logo Image */
  header img.logo {
				width:120px;
				height:100px;
				border-radius 10px;
				box-shadow: 0 4px 8px rgba(0,0,0,0.2);
				object-fit: cover;
				}
 
/* Navigation styles */
nav {
				display: flex;
				justify-content: center;
				flex-wrap: wrap; /* Use flex-wrap on a single line */
				background-color:  #2c3e50;
				padding: 1px;
				border-right: 1px solid #ccc;
				transition: background-color 0.3s ease-in-out;
		}

/* Flexible link button styles */
.flex-link-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				padding: 5px 10px;
				border-radius: 10px;
				background-color: #3498db;
				text-decoration: none;
				margin-left: 5px;
				margin-top: 2px;
				margin-bottom: 4px;
}

.flex-link-btn: {
    background-color: #CCD4BC;
}

.flex-link-btn:active {
    background-color: #2e7d34;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.quotes {
            background: linear-gradient(90deg, #6a5acd, #483d8b);
            color: white;
            padding: 15px 0;
            overflow: hidden;
            position: relative;
        }
        
        .quotes-container {
            display: flex;
            animation: scroll 40s linear infinite;
            white-space: nowrap;
        }
        
        .quotes p {
            display: inline-block;
            padding: 0 40px;
            font-size: 25px;
            font-weight: 500;
        }
 @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }






    /* Main content wrapper */
    main {
      flex: 1;
      display: flex;
      justify-content: center;
      padding: 10px;
      background-color: #f4f4f4;
    }

    /* Content area (now a single column) */
    .content-area {
      width: 100%;
      max-width: 1200px;
      display: flex;
      flex-direction: column; /* stack content vertically since no sidebar */
      gap: 10px;
      padding: 5px;
      background-color: #f4f4f4;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    /* Left/main column (gallery) */
    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 25px;
      padding: 10px;
    }

    .gallery-item {
      text-align: center;
      max-width: 210px;
      width: 100%;
    }

    .gallery-img {
      width: 215px;
      height: 175px;
      object-fit: cover;
      cursor: pointer;
      border-radius: 12px;
      border: 4px solid #fff;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .gallery-img:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 25px rgba(0,0,0,0.3);
    }

    .caption { margin-top: 8px; font-size: 1rem; color: #333; font-weight: 500; }

    /* Lightbox (image viewer) */
    .lightbox {
      position: fixed;
      display: none;
      justify-content: center;
      align-items: center;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 999;
      padding: 20px;
      flex-direction: column;
    }

    .lightbox-content { text-align: center; color: white; }

    .lightbox img {
      max-width: 80%;
      max-height: 70%;
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.5);
      border: 4px solid #fff;
	  margin-top:200px;
	  
	
	
    }

    .lightbox-caption { margin-top: 15px; font-size: 1.2rem; color: #f0f0f0; }

    .close {
      position: absolute;
      top: 20px;
      right: 30px;
      color: white;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
      transition: color 0.2s;
    }
    .close:hover { color: #ccc; }

    /* Pagination/navigation */
    .next-page { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%; margin: 20px auto; }
    .next-p {
      display: inline-flex; justify-content: center; align-items: center;
      min-width: 45px; padding: 10px; background-color: #496b53; color: #fff;
      border-radius: 4px; text-decoration: none; font-size: 20px; line-height: 1.2;
    }
    .next-p:hover { background-color: #86918f; }

    /* Footer */
    footer {
    text-align: center;
    padding: 20px;
   background-color: #4CAF50;
    color: white;
}


    /* Responsive adjustments */
    @media (max-width: 1024px) {
      /* If you had a sidebar previously, it would collapse; now we keep a single column */
    }