/* General Body Styles */ body { font-family: 'Roboto', sans-serif; color: #4F4F4F; background-color: #FFFFFF; margin: 0; line-height: 1.6; } .container { width: 90%; max-width: 1100px; margin: 0 auto; } /* Typography */ h1, h2, h3 { font-family: 'Poppins', sans-serif; font-weight: 600; color: #333; } h1 { font-size: 3rem; margin-bottom: 1rem; } h2 { font-size: 2.2rem; margin-bottom: 1rem; text-align: center;} /* Header and Navbar */ .navbar { background: #FFFFFF; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1rem 0; position: sticky; top: 0; z-index: 1000; } .navbar .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700; color: #2F80ED; text-decoration: none; } .nav-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } .nav-links li { margin-left: 20px; } .nav-links a { text-decoration: none; color: #4F4F4F; font-weight: 500; transition: color 0.3s ease; } .nav-links a:hover { color: #2F80ED; } /* Buttons */ .btn { padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; display: inline-block; border: none; cursor: pointer; } .btn-primary { background-color: #2F80ED; color: #FFFFFF; } .btn-primary:hover { background-color: #2D67B2; } .btn-secondary { background-color: #F2F2F2; color: #333; } .btn-secondary:hover { background-color: #E0E0E0; } .btn-lg { padding: 15px 30px; font-size: 1.1rem; } /* Hero Section */ .hero-section { background: linear-gradient(to right, #2F80ED, #56CCF2); color: #FFFFFF; text-align: center; padding: 100px 0; } .hero-section h1 { color: #FFFFFF; font-weight: 700; } .hero-section p { font-size: 1.2rem; margin-bottom: 2rem; } /* Content Sections */ .content-section { padding: 60px 0; } .bg-light { background-color: #F2F2F2; } /* Service Boxes */ .service-boxes { display: flex; justify-content: space-around; gap: 20px; margin-top: 40px; } .service-box { background: #FFFFFF; padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; width: 30%; } .service-box h3 { font-size: 1.5rem; margin-bottom: 1rem; } /* Contact Form */ .contact-form { max-width: 600px; margin: 40px auto 0; } .form-group { margin-bottom: 1.5rem; } .form-control { width: 100%; padding: 12px; border: 1px solid #BDBDBD; border-radius: 8px; font-size: 1rem; } .form-control:focus { outline: none; border-color: #2F80ED; } /* Footer */ .footer { background: #333; color: #FFFFFF; text-align: center; padding: 20px 0; } /* Form Messages */ #form-messages .success { color: #27AE60; background: #E9F7EF; padding: 10px; border-radius: 8px; margin-bottom: 1rem; } #form-messages .error { color: #EB5757; background: #FDEEEE; padding: 10px; border-radius: 8px; margin-bottom: 1rem; }