body {
border: none !important;
}
.video-wrapper {
height: 500px; 
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 12px;
margin-bottom: 20px;
background: #000; }
.video-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
background: transparent;
}
.hero-banner p {
font-size: 2rem; } .parallax-section {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
transform-style: preserve-3d;
perspective: 1px;
} .right-col .pin-wrap {
position: sticky;
top: 100px;
}
.image-sequence img {
display: block;
width: 100%;
height: 100vh;
object-fit: cover;
border-radius: 12px;
margin-bottom: 20px;
}
.text-col {
width: 40%;
background: white;
height: 100vh;
position: sticky;
top: 0;
padding: 40px;
box-sizing: border-box;
z-index: 1;
}
.right-col {
width: 60%;
}
@media (max-width: 1024px) {
.text-col,
.right-col {
width: 100% !important;
height: auto !important;
position: static !important;
order: unset !important;
}
.text-col {
padding: 30px !important;
}
.image-sequence img {
height: auto !important;
max-height: 70vh;
object-fit: contain;
}
}
@media (max-width: 768px) {
.text-col,
.right-col {
width: 100% !important;
height: auto !important;
position: static !important;
order: unset !important;
}
.text-col {
order: 1;
padding: 20px !important; max-height: 80vh;
overflow-y: auto;
}
.right-col {
order: 2;
}
.image-sequence img {
height: auto !important;
max-height: 60vh;
object-fit: contain;
}
}
.horizontal-scroll-section {
position: relative;
display: flex;
min-height: 100vh;
overflow: hidden;
}
.sticky-text {
width: 40%;
position: sticky;
top: 0;
height: 100vh;
padding: 50px;
background: white;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
}
.horizontal-images {
width: 60%;
height: 100vh;
position: relative;
overflow: hidden;
}
.image-track {
display: flex;
height: 100%;
will-change: transform;
}
.image-track img {
flex: 0 0 auto;
height: 100%;
width: auto;
margin-right: 20px;
object-fit: cover;
border-radius: 12px;
max-height: 40vh; max-width: 60vw; } @media (max-width: 768px) {
.video-wrapper {
height: 300px;
aspect-ratio: 4 / 3;
}
.horizontal-scroll-section {
flex-direction: column;
}
.sticky-text {
position: static;
width: 100%;
height: auto;
}
.horizontal-images {
width: 100%;
height: auto;
overflow-x: scroll;
}
.image-track {
flex-wrap: nowrap;
width: max-content;
}
.image-track img {
height: auto;
max-height: 60vh;
}
}
@media (max-width: 1440px) and (min-width: 1024px) {
.text-col {
max-height: 100vh;
overflow-y: auto;
padding-right: 20px; }
}
@media (max-width: 768px) {
.hero-banner {
height: auto !important;
min-height: 70vh; background-position: top;
padding: 40px 20px;
}
.hero-banner h1 {
font-size: 28px; }
.hero-banner p {
font-size: 14px; }
}
.custom-section {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: nowrap;
padding-bottom: 60px;
}
.text-col, .right-col {
width: 48%;
}