/* ===== Core Variables & Base Styles ===== */ :root { --primary: #0099CC; --secondary: #0077a3; --dark: #333333; --light: #ffffff; --success-bg: #d4edda; --success-text: #155724; --error-bg: #f8d7da; --error-text: #721c24; } body { font-family: 'Roboto', sans-serif; color: var(--dark); background-color: var(--light); line-height: 1.6; } /* Subtle global background texture */ body::after { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(0,153,204,0.06) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; z-index: 0; } h1, h2, h3, h4, h5 { font-family: 'Montserrat', sans-serif; font-weight: 600; } /* ===== Header/Navigation ===== */ .navbar { background-color: var(--primary); padding: 15px 0; } /* Slight translucency for a premium feel */ .navbar.navbar-dark { background: rgba(0, 153, 204, 0.9); backdrop-filter: saturate(140%) blur(6px); } .navbar-brand { display: flex; align-items: center; gap: 10px; color: white; } .navbar-brand img { height: 40px; width: auto; transition: transform 0.3s ease; } .navbar-brand:hover img { transform: scale(1.05); } /* ===== Hero Section ===== */ .hero-section { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; padding: 120px 0 100px; position: relative; overflow: hidden; } .hero-section::before { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: url('https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') center/cover no-repeat; opacity: 0.15; } /* ===== Services Section ===== */ .service-card { border: none; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); height: 100%; border-top: 4px solid var(--primary); background-color: white; padding: 25px; } /* When the column wrapper is set to d-flex, ensure the card fills height and uses flex layout so headers stay at top and items form the flexible body. This keeps all cards equal height. */ .col-md-6.d-flex > .service-card, .col-lg-4.d-flex > .service-card { display: flex; flex-direction: column; } .service-card > .mt-3 { /* allow the content area to grow and push footer/CTA down */ flex: 1 1 auto; overflow: auto; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,153,204,0.1); } .service-card h3 { color: var(--primary); border-bottom: 1px solid #eee; padding-bottom: 10px; margin: 0 0 15px 0; font-size: 1.25rem; line-height: 1.3; display: block; white-space: normal; } .service-item { padding: 8px 0; position: relative; padding-left: 25px; } .service-item::before { content: "•"; color: var(--primary); font-weight: bold; position: absolute; left: 0; } /* ===== CTA Section ===== */ .cta-section { background-color: var(--primary); color: white; padding: 80px 0; text-align: center; margin-top: 48px; } /* Homepage-specific smaller CTA (applies when is present) */ .home .cta-section { /* smaller desktop CTA */ padding: 20px 0; margin-top: 12px; margin-bottom: 12px; } .home .cta-section h2 { font-size: 1.6rem; margin-bottom: 8px; } .home .cta-section .lead { font-size: 1rem; margin-bottom: 10px; } .home .cta-section .btn { padding: 8px 20px; font-size: 0.95rem; } /* Logos strip (Trusted by) */ .logos-strip { background: white; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,153,204,0.08); padding: 18px 24px; display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 24px; } .logos-strip img { height: 26px; opacity: 0.75; filter: grayscale(100%); transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease; } .logos-strip img:hover { opacity: 0.95; transform: translateY(-2px); filter: grayscale(80%); } /* Badges inside cards */ .provider-badges { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; } .provider-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #f5f9fb; color: #0a4152; border: 1px solid #e2f0f5; border-radius: 999px; font-size: 0.85rem; } .provider-badge img { height: 14px; width: auto; } .cta-section h2 { margin-bottom: 20px; font-size: 2.25rem; } .cta-section .lead { font-size: 1.25rem; margin-bottom: 30px; } /* ===== Contact Form ===== */ .contact-card { border: none; border-radius: 8px; box-shadow: 0 5px 30px rgba(0,153,204,0.1); background-color: white; padding: 40px; } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.25rem rgba(0,153,204,0.25); } .btn-primary { background-color: var(--primary); border: none; padding: 12px 30px; font-weight: 600; color: white; } .btn-primary:hover { background-color: var(--secondary); } .btn-light { background-color: white; color: var(--primary); } /* ===== Footer ===== */ footer { background-color: var(--primary); color: white; padding: 40px 0 20px; } footer a { color: white; text-decoration: none; transition: opacity 0.3s; } footer a:hover { opacity: 0.8; } footer a:not(:last-child)::after { content: "|"; margin: 0 8px; color: rgba(255,255,255,0.5); } /* ===== Interactive Elements ===== */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; font-size: 20px; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: var(--primary); color: white; border: none; } .back-to-top:hover { background-color: var(--secondary); } /* ===== Animations ===== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .animate__animated { animation-duration: 0.5s; } /* ===== Reusable Section Header ===== */ .kv-section-header { color: var(--primary); } /* ===== Responsive Adjustments ===== */ @media (max-width: 992px) { .hero-section { padding: 100px 0; } .service-card { margin-bottom: 20px; } } /* Ensure hero heading fits on one line on desktop */ @media (min-width: 992px) { .hero-section h1 { white-space: nowrap; } } @media (max-width: 768px) { .hero-section { padding: 80px 0; } .logos-strip { gap: 18px; padding: 14px 16px; } .logos-strip img { height: 22px; } .cta-section { padding: 24px 0; } .cta-section h2 { font-size: 1.75rem; } footer a:not(:last-child)::after { content: none; margin: 0; } } @media (max-width: 576px) { .hero-section { padding: 60px 0; } .service-card h3 { -webkit-line-clamp: 3; } .contact-card { padding: 25px; } /* Improve small-screen badge readability */ .provider-badges { gap: 6px 8px; } .provider-badge { font-size: 0.8rem; padding: 5px 8px; } } /* Removed engage-visual experiment */