@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body {
  margin:0px;
    font-family: "Poppins", sans-serif;
}
.header {
  width: 100%;
  height:220px;
  background-image: url('img/header.jpg');
  background-position: center bottom; 
  background-repeat: no-repeat;
  background-size: cover;
}

.footer {
  width: 100%;            
  height: 150px;           
  background-image: url('img/footer.jpg');
  background-position: center bottom; 
  background-repeat: no-repeat; 
  background-size: cover;  
}
.center-text,.text-center {
    text-align: center;
}

.font-light {
  font-weight: 300!important;
}
.font-medium {
  font-weight: 600!important;
}
.font-bold {
  font-weight: 900!important;
}
.img-mobile-80 {
  width:250px;
}
h3 {
        font-size:1.35rem;
}
.estatic-btn {
    border:1px solid #000; border-radius:8px; color:#000;   text-decoration: none; padding:8px 18px
}
.estatic-btn:hover {
    background-color:#000; color:#fff; cursor:pointer;
}

/* ************************* Logos ************************* */

.logos img {
  padding:10px;
}
/* ************************* gallery ************************* */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  padding: 10px;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .header {
    width: 100%;              /* Full width */
    height: 500px;            /* Fixed height of 500px */
    background-image: url('img/header.jpg'); /* Path to your background image */
    background-position: center bottom; /* Positioning the image at the center bottom */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-size: cover;  /* Ensures the image covers the entire element */
  }
  .img-mobile-80 {
    width: 450px;
  }

  .gallery {
    grid-template-columns: repeat(3, 1fr); /* 3 images per row on tablets */
  }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(5, 1fr); /* 5 images per row on desktops */
  }
}

.gallery img {
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove extra space below the image */
  filter: grayscale(100%); /* Make image black and white */
  transition: filter 0.3s ease; /* Smooth transition for the filter */
}

.gallery img:hover {
  filter: none; /* Remove filter on hover, showing full color */
  cursor:pointer;
}










/* ************************* GRID ************************* */

.container {
  width: 80%;
  margin: 0 auto; /* This keeps the container centered */
  padding: 0 15px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: -15px;
}
.col-1 {
  flex: 0 0 8.33%;
  max-width: 8.33%;
}

.col-2 {
  flex: 0 0 16.66%;
  max-width: 16.66%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.33%;
  max-width: 33.33%;
    background-color: yellow;
}

.col-5 {
  flex: 0 0 41.66%;
  max-width: 41.66%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.33%;
  max-width: 58.33%;
}

.col-8 {
  flex: 0 0 66.66%;
  max-width: 66.66%;

}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.33%;
  max-width: 83.33%;
}

.col-11 {
  flex: 0 0 91.66%;
  max-width: 91.66%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;

}

/* styles.css */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 992px) {
  .col-md-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }

  .col-md-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
    background-color: salmon;
  }

  .col-md-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
        background-color: yellow;
  }

  .col-md-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
  }

  .col-md-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
  }

  .col-md-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1200px) {

  .col-lg-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }

  .col-lg-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
    background-color: red;
  }

  .col-lg-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
            background-color: yellow;
  }

  .col-lg-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 58.33%;
    max-width: 58.33%;
  }

  .col-lg-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }

  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
  }

  .col-lg-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }

  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}