/* General Body Styles */ body { font-family: 'Roboto', sans-serif; color: #333; line-height: 1.6; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 700; } /* Header & Navbar */ .navbar { transition: background-color 0.3s ease-in-out; } .navbar-brand { font-family: 'Poppins', sans-serif; font-weight: 700; color: #fff !important; } .nav-link { font-weight: 500; transition: color 0.2s; } /* Hero Section */ .hero-section { background: linear-gradient(135deg, #007BFF, #0056b3); color: white; padding: 100px 0; text-align: center; } .hero-section h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 0.5rem; } .hero-section .lead { font-size: 1.25rem; margin-bottom: 2rem; } .btn-primary { background-color: #fff; border-color: #fff; color: #007BFF; font-weight: 700; padding: 0.75rem 1.5rem; border-radius: 50px; transition: all 0.3s ease; } .btn-primary:hover { background-color: #f0f0f0; border-color: #f0f0f0; transform: translateY(-2px); } /* Sections */ .section { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 4rem; font-size: 2.5rem; font-weight: 700; } /* Segment Cards */ .segment-card { border: none; border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform 0.3s, box-shadow 0.3s; overflow: hidden; } .segment-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); } .segment-card .card-body { padding: 2rem; } /* Pricing/Plans Section */ .pricing-card { border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform 0.3s, box-shadow 0.3s; border: none; } .pricing-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); } .pricing-card .card-header { background: transparent; border-bottom: none; padding: 1.5rem; } .pricing-card .price { font-size: 2.5rem; font-weight: 700; } .pricing-card .price .period { font-size: 1rem; font-weight: 400; color: #6c757d; } .pricing-card .btn { border-radius: 50px; font-weight: 700; padding: 0.75rem 1.5rem; } .pricing-card.featured { border: 2px solid #007BFF; } .pricing-card.featured .btn-primary { background-color: #007BFF; border-color: #007BFF; color: #fff; } .pricing-card.featured .btn-primary:hover { background-color: #0056b3; border-color: #0056b3; } /* Footer */ .footer { background-color: #343a40; color: #f8f9fa; padding: 40px 0; } .footer a { color: #f8f9fa; text-decoration: none; transition: color 0.2s; } .footer a:hover { color: #007BFF; } .social-icons a { font-size: 1.5rem; margin: 0 0.5rem; }