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 */
}



/* main body */
.body-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh; /* space between sections */
    padding: 2vh 1vw;
}

/* Inline Boxes (sections) */
.inline-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    width: 100%;
    padding-bottom: 1rem;
}

    .image-box1,
    .image-box2 {
      margin: 0.75rem;
      width: fit-content;
      height: auto;
    }

    #switch {
      width: 25vw;
      height: auto;
      border-radius: 1rem;
      border-radius: 1rem;
      border-style: solid;
      border-color: #f44336;
      border-width: 0.35rem;
    }
    #rack {
      width: 25vw;
      height: auto;
      border-radius: 1rem;
      border-radius: 1rem;
      border-style: solid;
      border-color: #f44336;
      border-width: 0.35rem;
    }

    .middle-text {
      display: flex;
      flex-direction: column;  /* stack text boxes vertically */
      gap: 1rem;               /* space between them */
    }

    .hook-text,
    .info{
      margin: 0.75rem;
      width: 30vw;
      height: fit-content;
      background-color: #f44336;
      border-radius: 1rem;
      border-style: none;
      text-align: center;
      color: white;
      font-family: sans-serif;
    }

    .hook-text h1{
        font-size: 2.5vw;
    }
    .info h2{
        font-size: 2.25vw;
        margin-bottom: 5px;
    }
    .info h3{
        font-size :1.5vw;
        margin-top: 5px;
    }

    #contact-text,
    #info-text {
      text-decoration: none;
      color: white;

    }
    .info a{
        text-decoration: none;
        color: white;
    }
    .info a:hover, .service-types a:hover {
        text-decoration: underline !important;
        color: lightgrey !important;
    }

.service-area {
    display: flex;
    flex-direction: column; /* stack text + image vertically */
    align-items: center;    /* center everything horizontally */
    background-color: #f44336;
    color: white;
    border-radius: 1vw;
    border: 0.35vw solid #f44336;
    padding: 1rem;
    width: 75vw;
    margin: 0 auto;         /* center the container itself on the page */
    text-align: center;     /* center inline text inside */
}

.service-area h2 {
    margin: 0 0 5px 0;
    font-family: sans-serif;
    font-size: 2vw;
}

#service-area {
    width: 100%;            /* take full width of container */
    max-width: 75vw;        /* optional max width to match container */
    height: auto;
    border-radius: 1rem;
    border: 0.35rem solid #f44336;
    display: block;         /* ensure it’s a block element */
}