html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #8e8e8e;
}

#scale-wrapper {
    width: 1600px;   /* original design width */
    height: 900px;   /* original design height */
    transform-origin: top left;
    /* scale uniformly based on smaller of viewport width/height */
    transform: scale(
        min(
            100vw / 1600,
            100vh / 900
        )
    );
}
.header-wrapper {
    display: flex;           /* horizontal layout */
    align-items: center;     /* vertically center logo and banner */
    width: 100vw;            /* full viewport width */
    height: 5rem;            /* height of logo/banner */
}

.head-banner {
    flex: 1;                 /* take remaining space to the right */
    height: 100%;
    background-color: #f44336;
    display: flex;           /* optional, for centering text */
    justify-content: center;
    align-items: center;
    text-align: center;
}

#home-logo {
    height: 5rem;            /* keeps original size */
    width: auto;
}


/* Sections container */
.sections {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.sections button {
    margin: 0 0.75vw; /* fixed gap in pixels */
}

/* Buttons */
button {
    background-color: #212121;
    height: auto; /* 2.5rem */
    width: 13vw; /* 15rem */
    outline: none;
    font-size: 1.4vw;
    font-weight: 700;
    color: white;
    border-radius: 28px; /* 1.75rem */
    border: none;
    box-shadow: 0 0.35rem rgba(0, 0, 0, 0.5); /* 0.35rem */
    transition: all 0.2s ease-in-out;
}

button:hover {
    background-color: #616161;
}

button:active {
    background-color: #616161;
    box-shadow: 0 5px #666;
    transform: translateY(4px); /* 0.25rem */
}



.partner-brands {
    text-align: center;
    margin: 1rem;
    background-color: white;
    border-radius: 1rem;
    border: 4px solid black;
}
.partner-brands h2 {
    font-family: sans-serif;
    font-size: 1.5vw;
}

.brands {
    width: 10vw;
    height: 10vw;
    margin-left: 5px;
    margin-right: 5px;
}

/* Products container */
.products {
    display: flex;
    justify-content: center;   /* centers horizontally */
    align-items: flex-start;   /* keeps at top */
    gap: 1rem;
    margin-top: 2rem;
    width: 100%;
}

/* Sangoma + Network boxes */
.sangoma,
.network {
    display: block;           
    text-align: center;
    margin: 1rem;
    background-color: white;
    border-radius: 1rem;
    width: 40vw;
    padding: 10px;
    border: 4px solid black;
    font-family: sans-serif;
    font-weight: 700;
}

/* Headings and lists inside Sangoma */
.sangoma h2 {
    font-size: 1.75vw;
}
.business li,
.calling li,
.telephony li,
.admin li,
.ucp li,
.addons li {
    text-align: left;
    font-size: 1vw;
}
.business h3,
.calling h3,
.telephony h3,
.admin h3,
.ucp h3,
.addons h3 {
    color: #f44336;
    text-align: left;
    font-size: 1.5vw;
    margin-bottom: 5px;
    padding-top: 30px;
}
.addons h4 {
    font-size: 1.25vw;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Headings and lists inside Network */
.unifi h3,
.sangoma2 h3,
.yealink h3,
.fanvil h3,
.navepoint h3,
.networx h3,
.radios h3,
.cellular h3 {
    color: #f44336;
    text-align: left;
    font-size: 1.5vw;
    margin-bottom: 5px;
    padding-top: 30px;
}

.unifi li,
.sangoma2 li,
.yealink li,
.fanvil li,
.navepoint li,
.networx li,
.radios li,
.cellular li {
    text-align: left;
    font-size: 1vw;
}