*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',Arial,sans-serif;
}

body{

background:#050505;

color:white;

overflow-x:hidden;

}


/* NAVBAR */

.navbar{

padding:10px 6%;

background:rgba(0,0,0,.85);

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

position:sticky;

top:0;

backdrop-filter:blur(12px);

z-index:1000;

border-bottom:1px solid rgba(212,160,23,.2);

}


.logo-img{

width:200px;

height:auto;

}


nav a{

color:white;

margin:12px;

text-decoration:none;

font-weight:600;

transition:.3s;

letter-spacing:.5px;

}


nav a:hover{

color:#d4a017;

}


/* HERO */

.hero{

min-height:100vh;

padding:10px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:10px;

background-size:cover;

background-position:center;

position:relative;

}


.hero-overlay{

max-width:900px;

}


.hero h1{

font-size:72px;

font-weight:800;

line-height:1.1;

margin-bottom:10px;

}


.hero h1 span{

display:block;

color:#d4a017;

}


.hero-services{

color:#d4a017;

font-size:20px;

font-weight:600;

letter-spacing:2px;

margin-bottom:25px;

}


.hero-text{

max-width:950px;

line-height:1.8;

margin:auto;

}


.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}


.gold-btn{

background:#d4a017;

padding:16px 28px;

border-radius:8px;

text-decoration:none;

font-weight:700;

color:black;

transition:.3s;

}


.gold-btn:hover{

transform:translateY(-4px);

}


.outline-btn{

border:2px solid #d4a017;

padding:16px 28px;

border-radius:8px;

text-decoration:none;

color:white;

font-weight:700;

transition:.3s;

}


.outline-btn:hover{

background:#d4a017;

color:black;

}


/* CARDS */

.cards{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:30px;

padding:90px 6%;

background:#0b0b0b;

}


.card{

background:

rgba(255,255,255,.05);

padding:40px;

border-radius:18px;

backdrop-filter:blur(10px);

transition:.3s;

border:

1px solid

rgba(212,160,23,.12);

}


.card:hover{

transform:

translateY(-10px);

}


.card h2{

font-size:30px;

margin-bottom:20px;

color:#d4a017;

}


.card p{

line-height:1.8;

color:#d5d5d5;

}


/* FOOTER */

footer{

padding:30px;

text-align:center;

background:black;

color:#999;

}


/* PAGE BACKGROUNDS */

.index .hero{

background-image:

linear-gradient(

rgba(0,0,0,.72),

rgba(0,0,0,.72)

),

url("../assets/home-hero.jpg");

}


.about .hero{

background-image:

linear-gradient(

rgba(0,0,0,.75),

rgba(0,0,0,.75)

),

url("../assets/about-bg.jpg");

}


.automotive .hero{

background-image:

linear-gradient(

rgba(0,0,0,.72),

rgba(0,0,0,.72)

),

url("../assets/automotive-bg.jpg");

}


.engineering .hero{

background-image:

linear-gradient(

rgba(0,0,0,.72),

rgba(0,0,0,.72)

),

url("../assets/engineering-bg.jpg");

}


.logistics .hero{

background-image:

linear-gradient(

rgba(0,0,0,.72),

rgba(0,0,0,.72)

),

url("../assets/logistics-bg.jpg");

}


.marine-services .hero{

background-image:

linear-gradient(

rgba(0,0,0,.72),

rgba(0,0,0,.72)

),

url("../assets/marine-bg.jpg");

}


.procurement .hero{

background-image:

linear-gradient(

rgba(0,0,0,.72),

rgba(0,0,0,.72)

),

url("../assets/procurement-bg.jpg");

}


.contact .hero{

background-image:

linear-gradient(

rgba(0,0,0,.72),

rgba(0,0,0,.72)

),

url("../assets/contact-bg.jpg");

}


/* MOBILE */

@media(max-width:900px){

.hero h1{

font-size:48px;

}

.hero-text{

font-size:18px;

}

.logo-img{

width:150px;

}

}
.auto-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

justify-content:center;

margin-top:35px;

}


.auto-buttons a,

.auto-buttons button{

text-decoration:none;

}


.popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:

