/* ====== SUBTLE BACKGROUND PATTERNS ====== */

/* Option 1: Subtle Dot Grid (Recommended) */
.pattern-dots {
background-color: #f8f9fa;
background-image: radial-gradient(circle, rgba(25, 118, 210, 0.08) 1px, transparent 1px);
background-size: 20px 20px;
}

/* Option 2: Flowing Curves */
.pattern-curves {
background-color: #f8f9fa;
background-image:
radial-gradient(ellipse at center top, rgba(33, 150, 243, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at center bottom, rgba(25, 118, 210, 0.04) 0%, transparent 50%);
background-size: 100% 200px;
}

/* Option 3: Diagonal Lines */
.pattern-diagonal {
background-color: #f8f9fa;
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 20px,
rgba(25, 118, 210, 0.05) 20px,
rgba(25, 118, 210, 0.05) 21px
);
}

/* Option 4: Road Dashes (Thematic for driving) */
.pattern-road {
background-color: #f8f9fa;
background-image:
repeating-linear-gradient(
90deg,
transparent,
transparent 30px,
rgba(25, 118, 210, 0.06) 30px,
rgba(25, 118, 210, 0.06) 50px
);
}

/* Option 5: Hexagon Grid */
.pattern-hexagon {
background-color: #f8f9fa;
background-image:
radial-gradient(circle at 25% 25%, rgba(25, 118, 210, 0.04) 2%, transparent 2%),
radial-gradient(circle at 75% 75%, rgba(33, 150, 243, 0.04) 2%, transparent 2%);
background-size: 40px 40px;
}

/* Option 6: Circuit Board (Modern/Tech) */
.pattern-circuit {
background-color: #f8f9fa;
background-image:
linear-gradient(90deg, rgba(25, 118, 210, 0.03) 1px, transparent 1px),
linear-gradient(rgba(25, 118, 210, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
}

/* ====== SECTION STYLING ====== */

/* Apply pattern to your hero section */
.hero-section {
padding: 60px 20px;
text-align: center;
position: relative;
overflow: hidden;
}

/* Add one of the pattern classes above, example: */
.hero-section.pattern-dots {
/* Dot pattern applied */
}

/* Enhanced typography for the section */
.hero-section h1 {
font-size: 2.5rem;
font-weight: 700;
color: #1976D2;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hero-section .subtitle {
font-size: 1.1rem;
color: #666;
margin-bottom: 20px;
font-weight: 400;
}

.hero-section .description {
font-size: 1rem;
color: #555;
max-width: 600px;
margin: 0 auto 40px auto;
line-height: 1.6;
}

/* Optional: Add a subtle overlay for extra depth */
.pattern-overlay::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);
pointer-events: none;
}

/* ====== USAGE EXAMPLES ====== */

/*
HTML Example:

Simply change “pattern-dots” to any of the other pattern classes:
– pattern-curves
– pattern-diagonal
– pattern-road
– pattern-hexagon
– pattern-circuit
*/