/* style.css */
html {
scroll-behavior: smooth;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:#0b0b0b;
font-family:'Poppins', sans-serif;
}
/* ================= HEADER ================= */
.header{
width:100%;
height:95px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 6%;
position:sticky;
top:0;
z-index:1000;
background:rgb(255, 255, 255);
border-bottom:2px solid #ff0000;
backdrop-filter:blur(12px);
box-shadow:
0 0 25px rgba(255,0,0,0.12);
}
/* ================= LOGO AREA ================= */
.logo-area{
display:flex;
align-items:center;
gap:18px;
}
.logo{
width:72px;
object-fit:contain;
transition:0.4s ease;
}
.logo:hover{
transform:scale(1.05);
}
/* ================= BRAND TEXT ================= */
.brand-text h1{
font-family:'Bebas Neue', sans-serif;
font-size:2.4rem;
letter-spacing:3px;
color:#cc0000;
line-height:1;
}
.brand-text p{
color:#000000;
font-size:0.72rem;
letter-spacing:2px;
margin-top:4px;
font-weight:500;
}
/* ================= NAVBAR ================= */
.navbar{
display:flex;
gap:38px;
}
.navbar a{
text-decoration:none;
color:#000000;
font-size:0.95rem;
font-weight:500;
position:relative;
transition:0.3s ease;
}
/* UNDERLINE EFFECT */
.navbar a::after{
content:'';
position:absolute;
left:0;
bottom:-8px;
width:0%;
height:2px;
background:#cc0000;
transition:0.3s ease;
}
.navbar a:hover{
color:#cc0000;
}
.navbar a:hover::after{
width:100%;
}
/* ================= BUTTON ================= */
.shop-btn{
padding:12px 26px;
border:none;
background:#FF0000;
color:#000000;
font-weight:600;
border-radius:50px;
cursor:pointer;
transition:0.3s ease;
font-family:'Poppins', sans-serif;
text-decoration: none;
}
.shop-btn:hover{
background:#CC0000;
color:white;
transform:translateY(-2px);
}
/* ================= RIGHT SIDE ================= */
.header-right{
display:flex;
align-items:center;
gap:20px;
}
/* ================= MOBILE MENU ================= */
.menu-toggle{
display:none;
width:48px;
height:48px;
position:relative;
justify-content:center;
align-items:center;
cursor:pointer;
z-index:1001;
}
/* ALL LINES */
.menu-toggle span{
position:absolute;
width:26px;
height:2px;
background:#000;
border-radius:20px;
transition:
transform 0.35s cubic-bezier(.68,-0.6,.32,1.6),
opacity 0.25s ease,
background 0.3s ease;
}
/* TOP */
.menu-toggle span:nth-child(1){
transform:translateY(-8px);
}
/* MIDDLE */
.menu-toggle span:nth-child(2){
opacity:1;
}
/* BOTTOM */
.menu-toggle span:nth-child(3){
transform:translateY(8px);
}
/* =========================
ACTIVE STATE
========================= */
.menu-toggle.active span:nth-child(1){
transform:
rotate(45deg);
}
.menu-toggle.active span:nth-child(2){
opacity:0;
}
.menu-toggle.active span:nth-child(3){
transform:
rotate(-45deg);
}
/* OPTIONAL HOVER */
.menu-toggle:hover span{
background:#ff0000;
}
/* ================= RESPONSIVE ================= */
@media(max-width:950px){
/* =========================
MOBILE NAVBAR
========================= */
.navbar{
position:absolute;
top:95px;
left:50%;
transform:
translateX(-50%)
translateY(-20px);
width:92%;
background:rgba(255,255,255,0.96);
backdrop-filter:blur(14px);
border-radius:22px;
flex-direction:column;
align-items:center;
padding:35px 0;
gap:28px;
box-shadow:
0 20px 60px rgba(0,0,0,0.12);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity 0.35s ease,
transform 0.4s cubic-bezier(.22,1,.36,1),
visibility 0.35s ease;
z-index:999;
}
/* ACTIVE */
.navbar.active{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:
translateX(-50%)
translateY(0);
}
/* NAV LINKS */
.navbar a{
font-size:1rem;
color:#111;
font-weight:600;
transform:translateY(10px);
opacity:0;
transition:
0.35s ease;
}
/* STAGGER EFFECT */
.navbar.active a{
opacity:1;
transform:translateY(0);
}
.navbar.active a:nth-child(1){
transition-delay:0.08s;
}
.navbar.active a:nth-child(2){
transition-delay:0.12s;
}
.navbar.active a:nth-child(3){
transition-delay:0.16s;
}
.navbar.active a:nth-child(4){
transition-delay:0.20s;
}
.navbar.active a:nth-child(5){
transition-delay:0.24s;
}
.navbar.active a:nth-child(6){
transition-delay:0.28s;
}
/* SHOW MENU BUTTON */
.menu-toggle{
display:flex;
}
/* HIDE BUTTON */
.shop-btn{
display:none;
}
/* RESPONSIVE LOGO */
.brand-text h1{
font-size:2rem;
}
.brand-text p{
font-size:0.62rem;
}
.logo{
width:62px;
}
}
/* =========================
ABOUT HERO
========================= */
.about-hero{
position:relative;
height:88vh;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
background:#000;
}
/* BG */
.about-hero-bg{
position:absolute;
inset:0;
background:
url('../assets/images/Sky-manufacturing.png');
background-size:cover;
background-position:center;
transform:scale(1.08);
}
/* OVERLAY */
.about-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to right,
rgba(0,0,0,0.88),
rgba(0,0,0,0.45)
);
}
/* CONTENT */
.about-hero-content{
position:relative;
z-index:2;
text-align:center;
padding:0 7%;
max-width:1100px;
}
.about-hero-content span{
display:inline-block;
color:#ff0000;
font-size:0.95rem;
letter-spacing:0.22em;
font-weight:700;
margin-bottom:26px;
}
.about-hero-content h1{
font-size:6.8rem;
line-height:0.92;
letter-spacing:-0.06em;
color:#ffffff;
margin-bottom:30px;
font-family:'Space Grotesk', sans-serif;
}
.about-hero-content p{
max-width:760px;
margin:auto;
color:#d0d0d0;
line-height:1.9;
font-size:1.08rem;
}
/* =========================
DIRECTOR SECTION
========================= */
.director-section{
padding:140px 7%;
background:#ffffff;
display:grid;
grid-template-columns:
0.95fr 1fr;
gap:100px;
align-items:center;
}
/* IMAGE */
.director-image{
position:relative;
}
.director-image img{
width:100%;
height:760px;
object-fit:cover;
border-radius:40px;
display:block;
}
/* BADGE */
.director-badge{
position:absolute;
right:-30px;
bottom:40px;
width:230px;
padding:32px;
border-radius:30px;
background:
linear-gradient(
135deg,
#ff0000,
#cc0000
);
box-shadow:
0 30px 60px rgba(255,0,0,0.22);
}
.director-badge h3{
font-size:3rem;
color:#ffffff;
margin-bottom:8px;
font-family:'Space Grotesk', sans-serif;
}
.director-badge p{
color:#ffeaea;
line-height:1.7;
}
/* CONTENT */
.director-content span{
display:inline-block;
color:#ff0000;
font-size:0.9rem;
letter-spacing:0.18em;
font-weight:700;
margin-bottom:24px;
}
.director-content h2{
font-size:5rem;
line-height:0.93;
letter-spacing:-0.05em;
color:#000000;
margin-bottom:34px;
font-family:'Space Grotesk', sans-serif;
}
.director-content p{
color:#555555;
line-height:2;
margin-bottom:22px;
font-size:1rem;
}
/* SIGNATURE */
.director-signature{
margin-top:45px;
padding-top:30px;
border-top:
1px solid rgba(0,0,0,0.08);
}
.director-signature h3{
font-size:1.4rem;
margin-bottom:10px;
color:#000000;
}
.director-signature p{
margin:0;
color:#777777;
}
/* =========================
MISSION VISION
========================= */
.mission-vision-section{
padding:0 7% 140px;
background:#ffffff;
display:grid;
grid-template-columns:
1fr 1fr;
gap:30px;
}
/* CARD */
.mv-card{
padding:70px 60px;
border-radius:40px;
background:#f5f5f5;
transition:0.4s ease;
}
.mv-card:hover{
transform:translateY(-8px);
}
.mv-card.dark{
background:#000000;
}
.mv-card span{
display:block;
color:#ff0000;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:24px;
}
.mv-card h2{
font-size:2.8rem;
line-height:1.2;
color:#000000;
font-family:'Space Grotesk', sans-serif;
}
.mv-card.dark h2{
color:#ffffff;
}
/* =========================
MINI INFRA
========================= */
.mini-infra{
padding:140px 7%;
background:#000000;
}
/* TOP */
.mini-infra-top{
text-align:center;
margin-bottom:70px;
}
.mini-infra-top span{
color:#ff0000;
letter-spacing:0.2em;
font-size:0.9rem;
font-weight:700;
display:block;
margin-bottom:24px;
}
.mini-infra-top h2{
font-size:5rem;
line-height:0.95;
color:#ffffff;
letter-spacing:-0.05em;
font-family:'Space Grotesk', sans-serif;
}
/* GRID */
.mini-infra-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:28px;
}
/* CARD */
.mini-card{
position:relative;
overflow:hidden;
border-radius:34px;
height:520px;
}
.mini-card img{
width:100%;
height:100%;
object-fit:cover;
transition:0.7s ease;
}
.mini-card:hover img{
transform:scale(1.08);
}
/* OVERLAY */
.mini-overlay{
position:absolute;
left:0;
bottom:0;
width:100%;
padding:40px 30px;
background:
linear-gradient(
to top,
rgba(0,0,0,0.92),
rgba(0,0,0,0)
);
}
.mini-overlay h3{
color:#ffffff;
font-size:1.7rem;
font-family:'Space Grotesk', sans-serif;
}
/* =========================
STAR DISTRIBUTORS
========================= */
.star-distributors{
padding:140px 7%;
background:#ffffff;
}
/* TOP */
.star-top{
text-align:center;
margin-bottom:70px;
}
.star-top span{
display:block;
color:#ff0000;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:24px;
}
.star-top h2{
font-size:5rem;
line-height:0.95;
letter-spacing:-0.05em;
color:#000000;
font-family:'Space Grotesk', sans-serif;
}
/* GRID */
.star-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:30px;
}
/* CARD */
.star-card{
background:#f5f5f5;
border-radius:34px;
overflow:hidden;
transition:0.4s ease;
}
.star-card:hover{
transform:translateY(-10px);
}
/* IMG */
.star-card img{
width:100%;
height:340px;
object-fit:cover;
}
/* CONTENT */
.star-content{
padding:32px;
}
.star-content h3{
font-size:1.6rem;
margin-bottom:10px;
color:#000000;
}
.star-content p{
color:#666666;
margin-bottom:16px;
}
.star-content span{
color:#ff0000;
font-weight:600;
}
/* =========================
ACHIEVEMENTS
========================= */
.achievements-section{
padding:0 7% 140px;
background:#ffffff;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:24px;
}
/* CARD */
.achievement-card{
padding:55px 30px;
border-radius:30px;
background:#000000;
text-align:center;
transition:0.4s ease;
}
.achievement-card:hover{
transform:translateY(-8px);
background:#111111;
}
.achievement-card h2{
font-size:4rem;
color:#ff0000;
margin-bottom:16px;
font-family:'Space Grotesk', sans-serif;
}
.achievement-card p{
color:#d0d0d0;
letter-spacing:0.04em;
}
/* =========================
SPONSORSHIPS
========================= */
.about-sponsorships{
padding:140px 7%;
background:#000000;
display:grid;
grid-template-columns:
1fr 1fr;
gap:90px;
align-items:center;
}
/* LEFT */
.sponsorship-left span{
display:block;
color:#ff0000;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:24px;
}
.sponsorship-left h2{
font-size:5rem;
line-height:0.94;
color:#ffffff;
letter-spacing:-0.05em;
margin-bottom:30px;
font-family:'Space Grotesk', sans-serif;
}
.sponsorship-left p{
color:#b8b8b8;
line-height:1.9;
max-width:600px;
}
/* RIGHT */
.sponsorship-right img{
width:100%;
border-radius:40px;
display:block;
}
/* =========================
CTA
========================= */
.about-cta{
position:relative;
padding:140px 7%;
background:
linear-gradient(
135deg,
#ff0000,
#cc0000
);
overflow:hidden;
}
/* CONTENT */
.about-cta-content{
position:relative;
z-index:2;
text-align:center;
max-width:900px;
margin:auto;
}
.about-cta-content span{
display:block;
color:#ffeaea;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:24px;
}
.about-cta-content h2{
font-size:5rem;
line-height:0.94;
color:#ffffff;
letter-spacing:-0.05em;
margin-bottom:30px;
font-family:'Space Grotesk', sans-serif;
}
.about-cta-content p{
color:#ffeaea;
line-height:1.9;
max-width:650px;
margin:auto;
margin-bottom:45px;
}
/* BUTTON */
.about-cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:60px;
padding:0 36px;
border-radius:999px;
background:#ffffff;
color:#000000;
text-decoration:none;
font-weight:700;
transition:0.35s ease;
}
.about-cta-btn:hover{
transform:translateY(-4px);
background:#000000;
color:#ffffff;
}
/* =========================
RESPONSIVE
========================= */
@media(max-width:1150px){
.director-section,
.about-sponsorships{
grid-template-columns:1fr;
}
.mission-vision-section{
grid-template-columns:1fr;
}
.mini-infra-grid,
.star-grid,
.achievements-section{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:750px){
.about-hero-content h1,
.director-content h2,
.mini-infra-top h2,
.star-top h2,
.sponsorship-left h2,
.about-cta-content h2{
font-size:3rem;
}
.director-section,
.mini-infra,
.star-distributors,
.about-sponsorships,
.about-cta{
padding:90px 5%;
}
.mission-vision-section,
.achievements-section{
padding:0 5% 90px;
}
.mini-infra-grid,
.star-grid,
.achievements-section{
grid-template-columns:1fr;
}
.director-image img{
height:520px;
}
.director-badge{
width:180px;
right:10px;
}
.mv-card{
padding:45px 30px;
}
.mv-card h2{
font-size:2rem;
}
}
/* =========================
CONTACT HERO
========================= */
.contact-hero{
position:relative;
height:75vh;
background:
url('../assets/images/contact-hero.jpg');
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
/* OVERLAY */
.contact-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to right,
rgba(0,0,0,0.88),
rgba(0,0,0,0.45)
);
}
/* CONTENT */
.contact-hero-content{
position:relative;
z-index:2;
text-align:center;
max-width:1000px;
padding:0 7%;
}
.contact-hero-content span{
display:block;
color:#ff0000;
letter-spacing:0.2em;
font-size:0.9rem;
font-weight:700;
margin-bottom:24px;
}
.contact-hero-content h1{
font-size:6rem;
line-height:0.92;
letter-spacing:-0.06em;
color:#ffffff;
margin-bottom:30px;
font-family:'Space Grotesk', sans-serif;
}
.contact-hero-content p{
color:#d0d0d0;
line-height:1.9;
max-width:700px;
margin:auto;
}
/* =========================
CONTACT SECTION
========================= */
.contact-section{
padding:140px 7%;
background:#ffffff;
display:grid;
grid-template-columns:
1fr 1fr;
gap:80px;
align-items:start;
}
/* LEFT */
.contact-left span{
display:block;
color:#ff0000;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:22px;
}
.contact-left h2{
font-size:5rem;
line-height:0.94;
color:#000000;
letter-spacing:-0.05em;
margin-bottom:28px;
font-family:'Space Grotesk', sans-serif;
}
.contact-left p{
color:#666666;
line-height:1.9;
max-width:600px;
margin-bottom:50px;
}
/* INFO GRID */
.contact-info-grid{
display:grid;
grid-template-columns:
1fr 1fr;
gap:24px;
}
/* CARD */
.contact-info-card{
padding:30px;
border-radius:28px;
background:#f5f5f5;
display:flex;
gap:18px;
transition:0.35s ease;
}
.contact-info-card:hover{
transform:translateY(-6px);
background:#000000;
}
.contact-info-card:hover h3,
.contact-info-card:hover p{
color:#ffffff;
}
/* ICON */
.contact-icon{
min-width:55px;
height:55px;
border-radius:50%;
background:#ff0000;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
}
/* TEXT */
.contact-info-card h3{
margin-bottom:10px;
color:#000000;
transition:0.3s ease;
}
.contact-info-card p{
color:#666666;
line-height:1.7;
transition:0.3s ease;
}
/* =========================
FORM
========================= */
.contact-form-wrapper{
background:#000000;
padding:50px;
border-radius:40px;
}
/* FORM */
.contact-form{
display:flex;
flex-direction:column;
gap:22px;
}
/* GROUP */
.form-group input,
.form-group select,
.form-group textarea{
width:100%;
border:none;
outline:none;
padding:18px 22px;
border-radius:18px;
background:#111111;
color:#ffffff;
font-size:0.96rem;
font-family:'Poppins', sans-serif;
}
/* TEXTAREA */
.form-group textarea{
height:170px;
resize:none;
}
/* BUTTON */
.contact-btn{
height:58px;
border:none;
border-radius:999px;
background:#ff0000;
color:#ffffff;
font-weight:700;
cursor:pointer;
transition:0.35s ease;
}
.contact-btn:hover{
background:#cc0000;
transform:translateY(-3px);
}
/* =========================
MAP
========================= */
.map-section{
padding:0 7% 140px;
background:#ffffff;
}
/* TOP */
.map-top{
text-align:center;
margin-bottom:60px;
}
.map-top span{
display:block;
color:#ff0000;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:20px;
}
.map-top h2{
font-size:5rem;
line-height:0.95;
color:#000000;
letter-spacing:-0.05em;
font-family:'Space Grotesk', sans-serif;
}
/* MAP */
.map-wrapper{
overflow:hidden;
border-radius:40px;
height:550px;
}
.map-wrapper iframe{
width:100%;
height:100%;
border:none;
filter:grayscale(1) invert(0.95);
}
/* =========================
CTA
========================= */
.contact-cta{
padding:140px 7%;
background:
linear-gradient(
135deg,
#ff0000,
#cc0000
);
text-align:center;
}
/* CONTENT */
.contact-cta-content{
max-width:900px;
margin:auto;
}
.contact-cta-content span{
display:block;
color:#ffeaea;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:22px;
}
.contact-cta-content h2{
font-size:5rem;
line-height:0.95;
color:#ffffff;
letter-spacing:-0.05em;
margin-bottom:28px;
font-family:'Space Grotesk', sans-serif;
}
.contact-cta-content p{
color:#ffeaea;
line-height:1.9;
max-width:650px;
margin:auto;
margin-bottom:40px;
}
/* BUTTON */
.contact-cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:60px;
padding:0 36px;
border-radius:999px;
background:#ffffff;
color:#000000;
text-decoration:none;
font-weight:700;
transition:0.35s ease;
}
.contact-cta-btn:hover{
background:#000000;
color:#ffffff;
transform:translateY(-4px);
}
/* =========================
RESPONSIVE
========================= */
@media(max-width:1150px){
.contact-section{
grid-template-columns:1fr;
}
}
@media(max-width:750px){
.contact-hero-content h1,
.contact-left h2,
.map-top h2,
.contact-cta-content h2{
font-size:3rem;
}
.contact-section,
.contact-cta{
padding:90px 5%;
}
.map-section{
padding:0 5% 90px;
}
.contact-info-grid{
grid-template-columns:1fr;
}
.contact-form-wrapper{
padding:35px 24px;
}
.map-wrapper{
height:400px;
}
}
/* =========================
GALLERY HERO
========================= */
.gallery-hero{
position:relative;
height:78vh;
background:
url('../assets/images/Gallery-hero-dk.jpg');
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
/* OVERLAY */
.gallery-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to right,
rgba(0,0,0,0.88),
rgba(0,0,0,0.5)
);
}
/* CONTENT */
.gallery-hero-content{
position:relative;
z-index:2;
text-align:center;
max-width:1000px;
padding:0 7%;
}
.gallery-hero-content span{
display:block;
color:#ff0000;
letter-spacing:0.2em;
font-size:0.9rem;
font-weight:700;
margin-bottom:24px;
}
.gallery-hero-content h1{
font-size:6rem;
line-height:0.92;
letter-spacing:-0.06em;
color:#ffffff;
margin-bottom:30px;
font-family:'Space Grotesk', sans-serif;
}
.gallery-hero-content p{
color:#d0d0d0;
line-height:1.9;
max-width:720px;
margin:auto;
}
.gallery-collage{
padding:120px 7%;
background:#ffffff;
}
.gallery-heading{
text-align:center;
max-width:900px;
margin:auto auto 80px;
}
.gallery-heading span{
color:#ff0000;
letter-spacing:4px;
font-weight:700;
font-size:.9rem;
}
.gallery-heading h2{
font-size:4rem;
line-height:1;
margin:20px 0;
color:#000;
font-family:'Space Grotesk',sans-serif;
}
.gallery-heading p{
color:#666;
line-height:1.8;
}
/* COLLAGE */
.collage-grid{
display:grid;
grid-template-columns:
repeat(12,1fr);
grid-auto-rows:100px;
gap:20px;
}
/* IMAGES */
.collage-item{
overflow:hidden;
border-radius:30px;
position:relative;
cursor:pointer;
}
.collage-item img{
width:100%;
height:100%;
object-fit:cover;
transition:.7s ease;
}
.collage-item:hover img{
transform:scale(1.08);
}
/* CUSTOM SHAPES */
.item-1{
grid-column:span 5;
grid-row:span 4;
}
.item-2{
grid-column:span 3;
grid-row:span 2;
}
.item-3{
grid-column:span 4;
grid-row:span 3;
}
.item-4{
grid-column:span 3;
grid-row:span 4;
}
.item-5{
grid-column:span 4;
grid-row:span 3;
}
.item-6{
grid-column:span 5;
grid-row:span 3;
}
.item-7{
grid-column:span 7;
grid-row:span 4;
}
.item-8{
grid-column:span 5;
grid-row:span 4;
}
/* OVERLAY */
.collage-item::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(
to top,
rgba(0,0,0,.55),
transparent
);
opacity:0;
transition:.4s ease;
z-index:1;
}
.collage-item:hover::before{
opacity:1;
}
/* =========================
TABLET
========================= */
@media (max-width: 992px){
.gallery-heading h2{
font-size:3rem;
}
.collage-grid{
grid-template-columns:
repeat(2, 1fr);
grid-auto-rows:220px;
gap:16px;
}
/* Reset all custom spans */
.item-1,
.item-2,
.item-3,
.item-4,
.item-5,
.item-6,
.item-7,
.item-8{
grid-column:span 1;
grid-row:span 1;
}
/* Make a few larger for visual interest */
.item-1,
.item-4,
.item-7{
grid-row:span 2;
}
}
/* =========================
MOBILE
========================= */
@media (max-width: 768px){
.gallery-collage{
padding:80px 5%;
}
.gallery-heading{
margin-bottom:50px;
}
.gallery-heading span{
font-size:.75rem;
letter-spacing:3px;
}
.gallery-heading h2{
font-size:2.2rem;
line-height:1.1;
}
.gallery-heading p{
font-size:.95rem;
}
.collage-grid{
display:flex;
flex-direction:column;
gap:15px;
}
.collage-item{
height:260px;
border-radius:20px;
}
.collage-caption{
left:18px;
bottom:18px;
font-size:.95rem;
opacity:1;
transform:none;
}
.collage-item::before{
opacity:1;
}
}
/* =========================
VIDEO SHOWCASE
========================= */
.video-showcase{
padding:120px 7%;
background:#0a0a0a;
color:#fff;
}
/* HEADING */
.video-heading{
max-width:900px;
margin:auto;
text-align:center;
margin-bottom:70px;
}
.video-heading span{
color:#ff0000;
letter-spacing:4px;
font-size:.9rem;
font-weight:700;
}
.video-heading h2{
font-size:4rem;
line-height:1;
margin:20px 0;
font-family:'Space Grotesk',sans-serif;
}
.video-heading p{
color:#c8c8c8;
line-height:1.8;
}
/* GRID */
.video-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(350px,1fr));
gap:30px;
}
/* CARD */
.video-card{
background:#151515;
border-radius:28px;
overflow:hidden;
transition:.4s ease;
border:1px solid rgba(255,255,255,.08);
}
.video-card:hover{
transform:translateY(-8px);
box-shadow:
0 20px 50px rgba(255,0,0,.15);
}
/* VIDEO */
.video-card video{
width:100%;
display:block;
aspect-ratio:16/9;
object-fit:cover;
}
/* INFO */
.video-info{
padding:25px;
}
.video-info span{
color:#ff0000;
font-size:.8rem;
letter-spacing:2px;
font-weight:700;
}
.video-info h3{
margin-top:10px;
font-size:1.3rem;
line-height:1.4;
font-weight:600;
}
/* MOBILE */
@media(max-width:768px){
.video-heading h2{
font-size:2.8rem;
}
}
/* =========================
CTA
========================= */
.gallery-cta{
padding:140px 7%;
background:
linear-gradient(
135deg,
#ff0000,
#cc0000
);
text-align:center;
}
/* CONTENT */
.gallery-cta-content{
max-width:900px;
margin:auto;
}
.gallery-cta-content span{
display:block;
color:#ffeaea;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:22px;
}
.gallery-cta-content h2{
font-size:5rem;
line-height:0.95;
color:#ffffff;
letter-spacing:-0.05em;
margin-bottom:28px;
font-family:'Space Grotesk', sans-serif;
}
.gallery-cta-content p{
color:#ffeaea;
line-height:1.9;
max-width:650px;
margin:auto;
margin-bottom:40px;
}
/* BUTTON */
.gallery-cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:60px;
padding:0 36px;
border-radius:999px;
background:#ffffff;
color:#000000;
text-decoration:none;
font-weight:700;
transition:0.35s ease;
}
.gallery-cta-btn:hover{
background:#000000;
color:#ffffff;
transform:translateY(-4px);
}
/* =========================
RESPONSIVE
========================= */
@media(max-width:1150px){
.gallery-video-section{
grid-template-columns:1fr;
}
.gallery-grid{
grid-template-columns:
1fr 1fr;
}
}
@media(max-width:750px){
.gallery-hero-content h1,
.gallery-video-left h2,
.gallery-cta-content h2{
font-size:3rem;
}
.gallery-section,
.gallery-video-section,
.gallery-cta{
padding:90px 5%;
}
.gallery-filter-section{
padding:40px 5% 10px;
}
.gallery-grid{
grid-template-columns:1fr;
grid-auto-rows:260px;
}
.gallery-item.large,
.gallery-item.wide{
grid-column:span 1;
}
.gallery-item.tall{
grid-row:span 1;
}
}
/* =========================
DISTRIBUTOR HERO
========================= */
.distributor-hero{
position:relative;
height:85vh;
background:
url('../assets/images/Sky-dist-hero.png');
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
/* OVERLAY */
.distributor-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to right,
rgba(0,0,0,0.9),
rgba(0,0,0,0.5)
);
}
/* CONTENT */
.distributor-hero-content{
position:relative;
z-index:2;
text-align:center;
max-width:1100px;
padding:0 7%;
}
.distributor-hero-content span{
display:block;
color:#ff0000;
letter-spacing:0.2em;
font-size:0.9rem;
font-weight:700;
margin-bottom:24px;
}
.distributor-hero-content h1{
font-size:6.5rem;
line-height:0.92;
letter-spacing:-0.06em;
color:#ffffff;
margin-bottom:30px;
font-family:'Space Grotesk', sans-serif;
}
.distributor-hero-content p{
color:#d0d0d0;
line-height:1.9;
max-width:760px;
margin:auto;
margin-bottom:40px;
}
/* BUTTON */
.hero-distributor-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:60px;
padding:0 38px;
border-radius:999px;
background:#ff0000;
color:#ffffff;
text-decoration:none;
font-weight:700;
transition:0.35s ease;
}
.hero-distributor-btn:hover{
background:#cc0000;
transform:translateY(-4px);
}
/* =========================
WHY SECTION
========================= */
.why-distributor{
padding:140px 7%;
background:#ffffff;
}
/* TOP */
.why-top{
text-align:center;
margin-bottom:70px;
}
.why-top span{
display:block;
color:#ff0000;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:24px;
}
.why-top h2{
font-size:5rem;
line-height:0.95;
letter-spacing:-0.05em;
color:#000000;
font-family:'Space Grotesk', sans-serif;
}
/* GRID */
.why-grid{
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:24px;
}
/* CARD */
.why-card{
padding:45px 35px;
background:#f5f5f5;
border-radius:30px;
transition:0.4s ease;
}
.why-card:hover{
transform:translateY(-8px);
background:#000000;
}
.why-card:hover h3,
.why-card:hover p{
color:#ffffff;
}
/* ICON */
.why-icon{
width:70px;
height:70px;
border-radius:20px;
background:#ff0000;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:1.5rem;
margin-bottom:28px;
}
/* TEXT */
.why-card h3{
font-size:1.5rem;
margin-bottom:18px;
transition:0.3s ease;
}
.why-card p{
color:#666666;
line-height:1.8;
transition:0.3s ease;
}
/* =========================
BENEFITS
========================= */
.program-benefits{
padding:140px 7%;
background:#000000;
display:grid;
grid-template-columns:
1fr 1fr;
gap:90px;
align-items:center;
}
/* LEFT */
.benefit-left span{
display:block;
color:#ff0000;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:24px;
}
.benefit-left h2{
font-size:5rem;
line-height:0.95;
color:#ffffff;
letter-spacing:-0.05em;
margin-bottom:28px;
font-family:'Space Grotesk', sans-serif;
}
.benefit-left p{
color:#bdbdbd;
line-height:1.9;
margin-bottom:40px;
}
/* LIST */
.benefit-list{
list-style:none;
}
.benefit-list li{
color:#ffffff;
margin-bottom:18px;
display:flex;
align-items:center;
gap:14px;
}
.benefit-list i{
color:#ff0000;
}
/* IMAGE */
.benefit-image img{
width:100%;
border-radius:40px;
display:block;
}
/* =========================
STATS
========================= */
.distributor-stats{
padding:0 7% 140px;
background:#000000;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:24px;
}
/* CARD */
.stats-card{
padding:55px 30px;
border-radius:28px;
background:#111111;
text-align:center;
}
.stats-card h2{
font-size:4rem;
color:#ff0000;
margin-bottom:14px;
font-family:'Space Grotesk', sans-serif;
}
.stats-card p{
color:#d0d0d0;
}
/* =========================
FORM SECTION
========================= */
.distributor-form-section{
padding:140px 7%;
background:#ffffff;
}
/* TOP */
.form-top{
text-align:center;
margin-bottom:70px;
}
.form-top span{
display:block;
color:#ff0000;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:24px;
}
.form-top h2{
font-size:5rem;
line-height:0.95;
letter-spacing:-0.05em;
color:#000000;
margin-bottom:24px;
font-family:'Space Grotesk', sans-serif;
}
.form-top p{
color:#666666;
line-height:1.8;
max-width:700px;
margin:auto;
}
/* FORM */
.distributor-form{
max-width:1200px;
margin:auto;
background:#f5f5f5;
padding:60px;
border-radius:40px;
}
/* ROW */
.form-row{
display:grid;
grid-template-columns:
1fr 1fr;
gap:24px;
margin-bottom:24px;
}
/* GROUP */
.form-group{
display:flex;
flex-direction:column;
}
.form-group label{
margin-bottom:12px;
font-weight:600;
color:#111111;
}
/* INPUT */
.form-group input,
.form-group select,
.form-group textarea{
width:100%;
border:none;
outline:none;
background:#ffffff;
border-radius:18px;
padding:18px 20px;
font-family:'Poppins', sans-serif;
font-size:0.95rem;
}
/* TEXTAREA */
.form-group textarea{
height:180px;
resize:none;
}
/* CHECKBOX */
.checkbox-group{
display:flex;
align-items:flex-start;
gap:12px;
margin:30px 0;
}
.checkbox-group label{
color:#555555;
line-height:1.7;
}
/* BUTTON */
.distributor-submit-btn{
width:100%;
height:62px;
border:none;
border-radius:999px;
background:#ff0000;
color:#ffffff;
font-size:1rem;
font-weight:700;
cursor:pointer;
transition:0.35s ease;
}
.distributor-submit-btn:hover{
background:#cc0000;
transform:translateY(-3px);
}
/* =========================
FINAL CTA
========================= */
.distributor-final-cta{
padding:140px 7%;
background:
linear-gradient(
135deg,
#ff0000,
#cc0000
);
text-align:center;
}
/* CONTENT */
.final-cta-content{
max-width:900px;
margin:auto;
}
.final-cta-content span{
display:block;
color:#ffeaea;
letter-spacing:0.18em;
font-size:0.9rem;
font-weight:700;
margin-bottom:22px;
}
.final-cta-content h2{
font-size:5rem;
line-height:0.95;
color:#ffffff;
letter-spacing:-0.05em;
margin-bottom:28px;
font-family:'Space Grotesk', sans-serif;
}
.final-cta-content p{
color:#ffeaea;
line-height:1.9;
max-width:650px;
margin:auto;
margin-bottom:40px;
}
/* BUTTON */
.final-cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:60px;
padding:0 38px;
border-radius:999px;
background:#ffffff;
color:#000000;
text-decoration:none;
font-weight:700;
transition:0.35s ease;
}
.final-cta-btn:hover{
background:#000000;
color:#ffffff;
transform:translateY(-4px);
}
.form-group input,
.form-group select,
.form-group textarea{
width:100%;
border:none;
outline:none;
background:#ffffff;
border-radius:18px;
padding:18px 20px;
font-family:'Poppins', sans-serif;
font-size:0.95rem;
color:#000000;
}
/* PLACEHOLDER */
.form-group input::placeholder,
.form-group textarea::placeholder{
color:#777777;
}
.form-group label{
margin-bottom:12px;
font-weight:600;
color:#d40202;
}
/* REQUIRED ASTERISK */
.form-group label::after{
content:'';
}
/* =========================
RESPONSIVE
========================= */
@media(max-width:1150px){
.why-grid,
.distributor-stats{
grid-template-columns:
1fr 1fr;
}
.program-benefits{
grid-template-columns:1fr;
}
}
@media(max-width:750px){
.distributor-hero-content h1,
.why-top h2,
.benefit-left h2,
.form-top h2,
.final-cta-content h2{
font-size:3rem;
}
.why-distributor,
.program-benefits,
.distributor-form-section,
.distributor-final-cta{
padding:90px 5%;
}
.why-grid,
.distributor-stats,
.form-row{
grid-template-columns:1fr;
}
.distributor-form{
padding:35px 24px;
}
}
/* =========================
PRODUCTS HERO
========================= */
.products-hero{
position:relative;
height:75vh;
background:
url('../assets/images/product-hero-image.png');
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
/* OVERLAY */
.products-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to right,
rgba(0,0,0,0.92),
rgba(0,0,0,0.45)
);
}
/* CONTENT */
.products-hero-content{
position:relative;
z-index:2;
text-align:center;
max-width:1000px;
padding:0 7%;
}
.products-hero-content span{
display:block;
color:#ff0000;
letter-spacing:0.2em;
font-size:0.9rem;
font-weight:700;
margin-bottom:24px;
}
.products-hero-content h1{
font-size:6.5rem;
line-height:0.9;
letter-spacing:-0.06em;
color:#ffffff;
margin-bottom:30px;
font-family:'Space Grotesk', sans-serif;
}
.products-hero-content p{
color:#d0d0d0;
line-height:1.9;
max-width:700px;
margin:auto;
}
/* =========================
TOOLBAR
========================= */
.products-toolbar{
padding:70px 7% 30px;
background:#ffffff;
display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
flex-wrap:wrap;
}
/* LEFT */
.toolbar-left h2{
font-size:3rem;
color:#000000;
margin-bottom:10px;
font-family:'Space Grotesk', sans-serif;
}
.toolbar-left p{
color:#666666;
}
/* RIGHT */
.toolbar-right{
display:flex;
gap:18px;
flex-wrap:wrap;
}
/* SEARCH */
.search-box{
height:56px;
width:320px;
background:#f5f5f5;
border-radius:18px;
display:flex;
align-items:center;
padding:0 20px;
gap:12px;
}
.search-box i{
color:#999999;
}
.search-box input{
width:100%;
border:none;
background:transparent;
outline:none;
font-size:0.95rem;
color:#000000;
}
/* SELECT */
.toolbar-right select{
height:56px;
border:none;
background:#f5f5f5;
border-radius:18px;
padding:0 18px;
outline:none;
font-family:'Poppins', sans-serif;
color:#000000;
cursor:pointer;
}
/* =========================
CATEGORY FILTERS
========================= */
.category-section{
padding:0 7% 50px;
background:#ffffff;
}
/* FILTER WRAP */
.category-filters{
display:flex;
gap:16px;
flex-wrap:wrap;
}
/* BUTTON */
.category-btn{
height:52px;
padding:0 28px;
border:none;
border-radius:999px;
background:#f5f5f5;
color:#000000;
cursor:pointer;
font-weight:600;
transition:0.35s ease;
}
/* ACTIVE */
.category-btn.active,
.category-btn:hover{
background:#ff0000;
color:#ffffff;
}
/* =========================
PRODUCTS GRID
========================= */
.products-page-section{
padding:0 7% 140px;
background:#ffffff;
}
/* GRID */
.products-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:28px;
}
/* CARD */
.product-card{
background:#f5f5f5;
border-radius:34px;
overflow:hidden;
transition:0.4s ease;
}
.product-card:hover{
transform:translateY(-10px);
}
/* IMAGE */
.product-image{
position:relative;
height:320px;
overflow:hidden;
background:#ededed;
}
.product-image img{
width:100%;
height:100%;
object-fit:contain;
padding:35px;
transition:0.5s ease;
}
.product-card:hover img{
transform:scale(1.08);
}
/* BADGE */
.product-badge{
position:absolute;
top:18px;
left:18px;
background:#ff0000;
color:#ffffff;
padding:10px 16px;
border-radius:999px;
font-size:0.8rem;
font-weight:600;
}
.product-badge.new{
background:#000000;
}
/* INFO */
.product-info{
padding:30px;
}
.product-info span{
display:block;
color:#ff0000;
font-size:0.85rem;
font-weight:700;
letter-spacing:0.1em;
margin-bottom:12px;
}
.product-info h3{
font-size:2rem;
line-height:1;
margin-bottom:18px;
color:#000000;
font-family:'Space Grotesk', sans-serif;
}
.product-info p{
color:#666666;
line-height:1.8;
margin-bottom:28px;
}
/* BOTTOM */
.product-bottom{
display:flex;
justify-content:space-between;
align-items:center;
}
.product-bottom h4{
font-size:1.6rem;
color:#000000;
font-family:'Space Grotesk', sans-serif;
}
/* LINK */
.product-bottom a{
width:48px;
height:48px;
border-radius:50%;
background:#ff0000;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
transition:0.35s ease;
}
.product-bottom a:hover{
background:#000000;
transform:rotate(45deg);
}
/* =========================
RESPONSIVE
========================= */
@media(max-width:1150px){
.products-grid{
grid-template-columns:
1fr 1fr;
}
}
@media(max-width:750px){
.products-hero-content h1{
font-size:3.5rem;
}
.products-toolbar,
.category-section,
.products-page-section{
padding-left:5%;
padding-right:5%;
}
.products-grid{
grid-template-columns:1fr;
}
.toolbar-left h2{
font-size:2.4rem;
}
.search-box{
width:100%;
}
}
/* =========================
FOOTER
========================= */
.footer{
position:relative;
background:#ffffff;
padding-top:110px;
overflow:hidden;
border-top:
1px solid rgba(220, 219, 219, 0.06);
}
/* RED GLOW */
.footer::before{
content:'';
position:absolute;
top:-250px;
right:-250px;
width:600px;
height:600px;
background:
radial-gradient(
circle,
rgba(255,0,0,0.12),
transparent 70%
);
pointer-events:none;
}
/* =========================
TOP
========================= */
.footer-top{
position:relative;
z-index:2;
padding:0 7% 70px;
display:grid;
grid-template-columns:
1.5fr 1fr 1fr 1fr;
gap:60px;
border-bottom:
1px solid rgba(255,255,255,0.08);
}
/* =========================
BRAND
========================= */
.footer-brand img{
width:78px;
margin-bottom:22px;
}
.footer-brand h2{
font-size:2.2rem;
color:#000000;
margin-bottom:18px;
letter-spacing:0.05em;
font-family:'Space Grotesk', sans-serif;
}
.footer-brand p{
color:#9d9d9d;
line-height:1.9;
max-width:420px;
}
/* =========================
SOCIALS
========================= */
.footer-socials{
display:flex;
gap:14px;
margin-top:30px;
}
.footer-socials a{
width:46px;
height:46px;
border-radius:50%;
background:#ffffff;
color:#111111;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
transition:0.35s ease;
}
.footer-socials a:hover{
background:#ff0000;
transform:translateY(-4px);
}
/* =========================
COLUMNS
========================= */
.footer-column h3{
color:#000000;
font-size:1.2rem;
margin-bottom:28px;
font-family:'Space Grotesk', sans-serif;
}
.footer-column{
display:flex;
flex-direction:column;
}
.footer-column a{
color:#8d8d8d;
text-decoration:none;
margin-bottom:16px;
line-height:1.7;
transition:0.3s ease;
}
.footer-column a:hover{
color:#010000;
transform:translateX(4px);
}
/* =========================
STRIP
========================= */
.footer-strip{
padding:40px 7%;
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:24px;
border-bottom:
1px solid rgba(255,255,255,0.08);
}
/* ITEM */
.strip-item{
background:#101010;
border:
1px solid rgba(255,255,255,0.05);
border-radius:24px;
padding:28px;
transition:0.35s ease;
}
/* HOVER */
.strip-item:hover{
background:#151515;
border-color:
rgba(255,0,0,0.3);
transform:translateY(-6px);
}
.strip-item h4{
color:#ffffff;
font-size:1rem;
margin-bottom:10px;
}
.strip-item p{
color:#8f8f8f;
line-height:1.7;
}
/* =========================
BOTTOM
========================= */
.footer-bottom{
padding:28px 7%;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:20px;
}
.footer-bottom p{
color:#777777;
font-size:0.92rem;
}
/* LINKS */
.footer-bottom-links{
display:flex;
gap:24px;
}
.footer-bottom-links a{
color:#777777;
text-decoration:none;
transition:0.3s ease;
}
.footer-bottom-links a:hover{
color:#860000;
}
/* =========================
RESPONSIVE
========================= */
@media(max-width:1100px){
.footer-top{
grid-template-columns:
1fr 1fr;
}
.footer-strip{
grid-template-columns:
1fr 1fr;
}
}
@media(max-width:700px){
.footer{
padding-top:80px;
}
.footer-top{
grid-template-columns:1fr;
gap:50px;
padding:0 5% 60px;
}
.footer-strip{
grid-template-columns:1fr;
padding:30px 5%;
}
.footer-bottom{
padding:24px 5%;
flex-direction:column;
align-items:flex-start;
}
}