/* body */
    body {
            background-color: #000000;
            font-family: Arial, Helvetica, sans-serif;
            margin: 0px;
            color: white;
    }

    /* maintopbar */
    main {
            display: flex ;
            background-color: #001F1F;
            font-size: 16px;
            padding: 2px 15px;
            justify-content: space-between;
            align-items: center;
            color: white;
            position: relative;
            min-height: 68px;
    }


    /* logo */
        .brand {
            display: flex;
            flex-shrink: 0;
            margin-left: 0;
            align-items: center;
            gap: 4px;
    }

    .brandlink {
        text-decoration: none;
        color: white;
        display: inline-block;
    }

    .brandname {
        font-size: 22px;
    }


    .brand-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    .brand-text h1 {
        margin: 0;
    }

    .slogan {
        margin: 2px 0 0;
        font-size: 11px;
        letter-spacing: 0.3px;
        color: #CCFFFF;
    }

        .logo {
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 25px;
        }

        .login {
            cursor: pointer;
            font-size: 16px;
            color: white;
            text-decoration: none;
            background-color: #09A551;
            border-radius: 3px;
            padding: 6px 8px;
            font-weight: bold;
        }

        .menue {
            display: flex;
            gap: 20px;
            position: relative;
            flex-shrink: 0;
            margin-left: auto;

        }

        .menue a {
            color: white;
            text-decoration: none;
            cursor: pointer;
            background-color: transparent;
            border-radius: 3px;
            padding: 10px 12px;
            font-weight: lighter;
            transition: background-color 0.1s ease;
        }
        .menue a.active-page {
            background-color: #C7CBCC; 
            color: #014229;
            font-weight: bold;
        }

         .menu-toggle {
            display: none;
            flex-direction: column;
            gap: 4px;
            padding: 6px;
            background-color: transparent;
            border: none;
            cursor: pointer;
        }

        .menu-toggle span {
            display: block;
            width: 22px;
            height: 3px;
            background-color: white;
        }


        .header-actions {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-left: auto;
        }

        /* HERO SECTION */
        .welcomesection {
            margin: 0;
            justify-content: center;
            align-items: center;
            text-align: center;
            display: flex;
            background-color: #000e0e;
            padding: 10px 16px;
            box-sizing: border-box;
            box-shadow: #CCFFFF;
            border: #CCFFFF;
            stroke: aquamarine;
            background-image: linear-gradient(
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.75)
        ), url("img/kier-in-sight-archives-3Nwt6w-KU3E-unsplash.jpg");

            background-size: cover;
            background-position: center;
            min-height: 600px;
        }

        .herobrand {
            color: rgb(236, 224, 208);
            cursor: pointer;
            margin-top: 10px;
        } 

        .heroslogan {
            font-size: 70px;
            font-weight: bold;
            color: rgb(230, 243, 243);
            margin-top: 10px;
            word-spacing: 0.3px;
            font-size: clamp(22px, 5vw, 72px);
            white-space: normal;
            line-height: 1.2;
            
        }

        .gatestarted {
            text-decoration: none;
            color: rgb(0, 0, 0);
            background-color: #46e0e0;
            padding: 10px 15px;
            border-radius: 20px;
            cursor: pointer;
            word-spacing: 0.3px;
        }
        .heroslogandetails {
            max-width: 600px;
            margin: 15px auto;
            line-height: 1.6;
        }

        .hotspot-card {
            display: flex;
            flex-direction: column;
            align-items: left;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
            padding: 40px 20px;
            margin: 30px 0;
        }

        .hotspot-card h2 {
            max-width: 700px;
            margin-top: 10px;
            font-size: clamp(24px, 4vw, 42px);
        }

         /* CSS rules for narrower screens */
        @media (max-width: 768px) {
            .menue {
               display: none;
            }

            .menue.show-menu {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 100%;
                right: 0;
                width: 180px;
                padding: 15px;
                background-color: #001F1F;
                z-index: 1000;
                gap: 10px; box-sizing: border-box;
                border-radius: 3px;
            }

            .menu-toggle {
                display: flex;
            }
            .heroslogan {
                font-size: clamp(20px, 5vw, 36px);
            }

        }

        .hotspot-hero {
            min-height: 550px;
            background-image:
                linear-gradient(
                    rgba(0, 0, 0, 0.65),
                    rgba(0, 0, 0, 0.65)
                ),
                url("img/hotspot-dashboard.jpg");
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: flex-end;
            padding: 40px;
            box-sizing: border-box;
            color: white;
        }

        .hotspot-content {
            max-width: 1000px;
        }