@import url('https://fonts.googleapis.com/css?family=Poppins');


#gallery {
    background-image: url('../images/background/main-bg.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
        height: auto;
    max-height: 800px;
}

/* MAIN CONTAINER */
.uxg-container-all {
  width: 100%;
  margin: 20px auto;
  overflow: hidden;
  

}

/* EACH ITEM (3 PER ROW) */
.uxg-container {
  width: calc(33.33% - 6px);
  margin: 3px;
  float: left;
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
  border-radius: 10px;
  border: 2px solid #452c2f;
}

/* IMAGE FIX (NO CROP 🔥) */
.uxg-container img {
  width: 100%;
  height: 220px;
  object-fit: contain;      /* ✅ show full image */
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  transition: 0.3s;
}

/* HOVER EFFECT */
.uxg-container:hover img {
  transform: scale(1.1);
  filter: grayscale(40%);
  opacity: 0.8;
}

/* TITLE */
.uxg-title {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1.4em;
  text-shadow: 1px 5px 10px black;
  display: none;
  color: #fff;
  text-align: center;
}

/* DESCRIPTION */
.uxg-text {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  text-align: center;
  font-size: 0.95em;
  text-shadow: 1px 5px 10px black;
  display: none;
  color: #fff;
}

/* SHOW TEXT ON HOVER */
.uxg-container:hover .uxg-title,
.uxg-container:hover .uxg-text {
  display: block;
}

/* OPTIONAL TITLE */
#gallery-title {
  text-align: center;
  font-weight: bold;
}

/* RESPONSIVE */
@media only screen and (max-width: 900px) {
  .uxg-container {
    width: calc(50% - 6px);
  }
}

@media only screen and (max-width: 400px) {
  .uxg-container {
    width: 100%;
  }
}


/* --- MINIMIZED GALLERY (992px & DOWN) --- */
@media only screen and (max-width: 992px) {
    
    
    /* 🔥 ADD HERE */
  #gallery {
      height: auto;
      max-height: 700px;
  }
  
  
  /* 1. Reduce section and container padding */
  section#gallery.block {
    padding: 70px 0 !important;
  }

  .uxg-container-all {
    margin: 10px auto !important;
    padding: 0 5px !important;
  }

  /* 2. Create a tighter 2-column grid */
  .uxg-container {
    width: calc(50% - 4px) !important; /* Two items per row */
    margin: 2px !important;            /* Thinner gaps */
    border-radius: 6px !important;
  }

  /* 3. Reduce image height for a compact look */
  .uxg-container img {
    height: 140px !important; /* Reduced from 220px to save vertical space */
    padding: 5px !important;   /* Thinner white border */
  }

  /* 4. Optimize text overlays for small screens */
  .uxg-title {
    font-size: 0.9em !important;
    top: 40% !important;
    width: 90% !important;
  }

  .uxg-text {
    font-size: 0.7em !important;
    top: 75% !important;
    max-width: 95% !important;
    line-height: 1.2 !important;
  }

  /* 5. Pull the "View Gallery" button closer */
  .edutech-button-center-wrapper {
    margin-top: 15px !important;
  }
  

}



@media only screen and (max-width: 575px) {
  #gallery {
      max-height: 700px;
  }
}


/* Extra small screens (Phones) */
@media only screen and (max-width: 480px) {
  .uxg-container img {
    height: 120px !important; /* Even smaller for very narrow screens */
  }
  
  /* Optional: Hide descriptions on very small screens to keep it clean */
  .uxg-text {
    display: none !important; 
  }
}


/* GALLERY BUTTON WRAPPER */
.gallery-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10px 0;
}

/* GALLERY BUTTON */
.gallery-orange-btn {
    position: relative;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);

    padding: 0.6rem 1.5rem;
    background: linear-gradient(135deg, #DFBC7C 0%, #E8CD94 40%, #C49C51 100%);
    
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: #452c2f;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 16px;

    border: 3px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
}

/* ICON */
.gallery-btn-icon {
    width: 22px;
    height: 22px;
    transition: all 0.3s ease-in-out;
}

.gallery-btn-icon path {
    fill: #452c2f;
}

/* HOVER */
.gallery-orange-btn:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.6);
}

.gallery-orange-btn:hover .gallery-btn-icon {
    transform: translateX(4px);
}

/* SHINE EFFECT */
.gallery-orange-btn::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background: linear-gradient(135deg, #DFBC7C 0%, #E8CD94 40%, #C49C51 100%);
    top: 0;
    left: -100px;
    opacity: 0.6;
}

.gallery-orange-btn:hover::before {
    animation: gallery-shine 1.5s ease-out infinite;
}

@keyframes gallery-shine {
    0% { left: -100px; }
    60% { left: 100%; }
    100% { left: 100%; }
}


/* MOBILE */
@media (max-width: 575px) {

    .gallery-btn-wrapper {
        margin: 20px 0 10px;
        padding: 0 10px;
    }

    .gallery-orange-btn {
        width: 100%;
        max-width: 240px;
        padding: 10px 16px;
        font-size: 14px;
        gap: 8px;
    }

    .gallery-btn-icon {
        width: 18px;
        height: 18px;
    }
}


/* SMALL DEVICES */
@media (min-width: 576px) and (max-width: 767px) {

    .gallery-orange-btn {
        font-size: 15px;
        padding: 11px 18px;
    }
}


/* TABLETS */
@media (min-width: 768px) and (max-width: 991px) {

    .gallery-orange-btn {
        padding: 12px 22px;
    }
}