html{
scroll-behavior:smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
background: #f1f1f1;
color: #222;
}
header{
min-height:90vh;
display:flex;
align-items:center;
justify-content:center;
padding:60px;
}
.hero{
width:100%;
max-width:1400px;
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
}
@media (min-width: 1530px) and (max-width: 1749px) {
.hero {
transform: translateY(-65px);
padding: 60px;
}
}
@media (min-width: 1440px) and (max-width: 1529px) {
.hero {
transform: translateY(-65px);
padding: 80px;
}
}
@media (min-width: 1350px) and (max-width: 1439px) {
.hero {
transform: translateY(-65px);
padding: 50px;
}
}
@media (min-width: 1000px) and (max-width: 1349px) {
.hero {
transform: translateY(-45px);
padding: 40px;
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.hero {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
text-align: center;
}
}
@media (max-width: 767px) {
.hero {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
text-align: center;
}
}
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (aspect-ratio:1.6/1) {
.hero {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
text-align: center;
}
}
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.hero {
flex-direction:row;
margin-top:50px;
gap:50px;
}
}
@media (min-width: 1180px) and (max-width: 1279px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.hero {
margin-top:20px;
}
}
@media (min-width: 1280px) and (max-width: 1365px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.hero {
margin-top:0;
}
}
@media (min-width: 1366px) and (max-width:1399px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.hero {
margin-top:70px;
}
}
@media (min-width: 1750px) {
.hero {
margin-top:80px;
}
}
.hero-text{
flex:1;
}
.hero-image{
flex:1;
display:flex;
justify-content:center;
}
.hero-image img{
width:100%;
max-width:600px;
animation:float 6s ease-in-out infinite;
border-radius: 24px;
}
@media (min-width: 1350px) and (max-width: 1439px) {
.hero-image img {
max-width:500px;
}
}
@media (min-width: 1530px) and (max-width: 1749px) {
.hero-image img {
max-width:560px;
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.hero-image img {
max-width:410px;
}
}
@media (min-width: 800px) and (max-width: 819px) and (orientation: portrait) {
.hero-image img {
max-width:580px;
}
}
@media (min-width: 820px) and (max-width: 833px) and (orientation: portrait) {
.hero-image img {
max-width:550px;
}
}
@media (min-width: 834px) and (max-width: 1023px) and (orientation: portrait) {
.hero-image img {
max-width:500px;
}
}
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
.hero-image img {
max-width:650px;
}
}
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.hero-image img {
min-width:400px;
}
}
@media (min-width: 1280px) and (max-width: 1365px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.hero-image img {
max-width:500px;
}
}
@media (min-width: 1366px) and (max-width: 1399px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.hero-image img {
min-width:530px;
}
}
h1 {
font-size: 64px;
margin-bottom: 20px;
}
p {
font-size: 28px;
color: #666;
}
nav {
position: sticky;
top: 20px;
width: calc(100% - 80px);
max-width: 1400px;
margin: 0px auto;
padding: 18px 35px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255,255,255,.8);
backdrop-filter: blur(15px);
border-radius: 18px;
border: 1px solid rgba(0,0,0,.06);
z-index: 1000;
}
.logo{
font-size:28px;
font-weight:bold;
}
nav ul{
display:flex;
list-style:none;
gap:40px;
}
nav a{
text-decoration:none;
color:#333;
font-size:18px;
transition:.3s;
}
nav a:hover{
color:#888;
}
header{
min-height:85vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
}
.hero-text{
max-width:700px;
}
.hero-text h1{
font-size:84px;
}
@media (max-width: 767px) {
.hero-text h1 {
font-size:48px;
}
}
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.hero-text h1 {
font-size:72px;
}
}
@media (min-width: 1366px) and (max-width: 1399px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.hero-text h1 {
font-size:84px;
}
}
.hero-text p{
font-size:24px;
line-height:1.6;
margin-bottom:40px;
}
.button{
display:inline-block;
padding:18px 38px;
border-radius:999px;
background:#111;
color:white;
text-decoration:none;
font-weight:600;
transition:.3s;
box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.button:hover{
transform:translateY(-3px);
box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.featured{
background:#f7f7f7;
padding:120px 60px;
border-radius:40px;
max-width:1450px;
margin:80px auto;
}
@media (min-width: 800px) and (max-width: 819px) and (orientation: portrait) {
.featured {
margin-top:190px;
}
}
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
.featured {
margin-top:190px;
}
}
#models {
scroll-margin-top: 100px;
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
#models {
scroll-margin-top:130px;
}
}
@media (min-width: 800px) and (max-width: 819px) and (orientation: portrait) {
#models {
scroll-margin-top:230px;
}
}
@media (min-width: 834px) and (max-width: 1023px) and (orientation: portrait) {
#models {
scroll-margin-top:90px;
}
}
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
#models {
scroll-margin-top:270px;
}
}
@media (min-width: 1000px) and (max-width: 1349px) and (orientation: landscape) {
#models {
scroll-margin-top: 25px;
}
}
@media (min-width: 1350px) and (max-width: 1439px) {
#models {
scroll-margin-top: 0px;
}
}
@media (min-width: 1440px) and (max-width: 1529px) {
#models {
scroll-margin-top: 60px;
}
}
@media (min-width: 1530px) and (max-width: 1749px) {
#models {
scroll-margin-top: 25px;
}
}
@media (min-width: 1366px) and (max-width: 1399px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
#models {
scroll-margin-top: 110px;
}
}
.featured h2{
text-align:center;
font-size:48px;
margin-bottom:60px;
}
.model-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
gap:30px;
justify-items:center;
}
@media (max-width: 767px) {
.model-grid {
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.model-grid {
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:80px;
}
}
.model-card{
display:block;
text-decoration:none;
color:inherit;
background:white;
border-radius:25px;
padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
overflow:hidden;
text-align:center;
max-width:450px;
}
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
.model-card{
min-width:280px;
}
}
.model-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.12);
transform:scale(1.03);
}
.model-card img{
width:100%;
border-radius:18px;
margin-bottom:25px;
transition:.4s;
}
.model-card h3{
font-size:30px;
margin-bottom:15px;
}
.model-card a{
text-decoration:none;
color:black;
font-weight:600;
}
.logo{
font-size:28px;
font-weight:bold;
color:#222;
text-decoration:none;
}
@media (max-width: 767px) {
.logo {
font-size:24px;
}
}
.hero-image img{
transition:.4s;
}
.hero-image img:hover{
transform:translateY(-8px);
}
.product-hero{
max-width:1400px;
margin:-20px auto;
padding:60px;
display:flex;
align-items:center;
gap:80px;
}
@media (max-width: 767px) {
.product-hero {
display: flex;
flex-direction: column;
gap:70px;
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.product-hero {
display: flex;
flex-direction: column;
gap:70px;
}
}
@media (min-width: 1750px) {
.product-hero {
margin-top:60px;
}
}
.product-image{
flex:1;
}
.product-image img{
width:100%;
border-radius: 24px;
animation:float 6s ease-in-out infinite;
cursor:default;
}
@media (max-width: 767px) {
.product-image img{
min-width:300px;
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.product-image img{
max-width:430px;
}
}
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
.product-image img{
min-width:630px;
}
}
@media (min-width:1000px) and (max-width: 1349px) and (orientation: landscape) {
.product-image img{
max-width:500px;
margin-left:60px;
}
}
@media (min-width:1350px) and (max-width: 1439px) {
.product-image img{
max-width:480px;
margin-left:60px;
}
}
@media (min-width:1440px) and (max-width: 1529px) {
.product-image img{
max-width:580px;
margin-left:30px;
}
}
@media (min-width:1530px) and (max-width: 1749px) {
.product-image img{
max-width:550px;
margin-left:30px;
}
}
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.product-image img{
margin-left:0;
}
}
@media (min-width: 1112px) and (max-width: 1179px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.product-image img{
min-width:510px;
}
}
@media (min-width: 1366px) and (max-width: 1399px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.product-image img{
min-width:590px;
margin-top:30px;
}
}
.product-info{
flex:1;
}
.eyebrow {
color: #2e8b57;
}
.product-info h1{
font-size:64px;
margin-bottom:30px;
}
@media (max-width: 767px) {
.product-info h1{
font-size:48px;
text-align:center;
margin-bottom:15px;
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.product-info h1 {
text-align:center;
}
}
.product-info h2{
font-size:28px;
margin-bottom:30px;
font-style:italic;
}
@media (max-width: 767px) {
.product-info h2{
font-size:28px;
text-align:center;
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.product-info h2 {
text-align:center;
}
}
.product-info p{
margin-bottom:40px;
font-size:22px;
line-height:1.8;
text-align:left;
}
@media (max-width: 767px) {
.product-info p{
text-align:center;
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.product-info p {
text-align:center;
}
}
.download-buttons{
display:flex;
gap:16px;
flex-wrap:wrap;
}
@media (max-width: 767px) {
.download-buttons{
display:flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.download-buttons{
display:flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
}
.secondary{
background:#111;
color:#f1f1f1;
box-shadow:none;
}
.secondary:hover{
background:#111;
}
.video-section{
max-width:1200px;
margin:120px auto;
padding:0 40px;
}
.video-section h2{
text-align:center;
font-size:42px;
margin-bottom:40px;
}
.video-container{
aspect-ratio:16/9;
background:#ddd;
border-radius:24px;
overflow:hidden;
}
@media (max-width: 767px) {
.video-container{
aspect-ratio:9/16;
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.video-container{
aspect-ratio:9/16;
}
}
.about{
max-width:750px;
scroll-margin-top: 250px;
margin:200px auto;
padding:0 40px;
text-align:center;
}
.about h2{
font-size:48px;
margin-bottom:40px;
}
@media (max-width: 767px) {
.about h2 {
margin-left:-12px;
}
}
.about p{
font-size:22px;
line-height:1.9;
color:#555;
margin-bottom:25px;
}
@media (min-width: 1350px) and (max-width: 1439px) {
#about {
scroll-margin-top: 160px;
}
}
@media (min-width: 1000px) and (max-width: 1349px) {
#about {
scroll-margin-top: 160px;
}
}
@media (max-width: 767px) {
#about {
scroll-margin-top: 120px;
}
}
.contact{
max-width:750px;
scroll-margin-top: 250px;
margin:140px auto;
padding:0 40px 120px;
text-align:center;
}
.contact h2{
font-size:48px;
margin-bottom:30px;
}
.contact p{
font-size:22px;
color:#555;
margin-bottom:35px;
line-height:1.8;
}
.contact a{
font-size:24px;
text-decoration:none;
color:#111;
font-weight:600;
}
@media (max-width: 767px) {
.contact a {
font-size:20px;
}
}
.contact a:hover{
text-decoration:underline;
}
footer{
text-align:center;
padding:70px 40px;
border-top:1px solid #e8e8e8;
background:#fafafa;
}
footer h3{
font-size:28px;
margin-bottom:30px;
}
.footer-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;
margin-bottom:40px;
}
.footer-links a{
color:#555;
text-decoration:none;
font-size:18px;
transition:.3s;
}
.footer-links a:hover{
color:#111;
}
footer p{
color:#888;
font-size:15px;
}
.cta{
max-width:750px;
margin:120px auto;
padding:100px 40px;
text-align:center;
background:white;
border-radius:35px;
box-shadow:0 15px 40px rgba(0,0,0,.06);
transition:.35s;
cursor:pointer;
}
@media (max-width: 767px) {
.cta {
max-width: 340px;
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.cta{
max-width: 550px;
}
}
.cta-card:hover .cta{
transform:translateY(-10px);
box-shadow:0 25px 55px rgba(0,0,0,.12);
}
.cta-link{
display:inline-block;
margin-top:35px;
font-weight:600;
font-size:18px;
color:#111;
transition:.3s;
}
.cta-card:hover .cta-link{
transform:translateX(6px);
}
.cta-card{
display:block;
text-decoration:none;
color:inherit;
max-width:1000px;
margin:120px auto;
}
.cta h2{
font-size:48px;
margin-bottom:25px;
max-width: 800px;
}
@media (max-width: 767px) {
.cta h2 {
font-size:36px;
}
}
.cta p{
font-size:22px;
line-height:1.8;
color:#555;
max-width:700px;
margin:0 auto 45px;
}
@keyframes float{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-8px);
}
100%{
transform:translateY(0px);
}
}
.search-section{
max-width:700px;
margin:60px auto;
}
#search{
width:100%;
padding:22px 30px;
border:none;
border-radius:22px;
background:#f5f5f5;
font-size:20px;
outline:none;
}
.models-page-header{
max-width:900px;
margin:40px auto;
padding:0 40px;
text-align:center;
margin-bottom: 350px;
}
@media (min-width: 1350px) and (max-width: 1439px) {
.models-page-header {
transform: translateY(-40px);
}
}
@media (max-width: 767px) {
.models-page-header {
transform: translateY(-40px);
padding: 0 0px;
}
}
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.models-page-header {
transform: translateY(-40px);
}
}
@media (min-width: 1180px) and (max-width: 1279px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.models-page-header {
transform: translateY(0);
}
}
@media (min-width: 1112px) and (max-width: 1179px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.models-page-header {
transform: translateY(-20px);
}
}
@media (min-width: 1280px) and (max-width: 1365px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.models-page-header {
transform: translateY(-20px);
}
}
@media (min-width: 1366px) and (max-width: 1399px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.models-page-header {
transform: translateY(0);
}
}
.models-page-header h1{
font-size:60px;
margin-bottom:15px;
}
@media (max-width: 767px) {
.models-page-header h1{
font-size:48px;
}
}
.models-page-header p{
font-size:22px;
color:#666;
line-height:1.7;
margin-bottom:40px;
}
@media (max-width: 767px) {
.models-page-header p {
margin-bottom:30px;
}
}
.models-page-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,300px));
justify-items:center;
gap:35px;
max-width:1400px;
margin:40px auto 100px;
padding:0 40px;
margin-top:-350px;
}
@media (min-width: 1530px) and (max-width: 1749px) {
.models-page-grid {
margin-top:-330px;
}
}
@media (min-width: 1350px) and (max-width: 1439px) {
.models-page-grid {
gap: 20px;
padding-left: 20px;
padding-right: 20px;
margin:-400px auto 100px;
}
}
@media (min-width: 1000px) and (max-width: 1349px) {
.models-page-grid {
gap: 20px;
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
}
@media (max-width: 374px) {
.models-page-grid {
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
margin-top:-400px;
}
}
@media (min-width: 375px) and (max-width: 399px) {
.models-page-grid {
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
margin-top:-380px;
}
}
@media (min-width: 400px) and (max-width: 767px) {
.models-page-grid {
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}
}
@media (min-width: 768px) and (max-width: 1349px) and (orientation: portrait) {
.models-page-grid {
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
margin-top:-330px;
}
}
@media (min-width: 800px) and (max-width: 819px) and (orientation: portrait) {
.models-page-grid {
margin-top:-280px;
}
}
@media (min-width: 820px) and (max-width: 833px) and (orientation: portrait) {
.models-page-grid {
margin-top:-300px;
}
}
@media (min-width: 834px) and (max-width: 1023px) and (orientation: portrait) {
.models-page-grid {
margin-top:-310px;
}
}
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
.models-page-grid {
grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
margin-top:-330px;
}
}
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.models-page-grid {
margin-top:-390px;
}
}
@media (min-width: 1180px) and (max-width: 1279px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.models-page-grid {
margin-top:-310px;
}
}
@media (min-width: 1112px) and (max-width: 1179px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.models-page-grid {
margin-top:-360px;
}
}
@media (min-width: 1280px) and (max-width: 1365px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.models-page-grid {
margin-top:-350px;
}
}
@media (min-width: 1366px) and (max-width: 1399px) and (orientation: landscape) and (max-aspect-ratio:1.6/1) {
.models-page-grid {
margin-top:-310px;
}
}
@media (min-width: 1440px) and (max-width: 1529px) {
.models-page-grid {
margin-top:-330px;
}
}
@media (min-width: 1750px) {
.models-page-grid {
margin-top:-300px;
}
}
.view-all{
text-align:center;
margin-top:50px;
}
.view-all a{
font-size:22px;
text-decoration:none;
color:#111;
font-weight:600;
}
.view-all a:hover{
text-decoration:underline;
}
.explore-model-card{
display:block;
max-width:350px;
min-height:250px;
padding:35px;
text-align:center;
text-decoration:none;
color:#111;
background:#fafafa;
border-radius:30px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
}
.explore-model-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.explore-model-card img{
width:100%;
border-radius:18px;
margin-bottom:25px;
transition:.4s;
}
.explore-model-card h3{
font-size:30px;
margin-bottom:35px;
}
.explore-model-card span{
font-weight:600;
font-size:20px;
}
.nav-link{
color:#777;
transition:.3s;
}
.nav-link.active{
color:#111;
font-weight:600;
}
.menu-toggle {
display: none;
width: 40px;
height: 40px;
border: none;
background: transparent;
padding: 8px;
cursor: pointer;
position: relative;
}
.menu-toggle span {
display: block;
width: 24px;
height: 2px;
background: #111;
margin: 5px auto;
transition: transform 0.3s ease,
opacity 0.3s ease;
}
@media (max-width: 767px) {
.nav-links {
display: none !important;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
padding: 30px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.menu-toggle {
display:block;
}
.nav-links.mobile-open {
display: block !important;
}
.nav-links ul {
display: flex !important;
flex-direction: column !important;
align-items: center;
gap: 30px;
margin: 0;
padding: 0;
list-style: none;
}
.nav-links li {
margin: 0;
padding: 0;
}
}
.menu-toggle.menu-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.menu-toggle.menu-open span:nth-child(2) {
opacity: 0;
}
.menu-toggle.menu-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* =========================
ASSEMBLY INSTRUCTIONS
========================= */
.assembly-section {
max-width: 1100px;
margin: 100px auto;
padding: 0 30px;
}
.assembly-section h2 {
text-align: center;
margin-bottom: 70px;
font-size: 50px;
}
.assembly-step {
display: flex;
align-items: center;
gap: 70px;
margin-bottom: 90px;
}
.assembly-text,
.assembly-image {
flex: 1;
}
/* Instruction images */
.assembly-image img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 12px;
}
/* Alternate every second step */
.assembly-step:nth-child(even) {
flex-direction: row-reverse;
}
.assembly-text h3 {
margin-bottom: 12px;
font-size: 30px;
}
.assembly-text p {
line-height: 1.7;
}
@media (max-width: 767px) {
.assembly-section {
margin: 70px auto;
padding: 0 20px;
}
.assembly-section h2 {
margin-bottom: 45px;
}
.assembly-step,
.assembly-step:nth-child(even) {
flex-direction: column;
gap: 25px;
margin-bottom: 60px;
}
.assembly-text,
.assembly-image {
width: 100%;
}
}
.carousel {
display: flex;
flex-direction: column;
align-items: center;
}
.carousel-image-wrapper {
width: 100%;
overflow: hidden;
}
.carousel-image {
display: block;
width: 100%;
border-radius: 12px;
cursor: pointer;
}
.carousel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
margin-top: 14px;
}
.carousel-arrow {
border: none;
background: none;
font-size: 36px;
cursor: pointer;
padding: 4px 8px;
transition: transform 0.2s ease;
}
.carousel-arrow:hover {
transform: scale(1.2);
}
@keyframes slideFromRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideFromLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.slide-right {
animation: slideFromRight 0.4s ease;
}
.slide-left {
animation: slideFromLeft 0.4s ease;
}
.carousel-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 7px;
}
.carousel-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: transform 0.2s ease;
}
.carousel-dot.active {
background: #333;
transform: scale(1.25);
}
/* =========================
ASSEMBLY IMAGE LIGHTBOX
========================= */
.assembly-image img {
cursor: zoom-in;
}
/* Dark fullscreen background */
.image-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease;
z-index: 9999;
}
/* Open state */
.image-lightbox.active {
opacity: 1;
visibility: visible;
}
/* Enlarged image */
.lightbox-image {
max-width: 95vw;
max-height: 90vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 12px;
}
/* Close button */
.lightbox-close {
position: absolute;
top: 20px;
right: 25px;
border: none;
background: none;
color: white;
font-size: 42px;
font-weight: 300;
cursor: pointer;
line-height: 1;
transition: transform 0.2s ease;
}
.lightbox-close:hover {
transform: scale(1.15);
}