/* Start custom CSS for html, class: .elementor-element-9bd3769 *//*=========================================
MOUNTAIN MOVES PORTFOLIO
PART 4A
=========================================*/
:root{
--primary:#6BBF3A;
--primary-dark:#4E9E2C;
--secondary:#A8FF60;
--bg:#0D0D0D;
--card:#171717;
--card2:#202020;
--white:#ffffff;
--text:#d9d9d9;
--muted:#888888;
--border:rgba(255,255,255,.08);
--radius:22px;
--shadow:0 18px 50px rgba(0,0,0,.45);
--transition:.35s ease;
}
/*=========================
RESET
=========================*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
background:var(--bg);
color:var(--text);
font-family:Inter,sans-serif;
line-height:1.7;
overflow-x:hidden;
}
img{
display:block;
width:100%;
height:auto;
}
a{
text-decoration:none;
color:inherit;
}
ul{
list-style:none;
}
/*=========================
CONTAINER
=========================*/
.container{
width:min(1280px,92%);
margin:auto;
}
/*=========================
COMMON SECTION
=========================*/
section{
padding:120px 0;
position:relative;
}
.section-title{
text-align:center;
max-width:760px;
margin:auto auto 70px;
}
.section-title span{
display:inline-block;
color:var(--primary);
font-size:.82rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:18px;
}
.section-title h2{
font-size:clamp(34px,5vw,56px);
font-weight:800;
color:#fff;
line-height:1.15;
margin-bottom:20px;
}
.section-title p{
color:#a8a8a8;
font-size:17px;
}
/*=========================
BUTTONS
=========================*/
.btn-primary,
.btn-secondary,
.mm-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 34px;
border-radius:999px;
font-weight:700;
transition:var(--transition);
}
.btn-primary,
.mm-btn{
background:var(--primary);
color:#111;
}
.btn-primary:hover,
.mm-btn:hover{
transform:translateY(-4px);
background:#84e64b;
}
.btn-secondary{
border:1px solid rgba(255,255,255,.15);
color:#fff;
}
.btn-secondary:hover{
background:#fff;
color:#111;
}
/*=================================
HERO
=================================*/
.mm-hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
padding:140px 0;
}
.mm-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(0,0,0,.25),
rgba(0,0,0,.80)
);
z-index:1;
}
.mm-hero .container{
position:relative;
z-index:5;
display:grid;
grid-template-columns:1.1fr 1fr;
gap:80px;
align-items:center;
}
.hero-badge{
display:inline-flex;
padding:10px 18px;
border-radius:999px;
background:rgba(107,191,58,.12);
border:1px solid rgba(107,191,58,.25);
color:var(--primary);
font-weight:700;
margin-bottom:28px;
}
.hero-content h1{
font-size:clamp(52px,7vw,92px);
font-weight:900;
line-height:1.02;
color:#fff;
margin-bottom:24px;
}
.hero-content h1 span{
color:var(--primary);
}
.hero-content p{
font-size:18px;
color:#bcbcbc;
max-width:620px;
margin-bottom:38px;
}
.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.hero-image{
position:relative;
z-index:5;
}
.hero-image img{
border-radius:28px;
box-shadow:var(--shadow);
}
.scroll-down{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
z-index:10;
}
.scroll-down span{
display:block;
width:30px;
height:48px;
border:2px solid rgba(255,255,255,.35);
border-radius:999px;
position:relative;
}
.scroll-down span::before{
content:"";
position:absolute;
left:50%;
top:10px;
transform:translateX(-50%);
width:6px;
height:6px;
background:#fff;
border-radius:50%;
animation:scrollMove 2s infinite;
}
@keyframes scrollMove{
0%{
opacity:0;
transform:translate(-50%,0);
}
40%{
opacity:1;
}
100%{
opacity:0;
transform:translate(-50%,18px);
}
}
/*=========================================
PROJECT OVERVIEW
=========================================*/
.mm-overview{
background:#111;
}
.overview-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:70px;
}
.overview-card{
background:var(--card);
border:1px solid var(--border);
padding:40px;
border-radius:var(--radius);
transition:var(--transition);
}
.overview-card:hover{
transform:translateY(-10px);
border-color:rgba(107,191,58,.45);
box-shadow:0 25px 45px rgba(0,0,0,.35);
}
.overview-card small{
display:block;
margin-bottom:18px;
letter-spacing:2px;
font-weight:700;
color:var(--primary);
text-transform:uppercase;
}
.overview-card h3{
font-size:22px;
line-height:1.5;
color:#fff;
}
/*=========================================
BRAND STORY
=========================================*/
.mm-story{
background:#0D0D0D;
}
.mm-story .container{
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:center;
}
.story-left span{
display:inline-block;
margin-bottom:18px;
font-weight:700;
letter-spacing:2px;
color:var(--primary);
text-transform:uppercase;
}
.story-left h2{
font-size:54px;
line-height:1.15;
color:#fff;
margin-bottom:30px;
}
.story-left p{
font-size:18px;
color:#b5b5b5;
}
.story-right img{
border-radius:28px;
box-shadow:var(--shadow);
transition:.45s;
}
.story-right img:hover{
transform:scale(1.03);
}
/*=========================================
BRAND IDENTITY
=========================================*/
.mm-identity{
background:#111;
}
.identity-content{
display:grid;
grid-template-columns:480px 1fr;
gap:70px;
align-items:center;
}
.identity-text span{
display:inline-block;
margin-bottom:18px;
letter-spacing:2px;
font-weight:700;
color:var(--primary);
text-transform:uppercase;
}
.identity-text h2{
font-size:50px;
line-height:1.15;
margin-bottom:28px;
color:#fff;
}
.identity-text p{
font-size:18px;
color:#b7b7b7;
margin-bottom:35px;
}
.identity-list{
display:grid;
grid-template-columns:1fr;
gap:18px;
}
.identity-list li{
padding:16px 22px;
background:#181818;
border-radius:14px;
border:1px solid var(--border);
font-weight:600;
transition:.3s;
}
.identity-list li:hover{
background:#1f1f1f;
border-color:rgba(107,191,58,.45);
padding-left:28px;
}
.identity-image img{
border-radius:26px;
box-shadow:var(--shadow);
transition:.4s;
}
.identity-image img:hover{
transform:scale(1.02);
}
/*=========================================
LOGO PRESENTATION
=========================================*/
.mm-logo{
background:#0D0D0D;
}
.logo-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:60px;
}
.logo-item{
overflow:hidden;
border-radius:22px;
background:#181818;
border:1px solid var(--border);
transition:.35s;
}
.logo-item img{
transition:.45s;
}
.logo-item:hover{
transform:translateY(-8px);
border-color:rgba(107,191,58,.45);
}
.logo-item:hover img{
transform:scale(1.04);
}
/*=========================================
VEHICLE BRANDING
=========================================*/
.mm-vehicle{
background:#111;
}
.vehicle-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
margin-top:70px;
}
.vehicle-card{
background:var(--card);
border:1px solid var(--border);
border-radius:24px;
overflow:hidden;
transition:var(--transition);
}
.vehicle-card img{
height:340px;
object-fit:cover;
transition:.45s;
}
.vehicle-content{
padding:28px;
}
.vehicle-content h3{
font-size:24px;
color:#fff;
margin-bottom:12px;
}
.vehicle-content p{
color:#a9a9a9;
font-size:16px;
}
.vehicle-card:hover{
transform:translateY(-10px);
border-color:rgba(107,191,58,.45);
box-shadow:0 25px 45px rgba(0,0,0,.35);
}
.vehicle-card:hover img{
transform:scale(1.05);
}
/*=========================================
BRAND APPLICATIONS
=========================================*/
.mm-applications{
background:#0D0D0D;
}
.application-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:60px;
}
.application-item{
overflow:hidden;
border-radius:22px;
border:1px solid var(--border);
background:var(--card);
transition:var(--transition);
}
.application-item img{
height:420px;
object-fit:cover;
transition:.45s;
}
.application-item:hover{
transform:translateY(-8px);
border-color:rgba(107,191,58,.45);
}
.application-item:hover img{
transform:scale(1.05);
}
/*=========================================
SOCIAL MEDIA
=========================================*/
.mm-social{
background:#111;
}
.social-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-top:70px;
}
.social-item{
overflow:hidden;
border-radius:22px;
background:var(--card);
border:1px solid var(--border);
transition:.35s;
}
.social-item img{
aspect-ratio:1/1;
object-fit:cover;
transition:.45s;
}
.social-item:hover{
transform:translateY(-8px);
border-color:rgba(107,191,58,.45);
box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.social-item:hover img{
transform:scale(1.05);
}
/*=========================================
STATIONERY
=========================================*/
.mm-stationery{
background:#0D0D0D;
}
.stationery-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:60px;
}
.stationery-item{
overflow:hidden;
background:var(--card);
border-radius:22px;
border:1px solid var(--border);
transition:var(--transition);
}
.stationery-item img{
height:420px;
object-fit:cover;
transition:.45s;
}
.stationery-item:hover{
transform:translateY(-8px);
border-color:rgba(107,191,58,.45);
}
.stationery-item:hover img{
transform:scale(1.05);
}
/*=========================================
MERCHANDISE
=========================================*/
.mm-merchandise{
background:#111;
}
.merch-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:70px;
}
.merch-item{
overflow:hidden;
background:var(--card);
border-radius:22px;
border:1px solid var(--border);
transition:var(--transition);
}
.merch-item img{
height:420px;
object-fit:cover;
transition:.45s;
}
.merch-item:hover{
transform:translateY(-10px);
border-color:rgba(107,191,58,.45);
box-shadow:0 20px 45px rgba(0,0,0,.35);
}
.merch-item:hover img{
transform:scale(1.05);
}
/*=========================================
FINAL SHOWCASE
=========================================*/
.mm-final{
background:#0D0D0D;
}
.final-image{
margin-top:70px;
overflow:hidden;
border-radius:28px;
border:1px solid var(--border);
box-shadow:var(--shadow);
}
.final-image img{
display:block;
width:100%;
transition:.6s ease;
}
.final-image:hover img{
transform:scale(1.04);
}
/*=========================================
CALL TO ACTION
=========================================*/
.mm-cta{
padding:140px 0;
text-align:center;
background:linear-gradient(
135deg,
#111111,
#1b1b1b
);
}
.mm-cta h2{
font-size:clamp(38px,5vw,64px);
color:#fff;
margin-bottom:24px;
font-weight:800;
}
.mm-cta p{
max-width:720px;
margin:0 auto 40px;
font-size:18px;
color:#b8b8b8;
line-height:1.8;
}
.mm-cta .mm-btn{
font-size:18px;
padding:18px 42px;
}
/*=========================================
FOOTER
=========================================*/
footer{
padding:45px 0;
text-align:center;
background:#090909;
border-top:1px solid rgba(255,255,255,.06);
}
footer p{
color:#8d8d8d;
font-size:15px;
letter-spacing:.5px;
}
/*=========================================
GLOBAL IMAGE EFFECTS
=========================================*/
img{
user-select:none;
-webkit-user-drag:none;
}
.vehicle-card,
.application-item,
.social-item,
.stationery-item,
.merch-item,
.logo-item,
.overview-card{
will-change:transform;
}
/*=========================================
SCROLL REVEAL
=========================================*/
.reveal{
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}
.reveal.active{
opacity:1;
transform:translateY(0);
}
/*=========================================
TABLET
=========================================*/
@media (max-width:992px){
.mm-hero .container{
grid-template-columns:1fr;
text-align:center;
gap:60px;
}
.hero-content p{
margin-inline:auto;
}
.hero-buttons{
justify-content:center;
}
.mm-story .container,
.identity-content{
grid-template-columns:1fr;
gap:50px;
}
.overview-grid{
grid-template-columns:repeat(2,1fr);
}
.logo-grid,
.vehicle-grid,
.application-grid,
.stationery-grid,
.merch-grid{
grid-template-columns:1fr;
}
.social-grid{
grid-template-columns:repeat(2,1fr);
}
section{
padding:90px 0;
}
}
/*=========================================
MOBILE
=========================================*/
@media (max-width:768px){
.hero-content h1{
font-size:52px;
}
.section-title h2{
font-size:36px;
}
.section-title p{
font-size:16px;
}
.overview-grid,
.social-grid{
grid-template-columns:1fr;
}
.vehicle-card img,
.application-item img,
.stationery-item img,
.merch-item img{
height:260px;
}
.hero-buttons{
flex-direction:column;
align-items:center;
}
.btn-primary,
.btn-secondary,
.mm-btn{
width:100%;
max-width:320px;
}
.identity-text h2,
.story-left h2{
font-size:36px;
}
.container{
width:92%;
}
}
/*=========================================
SMALL MOBILE
=========================================*/
@media (max-width:576px){
section{
padding:70px 0;
}
.hero-content h1{
font-size:42px;
}
.hero-badge{
font-size:13px;
padding:8px 16px;
}
.vehicle-content{
padding:22px;
}
.vehicle-content h3{
font-size:20px;
}
.mm-cta{
padding:90px 0;
}
.mm-cta h2{
font-size:34px;
}
.mm-cta p{
font-size:16px;
}
footer{
padding:30px 0;
}
}/* End custom CSS */