* {
      box-sizing: border-box;
    }

    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      background: #ffffff;
      padding: 30px;
      overflow-x: hidden;
    }

    .calevent-module {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      max-width: 600px;
      margin: auto;
      position: relative;
    }

   .calevent-image {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  object-position: top; /* ✅ Keep top part visible */
  cursor: pointer;
  overflow: hidden;
}

    .calevent-content {
      padding: 20px;
    }

    .calevent-title {
      font-size: 1.5rem;
      margin: 0 0 10px;
    }

    .calevent-description {
      font-size: 1rem;
      color: #555;
    }

    .calevent-banner {
      position: absolute;
      top: 20px;
      right: 20px;
      background: #044317;
      color: white;
      padding: 8px 14px;
      font-size: 12px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 10px rgba(0, 119, 255, 0.2);
      z-index: 2;
    }

    .calevent-fullscreen {
      position: fixed;
      inset: 0;
     background: white; /* ✅ white background overlay */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 0.4s ease, transform 0.4s ease;
      pointer-events: none;
    }

    .calevent-fullscreen.active {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
	  background: #FFF!important; /*overlay color */
    }

    .calevent-fullscreen img {
      height: 90vh;
      width: auto;
      max-width: 90vw;
      object-fit: contain;
      border-radius: 10px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
      transition: all 0.4s ease;
	 
    }

    .calevent-close {
      position: fixed;
      top: 20px;
      right: 30px;
      font-size: 2rem;
      color: #000000!important; 
      background: #eee;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      z-index: 1001;
    }

    .calevent-hidden {
      display: none !important;
    }
	
	  img {
      transition: transform 0.5s ease;
    }

    img:hover {
      transform: scale(1.1);
    }

    @media (max-width: 600px) {
      .calevent-image {
        max-height: 200px;
      }

      .calevent-fullscreen img {
        height: 95vh;
        max-width: 95vw;
      }
    }