/* === Header / Hero Section === */
header {
	background: linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba(225, 225, 225, 0));
	background-position: center; 
    background-size: cover; 
    background-repeat: no-repeat;
	min-height: 100vh; 
    display: block; 
    position: relative; 
    overflow: hidden;
}

.header_bg_swiper { 
    position: absolute; 
    inset: 0; 
    width: 100vw; 
    height: 100vh; 
    z-index: 0; 
    overflow: hidden; 
    pointer-events: none; 
}

.header_bg_swiper .swiper-slide { 
    width: 100vw; 
    height: 100vh; 
    display: flex; 
}

.header_bg_swiper img { 
    width: 100vw; 
    height: 100vh; 
    object-fit: cover; 
    object-position: center; 
    filter: brightness(0.68) saturate(1.05); 
}

.hero_container {
	position: absolute; 
    top: var(--nav-height, 80px); 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 2;
	display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
	height: calc(100vh - var(--nav-height, 80px)); 
    padding: 0 1rem; 
    max-width: none;
}

.hero_container h1 {
	font-family: "Roasterregular", sans-serif;
	font-size: clamp(3rem, 7vw, 5.5rem); 
	line-height: 1.1; 
	font-weight: 500; 
	color: var(--secondary-color); 
	text-align: center; 
}

/* Header Scroll Down Icon */
header .animation-icon {
	position: absolute;
  	left: 50%;
  	bottom: 18px;
  	transform: translateX(-50%);
  	z-index: 3;
  	pointer-events: auto;
}

header .animation-icon a {
	display: inline-flex;
  	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	backdrop-filter: blur(2px);
	transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
	text-decoration: none;
}

header .animation-icon a:hover {
	transform: translateY(-3px);
	background: var(--primary-color);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

header .animation-icon i {
	font-size: 1.35rem;
	line-height: 1;
}

body.scrolled-past-hero header .animation-icon {
	opacity: 0;
  	transform: translate(-50%, 8px);
  	pointer-events: none;
  	transition: opacity .25s ease, transform .25s ease;
}

/* === About Us Section === */
.script_heading {
	font-family: "Allura", cursive;
	font-weight: 900;
	font-style: normal;
	font-size: clamp(2.4rem, 6vw, 4.2rem);
	line-height: 1.1;
	text-align: center;
	color: var(--text-dark);
	margin: 0 0 .75rem;
}

.about_section {
	min-height: calc(100dvh - var(--nav-height, 80px));
	height: auto;
	display: flex;
	flex-direction: column;
  	justify-content: center;
	background-position: center; background-size: cover; background-repeat: no-repeat;
	background-image: url("/static/assets/images/old-law-court.jpg");
	padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem 2.5rem;
}

.about_inner {
	width: min(620px, 100%);
	margin: 0 auto;
	text-align: center;
	display: flex;
  	flex-direction: column;
  	gap: 1.5rem;
}

.about_body {
	font-size: 1.02rem;
	line-height: 1.75rem;
	color: var(--white);
	display: grid;
	gap: 1.35rem;
	overflow: visible;
}

.about_body p { margin: 0; }

.about_actions {
	display: flex;
	justify-content: center;
	margin-top: 1.75rem;
}

.about_actions .about_btn {
	background: var(--text-dark);
	color: var(--primary-color);
	border: 1px solid var(--text-dark);
	letter-spacing: .12em;
	font-size: .75rem;
	padding: .9rem 2.2rem;
	border-radius: 4px;
	transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}

.about_actions .about_btn:hover {
	background: var(--primary-color);
	border-radius: 999px;
	color: #fff;
	box-shadow: 0 8px 26px -6px rgba(0,0,0,.25);
}

@supports not (height: 100dvh) { .about_section { min-height: calc(100vh - var(--nav-height, 80px)); } }

@media (min-width: 768px) { .about_section { padding: 4.5rem 2.5rem 3rem; } }

@media (max-width: 640px) { .about_section { padding: 3rem 1rem 2.25rem; } }