rgba(0,0,0,.85);

z-index:9999;

}


.popup-content{

background:#111;

max-width:650px;

width:90%;

padding:40px;

border-radius:14px;

margin:5% auto;

position:relative;

}


.popup input,

.popup textarea{

width:100%;

padding:15px;

margin-bottom:15px;

background:#1a1a1a;

border:none;

border-radius:8px;

color:white;

}


.close{

position:absolute;

right:20px;

top:15px;

font-size:32px;

cursor:pointer;

color:#d4a017;

}
.whatsapp-chat{

position:fixed;

bottom:25px;

right:25px;

z-index:9999;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

box-shadow:

0 5px 18px

rgba(0,0,0,.35);

transition:.3s;

}

.whatsapp-chat:hover{

transform:

scale(1.12);

}

.whatsapp-chat img{

width:38px;

height:38px;

}
.gallery-grid{
display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(

320px,

1fr

)

);

gap:30px;

padding:20px;

background:#111;

padding:20px;

border-radius:14px;

text-align:center;

}


.car-card img{

width:100%;

height:220px;

object-fit:cover;

border-radius:10px;

}


.price{

font-size:28px;

color:#d4a017;

font-weight:700;

margin:15px 0;

}
.vehicle-img{

cursor:pointer;

transition:.3s;

}


.vehicle-img:hover{

transform:scale(1.03);

}
.gallery-intro{

max-width:950px;

margin:25px auto;

font-size:19px;

line-height:1.9;

color:#dddddd;

text-align:center;

}
.hero h1{

color:#d4a017;

}
.gallery-intro{

color:#dddddd;

}

.gallery-intro strong{

color:#d4a017;

}
.gold-btn{

background:#d4a017;

color:black;

font-weight:700;

border:none;

padding:14px 28px;

border-radius:8px;

transition:.3s;

}


.gold-btn:hover{

background:#f1c44c;

transform:translateY(-3px);

}
nav a:hover{

color:#d4a017;

}
.cost-page .hero{

height:45vh;

padding-top:120px;

}


.estimate-section{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(350px,1fr));

gap:40px;

padding:70px 8%;

}


.estimate-card{

background:#111;

padding:40px;

border-radius:16px;

}


.estimate-card h2{

color:#d4a017;

margin-bottom:25px;

font-size:34px;

}


.estimate-form input,

.estimate-form select,

.estimate-form textarea{

width:100%;

padding:16px;

margin-bottom:18px;

background:#1b1b1b;

border:none;

border-radius:8px;

color:white;

font-size:16px;

}


.estimate-form textarea{

height:140px;

resize:none;

}


.estimate-info{

display:flex;

flex-direction:column;

gap:25px;

}


.info-box{

background:#111;

padding:30px;

border-radius:14px;

}


.info-box h3{

color:#d4a017;

margin-bottom:15px;

}


.info-box p{

line-height:1.8;

color:#dddddd;

}
.auto-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:40px;

}

.gold-btn{

background:#d4a017;

border:none;

padding:14px 24px;

border-radius:8px;

font-weight:700;

cursor:pointer;

}

.popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:

rgba(0,0,0,.85);

z-index:9999;

}

.popup-content{

background:#111;

width:90%;

max-width:600px;

margin:5% auto;

padding:40px;

border-radius:12px;

position:relative;

}

.popup input,

.popup textarea{

width:100%;

padding:15px;

margin-bottom:15px;

background:#1c1c1c;

border:none;

color:white;

border-radius:8px;

}

.close{

position:absolute;

right:20px;

top:15px;

font-size:28px;

cursor:pointer;

color:#d4a017;

}
.whatsapp-chat{

position:fixed;

bottom:25px;

right:25px;

z-index:9999;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

box-shadow:

0 5px 18px

rgba(0,0,0,.35);

transition:.3s;

}

.whatsapp-chat:hover{

transform:

scale(1.12);

}

.whatsapp-chat img{

width:38px;

height:38px;

}
.auto-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-top:35px;

}


.auto-buttons .gold-btn{

min-width:180px;

text-align:center;

}


