.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.about-video {
aspect-ratio: 16/9;
overflow: hidden;
border: 1px solid var(--border-color);
}
.about-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.feature-item {
padding: var(--space-xl);
background: #1D2531;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
}
.feature-item.visible {
transition: opacity 0.6s ease, transform 0.6s ease, border-color var(--transition-base);
}
.feature-item:hover {
border-color: var(--text-accent);
transform: translateY(-4px);
}
.feature-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--text-primary);
margin-bottom: var(--space-lg);
transition: transform var(--transition-base);
}
.feature-icon svg {
width: 24px;
height: 24px;
color: var(--text-primary);
}
.feature-title {
font-family: var(--font-display);
font-size: var(--font-size-xl);
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-sm);
transition: color var(--transition-base);
}
.feature-item:hover .feature-title {
color: var(--text-accent);
}
.feature-description {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
@media (max-width: 991px) {
.about-grid {
grid-template-columns: 1fr;
}
.features-grid {
grid-template-columns: 1fr;
}
} .about-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.about-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.about-hero-bg video {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(15, 22, 33, 0.6) 0%,
rgba(15, 22, 33, 0.4) 50%,
rgba(15, 22, 33, 0.7) 100%
);
}
.about-hero .container {
position: relative;
z-index: 2;
}
.about-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.about-hero-title {
font-family: var(--font-display);
font-size: clamp(4rem, 12vw, 10rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
line-height: 1;
margin-bottom: var(--space-lg);
color: var(--text-primary);
}
.about-hero-subtitle {
font-size: var(--font-size-lg);
color: var(--text-secondary);
margin-bottom: var(--space-2xl);
letter-spacing: var(--tracking-wide);
} .about-process-section {
padding: var(--space-4xl) 0;
}
.about-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-xl);
margin-bottom: var(--space-2xl);
}
.about-process-item {
text-align: center;
padding: var(--space-xl);
border: 1px solid var(--border-color);
transition: border-color var(--transition-base);
}
.about-process-item:hover {
border-color: var(--text-primary);
}
.about-process-number {
font-family: var(--font-display);
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--text-primary);
opacity: 0.3;
margin-bottom: var(--space-md);
transition: transform var(--transition-base), opacity var(--transition-base);
}
.about-process-title {
font-family: var(--font-display);
font-size: var(--font-size-lg);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
.about-process-description {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.about-process-link {
text-align: center;
}
.about-process-link .btn-link {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
} .about-portfolio-section {
padding: var(--space-4xl) 0;
background: var(--bg-secondary);
}
.about-portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-2xl);
}
.about-portfolio-item {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
border: 1px solid var(--border-color);
cursor: pointer;
}
.about-portfolio-item video {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-base);
}
.about-portfolio-poster {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transition: opacity 0.5s ease, transform var(--transition-base);
}
.about-portfolio-item:hover video,
.about-portfolio-item:hover .about-portfolio-poster {
transform: scale(1.05);
}
.about-portfolio-item:hover .about-portfolio-poster {
opacity: 0;
}
.about-portfolio-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-lg);
background: linear-gradient(to top, rgba(15, 22, 33,0.8) 0%, transparent 100%);
opacity: 0;
transition: opacity var(--transition-base);
}
.about-portfolio-item:hover .about-portfolio-overlay {
opacity: 1;
}
.about-portfolio-label {
font-family: var(--font-display);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-primary);
}
.about-portfolio-link {
text-align: center;
}
.about-portfolio-link .btn-link {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
} .about-features-section {
padding-top: 0;
}
.about-features-section .section-title {
text-align: center;
margin-bottom: var(--space-3xl);
} .about-team-section {
padding: var(--space-4xl) 0;
}
.about-team-layout {
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.about-team-col {
padding: var(--space-xl);
}
.about-team-col-left,
.about-team-col-right {
display: flex;
flex-direction: column;
justify-content: center;
}
.about-team-col-center {
padding: 0;
}
.about-team-heading {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-primary);
margin-bottom: var(--space-lg);
line-height: 1.2;
}
.about-team-stat {
margin-bottom: var(--space-xl);
}
.about-team-stat-number {
display: block;
font-family: var(--font-display);
font-size: var(--font-size-4xl);
font-weight: 400;
color: var(--text-accent);
line-height: 1;
text-transform: uppercase;
}
.about-team-stat-label {
display: block;
font-size: var(--font-size-base);
color: var(--text-secondary);
margin-top: var(--space-xs);
}
.about-team-text {
font-size: var(--font-size-base);
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.about-team-text:last-child {
margin-bottom: 0;
}
.about-team-text strong {
color: var(--text-accent);
}
.about-team-content p {
font-size: var(--font-size-base);
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.about-team-content p:last-child {
margin-bottom: 0;
}
.about-team-content p>span {
margin-bottom: var(--space-sm);
display: inline-block;
}
.about-team-content p>span>strong {
display: block;
font-family: var(--font-display);
font-size: var(--font-size-4xl);
font-weight: 400;
color: var(--text-accent);
line-height: 1;
text-transform: uppercase;
}
.about-team-content .stat-label {
display: block;
font-size: var(--font-size-base);
color: var(--text-secondary);
margin-top: var(--space-xs);
}
.about-team-content strong {
color: var(--text-accent);
}
.about-team-video {
aspect-ratio: 9/16;
max-height: 500px;
margin: 0 auto;
overflow: hidden;
background: #1D2531;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
position: relative;
transition: border-color var(--transition-base), transform var(--transition-base);
}
.about-team-video:hover {
border-color: var(--text-accent);
transform: translateY(-4px);
}
.about-team-video video {
width: 100%;
height: 100%;
object-fit: cover;
} @media (max-width: 991px) {
.about-process-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-team-layout {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.about-team-col-left {
order: 1;
}
.about-team-col-center {
order: 2;
}
.about-team-col-right {
order: 3;
}
.about-team-video {
max-width: 300px;
}
}
@media (max-width: 767px) {
.about-process-grid {
grid-template-columns: 1fr;
}
.about-portfolio-grid {
grid-template-columns: 1fr;
}
.about-team-heading {
font-size: var(--font-size-xl);
}
.about-team-stat-number {
font-size: var(--font-size-3xl);
}
.about-team-content .stat-number {
font-size: var(--font-size-3xl);
}
.about-team-video {
max-width: 250px;
max-height: 400px;
}
}