/* ==========================================
   Universe Yachting
   Premium Template
========================================== */

:root{

--navy:#071827;
--ocean:#0B3556;
--brand:#01708F;
--accent:#18A9CC;
--gold:#D4B05F;

--light:#F5F8FA;
--white:#ffffff;

--text:#2E3A45;

--radius:18px;

--shadow:
0 15px 50px rgba(0,0,0,.12);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;
font-size:17px;
line-height:1.7;

color:var(--text);

background:var(--light);

overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

.container{

width:min(1280px,92%);
margin:auto;

}

/* ===========================
HEADER
=========================== */

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

transition:.35s;

background:rgba(7,24,39,.25);

backdrop-filter:blur(12px);

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

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

height:90px;

}

.logo{

font-family:'Poppins',sans-serif;

font-size:28px;

font-weight:700;

color:#fff;

text-decoration:none;

}

.logo span{

color:var(--accent);

}

.navigation ul{

display:flex;

gap:45px;

list-style:none;

}

.navigation a{

color:#fff;

text-decoration:none;

font-weight:500;

position:relative;

}

.navigation a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--accent);

transition:.35s;

}

.navigation a:hover::after{

width:100%;

}

.btn-nav{

background:var(--accent);

padding:14px 26px;

border-radius:999px;

text-decoration:none;

font-weight:600;

color:#fff;

transition:.35s;

}

.btn-nav:hover{

transform:translateY(-3px);

box-shadow:var(--shadow);

}

.mobile-toggle{

display:none;

}

/* ===========================
HERO
=========================== */

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(rgba(7,24,39,.82),
rgba(7,24,39,.82)),

url(images/hero.jpg)
center center/cover;

}

.hero-content{

position:relative;

z-index:2;

color:#fff;

padding-top:90px;

}

.eyebrow{

text-transform:uppercase;

letter-spacing:4px;

font-size:.9rem;

color:var(--gold);

margin-bottom:20px;

}

.hero h1{

font-family:'Poppins',sans-serif;

font-size:4.3rem;

line-height:1.05;

max-width:850px;

margin-bottom:30px;

}

.hero-text{

font-size:1.2rem;

max-width:700px;

opacity:.9;

margin-bottom:45px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:70px;

}

.btn-primary{

background:var(--accent);

padding:18px 34px;

border-radius:999px;

text-decoration:none;

font-weight:600;

color:#fff;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

border:2px solid rgba(255,255,255,.25);

padding:18px 34px;

border-radius:999px;

text-decoration:none;

color:#fff;

transition:.35s;

}

.btn-secondary:hover{

background:#fff;

color:var(--navy);

}

/* ===========================
Statistics
=========================== */

.hero-stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

max-width:850px;

}

.hero-stats div{

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

backdrop-filter:blur(15px);

padding:30px;

border-radius:var(--radius);

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

}

.hero-stats h2{

font-size:2.4rem;

margin-bottom:8px;

font-family:'Poppins',sans-serif;

color:#fff;

}

.hero-stats span{

color:#d5dce2;

}


/* ==========================================
SECTION TITLES
========================================== */

.section-title{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-title span{

display:inline-block;

font-size:.85rem;

text-transform:uppercase;

letter-spacing:3px;

color:var(--accent);

margin-bottom:18px;

font-weight:700;

}

.section-title h2{

font-family:'Poppins',sans-serif;

font-size:2.8rem;

margin-bottom:20px;

color:var(--navy);

}

.section-title p{

font-size:1.05rem;

color:#64748b;

}

/* ==========================================
WHY US
========================================== */

.why-us{

padding:120px 0;

background:#fff;

}

.features-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.feature-card{

padding:40px;

background:#fff;

border-radius:20px;

box-shadow:0 20px 50px rgba(0,0,0,.05);

transition:.35s;

border:1px solid #edf1f5;

}

.feature-card:hover{

transform:translateY(-10px);

}

.icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

border-radius:50%;

background:linear-gradient(135deg,var(--accent),var(--brand));

margin-bottom:25px;

}

.feature-card h3{

margin-bottom:15px;

font-size:1.3rem;

font-family:'Poppins';

color:var(--navy);

}

.feature-card p{

color:#64748b;

}

/* ==========================================
SERVICES
========================================== */

.services{

padding:120px 0;

background:#f6f8fa;

}

.services-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.service-card{

background:#fff;

padding:40px;

border-radius:20px;

transition:.35s;

box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.service-card:hover{

transform:translateY(-10px);

}

.service-card h3{

margin-bottom:18px;

font-family:'Poppins';

color:var(--navy);

}

.service-card p{

margin-bottom:25px;

color:#64748b;

}

.service-card a{

text-decoration:none;

font-weight:600;

color:var(--brand);

}

/* ==========================================
REVEAL ANIMATION
========================================== */

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:none;

}

/* ==========================================
TABLET
========================================== */

@media (max-width:1100px){

.features-grid{

grid-template-columns:repeat(2,1fr);

}

.services-grid{

grid-template-columns:repeat(2,1fr);

}

.hero h1{

font-size:3.4rem;

}

}

/* ==========================================
MOBILE
========================================== */

