.raya-comparison-hero {
background: linear-gradient(135deg, #0033A0, #005BFF);
color: #fff;
}
.hero-content h1 {
font-size: 72px;
font-weight: 800;
line-height: 1.1;
}
.hero-content h1 span {
display: block;
color: #bcd7ff;
}
.comparison-badge {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.2);
padding: 10px 20px;
border-radius: 50px;
display: inline-block;
margin-bottom: 20px;
}
.hero-buttons {
display: flex;
gap: 20px;
margin-top: 40px;
}
.btn-primary-custom {
background: #fff;
color: #0033A0;
padding: 16px 32px;
border-radius: 16px;
font-weight: 700;
text-decoration: none;
}
.btn-secondary-custom {
border: 1px solid rgba(255,255,255,0.4);
color: #fff;
padding: 16px 32px;
border-radius: 16px;
text-decoration: none;
}
.hero-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 50px;
}
.hero-stat-card {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
padding: 25px;
border-radius: 24px;
text-align: center;
}
.hero-stat-card h3 {
font-size: 36px;
font-weight: 800;
}
.comparison-image-wrapper {
position: relative;
}
.comparison-image-wrapper img {
width: 100%;
border-radius: 32px;
}
.yearly-saving-badge {
position: absolute;
bottom: 30px;
left: 30px;
background: #fff;
color: #0033A0;
padding: 16px 24px;
border-radius: 20px;
font-weight: 700;
}

.comparison-table-section {

background: #f4f8ff;
}
.comparison-table-wrapper {
background: #fff;
border-radius: 32px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.comparison-table {
width: 100%;
}
.comparison-table thead {
background: #0033A0;
color: #fff;
}
.comparison-table th,
.comparison-table td {
padding: 24px;
}
.highlight-cell {
color: #005BFF;
font-weight: 700;
}
.fuel-saving-section {

}
.fuel-card {
background: #f4f8ff;
padding: 24px;
border-radius: 24px;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.competitor-card {
background: #f3f3f3;
}
.saving-highlight-box {
background: linear-gradient(135deg, #0033A0, #00A3FF);
color: #fff;
padding: 60px;
border-radius: 40px;
text-align: center;
}
.saving-highlight-box h2 {
font-size: 84px;
font-weight: 800;
}
.lead-form-section {
background: #f4f8ff;

}
.lead-content-box {
background: #0033A0;
color: #fff;
padding: 60px;
border-radius: 40px 0 0 40px;
height: 100%;
}
.lead-form-box {
background: #fff;
padding: 60px;
border-radius: 0 40px 40px 0;
height: 100%;
}
.offer-badge {
background: #fff;
color: #0033A0;
padding: 10px 18px;
border-radius: 40px;
display: inline-block;
margin-bottom: 20px;
font-weight: 700;
}
.offer-list {
margin-top: 30px;
}
.offer-list li {
margin-bottom: 16px;
}
.final-cta-section {
background: #0033A0;
color: #fff;

}
.final-cta-section h2 {
font-size: 64px;
font-weight: 800;
}
.final-cta-buttons {
margin-top: 40px;
display: flex;
justify-content: center;
gap: 20px;
}
@media(max-width:991px) {
.hero-content h1 {
font-size: 48px;
}
.hero-stats-grid {
grid-template-columns: 1fr;
}
.hero-buttons,
.final-cta-buttons {
flex-direction: column;
}
.lead-content-box,
.lead-form-box {
border-radius: 30px;
margin-bottom: 20px;
}
.saving-highlight-box h2 {
font-size: 56px;
}
}