* {
    font-size: inherit;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@media (prefers-reduced-motion) {
    *:not(.ignore-motion-preference) {
        animation: none !important;
    }
}

*:focus-visible {
    outline: 0.2em solid hsl(0, 60%, 60%);
}

[id] {
    scroll-margin-top: var(--scroll-margin);
}

:root {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    
    --bg-very-light: hsl(74, 90%, 80%);
    --bg-light: hsl(74, 70%, 45%);
    --bg-medium: hsl(74, 50%, 30%);
    --bg-medium-medium: hsl(74, 50%, 25%);
    --bg-medium-dark: hsl(74, 30%, 20%);
    --bg-dark: hsl(74, 30%, 15%);
    
    --bg-light-gray: hsl(196, 4%, 49%);
    --bg-dark-gray: hsl(196, 4%, 39%);
    
    --bg-light-black: hsl(196, 4%, 19%);
    --bg-dark-black: hsl(196, 4%, 9%);
    
    
    --text-brown: hsl(27, 70%, 13%);
    --text-gray: hsl(0, 0%, 85%);
    --text-link: hsl(74, 79%, 46%);
    
    
    --box-shadow: 0em 0.15em 0.6em hsl(0, 0%, 46%);
    
    --scroll-margin: 0;
    
    min-height: 100vh;
    width: 100%;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    
    min-height: 100vh;
    width: 100%;
    
    color: black;
    background-color: white;
    
    overflow-x: hidden;
}

body > header {
    position: sticky;
    z-index: 100;
    
    font-family: "Roboto Black";
    font-size: 1.5rem;
    
    display: flex;
    
    top: 0;
    
    padding-inline: 1em;
    
    color: white;
    background-color: var(--bg-dark);
    background-image: linear-gradient(to right, var(--bg-dark), var(--bg-medium-dark));
    
    & #site_select {
        align-self: center;
        position: relative;
        
        & > #site_select_button {
            --icon: url("./resources/image/down_arrow.svg");
            
            align-content: center;
            
            background-image: none;
            background: transparent;
            border: none;
        }
        
        & > #site_select_content {
            position: absolute;
            
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            
            z-index: 101;
            
            min-width: 10em;
            list-style: none;
            padding: 0;
            margin: 0;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            
            & > li a {
                display: block;
                padding: 0.75rem 1rem;
                color: var(--bg-dark);
                text-decoration: none;
                font-size: 1rem;
                
                &:hover {
                    background-color: var(--text-link);
                }
            }
            
            &.hidden {
                display: none;
            }
        }
    }
}

@media (max-width: 30rem) {
    body > header {
		position: revert;
        flex-direction: column;
		
		padding-block-start: 2em;
        
        & > h1 {
            font-size: 1em;
			
			padding: 0;
        }
    }
}

main {
    display: flex;
    flex-direction: column;
}

a {
    color: var(--text-link);
}

a[href^="tel:"] {
    color: hsl(200, 100%, 60%);
}

h1 {
    display: flex;
    align-items: center;
    font-size: 1.2em;
    
    padding-block: 0.8em;
    
    gap: 0.25em;
}

h2 {
    font-size: 1.5em;
    font-weight: bold;
}

h1::before {
    content: "";
    
    background-image: url("/resources/image/logo.png");
}

nav {
    display: none;
}

@media (max-width: 81rem) {
    #nav_dropdown {
        margin-inline-start: auto;
        margin-block-start: auto;
    }
}

@media (min-width: 80rem) {
    nav {
        display: flex;
        align-items: end;
        margin-inline-start: auto;
        text-transform: uppercase;
        
        & > menu {
            display: flex;
            align-items: center;
            
            list-style: none;
            
            & > li {
                position: relative;
                z-index: 0;
                
                padding: 0.5em;
                
                border: 0.05em solid black;
                background-color: white;
                
                overflow: hidden;
                
                a {
                    color: black;
                    
                    text-decoration: none;
                }
            }
            
            & > li::before {
                content: "";
                z-index: -1;
                
                position: absolute;
                
                inset: 0;
                
                background-color: var(--bg-light);
                
                transform: scaleY(0);
                transform-origin: bottom;
                
                transition: 100ms linear transform;
                
                pointer-events: none;
            }
            
            & > li:hover::before {
                transform: scaleY(1);
            }
        }
    }
    
    #nav_dropdown {
        display: none;
    }
}

