/* ===== GLOBAL RESET ===== */ * { margin:0; padding:0; box-sizing:border-box; } /* ===== ROOT VARIABLES ===== */ :root{ --primary-color:#4f7cff; --primary-hover:#3b63d1; --text-dark:#1f2937; --muted:#6b7280; --border:#e5e7eb; --card:#ffffff; --shadow-soft:0 8px 25px rgba(0,0,0,0.06); --shadow-hover:0 18px 45px rgba(0,0,0,0.12); --gradient-main:linear-gradient(135deg,#5a7cff,#7da6ff); } /* ===== BODY ===== */ body{ font-family:'Inter', sans-serif; background:linear-gradient(180deg,#f9fbff,#f3f6fc); color:var(--text-dark); line-height:1.6; display:flex; flex-direction:column; min-height:100vh; padding-top:90px; padding-bottom:120px; } /* ===== TYPOGRAPHY ===== */ h1,h2,h3{ color:var(--text-dark); margin-bottom:0.6rem; } h1{ font-size:1.9rem; } h2{ font-size:1.6rem; } p{ margin-bottom:1rem; color:var(--muted); } /* ===== NAVBAR ===== */ .navbar{ padding:1.3rem 2rem; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; position:fixed; top:0; left:0; width:100%; z-index:1000; } /* LOGO */ .logo{ font-size:1.8rem; font-weight:600; background:var(--gradient-main); -webkit-background-clip:text; color:transparent; } /* NAV LINKS */ .nav-links a{ margin-left:1.5rem; text-decoration:none; color:var(--text-dark); font-weight:500; padding:6px 8px; transition:0.25s; } .nav-links a:hover{ color:var(--primary-color); } /* CONTACT BUTTON */ .nav-links .contact-btn{ background:var(--gradient-main); color:white; padding:8px 14px; border-radius:8px; box-shadow:var(--shadow-soft); transition:0.3s; } .nav-links .contact-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); color: white; } /* ===== PAGE SECTIONS ===== */ .section{ padding:4rem 2rem; } .main-text{ max-width:900px; margin:auto; font-size:1.1rem; } /* ===== SERVICES GRID ===== */ .services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; margin-top:2rem; } /* SERVICE CARD */ .services-grid > div{ background:var(--card); padding:1.8rem; border-radius:14px; border:1px solid var(--border); box-shadow:var(--shadow-soft); transition:all .35s ease; } .services-grid > div:hover{ transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-hover); } /* ===== SERVICE IMAGE ===== */ .service-image{ width:100%; height:180px; background:#f4f4f4; border-radius:10px; margin-bottom:1.5rem; overflow:hidden; display:flex; align-items:center; justify-content:center; } .service-image img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } .services-grid div:hover .service-image img{ transform:scale(1.08); } /* ===== BUTTONS ===== */ .btn-primary{ display:inline-block; background:var(--gradient-main); color:white; padding:0.85rem 1.8rem; border-radius:10px; font-size:1.05rem; font-weight:600; border:none; cursor:pointer; transition:all .3s ease; box-shadow:var(--shadow-soft); } .btn-primary:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); } /* ===== FORM ===== */ form{ max-width:650px; margin:auto; padding-top:1rem; } form input, form textarea{ width:100%; padding:0.9rem 1rem; margin:0.7rem 0; border:1px solid var(--border); border-radius:8px; font-size:1rem; transition:.25s; } form input:focus, form textarea:focus{ outline:none; border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(79,124,255,0.15); } /* ===== FOOTER ===== */ .footer{ background:white; padding:1.8rem 2rem; text-align:center; border-top:1px solid var(--border); position:fixed; bottom:0; left:0; width:100%; } .footer-links a{ margin:0 0.8rem; text-decoration:none; color:var(--muted); font-weight:500; transition:.25s; } .footer-links a:hover{ color:var(--primary-color); } /* ===== RESPONSIVE ===== */ @media (max-width:768px){ .navbar{ flex-direction:column; } .nav-links{ margin-top:1rem; } h1{ font-size:2.1rem; } .btn-primary{ width:100%; text-align:center; } }