@media(max-width:768px){

.auto-buttons{

flex-direction:column;

align-items:center;

}

.auto-buttons .gold-btn{

width:260px;

}

}
.popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.9);

z-index:99999;

overflow:auto;

}


.popup-content{

background:#111;

max-width:650px;

margin:60px auto;

padding:40px;

border-radius:15px;

border:1px solid #d4a017;

}


.popup-content h2{

color:#d4a017;

margin-bottom:25px;

}


.popup-content input,

.popup-content textarea{

width:100%;

padding:15px;

margin-bottom:15px;

background:#1b1b1b;

border:none;

border-radius:8px;

color:white;

}


.close{

float:right;

font-size:32px;

cursor:pointer;

color:#d4a017;

}
/* AUTOMOTIVE PAGE */

.auto-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-top:35px;

}


.auto-buttons .gold-btn{

min-width:180px;

text-align:center;

}


/* STATS SECTION */

.stats-section{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:25px;

padding:70px 6%;

background:#080808;

}


.stat-box{

background:

rgba(255,255,255,.04);

padding:35px;

text-align:center;

border-radius:18px;

border:1px solid rgba(212,160,23,.15);

transition:.3s;

}


.stat-box:hover{

transform:translateY(-8px);

}


.stat-box h2{

font-size:42px;

color:#d4a017;

margin-bottom:10px;

}


.stat-box p{

color:#ddd;

font-size:18px;

}


/* ORDER POPUP */

.popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.92);

z-index:99999;

overflow:auto;

}


.popup-content{

background:#111;

max-width:650px;

margin:60px auto;

padding:40px;

border-radius:18px;

border:1px solid rgba(212,160,23,.25);

}


.popup-content h2{

color:#d4a017;

margin-bottom:25px;

text-align:center;

}


.popup-content input,

.popup-content textarea{

width:100%;

padding:15px;

margin-bottom:15px;

background:#1b1b1b;

border:none;

border-radius:8px;

color:white;

font-size:16px;

}


.popup-content textarea{

height:120px;

resize:none;

}


.close{

float:right;

font-size:32px;

cursor:pointer;

color:#d4a017;

}


/* WHATSAPP BUTTON */

.whatsapp-chat{

position:fixed;

bottom:25px;

right:25px;

z-index:9999;

}


.whatsapp-chat img{

width:60px;

height:60px;

}


/* MOBILE */

@media(max-width:768px){

.auto-buttons{

flex-direction:column;

align-items:center;

}

.auto-buttons .gold-btn{

width:260px;

}

.stats-section{

grid-template-columns:1fr;

padding:50px 20px;

}

.stat-box h2{

font-size:34px;

}

.popup-content{

width:92%;

padding:25px;

}

.whatsapp-chat img{

width:55px;

height:55px;

}

}
/* HAMBURGER MENU */

.menu-toggle{

display:none;

font-size:34px;

color:#d4a017;

cursor:pointer;

}

@media(max-width:768px){

.menu-toggle{

display:block;

}

#mobileMenu{

display:none;

position:absolute;

top:100%;

left:0;

width:100%;

background:#000;

flex-direction:column;

z-index:9999;

}

#mobileMenu.show{

display:flex;

}

#mobileMenu a{

display:block;

padding:18px;

margin:0;

text-align:center;

border-bottom:1px solid rgba(255,255,255,.08);

}

}

/* COST ESTIMATION PAGE */

.cost-page .hero{

height:65vh;

}

.estimate-section{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(350px,1fr));

gap:40px;

padding:70px 6%;

background:#0b0b0b;

}

.estimate-card{

background:rgba(255,255,255,.04);

padding:35px;

border-radius:18px;

border:1px solid rgba(212,160,23,.15);

}

.estimate-card h2{

color:#d4a017;

margin-bottom:25px;

}

.estimate-form input,
.estimate-form select,
.estimate-form textarea{

width:100%;

padding:15px;

margin-bottom:15px;

background:#1b1b1b;

border:none;

border-radius:8px;

color:white;

font-size:16px;

}

.estimate-form textarea{

height:130px;

resize:none;

}

.info-box{

background:rgba(255,255,255,.04);

padding:25px;

border-radius:15px;

margin-bottom:20px;

}

