/* Design System & Reset */
html {
scroll-behavior: smooth;
}
:root {
/* Primary Colors */
--primary-dark: #192954;
--primary-blue: #192954;
--primary-gradient: linear-gradient(90deg, #192954 0%, #192954 100%);
/* Secondary & Accents */
--accent-light: #A3D3F2;
--accent-mid: #8FCEF1;
--accent-soft: #CEEDFF;
--accent-glow: rgba(143, 206, 241, 0.21);
/* Neutral Colors */
--bg-light: #F4F4F4;
--bg-white: #FFFFFF;
--text-main: #192954;
--text-body: #4F4B4C;
--text-muted: #7A7979;
--text-white: #FFFFFF;
/* Layout */
--max-width: 1440px;
--container-padding: 0 80px;
--container-padding-mobile: 0 20px;
/* Shadows & Borders */
--shadow-soft: 0px 4px 4px rgba(0, 0, 0, 0.25);
--shadow-card: 0px 5px 10.6px rgba(25, 41, 84, 0.36);
--border-radius: 10px;
--border-radius-large: 20px;
/* Transitions */
--transition-fast: 0.3s ease;
--transition-mid: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Custom Scrollbar - Modern Edge-to-Edge UI */
/* For Chrome, Safari, and Edge */
::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
::-webkit-scrollbar-button {
display: none !important;
height: 0 !important;
width: 0 !important;
/* Forced Arrow Removal: Completely invisible */
}
::-webkit-scrollbar-track {
background: #90cef1 !important;
}
::-webkit-scrollbar-thumb {
background-color: #192954 !important;
border-radius: 100px !important;
border: none !important;
padding: 0 !important;
/* Edge-to-Edge Mover: No gaps, full track width alignment */
}
::-webkit-scrollbar-thumb:hover {
background-color: #c5a059 !important;
}
/* For Firefox */
@supports (scrollbar-width: thin) {
* {
scrollbar-width: thin;
scrollbar-color: #192954 #90cef1;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Mulish', sans-serif;
background-color: var(--bg-light);
color: var(--text-body);
line-height: 1.5;
overflow-x: hidden;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-fast);
}
img {
max-width: 100%;
display: block;
}
/* Card images must fill their container  override the above */
.card-image-wrapper {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
display: block !important;
z-index: 1;
}
.card-image-wrapper img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.active-project:hover .card-image-wrapper img,
.small-card:hover .card-image-wrapper img {
transform: scale(1.1) !important;
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--text-main);
font-weight: 700;
line-height: 1.2;
}
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: var(--container-padding);
}
/* Margin Utilities */
.mt-80 {
margin-top: 80px !important;
}
.mb-80 {
margin-bottom: 80px !important;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 30px;
border-radius: 5px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: var(--transition-fast);
border: none;
}
.btn-primary {
background-color: var(--primary-dark);
color: var(--text-white);
}
.btn-primary:hover {
background-color: var(--primary-blue);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 10px 20px rgba(25, 41, 84, 0.4);
}
.btn-outline {
background-color: transparent;
color: var(--text-white);
border: 2px solid var(--text-white);
}
.btn-outline:hover {
background-color: var(--text-white);
color: var(--primary-dark);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
}
.btn-small {
padding: 10px 20px;
font-size: 14px;
}
.btn-full {
width: 100%;
}
/* Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background: #192954;
z-index: 1000;
transition: var(--transition-fast);
display: flex;
align-items: center;
}
header.scrolled {
height: 80px;
background: rgba(25, 41, 84, 0.98);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.logo {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
}
.logo img {
height: 75px;
transition: var(--transition-fast);
position: relative;
z-index: 2;
}
/* Subtle automatic gloss shine effect - matches the scroll to top button exactly */
.logo::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.99) 50%,
rgba(255, 255, 255, 0) 70%);
background-size: 250% 100%;
background-repeat: no-repeat;
background-position: 150% 0;
animation: logoShine 4s infinite ease-in-out;
/* Clean Masking: clips the shine ONLY to the opaque pixels of the logo SVG */
mask-image: url('../logo/header-logo1.svg');
-webkit-mask-image: url('../logo/header-logo1.svg');
mask-size: contain;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
}
@keyframes logoShine {
0% {
background-position: 150% 0;
}
35% {
background-position: -50% 0;
}
100% {
background-position: -50% 0;
}
}
header.scrolled .logo img {
height: 60px;
}
.nav-menu ul {
display: flex;
gap: 35px;
}
.nav-link {
color: var(--text-white);
font-size: 14px;
letter-spacing: 0;
font-weight: 500;
}
.nav-link:hover,
.nav-link.active {
color: var(--accent-light);
transform: translateY(-1px);
}
.header-actions {
display: flex;
align-items: center;
gap: 20px;
}
.mobile-nav-item {
display: none;
}
.btn-outline-header {
border: 1px solid #90cef1;
color: #90cef1;
padding: 10px 22px;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
border-radius: 2px;
transition: all 0.3s ease;
white-space: nowrap;
}
.btn-outline-header:hover {
background-color: #90cef1;
color: var(--primary-blue);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(144, 206, 241, 0.3);
}
.cta-button {
background-color: var(--accent-light);
color: var(--primary-blue);
padding: 10px 22px;
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
border-radius: 2px;
animation: pulse 3s infinite;
white-space: nowrap;
}
.cta-button:hover {
background-color: var(--accent-mid);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 15px rgba(163, 211, 242, 0.4);
}
.hamburger {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
z-index: 1001;
}
.hamburger span {
width: 30px;
height: 2px;
background-color: var(--text-white);
transition: var(--transition-mid);
border-radius: 2px;
}
.hamburger.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* Hero Section */
.hero {
position: relative;
height: calc(100vh - 50px);
margin-top: 50px;
/* Move below fixed header */
display: flex;
align-items: center;
overflow: hidden;
background-color: #192954;
}
.hero-container {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
z-index: 5;
}
.hero-slide-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-slide-bg picture,
.hero-slide-bg img {
width: 100%;
height: 100%;
display: block;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: fill;
/* Forces the 1440x842 image to fill the screen exactly without any cropping */
object-position: left center;
}
.hero-bg-wrapper::after {
display: none;
}
.hero-content {
grid-column: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 20px;
z-index: 2;
text-align: left;
width: 100%;
}
/* Hero Slider Base */
.hero-slider-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 5;
overflow: hidden;
}
.hero-slider-container {
display: flex;
height: 100%;
width: 100%;
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
will-change: transform;
}
.hero-slide {
min-width: 100%;
height: 100%;
display: flex;
align-items: center;
position: relative;
}
/* Hero Navigation Arrows */
.hero-slider-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 40px;
z-index: 10;
pointer-events: none;
}
.hero-slider-arrow {
width: 54px;
height: 54px;
background: rgba(25, 41, 84, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
pointer-events: auto;
backdrop-filter: blur(5px);
}
.hero-slider-arrow:hover {
background: rgba(25, 41, 84, 0.9);
transform: scale(1.15) translateY(-50%);
box-shadow: 0 0 15px rgba(25, 41, 84, 0.4);
color: var(--accent-light);
}
.hero-slider-arrow svg {
width: 28px;
height: 28px;
}
/* Hero Pagination Dots */
.hero-slider-dots {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 10;
}
.hero-slider-dots .dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.hero-slider-dots .dot:hover {
background: rgba(255, 255, 255, 0.6);
transform: scale(1.2);
}
.hero-slider-dots .dot.active {
background: white;
transform: scale(1.4);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}
.hero-title {
font-size: 50px;
font-weight: 800;
color: var(--text-white);
margin-bottom: 20px;
text-transform: uppercase;
line-height: 1.0;
letter-spacing: 0;
}
.hero-subtitle {
font-size: 29px;
font-weight: 600;
color: var(--text-white);
margin-bottom: 40px;
line-height: 1.1;
}
.hero-btns {
display: flex;
gap: 20px;
}
.btn-hero {
height: 52px;
border-radius: 2px;
font-size: 16px;
font-weight: 700;
}
.btn-explore {
width: 204px;
background-color: #192954;
color: var(--text-white);
border: none;
}
.btn-schedule {
width: 171px;
background-color: transparent;
color: var(--text-white);
border: 1.5px solid #FFFFFF;
}
.btn-explore:hover {
background-color: #1a2a5a;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(25, 41, 84, 0.5);
}
.btn-schedule:hover {
background-color: var(--text-white);
color: #192954;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}
/* About & Vision Section */
.vision-mission {
position: relative;
padding: 80px 0 40px;
/* Reduced bottom padding */
background: #F4F4F4;
/* overflow: visible to allow background images to spill out */
}
/* Background PNGs */
.about-bg-images {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
/* Increased to be above section background */
}
.bg-about-1 {
position: absolute;
width: 289px;
height: 545px;
left: 0;
top: 0;
object-fit: contain;
}
.bg-about-2 {
position: absolute;
width: 376px;
height: 376px;
left: 250px;
top: 18px;
object-fit: contain;
}
.bg-about-3 {
position: absolute;
width: 156px;
height: 164px;
right: 135px;
/* Adjusting to fit design */
top: 50px;
object-fit: contain;
}
.about-container {
position: relative;
z-index: 20;
/* Higher than background images */
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: center;
}
.hexagon-image {
position: relative;
width: 500px;
height: 500px;
margin-left: -70px;
/* Moves it toward the left edge */
margin-top: 5px;
/* Moves it 50px UP */
}
.hexagon-image img {
width: 100%;
height: 100%;
object-fit: contain;
/* Using natural PNG shape */
}
.vision-content h2 {
font-size: 42px;
font-weight: 800;
color: #192954;
text-transform: uppercase;
letter-spacing: 0;
margin-bottom: 40px;
line-height: 1.2;
}
.vision-cards {
display: flex;
flex-direction: column;
gap: 30px;
}
.vision-card {
background: #FFFFFF;
box-shadow: 0px 4px 3.8px 2px rgba(0, 0, 0, 0.25);
border-radius: 10px;
padding: 25px 35px;
display: flex;
align-items: center;
gap: 30px;
}
.card-icon {
width: 113px;
height: 113px;
flex-shrink: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.card-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.card-text h3 {
font-size: 26px;
font-weight: 700;
color: #192954;
letter-spacing: 0;
margin-bottom: 10px;
}
.card-text p {
font-size: 17px;
font-weight: 500;
color: #4F4B4C;
line-height: 21px;
}
/* Custom Dividers */
.section-divider {
position: relative;
width: 100%;
height: 17px;
display: flex;
align-items: center;
justify-content: center;
margin: 30px 0;
z-index: 25;
/* Top level */
}
.divider-line {
flex: 1;
height: 2px;
background: rgba(79, 75, 76, 0.62);
}
.divider-hex {
width: 17px;
height: 17px;
background: rgba(25, 41, 84, 0.7);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
margin: 0 10px;
}
/* What We Stand For Section */
.values-section {
position: relative;
padding: 40px 0 50px;
/* Halved bottom padding from 100px */
background: #F4F4F4;
/* overflow: visible to allow background images to spill out */
}
.values-bg-images {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
/* Increased to be above section background */
}
/* ABOUT-4 (Left Side Background) */
.bg-about-4 {
position: absolute;
/* SIZE: */
width: 700px;
/* Increase for BIG, decrease for SMALL */
height: 500px;
/* POSITION: */
left: -120px;
/* Increase to move RIGHT, decrease to move LEFT */
top: 110px;
/* Increase to move DOWN, negative to move UP */
z-index: 1;
object-fit: contain;
}
/* ABOUT-5 (Right Side Background) */
.bg-about-5 {
position: absolute;
/* SIZE: */
width: 650px;
/* Increase for BIG, decrease for SMALL */
height: 700px;
/* POSITION: */
right: -216px;
/* Decrease to move LEFT, increase to move RIGHT */
top: -175px;
/* Increase to move DOWN, negative to move UP */
object-fit: contain;
}
.values-container {
position: relative;
z-index: 20;
/* Higher than background images */
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 60px;
}
.values-left {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.about-brand-logo {
width: 164px;
height: 158px;
margin-bottom: 30px;
mix-blend-mode: multiply;
}
.about-brand-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.values-left h2 {
font-size: 42px;
font-weight: 800;
color: #192954;
text-transform: uppercase;
letter-spacing: 0;
line-height: 1.2;
}
.values-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px 40px;
}
.value-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.value-icon {
width: 85px;
height: 85px;
flex-shrink: 0;
}
.value-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.value-text h3 {
font-size: 26px;
font-weight: 700;
color: #192954;
letter-spacing: 0;
text-transform: uppercase;
margin-bottom: 10px;
}
.value-text p {
font-size: 17px;
font-weight: 500;
color: #4F4B4C;
line-height: 21px;
}
.values-container {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 60px;
}
.values-left {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.about-brand-logo {
width: 164px;
height: 158px;
margin-bottom: 30px;
mix-blend-mode: multiply;
}
.about-brand-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.values-left h2 {
font-size: 42px;
font-weight: 800;
color: #192954;
text-transform: uppercase;
letter-spacing: 0;
line-height: 1.2;
}
.values-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px 40px;
}
.value-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.value-icon {
width: 85px;
height: 85px;
flex-shrink: 0;
}
.value-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.value-text h3 {
font-size: 26px;
font-weight: 700;
color: #192954;
letter-spacing: 0;
text-transform: uppercase;
margin-bottom: 10px;
}
.value-text p {
font-size: 17px;
font-weight: 500;
color: #4F4B4C;
line-height: 21px;
}
/* Stats Section */
.stats-section {
position: relative;
z-index: 30;
background-color: #192954;
min-height: 460px;
display: flex;
align-items: center;
padding: 60px 0;
color: var(--text-white);
overflow: hidden;
}
.stats-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('../images/minds/pattern.png');
background-repeat: repeat;
background-position: center;
background-size: 1600px;
opacity: 0.6;
z-index: 1;
}
.stats-container {
position: relative;
z-index: 2;
}
.stats-header {
font-size: 36px;
/* Slightly reduced for 460px height balance */
font-weight: 800;
text-align: center;
text-transform: uppercase;
letter-spacing: 0;
margin-bottom: 40px;
color: #FFFFFF;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.stat-item {
background: rgba(25, 41, 84, 0.45);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 30px 15px;
text-align: center;
backdrop-filter: blur(5px);
transition: transform 0.3s ease, background 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
/* Center Icons */
justify-content: center;
}
.stat-item:hover {
transform: translateY(-5px);
background: rgba(25, 41, 84, 0.6);
}
.stat-item img {
width: 75px;
height: 75px;
margin-bottom: 20px;
object-fit: contain;
}
.stat-number {
font-size: 40px;
font-weight: 800;
margin-bottom: 8px;
color: #FFFFFF;
display: block;
}
.stat-label {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0;
color: #FFFFFF;
/* Match number color */
line-height: 1.2;
}
/* Developments Section */
.developments-section {
padding: 100px 0;
background-color: var(--bg-light);
scroll-margin-top: 110px;
}
.section-header {
margin-bottom: 50px;
}
.section-subtitle {
font-size: 20px;
margin-top: 10px;
max-width: 600px;
}
.map-container {
display: flex;
gap: 0;
height: 583px;
position: relative;
background: var(--bg-white);
border-radius: var(--border-radius-large);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.project-list-sidebar {
width: 320px;
background: var(--bg-white);
padding: 40px;
border-right: 1px solid rgba(0, 0, 0, 0.05);
z-index: 2;
}
.project-list-sidebar h3 {
font-size: 14px;
letter-spacing: 0;
margin-bottom: 25px;
color: #000;
opacity: 0.8;
}
.location-group {
margin-bottom: 30px;
position: relative;
}
.location-group::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 1px;
background: rgba(0, 0, 0, 0.05);
}
.location-group:last-of-type::after {
display: none;
}
.location-group h4 {
font-size: 12px;
color: var(--text-body);
margin-bottom: 15px;
font-weight: 400;
}
.project-items li {
padding: 10px 15px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
border-radius: 5px;
transition: var(--transition-fast);
margin-bottom: 5px;
}
.project-items li img {
width: 12px;
opacity: 0.7;
}
.project-items li:hover {
background-color: var(--bg-light);
}
.project-items li.active {
background-color: var(--accent-soft);
color: var(--primary-dark);
}
.project-items li.active img {
opacity: 1;
}
.view-all-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--primary-dark);
color: var(--text-white);
padding: 12px 25px;
border-radius: 5px;
font-size: 12px;
margin-top: 40px;
width: 100%;
}
.map-bg {
flex: 1;
position: relative;
background: #eef2f3;
}
.map-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
}
.project-info-card {
position: absolute;
bottom: 30px;
right: 30px;
width: 411px;
height: 267px;
background: var(--bg-white);
border-radius: var(--border-radius);
display: flex;
overflow: hidden;
box-shadow: var(--shadow-card);
animation: zoomIn 0.5s ease;
}
.card-image {
width: 151px;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
margin: 15px;
width: calc(100% - 30px);
height: calc(100% - 30px);
}
.card-details {
padding: 25px 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.project-logo {
height: 38px;
width: auto;
object-fit: contain;
margin-bottom: 10px;
}
.card-details h3 {
font-size: 15px;
text-transform: uppercase;
color: var(--primary-dark);
margin-bottom: 5px;
}
.location {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-main);
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--accent-mid);
}
.card-details p {
font-size: 12px;
line-height: 1.4;
color: #000;
font-weight: 300;
margin-bottom: 15px;
}
.btn-small {
padding: 8px 15px;
font-size: 12px;
background: var(--primary-dark);
margin-top: auto;
align-self: flex-start;
}
/* Legacy Section */
.legacy-section {
padding: 100px 0;
}
.accent-line {
width: 85px;
height: 5px;
background-color: var(--text-main);
margin-bottom: 25px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.service-card {
background: #F3FBFF;
padding: 30px;
border-radius: var(--border-radius);
box-shadow: 0px 2px 13.4px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 20px;
}
.service-icon img {
width: 94px;
height: 94px;
}
.service-text h3 {
font-size: 20px;
margin-bottom: 10px;
color: var(--primary-dark);
}
.service-text p {
font-size: 20px;
color: var(--text-body);
}
.hexagon-large-container {
margin-top: 80px;
text-align: center;
}
.hexagon-building {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
/* Crafted Developments */
.crafted-developments {
padding: 100px 0;
background-color: var(--bg-light);
}
.projects-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 50px;
}
.featured-project {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
height: 100%;
}
.featured-project-overlay {
position: absolute;
bottom: 40px;
right: 40px;
width: 400px;
background: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(10px);
padding: 30px;
border-radius: 15px;
border: 1px solid rgba(94, 136, 236, 0.43);
}
.project-meta h3 {
font-size: 32px;
margin-bottom: 10px;
}
.project-meta p {
font-size: 18px;
margin-bottom: 25px;
}
.projects-slider {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
}
.projects-slider::-webkit-scrollbar {
display: none;
/* Chrome, Safari, Opera */
}
.slider-item {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
height: 250px;
min-width: 300px;
flex-shrink: 0;
}
.slider-overlay {
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(5px);
padding: 15px;
border-radius: 7px;
}
.slider-overlay h3 {
font-size: 20px;
margin-bottom: 5px;
}
.slider-controls {
display: flex;
gap: 15px;
margin-top: 30px;
justify-content: flex-end;
}
.slider-controls button {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--primary-dark);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-fast);
}
.slider-controls button:hover {
background: var(--primary-dark);
}
.slider-controls button:hover img {
filter: brightness(0) invert(1);
}
/* CTA Section */
.cta-section {
position: relative;
padding: 150px 0;
color: var(--text-white);
overflow: hidden;
}
.cta-bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: -1;
}
.cta-bg-overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(25, 41, 84, 0.85);
}
.cta-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.cta-title {
font-size: 42px;
color: var(--text-white);
margin-bottom: 30px;
}
.accent-line-light {
width: 85px;
height: 5px;
background-color: var(--accent-mid);
margin-bottom: 30px;
}
.cta-subtitle {
font-size: 26px;
line-height: 1.4;
}
.contact-form-card {
background: var(--bg-white);
padding: 50px;
border-radius: var(--border-radius-large);
color: var(--text-main);
box-shadow: var(--shadow-card);
}
.contact-form-card h3 {
text-align: center;
font-size: 33px;
margin-bottom: 10px;
}
.contact-form-card p {
text-align: center;
margin-bottom: 40px;
font-size: 18px;
}
.form-group {
position: relative;
margin-bottom: 20px;
}
.form-group img {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
opacity: 0.5;
}
.form-group textarea+img {
top: 25px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 15px 15px 15px 55px;
border: 1.5px solid #B0B0B0;
border-radius: var(--border-radius);
font-family: inherit;
font-size: 16px;
outline: none;
transition: var(--transition-fast);
}
.form-group input:focus,
.form-group textarea:focus {
border-color: var(--primary-dark);
}
/* Footer */
.site-footer {
background-color: #192954;
color: var(--text-white);
padding: 100px 0 30px;
}
.footer-container {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
gap: 50px;
padding-bottom: 80px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-logo {
height: 80px;
margin-bottom: 20px;
}
.tagline {
color: var(--accent-mid);
font-size: 22px;
margin-bottom: 15px;
}
.footer-col h3 {
color: var(--text-white);
margin-bottom: 30px;
font-size: 20px;
}
.footer-col ul li {
margin-bottom: 15px;
}
.footer-col ul li a {
color: rgba(255, 255, 255, 0.7);
}
.footer-col ul li a:hover {
color: var(--accent-light);
padding-left: 5px;
}
.contact-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.contact-item img {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.contact-item p {
font-size: 16px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.8);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
}
.bottom-left {
display: flex;
gap: 40px;
color: rgba(255, 255, 255, 0.6);
}
.social-links {
display: flex;
gap: 15px;
}
.social-links a {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-fast);
}
.social-links a img {
width: 20px;
}
.social-links a:hover {
background-color: var(--text-white);
}
.social-links a:hover img {
filter: brightness(0) invert(1);
}
/* Responsive Design */
@media (max-width: 1200px) {
:root {
--container-padding: 0 40px;
}
.hero-title {
font-size: 40px;
}
}
@media (max-width: 992px) {
.grid-2,
.cta-container {
grid-template-columns: 1fr;
gap: 50px;
}
.footer-container {
grid-template-columns: repeat(2, 1fr);
}
.hexagon-image {
order: -1;
margin: 0 auto;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Legacy Section */
.legacy-section {
position: relative;
padding: 90px 0;
background-color: #FFFFFF;
overflow: visible;
z-index: 50;
/* Must be > crafted-section(40) so .bg-legacy-building(60) shows above it */
}
.gradient-divider {
position: absolute;
left: 0;
width: 100%;
height: 24px;
z-index: 5;
}
.gradient-divider.top {
top: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.19) 0%, rgba(45, 83, 170, 0.19) 100%);
transform: scaleX(-1);
/* Swapped from bottom */
}
.gradient-divider.bottom {
bottom: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.19) 0%, rgba(45, 83, 170, 0.19) 100%);
/* Removed transform from here */
}
.legacy-container {
position: relative;
z-index: 10;
}
/* Background Decoration */
.bg-legacy-polygon {
position: absolute;
top: -85px;
right: -45px;
/* Adjusted position */
width: 450px;
/* Reduced size */
height: auto;
z-index: 1;
pointer-events: none;
opacity: 1;
/* Removed transparency to fix 'dull' look */
}
.bg-legacy-building {
position: absolute;
bottom: -240px;
top: 350px;
left: -45px;
width: 450px;
height: auto;
z-index: 60;
/* Raised above crafted-section (z-index:40) so building is never cropped */
pointer-events: none;
}
.legacy-layout {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
/* Slightly more room for the left side */
gap: 80px;
align-items: flex-start;
padding-left: 50px;
/* Offset for building overlap */
}
.legacy-content {
position: relative;
z-index: 30;
/* Keep text above everything */
padding-top: 40px;
}
.legacy-title {
font-size: 42px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
text-transform: uppercase;
color: #192954;
margin-bottom: 20px;
}
.legacy-accent {
width: 85px;
height: 5px;
background: #192954;
margin-bottom: 30px;
}
.legacy-description {
font-size: 20px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0;
color: #192954;
max-width: 400px;
}
/* Service Grid & Cards */
.legacy-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
position: relative;
z-index: 10;
}
.legacy-card {
background: #F3FBFF;
border-radius: 10px;
padding: 22px 20px;
/* Reduced padding for smaller height */
box-shadow: 0px 2px 13.4px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
gap: 12px;
/* Tightened gap */
transition: all 0.3s ease;
}
.legacy-card:hover {
transform: translateY(-8px);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
}
.card-icon {
width: 80px;
/* Slightly smaller icons */
height: 80px;
flex-shrink: 0;
}
.card-title {
font-size: 19px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0;
text-transform: uppercase;
color: #192954;
}
.card-line {
width: 100%;
height: 1px;
background: rgba(25, 41, 84, 0.7);
}
.card-desc {
font-size: 18px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0;
color: #192954;
}
/* Crafted Developments Section */
.crafted-section {
position: relative;
padding: 60px 0 80px 0;
background-color: #FFFFFF;
z-index: 40;
}
/* TOP ROW: 2-col grid  header left (420px) | big card right */
.crafted-top-row {
display: grid;
grid-template-columns: 420px 1fr;
gap: 60px;
align-items: start;
margin-bottom: 18px;
}
.crafted-header {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 132px;
/* Figma: title starts 132px below big card top */
position: relative;
z-index: 10;
}
.crafted-title {
font-size: 42px;
font-weight: 700;
line-height: 53px;
letter-spacing: 0;
color: #192954;
text-transform: uppercase;
margin-bottom: 10px;
}
.crafted-accent {
width: 85px;
height: 5px;
background: #192954;
margin-bottom: 20px;
}
.crafted-subtitle {
font-size: 20px;
font-weight: 500;
line-height: 25px;
letter-spacing: 0;
color: #192954;
max-width: 357px;
margin-bottom: 30px;
}
.btn-all-projects {
display: inline-block;
background: #192954;
color: #FFFFFF;
padding: 12px 25px;
border-radius: 5px;
font-size: 18px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-all-projects:hover {
background-color: #1a2a5a;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(25, 41, 84, 0.4);
}
/* ---- BIG CARD ---- */
.active-project {
position: relative;
width: 100%;
height: 475px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 4px 8.9px rgba(0, 0, 0, 0.25);
background: #FFFFFF url('../logo/logo-header.svg') no-repeat center;
background-size: 750px auto;
}
/* Glassmorphic info card  exact Figma: 399×313px, top-right */
.project-overlay {
position: absolute;
top: 20px;
right: 20px;
width: 399px;
height: 313px;
padding: 21px 21px 21px 21px;
background: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(94, 136, 236, 0.43);
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 5;
}
/* Frame 64 inner content: title, location, divider, desc */
.overlay-inner {
display: flex;
flex-direction: column;
gap: 0;
flex: 1;
min-height: 0;
}
.overlay-title {
font-size: 26px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
color: #192954;
text-transform: uppercase;
margin-bottom: 6px;
}
.overlay-loc {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 400;
color: #192954;
margin-bottom: 12px;
}
.overlay-loc img {
width: 15px !important;
height: 18px !important;
object-fit: contain !important;
position: static !important;
inset: auto !important;
flex-shrink: 0;
}
.overlay-divider {
width: 199px;
height: 1px;
background: rgba(25, 41, 84, 0.38);
border-radius: 100px;
margin-bottom: 15px;
flex-shrink: 0;
}
.overlay-desc {
font-size: 16px;
font-weight: 500;
line-height: 1.4;
color: #192954;
flex: 1;
overflow: hidden;
}
.btn-view-project {
display: block;
width: 100%;
background: #192954;
color: #FFFFFF;
text-align: center;
padding: 10px;
border-radius: 5px;
font-size: 18px;
font-weight: 400;
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.btn-view-project:hover {
background-color: #1a2a5a;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(25, 41, 84, 0.4);
}
/* ---- NAVIGATION  full-width, right-aligned ---- */
.projects-nav {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-bottom: 18px;
}
.nav-btn {
background: none;
border: none;
cursor: pointer;
transition: transform 0.2s;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.nav-btn:hover {
transform: translateY(-3px);
}
/* ---- SMALL CARDS GRID  full-width, 3 columns, ~411px each ---- */
.small-projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* ---- SLIDER ANIMATIONS ---- */
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeUpContent {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.slide-in-left {
animation: slideInLeft 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.slide-in-right {
animation: slideInRight 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.fade-up-content {
animation: fadeUpContent 0.9s cubic-bezier(0.23, 1, 0.32, 1) both;
animation-delay: 0.1s;
}
.small-card {
position: relative;
height: 231px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.42);
background: #FFFFFF url('../logo/logo-header.svg') no-repeat center;
background-size: 375px auto;
}
/* Glassmorphic info box  exact Figma: 225×125px, top-right */
/* Title at top:10px, Location at top:42px, Button at top:83px */
.small-overlay {
position: absolute;
top: 10px;
right: 12px;
width: 225px;
height: 125px;
background: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(94, 136, 236, 0.43);
border-radius: 7px;
padding: 0;
z-index: 5;
/* Use absolute children matching Figma exactly */
position: absolute;
}
.small-title {
position: absolute;
left: 13px;
top: 10px;
width: 191px;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
color: #192954;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.small-loc {
position: absolute;
left: 13px;
top: 40px;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 400;
color: #192954;
line-height: 18px;
}
.small-loc img {
width: 15px !important;
height: 18px !important;
object-fit: contain !important;
position: static !important;
inset: auto !important;
flex-shrink: 0;
}
.btn-view-project-small {
position: absolute;
left: 10px;
top: 83px;
width: 205px;
height: 29px;
display: flex;
align-items: center;
justify-content: center;
background: #192954;
color: #FFFFFF;
border-radius: 5px;
font-size: 15px;
font-weight: 400;
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
}
.btn-view-project-small:hover {
background-color: #1a2a5a;
transform: translateY(-2px) scale(1.02);
box-shadow: 0 4px 10px rgba(25, 41, 84, 0.3);
}
/* ---- ANIMATIONS  true fade, no blink ---- */
.project-fade-in {
animation: projectFade 0.5s ease forwards;
}
@keyframes projectFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ---- Responsive ---- */
@media (max-width: 1200px) {
.crafted-top-row {
grid-template-columns: 340px 1fr;
gap: 40px;
}
.crafted-header {
padding-top: 100px;
}
}
@media (max-width: 992px) {
.crafted-top-row {
grid-template-columns: 1fr;
}
.crafted-header {
padding-top: 40px;
order: 2;
}
.active-project {
order: 1;
}
.small-projects-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.small-projects-grid {
grid-template-columns: 1fr;
}
.project-overlay {
width: calc(100% - 30px);
top: 15px;
right: 15px;
}
.small-overlay {
width: 180px;
top: 10px;
right: 10px;
}
}
/* ================================================
SCROLL TO TOP BUTTON (HEXAGON GLASS)
================================================ */
.scroll-top-wrapper {
position: fixed;
bottom: 40px;
right: 40px;
width: 66px;
height: 66px;
z-index: 10001;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: translateY(30px) scale(0.5);
display: flex;
align-items: center;
justify-content: center;
}
.scroll-top-wrapper.show {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.progress-ring {
position: absolute;
top: 0;
left: 0;
}
.progress-ring__path {
transition: stroke-dashoffset 0.1s;
stroke: #192954;
stroke-linecap: round;
stroke-linejoin: round;
}
.scroll-top-btn {
position: relative;
width: 52px;
height: 52px;
background: rgba(25, 41, 84, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1.5px solid rgba(255, 255, 255, 0.3);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 32px rgba(25, 41, 84, 0.25);
transition: all 0.3s ease;
overflow: hidden;
}
/* Glossy Shine Effect */
.scroll-top-btn::after {
content: '';
position: absolute;
top: -50%;
left: -100%;
width: 50%;
height: 200%;
background: linear-gradient(to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.6) 50%,
rgba(255, 255, 255, 0) 100%);
transform: rotate(45deg);
transition: all 0.6s ease;
}
.scroll-top-wrapper:hover .scroll-top-btn::after {
left: 150%;
}
.scroll-top-wrapper:hover .scroll-top-btn {
background: rgba(25, 41, 84, 0.95);
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(25, 41, 84, 0.35);
border-color: rgba(255, 255, 255, 0.5);
}
.scroll-top-arrow {
width: 20px;
height: 20px;
transform: rotate(-90deg);
transition: transform 0.3s ease;
}
.scroll-top-arrow .arrow-hexagon {
fill: #8FCEF1;
/* Brand light blue */
transition: fill 0.3s ease;
}
.scroll-top-arrow .arrow-path {
fill: #192954;
/* Brand navy blue */
transition: fill 0.3s ease;
}
/* Dark Background Override (when overlapping dark sections like footer) */
.scroll-top-wrapper.dark-bg .progress-ring__path {
stroke: #8FCEF1;
/* Lighter brand color */
}
.scroll-top-wrapper.dark-bg .scroll-top-arrow .arrow-hexagon {
fill: #192954;
/* Brand navy blue */
}
.scroll-top-wrapper.dark-bg .scroll-top-arrow .arrow-path {
fill: #FFFFFF;
/* White arrow */
}
.scroll-top-wrapper.dark-bg .scroll-top-btn {
background: rgba(143, 206, 241, 0.8);
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 8px 32px rgba(143, 206, 241, 0.2);
}
.scroll-top-wrapper.dark-bg:hover .scroll-top-btn {
background: rgba(143, 206, 241, 0.95);
box-shadow: 0 15px 35px rgba(143, 206, 241, 0.35);
border-color: rgba(255, 255, 255, 0.5);
}
.scroll-top-wrapper:hover .scroll-top-arrow {
transform: rotate(-90deg) translateY(-3px);
}
@media (max-width: 768px) {
.scroll-top-wrapper {
bottom: 25px;
right: 25px;
width: 56px;
height: 56px;
}
.scroll-top-btn {
width: 44px;
height: 44px;
}
.progress-ring {
width: 56px;
height: 56px;
}
.progress-ring circle {
r: 24;
cx: 28;
cy: 28;
}
}
/* ================================================
BROCHURE MODAL POPUP
================================================ */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(25, 41, 84, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
z-index: 20000;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
padding: 20px;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.brochure-modal-card {
background: #FFFFFF;
border-radius: 20px;
width: 480px;
max-width: 100%;
padding: 50px 40px;
box-shadow: 0 25px 60px rgba(25, 41, 84, 0.3);
position: relative;
transform: translateY(40px) scale(0.95);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.active .brochure-modal-card {
transform: translateY(0) scale(1);
}
.modal-close {
position: absolute;
top: 20px;
right: 20px;
background: #F4F4F4;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
color: #192954;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.modal-close:hover {
background: #192954;
color: #FFFFFF;
}
.brochure-form h3 {
font-size: 32px;
font-weight: 800;
color: #192954;
text-align: center;
text-transform: uppercase;
letter-spacing: 0;
margin-bottom: 10px;
}
.brochure-form .form-heading-line {
width: 60px;
height: 3px;
background: #192954;
margin: 0 auto 20px auto;
}
.brochure-form p {
font-size: 18px;
font-weight: 500;
color: #4F4B4C;
text-align: center;
margin-bottom: 30px;
line-height: 1.4;
}
@media (max-width: 576px) {
.brochure-modal-card {
padding: 40px 25px;
}
.brochure-form h3 {
font-size: 26px;
}
}
/* ================================================
CTA SECTION  FIND YOUR PERFECT SPACE TODAY
================================================ */
.cta-section {
position: relative;
scroll-margin-top: 80px;
/* Account for sticky header height */
height: 814px;
/* Exact Figma section height */
overflow: hidden;
display: flex;
align-items: center;
}
/* Layer 1: BG image  img tag, same approach as hero (crisp, no blur) */
.cta-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
display: block !important;
max-width: none !important;
}
/* Desktop bg visible by default; mobile bg hidden on desktop */
.cta-bg-desktop {
display: block !important;
}
.cta-bg-mobile {
display: none !important;
}
/* Layer 2: Polygon connect.png  right side, above bg, below card */
.cta-polygon {
position: absolute;
right: -8%;
top: 175px;
height: auto;
width: 900px;
z-index: 1;
pointer-events: none;
display: block !important;
max-width: none !important;
}
/* Layer 3: Content container  text top-left, card right */
.cta-container {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 480px;
/* Updated to match new card width */
gap: 80px;
align-items: start;
width: 100%;
padding-top: 0;
margin-top: -80px;
/* Moved content significantly higher as requested */
}
/* LEFT  Text block, top-left anchored */
.cta-text {
display: flex;
flex-direction: column;
gap: 0;
}
.cta-title {
font-size: 38px;
font-weight: 800;
line-height: 48px;
letter-spacing: 0;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 18px;
}
.accent-line-light {
width: 85px;
height: 5px;
background: #8FCEF1;
margin-bottom: 24px;
border-radius: 3px;
}
.cta-subtitle {
font-size: 26px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0;
color: #FFFFFF;
}
.mobile-cta-subtitle {
display: none !important;
}
.desktop-cta-subtitle {
display: block !important;
}
/* RIGHT  White form card  exact Figma: 519×645px */
.contact-form-card {
background: #FFFFFF;
box-shadow: 0px 5px 10.6px rgba(25, 41, 84, 0.36);
border-radius: 20px;
/* Compressed dimensions for a smaller card */
padding: 40px 45px 35px 45px;
display: flex;
flex-direction: column;
gap: 0;
width: 480px;
box-sizing: border-box;
}
/* LET'S CONNECT  33px, 41px line-height, centered */
.form-heading {
font-size: 33px;
font-weight: 700;
line-height: 41px;
letter-spacing: 0;
text-transform: uppercase;
text-align: center;
color: #192954;
margin-bottom: 8px;
}
/* Divider  2px, full width */
.form-heading-line {
width: 100%;
height: 2px;
background: rgba(25, 41, 84, 0.7);
margin-bottom: 15px;
}
/* Subtitle  20px, centered, 50px height */
.form-subtext {
font-size: 20px;
font-weight: 500;
line-height: 25px;
letter-spacing: 0;
color: #192954;
text-align: center;
margin-bottom: 18px;
}
/* Form fields  Unified padding for perfect horizontal alignment (-------) */
.form-group {
display: flex;
align-items: center;
gap: 15px;
border: 1.5px solid #B0B0B0;
border-radius: 10px;
padding: 12px 20px;
/* Use vertical padding instead of height for centering */
margin-bottom: 15px;
box-sizing: border-box;
}
.form-group img {
width: 21px !important;
height: 21px !important;
object-fit: contain !important;
position: static !important;
inset: auto !important;
flex-shrink: 0;
opacity: 0.8;
transform: translateY(2px);
/* Nudge icons down to align with text baseline */
}
.form-group input,
.form-group textarea {
flex: 1;
border: none;
outline: none;
padding: 0;
background: transparent;
font-family: 'Mulish', sans-serif;
font-size: 20px;
font-weight: 500;
color: #7A7979;
resize: none;
line-height: 1.5;
/* Improved cursor visibility */
}
/* Email field  Using unified padding */
.fg-email {
padding: 15px 20px;
}
/* Message textarea  Top alignment for message box */
.fg-message {
padding: 15px 20px;
height: 110px;
align-items: flex-start;
margin-bottom: 12px;
}
.fg-message img {
margin-top: 4px;
/* Tiny adjustment to align with first line of text */
}
.fg-message textarea {
height: 100%;
}
.fg-message input,
.fg-message textarea {
line-height: 1.4;
/* Normal line height for multiline text */
padding-top: 2px;
}
/* Button  Figma: 54px, 20px font, padding 15px 10px */
.btn-consult {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 54px;
padding: 15px 10px;
background: #192954;
color: #FFFFFF;
border: none;
border-radius: 5px;
font-family: 'Mulish', sans-serif;
font-size: 20px;
font-weight: 400;
cursor: pointer;
transition: 0.3s;
box-sizing: border-box;
}
.btn-consult:hover {
background: #1a2a5a;
transform: translateY(-3px) scale(1.02);
box-shadow: 0 10px 20px rgba(25, 41, 84, 0.25);
}
/* Responsive */
@media (max-width: 1300px) {
.cta-container {
grid-template-columns: 1fr 480px;
gap: 50px;
}
.contact-form-card {
width: 480px;
padding: 40px 40px 38px 40px;
}
}
@media (max-width: 1050px) {
.cta-section {
height: auto;
padding: 60px 0;
}
.cta-container {
grid-template-columns: 1fr;
padding-top: 0;
align-items: start;
}
.contact-form-card {
width: 100%;
}
.cta-polygon {
opacity: 0.4;
}
}
/* ================================================
FOOTER SECTION  REFINED AS PER FIGMA
================================================ */
.site-footer {
background: #192954;
padding: 80px 0 60px 0;
min-height: 562px;
/* Fixed height target from Figma */
color: #FFFFFF;
font-family: 'Mulish', sans-serif;
position: relative;
overflow: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.site-footer .container {
max-width: 1360px;
/* Increased for wider distribution */
padding: 0 40px;
/* Reduced from 80px to spread content to edges */
}
.footer-container {
display: grid;
grid-template-columns: 320px 243px 243px 243px;
/* Slightly wider logo col */
gap: 40px;
justify-content: space-between;
margin-bottom: 0;
}
/* Col 1: Brand */
.brand-col {
display: flex;
flex-direction: column;
gap: 15px;
transform: translateX(-40px);
/* Shifted left as per request */
}
.footer-logo {
width: 250px;
height: auto;
margin-bottom: 10px;
}
.footer-tagline {
font-size: 22px;
font-weight: 400;
line-height: 1.2;
color: #8FCEF1;
text-transform: none;
letter-spacing: 0;
margin-top: 35px;
/* Moved lower as per request */
}
.footer-desc {
font-size: 20px;
font-weight: 400;
line-height: 1.2;
color: #FFFFFF;
}
/* Links & Projects Columns */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
transform: translateX(-40px);
/* Shifted left as per request */
}
.footer-links li {
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-links li a {
color: #FFFFFF;
text-decoration: none;
font-size: 20px;
font-weight: 400;
line-height: 1.2;
padding: 8px 0;
/* Reduced for tighter navigation gaps */
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
transition: 0.3s;
}
.footer-arrow {
width: 32px !important;
/* Increased for better visibility */
height: auto !important;
object-fit: contain !important;
position: static !important;
inset: auto !important;
transition: transform 0.3s, filter 0.3s;
background: none !important;
/* Ensure no hexagon/bg shape */
border: none !important;
padding: 0 !important;
}
.footer-links li a:hover .footer-arrow {
transform: translateX(5px);
}
.footer-links li a:hover {
color: #8FCEF1;
}
.link-divider {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.4);
}
/* Contact Column */
.contact-items {
display: flex;
flex-direction: column;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 8px 0;
}
.contact-items .contact-item:last-child {
padding-bottom: 0;
/* Remove bottom padding from last item to minimize gap to divider */
}
.contact-icon {
width: 28px !important;
height: 28px !important;
object-fit: contain !important;
position: static !important;
inset: auto !important;
flex-shrink: 0;
transition: 0.3s ease;
}
.loc-icon {
width: 36px !important;
/* Specifically enlarged location icon for better visibility */
height: 36px !important;
}
/* Removed specific loc-icon override to ensure same size as others */
.contact-item p {
font-size: 18px;
font-weight: 400;
line-height: 1.4;
color: #FFFFFF;
margin: 0;
transition: 0.3s ease;
}
.contact-item p a {
color: inherit;
text-decoration: none;
transition: 0.3s ease;
}
.contact-item p a:hover {
color: #8FCEF1;
}
.contact-item {
cursor: pointer;
}
.contact-item:hover .contact-icon {
transform: scale(1.2);
filter: drop-shadow(0 0 5px rgba(143, 206, 241, 0.5));
}
.contact-item:hover p {
color: #8FCEF1;
}
.contact-divider {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.4);
}
/* Footer Bottom divider */
.footer-bottom-line {
display: block;
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.32);
margin-bottom: 20px;
/* Reduced from 35px to decrease gap below divider */
}
.footer-bottom-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 62px;
/* Figma gap between major groups */
}
.footer-bottom-left {
display: flex;
align-items: center;
gap: 40px;
/* Figma gap between Copyright and Privacy */
}
.footer-legal-links {
display: flex;
align-items: flex-start;
gap: 40px;
}
.legal-column {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-sub-link {
font-size: 15px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
line-height: 1.2;
}
.footer-sub-link:hover {
color: #FFFFFF;
text-decoration: underline;
}
.copyright,
.credits,
.credits a {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #FFFFFF;
text-decoration: none;
margin: 0;
white-space: nowrap;
}
.credits a:hover {
text-decoration: underline;
}
.social-links {
display: flex;
gap: 17px;
align-items: center;
flex-shrink: 0;
}
.social-links a {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s, filter 0.3s;
backface-visibility: hidden;
transform: translateZ(0);
/* Hardware acceleration to prevent blur */
}
.social-links img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
position: static !important;
inset: auto !important;
image-rendering: -webkit-optimize-contrast;
/* Better sharpness */
transition: filter 0.3s ease;
}
.social-links a:hover {
transform: translateY(-5px) scale(1.1) translateZ(0);
}
.social-links a:hover img {
/* Filter to change white icon to #8FCEF1 (Light Blue) */
filter: invert(85%) sepia(21%) saturate(762%) hue-rotate(178deg) brightness(97%) contrast(96%);
}
/* Footer Responsive */
@media (max-width: 1200px) {
.footer-container {
grid-template-columns: repeat(2, 1fr);
gap: 60px 40px;
}
}
@media (max-width: 1050px) {
.footer-bottom-row {
flex-wrap: wrap;
justify-content: center;
text-align: center;
gap: 20px;
}
}
@media (max-width: 768px) {
.footer-container {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-bottom-row {
flex-direction: column;
gap: 20px;
text-align: center;
}
.social-links {
justify-content: center;
}
}
/* ============================================= */
@media (max-width: 1400px) {
.bg-legacy-building {
left: -320px;
width: 600px;
}
}
@media (max-width: 1200px) {
.legacy-layout {
gap: 40px;
padding-left: 0;
}
.bg-legacy-building {
display: none;
}
}
@media (max-width: 768px) {
:root {
--container-padding: 0 20px;
}
.hamburger {
display: flex;
}
.nav-menu {
position: fixed;
top: 84px;
left: -100%;
width: 100%;
height: calc(100vh - 84px);
background: var(--primary-dark);
transition: 0.4s;
padding: 40px;
}
.nav-menu.active {
left: 0;
}
.nav-menu ul {
flex-direction: column;
gap: 30px;
text-align: center;
}
.nav-link {
font-size: 20px;
}
.cta-button {
display: none;
}
.hero {
height: auto;
padding-top: 100px;
padding-bottom: 0;
display: flex;
flex-direction: column;
background: #192954;
}
.hero-container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
padding-top: 40px;
padding-bottom: 20px;
}
.hero-bg-wrapper {
position: relative;
width: 100%;
height: auto;
min-height: 400px;
order: 2;
}
.hero-bg-wrapper::after {
display: none;
/* No gradient on mobile image */
}
.hero-image {
height: 100%;
object-position: center;
}
.hero-content {
margin-left: 0;
text-align: center;
width: 100%;
}
.hero-title {
font-size: 32px;
margin-bottom: 20px;
}
.hero-subtitle {
font-size: 18px;
margin-bottom: 30px;
line-height: 1.4;
max-width: 100%;
}
.hero-btns {
flex-direction: row;
justify-content: center;
gap: 15px;
}
.btn-hero {
width: 160px;
height: 48px;
font-size: 14px;
}
.section-title-large {
font-size: 32px;
}
.values-grid {
grid-template-columns: 1fr;
}
.projects-showcase {
grid-template-columns: 1fr;
}
.featured-project-overlay {
width: calc(100% - 40px);
right: 20px;
bottom: 20px;
}
.projects-slider {
grid-template-columns: 1fr;
}
.cta-container {
grid-template-columns: 1fr;
padding-top: 0;
align-items: start;
}
}
/* ================================================
DEVELOPMENTS MAP SECTION — PREMIUM SAAS STYLE
================================================ */
.developments-section {
padding: 100px 0;
background-color: #F8FAFC;
position: relative;
z-index: 10;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
}
.header-text-group {
max-width: 800px;
}
.map-header-logo {
width: 140px;
height: auto;
opacity: 0.9;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.05));
}
.map-wrapper {
display: flex;
background: #FFFFFF;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
height: 600px;
border: 1px solid rgba(0, 0, 0, 0.05);
position: relative;
}
.project-sidebar {
width: 320px;
display: flex;
flex-direction: column;
background: #FFFFFF;
border-right: 1px solid #EDF2F7;
z-index: 100;
flex-shrink: 0;
}
.sidebar-header {
padding: 30px;
border-bottom: 1px solid #EDF2F7;
}
.sidebar-header h3 {
font-size: 14px;
font-weight: 800;
letter-spacing: 0;
color: #192954;
text-transform: uppercase;
}
.sidebar-scrollable {
flex: 1;
overflow-y: auto;
padding: 20px 0;
}
.location-cluster {
margin-bottom: 0;
}
.location-cluster h4 {
display: none;
}
.project-list {
list-style: none;
padding: 0;
margin: 0;
}
.project-item {
padding: 14px 30px;
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
font-weight: 600;
color: #192954;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.project-item:hover {
background: #F1F5F9;
color: #192954;
padding-left: 40px;
box-shadow: inset 4px 0 0 #192954;
}
.project-item.active {
background: #F1F5F9;
color: #192954;
}
.project-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #192954;
}
.marker-dot {
width: 8px;
height: 8px;
background: #CBD5E1;
border-radius: 50%;
transition: all 0.3s ease;
}
.project-item.active .marker-dot {
background: #192954;
transform: scale(1.3);
box-shadow: 0 0 10px rgba(45, 83, 170, 0.3);
}
.sidebar-footer {
padding: 25px 30px;
border-top: 1px solid #EDF2F7;
background: #F8FAFC;
}
.btn-view-all {
font-size: 14px;
font-weight: 700;
color: #192954;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.2s ease;
}
.btn-view-all:hover {
color: #192954;
transform: translateX(10px) scale(1.02);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.map-view-container {
flex: 1;
z-index: 1;
background: #F1F5F9;
}
.leaflet-container {
background: #F8FAFC !important;
}
/* Google Maps style zoom controls */
.leaflet-control-zoom {
border: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
margin-right: 20px !important;
margin-bottom: 20px !important;
}
.leaflet-control-zoom a {
background-color: #FFFFFF !important;
color: #192954 !important;
width: 40px !important;
height: 40px !important;
line-height: 40px !important;
font-size: 20px !important;
border-bottom: 1px solid #F1F5F9 !important;
transition: all 0.2s ease !important;
}
.leaflet-control-zoom a:hover {
background-color: #F8FAFC !important;
color: #192954 !important;
}
.leaflet-popup-tip-container {
display: none;
}
.premium-popup .leaflet-popup-content-wrapper {
position: relative;
padding: 0 !important;
border-radius: 16px !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
overflow: visible !important;
background: #FFFFFF;
}
/* Custom Dotted Line Connector */
.premium-popup .leaflet-popup-content-wrapper::after {
content: '';
position: absolute;
bottom: -40px;
left: 50%;
width: 2px;
height: 40px;
border-left: 2px dashed #192954;
transform: translateX(-50%);
opacity: 0.8;
}
.premium-popup .leaflet-popup-content {
margin: 0 !important;
width: 320px !important;
}
/* Ensure inner content stays rounded despite wrapper's overflow:visible */
.map-popup-card {
border-radius: 16px;
overflow: hidden;
}
.marker-container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
transition: all 0.3s ease;
}
/* Alternating Labels to avoid overlap */
.marker-container.label-right .marker-label {
position: absolute;
bottom: 20px;
left: 10px;
}
.marker-container.label-left .marker-label {
position: absolute;
bottom: 20px;
right: 10px;
}
.marker-label {
background: #FFFFFF;
padding: 8px 16px;
border-radius: 50px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
white-space: nowrap;
border: 1px solid rgba(25, 41, 84, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 5;
}
.marker-label img {
height: 18px;
width: auto;
}
.marker-label span {
font-size: 13px;
font-weight: 700;
color: #192954;
text-transform: uppercase;
letter-spacing: 0;
}
.marker-container.active .marker-label {
background: #192954;
color: #FFFFFF;
border-color: #192954;
}
.marker-container.active .marker-label span {
color: #FFFFFF;
}
.hexagon-pin {
width: 28px;
height: 32px;
background-color: #192954;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.hexagon-pin::after {
content: '';
width: 6px;
height: 6px;
background: #FFFFFF;
border-radius: 50%;
}
.marker-container.active .hexagon-pin {
background-color: #192954;
transform: scale(1.1);
}
.leaflet-popup-content {
margin: 0 !important;
width: 320px !important;
}
.custom-marker {
display: flex;
align-items: center;
justify-content: center;
}
.map-popup-card {
display: flex;
flex-direction: column;
}
.popup-image {
width: 100%;
height: 140px;
object-fit: cover;
object-position: top;
}
.popup-details {
padding: 18px 20px;
background: #FFFFFF;
}
.popup-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.popup-logo {
height: 28px;
width: auto;
}
.popup-details h3 {
font-size: 20px;
font-weight: 800;
color: #192954;
margin: 0;
text-transform: uppercase;
letter-spacing: 0;
}
.popup-location {
font-size: 14px;
font-weight: 600;
color: #192954;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 6px;
}
.popup-desc {
font-size: 14px;
line-height: 1.6;
color: #192954;
margin-bottom: 24px;
}
.btn-popup {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px;
background: #192954;
color: #FFFFFF;
text-decoration: none;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
transition: all 0.3s ease;
}
.btn-popup:hover {
background: #1a2a5a;
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 20px rgba(45, 83, 170, 0.4);
}
/* Desktop Hiding - will be overridden in media query below */
.mobile-item-content {
display: none;
}
@media (max-width: 992px) {
.section-header {
flex-direction: column;
text-align: center;
gap: 30px;
margin-bottom: 40px;
}
.header-text-group {
max-width: 100%;
}
.map-wrapper {
flex-direction: column-reverse;
/* Map on top, Sidebar below */
height: auto;
border-radius: 0;
background: transparent;
box-shadow: none;
border: none;
overflow: visible;
/* Don't clip the overlapping sidebar */
}
.map-view-container {
height: 700px;
width: 100%;
border-radius: 20px;
overflow: hidden;
z-index: 5;
margin-bottom: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
flex: none;
/* Prevent collapse in flex-auto parent */
}
.premium-popup .leaflet-popup-content {
width: 280px !important;
}
.premium-popup .leaflet-popup-content-wrapper::after {
display: none;
/* Hide dotted connector on mobile to save space */
}
.popup-image {
height: 100px;
/* Even shorter image in popup on mobile for better centering */
}
.popup-details {
padding: 12px 15px;
}
.popup-details h3 {
font-size: 16px;
}
.popup-desc {
font-size: 13px;
margin-bottom: 15px;
}
.btn-popup {
padding: 10px;
font-size: 14px;
}
.project-sidebar {
width: 100%;
height: auto;
max-height: 600px;
border-right: none;
border-radius: 24px 24px 0 0;
background: #FFFFFF;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
z-index: 10;
position: relative;
padding-top: 15px;
/* Extra space for the handle */
}
.sidebar-header {
padding: 35px 24px 10px 24px;
/* Slightly compacted */
border-bottom: none;
position: relative;
}
.sidebar-header::before {
content: '';
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 45px;
height: 4px;
background: #E2E8F0;
border-radius: 2px;
}
.sidebar-header h3 {
font-size: 18px;
font-weight: 700;
letter-spacing: 0;
color: #192954;
text-transform: none;
}
.sidebar-scrollable {
padding: 0 20px;
max-height: 450px;
}
.location-cluster h4 {
display: none;
}
.project-item {
padding: 15px 0;
border-bottom: 1px solid #F1F5F9;
flex-direction: column;
align-items: stretch;
gap: 0;
background: transparent !important;
}
.project-item::before {
display: none !important;
}
.project-item .marker-dot,
.project-item .item-text-desktop {
display: none;
}
/* Mobile Content Structure */
.mobile-item-content {
display: block;
}
.item-flex {
display: flex;
align-items: center;
gap: 15px;
width: 100%;
}
.item-thumb {
width: 45px;
height: 45px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.item-info {
flex: 1;
}
.item-title {
font-size: 14px;
font-weight: 700;
color: #192954;
margin-bottom: 1px;
text-transform: uppercase;
}
.item-loc {
font-size: 12px;
color: #192954;
display: flex;
align-items: center;
gap: 4px;
}
.item-loc svg {
width: 10px;
height: 12px;
opacity: 0.7;
}
.item-arrow {
color: #192954;
opacity: 0.6;
width: 16px;
height: 16px;
}
/* Active Item - Big Card Style (Compacted) */
.project-item.active .mobile-item-content {
background: #F8FBFF;
border: 1.5px solid #DCE7F5;
border-radius: 14px;
padding: 12px;
margin: 5px 0;
box-shadow: 0 8px 20px rgba(45, 83, 170, 0.06);
}
.project-item.active .item-flex {
margin-bottom: 12px;
}
.project-item.active .item-thumb {
width: 100px;
height: 100px;
border-radius: 10px;
}
.project-item.active .item-title {
font-size: 16px;
}
.project-item.active .item-arrow {
display: none;
}
.item-active-extra {
display: none;
}
.project-item.active .item-active-extra {
display: block;
}
.item-desc {
font-size: 12px;
line-height: 1.4;
color: #192954;
margin-bottom: 12px;
}
.btn-view-mobile {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 10px;
background: #192954;
color: #FFFFFF;
text-decoration: none;
border-radius: 6px;
font-size: 13px;
transition: 0.3s;
}
.btn-view-mobile:hover {
background: #1a2a5a;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(25, 41, 84, 0.4);
}
.sidebar-footer {
padding: 15px 20px;
background: #FFFFFF;
border-top: none;
}
.btn-view-all {
justify-content: center;
background: #F1F5F9;
padding: 12px;
border-radius: 8px;
color: #192954;
width: 100%;
font-size: 13px;
}
.map-view-container {
height: 450px;
border-radius: 20px;
overflow: hidden;
}
}
/* Utility for Mobile Line Breaks */
.mobile-br {
display: none;
}
/* Projects Page Specific Styles */
.projects-page-hero {
position: relative;
width: 100%;
min-height: 80vh;
display: flex;
align-items: center;
overflow: hidden;
}
.projects-page-hero .hero-bg-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
display: block !important;
}
.projects-page-hero .hero-bg-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(25, 41, 84, 0.6) 0%, rgba(25, 41, 84, 0.2) 100%);
z-index: 1;
}
.projects-page-hero .hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.projects-page-hero .hero-container {
position: relative;
z-index: 2;
padding-top: 100px;
display: flex;
justify-content: flex-end;
}
.projects-page-hero .hero-content {
max-width: 800px;
width: 100%;
}
.projects-hero-title {
font-size: 72px;
font-weight: 800;
line-height: 1;
color: #FFFFFF;
margin-bottom: 25px;
text-transform: uppercase;
}
.projects-hero-subtitle {
font-size: 20px;
font-weight: 500;
line-height: 1.4;
color: #FFFFFF;
margin-bottom: 40px;
}
.btn-schedule-visit {
background-color: var(--accent-light);
color: var(--primary-blue);
padding: 12px 30px;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: none;
animation: pulse 3s infinite;
text-decoration: none;
}
.btn-schedule-visit:hover {
background-color: var(--accent-mid);
color: var(--primary-blue);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 15px rgba(163, 211, 242, 0.4);
}
/* Counting Section (Gap Filler) */
.projects-gap-section {
display: flex;
justify-content: center;
gap: 40px;
padding: 100px 20px;
background: #F8FAFC;
position: relative;
overflow: hidden;
}
.projects-gap-section .bg-counting {
position: absolute;
width: 246px;
height: 350px;
left: -85px;
top: 50%;
transform: translateY(-45%);
z-index: 0;
}
.counting-box {
text-align: center;
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
background: #FFFFFF;
padding: 30px 20px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(25, 41, 84, 0.08);
z-index: 1;
width: 280px;
transition: transform 0.3s ease;
}
.counting-box:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 20px 40px rgba(25, 41, 84, 0.15);
}
.count-row {
display: flex;
align-items: baseline;
justify-content: center;
}
.count-number,
.count-suffix {
font-size: 48px;
font-weight: 800;
color: #192954;
line-height: 1.1;
}
.count-text {
font-size: 18px;
font-weight: 600;
color: #192954;
text-transform: uppercase;
letter-spacing: 0;
}
/* Detailed Projects Section */
.detailed-projects-section {
padding: 100px 0;
background: #F4F4F4;
position: relative;
}
.detailed-projects-section.pt-0 {
padding-top: 0;
}
.detailed-projects-section .bg-poly-left-1 {
position: absolute;
width: 273px;
height: 489px;
left: 0;
top: 0;
z-index: 0;
transform: translateY(350px);
}
.detailed-projects-section .bg-poly-right-1 {
position: absolute;
width: 489px;
height: 489px;
right: 0;
top: -50px;
z-index: 0;
}
.detailed-projects-section .bg-poly-right-2 {
position: absolute;
width: 273px;
height: 489px;
right: 0;
top: 0px;
z-index: 0;
transform: translateY(-180px);
}
.detailed-projects-section .bg-poly-left-2 {
position: absolute;
width: 273px;
height: 489px;
left: 0;
top: 0px;
z-index: 0;
}
.detailed-projects-section .bg-poly-right-bottom {
position: absolute;
width: 273px;
height: 489px;
right: 0;
bottom: 0;
z-index: 1;
transform: translateY(50px);
}
.watermark-title {
font-size: 80px;
font-weight: 800;
color: rgba(25, 41, 84, 0.15);
text-transform: uppercase;
line-height: 1;
margin: 20px 0 20px 0;
position: relative;
z-index: 10;
white-space: nowrap;
}
.detailed-projects-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
position: relative;
z-index: 2;
}
.detailed-project-card {
background: #FFFFFF;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: row;
align-items: center;
padding: 14px 14px 14px 14px;
gap: 25px;
height: 357px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.detailed-project-card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 28px rgba(25, 41, 84, 0.14);
}
.card-image-wrap {
width: 215px;
height: 328px;
flex-shrink: 0;
position: relative;
border-radius: 5px;
overflow: hidden;
}
.card-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.detailed-project-card:hover .card-image-wrap img {
transform: scale(1.08);
}
.card-content-wrap {
padding: 15px 15px 15px 0;
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
}
.detailed-card-title {
font-size: 26px;
font-weight: 700;
color: #192954;
text-transform: uppercase;
letter-spacing: 0;
margin-bottom: 5px;
}
.detailed-card-loc {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 500;
color: #192954;
margin-bottom: 20px;
}
.detailed-card-loc img {
width: 16px;
height: 16px;
opacity: 0.7;
}
.detailed-card-divider {
width: 100%;
height: 1px;
background: #E2E8F0;
margin-bottom: 20px;
}
.project-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 30px;
flex-grow: 1;
}
.meta-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
color: #192954;
}
.meta-item img {
width: 20px;
height: 20px;
}
.detailed-card-btns {
display: flex;
gap: 15px;
margin-top: auto;
}
.detailed-card-btns .btn {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
white-space: nowrap;
padding: 0 10px;
}
.btn-outline-dark {
border: 2px solid #192954;
color: #192954;
background: transparent;
}
.btn-outline-dark:hover {
background: #192954;
color: #FFFFFF;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(25, 41, 84, 0.3);
}
.btn-solid-dark {
background: #192954;
color: #FFFFFF;
flex: 1;
}
.btn-solid-dark:hover {
background: #192954;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(25, 41, 84, 0.3);
}
.btn-solid-gray {
background: #737987;
color: #FFFFFF;
flex: 1;
}
.btn-solid-gray:hover {
background: #5E6370;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(94, 99, 112, 0.3);
}
/* Projects Page CTA Section */
.projects-page-cta {
position: relative;
padding: 120px 0;
overflow: hidden;
}
.projects-page-cta .cta-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
display: block !important;
}
.projects-page-cta .cta-container {
position: relative;
z-index: 2;
}
.projects-page-cta .cta-text {
max-width: 600px;
}
.projects-cta-btns {
display: flex;
gap: 20px;
margin-top: 40px;
}
.btn-solid-light {
background: #FFFFFF;
color: #192954;
padding: 0 30px;
height: 48px;
border-radius: 4px;
display: inline-flex;
align-items: center;
font-weight: 700;
text-decoration: none;
}
.btn-solid-light:hover {
background: #FFFFFF;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.btn-outline-light {
background: transparent;
border: 2px solid #FFFFFF;
color: #FFFFFF;
padding: 0 30px;
height: 48px;
border-radius: 4px;
display: inline-flex;
align-items: center;
font-weight: 700;
text-decoration: none;
}
.btn-outline-light:hover {
background: #FFFFFF;
color: #192954;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
}
@media (max-width: 768px) {
/* Base Mobile Setup to Prevent Zoom-Out/Overflow Issues */
html,
body {
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
.container {
padding: 0 20px;
}
/* Fix all multi-column grids that cause horizontal overflow */
.about-container,
.values-container,
.legacy-layout,
.legacy-grid,
.crafted-top-row {
grid-template-columns: 1fr !important;
gap: 30px;
}
/* Prevent fixed-width elements from breaking layout */
.hexagon-image {
width: 100%;
max-width: 320px;
height: auto;
margin: 0 auto;
}
/* Hide decorative absolute backgrounds that overflow */
.bg-about-5,
.bg-about-4,
.bg-legacy-polygon,
.bg-legacy-building {
display: none;
}
/* Vision Cards Mobile Fix */
.vision-card {
flex-direction: column;
text-align: center;
padding: 25px 20px;
gap: 15px;
}
.card-icon {
margin: 0 auto;
}
/* Text Resizing to prevent horizontal stretch */
.vision-content h2,
.values-left h2,
.legacy-title,
.crafted-title {
font-size: 28px;
text-align: center;
}
.cta-text {
text-align: center;
}
.mobile-cta-subtitle {
display: block !important;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
margin-top: 15px;
}
.desktop-cta-subtitle {
display: none !important;
}
.accent-line-light {
width: 80%;
max-width: 320px;
margin: 0 auto 20px auto;
}
.contact-form-card {
text-align: center;
margin: 0 auto;
}
.legacy-accent {
margin: 0 auto 30px auto;
}
.legacy-description {
text-align: center;
margin: 0 auto;
}
.values-left {
align-items: center;
text-align: center;
}
.about-brand-logo {
margin: 0 auto 20px;
}
/* Crafted Developments Mobile Layout Fix */
.crafted-section .container {
display: flex;
flex-direction: column;
}
.crafted-top-row {
display: contents !important;
/* Unpack grid to reorder children */
}
.crafted-header {
order: 1;
align-items: center !important;
text-align: center;
padding-top: 0 !important;
}
.crafted-accent {
margin: 0 auto 20px auto;
}
.crafted-subtitle {
margin: 0 auto 30px auto;
}
.projects-nav {
order: 3;
justify-content: center;
margin: 20px 0 35px 0;
}
.active-project {
order: 2;
margin-top: 20px;
background-size: 200px auto !important;
height: 220px !important;
/* Exact wide rectangle aspect ratio like desktop */
}
.small-projects-grid {
order: 4;
grid-template-columns: 1fr;
gap: 20px;
}
.small-card {
height: 180px !important;
/* Exact wide rectangle aspect ratio */
background-size: 150px auto !important;
}
/* ---- BULLETPROOF MINIATURE MOBILE OVERLAYS ---- */
/* Big Card Overlay: Exact miniature replica of desktop design */
.project-overlay {
top: 10px !important;
right: 10px !important;
width: 175px !important;
/* Takes exactly ~50% of the card width like desktop */
height: auto !important;
/* Let it wrap content tightly to remove the empty gap */
padding: 10px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
}
.overlay-inner {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
flex: 1 !important;
overflow: hidden !important;
/* Prevent desc from pushing button out */
}
.overlay-desc,
.overlay-divider {
display: block !important;
}
.overlay-title {
position: static !important;
font-size: 13px !important;
margin-bottom: 2px !important;
line-height: 1.1 !important;
white-space: normal !important;
}
.overlay-loc {
position: static !important;
font-size: 9px !important;
margin-bottom: 5px !important;
}
.overlay-divider {
width: 100% !important;
margin-bottom: 5px !important;
}
.overlay-desc {
font-size: 9px !important;
line-height: 1.2 !important;
display: -webkit-box !important;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.btn-view-project {
position: static !important;
font-size: 11px !important;
padding: 6px !important;
width: 100% !important;
box-sizing: border-box !important;
margin-top: 5px !important;
}
/* Small Card Overlay: Exact miniature replica */
.small-overlay {
top: 8px !important;
right: 8px !important;
width: 160px !important;
/* Takes exactly ~50% of the card width */
height: auto !important;
min-height: 90px !important;
padding: 8px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
.small-title {
position: static !important;
font-size: 12px !important;
width: 100% !important;
margin: 0 0 4px 0 !important;
white-space: normal !important;
line-height: 1.1 !important;
}
.small-loc {
position: static !important;
font-size: 9px !important;
margin: 0 0 6px 0 !important;
}
.btn-view-project-small {
position: static !important;
font-size: 10px !important;
width: 100% !important;
height: auto !important;
padding: 5px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
.section-header {
flex-direction: column;
gap: 30px;
}
.map-header-logo {
width: 100px;
align-self: flex-start;
}
/* Header Mobile */
header {
height: 70px;
}
.logo img {
height: 45px;
}
.header-actions {
display: none !important;
}
.mobile-nav-item {
display: block;
}
.nav-menu {
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
top: 70px;
left: 0;
width: 100%;
height: calc(100vh - 70px);
background: rgba(25, 41, 84, 0.98);
backdrop-filter: blur(10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
z-index: 999;
max-height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease-in-out;
}
.nav-menu.active {
max-height: calc(100vh - 70px);
opacity: 1;
pointer-events: auto;
}
.nav-menu ul {
display: flex;
flex-direction: column;
gap: 35px;
width: 100%;
text-align: center;
margin-top: -50px;
/* Slight optical adjustment upwards */
}
.nav-link {
font-size: 20px;
font-weight: 500;
letter-spacing: 0;
}
.hamburger {
display: flex;
}
.mobile-br {
display: block;
}
/* Hero Mobile */
.hero {
height: 100vh;
margin-top: 0;
background-color: #192954;
display: flex;
align-items: flex-start;
padding-top: 90px;
overflow: hidden;
}
.hero-slide-bg {
display: block;
}
.hero-image {
object-fit: cover;
/* Better for mobile to avoid squishing */
}
.hero-container {
grid-template-columns: 1fr;
height: auto;
}
.hero-content {
grid-column: 1;
padding: 0;
text-align: center;
align-items: center;
width: 100%;
}
/* Mobile Slider Adjustments */
.hero-slider-nav {
display: none;
/* Hide arrows on mobile as per request */
}
.hero-slider-dots {
bottom: 30px;
}
.hero-slide {
padding-top: 90px;
align-items: flex-start;
}
.hero-slider-container {
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-title {
font-size: 23px;
line-height: 1.25;
margin-bottom: 25px;
padding: 0 5px;
letter-spacing: 0;
}
.hero-subtitle {
font-size: 16px;
line-height: 1.4;
margin-bottom: 35px;
padding: 0 15px;
font-weight: 500;
}
.hero-btns {
flex-direction: row;
width: 100%;
justify-content: center;
gap: 15px;
}
.btn-hero {
font-size: 14px;
height: 44px;
padding: 0;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
}
.btn-explore {
width: 150px;
background-color: #192954 !important;
}
.btn-schedule {
width: 150px;
border-radius: 4px;
}
/* CTA Section Mobile */
.cta-section {
padding: 90px 0 320px;
/* Compressed top, extended bottom so background guy is visible */
}
/* Hide desktop bg image and polygon on mobile */
.cta-bg-desktop,
.cta-polygon {
display: none !important;
}
/* Show mobile-specific bg image */
.cta-bg-mobile {
display: block !important;
}
.cta-container {
position: relative;
z-index: 2;
grid-template-columns: 1fr !important;
gap: 25px;
/* Compressed gap */
}
.cta-text {
text-align: center;
}
.cta-title {
font-size: 28px;
line-height: 1.3;
margin-bottom: 12px;
}
.mobile-cta-subtitle {
display: block !important;
font-size: 15px;
/* Slightly smaller to compress */
line-height: 1.4;
margin-top: 10px;
}
.desktop-cta-subtitle {
display: none !important;
}
.accent-line-light {
width: 80%;
max-width: 300px;
margin: 0 auto 15px auto;
/* Reduced margin */
}
.contact-form-card {
padding: 35px 20px;
}
/* Footer Mobile */
.site-footer {
padding: 60px 0 30px;
text-align: center;
}
.footer-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 45px;
padding-bottom: 40px;
align-items: start;
/* Forces columns to align at the top perfectly */
}
.brand-col {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
transform: none !important;
/* Reset desktop shift */
}
.links-col {
display: flex;
flex-direction: column;
align-items: center;
}
.footer-col h3 {
font-size: 18px;
margin-bottom: 20px;
}
.footer-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
/* Reset gap to rely on fixed row height */
transform: none !important;
/* Reset desktop shift */
width: 100%;
}
.footer-links li {
width: 100%;
}
.footer-links li a {
height: 70px;
/* Fixed height forces perfect row synchronization */
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
/* Fix squished text and arrow */
text-align: center;
padding: 0;
width: 100%;
}
.link-divider {
display: block;
/* Restore dividers for the grid look */
width: 100%;
}
.contact-col {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-items {
display: flex;
flex-direction: column;
align-items: flex-start;
/* Align all items to the left edge of this container */
width: 280px;
/* Fixed width to match the location text wrap */
margin: 0 auto;
/* Perfectly center this entire block on the screen */
gap: 25px;
}
.contact-item {
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 15px;
}
.contact-item .contact-icon {
width: 36px !important;
/* Force identical width for all icons */
height: 36px !important;
object-fit: contain !important;
object-position: center !important;
/* Center the icon within its fixed box */
}
.contact-item .contact-icon:not(.loc-icon) {
padding: 5px;
/* Visually shrinks the wider call/mail icons so they match the location pin's visual weight */
box-sizing: border-box;
}
.contact-divider {
display: none;
}
/* Footer Bottom Reordering */
.footer-bottom-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.social-links {
order: 1;
margin-bottom: 10px;
}
.footer-bottom-left {
order: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.footer-legal-links {
display: flex;
flex-direction: row;
justify-content: center;
gap: 30px;
text-align: left;
}
.legal-column {
display: flex;
flex-direction: column;
gap: 5px;
}
.copyright {
text-align: center;
white-space: normal;
}
.credits {
order: 3;
margin-top: 10px;
text-align: center;
white-space: normal;
}
/* Projects Page Mobile Overrides */
.projects-page-hero {
min-height: 60vh;
}
.projects-hero-title {
font-size: 36px;
}
.projects-hero-subtitle {
font-size: 16px;
}
.projects-gap-section {
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
gap: 8px;
padding: 40px 10px;
overflow-x: hidden;
}
.counting-box {
flex: 1;
width: auto;
min-width: 0;
padding: 15px 5px;
border-radius: 10px;
}
.count-number,
.count-suffix {
font-size: 24px !important;
}
.count-text {
font-size: 9px !important;
white-space: nowrap;
}
.watermark-title {
font-size: 40px;
white-space: normal;
margin: 0 0 20px 0;
}
.detailed-projects-grid {
grid-template-columns: 1fr;
}
.detailed-project-card {
flex-direction: row;
align-items: center;
gap: 12px;
padding: 10px;
background: #FFFFFF;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
height: auto;
}
.card-image-wrap {
width: 35%;
height: 180px;
border-radius: 8px;
flex-shrink: 0;
}
.card-content-wrap {
width: 65%;
padding: 0;
text-align: left;
display: flex;
flex-direction: column;
}
.detailed-card-title {
font-size: 18px !important;
margin-bottom: 4px !important;
text-align: left !important;
}
.detailed-card-loc {
font-size: 12px !important;
justify-content: flex-start !important;
margin-bottom: 8px !important;
gap: 5px !important;
}
.detailed-card-divider {
margin-bottom: 12px !important;
}
.project-meta-grid {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 8px 5px;
margin-bottom: 12px !important;
}
.meta-item {
font-size: 10px !important;
gap: 4px !important;
font-weight: 500 !important;
}
.meta-item img {
width: 14px !important;
height: 14px !important;
}
.detailed-card-btns {
display: flex !important;
flex-direction: row !important;
gap: 8px !important;
width: 100%;
margin-top: auto;
}
.detailed-card-btns .btn {
flex: 1;
height: 34px !important;
font-size: 11px !important;
padding: 0 !important;
border-radius: 4px !important;
}
.projects-cta-btns {
flex-direction: column;
}
.desktop-hero-bg,
.desktop-cta-bg {
display: none !important;
}
.mobile-hero-bg,
.mobile-cta-bg {
display: block !important;
}
.projects-page-hero {
min-height: 90vh;
display: flex;
align-items: flex-start;
padding-top: 120px;
}
.projects-page-hero .hero-container {
justify-content: center;
text-align: center;
padding-top: 0;
}
.projects-hero-title {
font-size: 32px !important;
}
.btn-schedule-visit {
padding: 0 40px !important;
width: auto;
min-width: 200px;
}
}
/* Slim Phone Fixes */
@media (max-width: 480px) {
.stats-header {
font-size: 24px !important;
line-height: 1.3 !important;
margin-bottom: 30px !important;
}
.stats-grid {
gap: 10px !important;
grid-template-columns: repeat(2, 1fr) !important;
}
.stat-item {
padding: 20px 8px !important;
}
.stat-number {
font-size: 28px !important;
margin-bottom: 5px !important;
}
.stat-label {
font-size: 11px !important;
}
.stat-item img {
width: 45px !important;
height: 45px !important;
margin-bottom: 12px !important;
}
}
.footer-iso-icons {
display: flex;
gap: 25px;
margin-top: 0px;
align-items: center;
justify-content: center;
width: 250px;
}
.footer-iso-icons .iso-img {
height: 100px;
width: auto;
object-fit: contain;
}
@media (max-width: 992px) {
.footer-iso-icons {
margin-top: 20px;
justify-content: center;
width: 250px;
}
.footer-iso-icons .iso-img {
height: 80px;
}
}