@media (max-width:768px){

.navigation{

display:none;

}

.mobile-toggle{

display:flex;
flex-direction:column;
gap:5px;
cursor:pointer;

}

.mobile-toggle span{

width:28px;
height:3px;
background:#fff;
border-radius:20px;

}

.navigation.open{

display:block;

position:absolute;

top:90px;

left:0;

width:100%;

background:var(--navy);

padding:30px;

}

.navigation.open ul{

display:flex;

flex-direction:column;

gap:25px;

}

.hero{

text-align:center;

}

.hero h1{

font-size:2.5rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

grid-template-columns:repeat(2,1fr);

}

.features-grid,
.services-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:2rem;

}

}

/* ==========================================
PROCESS
========================================== */

.process{

padding:120px 0;

background:#fff;

}

.timeline{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:35px;

}

.timeline-item{

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.05);

text-align:center;

}

.number{

width:70px;

height:70px;

margin:auto auto 25px;

border-radius:50%;

background:linear-gradient(135deg,var(--brand),var(--accent));

display:flex;

align-items:center;

justify-content:center;

font-size:1.6rem;

font-weight:700;

color:#fff;

}

/* ==========================================
INDUSTRIES
========================================== */

.industries{

padding:120px 0;

background:#f7f9fb;

}

.industry-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.industry-card{

background:#fff;

padding:45px;

border-radius:20px;

text-align:center;

font-size:3rem;

transition:.35s;

box-shadow:0 15px 35px rgba(0,0,0,.05);

}

.industry-card:hover{

transform:translateY(-8px);

}

.industry-card h3{

font-size:1.2rem;

margin-top:20px;

color:var(--navy);

}

/* ==========================================
COVERAGE
========================================== */

.coverage{

padding:120px 0;

background:linear-gradient(135deg,var(--navy),var(--ocean));

color:#fff;

}

.coverage-box{

display:flex;

justify-content:center;

text-align:center;

}

.countries{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:15px;

margin-top:35px;

}

.countries span{

padding:10px 18px;

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

border-radius:999px;

}

/* ==========================================
PRICING
========================================== */

.pricing{

padding:120px 0;

background:#fff;

}

.pricing-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:40px;

}

.pricing-card{

padding:45px;

border-radius:24px;

box-shadow:0 15px 35px rgba(0,0,0,.05);

}

.pricing-card ul{

list-style:none;

margin-top:30px;

}

.pricing-card li{

padding:12px 0;

}

.featured{

background:linear-gradient(135deg,var(--brand),var(--accent));

color:#fff;

}

.featured h3{

color:#fff;

}

/* ==========================================
CTA
========================================== */

.cta{

padding:140px 0;

text-align:center;

background:linear-gradient(135deg,var(--navy),#0f3b63);

color:#fff;

}

.cta h2{

font-size:3rem;

margin-bottom:20px;

font-family:"Poppins",sans-serif;

}

.cta p{

max-width:700px;

margin:0 auto 45px;

opacity:.9;

}


@media (max-width:992px){

.timeline{

grid-template-columns:repeat(2,1fr);

}

.industry-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media (max-width:768px){

.timeline,
.industry-grid,
.pricing-grid{

grid-template-columns:1fr;

}

.cta h2{

font-size:2.2rem;

}

}


/* ==========================================
PROJECTS
========================================== */

.projects{

padding:120px 0;
background:#fff;

}

.project-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;

}

.project-card{

background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 45px rgba(0,0,0,.08);
transition:.35s;

}

.project-card:hover{

transform:translateY(-8px);

}

.project-card img{

height:260px;
width:100%;
object-fit:cover;

}

.project-content{

padding:30px;

}

/* ==========================================
NUMBERS
========================================== */

.numbers{

padding:120px 0;
background:linear-gradient(135deg,var(--navy),var(--ocean));
color:#fff;

}

.numbers .container{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:35px;

}

.number-box{

text-align:center;

}

.number-box h2{

font-size:4rem;
font-family:'Poppins';

}

/* ==========================================
TESTIMONIALS
========================================== */

.testimonials{

padding:120px 0;
background:#f7f9fb;

}

.testimonial-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.testimonial{

background:#fff;
padding:40px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,.05);

}

/* ==========================================
CONTACT BANNER
========================================== */

.contact-banner{

padding:120px 0;
text-align:center;
background:#fff;

}

.contact-buttons{

display:flex;
justify-content:center;
gap:20px;
margin-top:35px;

}

/* ==========================================
FOOTER
========================================== */

footer{

background:#071827;
color:#fff;
padding:80px 0 30px;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;

}

footer h4,
footer h3{

margin-bottom:20px;

}

footer ul{

list-style:none;
padding:0;

}

footer li{

margin-bottom:12px;

}

footer a{

color:#d8e7ef;
text-decoration:none;

}

footer a:hover{

color:#fff;

}

.copyright{

text-align:center;
padding-top:40px;
margin-top:40px;
border-top:1px solid rgba(255,255,255,.1);

}


@media(max-width:992px){

.project-grid,
.testimonial-grid,
.numbers .container,
.footer-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.project-grid,
.testimonial-grid,
.numbers .container,
.footer-grid{

grid-template-columns:1fr;

}

.contact-buttons{

flex-direction:column;

}

.number-box h2{

font-size:3rem;

}

}