html,
body {
margin: 0;
padding: 0;
height: 100%;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
html, body {
background-color: #030000;
}
.section {
height: 100vh;
/* Full viewport height */
width: 100vw;
display: flex;
flex-direction: column;
/* Stack content vertically */
justify-content: center;
/* Vertically center */
align-items: center;
/* Horizontally center */
scroll-snap-align: start;
/* For snap scrolling */
padding: 40px 20px;
box-sizing: border-box;
overflow: hidden;
/* Prevent content from spilling into next section */
}
.section.snap-section {
height: 100vh;
scroll-snap-align: start;
margin: 0;
padding: 0;
}
.snap-section {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
flex-shrink: 0;
}
.section, .section.snap-section, .snap-section {
scroll-snap-align: unset;
scroll-snap-stop: unset;
}
@font-face {
font-family: "CalibriCustom";
src: url("fonts/Calibri_Light.otf") format("opentype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "CalibriCustomBold";
src: url("fonts/Calibri_Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Container for menu + language links */
.top-right-bar {
position: fixed;
top: 25px; /* aligns with your menu-toggle */
right: 40px; /* aligns with your menu-toggle */
display: flex;
align-items: center; /* vertically aligns menu text + language */
gap: 10px; /* space between menu and language links */
z-index: 1002;
}
/* Keep your menu-text gold and untouched */
.menu-text {
color: #b4883b;
font-size: clamp(0.55rem, 1.3vw, 2.1rem);
letter-spacing: clamp(0.15rem, 0.3vw, 0.35rem);
font-weight: 600;
font-family: 'CalibriCustom', sans-serif;
}
.language-switch a:first-child {
font-size: clamp(0.7rem, 1.3vw, 10rem);
}
/* Language switch */
.language-switch {
display: flex;
align-items: center;
gap: 1px;
padding: 5px 10px;
border-radius: 8px;
font-family: 'CalibriCustom', sans-serif;
}
.language-switch a {
display: inline-flex;
align-items: center;
color: #ffffff;
text-decoration: none;
font-family: 'CalibriCustom', sans-serif;
padding: 3px 6px;
line-height: 1;
}
.language-switch a:hover,
.language-switch a.active {
color: #b4883b;
}
/* Close icon (X) */
.close-icon {
display: none;
font-size: 2rem;
color: #030000;
line-height: 1;
}
.close-icon {
position: relative;
width: 24px;
height: 24px;
cursor: pointer;
}
.close-icon::before,
.close-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 1px; /* ← THICKNESS HERE */
background-color: #030000;
transform-origin: center;
}
.close-icon::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-icon::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
/* When menu is open */
.menu-toggle.active .menu-text {
display: none;
}
.menu-toggle.active .close-icon {
display: block;
}
.sidebar-menu a.active {
color: 030000 !important; /* persistent white color */
}
.sidebar-menu.show {
right: 0;
}
/* Menu links */
.sidebar-menu {
position: fixed;
top: 0;
right: -100%;
width: clamp(300px, 38vw, 1450px);
height: 100vh;
background-color: #b4883b;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
gap: clamp(1rem, 2.7vw, 12rem);
transition: right 0.4s ease;
z-index: 1001;
box-shadow: -2px 0 15px rgba(0, 0, 0, 0.4);
}
.sidebar-menu a {
color: #ffffff;
font-family: 'CalibriCustom', sans-serif;
font-size: clamp(0.9rem, 1.3vw, 1.8rem);
text-decoration: none;
transition: color 0.2s ease;
text-align: center;
width: auto;
padding: 0;
letter-spacing: clamp(0.1rem, 0.2vw, 0.35rem);
transform: translateY(-13vh); /* adjust */
}
.sidebar-menu a:hover,
.sidebar-menu a.active {
color: #030000;
}
/* Remove hover effect from DOWNLOAD link */
.sidebar-menu a:first-of-type:last-child {
pointer-events: none; /* optional: prevent hover/focus */
color: #C1824F; /* keep original color */
}
/* ====== MENU & LANGUAGE LARGE DESKTOP (2000px+) ====== */
@media (min-width: 1900px) {
.top-right-bar .language-switch a {
font-size: clamp(1rem, 1.5vw, 11.5rem);
padding-right: 1rem;
}
.top-right-bar .menu-text {
font-size: clamp(1.2rem, 1.8vw, 12rem);
}
.sidebar-menu a {
font-size: clamp(1.2rem, 1.5vw, 12rem) !important;
}
.language-switch a:first-child {
font-size: clamp(0.7rem, 1.8vw, 10rem);
}
}
/* Page overlay */
.page-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1000;
}
.page-overlay.show {
opacity: 1;
pointer-events: auto;
}
.no-break {
white-space: nowrap;
}
.home-section {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
}
/* Video */
.home-video {
position: absolute;
bottom: 0;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translateX(-50%) scale(1.2);
transform-origin: bottom center;
}
/* By default, show desktop, hide mobile */
.desktop-video {
display: block;
}
.mobile-video {
display: none;
}
/* On mobile devices */
@media (max-width: 768px) {
.desktop-video {
display: none;
}
.mobile-video {
display: block;
}
}
/* Overlay container */
.home-overlay {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
/* Optional dark overlay for readability */
.home-section::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.4)
);
z-index: 1;
}
/* Logo */
.home-logo {
width: 80%;
margin-top: 10%;
margin-bottom: 30%;
filter: brightness(1.5); /* increase brightness by 20% */
}
/* Subtitle */
.home-subtitle {
font-family: "CalibriCustomBold", sans-serif;
font-size: clamp(1rem, 1.8vw, 2rem);
color: #ffffff;
text-align: center;
letter-spacing: clamp(0.1rem, 0.3vw, 0.55rem);
margin-top: -20%;
}
/* Button */
.home-button {
font-family: "CalibriCustomBold", sans-serif;
padding: clamp(8px, 1vw, 12px) clamp(18px, 3vw, 30px);
border: 0.5px solid white;
text-decoration: none;
color: white;
font-size: clamp(12px, 1vw, 14px);
letter-spacing: clamp(1px, 0.3vw, 2px);
transition: 0.3s ease;
}
.home-button span {
display: inline-block;
transform: translateY(2px); /* tweak 1–3px */
}
.home-button:hover {
background: #b4883b;
color: black;
}
@media screen and (max-width: 768px) {
.sidebar-menu {
width: 100vw !important; /* hide completely off screen */
gap: clamp(1rem, 10.7vw, 12rem) !important;
}
.sidebar-menu a {
font-size: clamp(1.2rem, 3vw, 12.8rem) !important;
}
.menu-text {
font-size: clamp(0.55rem, 4.5vw, 11.1rem);
}
.language-switch a {
font-size: clamp(0.55rem, 3vw, 11.1rem);;
}
.home-logo {
width: 80%;
top: 3%;
}
.language-switch a:first-child {
font-size: clamp(0.7rem, 3.8vw, 10rem);
}
@media (max-width: 768px) {
.home-video {
transform: translateX(-50%) scale(1.5); /* or just remove scale */
}
}
.home-subtitle {
width: 60%;
line-height:clamp(0.55rem, 7.5vw, 11.1rem);
font-size: clamp(0.55rem, 5vw, 11.1rem);
}
.home-button {
padding: clamp(8px, 3vw, 1200px) clamp(18px, 8vw, 3000px);
font-size: clamp(0.55rem, 3.5vw, 11.1rem);
letter-spacing: clamp(1px, 0.3vw, 2px);
margin-top: 5%;
}
}
/* ====== HOME SECTION LARGE DESKTOP (2000px+) ====== */
@media (min-width: 2000px) {
#home .home-logo {
max-width: clamp(300px, 35vw, 1400px);
}
#home .home-subtitle {
font-size: clamp(3rem, 2vw, 5rem);
margin-bottom: clamp(2rem, 2vw, 4rem);
}
#home .home-button {
font-size: clamp(1.2rem, 1.2vw, 12rem);
padding: clamp(1rem, 1vw, 10.5rem) clamp(2rem, 3vw, 13rem);
}
#home .home-artist-note {
font-size: clamp(1rem, 0.8vw, 1.5rem);
}
}
@media (min-width: 800px) and (max-width: 1100px) {
#home .home-logo {
max-width: clamp(300px, 50vw, 1400px);
margin-top: -10%;
}
#home .home-subtitle {
font-size: clamp(1rem, 3.5vw, 5rem);
margin-bottom: clamp(2rem, 2vw, 4rem);
}
#home .home-button {
font-size: clamp(1.2rem, 2.3vw, 12rem);
padding: clamp(1rem, 1vw, 10.5rem) clamp(2rem, 3vw, 13rem);
}
#home .home-artist-note {
font-size: clamp(0.1rem, 1vw, 1.5rem);
bottom: 1%;
}
}
@media (min-width: 800px) and (max-width: 1100px) {
.home-video {
transform: translateX(-50%) scale(1.5); /* or just remove scale */
}
}
@media (min-width: 800px) and (max-width: 1100px) {
.sidebar-menu {
width: 100vw !important; /* hide completely off screen */
gap: clamp(1rem, 10.7vw, 12rem) !important;
}
.sidebar-menu a {
font-size: clamp(1.2rem, 3vw, 12.8rem) !important;
}
.menu-text {
font-size: clamp(0.55rem, 3.5vw, 11.1rem);
}
.language-switch a {
font-size: clamp(0.55rem, 2.5vw, 11.1rem);;
}
.home-logo {
width: 80%;
top: 3%;
}
.language-switch a:first-child {
font-size: clamp(0.7rem, 3.1vw, 10rem);
}
}
.home-section-2 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem; /* space between title and image */
padding: 2rem 1rem;
background-color: #030000;
min-height: 330vh;
}
.home-2-title {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.8vw, 2rem);
color: #b4883b;
text-align: center;
letter-spacing: clamp(0.1rem, 0.3vw, 0.55rem);
}
.home-2-image {
width: 90%;
height: auto;
display: block;
border-radius: 8px; /* optional, for style */
box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* optional subtle shadow */
margin-top: -3rem;
}
/* CENTER CONTENT */
.section-center {
width: 90%; /* slightly smaller than full width */
max-width: 1200px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
}
/* TITLE */
.section-title {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.8vw, 2rem);
color: #b4883b;
text-align: center;
letter-spacing: clamp(0.1rem, 0.3vw, 0.55rem);
margin-top: -5%;
}
.section-subtitle {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.4vw, 1.5rem);
color: #b4883b;
text-align: center;
padding-bottom: 6%;
width: 65%;
line-height: clamp(1rem, 2.5vw, 2.5rem);;
margin: 0 auto; /* THIS centers it */
}
/* COLLAGE WRAPPER */
/* COLLAGE WRAPPER */
.collage-wrapper {
width: 90%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2rem;
}
/* 6-BOX GRID stays same */
.collage-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 420px 350px;
gap: 0;
}
/* BOX BASE */
.collage-box {
position: relative;
margin: 0;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 16px;
}
/* IMAGE BOXES */
.collage-box.image {
background: none; /* remove old background */
padding: 0;
margin: 0;
overflow: hidden; /* prevent overflow */
}
/* Images inside boxes */
.collage-box.image img {
width: 100%;
height: 100%;
object-fit: cover; /* cover box nicely */
display: block;
}
/* IMAGE 7 */
.image-7 {
width: 100%;
position: relative;
}
.image-7 img {
width: 100%;
height: auto;
display: block; /* kills gaps */
}
/* IMAGE CAPTION */
.image-caption {
position: absolute;
top: 12px;
left: 12px;
font-size: 12px;
color: white;
z-index: 2;
}
/* BOX TEXT WRAPPER */
.box-text {
display: flex;
flex-direction: column;
justify-content: flex-start; /* ensures title is at the top */
align-items: center; /* centers the rest of the content horizontally */
height: 100%; /* makes all box-text divs same height as the box */
text-align: center;
z-index: 2;
padding-top: 10%;
}
/* TITLE IN EACH BOX */
.box-title {
font-family: "CalibriCustombold", sans-serif;
font-size: clamp(1rem, 1.6vw, 2rem);
letter-spacing: clamp(0.1rem, 0.2vw, 0.55rem);
margin-bottom: 16px;
text-transform: uppercase;
color: #b4883b !important;
}
/* GROUPING FOR SUBTITLE + SUBSUBTITLE */
.box-group {
margin-bottom: 12px;
}
/* SUBTITLE */
.box-subtitle {
font-family: "CalibriCustombold", sans-serif;
font-size: clamp(0.5rem, 1.1vw, 2rem);
letter-spacing: clamp(0.1rem, 0.1vw, 0.55rem);
font-weight: 600;
margin: 0;
}
/* SUBSUBTITLE */
.box-subsubtitle {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.5rem, 1vw, 2rem);
margin: 2px 0 0 0;
padding-bottom: 5%;
}
/* CENTER TEXT VERTICALLY */
.collage-box {
display: flex;
align-items: center;
justify-content: center;
}
/* GLOBAL GAP KILLERS */
img {
display: block;
}
figure {
margin: 0;
}
#desktopMapWrapper7 {
width: 100%;
height: 100vh; /* fixed height */
max-height: 100vh; /* enforce fixed */
overflow: hidden;
position: relative;
}
/* VIDEO instead of image */
#desktopMapImage7 {
position: absolute;
top: 0;
left: 0;
cursor: grab;
user-select: none;
-webkit-user-drag: none;
width: 100%; /* show full video size */
height: 100%; /* fill wrapper */
object-fit: contain; /* prevent cropping */
max-width: none;
transform: translate(0,0);
transition: transform 0.05s;
}
#desktopVideoWrapper8{
margin-top:3rem;
}
#home-section-2 .desktop-drone-video,
#home-section-2 .map-video-wrapper video.desktop-video {
display: block; /* show desktop by default */
}
#home-section-2 .mobile-drone-video,
#home-section-2 .map-video-wrapper video.mobile-video {
display: none; /* hide mobile by default */
}
.map-video-wrapper {
overflow: hidden; /* prevents video from going outside */
position: relative; /* needed for absolute children */
}
/* Mobile screens */
@media (max-width: 768px) {
#home-section-2 .desktop-drone-video,
#home-section-2 .map-video-wrapper video.desktop-video {
display: none; /* hide desktop on mobile */
}
#home-section-2 .mobile-drone-video,
#home-section-2 .map-video-wrapper video.mobile-video {
display: block; /* show mobile on mobile screens */
}
}
/* Default: hide buttons (desktop) */
#enableDragBtn7,
#exitDragBtn7 {
display: none;
}
/* Video wrappers */
/* VIDEO WRAPPERS */
/* Video wrapper takes video height naturally */
/* COLLAGE WRAPPER */
.collage-wrapper {
width: 80%; /* smaller width than section-center so video matches grid width */
margin: 0 auto; /* center it */
padding: 0;
}
/* Video wrapper inside collage-wrapper */
/* .map-video-wrapper {
width: 100%;
height: auto;
position: relative;
overflow: hidden;
margin: 2rem 0;
} */
/* Full video inside wrapper */
/* .map-video-full {
width: 100%;
height: auto;
display: block;
object-fit: contain;
} */
.map-video-full {
width: 100%;
height: 100%;
object-fit: cover; /* instead of contain */
}
.map-video-wrapper {
width: 100%;
height: 600px; /* adjust as needed */
overflow: hidden; /* optional: hides edges */
position: relative;
cursor: grab;
}
.map-video-wrapper:active {
cursor: grabbing;
}
.map-video-inner {
position: absolute; /* absolute inside wrapper */
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.map-video-full {
width: 100%;
height: auto; /* maintain aspect ratio */
display: block;
user-select: none;
pointer-events: none;
}
.engage-map-btn {
position: absolute;
bottom: 6%;
right: 2%;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
font-family: 'CalibriCustom', sans-serif;
font-weight: bold;
font-size: clamp(12px, 1vw, 160px);
letter-spacing: clamp(1px, 0.2vw, 160px);
color: #b4883b;
z-index: 10;
display: flex;
align-items: flex-start; /* icon aligned to top */
gap: 8px;
/* Prevent reflow or alignment shifts */
transform: none !important;
}
/* Slightly move the text down */
.engage-map-btn span {
display: inline-block;
position: relative;
top: 2px; /* adjust this value to move text down */
}
/* Icon on the right, aligned to top of text */
.engage-map-btn::after {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background-image: url('images/CT\ Gold-Map\ Magnifying\ 2.svg');
background-size: contain;
background-repeat: no-repeat;
vertical-align: top;
}
.engage-map-btn {
transform: translateZ(0); /* promote to GPU layer */
}
/* ===== HOME SECTION 2 LARGE DESKTOP (2000px+) ===== */
@media (min-width: 1900px) {
/* Subtitle bigger */
.home-section-2 .section-subtitle {
font-size: clamp(0.5rem, 1.3vw, 5rem);
line-height: clamp(3rem, 3vw, 5.5rem);
width: 55%;
margin: 0 auto 4rem auto;
}
.home-section-2 .section-center {
width: 90% !important;
max-width: 5000px !important;
}
.home-section-2 {
min-height: 350vh;
}
.collage-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 550px 550px;
gap: 0;
}
#engageMapBtn {
bottom: 2% !important; /* move higher */
right: 5%; /* move more inward */
width: 110px; /* slightly bigger for desktop */
}
}
@media (max-width: 768px) {
.home-section-2{
min-height: 3300px;
}
/* Make the collage stack vertically */
.collage-grid {
display: grid;
grid-template-columns: 1fr; /* single column */
grid-template-rows: auto; /* height adjusts automatically */
gap: 0; /* space between boxes */
}
/* Make each box take full width */
.collage-box {
width: 100%;
height: auto; /* allow height to adjust for content */
padding: 16px 8px; /* optional: smaller horizontal padding */
}
/* Adjust box text spacing */
.box-text {
padding-top: 5%; /* less top padding for mobile */
}
/* Adjust titles/subtitles for mobile */
.box-title {
font-size: clamp(1.2rem, 3vw, 2.4rem); /* bigger and responsive */
}
.box-subtitle {
font-size: clamp(1rem, 2.5vw, 1.8rem);
}
.box-subsubtitle {
font-size: clamp(0.9rem, 2vw, 1.4rem);
}
.section-title {
font-size: clamp(1rem, 5.8vw, 12rem);
width: 80%;
text-align: center; /* center the text */
margin: 0 auto; /* center the block itself */
padding-bottom: 1rem;
}
.section-subtitle {
font-size: clamp(0.5rem, 4vw, 11.5rem);
width: 85%; /* narrower than desktop */
text-align: center;
margin: 1rem auto;
line-height: clamp(1rem, 7vw, 11.5rem);
margin-top: -15%;
padding-bottom: 2.5rem;
}
}
@media (max-width: 768px) {
/* Wrapper 95% width, centered */
#desktopMapWrapper7 {
margin-left: -19% !important;
width: 100vw; /* 95% of screen width */
max-width: 100vw;
margin: 0 auto; /* center horizontally */
height: auto;
aspect-ratio: 8/9; /* maintains video aspect ratio */
overflow: hidden;
position: relative;
margin-top: -15% !important;
}
/* Hide Explore button on mobile */
@media (max-width: 768px) {
#engageMapBtn {
display: none !important;
}
#exitMapBtn {
display: none !important; /* also hide exit button if needed */
}
}
/* Video inside wrapper */
#desktopMapWrapper7 .map-video-full {
position: relative; /* no absolute centering needed */
width: 100%;
height: 100%;
object-fit: contain; /* fit entire video without cropping */
display: block;
}
}
/* Make wrapper 8 more square-ish on mobile */
@media (max-width: 768px) {
#desktopVideoWrapper8 {
width: 90%; /* full width */
height: 300px; /* force height to make it square-ish */
max-height: 50vh; /* optional limit */
overflow: hidden; /* crop edges */
margin: 0 auto;
padding: 0;
position: relative;
}
#desktopVideoWrapper8 .map-video-full {
width: 100%; /* fill wrapper width */
height: 100%; /* fill wrapper height */
display: block;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-section-2{
min-height: 440vh;
}
/* Make the collage stack vertically */
.collage-grid {
display: grid;
grid-template-columns: 1fr; /* single column */
grid-template-rows: auto; /* height adjusts automatically */
gap: 0; /* space between boxes */
}
/* Make each box take full width */
.collage-box {
width: 80%;
height: auto; /* allow height to adjust for content */
padding: 16px 8px; /* optional: smaller horizontal padding */
left: 10%;
}
/* Adjust box text spacing */
.box-text {
padding-top: 5%; /* less top padding for mobile */
}
/* Adjust titles/subtitles for mobile */
.box-title {
font-size: clamp(1.2rem, 3vw, 2.4rem); /* bigger and responsive */
}
.box-subtitle {
font-size: clamp(1rem, 2.5vw, 1.8rem);
}
.box-subsubtitle {
font-size: clamp(0.9rem, 2vw, 1.4rem);
}
.section-title {
font-size: clamp(1rem, 5.8vw, 12rem);
width: 80%;
text-align: center; /* center the text */
margin: 0 auto; /* center the block itself */
padding-bottom: 1rem;
}
.section-subtitle {
font-size: clamp(0.5rem, 3vw, 11.5rem);
width: 85%; /* narrower than desktop */
text-align: center;
margin: 1rem auto;
line-height: clamp(1rem, 5vw, 11.5rem);
margin-top: -5%;
padding-bottom: 10%;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
/* Wrapper 95% width, centered */
#desktopMapWrapper7 {
margin-left: -19% !important;
width: 100vw; /* 95% of screen width */
max-width: 100vw;
margin: 0 auto; /* center horizontally */
height: auto;
aspect-ratio: 8/9; /* maintains video aspect ratio */
overflow: hidden;
position: relative;
margin-top: -15% !important;
}
/* Hide Explore button on mobile */
@media (min-width: 768px) and (max-width: 1100px) {
#engageMapBtn {
display: none !important;
}
#exitMapBtn {
display: none !important; /* also hide exit button if needed */
}
}
/* Video inside wrapper */
#desktopMapWrapper7 .map-video-full {
position: relative; /* no absolute centering needed */
width: 100%;
height: 100%;
object-fit: contain; /* fit entire video without cropping */
display: block;
}
}
/* Make wrapper 8 more square-ish on mobile */
@media (min-width: 768px) and (max-width: 1100px) {
#desktopVideoWrapper8 {
width: 90%; /* full width */
height: 600px; /* force height to make it square-ish */
max-height: 50vh; /* optional limit */
overflow: hidden; /* crop edges */
margin: 0 auto;
padding: 0;
position: relative;
margin-top: -5%;
}
#desktopVideoWrapper8 .map-video-full {
width: 100%; /* fill wrapper width */
height: 100%; /* fill wrapper height */
display: block;
}
}
.home-section-3 {
position: relative;
width: 100%;
height: 100vh; /* full viewport height */
display: flex;
justify-content: center;
align-items: center; /* centers image, optional */
overflow: hidden;
}
.home-3-artist-note {
font-family: "CalibriCustom", sans-serif;
position: absolute;
bottom: 20px; /* distance from bottom */
left: 20px; /* distance from left */
font-size: clamp(0.5rem, 0.6vw, 1rem);
color: white; /* change if needed */
opacity: 0.8; /* slightly subtle */
letter-spacing: 0.5px;
}
.home-3-full-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 65%; /* 🔥 tweak this */
transform: scale(1.1);
transform-origin: center 65%; /* match this */
}
.home-3-overlay-title {
position: absolute;
top: 8%; /* closer to top of screen */
left: 50%;
transform: translateX(-50%);
line-height: clamp(1rem, 2.8vw, 12rem);
/* Reuse the same style as .home-2-title */
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.8vw, 2rem);
color: #b4883b;
text-align: center;
letter-spacing: clamp(0.1rem, 0.3vw, 0.55rem);
padding: 0 1rem; /* for small screens */
max-width: 90%; /* prevent text overflow */
}
/* ====== HOME-3 LARGE DESKTOP (2000px+) ====== */
@media (min-width: 1900px) {
.home-3-overlay-title {
font-size: clamp(0.3rem, 1.6vw, 6rem);
line-height: clamp(3.5rem, 3.5vw, 7rem);
max-width: 70%; /* prevent it from stretching too far */
margin-top: -1%;
}
.home-section-3 .home-3-artist-note {
font-size: clamp(1rem, 0.8vw, 1.8rem);
left: clamp(20px, 2vw, 40px);
}
}
/* MOBILE VIEW ONLY */
@media (max-width: 768px) {
/* Hide desktop image */
.desktop-img {
display: none;
}
/* Show mobile image */
.mobile-img {
display: block;
}
.home-section-3 {
max-height: 90vh;
}
/* Overlay text stays on top - MOBILE RESPONSIVE */
.home-3-overlay-title {
top: 26%;
transform: translate(-50%, -50%);
font-size: clamp(1rem, 5.5vw, 21rem); /* scales between 1rem and 2rem */
letter-spacing: clamp(1px, 0.7vw, 30px); /* optional, scales nicely */
width: 90%;
line-height: clamp(1rem, 9vw, 20rem);
text-align: center; /* ensure it stays centered */
padding-bottom: 30%;
}
.home-3-artist-note {
bottom: 10.5%;
left: 3%;
font-size: clamp(0.07rem, 1.8vw, 1rem); /* scales between 0.7rem and 1rem */
}
.home-3-full-image {
width: 100%;
height: 40vh !important;
object-fit: cover;
margin-top: 55% !important;
object-position: center 85%; /* 🔥 tweak this */
transform: scale(1.1);
transform-origin: center 85%; /* match this */
}
}
@media (min-width: 768px) and (max-width: 1100px) {
/* Hide desktop image */
.desktop-img {
display: none;
}
/* Show mobile image */
.mobile-img {
display: block;
}
.home-section-3 {
min-height: 110vh;
}
/* Overlay text stays on top - MOBILE RESPONSIVE */
.home-3-overlay-title {
top: 26%;
transform: translate(-50%, -50%);
font-size: clamp(1rem,3.5vw, 21rem); /* scales between 1rem and 2rem */
letter-spacing: clamp(1px, 0.7vw, 30px); /* optional, scales nicely */
width: 60%;
line-height: clamp(1rem, 7.5vw, 20rem);
text-align: center; /* ensure it stays centered */
padding-bottom: 30%;
}
.home-3-artist-note {
bottom: 4.5%;
left: 3%;
font-size: clamp(0.1rem, 1vw, 1.5rem);; /* scales between 0.7rem and 1rem */
}
.home-3-full-image {
width: 100%;
height: 60vh !important;
object-fit: cover;
margin-top: 55% !important;
object-position: center 95%; /* 🔥 tweak this */
transform: scale(1.1);
transform-origin: center 95%; /* match this */
}
}
/* Section container */
.section4 {
width: 100%;
padding: 2rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
box-sizing: border-box;
background-color: #030000;
min-height: 170vh;
}
/* Top image */
.section4-top-image {
width: 100%;
max-height: 250px; /* short rectangle image */
object-fit: cover;
margin-top: 1% !important;
}
/* Title & subtitles */
.section4-title {
font-family: "CalibriCustomBold", sans-serif;
font-size: clamp(1rem, 1.4vw, 12rem);
color: #b4883b;
text-align: center;
letter-spacing: clamp(0.1rem, 0.3vw, 0.55rem);
margin-top: 1%;
}
.section4-subtitle {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.4vw, 1.5rem);
color: #b4883b;
text-align: center;
margin-top: -2%;
}
.section4-subtitle-below {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.65vw, 11.5rem) !important;
color: #b4883b;
text-align: center;
letter-spacing: clamp(0.1rem, 0.38vw, 10.55rem);
}
/* Form styling */
.section4-form {
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.section4-form label {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1vw, 1.5rem);
color: #b4883b;
font-weight: 500;
}
.section4-form input {
width: 100%;
padding: 0.1rem 0;
font-size: 1rem;
font-family: "CalibriCustom", sans-serif;
border: none; /* remove box border */
border-bottom: 1px solid #C1824F; /* underline */
background: transparent;
outline: none;
box-sizing: border-box;
transition: border-color 0.3s ease;
color: #ffffff;
}
/* Apply same style to input, select, textarea */
.section4-form input,
.section4-form select,
.section4-form textarea {
width: 100%;
padding: 0.1rem 0;
font-size: 1rem;
font-family: "CalibriCustom", sans-serif;
border: none;
border-bottom: 1px solid #b4883b;
background: transparent;
outline: none;
box-sizing: border-box;
transition: border-color 0.3s ease;
color: #ffffff;
}
.section4-form select {
margin-top: -0.5rem; /* pulls it closer to label */
padding-top: 0;
}
/* Adjust text inside select */
.section4-form select {
padding: 0rem 0rem 1rem 0rem; /* top right bottom left */
line-height: 1.2rem; /* make text sit higher */
}
.section4-form select option:hover {
background-color: #b4883b; /* lighter gold on hover */
color: #030000;
}
.checkbox-label input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: clamp(1.5rem, 2.2vw, 12rem);
height: clamp(1rem, 1.5vw, 11.2rem);
border: 1.5px solid #b4883b; /* gold outline */
border-radius: 3px;
background: transparent;
cursor: pointer;
position: relative;
}
/* Checked state */
.checkbox-label input[type="checkbox"]:checked {
background-color: #b4883b;
}
/* Checkmark */
.checkbox-label input[type="checkbox"]:checked::after {
content: "";
position: absolute;
top: 2px;
left: 6px;
width: 4px;
height: 9px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.section4-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.9rem;
color: #ffffff;
line-height: 1.4;
}
.checkbox-label input {
width: auto;
margin-top: 0.3rem;
border: none;
}
.section4-form input:focus {
border-bottom-color: #b4883b; /* change color on focus */
}
/* Submit button */
.section4-submit-btn {
margin-top: 1rem;
padding: 0.8rem 1.5rem;
font-family: "CalibriCustom", sans-serif;
font-size: 1rem;
background-color: #b4883b;
color: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.section4-submit-btn:hover {
background-color: #9e6d2f;
}
/* Developer info */
.section4-developer-info {
font-family: "CalibriCustom", sans-serif;
font-size: 0.75rem;
color: #b4883b;
text-align: justify;
width: 85%;
margin-bottom: 0rem;
margin-top: 3%;
}
.section4-developer-info2 {
font-family: "CalibriCustom", sans-serif;
font-size: 0.75rem;
color: #b4883b;
text-align: justify;
width: 85%;
margin-top: 0;
}
.phone-link {
text-decoration: none !important;
color: inherit !important;
font-family: "CalibriCustom", sans-serif;
}
.phone-link:link,
.phone-link:visited,
.phone-link:hover,
.phone-link:active {
color: inherit !important;
text-decoration: none !important;
}
/* Desktop: show original */
.section4-top-image {
display: block;
width: 100%;
height: auto;
margin-top: -5%;
}
.section4-top-image-mobile {
display: none;
}
@media (min-width: 1900px) {
/* Section spacing */
.section4 {
min-height: 130vh;
}
/* Top image taller */
.section4-top-image {
max-height: 400px;
margin-top: 2%;
}
/* Titles bigger */
.section4-title {
font-size: clamp(0.3rem, 1.6vw, 6rem);
line-height: clamp(3.5rem, 3.5vw, 7rem);
}
.section4-subtitle-below {
font-size: clamp(0.5rem, 1.8vw, 15rem) !important;
line-height: clamp(3rem, 3vw, 5.5rem);
}
.section4-subtitle {
font-size: clamp(0.5rem, 1.6vw, 5rem);
line-height: clamp(3rem, 3vw, 5.5rem);
width: 100%;
}
/* Form wider */
.section4-form {
max-width: 1700px;
width: 40%;
padding-bottom: 2rem;
}
.section4-form label {
font-size: clamp(0.5rem, 1.2vw, 5rem);
}
.section4-form input {
font-size: clamp(0.5rem, 1.2vw, 5rem);
}
/* Button bigger */
.section4-submit-btn {
font-size: clamp(0.5rem, 1.2vw, 5rem);
padding: 1rem 2rem;
}
/* Developer text more readable */
.section4-developer-info,
.section4-developer-info2 {
font-size: clamp(0.05rem, 0.5vw, 5rem);
width: 90%;
}
}
/* Mobile: hide desktop image and show mobile image */
@media (max-width: 768px) {
.section4-top-image {
display: none;
}
.section4-top-image-mobile {
display: block;
width: 100%;
height: auto;
}
}
@media (max-width: 768px) {
.section4 {
min-height: 190vh !important;
}
.checkbox-label input[type="checkbox"] {
width: clamp(1.5rem, 11.2vw, 12rem) !important;
height: clamp(1rem, 4.5vw, 11.2rem) !important;
}
.phone-link {
text-decoration: none !important;
color: inherit !important;
font-family: "CalibriCustom", sans-serif;
}
.phone-link:link,
.phone-link:visited,
.phone-link:hover,
.phone-link:active {
color: inherit !important;
text-decoration: none !important;
}
.hero-logo {
width: 70%; /* bigger logo on mobile */
margin-top: 5%;
}
.hero-title-image {
width: 80%; /* fills more screen */
margin-top: 35%;
}
/* Title & subtitles */
.section4-title {
font-size: clamp(1rem, 4.5vw, 3rem) !important;
}
.section4-subtitle {
width: 75% !important;
font-size: clamp(0.01rem, 4vw, 3rem) !important;
line-height: clamp(0.01rem, 6vw, 3rem);
margin-top: -5%;
}
.section4-subtitle-below {
font-size: clamp(0.5rem, 5vw, 3rem) !important;
width: 85%;
line-height: 2rem;
letter-spacing: clamp(0.05rem, 1vw, 3rem);
}
/* Form styling */
.section4-form {
width: 90% !important;
}
.section4-developer-info {
font-size: clamp(0.5rem, 1.5vw, 3rem);
width: 80% !important;
}
.section4-developer-info2 {
font-size: clamp(0.5rem, 1.5vw, 3rem);
width: 80% !important;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.section4-top-image {
content: url('images/CT Gold-Motif (Tablet).svg');
width: 90%; /* optional scaling */
height: auto;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.section4 {
min-height: 120vh !important;
}
.phone-link {
text-decoration: none !important;
color: inherit !important;
font-family: "CalibriCustom", sans-serif;
}
.phone-link:link,
.phone-link:visited,
.phone-link:hover,
.phone-link:active {
color: inherit !important;
text-decoration: none !important;
}
.hero-logo {
width: 70%; /* bigger logo on mobile */
margin-top: 5%;
}
.hero-title-image {
width: 80%; /* fills more screen */
margin-top: 35%;
}
/* Title & subtitles */
.section4-title {
font-size: clamp(1rem, 3.5vw, 3rem) !important;
}
.section4-subtitle {
width: 75% !important;
font-size: clamp(0.01rem, 2.7vw, 3rem) !important;
line-height: clamp(0.01rem, 4vw, 3rem);
margin-top: -5%;
}
.section4-subtitle-below {
font-size: clamp(0.5rem, 4vw, 3rem) !important;
width: 75%;
line-height: 4rem;
letter-spacing: clamp(0.05rem, 1vw, 3rem);
margin-top: 5%;
}
/* Form styling */
.section4-form {
width: 75% !important;
max-width: 800px;
}
.section4-developer-info {
font-size: clamp(0.5rem, 1.5vw, 3rem);
text-align: justify;
width: 85%;
}
.section4-developer-info2 {
font-size: clamp(0.5rem, 1.5vw, 3rem);
text-align: justify;
width: 85%;
}
.section4-form label {
font-size: clamp(0.5rem, 2.5vw, 5rem);
}
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
.section {
height: 100vh;
/* Full viewport height */
width: 100vw;
display: flex;
flex-direction: column;
/* Stack content vertically */
justify-content: center;
/* Vertically center */
align-items: center;
/* Horizontally center */
scroll-snap-align: start;
/* For snap scrolling */
padding: 40px 20px;
box-sizing: border-box;
overflow: hidden;
/* Prevent content from spilling into next section */
}
.section.snap-section {
height: 100vh;
scroll-snap-align: start;
margin: 0;
padding: 0;
}
.snap-section {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
flex-shrink: 0;
}
.section, .section.snap-section, .snap-section {
scroll-snap-align: unset;
scroll-snap-stop: unset;
}
@font-face {
font-family: "CalibriCustom";
src: url("fonts/Calibri_Light.otf") format("opentype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* Close icon (X) */
.close-icon {
display: none;
font-size: 2rem;
color: #030000;
line-height: 1;
}
.close-icon {
position: relative;
width: 24px;
height: 24px;
cursor: pointer;
}
.close-icon::before,
.close-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 1px; /* ← THICKNESS HERE */
background-color: #030000;
transform-origin: center;
}
.close-icon::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close-icon::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
/* When menu is open */
.menu-toggle.active .menu-text {
display: none;
}
.menu-toggle.active .close-icon {
display: block;
}
.sidebar-menu a.active {
color: 030000 !important; /* persistent white color */
}
.sidebar-menu.show {
right: 0;
}
/* Menu links */
.sidebar-menu {
position: fixed;
top: 0;
right: -100%;
width: clamp(300px, 38vw, 1450px);
height: 100vh;
background-color: #b4883b;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
gap: clamp(1rem, 2.7vw, 12rem);
transition: right 0.4s ease;
z-index: 1001;
box-shadow: -2px 0 15px rgba(0, 0, 0, 0.4);
}
.sidebar-menu a {
color: #ffffff;
font-family: 'CalibriCustom', sans-serif;
font-size: clamp(0.9rem, 1.3vw, 1.8rem);
text-decoration: none;
transition: color 0.2s ease;
text-align: center;
width: auto;
padding: 0;
letter-spacing: clamp(0.1rem, 0.2vw, 0.35rem);
transform: translateY(-13vh); /* adjust */
}
.sidebar-menu a:hover,
.sidebar-menu a.active {
color: #030000;
}
/* Remove hover effect from DOWNLOAD link */
.sidebar-menu a:first-of-type:last-child {
pointer-events: none; /* optional: prevent hover/focus */
color: #C1824F; /* keep original color */
}
/* Page overlay */
.page-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1000;
}
.page-overlay.show {
opacity: 1;
pointer-events: auto;
}
.home-artist-note {
position: absolute; /* place relative to section */
bottom: 2%; /* distance from bottom */
left: 2%; /* distance from left */
color: #ffffff; /* white text, change if needed */
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.5rem, 0.6vw, 1rem); /* responsive size */
opacity: 0.8; /* slightly transparent */
letter-spacing: 0.5px;
z-index: 10; /* make sure it sits above video */
}
/* Section styling */
.home-section-development {
background-color: black;
color: white;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.home-section-development {
background-color: black;
color: white;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateY(50px) scale(0.95); /* gentle movement */
transition: all 0.8s ease-out;
will-change: transform, opacity;
}
.home-section-development.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Logo */
.home-dev-logo {
width: 95% !important;
height: auto !important;
display: block;
opacity: 0;
transform: scale(0.9);
transition: all 0.3s ease-out;
}
/* Logo visible state */
.home-section-development.visible .home-dev-logo {
opacity: 1;
transform: scale(1);
/* subtle shine */
animation: shine 1.5s ease forwards;
}
/* shine effect: only brightens, doesn't move the logo */
@keyframes shine {
0% { filter: brightness(0.7); }
50% { filter: brightness(1.5); }
100% { filter: brightness(1); }
}
/* Responsive images */
.mobile-img { display: none; }
.home-dev-logo {
width: 95% !important;
height: auto !important;
display: block ;
}
/* Default = Desktop */
.mobile-img {
display: none;
}
/* Mobile view */
@media (max-width: 768px) {
.desktop-img {
display: none;
}
.mobile-img {
display: block;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.desktop-img {
display: none !important;
}
.mobile-img {
display: block !important;
}
.home-section-development {
opacity: 1;
transform: none;
transition: none;
}
.home-section-development {
height: auto !important;
min-height: 85vh !important;
}
.home-section-development.visible {
transform: none;
}
/* Disable shine animation */
.home-section-development.visible .home-dev-logo {
animation: none;
filter: none;
}
.home-dev-logo {
margin-top: -10%;
width: 90% !important;
width: 80% !important;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-dev-logo.desktop-img {
display: none; /* hide mobile version on iPad */
}
.home-dev-logo.mobile-img {
display: none; /* hide mobile version on iPad */
content: url('images/CT\ Gold-Home\ \(Tablet-EN\).svg'); /* your iPad image */
width: 90% !important;
height: auto;
margin-top: 5%;
}
}
@media (max-width: 768px) {
.home-section-development {
opacity: 1;
transform: none;
transition: none;
}
.home-section-development {
height: auto !important;
min-height: 85vh !important;
}
.home-section-development.visible {
transform: none;
}
/* Disable shine animation */
.home-section-development.visible .home-dev-logo {
animation: none;
filter: none;
}
.home-dev-logo {
margin-top: -10%;
width: 90% !important;
}
}
/* GATEWAY SECTION */
/* ===== Gateway Section ===== */
/* Gateway Section */
.home-gateway-section {
background-color: black;
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
opacity: 0;
transform: translateY(50px) scale(0.95); /* same as dev section */
transition: all 0.8s ease-out;
will-change: transform, opacity;
}
/* Visible state */
.home-gateway-section.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Title */
.home-gateway-title {
opacity: 0;
transform: scale(0.9);
transition: all 0.3s ease-out;
}
/* Title visible + shine */
.home-gateway-section.visible .home-gateway-title {
opacity: 1;
transform: scale(1);
animation: shine 1.5s ease forwards;
}
/* Shine effect (same as dev section) */
@keyframes shine {
0% { filter: brightness(0.7); }
50% { filter: brightness(1.5); }
100% { filter: brightness(1); }
}
.home-gateway-section {
position: relative; /* allows absolute positioning inside */
width: 100vw;
height: 100vh; /* full screen height */
overflow: hidden;
}
.home-gateway-title {
position: absolute; /* sit on top of background */
top: 12%; /* vertical center */
left: 0%; /* horizontal center */
transform: translate(-50%, -50%); /* perfect centering */
color: #b4883b; /* golden color */
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1.5rem, 1.7vw, 3rem); /* responsive size */
text-align: center;
letter-spacing: clamp(0.01rem, 0.2vw, 0.5rem);
z-index: 5; /* above background */
width: 100%;
}
/* Image 2 – full width background */
.home-bg {
width: 100%;
height: 100%;
object-fit: cover; /* fills screen nicely */
display: block;
}
/* ====== HOME-GATEWAY LARGE DESKTOP (2000px+) ====== */
@media (min-width: 1900px) {
.home-gateway-title {
font-size: clamp(0.3rem, 1.6vw, 6rem);
line-height: clamp(3.5rem, 3.5vw, 7rem);
margin-top: -0.5%;
}
}
/* Disable animation for screens smaller than 768px (typical mobile) */
@media (max-width: 768px) {
.home-gateway-section {
opacity: 1 !important; /* fully visible */
transform: rotateX(0deg) !important; /* no flip */
transition: none !important; /* remove transition */
}
.home-gateway-section .home-gateway-title {
animation: none !important; /* remove shine animation */
filter: brightness(1); /* default brightness */
}
}
/* Hide mobile image by default */
.mobile-img {
display: none;
}
/* Show mobile image and hide desktop on small screens */
@media (max-width: 768px) {
.desktop-img {
display: none;
}
.mobile-img {
display: block;
width: 100%;
height: auto; /* keeps aspect ratio */
object-fit: cover; /* cover full width */
}
}
/* Mobile adjustments */
@media (max-width: 768px) {
.home-gateway-section {
height: 55vh !important; /* shorter height for mobile */
min-height: unset; /* remove any min-height */
overflow: hidden; /* ensure image stays contained */
}
.home-gateway-title {
top: 3%;
transform: translate(-50%, -50%) !important;
font-size: clamp(1rem, 5.5vw, 21rem); /* scales between 1rem and 2rem */
letter-spacing: clamp(1px, 0.7vw, 30px); /* optional, scales nicely */
width: 85%;
line-height: clamp(1rem, 9vw, 20rem);
text-align: center;
}
.home-gateway-title {
left: 50% !important; /* 🔥 force center ONLY on mobile */
}
.home-bg {
margin-top: 25% !important;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-gateway-section {
opacity: 1 !important; /* fully visible */
transform: rotateX(0deg) !important; /* no flip */
transition: none !important; /* remove transition */
}
.home-gateway-section .home-gateway-title {
animation: none !important; /* remove shine animation */
filter: brightness(1); /* default brightness */
}
.desktop-img {
display: none;
}
.mobile-img {
display: block;
width: 100%;
height: auto; /* keeps aspect ratio */
object-fit: cover; /* cover full width */
}
.home-gateway-section {
height: 80vh !important; /* shorter height for mobile */
min-height: unset; /* remove any min-height */
overflow: hidden; /* ensure image stays contained */
}
.home-gateway-title {
top: 10%;
transform: translate(-50%, -50%) !important;
font-size: clamp(1rem, 3.5vw, 21rem); /* scales between 1rem and 2rem */
letter-spacing: clamp(1px, 0.7vw, 10px); /* optional, scales nicely */
width: 60%;
line-height: clamp(1rem, 7.5vw, 20rem);
text-align: center;
}
.home-gateway-title {
left: 50% !important; /* 🔥 force center ONLY on mobile */
}
.home-bg {
margin-top: 25% !important;
}
}
.home-section-development,
.home-gateway-section,
.home-section-6 {
scroll-margin-top: 70px; /* height of your fixed navbar */
}
/* ===== Home Section 6 ===== */
/* Section 6 */
.home-section-6 {
position: relative;
min-height: 100vh;
display: flex;
justify-content: flex-start; /* text at bottom-left */
align-items: flex-end;
padding: 2rem;
opacity: 0;
transform: translateY(50px) scale(0.95); /* same as dev section */
transition: all 0.8s ease-out;
will-change: transform, opacity;
}
/* Section visible */
.home-section-6.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Caption text */
.home-6-caption {
opacity: 0;
transform: scale(0.9);
color: white;
font-size: 1.2rem;
transition: all 0.3s ease-out;
}
/* Caption visible + shine effect */
.home-section-6.visible .home-6-caption {
opacity: 1;
transform: scale(1);
animation: shine 1.5s ease forwards;
}
/* Reuse same shine effect */
@keyframes shine {
0% { filter: brightness(0.7); }
50% { filter: brightness(1.5); }
100% { filter: brightness(1); }
}
/* Video styling */
.home-6-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
/* Default: show desktop video */
.desktop-video {
display: block;
}
.mobile-video {
display: none;
}
/* Mobile devices */
@media (max-width: 768px) {
.desktop-video {
display: none;
}
.mobile-video {
display: block;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.desktop-video {
display: none !important;
}
.mobile-video {
display: block !important;
}
}
/* Caption styling */
.home-6-caption {
color: white;
font-size: 2rem;
font-weight: bold;
transition: filter 1s ease;
}
.home-section-6.visible .home-6-caption {
animation: shine 1.5s ease forwards;
}
/* Reuse shine keyframes */
@keyframes shine {
0% { filter: brightness(0.6); }
50% { filter: brightness(1.5); }
100% { filter: brightness(1); }
}
.home-section-6 {
position: relative; /* needed for absolute positioning inside */
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.home-6-video {
width: 100%;
height: 100%;
object-fit: cover; /* makes video cover section without stretching */
}
.home-6-caption {
position: absolute; /* place relative to section */
bottom: 2%; /* distance from bottom */
left: 2%; /* distance from left */
color: #ffffff; /* white text, change if needed */
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.5rem, 0.6vw, 1rem); /* responsive size */
opacity: 0.8; /* slightly transparent */
letter-spacing: 0.5px;
z-index: 10;
}
/* Disable animation for mobile */
@media (max-width: 768px) {
.home-section-6 {
opacity: 1 !important; /* make section visible immediately */
transform: rotateX(0deg) !important; /* no flip */
transition: none !important; /* remove transition */
}
.home-6-caption {
animation: none !important; /* remove shine animation */
filter: brightness(1) !important; /* default brightness */
}
}
/* Mobile: make home-section-6 video full width, height auto */
/* Mobile: force section 6 height to 50vh and video fill it */
/* Mobile: crop video left/right while keeping section 50vh */
/* Mobile-only adjustments */
@media (max-width: 768px) {
.home-section-6 { height: 40vh !important; /* fixed section height */
min-height: unset !important;
padding: 0; position: relative; overflow: hidden; /* crop video edges */ }
.home-6-video.mobile-video {
position: absolute;
top: 50%;
left: 50%;
width: 120%; /* fit section width */
height: auto; /* maintain aspect ratio */
transform: translate(-50%, -50%); /* center both vertically and horizontally */
object-fit: cover; /* fills width, crops left/right only */
}
.home-6-caption {
bottom: 7%;
left: 2%;
font-size: clamp(0.07rem, 1.8vw, 1rem);
z-index: 10;
}
/* hide desktop video on mobile */
.home-6-video.desktop-video {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-section-6 {
opacity: 1 !important; /* make section visible immediately */
transform: rotateX(0deg) !important; /* no flip */
transition: none !important; /* remove transition */
}
.home-6-caption {
animation: none !important; /* remove shine animation */
filter: brightness(1) !important; /* default brightness */
}
}
/* Mobile: make home-section-6 video full width, height auto */
/* Mobile: force section 6 height to 50vh and video fill it */
/* Mobile: crop video left/right while keeping section 50vh */
/* Mobile-only adjustments */
@media (min-width: 768px) and (max-width: 1100px) {
.home-section-6 { height: 60vh !important; /* fixed section height */
min-height: unset !important;
padding: 0; position: relative; overflow: hidden; /* crop video edges */ }
.home-6-video.mobile-video {
position: absolute;
top: 50%;
left: 50%;
width: 120%; /* fit section width */
height: auto; /* maintain aspect ratio */
transform: translate(-50%, -50%); /* center both vertically and horizontally */
object-fit: cover; /* fills width, crops left/right only */
}
.home-6-caption {
bottom: 10%;
left: 2%;
font-size: clamp(0.1rem, 1vw, 1.5rem);;
z-index: 10;
}
/* hide desktop video on mobile */
.home-6-video.desktop-video {
display: none;
}
}
/* Section 5 styling */
#home-5 {
height: 145vh; /* full viewport height */
display: flex;
justify-content: center; /* horizontal center */
align-items: center; /* vertical center */
text-align: center;
padding: 0 20px;
background-color: #030000; /* optional background */
}
.home-5-content {
display: flex;
flex-direction: column; /* stack title, subtitle, image */
justify-content: center;
align-items: center; /* ensures content is centered */
gap: 10px; /* spacing between elements */
margin-top: 5%;
}
.home-5-title {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.8vw, 2rem);
color: #b4883b;
text-align: center;
letter-spacing: clamp(0.1rem, 0.3vw, 0.55rem);
margin-top: -5%;
padding-bottom: 0rem;
}
.home-5-subtitle {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.4vw, 1.5rem);
color: #b4883b;
text-align: center;
padding-bottom: 6%;
width: 65%;
line-height: clamp(1rem, 2.5vw, 2.5rem);;
margin: 0 auto;
width: 60%;
padding-bottom: 4rem;
}
.home-5-subtitle {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.8rem, 1.5vw, 1.2rem); /* responsive size */
color: #b4883b; /* golden color */
text-align: center;
margin-top: 0.5rem; /* space below title */
margin-bottom: 1rem; /* space above video */
letter-spacing: 0.05rem;
}
/* Container grows with video, no cropping */
.home-5-video-container {
width: 100%; /* full width of parent */
max-width: 1200px; /* optional: same as before */
height: auto; /* let height expand naturally */
overflow: visible; /* don't crop video */
margin: 0 auto;
position: relative;
}
/* Video inside container */
.home-5-video {
width: 100%; /* full width of container */
height: auto; /* maintain aspect ratio, show full height */
display: block;
}
.home-5-caption {
font-family: "CalibriCustom", sans-serif;
position: absolute;
bottom: 20px; /* distance from bottom */
left: 20px; /* distance from left */
font-size: clamp(0.5rem, 0.6vw, 1rem);
color: white; /* change if needed */
opacity: 0.8; /* slightly subtle */
letter-spacing: 0.5px;
}
/* ===== HOME-5 LARGE DESKTOP (2000px+) ===== */
@media (min-width: 1900px) {
/* Section height */
#home-5 {
height: 130vh; /* taller for big screens */
padding: 0 4rem;
}
/* Content wrapper */
.home-5-content {
gap: 2rem; /* more spacing between elements */
margin-top: 8%; /* push down a bit */
}
/* Title */
.home-5-title {
font-size: clamp(0.3rem, 1.6vw, 6rem);
line-height: clamp(3.5rem, 3.5vw, 7rem);
}
/* Subtitle */
.home-5-subtitle {
font-size: clamp(0.5rem, 1.3vw, 5rem);
line-height: clamp(3rem, 3vw, 5.5rem);
width: 70%;
}
/* Video container */
.home-5-video-container {
max-width: 3000px; /* bigger container */
height: auto; /* keep natural height */
width: 80%;
}
/* Video inside container */
.home-5-video {
width: 100%;
height: auto; /* maintain aspect ratio */
}
/* Caption size */
.home-5-caption {
font-size: 16px;
bottom: 30px;
left: 30px;
}
}
@media (max-width: 768px) {
/* Shorten the section height */
.home-section-5 {
height: 85vh !important; /* makes section 60% of viewport height on mobile */
overflow: hidden; /* prevent overflow from video */
}
.home-5-caption {
bottom: 5%;
left: 5%;
font-size: clamp(0.07rem, 1.8vw, 1rem); /* scales between 0.7rem and 1rem */
}
}
/* Mobile adjustments for Section 5 */
@media (max-width: 768px) {
.home-5-content {
margin-top: 2%; /* reduce top spacing */
gap: 5px; /* smaller spacing between elements */
}
.home-5-title {
font-size: clamp(1rem, 5.5vw, 21rem); /* scales between 1rem and 2rem */
letter-spacing: clamp(1px, 0.7vw, 30px); /* optional, scales nicely */
width: 70%;
line-height: clamp(1rem, 9vw, 20rem);
margin-top: 12%;
padding-bottom: 20%;
}
.home-5-subtitle {
font-size: clamp(0.5rem, 4vw, 11.5rem);
width: 84%; /* narrower than desktop */
text-align: center;
margin: 1rem auto;
line-height: clamp(1rem, 7vw, 11.5rem);
margin-top: -15%;
padding-bottom: 10%;
}
.home-5-video-container {
width: 100%; /* full screen width */
max-width: unset; /* remove desktop max-width */
overflow: hidden; /* crop if needed */
}
.home-5-video {
width: 100%; /* full width */
height: auto; /* maintain aspect ratio */
display: block;
object-fit: cover; /* crop edges slightly for better fit */
}
}
@media (min-width: 768px) and (max-width: 1100px) {
/* Shorten the section height */
.home-section-5 {
height: 75vh !important; /* makes section 60% of viewport height on mobile */
overflow: hidden; /* prevent overflow from video */
}
.home-5-caption {
bottom: 5%;
left: 5%;
font-size: clamp(0.1rem, 1vw, 1.5rem) !important; /* scales between 0.7rem and 1rem */
}
}
/* Mobile adjustments for Section 5 */
@media (min-width: 768px) and (max-width: 1100px) {
.home-5-content {
margin-top: 2%; /* reduce top spacing */
gap: 5px; /* smaller spacing between elements */
}
.home-5-title {
font-size: clamp(1rem, 3.5vw, 21rem); /* scales between 1rem and 2rem */
letter-spacing: clamp(1px, 0.7vw, 30px); /* optional, scales nicely */
width: 100%;
line-height: clamp(1rem, 9vw, 20rem);
margin-top: 12%;
padding-bottom: 20%;
}
.home-5-subtitle {
font-size: clamp(0.5rem, 3vw, 11.5rem);
width: 80%; /* narrower than desktop */
text-align: center;
margin: 1rem auto;
line-height: clamp(1rem, 4.5vw, 11.5rem);
margin-top: -20%;
padding-bottom: 10%;
}
.home-5-video-container {
width: 100%; /* full screen width */
max-width: unset; /* remove desktop max-width */
}
.home-5-video {
width: 100%; /* full width */
height: auto; /* maintain aspect ratio */
display: block;
}
}
/* Mobile adjustments for Section 5 */
/* FUNCTIONALITY */
/* Section styling */
#home-8 {
padding: 80px 20px;
background-color: #030000;
min-height: 185vh;
}
.home-8-content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
margin-top: 5%;
}
.home-8-title {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.8vw, 2rem);
color: #b4883b;
text-align: center;
letter-spacing: clamp(0.1rem, 0.3vw, 0.55rem);
padding-bottom: 4rem;
margin-top: -5%;
}
.home-8-subtitle {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.4vw, 1.5rem);
color: #b4883b;
text-align: center;
margin: 0 auto;
width: 70%;
padding-bottom: 5%;
}
/* Collage container */
.home-8-collage {
display: grid;
grid-template-columns: 2fr 2fr 2.5fr;
grid-template-rows: 0.4fr 0.6fr;
gap: 10px;
max-width: 1200px;
max-height: 400px;
margin: 0 auto;
}
/* Images 1,2,3 */
.img1, .img2, .img3 {
width: 100%;
height: 100%;
object-fit: cover;
}
.img1 { grid-column: 1 / 3; grid-row: 1 / 2; }
.img2 { grid-column: 1 / 2; grid-row: 2 / 3; }
.img3 { grid-column: 2 / 3; grid-row: 2 / 3; }
/* Image 4 as gold background with text */
.img4 {
grid-column: 3 / 4;
background-color: #b4883b;
grid-row: 1 / 3;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
color: #000;
opacity: 1;
}
/* Desktop layout: image left, video right */
.home-8-side-container {
display: flex;
width: 100%;
max-width: 1200px;
margin: 2rem auto;
gap: 1rem;
align-items: stretch; /* ensures children stretch to full height */
height: 70vh; /* adjust as needed */
margin-top: 30%
}
.home-8-side-image,
.home-8-side-video {
height: 100%; /* full height of container */
}
.home-8-side-image img,
.home-8-side-video video {
width: 100%;
height: 100%; /* fill parent height */
object-fit: cover; /* crop edges if needed, keeps container full */
}
/* Only this mobile image */
@media (max-width: 768px) {
.home-8-side-image {
width: 70%;
display: flex;
justify-content: center;
}
.sectional-mobile {
max-width: none; /* remove restriction */
flex-shrink: 0; /* prevent shrinking */
}
/* Hide desktop version on mobile */
.home-8-side-image .desktop-img {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-8-side-image {
width: 60%;
display: flex;
justify-content: center;
}
.sectional-mobile {
max-width: none; /* remove restriction */
flex-shrink: 0; /* prevent shrinking */
}
/* Hide desktop version on mobile */
.home-8-side-image .desktop-img {
display: none;
}
}
.home-8-side-video {
flex: 2;
position: relative; /* for absolute caption */
overflow: hidden; /* crops video edges if using object-fit: cover */
height: 100%; /* ensure it matches container height */
}
.home-8-side-video video {
width: 100%;
height: 100%;
object-fit: cover; /* crop a little, but fills container */
display: block; /* remove default inline spacing */
}
.video-caption2 {
position: absolute; /* absolute relative to video container */
bottom: 10px; /* 10px from bottom of container */
left: 10px; /* 10px from left */
color: #fff;
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.5rem, 0.6vw, 1rem);
opacity: 0.8;
letter-spacing: 0.5px;
z-index: 10;
}
.side-video,
.side-image,
.desktop-imgs {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Hide mobile image on desktop */
.mobile-imgs {
display: none;
}
@media (max-width: 767px) {
.desktop-imgs {
display: none !important;
}
.mobile-imgs {
display: block;
width: 100%;
height: auto;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.desktop-imgs {
display: none !important;
}
.mobile-imgs {
display: block;
width: 100%;
height: auto;
}
}
/* Desktop video shown by default */
.desktop-video {
display: block;
}
/* Mobile video hidden by default */
.mobile-video {
display: none;
}
/* ===== HOME-8 LARGE DESKTOP (2000px+) ===== */
@media (min-width: 1900px) {
/* Section height */
#home-8 {
min-height: 210vh;
}
/* Title */
.home-8-title {
font-size: clamp(0.3rem, 1.6vw, 6rem);
line-height: clamp(3.5rem, 3.5vw, 7rem);
padding-bottom: 5%;
}
.home-8-content {
max-width: 2200px; /* remove small cap */
margin: 0 auto;
}
.home-8-collage {
width: 76%;
max-width: none;
height: 800px; /* full section height for collage */
display: grid;
grid-template-columns: 2fr 2fr 2.5fr;
grid-template-rows: 1fr 1fr; /* equal height rows */
gap: 20px;
}
/* Make images fill their grid boxes */
.home-8-collage img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Image 2 & 3 stretch to fill row */
.img2, .img3 {
display: block;
height: 100%; /* ensures full row height */
}
/* Image 4 keeps full height */
.img4 {
grid-row: 1 / 3; /* spans both rows */
height: 97%;
}
/* Side container (image + video) */
.home-8-side-container {
max-width: 3000px;
gap: 2rem;
height: 80vh; /* taller container */
margin-top: 30%;
width: 76%;
}
.home-8-side-video,
.home-8-side-image {
height: 100%; /* full height */
}
.home-8-side-video video,
.home-8-side-image img {
width: 100%;
height: 100%;
object-fit: cover; /* fill container, crop slightly if needed */
}
/* Caption bigger on large screens */
.video-caption2 {
font-size: clamp(1rem, 1.5vw, 1.8rem);
bottom: 20px;
left: 20px;
}
}
@media (max-width: 768px) {
/* Hide desktop, show mobile */
.desktop-video {
display: none !important;
}
.mobile-video {
display: block;
width: 100%;
height: 70vh; /* ensure it has height */
object-fit: cover; /* fill container */
}
.home-8-side-video {
width: 120%;
}
.video-caption2 {
font-size: clamp(0.1rem, 1vw, 1.8rem);
bottom: 5%;
left: 5%;
}
/* Video container */
.home-8-side-video video {
width: 100%;
height: 100%;
object-fit: contain; /* keeps full video visible */
}
/* Container stacks vertically */
.home-8-side-container {
flex-direction: column;
align-items: center;
height: auto; /* let container grow */
margin-top: 60%;
}
}
/* Responsive */
@media (max-width: 768px) {
#home-8 {
min-height: 380vw;
}
.home-8-title {
position: relative; /* make it positioned inside the section */
top: 1.5%; /* distance from top */
left: 50%; /* center horizontally */
transform: translateX(-50%); /* perfect horizontal centering */
font-size: clamp(1rem, 5vw, 21rem); /* scales between 1rem and 2rem */
letter-spacing: clamp(1px, 0.7vw, 30px); /* optional, scales nicely */
width: 80%;
line-height: clamp(1rem, 9vw, 20rem);
text-align: center;
padding-bottom: 18%;
}
}
@media (max-width: 768px) {
.home-8-collage {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns */
grid-template-rows: auto auto auto; /* 3 rows */
gap: 15px;
}
/* Image 1: full width at top */
.img1 {
grid-column: 1 / -1; /* span both columns */
grid-row: 1;
height: 180px;
}
/* Image 4: slightly bigger width, below Image 1 */
.img4 {
grid-column: 1 / -1; /* span both columns */
grid-row: 2;
height: 25vh; /* taller for emphasis */
background-color: #030000;
margin-top: 1%;
}
/* Image 2 and 3: side by side in row 3 */
.img2 {
grid-column: 1 / 2;
grid-row: 3;
height: 120px;
}
.img3 {
grid-column: 2 / 3;
grid-row: 3;
height: 120px;
}
/* Make sure images fill their cells */
.img1 img,
.img2 img,
.img3 img,
.img4 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
/* Hide
on desktop */
.mobile-br {
display: none;
}
/* Show
on mobile */
@media (max-width: 768px) {
.mobile-br {
display: inline;
}
}
/* Hide mobile image by default */
.img4 .mobile-imgs {
display: none;
width: 100%;
height: auto;
}
/* Desktop image styling */
.img4 .desktop-imgs {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* fills box nicely */
}
/* Mobile view */
@media (max-width: 768px) {
.img4 .desktop-imgs {
display: none; /* hide desktop image on mobile */
}
.img4 .mobile-imgs {
display: block; /* show mobile image */
width: 113% !important;
height: auto; /* maintain aspect ratio */
object-fit: cover;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.img4 .desktop-imgs {
display: none; /* hide desktop image on mobile */
}
.img4 .mobile-imgs {
display: block; /* show mobile image */
width: 113% !important;
height: auto; /* maintain aspect ratio */
object-fit: cover;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
/* Hide desktop, show mobile */
.desktop-video {
display: none !important;
}
.mobile-video {
display: block;
width: 100%;
height: 70vh; /* ensure it has height */
object-fit: cover; /* fill container */
}
.home-8-side-video {
width: 120%;
}
.video-caption2 {
font-size: clamp(0.1rem, 1vw, 1.8rem);
bottom: 5%;
left: 5%;
}
.video-caption {
font-size: clamp(0.1rem, 1vw, 1.8rem);
bottom: 5%;
left: 5%;
}
/* Video container */
.home-8-side-video video {
width: 120%;
height: 100%;
object-fit: contain; /* keeps full video visible */
margin-left: -10%;
}
/* Container stacks vertically */
.home-8-side-container {
flex-direction: column;
align-items: center;
height: auto; /* let container grow */
margin-top: 100%;
}
/* Images */
.desktop-img {
display: none;
}
.mobile-img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
margin-top: 5%;
}
}
/* Responsive */
@media (min-width: 768px) and (max-width: 1100px) {
#home-8 {
min-height: 345vw;
}
.home-8-title {
position: relative; /* make it positioned inside the section */
top: 5.5%; /* distance from top */
left: 50%; /* center horizontally */
transform: translateX(-50%); /* perfect horizontal centering */
font-size: clamp(1rem, 3.5vw, 21rem); /* scales between 1rem and 2rem */
letter-spacing: clamp(1px, 0.7vw, 30px); /* optional, scales nicely */
width: 100%;
line-height: clamp(1rem, 9vw, 20rem);
text-align: center;
padding-bottom: 25%;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-8-collage {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns */
grid-template-rows: auto auto auto; /* 3 rows */
gap: 10px;
}
/* Image 4: slightly bigger width, below Image 1 */
.img4 {
grid-column: 1 / -1; /* span both columns */
grid-row: 1;
height: 30vh; /* taller for emphasis */
background-color: #030000;
margin-top: 22%;
}
/* Image 1: full width at top */
.img1 {
grid-column: 1 / -1; /* span both columns */
grid-row: 2;
height: 320px;
object-position: 50% 20%;/* show the top of the image */
}
/* Image 2 and 3: side by side in row 3 */
.img2 {
grid-column: 1 / 2;
grid-row: 3;
height: 320px;
margin-top: 5%;
width: 82%;
margin-left: 16% !important;
}
.img3 {
grid-column: 2 / 3;
grid-row: 3;
height: 320px;
margin-top: 5%;
width: 82%;
margin-left: 2% !important;
}
/* Make sure images fill their cells */
.img1 img,
.img2 img,
.img3 img,
.img4 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
/* Hide
on desktop */
.mobile-br {
display: none;
}
/* Mobile view */
/* iPad-specific styles */
@media (min-width: 768px) and (max-width: 1024px) {
.img4 {
background-color: #b4883b; /* Golden background */
padding: 20px; /* Space around the image */
display: flex;
justify-content: center; /* Center image horizontally */
align-items: center; /* Center image vertically */
overflow: hidden; /* Prevent overflow */
width: 80%;
left: 8%;
margin-top: 5%;
}
.img1{
width: 84% !important;
margin-left: 8%;
margin-top: 2%;
}
.img4 .desktop-imgs,
.img4 .mobile-imgs {
max-width: 90%; /* Make image smaller inside container */
height: auto;
object-fit: cover;
display: block;
margin-top: -1%;
}
}
.home-section-9 {
padding: 0;
text-align: center;
background-color: #030000;
min-height: 120vh;
}
/* TITLE */
.home-9-title {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.8vw, 2rem);
color: #b4883b;
text-align: center;
letter-spacing: clamp(0.1rem, 0.3vw, 0.55rem);
margin-top: 8%;
line-height: clamp(1rem, 2.8vw, 12rem);
}
/* IMAGE */
.home-9-image-wrapper {
width: 100%;
height: 92vh;
overflow: hidden;
margin-top: 5%;
position: relative; /* needed for caption positioning */
}
.home-9-caption {
position: absolute; /* place relative to section */
bottom: 2%; /* distance from bottom */
left: 2%; /* distance from left */
color: #ffffff; /* white text, change if needed */
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.5rem, 0.6vw, 1rem); /* responsive size */
opacity: 0.8; /* slightly transparent */
letter-spacing: 0.5px;
z-index: 10;
}
.home-9-full-image {
width: 100%;
height: 100%;
object-fit: cover; /* crops instead of squishing */
}
@media (min-width: 1900px) {
/* Section title bigger for large screens */
.home-9-title {
font-size: clamp(0.3rem, 1.6vw, 6rem);
line-height: clamp(3.5rem, 3.5vw, 7rem);
}
/* Image wrapper fills more of viewport */
.home-9-image-wrapper {
height: 90vh; /* full viewport height */
}
/* Caption slightly bigger */
.home-9-caption {
font-size: clamp(1rem, 1.2vw, 1.5rem);
}
}
@media (max-width: 768px) {
.home-section-9 {
min-height: unset;
height: 60vh !important; /* force mobile height */
max-height: 60vh !important;
}
}
@media (max-width: 768px) {
.home-9-image-wrapper {
width: 100%;
height: 65vh; /* taller, adjust as needed */
overflow: hidden; /* crop extra parts */
margin-top: 0;
position: relative;
}
.home-9-full-image {
width: 100%;
height: 35vh;
object-fit: cover; /* crops instead of squishing */
}
.home-9-caption {
bottom: 1%;
left: 1%;
font-size: clamp(0.05rem, 1.5vw, 0.9rem);
}
.home-9-title {
margin-top: 17% !important;
font-size: clamp(1rem, 5vw, 2rem); /* scales between 1rem and 2rem */
letter-spacing: clamp(1px, 0.5vw, 3px); /* optional, scales nicely */
width: 90%;
line-height: clamp(1rem, 8vw, 20rem);
text-align: center;
padding-bottom: 15%;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-section-9 {
min-height: unset;
height: 80vh !important; /* force mobile height */
max-height: 80vh !important;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-9-image-wrapper {
width: 100%;
height: 85vh; /* keep vertical space intact */
overflow: hidden;
margin-top: 15%;
position: relative;
}
.home-9-full-image {
width: 140%;
height: 100%;
object-fit: cover;
object-position: center; /* keep center reference */
transform: translateX(-13%); /* shifts image left, crops left side */
}
.home-9-caption {
bottom: 1%;
left: 1%;
font-size: clamp(0.1rem, 1vw, 1.5rem);;
}
.home-9-title {
margin-top: 10% !important;
font-size: clamp(1rem, 3.5vw, 2rem);
letter-spacing: clamp(1px, 0.5vw, 3px);
width: 100%;
line-height: clamp(1rem, 7.5vw, 20rem);
text-align: center;
padding-bottom: 7%;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.mobile-br1 {
display: inline;
}
.mobile-br {
display: none;
}
}
.home-section-10 {
padding: 120px 0;
min-height: 160vh;
background-color: #030000;
}
.grid-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.home-10-collage {
width: 85%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 220px 220px auto;
gap: 20px;
}
/* Image 1 – tall */
.img12 {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
/* Image 2 – gold block */
.img22 {
grid-column: 2 / 5;
grid-row: 1 / 2;
background: #c9a14a;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
/* Images 3–5 */
.img32 {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.img42 {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
.img52 {
grid-column: 4 / 5;
grid-row: 2 / 3;
}
/* Image 6 – full width */
.img62 {
grid-column: 1 / 5;
grid-row: 3 / 4;
position: relative;
overflow: hidden;
}
.img62 img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
object-fit: cover;
}
/* Shared image styling */
.grid-img img,
.grid-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.grid-img {
overflow: hidden;
}
/* Text block */
.img2-text {
color: #fff;
text-align: left;
font-family: "CalibriCustom", sans-serif;
}
.img2-text h3 {
margin: 0 0 10px 0;
font-size: clamp(1rem, 1.8vw, 2rem);
padding-bottom: 3%;
letter-spacing: clamp(0.1rem, 0.15vw, 0.55rem);
}
.img2-text p {
font-size: clamp(1rem, 1.4vw, 1.5rem);
margin: 0;
}
.video-caption {
position: absolute; /* place relative to section */
bottom: 2%; /* distance from bottom */
left: 2%; /* distance from left */
color: #ffffff; /* white text, change if needed */
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.5rem, 0.6vw, 1rem); /* responsive size */
opacity: 0.8; /* slightly transparent */
letter-spacing: 0.5px;
z-index: 10;
}
.home-10-collage .grid-img.img62 {
position: relative;
width: 100%;
height: 600px; /* adjust the height to how much of the video you want visible */
overflow: hidden; /* hides the bottom part */
}
.home-10-collage .grid-img.img62 .grid-video {
width: 100%;
height: 100%;
object-fit: cover; /* ensures the video fills the container while cropping excess */
object-position: bottom; /* crops from the bottom, keeping the top visible */
}
@media (min-width: 1900px) {
/* Section height */
.home-section-10 {
min-height: 160vh;
}
/* Collage wrapper fills more space */
.home-10-collage {
width: 76%;
max-width: 4000px;
margin: 0 auto;
gap: 30px;
margin-top: -20%;
}
/* Images grid rows taller */
.home-10-collage {
grid-template-rows: 300px 300px 500px; /* taller for desktop */
}
/* Make the gold block bigger */
.img22 {
grid-row: 0.5 / 3;
}
/* Video container bigger */
.img62 {
height: 700px; /* more visible video */
}
/* Scale video & images to fill container */
.grid-img,
.grid-img img,
.grid-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-10-collage .grid-img.img62 {
position: relative;
width: 100%;
height: 80vh; /* adjust the height to how much of the video you want visible */
overflow: hidden; /* hides the bottom part */
}
/* Video caption slightly bigger */
.video-caption {
font-size: clamp(0.1rem, 0.7vw, 1.5rem);
}
}
/* MOBILE */
@media (max-width: 768px) {
.home-section-10 {
height: auto !important;
min-height: 95vh !important;
}
}
@media (min-width: 768px) and (max-width: 1100px) { /* iPad view */
.home-section-10 {
height: 95vh !important; /* exact height */
padding: 40px 0; /* reduce padding */
min-height: unset !important;
overflow: hidden; /* optional, hide overflowing content */
}
.grid-img.img12 {
object-fit: cover; /* crops instead of squishing */
object-position: right center; /* shows the right side of the image */
}
}
@media (max-width: 768px) {
/* Keep the main collage grid */
.home-10-collage {
margin-top: -70%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 150px);
gap: 10px;
grid-template-areas:
"img12 img12 img32 img32"
"img12 img12 img42 img52"
"img22 img22 img22 img22"
"img62 img62 img62 img62";
}
.img12 { grid-area: img12; }
.img32 { grid-area: img32; }
.img42 { grid-area: img42; }
.img52 { grid-area: img52; }
.img22 { grid-area: img22; }
.img62 { grid-area: img62; }
/* Make images fill their grid cell */
.grid-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* === Full-width video === */
.img62 {
grid-column: 1 / -1; /* span all columns */
width: 100vw !important; /* full viewport width */
height: 40vh !important; /* shorter height, adjust as needed */
margin-left: calc(-50vw + 50%); /* make it truly edge-to-edge */
position: relative; /* needed if you use video absolute inside */
margin-top: 5%;
}
.img62 .grid-video {
width: 100%;
height: 100%;
object-fit: cover; /* fills container, crops if needed */
object-position: center;
}
}
/* By default, show desktop image */
.img22 .desktop-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.img22 .mobile-img {
display: none;
margin-top: -1%;
}
/* Mobile view */
@media (max-width: 768px) {
.img22 .desktop-img {
display: none;
}
.img22 .mobile-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.home-section-11 {
width: 100%;
min-height: 205vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem 1rem;
background-color: #030000;
overflow: hidden;
}
.section11-top-image {
width: 100%;
max-height: 250px; /* short rectangle image */
object-fit: cover;
margin-bottom: -5%;
}
/* Small images */
.home-11-small-image {
width: 100%;
max-width: 300px;
height: auto;
object-fit: cover;
display: block;
margin-bottom: 3rem;
margin-top: 8%;
}
.home-11-small-image2 {
width: 100%;
max-width: 500px;
height: auto;
object-fit: cover;
display: block;
margin-bottom: 4rem;
}
/* Subtitle */
.home-11-subtitle {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(1rem, 1.4vw, 1.5rem);
line-height: clamp(0.5rem, 2.5vw, 6rem);
color: #b4883b;
text-align: center;
width: 65%;
margin-bottom: 3rem;
}
/* Collage grid */
.home-11-collage {
display: grid;
grid-template-columns: 2.5fr 1.7fr 1.7fr 1.7fr;
grid-template-rows: repeat(2, 220px);
grid-gap: 3rem;
width: 80%;
max-width: 1200px;
margin: 0 auto;
}
/* Image 1 spans 2 rows */
.home-11-collage .image1 {
grid-row: 1 / span 2;
grid-column: 1 / 2;
display: flex;
flex-direction: column;
align-items: center;
}
.collage-item {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
}
/* Label on image */
.image-label {
position: absolute;
top: 10px;
left: 10px;
color: #ffffff;
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.1rem, 0.5vw, 1.5rem);
padding: 2px 6px;
border-radius: 3px;
pointer-events: none;
}
.collage-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.image-7 img {
object-fit: cover; /* ensures it still covers the container */
object-position: left; /* moves the image to show more left */
width: 100%;
height: 100%;
}
/* Captions */
.collage-item figcaption {
margin-top: 1rem;
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.9rem, 1.2vw, 1.2rem);
color: #ffffff;
text-align: center;
margin-bottom: -1rem;
}
.home-11-subsubtitle {
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.9rem, 1.5vw, 1.2rem);
color: #b4883b;
text-align: center;
margin-top: 5%;
line-height: 1.4;
letter-spacing: clamp(0.01rem, 0.3vw, 1.2rem);
}
.home-11-subsubtitle a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
/* Start hidden and slightly moved down */
.home-11-small-image,
.home-11-small-image2,
.home-11-subtitle {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s ease, transform 1s ease;
}
/* Fade-in + move to original position when visible */
.home-section-11.visible .home-11-small-image {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s; /* optional stagger */
}
.home-section-11.visible .home-11-small-image2 {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s;
}
.home-section-11.visible .home-11-subtitle {
opacity: 1;
transform: translateY(0);
transition-delay: 0.6s;
}
@media (min-width: 1900px) {
/* Section spacing */
.home-section-11 {
min-height: 250vh;
}
/* Top banner slightly taller */
.section11-top-image {
max-height: 400px;
}
/* Logo + awards bigger */
.home-11-small-image {
max-width: 2500px;
width: 26%;
}
.home-11-small-image2 {
max-width: 2000px;
width: 50%;
}
/* Subtitle more readable on big screens */
.home-11-subtitle {
width: 60%;
font-size: clamp(0.5rem, 1.3vw, 5rem);
line-height: clamp(3rem, 3vw, 5.5rem);
}
/* Collage expands */
.home-11-collage {
width: 90%;
max-width: 2200px;
grid-template-rows: 350px 350px; /* taller grid */
gap: 40px;
}
/* Labels slightly bigger */
.image-label {
font-size: clamp(0.8rem, 1vw, 1.2rem);
}
/* Captions bigger */
.collage-item figcaption {
font-size: 1.1rem;
margin-top: 1.2rem;
}
/* Bottom link bigger */
.home-11-subsubtitle {
font-size: clamp(1.2rem, 1.5vw, 1.8rem);
margin-top: 3%;
}
}
/* MOBILE */
@media (max-width: 768px) {
.home-section-11 {
min-height: 195vh !important;
padding: 3rem 1.2rem;
}
.home-11-subtitle {
font-size: clamp(0.5rem, 4vw, 11.5rem);
width: 80%; /* narrower than desktop */
text-align: center;
margin: 1rem auto;
line-height: clamp(1rem, 6vw, 11.5rem);
margin-top: -15%;
padding-bottom: 2rem;
}
.home-11-subsubtitle {
letter-spacing: clamp(0.01rem, 0.2vw, 1.2rem);
font-size: clamp(0.5rem, 4vw, 11.5rem);
}
.home-11-collage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(4, auto); /* let height adjust automatically */
gap: 0.5rem;
width: 90%;
margin: 0 auto;
grid-template-areas:
"img1 img2"
"img1 img3"
"img4 img5"
"img6 img7";
}
.home-11-collage .image1 { grid-area: img1; }
.home-11-collage .collage-item:nth-child(2) { grid-area: img2; }
.home-11-collage .collage-item:nth-child(3) { grid-area: img3; }
.home-11-collage .collage-item:nth-child(4) { grid-area: img4; }
.home-11-collage .collage-item:nth-child(5) { grid-area: img5; }
.home-11-collage .collage-item:nth-child(6) { grid-area: img6; }
.home-11-collage .collage-item:nth-child(7) { grid-area: img7; }
.collage-item figcaption {
margin-top: 4%; /* bigger space between image and caption */
margin-bottom: 8%;
font-size: clamp(0.01rem, 3.5vw, 10.5rem) !important;
}
.image-label {
position: absolute;
top: 2%;
left: 1%;
color: #ffffff;
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.01rem, 1.5vw, 10.5rem);
padding: 2px 6px;
border-radius: 3px;
pointer-events: none;
}
}
@media (max-width: 768px) {
.home-11-small-image,
.home-11-small-image2,
.home-11-subtitle {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
@media (max-width: 768px) {
.section11-top-image {
display: none;
}
}
@media (max-width: 768px) {
.home-11-small-image {
width: 55%;
height: auto;
margin-top: 15%;
margin-bottom: 20%;
}
}
@media (max-width: 768px) {
.home-11-small-image2 {
width: 70%;
height: auto;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-section-11 {
min-height: 230vh !important;
padding: 3rem 1.2rem;
}
.home-11-subtitle {
font-size: clamp(0.5rem, 2.5vw, 11.5rem);
width: 80%; /* narrower than desktop */
text-align: center;
margin: 1rem auto;
line-height: clamp(1rem, 4.5vw, 11.5rem);
margin-top: -15%;
padding-bottom: 2rem;
}
.home-11-subsubtitle {
letter-spacing: clamp(0.01rem, 0.2vw, 1.2rem);
font-size: clamp(0.5rem, 2.5vw, 11.5rem);
margin-top: 1%;
}
.home-11-collage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(4, auto); /* let height adjust automatically */
gap: 1.5rem;
width: 90%;
margin: 0 auto;
grid-template-areas:
"img1 img2"
"img1 img3"
"img4 img5"
"img6 img7";
}
.home-11-collage .image1 { grid-area: img1; }
.home-11-collage .collage-item:nth-child(2) { grid-area: img2; }
.home-11-collage .collage-item:nth-child(3) { grid-area: img3; }
.home-11-collage .collage-item:nth-child(4) { grid-area: img4; }
.home-11-collage .collage-item:nth-child(5) { grid-area: img5; }
.home-11-collage .collage-item:nth-child(6) { grid-area: img6; }
.home-11-collage .collage-item:nth-child(7) { grid-area: img7; }
.collage-item figcaption {
margin-top: 4%; /* bigger space between image and caption */
margin-bottom: 8%;
font-size: clamp(0.01rem, 2vw, 10.5rem) !important;
}
.image-label {
position: absolute;
top: 2%;
left: 1%;
color: #ffffff;
font-family: "CalibriCustom", sans-serif;
font-size: clamp(0.01rem, 1vw, 10.5rem);
padding: 2px 6px;
border-radius: 3px;
pointer-events: none;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-11-small-image,
.home-11-small-image2{
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.section11-top-image {
display: block;
content: url('images/CT Gold-Motif (Tablet).svg');
width: 90%; /* optional scaling */
height: auto;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-11-small-image {
width: 100% !important;
margin-top: 15%;
margin-bottom: 20%;
}
}
@media (min-width: 768px) and (max-width: 1100px) {
.home-11-small-image2 {
width: 70%;
height: auto;
}
}