/* Resetting basic styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        /* Container styling */
        .main_container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
        }

        /* Gallery blocks styling */
        .main-block {
            width: 70%;
            height: 20%;
            margin: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s;
        }

        .main-block:hover {
            transform: scale(1.05);
        }

        .main-block img {
            width: 100%;
            height: auto;
            display: block;
        }


        /* Container styling */
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 40px;
        }


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

        .gallery-block img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Message and Contact Us sections styling */
        .info-section {
            width: 90%;
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background: #f0f0f0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        h2 {
            margin-bottom: 10px;
        }

        p {
            margin-bottom: 10px;
            line-height: 1.5;
        }

        /* Contact form styling */
        .contact-form input,
        .contact-form textarea,
        .contact-form button {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
        }

        .contact-form button {
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }

        .contact-form button:hover {
            background-color: #0056b3;
        }
        

        /* Section styling */
        .section {
            min-height: 100vh;
            padding: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
        }

        /* Background styling */
        .section1 {
            background: url('../img/numuniverse.jpg') no-repeat center center/cover;
            min-height: 100vh;
            padding: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 20px;
        }
        
        /* Background styling */
        .section2 {
            background-color: #5A5A5A;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 40px;
            
        }

        
        /* Background styling */
        .gallery-block {
	        background: no-repeat center center/cover;
            min-height: 50vh;
            padding: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 20px;
            width: 40%;
            margin: 20px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s;
        }
        
        /* Image styling */
        .gallery-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .gallery-block:hover {
            transform: scale(1.05);
        }
        /* Background styling */
        .section2-text {
            min-height: 10vh;
            display: flex;
            color: white;
            padding: 20px;
            width: 100%;
            margin: 20px;
        }


        
        /* Dark overlay styling */
        .overlay {
			top: 70%;
            bottom: 0;
            width: 100%;
            height: 30%; /* 30% height from bottom */
            background: rgba(0, 0, 0, 0.6); /* Dark overlay */
            display: flex;
            flex-direction: column;
			color: white;
			padding: 10px;
			text-align: left;
        }

        /* Text and button styling */
        .overlay h2 {
            font-size: 1.2em;
            margin-bottom: 5px;
        }

        .overlay p {
            font-size: 0.9em;
            margin-bottom: 10px;
        }

        .overlay .button {
            padding: 8px 15px;
            background-color: #ffa500;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            width: 120px;
            transition: background-color 0.3s;
        }

        .overlay .button:hover {
            background-color: #ffb900;
        }        
        
        
               /* Container styling */
        .gallery-block1 {
            position: relative;
            width: 300px; /* Set your preferred width */
            height: 400px; /* Set your preferred height */
            overflow: hidden;
            border-radius: 8px;
            width: 40%;
            margin: 20px;
            transition: transform 0.3s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            min-height: 50vh; 
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            display: flex;
            width: 40%;
            overflow: hidden;
            
        }

        /* Image styling */
        .gallery-block1 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
		.overlay1 .button {
		padding: 8px 15px;
		background-color: #ffa500;
		color: white;
		text-decoration: none;
		border-radius: 4px;
		width: 120px;
		transition: background-color 0.3s;
		}

		.overlay1 .button:hover {
			background-color: #ffb900;
		}
		
		 
		/* Default styling for larger screens */
		#test1 {
			text-align:left; 
			font-size: 3vw;
			font-weight: bold;
		}
		

			
		/* Background styling */
		.section1_1 {
			flex-direction: column;
			align-items: left;
			justify-content: left;
			text-align: left;
			color: white;
			width: 70%;
			bottom: 1%;
			position: absolute;
			padding: 0.1%;
			height: 15%; /* 30% height from bottom */
			background: rgba(0, 0, 0, 0.6); /* Dark overlay */
		}

		 
		/* Default styling for larger screens */
		#test2 {
			text-align:left; 
			font-size: 1.5vw;
			font-weight: bold;
		}
		

		 
		/* Default styling for larger screens */
		#test3 {
			text-align:left; 
			font-size: 2vw;
			font-weight: bold;
		}
		

		 
		/* Default styling for larger screens */
		#test4 {
			text-align:left; 
			font-size: 0.8vw;
			font-weight: bold;
		}
		
		/* Dark overlay styling */
		.overlay1 {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 8vw; /* 30% height from bottom */
			background: rgba(0, 0, 0, 0.6); /* Dark overlay */
			display: flex;
			flex-direction: column;
			align-items: left;
			justify-content: left;
			color: white;
			padding: 10px;
			text-align: left;
		}


        /* Background styling */
        .section3 {
            #background: url('../img/galaxy-milky.jpg') no-repeat center center/cover;
            #background: url('../img/contactus2.png') no-repeat center center/cover;
            background: url('../img/black-hole.jpg') no-repeat center center/cover;
            min-height: 100vh;
            padding: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 20px;
        }


		.menu_item {
			width: 25px;
            height: 25px;
		}
		
		
		.calculator {

			padding: 20%;
			border-radius: 1%;
			width: 20vw;
			height: 20vw;
			text-align: center;
		}


        input[type="date"] {
            width: 100%;
            padding: 2%;
            margin: 10px 0;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        
        .result {
            margin-top: 15px;
            font-size: 24px;
            color: #4CAF50;
            font-weight: bold;
        }
        
        button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            border-radius: 4px;
            margin-top: 10px;
        }
        
        button:hover {
            background-color: #45a049;
        }