    <style>
        body {
            margin: 0;
            padding: 0;
     /*       font-family: Arial, Helvetica, sans-serif;    */
            font-family: "PT Sans", Calibri, Tahoma, sans-serif;
            background-color: white;
            overflow-x: hidden;
        }

        /* Decorative background images */
        .background-image {
            position: fixed;
            opacity: 0.9;
            z-index: -1;
            pointer-events: none;
        }

        #bg_logo { top: 10px; left: 10px; width: 120px; }
        #bg1 { top: 5px; left: 380px; width: 320px;   opacity: 0.40;}
        #bg2 { top: 100px; left: 80px; width: 320px;   opacity: 0.40;}
        #bg3 { top: 30px; right: 20px; width: 320px;   opacity: 0.40;}       
        #bg4 { bottom: 10px; right: 80px; width: 320px;   opacity: 0.40;}
        #bg5 { bottom: 40px; right: 30px; width: 320px;   opacity: 0.40;}
        #bg6 { bottom: 140px; left: 80px; width: 320px;   opacity: 0.40;}       
        #bg7 { bottom: 10px; left: 120px; width: 320px;   opacity: 0.40;}
        #bg8 { top: 350px; left: 450px; width: 320px;   opacity: 0.40;}
        #bg9 { bottom: 240px; right: 80px; width: 320px;   opacity: 0.40;}
        #bg_circuit {
            top: 50%; left: 50%; width: 520px;
            transform: translate(-50%, -50%);
            opacity: 0.15;
        } 

        /* Layout */
        .container {
            max-width: 1100px;
            margin: 80px auto;
            padding: 20px;
        }

        /* Clearfix to contain floated elements */
        .container::after {
            content: "";
            display: block;
            clear: both;
        }

        /* Smaller, floating text boxes */
        .textbox {
            width: 420px;              /* smaller size */
            padding: 16px;
            border-radius: 12px;
            margin: 10px;
         /*   color: white; */
            color: rgba(1, 0, 128, 0.99);
            box-shadow: 0 8px 18px rgba(0,0,0,0.15);
            float: left;               /* float so boxes wrap */
        }

        /* Optional: alternate float directions for variety
           (remove if you want all boxes aligned consistently) */
        .textbox.alt {
            float: right;
        }


       

        .textbox h2 {
            text-shadow: 0 2px 4px rgba(0,0,0,0.55);
        }

        .blue { background-color: rgba(1,0,128,0.3); }
        .bluelight   { background-color: rgba(51, 154, 255, 0.2); } 
        .green  { background-color: rgba(34, 197, 94, 0.35); }
        .purple { background-color: rgba(120, 0, 204, 0.42); }
        .orange { background-color: rgba(245, 158, 11, 0.35); }
        .rose   { background-color: rgba(225, 29, 72, 0.35); }
        .white  { background-color: rgba(225, 255, 255, 0.35); }


.textbox {
  transition: 
    box-shadow 200ms ease,
    transform 200ms ease,
    border-color 200ms ease;
}

/* Hover glow */
.textbox:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.18),
    0 0 0 2px rgba(255,255,255,0.20),    /* subtle inner rim */
    0 0 24px rgba(255,255,255,0.25);    /* outer glow */
  border-color: rgba(255,255,255,0.5);
}

/* Optional: color‑tinted glow per box */
.textbox.blue:hover   { box-shadow: 0 8px 18px rgba(0,0,0,0.18), 0 0 0 2px rgba(59,130,246,0.25), 0 0 24px rgba(59,130,246,0.45); }
.textbox.bluelight:hover   { box-shadow: 0 8px 18px rgba(0,0,0,0.18), 0 0 0 2px rgba(59,130,246,0.25), 0 0 24px rgba(59,130,246,0.45); }
.textbox.green:hover  { box-shadow: 0 8px 18px rgba(0,0,0,0.18), 0 0 0 2px rgba(34,197,94,0.25),  0 0 24px rgba(34,197,94,0.45); }
.textbox.purple:hover { box-shadow: 0 8px 18px rgba(0,0,0,0.18), 0 0 0 2px rgba(168,85,247,0.25), 0 0 24px rgba(168,85,247,0.45); }
.textbox.orange:hover { box-shadow: 0 8px 18px rgba(0,0,0,0.18), 0 0 0 2px rgba(245,158,11,0.25), 0 0 24px rgba(245,158,11,0.45); }
.textbox.rose:hover   { box-shadow: 0 8px 18px rgba(0,0,0,0.18), 0 0 0 2px rgba(225,29,72,0.25),  0 0 24px rgba(225,29,72,0.45); }


        h2 {
            font-family: Arial, Helvetica, sans-serif;
            margin-top: 0;
            font-size: 24px;
        }

        p {
            font-family: Arial, Helvetica, sans-serif;
            margin: 8px 0 0 0;
            font-size: 16px;
            line-height: 1.4;
        }

        h5 {
            margin-top: 0;
            font-size: 12px;
        }

        button {
            padding: 8px 14px;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            margin-top: 10px;
        }

        .green button {
            background-color: white;
            color: #166534;
        }

        /* Responsive: stack boxes on small screens */
        @media (max-width: 640px) {
            .textbox {
                width: calc(100% - 40px); /* full width minus margins */
                float: none;
                margin: 10px 20px;
            }

            /* Reduce background image sizes a bit */
            #bg1, #bg2, #bg3, #bg4 { width: 960px; }
            #bg5 { width: 420px; }
        }


/****************************/
/* Drop-down three-bar menu */

.menu-container {
    position: absolute; /* Change to absolute positioning */
    top: 20px; /* Distance from the top */
    right: 60px; /* Distance from the right */
}

.QSciCo_Menu {
    cursor: pointer;
    display: inline-block;
    margin: 20px;
}

.bar {
    display: block;
    width: 30px;
    height: 4px;
    background: black;
    margin: 5px 0;
    transition: 0.4s;
}

.dropdown {
    display: none; /* Initially hide the dropdown */
    position: absolute;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown ul li a {
    display: block;
    padding: 10px 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: black;
}

.dropdown ul li a:hover {
    background-color: rgba(120, 0, 204, 0.42); /* Change color on hover */
}

/* Add styles for when the dropdown is active */
.show {
    display: block;
}



/* contact-container */
.contact-container {
    position: absolute; /* Change to absolute positioning */
    bottom: 15px; /* Distance from the bottom */
    left: 20px; /* Distance from the left */

}



/* social-media-container */
.social-media-container {
    position: absolute; /* Change to absolute positioning */
    bottom: 40px; /* Distance from the bottom */
    right: 20px; /* Distance from the left */

}


    </style>