@charset "utf-8";

/* CSS Document */

    /* Homepage/ all pages */


body {

            background-image: url( "../images/bg4.png");

            background-size: cover; /* Cover will make the image cover the entire background */

            background-repeat: no-repeat; /* Prevent the image from repeating */

            background-position: center; /* Center the image */

            /* Optionally, you can set a background color in case the image doesn't cover the entire background */

            /* background-color: #f0f0f0; */

        }

	  .navbar{    background-color: #0c1438;}

	  .navbar .nav-link {color: white !important;}

	  .navbar .nav-link i {margin-right: 5px;}

	  .navbar .navbar-toggler-icon {

    background-color: white; /* Change the color of the toggler icon */

  }

  .navbar .navbar-toggler {

    border-color: white; /* Change the border color of the toggler icon */

  }

	  .navbar-toggler{background-color: white;}

  .navbar-collapse {

    background-color: #0c1438; /* Change the background color of the collapsed menu */

  }

  .navbar-collapse .nav-link {

    color: white; /* Change link color to white in the collapsed menu */

  }

    .footer {

      background-color: #0c1438;

      color: #fff;

      padding: 20px 0;
		margin-top: auto;

    }

    .footer a {

      color: #fff;

    }

	  .social-icons a i {

    font-size: 32px; /* Adjust the size of Font Awesome icons */

}



/*gallery*/

 .gallery {

      display: grid;

      grid-gap: 10px;

      margin-top: 20px;

      margin-bottom: 20px;

    }



    .gallery-item {

      position: relative;

      overflow: hidden;

    }



    .gallery-item img {

      width: 100%;

      height: auto;

      display: block;

    }



    .caption {

      position: absolute;

      bottom: 0;

      left: 0;

      width: 100%;

      background-color: rgba(0, 0, 0, 0.7);

      color: #fff;

      padding: 10px;

      text-align: center;

      opacity: 0;

      transition: opacity 0.3s ease-in-out;

    }



    .gallery-item:hover .caption {

      opacity: 1;

    }



    /* Responsive Layout */

    @media (min-width: 576px) {

      .gallery {

        grid-template-columns: repeat(2, minmax(200px, 1fr)); /* 2 columns per row on medium screens */

      }

    }



    @media (min-width: 768px) {

      .gallery {

        grid-template-columns: repeat(3, minmax(200px, 1fr)); /* 3 columns per row on large screens */

      }

    }

/*added*/
html, body {
    height: 100%;
}