/* Reset & basic styling */
        * { margin:0; padding:0; box-sizing:border-box; }
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        
        /* Background layers */
        .bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: -2;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }
        
        .bg.active {
            opacity: 1;
        }
		
		img {
            display: block;
            max-width: 100%;
            height: auto;
        }

		img.center {
            margin:0 auto;
        }

        header {
            text-align: center;
            color: #949599;
            padding: 1rem;
            /* Add top-to-bottom semi-transparent black gradient */
            background: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0));
        }
        
        .box {
            max-width: 500px;
            margin: 10% auto auto auto;
            background: #fff;
            padding: 25px;
            border-radius: 6px;
            text-align: center;
            line-height:2;
        }
        .error {
            color: #b00020;
            margin-bottom: 20px;
        }
        .error-message {
            color:#c00;
            margin-bottom:10px;
            text-align:center;            
        }
		
        footer {
            text-align: center;
            color: #fff;
            padding: 1rem;
            text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
        }

        /* Central content */
        .content {
			width:90%;
            max-width: 900px;
            margin: 30px auto 50px auto;
            background-color: rgba(255,255,255,0.8);
            padding: 30px;
            border-radius: 10px;
        }

        .content h1, .content .fnote {
            text-align: center;
            margin-bottom: 20px;
			font-size: 2rem;
            color: #3b4b7d;
        }

        header h2 {
            font-size:1em;
        }
		
        header p {
            font-size:0.875em;
			font-style:italic;
        }

        .content p {
            margin-bottom: 20px;
            font-size: 1rem;
            color: #333;
			text-align: center;
        }

        /* Contact form – narrower than content area */
        .contact-form {
            width: 100%;         /* narrower than content */
            max-width: 500px;   /* optional maximum width */
            margin: 0 auto 30px auto;  /* center horizontally and add bottom spacing */
        }

        .contact-form input, 
        .contact-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 1rem;
        }

        button {
            display: block;
			margin: 15px auto 0 auto;
			background-color: #ff5003;
            color: #fff;
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
        }
		
        button:hover {
            background-color: #dd4502;
        }

        a {
            text-decoration:none;
        }
		
        /* Checklists */
        .checklists {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
        }

        .checklist {
            background-color: rgba(0,0,0,0.1);
            padding: 20px;
            flex: 1 1 45%;
            border-radius: 8px;
        }

        .checklist h3 {
            margin-bottom: 10px;
            color: #333;
        }

        .checklist ul {
            list-style: disc;
            padding-left: 20px;
			font-size: 0.875rem;
        }

        /* Responsive stacking for mobile */
        @media (max-width: 768px) {
            .checklists {
                flex-direction: column;
            }
            .checklist {
                flex: 1 1 100%;
            }
        }

        @media (in-width: 768px) {
        .contact-form {
            width: 70%;
        }
        }