/* Global Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Georgia', serif; line-height: 1.6; color: #5d4037; background-color: #faf0e6; background-image: linear-gradient(to bottom, #faf0e6 0%, #f5e1c4 100%); } /* Header Styles */ header { background-color: #8b4513; color: white; padding: 20px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .logo-container { text-align: center; margin-bottom: 20px; } .logo { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; object-fit: cover; transition: opacity 0.3s; border: 3px solid #daa520; } .logo:hover { opacity: 0.7; } /* Navigation Styles */ .main-nav ul { list-style: none; display: flex; justify-content: center; gap: 30px; } .main-nav a { color: #faf0e6; text-decoration: none; font-size: 18px; padding: 10px 15px; border-radius: 5px; transition: background-color 0.3s; } .main-nav a:hover { background-color: #daa520; } /* Main Content Styles */ main { max-width: 1000px; margin: 0 auto; padding: 40px 20px; } section { margin-bottom: 50px; background-color: #fffaf0; padding: 30px; border-radius: 10px; box-shadow: 0 3px 10px rgba(139, 69, 19, 0.1); } /* Hero Section */ .banner { text-align: center; background-color: #daa520; color: #5d4037; } .banner h1 { font-size: 48px; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(255,255,255,0.3); } .tagline { font-size: 24px; font-style: italic; } /* Introduction Section */ .introduction h2 { color: #8b4513; font-size: 32px; margin-bottom: 20px; border-bottom: 3px solid #daa520; padding-bottom: 10px; } .introduction p { margin-bottom: 15px; font-size: 18px; line-height: 1.8; } /* Services Section */ .services h2 { color: #8b4513; font-size: 32px; margin-bottom: 25px; border-bottom: 3px solid #daa520; padding-bottom: 10px; } .services-list { list-style: none; padding-left: 0; } .services-list li { background-color: #f5e1c4; margin-bottom: 15px; padding: 15px; border-left: 5px solid #daa520; border-radius: 5px; font-size: 16px; } .services-list strong { color: #8b4513; } /* Footer Styles */ footer { background-color: #8b4513; color: white; text-align: center; padding: 30px 20px; } footer p { margin-bottom: 10px; } footer a { color: #daa520; text-decoration: none; } footer a:hover { text-decoration: underline; } /* Responsive Design */ @media (max-width: 768px) { .main-nav ul { flex-direction: column; gap: 10px; } .hero h1 { font-size: 36px; } .tagline { font-size: 18px; } section { padding: 20px; } }