html, body {
            height: 100%;
            margin: 0;
        }
        body {
            background-color: #000634;
        }
		 
		@font-face{font-family:mrgvlovani;src:url(../fonts/mrgvlovani/bpg_mrgvlovani_2009.ttf);}
        .geotext{font-family:mrgvlovani!important;}
 
        .text-center {
	    color: white;
	
        } 
        .bg {
            animation: slide 9s ease-in-out infinite alternate;
            background-image: linear-gradient(-60deg, #000634 50%, #080a1e 50%);
            bottom: 0;
            left: -50%;
            opacity: .5;
            position: fixed;
            right: -50%;
            top: 0;
            z-index: -1;
        }
        @keyframes slide {
            0% { transform: translateX(-25%); }
            100% { transform: translateX(25%); }
        }
		 
		 .navbar{
		 background-color: indigo;
	     opacity: 0.5;
		 border-bottom: 2px solid white;	 
		 }
		 
		 .navbar:hover{		 
	     opacity: 1;
		 transition: all 0.5s ease; /* Smooth transition for all properties */ 	 
		 }
		 
        /* Make collapsed navbar scrollable */
        .navbar-collapse.collapse.show {
            max-height: 75vh; /* Adjust as needed */
            overflow-y: auto;
        }
        /* Centered logo */
        .centered-logo {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 0;
			opacity: 0.3;
        }
        .content {
            position: relative;
            z-index: 1;
			padding-top: 100px;
        }
        /* Animation for image grid */
        .img-fluid {
        opacity: 1; /* Initially visible */
        transform: scale(0.9); /* Slightly smaller */
        transition: all 0.5s ease; /* Smooth transition for all properties */
        padding: 5px;
        background: linear-gradient(to right, violet, lightblue);		
        border-radius: 50px;		
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 
                0 0 10px rgba(255, 255, 255, 0.5), 
                0 0 20px rgba(255, 255, 255, 0.3), 
                0 0 30px rgba(255, 255, 255, 0.2);
        }

       .img-fluid:hover {
       opacity: 1; /* Fully visible on hover */
       transform: scale(1); /* Original size on hover */     			 
       }
		 
		.title{			 
			 color: white;
			 opacity: 0;			
             transform: scale(0.9);
             animation: easeInAnimation 0.5s forwards; 
			 
	   }	 

        @keyframes easeInAnimation {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }