*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0;
border-collapse: collapse;
border-spacing: 0;
line-height: normal;
}
body {
font-family: "Inter", sans-serif;
font-weight: 400;
line-height: 1.5;
font-size: 15px;
}
.container {
padding: 0 24px;
margin: 0 auto;
}
.container-lg {
width: 1200px;
}
.container-md {
width: 1000px;
}
.container-sm {
width: 600px;
}
@media (max-width: 1200px) {
.container-lg {
width: 100%;
}
}
@media (max-width: 1000px) {
.container-md {
width: 100%;
}
}
@media (max-width: 600px) {
.container-sm {
width: 100%;
}
}
footer {
margin-top: 60px;
background: #353a42;
color: #ffffff;
font-size: 13px;
}
.footer-top {
display: flex;
flex-direction: row;
justify-content: center;
gap: 24px;
padding-top: 48px;
padding-bottom: 48px;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 600px) {
.footer-top {
flex-direction: column;
}
}
.footer-col {
flex: 1;
max-width: 300px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.12);
background-color: rgba(0, 0, 0, 0.3);
padding: 14px 20px;
text-align: center;
color: rgba(255, 255, 255, 0.72);
}
.footer-title {
font-family: "Montserrat", sans-serif;
margin: 0 0 6px 0;
font-size: 20px;
letter-spacing: 0.02em;
text-transform: uppercase; 
}
.footer-subtitle {
margin: 0;
font-size: 14px;
opacity: 0.75;
}
.footer-heading {
font-family: "Montserrat", sans-serif;
margin-bottom: 8px;
font-size: 13px;
opacity: 0.75;
text-transform: uppercase;
}
.footer-list {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.footer-list li {
margin: 0;
padding: 0;
}
footer a {
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease, opacity 0.15s ease;
opacity: 0.85;
}
footer a:hover {
border-bottom-color: rgba(255, 255, 255, 0.28);
opacity: 1;
outline: none;
}
main {
padding-top: 80px;
}
@media (max-width: 1200px) {
main {
padding-top: 170px;
}
}
nav {
position: fixed;
width: 100%;
padding: 0 24px;
height: 80px;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #fff;
z-index: 1000;
background: rgba(255, 255, 255, 0.6); 
box-shadow: 0 0px 30px rgba(0, 0, 0, 0.12);
backdrop-filter: blur(14px) saturate(130%);
}
@media (max-width: 1200px) {
nav {
flex-direction: column;
align-items: center;
padding: 24px;
height: auto;
}
}
.nav-part {
display: flex;
flex-direction: row;
align-items: center;
}
.nav-title a {
font-family: "Montserrat", sans-serif;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: clamp(20px, 1.2vw, 24px);
font-weight: 600;
color: #000;
text-decoration: none;
}
.nav-title a:hover {
color: #666;
}
.nav-menu a {
margin: 12px;
padding: 12px 0;
font-family: "Montserrat", sans-serif;
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 600;
font-size: clamp(12px, 1.2vw, 15px);
border-bottom: 1px solid transparent;
color: #000;
text-decoration: none;
text-align: center;
}
.nav-menu a:hover {
border-bottom: 1px solid #000;
}
.nav-info {
gap: 8px;
flex-wrap: wrap;
}
.nav-info-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px;
border: 1px solid #e5e7eb;
border-radius: 4px;
text-decoration: none;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 12px;
transition: background-color 0.15s ease;
border-color: #0f172a;
color: #0f172a;
background-color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 600px) {
.nav-info {
gap: auto;
justify-content: space-evenly;
}
.nav-info-item {
gap: 6px;
padding: 6px;
font-size: 10px;
}
}
.nav-info-item:hover {
color: #ffffff;
background-color: #0f172a;
}
.nav-info-icon {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.nav-info-icon path {
fill: none;
stroke: currentColor;
}
.nav-info-icon circle {
fill: currentColor;
}
.btn {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 12px;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
.btn:disabled {
opacity: 0.8;
}
.btn-primary {
color: #fff;
background: #00aaff;
}
.btn-primary:hover,
.btn-primary:disabled {
background: #008ecc;
}
.btn-spinner {
display: none;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-top-color: #333;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
.btn.loading .btn-label {
display: none;
}
.btn.loading .btn-spinner {
display: inline-block;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.form {
display: flex;
flex-direction: column;
max-width: 600px;
gap: 16px;
}
.form .form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form label {
font-size: 13px;
font-weight: 500;
}
.form input,
.form textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form textarea {
height: 300px;
}
.hero {
position: relative;
height: 420px;
background-image: url("/img/home/hero.jpg");
background-position: 50% 35%; 
background-repeat: no-repeat;
background-size: cover;
}
.hero-overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.92) 0%,
rgba(255, 255, 255, 0.86) 60%,
rgba(255, 255, 255, 0) 85%
);
}
.hero-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 0 24px;
gap: 16px;
font-family: "Montserrat", sans-serif;
color: #0f172a;
}
.hero-kicker {
font-size: clamp(12px, 1.5vw, 14px);
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.6;
}
.hero-content-title {
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 700;
line-height: 1.15;
opacity: 0.9;
}
.hero-content-subtitle {
letter-spacing: 0.02em;
font-size: clamp(16px, 2.1vw, 22px);
font-weight: 600;
opacity: 0.9;
}
.section-title {
display: flex;
align-items: center;
gap: 24px;
margin: 60px 0 36px;
overflow: hidden;
}
.section-title h2 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: clamp(18px, 2vw, 28px);
color: #222;
white-space: nowrap;
}
.section-title-line {
flex: 1; 
height: 1px;
background-color: #ccc;
background: linear-gradient(to right, #000, transparent);
width: 100%;
}
.hours-section {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 24px 48px;
}
.hours-col {
width: 450px;
}
.hours-title {
margin: 0 0 10px 0;
font-size: 24px;
letter-spacing: 0.01em;
}
.hours-list {
list-style: none;
border: 1px solid #e5e7eb;
}
.hours-list li {
display: flex;
justify-content: space-between;
padding: 12px 14px;
border-top: 1px solid #e5e7eb;
}
.hours-list li:first-child {
border-top: none;
}
.hours-list li span:first-child {
color: #475569;
font-weight: 600;
}
.hours-note {
margin-top: 10px;
color: #475569;
font-size: 14px;
}
.hours-aside-title {
margin-bottom: 8px;
font-size: 18px;
}
.hours-aside-lead {
margin-bottom: 12px;
color: #111827;
}
.hours-bullets {
list-style: circle;
margin-left: 18px;
margin-bottom: 16px;
}
.hours-bullets li {
position: relative;
padding-left: 8px;
margin: 8px 0;
}
.hours-actions {
display: flex;
gap: 12px;
}
.hours-btn {
display: inline-block;
padding: 12px 16px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
border: 1px solid transparent;
line-height: 1;
}
.hours-btn-primary {
background: #0f172a;
color: #ffffff;
border-color: #0f172a;
}
.hours-btn-primary:hover {
opacity: 0.75;
}
.hours-btn-ghost {
background: transparent;
color: #0f172a;
border-color: #0f172a;
}
.hours-btn-ghost:hover {
background: #0f172a;
color: #ffffff;
}
.cards-section {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
gap: 24px;
}
.card {
width: 500px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.card-icon {
width: 48px;
height: 48px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
background-size: contain;
background-position: center;
flex-shrink: 0;
}
.card h3 {
display: flex;
flex-direction: row;
gap: 18px;
align-items: center;
margin: 0;
font-size: 20px;
font-weight: 700;
color: #1f2937;
}
.card-content {
margin: 0;
color: #6b7280;
font-size: 15px;
line-height: 1.55;
}
.included-title {
margin: 48px 0;
font-size: 28px;
line-height: 1.25;
letter-spacing: 0.01em;
text-align: center;
}
.included-cols {
display: flex;
flex-wrap: wrap;
gap: 0 40px;
align-items: flex-start;
}
.included-list {
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 420px;
min-width: 300px;
}
.included-item {
position: relative;
padding: 14px 0 14px 34px;
border-top: 1px solid #e5e7eb;
line-height: 1.45;
}
.included-item::before {
content: "";
position: absolute;
left: 0;
top: 14px;
width: 18px;
height: 18px;
border: 2px solid #0f172a; 
border-radius: 50%;
box-sizing: border-box;
}
.included-item::after {
content: "";
position: absolute;
left: 6px; 
top: 18px;
width: 6px;
height: 10px;
border-right: 2px solid #0f172a;
border-bottom: 2px solid #0f172a;
transform: rotate(45deg);
}
.included-note {
margin: 20px 0 0 0;
font-size: 14px;
color: #475569;
}
.contact-section {
background: #0f172a;
color: #ffffff;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
width: 100%;
}
.contact-cta-container {
width: 100%;
padding: 56px 32px;
display: flex;
flex-wrap: wrap;
gap: 32px;
align-items: stretch;
}
.contact-cta-text {
flex: 1 1 560px;
min-width: 280px;
}
.contact-cta-eyebrow {
margin: 0 0 10px 0;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.contact-cta-title {
margin: 0 0 10px 0;
font-size: clamp(24px, 4.2vw, 36px);
line-height: 1.2;
}
.contact-cta-lead {
margin: 0 0 16px 0;
font-size: clamp(16px, 2vw, 18px);
color: rgba(255, 255, 255, 0.9);
line-height: 1.3;
}
.contact-cta-bullets {
margin-left: 36px;
margin-bottom: 24px;
}
.contact-cta-bullets li {
list-style-type: disc;
position: relative;
padding-left: 12px;
margin: 10px 0;
font-size: 13px;
}
.contact-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 14px 0 8px 0;
}
.section-contact-btn {
display: inline-block;
padding: 12px 18px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
border: 1px solid transparent;
transition: transform 0.06s ease, opacity 0.15s ease,
border-color 0.15s ease, background-color 0.15s ease;
}
.section-contact-btn-primary {
background: #22c55e;
color: #0f172a;
border-color: #22c55e;
}
.section-contact-btn-primary:hover {
opacity: 0.8;
}
.section-contact-btn-secondary {
background: #ffffff;
color: #0f172a;
border-color: #ffffff;
}
.section-contact-btn-secondary:hover {
opacity: 0.8;
}
.section-contact-btn-ghost {
background: transparent;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.5);
}
.section-contact-btn-ghost:hover {
border-color: #ffffff;
}
.contact-cta-card {
flex: 1 1 340px;
min-width: 260px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
padding: 18px;
}
.contact-cta-card-title {
margin: 0 0 8px 0;
font-size: 18px;
}
.contact-cta-address {
font-style: normal;
margin: 0 0 10px 0;
line-height: 1.6;
}
.contact-cta-phone a {
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.contact-cta-phone a:hover {
border-bottom-color: #ffffff;
}
.contact-cta-note {
margin: 12px 0 0 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 720px) {
.contact-cta-container {
padding: 44px 16px;
}
.contact-cta-card {
padding: 16px;
}
}
.article p,
.article ul {
padding: 4px 0;
line-height: 1.4;
font-size: 15px;
}
.article ul {
margin-left: 60px;
}
.article li {
margin: 4px 0;
}
.category-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.category-card {
display: flex;
flex-direction: column;
width: 370px;
border: 1px solid #e5e7eb;
background: #ffffff;
border-radius: 4px;
text-decoration: none;
color: #000;
}
.category-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.category-card-image {
display: flex;
flex-direction: column;
align-items: flex-end;
background-size: cover;
background-position: center;
aspect-ratio: 16 / 9;
overflow: hidden;
margin: 4px;
border-radius: 4px;
}
.category-card-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.category-card-title {
font-size: 1.3em;
letter-spacing: 0.01em;
}
.category-card-excerpt {
color: #334155;
}
.page-title {
font-family: "Montserrat", sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: clamp(18px, 2vw, 28px);
color: #222;
margin-top: 48px;
margin-bottom: 24px;
}
.page-subtitle {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: clamp(15px, 1.7vw, 20px);
color: #222;
margin-top: 24px;
margin-bottom: 12px;
}