.calendar-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust width */
  gap: 15px; /* Spacing between frames */
  padding: 15px;
  margin: 0 auto;
}

.calendar-item {
  border-radius: 8px;
  width: 100%;
  padding: 0px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.calendar-item:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.calendar-item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .calendar-container {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

@media (max-width: 480px) {
  .calendar-container {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}



*,::after,::before{box-sizing:border-box}
html{padding:0;margin:0;text-align:center;}
body {
  padding: 15px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fafafa; /* Base background color */
  position: relative;
  z-index: 1; /* Ensure content is above the background */
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/wall.jpg');
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.4; /* Background transparency */
  z-index: -1; /* Place behind the content */
  pointer-events: none; /* Prevent interaction with the pseudo-element */
}
img,video{max-width:100%}
img{height:auto}
.container{width:100%;padding:15px;margin:0 auto}
.container .logo{width:80%;padding:15px;margin:0 auto}
h2{color:#FF69B4;padding:5px;font-size:1rem;margin-bottom:.5rem;font-weight:500;line-height:1.2}
.col3{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;}
.col3>div{position:relative;width:100%;padding-right:15px;padding-left:15px;}
.imgt{display:flex;align-items:center;position:relative;text-align:center;cursor:pointer;padding-top:10px;}
.imgt>div{flex:1 1 0;text-align:center}
.imgt>div img{width:300px}
.img_ig {width:50px;height:50px;margin-right: 10px;}
.img_t a{text-decoration: none}
.imgt b{position:absolute;color:#c00805;font-size:90px;width:100%;text-align:center;font-family:serif;cursor:pointer;}
.loading::before{animation:loading .5s linear infinite;border-radius:50%;border-color:transparent transparent #fff #fff;border-style:solid;border-width:0.4rem;content:'';display:block;height:2rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:2rem;}
@keyframes loading {0%{transform:rotate(0deg)} to{transform:rotate(1turn)}}
@media(min-width:576px){
  .container{max-width:540px}
}
@media(min-width:768px){
  .container{max-width:720px}
  .col3>div{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%;}
}
@media(min-width:992px){
  .container{max-width:960px}
}

.imgt b {
  font-size: 60px; /* Default size for larger screens */
}

@media (max-width: 768px) {
  .imgt b {
    font-size: 45px; /* Smaller size for tablets */
  }
}

@media (max-width: 480px) {
  .imgt b {
    font-size: 30px; /* Even smaller size for phones */
  }
}

video:-webkit-full-screen,
video:-moz-full-screen,
video:-ms-fullscreen,
video:fullscreen {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  font-size: 2rem;
  color: transparent; /* Make the text invisible */
  background: transparent; /* Transparent background */
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.close-button:focus {
  outline: none; /* Remove focus outline */
}
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  position: relative;
  margin: auto;
  top: 5%;
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 2rem;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.close-button:hover {
  background: rgba(255, 0, 0, 0.8);
}