@charset "UTF-8";
:root {
  --red:#c40000;
  --dark:#000;
  --light:#fff;
  --gray:#ccc;
}

body { margin:0; font-family: Arial, sans-serif; background:var(--dark); color:var(--light); }

header { position:sticky; top:0; background:#000; padding:20px 10px; text-align:center; }

nav a { margin:0 15px; color:#fff; text-decoration:none; font-weight:bold; font-size:18px; }
nav a:hover { color:var(--red); }

.racing-sans-one-regular {
  font-family: "Racing Sans One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.logo { max-width:500px; width:90%; height:auto; }

.section { padding:70px 20px; text-align:center; }

.hero {
	position: relative;
	height: 90vh;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(img/photo-1503387762-592deb58ef4e.jpg);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-size: cover;
}

.overlay {
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.6);
}

.hero-content {
  position:relative;
  z-index:2;
}

.hero h1 {
  font-size:3em;
}

.hero p {
  font-size:1.2em;
}

.btn {
	background: #c40000;
	padding: 15px 30px;
	display: inline-block;
	margin-top: 20px;
	color: #fff;
	border-radius: 12px;
	text-decoration: none;
}
.btn:hover {
  background-color: orangered; /* Color on hover */
  cursor: pointer;
}

.section { padding:60px 20px; text-align:center; }

.services {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
}
.card {
  background:#111;
  padding:15px;
  border-radius:12px;
  text-align:center;
}
.card img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:8px;
}
.card h3 {
  font-size:16px;
  margin-top:10px;
}

.title-red { color:var(--red); 
font-size:2em;
}

form { max-width:500px; margin:auto; }
form input, form textarea { width:100%; padding:14px; margin:10px 0; border-radius:6px; border:none; }

footer { padding:25px; text-align:center; }

.call-btn {
  position:fixed;
  bottom:20px;
  right:20px;
  background:var(--red);
  color:#fff;
  padding:14px;
  border-radius:50%;
  font-size:24px;
  box-shadow:0 0 15px rgba(0,0,0,0.6);
  animation:pulse 1.8s infinite;
}

@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(196,0,0,0.7); }
  70% { box-shadow:0 0 0 15px rgba(196,0,0,0); }
  100% { box-shadow:0 0 0 0 rgba(196,0,0,0); }
}

@media (max-width:768px) {
  .hero-title { font-size:2.2em; }
  .logo { max-width:300px; }
}

@media (max-width:480px) {
  .hero-title { font-size:1.8em; }
  nav a { font-size:16px; }
}