/* Global Styles */
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            color: #333;
	        line-height: 1.6;
            background-color: #f4f4f4;
            overflow-x: hidden;
      }

        .navbar {
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	height: 50px;
    	padding: 0 20px;
	    background-color: #333;
      }

	.logo img {
   	    height: 30px;
    	margin-right: 5px;
    	vertical-align: middle;
      }

	.logo-name {
	    color: white;
    	font-size: 1.5em;
    	font-weight: bold;
    	vertical-align: middle;
    	text-decoration: none; /* Remove underline from the name link */
      }

	.nav-links {
    	list-style: none;
    	display: flex;
	    background-color: #333;
      }

	.nav-links li {
    	position: relative;
    	margin-left: 0px;
	    background-color: #333;
      }

	.nav-links a {
    	color: #fff;
    	text-decoration: none;
    	padding: 8px 8px;
    	display: inline-block;
    	transition: background 0.3s;
      }

	.nav-links a:hover {
    	background: #555;
      }

	.dropdown-content {
    	display: none;
    	position: absolute;
    	top: 100%;
    	left: 0%;
    	background: #333;
    	list-style: none;
    	padding: 10px 0;
    	border-radius: 4px;
      }

	.dropdown-content li {
	    width: 200px;
    	margin: 0;
	transition: background 0.3s;
      }

	.dropdown-content a {
    	padding: 8px 16px;
    	width: 80%;
      }

	.dropdown:hover .dropdown-content {
    	display: block;
	transition: background 0.3s;
      }

	.mobile-menu-icon {
    	display: none;
    	font-size: 28px;
    	cursor: pointer;
    	color: #fff;
      }

        /* Section Styles */
        .section {
            padding: 60px 20px;
        }

        .section img {
            width: 100%;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .section-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-top: 40px;
        }

        .text-block {
            width: 100%;
            max-width: 600px;
            margin-bottom: 40px;
        }

        .text-block h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .text-block p {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .text-block a {
            color: #3498db;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s;
        }

        .text-block a:hover {
            color: #2980b9;
        }

        .image-block {
            width: 100%;
            max-width: 600px;
            margin-bottom: 40px;
        }
        
        .image-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease; /* Smooth transition for zoom effect */
        }
        
        .image-block:hover img {
            transform: scale(1.05); /* Zoom-in effect */
        }
        
        /* Footer Styles */
        footer {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }

        footer p {
            margin: 0;
            font-size: 0.9rem;
        }
        
        /* Back-to-Top Button */
        #back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: #888;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 26px;
    
        /* Align text to the center */
            display: flex;
            justify-content: center;
            vertical-align: middle;
            align-items: center;
            text-align: center;
    
}

        #back-to-top:hover {
            transition: background-color 0.3s ease;
            background-color: #555;
        }

        /* Fade-in Animation */
        

        .fade-in {
            opacity: 0;
            animation: fadeIn 4s forwards;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideIn {
            0% {
                top: -100px; /* Start off-screen */
                opacity: 0;
            }
            100% {
                top: 0; /* Final position */
                opacity: 1;
        }
        }
        
        /* Mobile Styles */
    @media screen and (max-width: 768px) {
        .nav-links {
            display: none;
            position: absolute;
            align-items: center;
            top: 45px;
            right: 0px;
            background: #333;
            flex-direction: column;
            width: 200px;
            height: 0px;
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out, visibility 0.3s;
            visibility: hidden; /* Hide the menu */
            pointer-events: none; /* Disable interaction */
        }

    /* When the menu is open */
    .nav-links.open {
        transform: translateX(0);
        display: flex;
        transition: transform 0.3s ease-in-out, visibility 0.3s;
        visibility: visible; /* Show the menu */
        pointer-events: auto; /* Enable interaction */
}

    .nav-links li {
        margin-left: 0;
        text-align: left;
        margin-bottom: 10px;
    }

    .mobile-menu-icon {
        display: block;
    }
    
    }