#language_select_button {
    font-family: "Roboto";
    
    position: absolute;
    top: 0.25em;
    right: 0.25em;
    
    color: white;
    
    border: none;
    background-color: transparent;
    
    option {
        color: black;
    }
}

.hero {
    --hero-appear-animation-time: 400ms;
    --hero-hover-transition-time: 300ms;
    
    display: flex;
    flex-direction: column;
    
    gap: 1em;
    
    margin-inline: 17.5%;
    margin-block: 1.5em;
    
    padding-inline: 1em;
    padding-block: 2em;
    
    border-radius: 0.3em;
    box-shadow: var(--box-shadow);
    
    color: white;
    background-color: var(--bg-light-black);
    background-image: radial-gradient(var(--bg-light-black) 10%, var(--bg-dark-black));
    background-position: center;
    background-size: 100%;
    
    overflow: hidden;
    
    animation: var(--hero-appear-animation-time) ease-out hero-fadein;
    transition: var(--hero-hover-transition-time) ease-out background-size;
    
    &:hover {
        background-size: 300%;
    }
    
    & > h2, & > h3 {
        font-family: "Roboto Black";
        
        font-size: 1.5em;
        font-weight: bold;
        
        text-transform: uppercase;
        
        animation: var(--hero-appear-animation-time) ease-out hero-title-slidein;
        transition: var(--hero-hover-transition-time) ease-out transform;
    }
    
    &:hover > h2 {
        transform: translateX(0.4rem);
    }
    
    & > p {
        align-self: center;
        
        padding-inline: 1em;
        
        animation: var(--hero-appear-animation-time) ease-out hero-content-slidein;
        transition: var(--hero-hover-transition-time) ease-out transform;
    }
    
    &:hover > p {
        transform: translateX(-0.4rem);
    }
}

.header-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    gap: 5em;
    
    height: 50em;
    
    padding-inline: auto;
    
    background-size: cover;
    
    &.services {
        background-image: url("./resources/image/services/header1.jpg");
    }
    
    &.home {
        background-image: url("./resources/image/home/AdobeStock_212241633.jpg");
    }
    
    & > h2 {
        font-size: 5em;
        
        font-weight: bold;
        text-transform: uppercase;
        
        color: white;
        background-color: var(--bg-light);
        
        padding: 0.3em;
        
        max-width: 100%;
    }
}

@media (max-width: 60rem) {
    .header-image > h2 {
        font-size: 2em;
    }
}

#services_info {
    display: flex;
    justify-content: space-evenly;
    gap: 2em;
    
    padding-inline: 2em;
    padding-block: 2em;
    
    background-image: radial-gradient(var(--bg-light-gray) 10%, var(--bg-dark-gray));
    background-position: center;
    background-size: 100%;
    
    & > section {
        font-size: 1.25em;
        
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 0;
        gap: 0.5em;
        max-width: 25%;
        
        margin-inline: 0;
        
        padding: 1em;
        
        border-radius: 0.2em;
        
        background-color: white;
        
        box-shadow: var(--box-shadow);
        
        transform: scale(1);
        transform-origin: center;
        
        transition: 100ms ease-in-out transform;
        
        & > header {
            display: flex;
            
            margin-block-end: auto;
            
            & h3 {
                font-size: 1.25em;
                margin-block-end: auto;
            }
            
            & img {
                width: 5em;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                
                margin-inline-start: auto;
            }
        }
        
        & > p {
            font-size: 1.2em;
            
            text-align: end;
        }
        
        &:hover {
            transform: scale(1.02);
        }
    }
}

