*{
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{

height:70vh;

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:1000px;

}


.hero h1{
font-size:72px;
}

@media(max-width:768px){

.hero h1{

font-size:42px;

}


.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{

font-size:20px;

line-height:1.9;

color:#dddddd;

max-width:800px;

margin:auto;

margin-bottom:35px;

}


.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;

}
.car-search-page .hero{

height:45vh;

padding-top:120px;

background-image:

linear-gradient(

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

rgba(0,0,0,.75)

),

url("../assets/car-search-bg.jpg");

background-size:cover;

background-position:center;

}


.search-section{

display:grid;

grid-template-columns:

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

gap:40px;

padding:70px 8%;

}


.search-card{

background:#111;

padding:40px;

border-radius:16px;

}


.search-card h2{

color:#d4a017;

margin-bottom:25px;

font-size:34px;

}


.search-form input,

.search-form select,

.search-form textarea{

width:100%;

padding:16px;

margin-bottom:18px;

background:#1b1b1b;

border:none;

border-radius:8px;

color:white;

font-size:16px;

}


.search-form textarea{

height:140px;

resize:none;

}


.search-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-help-page .hero{

height:45vh;

padding-top:120px;

background-image:

linear-gradient(

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

rgba(0,0,0,.75)

),

url("../assets/auto-help-bg.jpg");

background-size:cover;

background-position:center;

}


.help-section{

display:grid;

grid-template-columns:

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

gap:40px;

padding:70px 8%;

}


.help-card{

background:#111;

padding:40px;

border-radius:16px;

}


.help-card h2{

color:#d4a017;

margin-bottom:25px;

font-size:34px;

}


.help-form input,

.help-form select,

.help-form textarea{

width:100%;

padding:16px;

margin-bottom:18px;

background:#1b1b1b;

border:none;

border-radius:8px;

color:white;

font-size:16px;

}


.help-form textarea{

height:140px;

resize:none;

}


.help-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;

}
.order-page .hero{

height:45vh;

padding-top:120px;

background-image:

linear-gradient(

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

rgba(0,0,0,.75)

),

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

background-size:cover;

background-position:center;

}


.order-section{

display:grid;

grid-template-columns:

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

gap:40px;

padding:70px 8%;

}


.order-card{

background:#111;

padding:40px;

border-radius:16px;

}


.order-card h2{

color:#d4a017;

margin-bottom:25px;

font-size:34px;

}


.order-form input,

.order-form select,

.order-form textarea{

width:100%;

padding:16px;

margin-bottom:18px;

background:#1b1b1b;

border:none;

border-radius:8px;

color:white;

font-size:16px;

}


.order-form textarea{

height:140px;

resize:none;

}


.order-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;

}
.procurement-page .hero{

height:55vh;

padding-top:120px;

background-image:

linear-gradient(

rgba(0,0,0,.78),

rgba(0,0,0,.78)

),

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

background-size:cover;

background-position:center;

}


.procurement-page .hero-text{

max-width:950px;

margin:auto;

line-height:1.9;

}


.procurement-page .cards{

padding-top:40px;

}
.marine-page .hero{

height:65vh;

padding-top:120px;

background-image:

linear-gradient(

rgba(0,0,0,.80),

rgba(0,0,0,.80)

),

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

background-size:cover;

background-position:center;

}


.marine-page .hero-text{

max-width:1050px;

margin:auto;

line-height:1.9;

font-size:20px;

}


.marine-page .cards{

padding-top:50px;

}


.marine-highlight{

padding:80px 8%;

background:#0b0b0b;

}


.highlight-box{

background:#111;

padding:50px;

border-radius:18px;

border-left:5px solid #d4a017;

}


.highlight-box h2{

color:#d4a017;

margin-bottom:25px;

font-size:42px;

}


.highlight-box p{

line-height:2;

font-size:18px;

color:#dddddd;

}
.contact-page .hero{

height:55vh;

padding-top:120px;

background-image:

linear-gradient(

rgba(0,0,0,.80),

rgba(0,0,0,.80)

),

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

background-size:cover;

background-position:center;

}


