/*=========================================
FUEL BOWSER
=========================================*/

.fuel-showcase{

padding:90px 0;
background:#fff;

}

.product-view{

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

}

.product-image{

background:#fafafa;
border-radius:20px;
overflow:hidden;
box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.product-image img{

width:100%;
display:block;
transition:.4s;

}

.product-image:hover img{

transform:scale(1.04);

}

.product-details h2{

font-size:42px;
color:#43236F;
margin-bottom:20px;

}

.product-details p{

color:#666;
line-height:1.9;
margin-bottom:25px;

}

.feature-list{

list-style:none;
padding:0;
margin:0;

}

.feature-list li{

padding:10px 0;
font-size:16px;
color:#555;

}

/*==============================
CAPSULE BUTTONS
==============================*/

.capacity-section{

padding:80px 0;

}

.white-bg{

background:#fff;

}

.capacity-buttons{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;

}

.capacity-card{

padding:15px 35px;
border-radius:50px;
background:#fff;
font-weight:600;
color:#43236F;
box-shadow:0 10px 25px rgba(0,0,0,.08);
cursor:default;
transition:.35s;

}

.capacity-card:hover{

background:#43236F;
color:#fff;
transform:translateY(-6px);
box-shadow:0 18px 35px rgba(67,35,111,.25);

}

/*==============================
APPLICATION GRID
==============================*/

.applications{

padding:90px 0;

}

.gray-bg{

background:#fafafa;

}

.application-grid{

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

}

.application-card{

background:#fff;
padding:35px 20px;
text-align:center;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;

}

.application-card:hover{

transform:translateY(-8px);
box-shadow:0 20px 40px rgba(67,35,111,.18);

}

.app-icon{

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

}

.application-card h3{

font-size:18px;
color:#43236F;

}

/*==============================
COMPARISON TABLE
==============================*/

.comparison-section{

padding:90px 0;
background:#fff;

}

.comparison-table{

max-width:1100px;
margin:auto;
border-radius:18px;
overflow:hidden;
box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.compare-header,
.compare-row{

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

}

.compare-header{

background:#43236F;
color:#fff;
font-weight:600;

}

.compare-cell{

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

}

.compare-row:nth-child(even){

background:#fafafa;

}

.compare-row:hover{

background:#fff7e8;

}

.feature{

font-weight:600;
color:#43236F;

}

/*==============================
SECTION TITLE
==============================*/

.section-title{

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

}

.section-title h2{

font-size:38px;
color:#43236F;
margin-bottom:12px;

}

.section-title p{

color:#666;
font-size:16px;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:992px){

.product-view{

grid-template-columns:1fr;

}

.application-grid{

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

}

.product-details{

text-align:center;

}

}

@media(max-width:768px){

.application-grid{

grid-template-columns:1fr;

}

.compare-header,
.compare-row{

grid-template-columns:1fr;

}

.capacity-card{

width:46%;
text-align:center;

}

.product-details h2{

font-size:32px;

}

.section-title h2{

font-size:30px;

}

}