@media (max-width: 70rem) {
    #services_info {
        flex-direction: column;
        
        & > section {
            max-width: unset;
            
            & > header {
                flex-direction: column-reverse;
            }
        }
    }
}

#services_list {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    
    padding-inline: 2em;
    padding-block: 2em;
    
    background-color: var(--bg-medium-medium);
    
    & > section {
        font-size: 1.5em;
        display: flex;
        flex-grow: 1;
        flex-shrink: 0;
        gap: 0.5em;
        
        max-width: 95%;
        
        margin-inline: 2em;
        
        padding: 1em;
        
        border-radius: 0.2em;
        
        box-shadow: var(--box-shadow);
        
        background-color: white;
        
        transform: scale(1);
        transform-origin: center;
        
        transition: 100ms ease-in-out transform;
        
        &:hover {
            transform: scale(1.02);
        }
        
        & h3 {
            font-size: 1.25em;
        }
        
        & > .content {
            display: flex;
            flex-direction: column;
            gap: 0.5em;
        }
        
        & > aside {
            margin-inline-start: auto;
            
            width: 15em;
            
            &.services-bg-image-1 {
                background-image: url("./resources/image/services/AdobeStock_125073280.jpg");
                background-size: cover;
            }
        }
    }
}

@media (max-width: 70rem) {
    #services_list {
        flex-direction: column;
        
        word-break: break-word;
        
        & > section {
            flex-direction: column;
            margin-inline: auto;
        }
    }
}

li:has(.item-title) {
    margin-inline-start: 1em;
    
    & .item-title {
        font-weight: bold;
    }
    
    & .item-title::after {
        content: ": ";
    }
}

#contact_option_list {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    margin-inline: 2em;
    
    margin-block-end: 2rem;
    
    & > section {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 0;
        gap: 0.5em;
        
        margin-inline: 0;
        
        padding: 1em;
        
        border-radius: 0.2em;
        
        box-shadow: var(--box-shadow);
        
        transform: scale(1);
        transform-origin: center;
        
        transition: 100ms ease-in-out transform;
        
        & > h2 {
            margin-block-end: auto;
        }
        
        & > p {
            font-size: 1.2em;
            
            text-align: end;
        }
        
        &:hover {
            transform: scale(1.02);
        }
    }
}

#map {
    display: flex;
    justify-content: center;
    align-items: center;
    
    margin-inline: 0;
    
    & > div {
        position: relative;
        flex-grow: 1;
        
        height: 30em;
        
        overflow: hidden;
        
        & > iframe {
            position: absolute;
            inset: 0;
            
            width: 100%;
            height: 100%;
        }
    }
}

footer {
    position: relative;
    
    --columns: 3;
    
    font-size: 0.9rem;
    
    display: grid;
    
    grid-template-columns: repeat(var(--columns), 1fr);
    
    gap: 5em;
    margin-block-start: auto;
    padding-block-start: 3em;
    padding-block-end: 4em;
    padding-inline: 27.5%;
    
    color: var(--text-gray);
    
    background-color: var(--bg-dark-gray);
    background-image: linear-gradient(to bottom, var(--bg-light-gray), var(--bg-dark-gray));
    background-size: cover;
    
    section {
        display: flex;
        flex-direction: column;
        
        gap: 1em;
    }
}

@media (max-width: 70rem) {
    footer {
        display: flex;
        flex-direction: column;
        
        padding-inline: 1em;
    }
}

footer h2 {
    font-family: "Roboto Black";
    
    color: white;
}

#footer_links_content {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

footer .with_icon {
    display: grid;
    align-items: center;
    column-gap: 0.5em;
    
    grid-template-columns: var(--icon_size) 1fr;
}

footer .with_icon::before {
    grid-column: 1;
    
    align-self: center;
}

#footer_address {
    --icon: url("/resources/image/location.svg");
}

#footer_address::before {
    grid-row: span 2;
}

#footer_phone_number {
    --icon: url("/resources/image/phone.svg");
}

#footer_email {
    --icon: url("/resources/image/mail.svg");
}

