/* ========================================
   HERO SECTION
======================================== */

.hero{
height:520px;
background:url('../images/trks.png') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
position:relative;
}

/* Light overlay (keeps image bright) */
.hero::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.1);
}

.hero-content{
position:relative;
z-index:2;
max-width:800px;
}

.hero h1{
font-size:48px;
margin-bottom:15px;
}

/* Buttons layout */
.hero-buttons{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
margin-top:20px;
}

/* ========================================
   INTRO SECTION
======================================== */

.modern-intro{
padding:70px 40px;
text-align:center;
max-width:1100px;
margin:auto;
transition:all 0.3s ease;
}

/* Subtle hover for section */
.modern-intro:hover{
background:#f1f5f9;
border-radius:10px;
}

/* ========================================
   FEATURES GRID
======================================== */

.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

/* Feature card */
.feature{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
transition:all 0.3s ease;
cursor:pointer;
}

/* Hover effect (professional blue) */
.feature:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
background:linear-gradient(135deg, #1D3557, #457b9d);
color:white;
}

/* Text transition */
.feature h3{
margin-bottom:10px;
color:#1D3557;
transition:color 0.3s ease;
}

.feature p{
color:#555;
transition:color 0.3s ease;
}

/* Change text color on hover */
.feature:hover h3,
.feature:hover p{
color:white;
}

/* ========================================
   CTA SECTION
======================================== */

.cta{
text-align:center;
padding:60px;
background:#1D3557;
color:white;
}

/* Optional hover effect for CTA */
.cta:hover{
background:linear-gradient(135deg, #1D3557, #16324f);
}