/*=================================
Marine Hero
==================================*/

.marine-hero{

padding:180px 0 100px;
background:linear-gradient(135deg,#003b73,#0060af);
color:#fff;

overflow:hidden;

}

.marine-label{

display:inline-block;

padding:8px 18px;

border-radius:30px;

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

margin-bottom:20px;

font-weight:600;

letter-spacing:1px;

}

.marine-hero h1{

font-size:58px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.marine-hero p{

font-size:18px;

opacity:.9;

line-height:1.8;

}

.marine-shortcut{

margin-top:-60px;

position:relative;

z-index:5;

}

.marine-card{

display:block;

background:#fff;

padding:35px;

border-radius:18px;

text-decoration:none;

color:#222;

height:100%;

box-shadow:0 10px 35px rgba(0,0,0,.08);

transition:.35s;

}

.marine-card:hover{

transform:translateY(-8px);

color:inherit;

}

.marine-icon{

width:70px;

height:70px;

background:var(--primary);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

font-size:28px;

margin-bottom:20px;

}

.section-label{

display:inline-block;

color:var(--primary);

font-weight:700;

margin-bottom:10px;

letter-spacing:1px;

}

.marine-check{

padding:0;

margin-top:30px;

list-style:none;

}

.marine-check li{

padding:12px 0;

font-weight:500;

}

.marine-check li::before{

content:"✓";

color:#00b050;

margin-right:10px;

font-weight:bold;

}

/*=================================
Marine Solution
==================================*/

.marine-solutions{

background:#f8fafc;

}

.section-title{

font-size:42px;

font-weight:800;

margin-bottom:15px;

}

.section-desc{

max-width:720px;

margin:auto;

color:#666;

line-height:1.8;

}

.marine-solutions h3{

font-size:34px;

font-weight:700;

margin-bottom:20px;

}

.marine-solutions p{

font-size:17px;

line-height:1.9;

color:#555;

margin-bottom:30px;

}

.marine-solutions img{

transition:.4s;

}

.marine-solutions img:hover{

transform:scale(1.03);

}

/*==================================
Marine Detail
===================================*/

.marine-category{

display:inline-block;

padding:6px 16px;

background:#eaf4ff;

color:var(--primary);

font-weight:700;

font-size:13px;

border-radius:30px;

margin-bottom:15px;

letter-spacing:.5px;

}

.marine-feature{

list-style:none;

padding:0;

margin:25px 0;

}

.marine-feature li{

padding:8px 0;

font-weight:500;

color:#444;

}

.marine-feature li::before{

content:"✓";

color:#00a651;

font-weight:bold;

margin-right:10px;

}

.marine-image{

transition:.35s;

border-radius:20px;

}

.marine-image:hover{

transform:scale(1.02);

box-shadow:0 20px 45px rgba(0,0,0,.15);

}

/*=================================
Popular Products
==================================*/

.product-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

height:100%;

}

.product-card:hover{

transform:translateY(-8px);

}

.product-body{

padding:25px;

}

.placeholder-image{

height:220px;

display:flex;

align-items:center;

justify-content:center;

background:#f5f7fb;

font-size:70px;

color:#bbb;

}

/*=================================
Certification
==================================*/

.certification-logo{

max-height:70px;

opacity:.8;

transition:.3s;

}

.certification-logo:hover{

opacity:1;

transform:scale(1.08);

}

/*=================================
Download
==================================*/

.download-box{

background:linear-gradient(135deg,#0058A8,#007BDB);

padding:60px;

border-radius:25px;

display:flex;

justify-content:space-between;

align-items:center;

color:#fff;

}

/*=================================
Support
==================================*/

.marine-support{

background:#f8fafc;

}

.page-hero{

padding:140px 0 90px;

background:linear-gradient(135deg,#003b73,#0060af);

}

.hero-badge{

display:inline-block;

padding:8px 18px;

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

border-radius:30px;

margin-bottom:20px;

}

.feature-box{

background:#fff;

padding:25px;

border-radius:16px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

text-align:center;

height:100%;

}

.feature-box h5{

font-size:34px;

font-weight:700;

color:var(--primary);

}

.benefit-card{

background:#fff;

padding:35px;

border-radius:18px;

text-align:center;

height:100%;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;

}

.benefit-card:hover{

transform:translateY(-6px);

}

.benefit-card i{

font-size:42px;

color:var(--primary);

margin-bottom:20px;

}

.placeholder-product{

background:#fff;

padding:50px;

border-radius:20px;

text-align:center;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.placeholder-product i{

font-size:60px;

color:#bbb;

}

.marine-cta{

background:linear-gradient(135deg,#0058A8,#007BDB);

padding:80px 0;

color:#fff;

}

.solution-card{

display:block;

background:#fff;

padding:35px;

border-radius:18px;

text-align:center;

text-decoration:none;

color:#222;

transition:.3s;

height:100%;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.solution-card:hover{

transform:translateY(-8px);

color:inherit;

}

.solution-card i{

font-size:40px;

color:var(--primary);

margin-bottom:20px;

display:block;

}

/*=================================
Support
==================================*/

.contact-card{

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

height:100%;

}

.contact-card p{

margin-bottom:18px;

line-height:1.7;

}

.contact-card h4{

font-weight:700;

margin-bottom:20px;

}