@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #10243e; --muted: #61718a; --line: #dbe5f0; --blue: #1769e0; --blue-dark: #0d3f9d;
  --cyan: #2cc9e8; --coral: #f05b55; --soft-blue: #eff6ff; --soft-cyan: #effcff;
  --blue-pale: #eff6ff; --blue-xpale: #f7faff; --border: #dbe5f0; --white: #fff; --mist: #f7faff; --shadow: 0 18px 50px rgba(35,73,120,.12);
  --shadow-soft: 0 8px 28px rgba(35,73,120,.08); --radius: 16px; --radius-lg: 28px;
}
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); background: var(--white); font-size: 15px; line-height: 1.7; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(23,105,224,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,105,224,.045) 1px,transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom,black,transparent 72%); z-index: -1; }
img { max-width: 100%; display: block; } a { color: var(--white); text-decoration: none; } ul { list-style: none; }
h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.035em; }
.topbar { background: #1769c2; color: rgba(255,255,255,.74); font-size: 11px; }
.topbar-inner { max-width: 1240px; margin: auto; padding: 8px 28px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.topbar-left,.topbar-right { display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .topbar-right { gap:8px; }
.topbar a { transition: color .2s; } .topbar a:hover { color: var(--white); font-weight: 600; } .topbar-left span { display:inline-flex; align-items:center; gap:6px; } .topbar-left span i { font-size:10px; }
.topbar-right a { width:24px; height:24px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:7px; font-size:10px; transition:background .2s, border-color .2s, color .2s; }
.topbar-right .facebook:hover,.topbar-right .facebook:focus-visible { background:#1877f2; border-color:#1877f2; color:#fff; }
.topbar-right .instagram:hover,.topbar-right .instagram:focus-visible { background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); border-color:transparent; color:#fff; }
.topbar-right .linkedin:hover,.topbar-right .linkedin:focus-visible { background:#0a66c2; border-color:#0a66c2; color:#fff; }
nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); border-bottom:1px solid rgba(219,229,240,.8); backdrop-filter:blur(18px); }
.nav-inner { max-width:1240px; height:60px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font:700 22px 'Space Grotesk',sans-serif; letter-spacing:-.04em; }
.logo-icon { width:39px; height:32px; display:grid; place-items:center; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:white; font:700 13px 'Space Grotesk',sans-serif; box-shadow:0 6px 16px rgba(23,105,224,.24); }
.logo-icon[src] { object-fit:contain; background:transparent; box-shadow:none; }
.nav-links { display:flex; align-items:center; gap:3px; } .nav-links a { color:var(--muted); padding:9px 13px; border-radius:9px; font-size:12px; font-weight:600; transition:.25s ease; }
.nav-links a:hover,.nav-links a.active { color:var(--blue); background:var(--soft-blue); } .nav-links .nav-cta,.nav-links .nav-cta:hover { color:#fff; background:var(--ink); margin-left:10px; padding:11px 18px; box-shadow:0 8px 18px rgba(16,36,62,.18); }
.hamburger { display:none; border:0; background:none; cursor:pointer; padding:6px; } .hamburger span { display:block; width:23px; height:2px; margin:5px; background:var(--ink); border-radius:3px; }
.hero { position:relative; min-height:500px; display:grid; align-items:center; padding:10px 28px; overflow:hidden; background:radial-gradient(circle at 75% 36%,rgba(44,201,232,.12),transparent 28%),linear-gradient(135deg,#fff 0%,#f5f9ff 100%); border-bottom:1px solid var(--line); }
.hero-inner { position:relative; z-index:1; width:100%; max-width:1240px; margin:auto; display:grid; grid-template-columns:.92fr 1.08fr; gap:70px; align-items:center; }
.hero-content { animation:rise-in .8s both; } .hero-badge { display:inline-flex; align-items:center; gap:9px; padding:7px 13px; color:var(--blue); background:rgba(239,246,255,.82); border:1px solid #cfe1fb; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hero-badge span { width:7px; height:7px; background:var(--coral); border-radius:50%; box-shadow:0 0 0 5px rgba(240,91,85,.12); }
.hero-head-text { margin:10px 0; max-width:650px; font-size:clamp(2rem,3vw,4rem); line-height:.98; font-weight:700; } .hero h1 .blue { color:var(--blue); } .hero h1 .red { color:var(--coral); }
.hero-desc { max-width:510px; color:var(--muted); font-size:16px; line-height:1.85; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.btn-primary,.btn-outline,.btn-red,.btn-white { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:11px 21px; border-radius:11px; font-size:12px; font-weight:800; transition:transform .25s,box-shadow .25s,background .25s; cursor:pointer; }
.btn-primary { color:#fff; background:var(--blue); box-shadow:0 12px 24px rgba(23,105,224,.23); } .btn-primary:hover,.btn-red:hover { transform:translateY(-3px); box-shadow:0 17px 30px rgba(23,105,224,.28); }
.btn-outline { color:var(--blue); border:1px solid #bdd4f5; background:rgba(255,255,255,.7); } .btn-outline:hover { transform:translateY(-3px); background:var(--soft-blue); border-color:var(--blue); }
.btn-red { color:#fff; background:var(--coral); } .btn-white { color:var(--blue-dark); background:#fff; box-shadow:0 12px 24px rgba(0,0,0,.16); } .btn-white:hover { transform:translateY(-3px); }
.hero-panel { position:relative; width:100%; max-width:560px; min-height:0; margin-left:auto; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:17px; box-shadow:0 20px 48px rgba(23,71,130,.12); }
.hero-panel-header { position:relative; top:auto; right:auto; min-height:48px; padding:0 20px; display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.82); background:#1769c2; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.hero-panel-header span { color:rgba(255,255,255,.82) !important; font-size:12px !important; }
.panel-dot { width:7px; height:7px; border-radius:50%; }
.hero-panel-body { position:relative; width:auto; height:auto; padding:20px; display:grid; gap:10px; transform:none; animation:none; }
.hero-panel-body::before,.hero-panel-body::after { content:none; }
.stat-row { position:relative; z-index:auto; width:auto; min-height:64px; padding:10px 16px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:10px; background:#f8fafc; box-shadow:none; backdrop-filter:none; transform:none; }
.stat-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; background:var(--soft-blue); font-size:16px; } .stat-info .num { color:var(--blue); font:700 21px 'Space Grotesk',sans-serif; line-height:1; } .stat-info .lbl { margin-top:5px; color:var(--muted); font-size:9px; font-weight:700; line-height:1.2; } .stat-row.red .stat-info .num { color:var(--coral); }
.container { max-width:1240px; margin:auto; padding:0 28px; } .section-pad { padding:10px 0; } .section-label { margin-bottom:10px; color:var(--coral); font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.section-title { margin-bottom:15px; color:var(--ink); font-size:clamp(2rem,3.4vw,3rem); line-height:1.08; } .section-sub { max-width:600px; color:var(--muted); font-size:14px; line-height:1.85; } .section-header { margin-bottom:54px; } .section-header.centered { text-align:center; } .section-header.centered .section-sub { margin:auto; }
.services-bg,.how-bg { position:relative; background:var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card,.feature-item,.testi-card { position:relative; overflow:hidden; background:rgba(255,255,255,.84); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 4px 0 rgba(23,105,224,.02); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s; }
.service-card { min-height:235px; padding:28px 25px; } .service-card::after { content:''; position:absolute; width:90px; height:90px; right:-45px; bottom:-45px; border-radius:50%; background:var(--soft-cyan); transition:transform .4s; } .service-card:hover,.feature-item:hover,.testi-card:hover { transform:translateY(-8px); border-color:#b9d4f6; box-shadow:var(--shadow); } .service-card:hover::after { transform:scale(2); }
.service-icon { position:relative; z-index:1; width:47px; height:47px; margin-bottom:20px; display:grid; place-items:center; border-radius:14px; color:var(--service-accent,var(--blue)); background:var(--service-tint,linear-gradient(135deg,var(--soft-blue),var(--soft-cyan))); border:1px solid var(--service-border,#cde3f9); font-size:20px; } .service-card h3 { position:relative; z-index:1; margin-bottom:8px; font-size:18px; } .service-card p { position:relative; z-index:1; color:var(--muted); font-size:12px; line-height:1.75; } .learn-more { position:relative; z-index:1; display:inline-flex; gap:6px; margin-top:17px; color:var(--blue); font-size:11px; font-weight:800; transition:gap .25s; } .learn-more:hover { gap:10px; color:var(--coral); }
.service-icon i { color:inherit; }
.services-grid .service-card:nth-child(1) { --service-accent:#1769e0; --service-tint:#eaf2ff; --service-border:#c9dcff; }
.services-grid .service-card:nth-child(2) { --service-accent:#0d9488; --service-tint:#e7f8f5; --service-border:#bce9e2; }
.services-grid .service-card:nth-child(3) { --service-accent:#7c3aed; --service-tint:#f2ebff; --service-border:#ddccff; }
.services-grid .service-card:nth-child(4) { --service-accent:#e04f8a; --service-tint:#fff0f6; --service-border:#f8c9dc; }
.services-grid .service-card:nth-child(5) { --service-accent:#0891b2; --service-tint:#e7f8fc; --service-border:#b8e9f2; }
.services-grid .service-card:nth-child(6) { --service-accent:#d97706; --service-tint:#fff5e6; --service-border:#f5dcaf; }
.services-grid .service-card:nth-child(7) { --service-accent:#4f46e5; --service-tint:#eeedff; --service-border:#d0ceff; }
.services-grid .service-card:nth-child(8) { --service-accent:#e11d48; --service-tint:#fff0f2; --service-border:#ffcbd4; }
.services-grid .service-card:nth-child(9) { --service-accent:#15803d; --service-tint:#eaf8ee; --service-border:#c5e8ce; }
.stats-band { padding:60px 0; color:#fff; background:linear-gradient(105deg,var(--blue-dark),var(--blue) 65%,#2db7dd); } .stats-row { display:flex; justify-content:center; } .stat-block { flex:1; text-align:center; padding:0 24px; border-right:1px solid rgba(255,255,255,.2); } .stat-block:last-child { border:0; } .stat-block .num { font:700 3rem 'Space Grotesk',sans-serif; line-height:1; } .stat-block .num span { font-size:1.9rem; } .stat-block .lbl { margin-top:8px; color:rgba(255,255,255,.72); font-size:11px; font-weight:700; }
.about-grid,.how-grid,.benefits-grid { display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:center; } .about-visual { position:relative; padding:34px; background:linear-gradient(145deg,#eef7ff,#fbfeff); border:1px solid #cee1f7; border-radius:var(--radius-lg); } .about-visual::before { content:'SIPL / SYSTEMS'; position:absolute; top:20px; right:24px; color:rgba(23,105,224,.4); font:700 9px 'Space Grotesk',sans-serif; letter-spacing:.14em; }
.about-feat-list { display:grid; gap:13px; } .about-feat { display:flex; align-items:flex-start; gap:14px; padding:16px; border:1px solid rgba(219,229,240,.92); border-radius:14px; background:rgba(255,255,255,.84); box-shadow:var(--shadow-soft); transition:transform .3s; } .about-feat:hover { transform:translateX(6px); } .feat-icon-wrap { width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; background:var(--blue); font-size:15px; } .feat-icon-wrap.red { background:var(--coral); } .feat-text .ft { font-size:13px; font-weight:800; } .feat-text .fs { color:var(--muted); font-size:11px; line-height:1.55; } .about-checks { display:grid; gap:12px; margin:27px 0 31px; } .about-checks li { display:flex; gap:10px; color:var(--muted); font-size:13px; } .check { color:var(--blue); font-weight:800; }
.how-grid { align-items:start; } .steps { display:grid; } .step { display:flex; gap:18px; padding-bottom:22px; } .step-left { display:flex; flex-direction:column; align-items:center; } .step-num { width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center; border-radius: 50%; background:var(--blue); color:#fff; font:700 12px 'Space Grotesk',sans-serif; } .step-line { width:1px; flex:1; min-height:25px; margin:5px 0; background:#bad4f5; } .step-content { padding-top:2px; } .step-content h4 { margin-bottom:4px; font-size:15px; } .step-content p { color:var(--muted); font-size:12px; line-height:1.65; }
.accordion { display:grid; gap:10px; } .acc-item { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:13px; } .acc-item.open { border-color:#bbd5f6; box-shadow:var(--shadow-soft); } .acc-header { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:17px 19px; cursor:pointer; color:var(--ink); font-size:12px; font-weight:800; } .acc-item.open .acc-header { color:var(--blue); } .acc-arrow { color:var(--blue); font-size:20px; font-weight:400; transition:transform .3s; } .acc-item.open .acc-arrow { transform:rotate(45deg); } .acc-body { max-height:0; overflow:hidden; padding:0 19px; color:var(--muted); font-size:12px; line-height:1.75; transition:max-height .35s ease,padding .35s ease; } .acc-item.open .acc-body { max-height:180px; padding-bottom:17px; }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .testi-card { padding:27px; } .stars { margin-bottom:15px; color:#f2a93b; letter-spacing:2px; font-size:13px; } .testi-card p { min-height:94px; margin-bottom:19px; color:var(--muted); font-size:12.5px; font-style:italic; line-height:1.75; } .testi-author { display:flex; align-items:center; gap:10px; } .testi-av { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-size:11px; font-weight:800; } .testi-av.red { background:var(--coral); } .testi-name { font-size:12px; font-weight:800; } .testi-role { color:var(--muted); font-size:10px; }
.cta-band { position:relative; overflow:hidden; padding:50px 28px; text-align:center; background:#2c76c5; } .cta-band::before,.cta-band::after { content:''; position:absolute; border:1px solid rgba(44,201,232,.28); border-radius:50%; } .cta-band::before { width:400px; height:400px; left:-170px; top:-200px; } .cta-band::after { width:550px; height:550px; right:-240px; bottom:-350px; } .cta-band h2,.cta-band p,.cta-band a { position:relative; z-index:1; } .cta-band h2 { color:#fff; font-size:clamp(2rem,4vw,3.3rem); } .cta-band p { max-width:520px; margin:15px auto 30px; color:rgba(255,255,255,.66); font-size:14px; }
footer { padding:68px 0 27px; color:rgba(255,255,255,.72); background:#091b31; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:52px; margin-bottom:52px; } .footer-brand .nav-logo { margin-bottom:16px; color:#fff; } .footer-brand p { max-width:330px; color:rgba(255,255,255,.54); font-size:12px; line-height:1.8; } .footer-contacts { display:grid; gap:7px; margin-top:18px; font-size:11px; } .footer-col h5 { margin-bottom:17px; color:#fff; font-size:11px; letter-spacing:.14em; text-transform:uppercase; } .footer-col ul { display:grid; gap:9px; } .footer-col li a { color:rgba(255,255,255,.54); font-size:11px; transition:color .2s; } .footer-col li a:hover { color:var(--cyan); } .footer-socials { display:flex; gap:9px; margin-top:18px; } .footer-socials a { width:31px; height:31px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:9px; font-size:10px; } .footer-socials a:hover { color:#fff; background:var(--blue); border-color:var(--blue); } .footer-bottom { display:flex; justify-content:space-between; gap:12px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.36); font-size:10px; }
.service-hero { position:relative; overflow:hidden; padding:82px 28px; background:radial-gradient(circle at 80% 45%,rgba(44,201,232,.13),transparent 27%),linear-gradient(135deg,#fff,#f3f8ff); border-bottom:1px solid var(--line); } .service-hero::after { content:''; position:absolute; right:7%; top:18%; width:260px; height:260px; border:1px solid rgba(23,105,224,.18); border-radius:50%; box-shadow:0 0 0 28px rgba(23,105,224,.035),0 0 0 58px rgba(23,105,224,.025); } .service-hero-inner { position:relative; z-index:1; max-width:1240px; margin:auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; } .breadcrumb { display:flex; align-items:center; gap:7px; margin-bottom:18px; color:var(--muted); font-size:11px; } .breadcrumb a { color:var(--blue); font-weight:700; } .service-hero h1 { max-width:680px; margin-bottom:18px; font-size:clamp(2.5rem,5vw,4.4rem); line-height:1; } .service-hero p { max-width:560px; margin-bottom:28px; color:var(--muted); font-size:15px; line-height:1.85; } .service-hero-img { position:relative; z-index:1; min-height:315px; display:grid; place-items:center; border:1px solid #cde3f9; border-radius:var(--radius-lg); background:radial-gradient(circle,#fff 0 22%,transparent 23%),linear-gradient(145deg,var(--soft-blue),#fff); box-shadow:var(--shadow); font-size:86px; animation:breathe 5s ease-in-out infinite; }
.features-section { padding:112px 0; } .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .feature-item { padding:25px; } .feature-item .fi { width:42px; height:42px; display:grid; place-items:center; margin-bottom:18px; border-radius:12px; background:var(--soft-blue); font-size:18px; } .feature-item h4 { margin-bottom:6px; font-size:16px; } .feature-item p { color:var(--muted); font-size:12px; line-height:1.7; } .benefits-section { padding:112px 0; background:var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .benefit-list { display:grid; gap:18px; } .benefit-item { display:flex; gap:12px; align-items:flex-start; } .bcheck { width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; border-radius:7px; background:var(--blue); color:#fff; font-size:11px; font-weight:800; } .benefit-item h5 { margin-bottom:2px; font-size:14px; letter-spacing:0; } .benefit-item p { color:var(--muted); font-size:12px; line-height:1.6; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1); } .reveal.visible { opacity:1; transform:none; }
@keyframes rise-in { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } } @keyframes float-cube { 0%,100% { transform:rotateX(58deg) rotateZ(-35deg) translateY(0); } 50% { transform:rotateX(62deg) rotateZ(-29deg) translateY(-16px); } } @keyframes breathe { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-9px) rotate(1deg); } }
.footer-socials a { transition:background .2s, border-color .2s, color .2s; }
.footer-socials .facebook:hover,.footer-socials .facebook:focus-visible { background:#1877f2; border-color:#1877f2; color:#fff; }
.footer-socials .instagram:hover,.footer-socials .instagram:focus-visible { background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); border-color:transparent; color:#fff; }
.footer-socials .linkedin:hover,.footer-socials .linkedin:focus-visible { background:#0a66c2; border-color:#0a66c2; color:#fff; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } .reveal { opacity:1; transform:none; } }
@media (max-width:991px) { .hero-inner,.service-hero-inner { grid-template-columns:1fr; gap:40px; } .hero { min-height:auto; } .hero-content { text-align:center; } .hero-desc { margin:auto; } .hero-actions { justify-content:center; } .hero-panel { min-height:410px; } .about-grid,.how-grid,.benefits-grid { gap:48px; } .services-grid,.features-grid { grid-template-columns:repeat(2,1fr); } .testi-grid { grid-template-columns:repeat(2,1fr); } .footer-grid { grid-template-columns:1.5fr 1fr 1fr; } .footer-brand { grid-column:1 / -1; } }
@media (max-width:768px) { .topbar { display:none; } .nav-inner { height:68px; padding:0 18px; } .hamburger { display:block; } .nav-links { display:none; position:absolute; top:68px; left:0; right:0; padding:12px 18px 17px; flex-direction:column; align-items:stretch; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); box-shadow:var(--shadow-soft); } .nav-links.open { display:flex; } .nav-links a { display:block; padding:12px; } .nav-links .nav-cta { margin:4px 0 0; text-align:center; } .hero,.service-hero { padding:65px 18px 75px; } .hero h1 { font-size:clamp(2.7rem,13vw,4.3rem); } .hero-panel { transform:scale(.86); margin:-25px 0 -42px; } .container { padding:0 18px; } .section-pad,.features-section,.benefits-section { padding:76px 0; } .about-grid,.how-grid,.benefits-grid { grid-template-columns:1fr; gap:44px; } .services-grid,.features-grid,.testi-grid { grid-template-columns:1fr; } .stats-row { flex-direction:column; } .stat-block { padding:18px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.2); } .stat-block:last-child { border-bottom:0; } .footer-grid { grid-template-columns:1fr 1fr; gap:34px; } .footer-brand { grid-column:1 / -1; } .footer-bottom { flex-direction:column; text-align:center; } }
@media (max-width:480px) { .hero-panel { transform:scale(.69); margin:-50px -40px -85px; } .hero-actions a,.service-hero .btn-primary,.service-hero .btn-outline { width:100%; } .about-visual { padding:21px; } .footer-grid { grid-template-columns:1fr; } }
@media (max-width:991px) { .hero-panel { min-height:0; } }
@media (max-width:768px) { .hero-panel { transform:none; margin:0 auto; } }
@media (max-width:480px) { .hero-panel { margin:0 auto; } }