trAvis Anonymous File Manager

Edit File: gallery.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Masimuj Global Investment Ltd.</title>
  <meta name="description" content="">
  <meta name="keywords" content="">

.future-plans-list li {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      font-size: 1.1rem;
      color: #fff;
    }

.plan-icon {
      font-size: 1.5rem;
      margin-right: 0.75rem;

}

.services-carousel-wrap {
      background: #191919;
      /* dark, but not pure black */
      padding: 3rem 0 3rem 0;
    }

.swiper {
      padding-bottom: 3rem;
      /* gives room for arrows/bullets */
    }

.service-item {
      background: #222b36;
      /* border-radius: 1.2rem; */
      box-shadow: 0 4px 40px rgba(22, 43, 100, 0.15);
      overflow: hidden;
      transition: transform 0.14s, box-shadow 0.14s;
      display: flex;
      flex-direction: column;
      min-height: 370px;
      /* border: 1.5px solid rgba(255,255,255,0.05); */
    }

.service-item:hover {
      transform: translateY(-7px) scale(1.025);
      box-shadow: 0 16px 48px rgba(50, 149, 255, 0.16);
    }

.service-item-contents {
      padding: 2rem 1.3rem 1rem;
      flex: 1 1 auto;
      text-align: left;
      color: #fff;
    }

.service-item-category {
      display: inline-block;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #7fcbff;
      margin-bottom: 0.35rem;
    }

.service-item-title {
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: -0.03em;
      margin: 0 0 0.4rem;
      color: #fff;
    }

.service-item img.img-fluid {
      width: 100%;
      height: auto;
      /* let it scale naturally */
      object-fit: cover;
    }

/* Swiper custom Nav buttons */
    .navigation-prev,
    .navigation-next {
      background: #21293c;
      color: #7fcbff;
      border: none;
      border-radius: 50%;
      padding: 0.65em 0.75em;
      font-size: 1.6em;
      position: absolute;
      top: 40%;
      z-index: 10;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.17);
      transition: background 0.22s, color 0.16s;
    }

.navigation-prev:hover,
    .navigation-next:hover {
      background: #7fcbff;
      color: #191919;
    }

.navigation-prev {
      left: -22px;
    }

.navigation-next {
      right: -22px;
    }

.swiper-pagination-bullet {
      background: #444d5c;
      opacity: 1;
      margin-bottom: 3px;
      width: 10px;
      height: 10px;
    }

.swiper-pagination-bullet-active {
      background: #7fcbff;
    }

/* Responsive tweaks */
    @media (max-width: 600px) {
      .service-item-contents {
        padding: 1.1rem;
      }

.service-item-title {
        font-size: 1.1rem;
      }

.service-item img.img-fluid {
        height: 110px;
      }
    }

.service-item {
      border: 1.5px solid #7fcbff;
      border-radius: 20px;
      /* Or a gradient: */
      /* border-image: linear-gradient(to right,#7fcbff, #50aaff 60%) 1; */
    }

.swiper-slide {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.6s, transform 0.6s;
    }

.swiper-slide img {
      /* width: 100%; */
      /* height: auto; */
      /* display: block; */
      border-radius: 20px;
      /* object-fit: cover; */
    }

/* .swiper-slide img {
      opacity: 1 !important;
      visibility: visible !important;
    } */

.swiper-slide-active,
    .swiper-slide-next,
    .swiper-slide-prev {
      opacity: 1;
      transform: none;
    }

/* New Gallery CSS */
    .gallery-item img {
      border-radius: 8px;
      transition: transform 0.3s ease;
    }

.gallery-item img:hover {
      transform: scale(1.05);
    }

.gallery-item .img-wrapper {
      width: 100%;
      /* To make images square: */
      padding-top: 100%; 
      position: relative;
      overflow: hidden;
      border-radius: 8px; /* Apply border-radius here to affect the container */
    }