#copyright_notice {
    position: absolute;
    
    --offset: 1em;
    
    bottom: var(--offset);
    right: var(--offset);
}

.image-carousel {
    position: relative;
    
    display: flex;
    background-color: var(--bg-light-gray);
    
    width: 100%;
    
    & > .controls {
        position: absolute;
        
        inset-inline: 1em;
        
        display: flex;
        
        top: 50%;
        
        & > button {
            font-size: 2.5em;
            
            &.next {
                margin-inline-start: auto;
            }    
        }
    }
    
    & > .content {
        display: flex;
        align-items: center;
        
        width: 100%;
        height: 70vh;
        
        overflow: hidden;
        
        & > * > img {
            width: 100vw;
        }
    }
    
    &:fullscreen > .content {
        height: 100%;
    }
    
    & > .fullscreen-button {
        position: absolute;
        
        inset-inline-end: 0;
        inset-block-end: 0;
        
        border: none;
        
        background-image: none;
        background-color: transparent;
        
        width: 5em;
        height: 5em;
    }
    
    & > .fullscreen-button::after {
        content: url("/resources/image/fullscreen.svg");
        
        position: absolute;
        
        inset: 0;
    }
    
    &:fullscreen > .fullscreen-button::after {
        content: url("/resources/image/fullscreen_exit.svg");
        
        position: absolute;
        
        inset: 0;
    }
}

.image-list {
    display: flex;
    gap: 0.5em;
    
    & > * {
        flex: 1;
        line-height: 0;
        
        & > img {
            display: block;
            
            width: 100%;
            height: auto;
        }
    }
}

@media (max-width: 80rem) {
    .image-list {
        flex-direction: column;
    }
}

.box {
    font-size: 1.25em;
    
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    gap: 0.5em;
    
    margin-block: 2em;
    margin-inline: 12em;
    
    padding: 1em;
    
    border-radius: 0.2em;
    
    background-color: white;
    
    box-shadow: var(--box-shadow);
    
    transform: scale(1);
    transform-origin: center;
    
    transition: 100ms ease-in-out transform;
    
    overflow: hidden;
    
    & > header {
        display: flex;
        
        margin-block-end: auto;
        
        & h3 {
            font-size: 1.25em;
            margin-block-end: auto;
        }
        
        & img {
            width: 5em;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            
            margin-inline-start: auto;
        }
    }
    
    & p {
        font-size: 1.2em;
        
        text-align: justify;
    }
    
    &:hover {
        transform: scale(1.02);
    }
}

@media (max-width: 80rem) {
    .box, .hero {
        margin-inline: 1em;
    }
}










button, .button, input[type="submit"] {
    display: flex;
    
    font-weight: bold;
    text-decoration: none;
    
    width: fit-content;
    padding: 0.4em;
    
    border: 0.12em solid var(--bg-light-gray);
    border-radius: 0.15em;
    
    color: white;
    background-color: var(--bg-medium);
    background-image: linear-gradient(to left, var(--bg-medium) 25%, var(--bg-light) 75%);
    background-origin: left;
    background-position: 100%;
    background-size: 400%;
    
    transition: 200ms ease-in-out background-position;
    
    cursor: pointer;
    
    &:hover {
        background-position: 0%;
    }
}

.left {
    text-align: left !important;
}

.with_icon {
    --icon_size: 2em;
    --icon: url("/resources/image/logo.png")
}

.with_icon::before {
    content: "";
    
    flex-shrink: 0;
    
    width: var(--icon_size);
    height: var(--icon_size);
    
    background-image: var(--icon);
    background-size: cover;
}

.flex-break {
    flex-basis: 100%;
    height: 0;
}

textarea {
    font: inherit;
}

.preserve-whitespace, .preserve-whitespace-within > * {
    white-space: pre;
}


/* Animations */

@keyframes hero-fadein {
    from {
        background-size: 10000%;
    }
    to {
        background-size: 100%;
    }
}

@keyframes hero-title-slidein {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes hero-content-slidein {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}