.info-box h3{

color:#d4a017;

margin-bottom:10px;

}

.active-btn{

background:#f1c44c !important;

color:black !important;

}

@media(max-width:768px){

.estimate-section{

grid-template-columns:1fr;

padding:40px 20px;

}

}
/* GALLERY PAGE */

.gallery-page .hero{

height:60vh;

}

.gallery-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:30px;

padding:70px 6%;

background:#0b0b0b;

}

.car-card{

background:#111;

padding:20px;

border-radius:16px;

text-align:center;

border:1px solid rgba(212,160,23,.15);

}

.car-card img{

width:100%;

height:240px;

object-fit:cover;

border-radius:10px;

cursor:pointer;

transition:.3s;

}

.car-card img:hover{

transform:scale(1.03);

}

.car-card h3{

margin-top:15px;

margin-bottom:10px;

}

.price{

font-size:28px;

font-weight:700;

color:#d4a017;

margin-bottom:20px;

}

.image-popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.95);

justify-content:center;

align-items:center;

z-index:99999;

}

.popup-large{

max-width:90%;

max-height:90%;

border-radius:12px;

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

padding:40px 20px;

}

.car-card img{

height:220px;

}

}
.engineering-panel{

display:grid;

grid-template-columns:250px 350px 1fr;

gap:25px;

padding:80px 6%;

background:#0b0b0b;

}

.engineering-menu{

display:flex;

flex-direction:column;

gap:12px;

}

.eng-btn{

background:#111;

color:white;

border:1px solid rgba(212,160,23,.15);

padding:18px;

text-align:left;

cursor:pointer;

border-radius:10px;

transition:.3s;

}

.active-eng{

background:#d4a017;

color:black;

font-weight:700;

}

.engineering-image img{

width:100%;

height:400px;

object-fit:cover;

border-radius:15px;

}

.engineering-content{

background:#111;

padding:35px;

border-radius:15px;

border:1px solid rgba(212,160,23,.15);

}

.eng-content{

display:none;

}

.active-content{

display:block;

}

.eng-content h2{

color:#d4a017;

margin-bottom:20px;

}

.eng-content p{

line-height:1.9;

color:#dddddd;

}

@media(max-width:768px){

.engineering-panel{

grid-template-columns:1fr;

padding:40px 20px;

}

.engineering-image img{

height:260px;

}

}
.marine-panel{

display:grid;

grid-template-columns:250px 350px 1fr;

gap:25px;

padding:80px 6%;

background:#0b0b0b;

}

.marine-menu{

display:flex;

flex-direction:column;

gap:12px;

}

.marine-btn{

background:#111;

color:white;

border:1px solid rgba(212,160,23,.15);

padding:18px;

text-align:left;

cursor:pointer;

border-radius:10px;

transition:.3s;

}

.active-marine{

background:#d4a017;

color:black;

font-weight:700;

}

.marine-image img{

width:100%;

height:400px;

object-fit:cover;

border-radius:15px;

}

.marine-content{

background:#111;

padding:35px;

border-radius:15px;

border:1px solid rgba(212,160,23,.15);

}

.marine-description{

display:none;

}

.active-marine-content{

display:block;

}

.marine-description h2{

color:#d4a017;

margin-bottom:20px;

}

.marine-description p{

line-height:1.9;

color:#dddddd;

}

@media(max-width:768px){

.marine-panel{

grid-template-columns:1fr;

padding:40px 20px;

}

.marine-image img{

height:260px;

}

}
.logistics-panel{

display:grid;

grid-template-columns:250px 350px 1fr;

gap:25px;

padding:80px 6%;

background:#0b0b0b;

}

.logistics-menu{

display:flex;

flex-direction:column;

gap:12px;

}

.logistics-btn{

background:#111;

color:white;

border:1px solid rgba(212,160,23,.15);

padding:18px;

text-align:left;

cursor:pointer;

border-radius:10px;

transition:.3s;

}

.active-logistics{

background:#d4a017;

color:black;

font-weight:700;

}

.logistics-image img{

width:100%;

height:400px;

object-fit:cover;

border-radius:15px;

}

