@charset "UTF-8";
/* CSS Document */

        :root {
            /* Fluid Typography */
            --fs-base: clamp(0.9rem, 1.1rem + 0.2vw, 1.5rem);
            --fs-h1: clamp(2.8rem, 1.8rem + 2.5vw, 4rem);
            --fs-h2: clamp(1.8rem, 1.2rem + 2vw, 2.5rem);
            --fs-h3: clamp(1rem, 1rem + 1.6vw, 1.7rem);
            --fs-small: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
            
            --max-width: 880px;
            --bg-color: #fff;
            --text-color: #000;
            --accent-color: #666;
        }

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

        body {
            font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
            font-size: var(--fs-base);
            color: var(--text-color);
            background-color: var(--bg-color);
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Keeps footer at bottom if content is short */
            padding: 0;
        } 

        .top-section { 

            background-image: url("../images/header-bkgr.jpg");
            background-size: cover;
            background-position: center ;
            border-bottom: 4px ridge #ffffff;
            -webkit-box-shadow: 0px 15px 35px rgba(0, 0, 50, 0.75);
            -moz-box-shadow:    0px 15px 35px rgba(0, 0, 50, 0.75);
            box-shadow:         0px 15px 35px rgba(0, 0, 50, 0.75);
        }

        .container {
            max-width: var(--max-width);
            width: 100%;
            margin: 0 auto;
            margin-top: 2rem;
            background: rgba(0, 0, 0, 0.0);
            padding: clamp(0.5rem, 1vw, 2rem);
            flex: 1; /* Pushes footer down */
        }

        h1 {
            font-size: var(--fs-h1);
            font-family: Orbitron, system-ui, -apple-system, sans-serif;
            line-height: 1;
            margin: auto;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            color: #fff;
            text-wrap: balance;
            text-align: center;
        }

        h2 {
            font-size: var(--fs-h2);
            font-family: 'Roboto', system-ui, -apple-system, sans-serif;
            line-height: 1.1;
            margin: auto;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            color: #fff;
            text-wrap: balance;
            text-align: center;
        }

        h3 {
            font-size: var(--fs-h3);
            line-height: 1.1;
            margin: auto;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            color: #000;
            text-wrap: balance;
            text-align: center;
        }

        /* Footer Styles */
        footer {
            max-width: var(--max-width);
            width: 100%;
            margin: 0 auto;
            padding: clamp(0.5rem, 1vw, 2rem);
            font-size: var(--fs-small);
            color: var(--accent-color);
        }

        /* Other Styles */
        p + p {
            margin-top: 20px; 
        }

        .center { 
            text-align: center;
            margin: auto;
        }

        img { 
            width: 750px; 
            height: auto;
            max-width: 100%;
            margin-top: 20px;
            border-radius: 12px;
        }

        img.white-border {
            border: 3px #fff solid;
	        box-shadow: 0px 1px 5px 0px rgba(0,1,1,0.3);
        }

        img.alignleft { float: left; margin-right: 20px; margin-bottom: 20px; margin-left:0; }
        img.alignright { float: right; margin-left: 20px; margin-bottom: 20px; margin-right:0; }

        hr.style-two {
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        }

        .highlight { 
            background-color: #ffff00;
        }

        ul { 
            margin-top: 20px;
            margin-left: 1.5rem;
            list-style-image: url('../images/green-check.png');
        }

        .gradient-text {
            background: linear-gradient(to top, #ffffff, #ffffff, #b9c3db, #e8e9eb,#f5f5f5, #bebebe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }


    @media only screen and (max-width: 767px) {
		img { max-width: 100%; height: auto; }
		img.alignleft, img.alignright { float: none; margin: 0 auto; display: block; }
	
    }