/* ================= PRODUCT PAGE ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Poppins",sans-serif;
    background:#f8f9fc;
    color:#171616;
    line-height:1.7;
}

.logo a{
    display:flex;
    align-items:center;
    gap:15px;
    text-decoration:none;
    color:#fff;
}

.logo img,
.logo h2{
    transition:all .35s ease;
}

/* Logo Glow */
.logo a:hover img{
    transform:scale(1.08);
    filter:
        drop-shadow(0 0 8px rgba(255,120,0,.7))
        drop-shadow(0 0 18px rgba(255,120,0,.5))
        drop-shadow(0 0 30px rgba(255,120,0,.35));
}


/* HERO */
.product-page .product-hero{
    padding-top:160px;
}
.product-hero{
    background:linear-gradient(135deg,#003366,#0056b3);
    color:#fff;
    padding-top:160px;
    padding-right:8%;
    padding-bottom:90px;
    padding-left:8%;
}

.hero-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    flex-wrap:wrap;
}

.hero-text{
    flex:1;
}

.hero-text h1{
    font-size:52px;
    margin-bottom:20px;
}

.hero-text p{
    font-size:18px;
    margin-bottom:35px;
}

.hero-image{
    flex:1;
    text-align:center;
}

.hero-image img{
    width:100%;
    max-width:600px;
}

/* BUTTONS */

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{

display:inline-block;
padding:15px 34px;
border-radius:40px;
font-weight:600;
text-decoration:none;
transition:.3s;

}

.btn-primary{

background:#ff7a00;
color:#fff;

}

.btn-primary:hover{

background:#ff9300;

}

.btn-secondary{

border:2px solid white;
color:white;

}

.btn-secondary:hover{

background:white;
color:#0056b3;

}

/* COMMON SECTION */

.section{

padding:90px 8%;

}

.section-title{

text-align:center;
margin-bottom:60px;

}

.section-title h2{

font-size:42px;
color:#003366;
margin-bottom:15px;

}

.section-title p{

max-width:750px;
margin:auto;
color:#666;

}

/* OVERVIEW */

.overview{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}

.overview img{

width:100%;
border-radius:12px;

}

.overview-content h3{

font-size:34px;
margin-bottom:20px;
color:#003366;

}

.overview-content p{

margin-bottom:20px;
color:#555;

}

/* FEATURE GRID */

.feature-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;

}

.feature-card{

background:white;
padding:35px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.3s;
text-align:center;

}

.feature-card:hover{

transform:translateY(-8px);

}

.feature-card i{

font-size:42px;
color:#0056b3;
margin-bottom:20px;

}

.feature-card h4{

margin-bottom:15px;
color:#003366;

}

.feature-card p{

color:#666;

}

/* HIGHLIGHTS */

.highlight{

background:#0056b3;
padding:80px 8%;

}

.highlight-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;

}

.highlight-box{

background:rgba(255,255,255,.12);
padding:30px;
text-align:center;
border-radius:12px;
color:white;

}

.highlight-box h3{

font-size:40px;

}

/* SPEC TABLE */

.spec-table{

width:100%;
border-collapse:collapse;
background:white;
box-shadow:0 5px 25px rgba(0,0,0,.08);

}

.spec-table th{

background:#0056b3;
color:white;
padding:18px;
text-align:left;

}

.spec-table td{

padding:16px;
border-bottom:1px solid #eee;

}

.spec-table tr:nth-child(even){

background:#f8f8f8;

}

/* FAQ */

.faq{

max-width:900px;
margin:auto;

}

.faq h3{

background:#0056b3;
color:white;
padding:18px;
margin-top:18px;
border-radius:8px 8px 0 0;

}

.faq p{

background:white;
padding:20px;
border:1px solid #ddd;
border-top:none;

}

/* CTA */

.cta{

background:linear-gradient(135deg,#003366,#0056b3);
padding:90px 8%;
text-align:center;
color:white;

}

.cta h2{

font-size:40px;
margin-bottom:20px;
color:white;

}

.cta p{

font-size:18px;
margin-bottom:35px;

}

/* RESPONSIVE */

@media(max-width:992px){

.hero-container,
.overview{

grid-template-columns:1fr;
display:block;

}

.hero-text{

margin-bottom:40px;

}

.hero-text h1{

font-size:40px;

}

.hero-buttons{

justify-content:center;

}

.section-title h2{

font-size:34px;

}

}

.footer-container{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:80px;
    max-width:1200px;
    margin:auto;
    align-items:start;
}

.footer-container h2,
.footer-container h3{
    color: #fff;
}