.logistics-content{

background:#111;

padding:35px;

border-radius:15px;

border:1px solid rgba(212,160,23,.15);

}

.logistics-description{

display:none;

}

.active-logistics-content{

display:block;

}

.logistics-description h2{

color:#d4a017;

margin-bottom:20px;

}

.logistics-description p{

line-height:1.9;

color:#dddddd;

}

@media(max-width:768px){

.logistics-panel{

grid-template-columns:1fr;

padding:40px 20px;

}

.logistics-image img{

height:260px;

}

}
.procurement-panel{

display:grid;

grid-template-columns:250px 350px 1fr;

gap:25px;

padding:80px 6%;

background:#0b0b0b;

}

.procurement-menu{

display:flex;

flex-direction:column;

gap:12px;

}

.procurement-btn{

background:#111;

color:white;

border:1px solid rgba(212,160,23,.15);

padding:18px;

text-align:left;

cursor:pointer;

border-radius:10px;

transition:.3s;

}

.active-procurement{

background:#d4a017;

color:black;

font-weight:700;

}

.procurement-image img{

width:100%;

height:400px;

object-fit:cover;

border-radius:15px;

}

.procurement-content{

background:#111;

padding:35px;

border-radius:15px;

border:1px solid rgba(212,160,23,.15);

}

.procurement-description{

display:none;

}

.active-procurement-content{

display:block;

}

.procurement-description h2{

color:#d4a017;

margin-bottom:20px;

}

.procurement-description p{

line-height:1.9;

color:#dddddd;

}

@media(max-width:768px){

.procurement-panel{

grid-template-columns:1fr;

padding:40px 20px;

}

.procurement-image img{

height:260px;

}

}
.contact .hero{

min-height:60vh;

}

.contact .cards{

margin-bottom:0;

}

.contact .estimate-section{

padding-top:60px;

}

.contact .info-box{

margin-bottom:15px;

}

.contact .gold-btn{

display:inline-block;

margin-top:15px;

}
/* HOME PAGE DIVISIONS */

.index .card{

text-align:center;

}

.index .card .gold-btn{

display:inline-block;

margin-top:20px;

}

.index .card p{

min-height:120px;

}

/* WHY CHOOSE JJN HUB */

.why-section{

background:#080808;

padding:80px 6%;

}

.why-section .section-title{

max-width:900px;

margin:0 auto 60px;

text-align:center;

}

.why-section .section-title h2{

font-size:52px;

font-weight:800;

color:#d4a017;

margin-bottom:20px;

text-transform:uppercase;

}

.why-section .section-title p{

font-size:18px;

line-height:1.8;

color:#dddddd;

max-width:800px;

margin:0 auto;

}

@media(max-width:768px){

.why-section .section-title h2{

font-size:34px;

}

.why-section .section-title p{

font-size:16px;

}

}
.hub-name{

display:block;

color:#d4a017;

}

@media(max-width:768px){

.hero h1{

font-size:42px;

line-height:1.1;

}

}
/* FOOTER */

.site-footer{

background:#050505;

border-top:1px solid rgba(212,160,23,.2);

padding:50px 6% 20px;

text-align:center;

}

.footer-top{

margin-bottom:25px;

}

.footer-logo-img{

width:100px;

height:auto;

display:block;

margin:0 auto 15px;

}

.footer-tagline{

color:#cccccc;

font-size:18px;

line-height:1.8;

}

.footer-nav{

max-width:1200px;

margin:30px auto;

line-height:2.2;

}

.footer-nav a{

color:#dddddd;

text-decoration:none;

font-size:15px;

font-weight:500;

padding:0 4px;

transition:.3s;

}

.footer-nav a:hover{

color:#d4a017;

}

.footer-nav span{

color:#666666;

padding:0 4px;

}

.footer-bottom{

padding-top:20px;

border-top:1px solid rgba(255,255,255,.08);

color:#999999;

font-size:14px;

}

@media(max-width:768px){

.footer-logo-img{

width:80px;

}

.footer-tagline{

font-size:16px;

}

.footer-nav{

line-height:2.5;

}

.footer-nav a{

font-size:14px;

}

}