:root {
--BG-WHITE: rgb(228, 228, 288);
--BIG-SPACE-BLUE: rgb(47, 47, 161);
--NAV-BLUE: rgb(36, 36, 130);
--BUTTON-FILL: rgb(246, 75, 115);
--WHITE-TEXT: rgb(251, 252, 253);
--BLACK-TEXT: rgb(0, 0, 0);
}
html, body {
margin: 0;
padding: 0;
width: 100%; height: 100%;
font-family: 'Roboto', sans-serif;
scroll-behavior: smooth;
background-color: #121212;
user-select: none;
overflow-y: visible;
}
.container {
position: relative;
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.container .content {
position: relative;
background-color: rgb(25, 25, 30);
width: 80%;
height: auto;
margin-bottom: 100px;
border-radius: 12px;
border: 1px solid rgba(35, 35, 40, 0.5);
top: 40px;
padding: 7px;
}
.office {
width: 100%;
height: auto;
margin-bottom: 50px;
}
h2 {
font-size: 2.3em;
color: var(--WHITE-TEXT);
margin: 12px;
margin-left: 20px;
}
h3 {
color: var(--WHITE-TEXT);
margin: 10px 0 10px 0;
}
.locationmap {
margin-left: 20px;
height: 300px;
}
.smallcontent {
font-size: 1em;
font-weight: 300;
color: rgb(181, 182, 183);
user-select: text;
}
.office-details {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 20px;
}
.map {
flex: none;
width: 50%;
}
.info {
flex: 1;
}
.description {
color: rgb(231, 232, 233);
font-size: 1.2em;
font-weight: 400;
border-radius: 12px;
}
@media (max-width: 768px) {
.office-details {
flex-direction: column;
padding: 0 15px 0 15px;
}
.map {
width: 96%;
}
.container .content {
width: 90%;
}
}
@media (max-width: 400px) {
.office-details {
padding: 0 7px 0 7px;
}
}