/* ====================================================== SERVICE PAGE CSS ONLY works when Fully scoped + premium + animated ====================================================== */ body.svc-exact{ margin:0; padding:0; overflow-x:hidden; font-family:Arial, Helvetica, sans-serif; background: radial-gradient(circle at 1px 1px, rgba(7,44,98,.05) 1.1px, transparent 0), linear-gradient(180deg,#fbfcff 0%,#f5f7fc 100%); background-size:22px 22px,auto; color:#1e2d48; } body.svc-exact *{ box-sizing:border-box; } body.svc-exact .svc-exact-hero{ display:none; } /* ================================= BREADCRUMB ================================= */ body.svc-exact .pb-breadcrumb{ width:min(1280px, calc(100% - 40px)); margin:18px auto 10px; font-size:14px; color:#667085; line-height:1.5; animation:svcFadeUp .5s ease both; } body.svc-exact .pb-breadcrumb a{ color:#ff6a00; text-decoration:none; transition:color .25s ease; } body.svc-exact .pb-breadcrumb a:hover{ color:#d94f00; text-decoration:underline; } body.svc-exact .pb-bc-sep{ margin:0 6px; color:#98a2b3; } body.svc-exact .pb-bc-current{ color:#344054; font-weight:600; } /* ================================= WRAPPER ================================= */ body.svc-exact .svc-exact-wrap{ padding:10px 0 56px; } body.svc-exact .svc-exact-wrap .container{ width:min(1280px, 100%); padding-left:20px; padding-right:20px; margin:0 auto; } /* ================================= DESKTOP GRID ================================= */ @media (min-width:992px){ body.svc-exact .svc-exact-wrap .row{ display:flex; align-items:flex-start; gap:32px; } body.svc-exact .svc-exact-wrap .col-md-8{ flex:0 0 calc(66.666% - 16px); max-width:calc(66.666% - 16px); min-width:0; animation:svcFadeLeft .7s ease both; } body.svc-exact .svc-exact-wrap .col-md-4{ flex:0 0 calc(33.333% - 16px); max-width:calc(33.333% - 16px); min-width:0; animation:svcFadeRight .7s ease both; } body.svc-exact .svc-exact-formbox{ position:sticky; top:24px; } } /* ================================= MOBILE STACK ================================= */ @media (max-width:991px){ body.svc-exact .svc-exact-wrap .row{ display:block; } body.svc-exact .svc-exact-wrap .col-md-8, body.svc-exact .svc-exact-wrap .col-md-4{ width:100%; max-width:100%; } } /* ================================= LEFT CONTENT ================================= */ body.svc-exact .svc-exact-title{ display:block; margin:0 0 18px; padding:18px 22px; border-radius:14px; background:linear-gradient(135deg,#f24c4c 0%, #ff5f57 100%); color:#ffffff; font-size:clamp(24px, 2.3vw, 34px); font-weight:800; line-height:1.25; box-shadow:0 12px 28px rgba(242,76,76,.18); letter-spacing:-0.02em; } body.svc-exact .svc-exact-text{ margin-bottom:22px; } body.svc-exact .svc-exact-text p{ margin:0 0 18px; color:#4a5872; font-size:16px; line-height:1.95; text-align:left; } body.svc-exact .svc-exact-text p strong{ color:#253858; } body.svc-exact .svc-exact-text a{ color:#0a58ca; font-weight:700; text-decoration:underline; text-underline-offset:2px; } body.svc-exact .svc-exact-text a:hover{ color:#073b87; } body.svc-exact .svc-exact-text p strong:first-child{ display:inline-block; margin-bottom:4px; } /* ================================= RIGHT SIDEBAR BOX ================================= */ body.svc-exact .svc-exact-formbox{ position:relative; padding:14px; border-radius:22px; background:linear-gradient(180deg,#a61f8e 0%, #f06a2f 100%); box-shadow: 0 18px 40px rgba(144,28,122,.22), 0 8px 18px rgba(0,0,0,.08); overflow:hidden; } body.svc-exact .svc-exact-formbox::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 28%), radial-gradient(circle at bottom right, rgba(255,255,255,.12), transparent 26%); pointer-events:none; } body.svc-exact .svc-exact-formbox > *{ position:relative; z-index:1; } /* ================================= SIDEBAR IMAGE ================================= */ body.svc-exact .svc-exact-sideimg{ position:relative; width:100%; height:420px; /* fixed image size */ margin:0 0 14px; padding:10px; border-radius:18px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88)); box-shadow: 0 10px 24px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.35); animation:svcImageReveal .9s cubic-bezier(.22,.61,.36,1) both; } body.svc-exact .svc-exact-sideimg::before{ content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 36%), radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 28%); pointer-events:none; z-index:1; } body.svc-exact .svc-exact-sideimg img{ display:block; width:100%; height:100%; object-fit:contain; /* full image visible */ object-position:center center; border-radius:14px; transform:scale(1); transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .35s ease, opacity .35s ease; animation:svcImageFloat 4.5s ease-in-out infinite; } body.svc-exact .svc-exact-sideimg:hover img{ transform:scale(1.03); filter:saturate(1.05) contrast(1.02); } body.svc-exact .svc-exact-sideimg:hover{ box-shadow: 0 18px 34px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.42); } /* ================================= CONTACT FORM INSIDE SIDEBAR ================================= */ body.svc-exact .svc-exact-formbox .bsContact{ padding:0 !important; background:transparent !important; } body.svc-exact .svc-exact-formbox .bsContact__wrap{ width:100% !important; } body.svc-exact .svc-exact-formbox .bsContact__card{ border:none !important; border-radius:18px !important; box-shadow:none !important; background:rgba(255,255,255,.96) !important; } body.svc-exact .svc-exact-formbox .bsContact__content{ padding:22px 18px 34px !important; } body.svc-exact .svc-exact-formbox .bsContact__shape{ display:none !important; } body.svc-exact .svc-exact-formbox .bsContact__title{ font-size:clamp(28px, 3vw, 40px) !important; line-height:1.08 !important; margin-bottom:8px !important; } body.svc-exact .svc-exact-formbox .bsContact__subtitle{ font-size:15px !important; line-height:1.65 !important; margin-bottom:16px !important; } body.svc-exact .svc-exact-formbox .bsContact__form{ width:100% !important; } body.svc-exact .svc-exact-formbox .bsContact__grid{ gap:12px !important; margin-bottom:12px !important; } body.svc-exact .svc-exact-formbox .bsContact__field input, body.svc-exact .svc-exact-formbox .bsContact__field textarea{ border-radius:10px !important; font-size:14px !important; border:1px solid rgba(15,23,55,.10) !important; box-shadow:0 4px 12px rgba(0,0,0,.03) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } body.svc-exact .svc-exact-formbox .bsContact__field input{ height:48px !important; padding:0 14px !important; } body.svc-exact .svc-exact-formbox .bsContact__field textarea{ min-height:110px !important; padding:12px 14px !important; } body.svc-exact .svc-exact-formbox .bsContact__field input:focus, body.svc-exact .svc-exact-formbox .bsContact__field textarea:focus{ transform:translateY(-1px); border-color:#7cdcc6 !important; box-shadow:0 0 0 4px rgba(124,220,198,.16) !important; } body.svc-exact .svc-exact-formbox .bsContact__btn{ min-width:190px !important; min-height:50px !important; padding:10px 18px !important; font-size:15px !important; border-radius:10px !important; box-shadow:0 10px 20px rgba(9,18,44,.18) !important; transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important; } body.svc-exact .svc-exact-formbox .bsContact__btn:hover{ transform:translateY(-2px); box-shadow:0 14px 24px rgba(9,18,44,.24) !important; } body.svc-exact .svc-exact-formbox .bsContact__btnIcon{ width:28px !important; height:28px !important; font-size:14px !important; flex:0 0 28px !important; } /* fallback if plain form is used */ body.svc-exact .svc-exact-formtitle{ margin:0 0 16px; color:#fff; font-size:24px; font-weight:800; line-height:1.2; } body.svc-exact .svc-exact-formbox form{ margin:0; } body.svc-exact .svc-exact-formbox input, body.svc-exact .svc-exact-formbox textarea{ width:100%; padding:12px 14px; margin-bottom:12px; border-radius:10px; border:1px solid rgba(255,255,255,.35); background:#fff; font-size:14px; color:#24324a; outline:none; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } body.svc-exact .svc-exact-formbox input:focus, body.svc-exact .svc-exact-formbox textarea:focus{ transform:translateY(-1px); border-color:#ffffff; box-shadow:0 0 0 4px rgba(255,255,255,.24); } body.svc-exact .svc-exact-formbox textarea{ height:110px; resize:none; } body.svc-exact .svc-exact-formbox button{ background:#111827; color:#fff; padding:12px 20px; border-radius:999px; border:2px solid rgba(255,255,255,.75); font-weight:700; cursor:pointer; transition:transform .2s ease, background .2s ease; } body.svc-exact .svc-exact-formbox button:hover{ background:#0b1220; transform:translateY(-2px); } /* ================================= MOBILE ================================= */ @media (max-width:768px){ body.svc-exact .pb-breadcrumb{ width:calc(100% - 24px); margin:14px auto 8px; font-size:13px; } body.svc-exact .svc-exact-wrap{ padding:8px 0 38px; } body.svc-exact .svc-exact-wrap .container{ padding-left:12px; padding-right:12px; } body.svc-exact .svc-exact-title{ font-size:22px; padding:14px 16px; border-radius:12px; margin-bottom:14px; } body.svc-exact .svc-exact-text p{ font-size:15px; line-height:1.85; margin-bottom:16px; } body.svc-exact .svc-exact-formbox{ margin-top:20px; border-radius:18px; padding:10px; } body.svc-exact .svc-exact-sideimg{ height:300px; margin-bottom:10px; border-radius:14px; padding:8px; } body.svc-exact .svc-exact-sideimg img{ border-radius:12px; } body.svc-exact .svc-exact-formbox .bsContact__content{ padding:18px 14px 22px !important; } body.svc-exact .svc-exact-formbox .bsContact__title{ font-size:28px !important; } body.svc-exact .svc-exact-formbox .bsContact__subtitle{ font-size:14px !important; } body.svc-exact .svc-exact-formbox .bsContact__grid{ grid-template-columns:1fr !important; } } /* ================================= ANIMATIONS ================================= */ @keyframes svcFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } } @keyframes svcFadeLeft{ from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:translateX(0); } } @keyframes svcFadeRight{ from{ opacity:0; transform:translateX(22px); } to{ opacity:1; transform:translateX(0); } } @keyframes svcImageReveal{ from{ opacity:0; transform:translateY(16px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } } @keyframes svcImageFloat{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } 100%{ transform:translateY(0); } } body.svc-exact .svc-exact-title, body.svc-exact .svc-exact-text{ animation:svcFadeUp .65s ease both; } /* reduced motion */ @media (prefers-reduced-motion: reduce){ body.svc-exact *, body.svc-exact *::before, body.svc-exact *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }