* { margin: 0; padding: 0; box-sizing: border-box; }

        html, body { height: 100%; overflow-y: auto; }

        body {
            font-family: 'Poppins', sans-serif;
          
            min-height: 100vh;
            background: linear-gradient(135deg, #88D498, #000);
            color: #0B3D2E;
            position: relative;
        }
		

        .overlay {
            position: absolute;
            width: 100vw;
            height: 100vh;
            background: url('https://www.transparenttextures.com/patterns/hexellence.png');
            animatbackion: gradientShift 10s infinite alternate;
            opacity: 0.1;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }

        .content-wrapper {
            display: flex;
            flex-direction: column;
            width: 90vw;
            max-width: 1200px;
            margin: 40px auto;
            gap: 30px;
        }

        .container {
            text-align: center;
            background: #000;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 255, 0, 0.3);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(0, 255, 0, 0.5);
        }

        .logo {
            max-width: 160px;
            margin-bottom: 20px;
            filter: drop-shadow(0 4px 10px rgba(0, 255, 0, 0.3));
            transition: transform 0.3s ease-in-out;
        }
        .logo:hover { transform: scale(1.1); }

        .page-heading, .heading { font-size: 36px; margin-bottom: 20px; color: #FFF; }
        .subheading { font-size: 18px; color: #88D498; margin-bottom: 30px; }

        .instagram-link {
			position: relative;
            display: inline-flex;
            align-items: center;
            padding: 12px 24px;
            background: #df2043;
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            font-weight: 600;
            border-radius: 30px;
            back: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(228, 64, 95, 0.3);
            gap: 10px;
            margin-bottom: 20px;
        }
		
        .instagram-link:hover {
            background: #df2043;
            box-shadow: 0 6px 15px rgba(193, 53, 132, 0.5);
            transform: scale(1.15);
		}

        .instagram-icon { width: 24px; height: 24px; }

        .footer {
            text-align: center;
            padding: 10px 0;
            color: #cccccc;
            font-size: 14px;
        }

        button{
			padding: 10px;
            margin-bottom: 15px;
            border: 2px solid #01b13c;
            background: #000;
            color: #FFF;
            border-radius: 8px;
        }
		
		.slider-form {
			position: fixed;
			top: 0;
			right: -100%; /* Hidden initially */
			width: 100%;
			max-width: 500px; /* Adjustable width */
			height: 100%;
			background: #000;
			box-shadow: 0 8px 32px rgba(0, 255, 0, 0.3);
			overflow-y: auto;
			transition: right 0.3s ease-in-out;
			z-index: 999; /* Ensures it appears above everything */
		}

		.form-content {
			padding: 20px;
		}
		
		#slider-form.active {
			right: 0; /* Slides in when active */
		}

		.close-btn {
			font-size: 24px;
			color: #fff;
			position: absolute;
			top: 10px;
			right: 15px;
			cursor: pointer;
		}

		.slider-form label {
			color: #f2f2f2;
		}
	
		
       .slider-form input{
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #88D498;
            background: #000;
            color: #FFF;
            border-radius: 8px;
			caret-color: #88D498;
        }
		
		.slider-form button{
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
            width: 30vw;
            padding: 10px;
            margin-top: 15px;

        }
		
		.slider-form input:focus{
			border-color: #01b13c;
			box-shadow: 0 0 0 1px #01b13c
        }

		.slider-form button:hover {
            cursor: pointer;
            background: #194d19
            box-shadow: 0 4px 10px #3da954;
            transform: scale(1.05);
			}
		
		.open-form-button{
			display: flex;
			align-items:center;
			justify-content: center;			
		}
		
		.open-form-button:hover{
			transform:scale(0.95);			
		}
		
		.open-form-button button{
			cursor: pointer;
			width: 60%;
			border-radius: 30px;
			box-shadow: 0 2px 10px #01b13c;
			margin: 20px;
		}
		
		
		#yearOfPassing {
			width: 100%;
			padding: 10px;
			border: 1px solid #88D498; 
			border-radius: 8px;
			background-color: #000;
			color: #fff;
			font-family: 'Poppins', sans-serif;
			font-size: 14px;
			appearance: none; /* Hides default arrow in some browsers */
			-webkit-appearance: none; /* Chrome/Safari */
			-moz-appearance: none; /* Firefox */
			cursor: pointer;
			margin-bottom: 15px;
		}
		
		#yearOfPassing:focus {
			border-color: #fff;  /* Highlight focus with black border */
			outline: none;
			color: #fff;
		}
		
		#yearOfPassing option {
			background-color: #000; /* Dark dropdown background */
			color: #fff;            /* Yellow text for options */
			padding: 10px;
			border-bottom: 1px solid #f3b700; /* Subtle dividers */
		}
		
		#yearOfPassing:hover{
			color: #fff;
		}
		
		.select-wrapper {
			position: relative;
			display: inline-block;
			width: 100vw;
		}
		
		.select-wrapper::after {
			content: '▼'; /* Custom arrow */
			font-size: 14px;
			color: #fff;
			position: absolute;
			top: 50%;
			right: 12px;
			transform: translateY(-50%);
			pointer-events: none; /* Arrow remains clickable */
		}
				
		.flashing-text {
			font-weight: bold;
			animation: flash 0.5s infinite alternate;
			pointer-events: none; 
		}
		
		.btn {
			pointer-events: none;   // < --- Solution!
		}

		@keyframes flash {
			from {
				opacity: 1;
			}
			to {
				opacity: 0;
			}
		}
				
		.logo {
			animation: Shake 0.85s linear infinite ;
			transform: translate(0%);
		}
		
		/*Using keyframes for shaking an image*/
		@keyframes Shake {
			0% {
				transform: rotate(5deg);
			}
		
			25% {
				transform: rotate(-6deg);
			}
		
			50% {
				transform: rotate(5deg);
			}
		
			70% {
				transform: rotate(-8deg);
			}
		
			100% {
				transform: rotate(8deg);
			}
		}

		.terms-container {
			margin: auto;
			margin-top: auto;
			margin-botton: auto;
		}

		.terms-container label {
			font-size: 14px;
			color: #555;
			
		}
		
		.terms-container a {
			color: #4CAF50;
			text-decoration: underline;
			font-weight: 600;
		}
		
		.terms-container a:hover {
			color: #45a049;
		}
		
		
		input#termsCheckbox {
			width: auto;
			vertical-align: middle;
			margin-bottom: 2px;
			position: relative;
		}
		
		
		
	#policy-content {
		white-space: pre-wrap; /* Ensures text wraps properly */
		word-break: break-word; /* Breaks long words */
		padding: 15px; 
		background-color: #f9f9f9;
		border: 2px solid #ddd;
		border-radius: 8px;
		height: 75%;
		overflow-y: auto; /* Enables scrolling */
		scroll-behavior: smooth;

		
	}

	pre {
		white-space: pre-wrap;
		word-wrap: break-word;
	}


button#close-modal-btn {
    margin-top: 2vh;	
}


.modal {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 9999;
}

.modal-content {
    background-color: #fff;
    max-width: 80%;
    margin: 10% auto;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    max-height: 70vh; 
}