:root {
    --main-color: #006E7F;
    --main-color-rgb: 0, 110, 127;
}

/* Fonts */
body {
    margin-bottom: 100px;
    font-family: 'Jost';
    font-weight: 300;
    font-size: 1.2rem;
}

p {
    margin-bottom: 25px;
}

.p-no-margin {
    margin-bottom: 0;
}

/* Headings */
h1 {
    font-family: 'Jost';
    font-weight: 600;
    font-size: 2.8rem;
    margin-bottom: 5%;
}

h2 {
    font-family: 'Jost';
    font-weight: 600;
    font-size: 2.5rem;
    margin-bottom: 3%;
    display: inline-block;
}

h3 {
    font-family: 'Jost';
    font-size: 1.5rem;
    margin-bottom: 5px;
}

/* Navigation */
#nav-dorisrhomberg {
    position: fixed;
    left: 0;
    z-index: 1000;
    transform: rotate(-90deg) translateY(-60px);
}

.nav-doris-text {
    display: inline-block;
    font-family: 'Jost';
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    font-weight: 500;
    margin-right: 10px;
    font-size: 12pt;
}

.nav-arrow {
    transform: rotate(90deg);
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    color: black;
}

.nav-doris-text:hover {
    color: var(--main-color);
}

.nav-arrow:hover {
    color: var(--main-color);
}

/* Header */
#title {
    /* Styling for title can be added here */
}

.header-img {
    width: 100%;
}

@media (max-width: 740px) {
    .header-img {
        margin-top: 30px;
    }
}

/* Container */
.container-fluid {
    padding: 7% 2% 8%;
    max-width: 1089px;
}

.container-fluid-lg {
    padding: 7% 2% 8%;
    max-width: 1500px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

/* Grid Layouts */
.rows {
    display: flex;
    flex-direction: row;
    gap: 40px;
    width: 100%;
    justify-content: center;
}

.rows-reverted {
    display: flex;
    flex-direction: row;
    gap: 40px;
    width: 100%;
    justify-content: center;
}

.columns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.columns-3 {
    width: 33%;
}

.columns-4 {
    width: 40%;
}

.columns-5 {
    width: 50%;
}

.columns-6 {
    width: 60%;
}

/* Grid Rows */
.grid-rows {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    max-width: 1200px;
}

/* Responsive for Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    h1 {
        font-size: 2.2rem; /* Adjust h1 size for tablet */
    }

    h2 {
        font-size: 2rem; /* Adjust h2 size for tablet */
    }

    h3 {
        font-size: 1.3rem; /* Adjust h3 size for tablet */
    }

    .container-fluid, .container-fluid-lg {
        padding: 7% 12% 8%; /* Adjust container padding */
    }

    .columns-3, .columns-4, .columns-5, .columns-6 {
        width: 100%; /* Full-width columns on tablet */
    }
}

/* Responsive for Mobile (max-width: 740px) */
@media (max-width: 740px) {
    .rows {
        flex-direction: column;
        gap: 10px;
    }

    .rows-reverted {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .columns-3, .columns-4, .columns-5, .columns-6 {
        width: 100%; /* Columns take full width on mobile */
    }

    h1 {
        font-size: 1.8rem; /* Smaller heading sizes for mobile */
        margin-bottom: 10%;
    }

    h2 {
        font-size: 1.6rem; /* Adjust h2 size for mobile */
        margin-bottom: 5%;
    }

    h3 {
        font-size: 1.2rem; /* Adjust h3 size for mobile */
    }

    .container-fluid, .container-fluid-lg {
        padding: 8% 12% 10%;
    }

    .header-img {
        margin-top: 20px; /* Slight margin adjustment for mobile */
    }
}