/* Import Graffiti Font (Permanent Marker) */ /* Make sure to include this in your HTML : */ /* Reset default styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; } /* Navigation Bar */ nav { background: #004aad; color: #fff; padding: 1rem; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; top: 0; z-index: 1000; } .logo { font-size: 1.5rem; font-weight: bold; font-family: 'Permanent Marker', cursive; text-transform: uppercase; } .bouncing-logo span, .bouncing-title span{ display: inline-block; animation: bounce 1s ease-in-out infinite; animation-delay: calc(var(--i) * 0.1s); } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .nav-links { list-style: none; display: flex; } .nav-links li { margin-left: 2rem; } .nav-links a { color: #fff; text-decoration: none; } .nav-links a:hover { color: #b3e0ff; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(to right, #004aad, #00b7eb); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; padding: 7rem 2rem 2rem; } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; font-family: 'Permanent Marker', cursive; text-transform: uppercase; } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; font-family: 'Permanent Marker', cursive; text-transform: uppercase; } /* Squeegee Wipe Title Effect */ .squeegee-container { position: relative; display: inline-block; overflow: hidden; } .hero-title { font-size: 2.5rem; font-family: 'Permanent Marker', cursive; color: #fff; text-transform: uppercase; transition: filter 0.6s ease-in-out; /* smooth transition for blur */ } .soapy { filter: blur(4px) brightness(1.5); } .soapy { filter: blur(4px) brightness(1.5); } .clean { filter: none; } .squeegee { position: absolute; top: 20%; /* or try 40% if it’s still not low enough */ left: -150px; width: 200px; height: 125px; background-image: url('images/squeegee.png'); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 9999; pointer-events: none; opacity: 1; transform: rotate(-10deg); } .bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('images/bubbles.png'); /* Make sure this exists or use a transparent bubble image */ background-size: cover; background-position: center; opacity: 0; transition: opacity 0.5s ease-in-out; pointer-events: none; z-index: 9; /* Below squeegee (z-index: 10) */ } /* Squeegee Animation */ @keyframes wipe { 0% { left: -150px; opacity: 1; } 50% { left: 50%; transform: translateX(-50%); } 100% { left: 110%; opacity: 0; } } .cta-button { background: #fff; color: #004aad; padding: 0.8rem 1.5rem; text-decoration: none; border-radius: 5px; font-weight: bold; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; } .cta-button:hover { background: #e6f3ff; transform: translateY(-2px); } /* Sticky Logo */ .logo-img { width: 100px; /* Adjust this to your desired size */ position: sticky; top: 0; /* Makes it sticky at the top */ left: 20px; /* Offsets the logo to the left */ z-index: 9999; /* Keeps it above other content */ margin-top: 10px; /* Optional: Adjust spacing between title and logo */ background-color: white; /* Optional: Gives it a white background to help it stand out */ padding: 10px; } /* Services Section */ .services { padding: 4rem 2rem; text-align: center; } .services h2 { margin-bottom: 2rem; font-family: 'Permanent Marker', cursive; } .service-list { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .service { background: #f4f4f4; padding: 1.5rem; border-radius: 5px; width: 300px; transition: transform 0.2s ease; } .service:hover { transform: translateY(-5px); } .service h3 { margin-bottom: 1rem; font-family: 'Permanent Marker', cursive; } /* Book Now Button (for plan boxes) */ .service a button { background-color: #7a7ee6; color: #fff; padding: 10px 18px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px; transition: background-color 0.3s ease, transform 0.2s ease; } .service a button:hover { background-color: #5b5fbe; transform: translateY(-2px); } /* Add spacing between main services and detailed plans */ .services h2:nth-of-type(2) { margin-top: 4rem; font-family: 'Permanent Marker', cursive; } /* Testimonials Section */ .testimonials { padding: 4rem 2rem; background: #f4f4f4; text-align: center; } .testimonials h2 { margin-bottom: 2rem; font-family: 'Permanent Marker', cursive; } .testimonial-list { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .testimonial { background: #fff; padding: 2rem; border-radius: 5px; width: 300px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .testimonial p { font-style: italic; margin-bottom: 1.5rem; } .testimonial span { font-weight: bold; display: block; margin-top: 1rem; } /* Star Rating */ .star-rating { color: #ffd700; /* Gold color */ font-size: 24px; /* Size of the stars */ display: inline-flex; /* Align stars horizontally */ justify-content: left; /* Align stars to the left */ margin-top: 1rem; /* Adds spacing above stars */ } .star-rating .star { margin-right: 5px; /* Space between stars */ } .star-rating i { display: inline-block; /* Ensures stars stay inline */ } /* About Section */ .about { padding: 4rem 2rem; background: #f4f4f4; text-align: center; } .about h2 { margin-bottom: 1rem; font-family: 'Permanent Marker', cursive; } /* Contact Section */ .contact { padding: 4rem 2rem; text-align: center; } .contact h2 { margin-bottom: 1rem; font-family: 'Permanent Marker', cursive; } .contact p { margin-bottom: 2rem; } .contact form { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .contact input, .contact textarea { padding: 0.8rem; border: 1px solid #ccc; border-radius: 5px; } .contact textarea { height: 120px; } .contact select { padding: 0.8rem; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; background: #fff; cursor: pointer; } .contact select:focus { outline: none; border-color: #004aad; } .contact button { background: #004aad; color: #fff; padding: 0.8rem; border: none; border-radius: 5px; cursor: pointer; } .contact button:hover { background: #003780; } /* Centered PayPal Button */ .paypal-center { display: flex; justify-content: center; align-items: center; margin-top: 20px; } /* Footer */ footer { background: #004aad; color: #fff; text-align: center; padding: 1rem; } /* Responsive Design for Phones */ @media (max-width: 768px) { .nav-links { flex-direction: column; gap: 0.5rem; margin-top: 1rem; } .hero h1 { font-size: 1.8rem; } .hero p { font-size: 1rem; } .service { width: 100%; } .testimonial { width: 100%; } }