.gallery-item .img-wrapper img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* This will crop the image to fit the container */
    }
  </style>
</head>

<nav id="navmenu" class="navmenu">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="services.html">Our Services</a></li>
          <li><a href="contact.html">Contact Us</a></li>
          <li><a href="gallery.html" class="active">Gallery</a></li>
          <li><a href="association.html">Association</a></li>
          <li><a href="business-plan.html">Business Plan</a></li>
        </ul>
        <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
      </nav>

</div>
  </header>

<div class="page-title dark-background" data-aos="fade"
      style="background-image: url(assets/img/page-title-bg.webp);">
      <div class="container position-relative">
        <h1>Gallery</h1>
        <p>
          Home
          /
          Gallery
        </p>
        <nav class="breadcrumbs">
          <ol>
            <li><a href="index.html">Home</a></li>
            <li class="current">Gallery</li>
          </ol>
        </nav>
      </div>
    </div>
    <section id="gallery" class="gallery section">
      <div class="container" data-aos="fade">
        <div class="section-title text-center">
          <h2>Our Photo Gallery</h2>
          <p>A collection of our best work and memorable moments.</p>
        </div>

</div>
      </div>
    </section>
  </main>

<div class="footer-top">
      <div class="container">
        <div class="row gy-4">
          <div class="col-lg-4 col-md-6 footer-about">
            <a href="index.html" class="logo d-flex align-items-center">
              <span class="sitename">Masimuj Global Services</span>
            </a>
            <div class="footer-contact pt-0">
              <p>E8 & E9 Nasarawo Industrial Cluster Layout,</p>
              <p>Gombe, Gombe State.</p>
              <p class="mt-1"><strong>Phone:</strong> <span>+234 802 6498 488</span></p>
              <p><strong>Phone:</strong> <span>+234 803 3876 525</span></p>
              <p><strong>Phone:</strong> <span>+234 802 0611 238</span></p>
              <p><strong>Email:</strong> <span>info@masimuj.com</span></p>
            </div>
          </div>

<div class="col-lg-2 col-md-3 footer-links">
            <h4>Useful Links</h4>
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="about.html">About Us</a></li>
              <li><a href="contact.html">Contact Us</a></li>
              </ul>
          </div>

<div class="col-lg-2 col-md-3 footer-links">
            <h4>Our Services</h4>
            <ul>
              <li><a href="index.html#contractRiceMill">Contract Rice Milling</a></li>
              <li><a href="index.html#GroundnutOilProcessing">Groundnut Oil Processing</a></li>
              <li><a href="index.html#AgroAdvisoryServices">Agro Advisory Services</a></li>
              <li><a href="business-plan.html">Business Plan</a></li>
            </ul>
          </div>

<div class="col-lg-2 col-md-3 footer-links">
            <h4>Our Products</h4>
            <ul>
              <li><a href="index.html#PremiumRice">Premium Polished Rice</a></li>
              <li><a href="index.html#RefinedOil">Refined Groundnut Oil</a></li>
              <li><a href="index.html#RiceBran">Raw Paddy Rice</a></li>
              <li><a href="index.html#RawGroundnuts">Raw Groundnuts</a></li>
            </ul>
          </div>

<div class="col-lg-2 col-md-3 footer-links">
            <h4>Our Core Values</h4>
            <ul>
              <li><a href="index.html#values">Mission </a></li>
              <li><a href="index.html#values">Vision</a></li>
              <li><a href="index.html#objectives">Objectives </a></li>
              <li><a href="index.html#company-profile">Company Profile </a></li>
            </ul>
          </div>

</div>
      </div>
    </div>

<div class="d-flex flex-column align-items-center align-items-lg-start">
          <div>
            © Copyright <strong><span>Masimuj GSL</span></strong>. All Rights Reserved
          </div>
          <div class="credits">
            </div>
        </div>

</div>
    </div>

</footer>

</body>

</html>