.contact-section{

display:grid;

grid-template-columns:

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

gap:40px;

padding:70px 8%;

}


.contact-info{

display:flex;

flex-direction:column;

gap:25px;

}


.contact-form-box{

background:#111;

padding:40px;

border-radius:18px;

}


.contact-form-box h2{

color:#d4a017;

margin-bottom:25px;

font-size:36px;

}


.contact-form input,

.contact-form select,

.contact-form textarea{

width:100%;

padding:16px;

margin-bottom:18px;

background:#1b1b1b;

border:none;

border-radius:8px;

color:white;

font-size:16px;

}


.contact-form textarea{

height:160px;

resize:none;

}


.map-section{

padding:0 8% 80px 8%;

}


.map-box{

background:#111;

padding:35px;

border-radius:18px;

}


.map-box h2{

color:#d4a017;

margin-bottom:15px;

}


.map-box iframe{

width:100%;

height:400px;

border:none;

border-radius:12px;

margin-top:20px;

}
.engineering-page .hero{

height:65vh;

padding-top:120px;

background-image:

linear-gradient(

rgba(0,0,0,.80),

rgba(0,0,0,.80)

),

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

background-size:cover;

background-position:center;

}


.engineering-page .hero-text{

max-width:1050px;

margin:auto;

line-height:1.9;

font-size:20px;

}


.engineering-page .cards{

padding-top:50px;

}


.engineering-highlight{

padding:80px 8%;

background:#0b0b0b;

}


.highlight-box{

background:#111;

padding:50px;

border-radius:18px;

border-left:5px solid #d4a017;

}


.highlight-box h2{

color:#d4a017;

margin-bottom:25px;

font-size:42px;

}


.highlight-box p{

line-height:2;

font-size:18px;

color:#dddddd;

}
.logistics-page .hero{

height:65vh;

padding-top:120px;

background-image:

linear-gradient(

rgba(0,0,0,.80),

rgba(0,0,0,.80)

),

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

background-size:cover;

background-position:center;

}


.logistics-page .hero-text{

max-width:1050px;

margin:auto;

line-height:1.9;

font-size:20px;

}


.logistics-page .cards{

padding-top:50px;

}


.logistics-highlight{

padding:80px 8%;

background:#0b0b0b;

}
/* MOBILE RESPONSIVE DESIGN */

@media screen and (max-width:768px){

/* Navigation */

.navbar{

flex-direction:column;

align-items:center;

padding:15px;

}

.logo-img{

width:140px;

height:auto;

margin-bottom:15px;

}

nav{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:12px;

}

nav a{

font-size:18px;

margin:0;

}

/* Hero Section */

.hero{

height:auto;

min-height:70vh;

padding:120px 20px 60px;

}

.hero-overlay{

width:100%;

max-width:100%;

padding:0 10px;

}

.hero h1{

font-size:42px;

line-height:1.1;

margin-bottom:15px;

}

.hero-services{

font-size:18px;

line-height:1.6;

}

.hero-text{

font-size:20px;

line-height:1.8;

max-width:100%;

}

/* Buttons */

.auto-buttons{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:15px;

margin-top:25px;

}

.gold-btn{

width:100%;

max-width:280px;

padding:15px;

font-size:18px;

}

/* Cards */

.cards{

grid-template-columns:1fr;

padding:30px 15px;

gap:20px;

}

.card{

padding:25px;

}

.card h2{

font-size:28px;

}

.card p{

font-size:18px;

line-height:1.8;

}

/* Gallery */

.gallery-grid{

grid-template-columns:1fr;

padding:20px 10px;

}

.vehicle-img{

width:100%;

height:auto;

}

.car-card h3{

font-size:30px;

}

.price{

font-size:48px;

}

/* Forms */

input,

select,

textarea{

font-size:16px;

width:100%;

}

.popup-content{

width:95%;

max-width:500px;

padding:25px;

}

/* Contact */

.contact-section{

grid-template-columns:1fr;

}

.map-box iframe{

height:300px;

}

/* Footer */

footer{

padding:20px;

font-size:16px;

text-align:center;

}

}