/* =========================================================================== GAWAGI DISPENSARY — website refinement layer --------------------------------------------------------------------------- Purely additive. It changes no content and no markup — it sits on top of style.css / gawagi-polish.css / gawagi-elevate.css and pushes the look from "clinic template" to something colourful and modern: a proper palette, gradient headings, soft colour fields behind the sections, cards that carry their own accent, and motion that earns its place. Load order matters: this file must come LAST in . =========================================================================== */ :root{ --g-navy:#0d2a5c; --g-blue:#0463FA; --g-blue-deep:#0341B8; --g-red:#E02418; /* Six hues, each with a light companion, so a section can take a colour without shouting. */ --c1:#0463FA; --c1-soft:#E8F0FF; --c2:#00B8A9; --c2-soft:#E0F7F5; --c3:#7C3AED; --c3-soft:#F1EAFE; --c4:#F59E0B; --c4-soft:#FEF3DD; --c5:#EC4899; --c5-soft:#FDE9F3; --c6:#10B981; --c6-soft:#E3F8EF; --g-ink:#101B33; --g-body:#55637a; --g-line:#E6ECF6; --g-tint:#F5F9FF; --g-shadow:0 6px 24px rgba(13,42,92,.07); --g-shadow-md:0 14px 36px rgba(13,42,92,.11); --g-shadow-lg:0 26px 60px rgba(13,42,92,.16); --g-radius:20px; --g-ease:cubic-bezier(.22,.61,.36,1); --grad-hero:linear-gradient(120deg,#0463FA 0%,#7C3AED 50%,#EC4899 100%); --grad-warm:linear-gradient(120deg,#F59E0B 0%,#EC4899 100%); --grad-cool:linear-gradient(120deg,#00B8A9 0%,#0463FA 100%); } /* ------------------------------------------------------------ typography */ body{color:var(--g-body);font-size:16px;line-height:1.75;background:#fff; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4,h5,h6,.display-1,.display-2,.display-3,.display-4{ color:var(--g-ink);letter-spacing:-.025em;line-height:1.16;font-weight:800} h1,.display-3,.display-4{letter-spacing:-.038em} p{max-width:68ch} .text-center p{margin-left:auto;margin-right:auto} .section-title h1,.section-title h2{font-size:clamp(1.8rem,1.1rem + 2.4vw,2.9rem)} .section-title p,.section-title h5{ text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;font-weight:800; background:var(--grad-cool);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent} .section-title{position:relative} .section-title h1::after,.section-title h2::after{ content:"";display:block;width:78px;height:5px;margin:20px auto 0;border-radius:99px; background:var(--grad-hero);background-size:200% 100%; animation:gSlide 6s ease-in-out infinite alternate} @keyframes gSlide{from{background-position:0% 50%}to{background-position:100% 50%}} .section-title.text-start h1::after,.section-title.text-left h1::after{margin-left:0;margin-right:auto} /* --------------------------------------------------------------- buttons */ a{transition:color .2s var(--g-ease)} a:hover{color:var(--g-blue-deep)} .btn{border-radius:999px;font-weight:700;letter-spacing:.01em;padding:.78rem 1.8rem; border:none;position:relative;overflow:hidden; transition:transform .24s var(--g-ease),box-shadow .24s var(--g-ease),filter .2s} .btn-primary,.btn.btn-primary{background:var(--grad-hero);background-size:200% 100%; box-shadow:0 10px 26px rgba(4,99,250,.30)} .btn-primary:hover,.btn.btn-primary:hover{background-position:100% 0;transform:translateY(-3px); box-shadow:0 18px 40px rgba(124,58,237,.38)} .btn-secondary,.btn.btn-secondary{background:var(--grad-warm);box-shadow:0 10px 26px rgba(236,72,153,.26)} .btn-secondary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(236,72,153,.36)} .btn-outline-primary{border:2px solid var(--g-blue);color:var(--g-blue-deep);background:transparent} .btn-outline-primary:hover{background:var(--grad-hero);color:#fff;border-color:transparent;transform:translateY(-3px)} .btn-lg{padding:.95rem 2.3rem} /* a light sweep across a button on hover */ .btn::after{content:"";position:absolute;inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%);transition:transform .6s var(--g-ease)} .btn:hover::after{transform:translateX(120%)} /* ---------------------------------------------------------------- navbar */ .navbar{backdrop-filter:saturate(170%) blur(12px); transition:box-shadow .3s var(--g-ease),background .3s var(--g-ease)} .navbar.sticky-top,.navbar.fixed-top{box-shadow:0 2px 22px rgba(13,42,92,.09)} .navbar .navbar-nav .nav-link{font-weight:700;position:relative;padding-left:.95rem;padding-right:.95rem} .navbar .navbar-nav .nav-link::after{content:"";position:absolute;left:50%;bottom:.35rem; width:0;height:3px;border-radius:3px;background:var(--grad-hero); transform:translateX(-50%);transition:width .28s var(--g-ease)} .navbar .navbar-nav .nav-link:hover::after, .navbar .navbar-nav .nav-link.active::after{width:calc(100% - 1.9rem)} /* ------------------------------------------------------------------ hero */ /* Only the page banner takes the tinted wash. The home page builds its own picture carousel out of .carousel-item, and washing those in purple was what turned the building photo blue and stretched the header band, so it is left exactly as the template drew it. */ .page-header::before,.hero::before{ content:"";position:absolute;inset:0;z-index:1; background: radial-gradient(900px 480px at 12% 18%,rgba(124,58,237,.45),transparent 60%), radial-gradient(760px 420px at 88% 22%,rgba(0,184,169,.38),transparent 62%), linear-gradient(115deg,rgba(13,42,92,.88) 0%,rgba(4,99,250,.52) 52%,rgba(13,42,92,.26) 100%)} .page-header .container,.hero .container{position:relative;z-index:2} .page-header h1{color:#fff;text-shadow:0 3px 26px rgba(0,0,0,.32)} .page-header p{color:rgba(255,255,255,.93)} /* ----------------------------------------------------------------- cards */ .service-item,.price-item,.team-item,.blog-item,.card,.feature-item,.testimonial-item{ border:1px solid var(--g-line);border-radius:var(--g-radius);background:#fff; box-shadow:var(--g-shadow);overflow:hidden;position:relative; transition:transform .34s var(--g-ease),box-shadow .34s var(--g-ease),border-color .34s var(--g-ease)} /* Every card carries a coloured bar across its top, and the colour rotates down the row so a grid reads as a set rather than a wall of white. */ .service-item::before,.price-item::before,.team-item::before, .feature-item::before,.blog-item::before{ content:"";position:absolute;top:0;left:0;right:0;height:4px; background:var(--grad-cool);transform:scaleX(0);transform-origin:left; transition:transform .4s var(--g-ease)} .service-item:hover::before,.price-item:hover::before,.team-item:hover::before, .feature-item:hover::before,.blog-item:hover::before{transform:scaleX(1)} .row > [class*="col"]:nth-child(6n+1) .service-item::before, .row > [class*="col"]:nth-child(6n+1) .feature-item::before{background:linear-gradient(90deg,var(--c1),var(--c3))} .row > [class*="col"]:nth-child(6n+2) .service-item::before, .row > [class*="col"]:nth-child(6n+2) .feature-item::before{background:linear-gradient(90deg,var(--c2),var(--c6))} .row > [class*="col"]:nth-child(6n+3) .service-item::before, .row > [class*="col"]:nth-child(6n+3) .feature-item::before{background:linear-gradient(90deg,var(--c5),var(--c4))} .row > [class*="col"]:nth-child(6n+4) .service-item::before, .row > [class*="col"]:nth-child(6n+4) .feature-item::before{background:linear-gradient(90deg,var(--c3),var(--c5))} .row > [class*="col"]:nth-child(6n+5) .service-item::before, .row > [class*="col"]:nth-child(6n+5) .feature-item::before{background:linear-gradient(90deg,var(--c4),var(--c2))} .row > [class*="col"]:nth-child(6n+6) .service-item::before, .row > [class*="col"]:nth-child(6n+6) .feature-item::before{background:linear-gradient(90deg,var(--c6),var(--c1))} .service-item:hover,.price-item:hover,.team-item:hover, .blog-item:hover,.card:hover,.feature-item:hover{ transform:translateY(-10px);box-shadow:var(--g-shadow-lg);border-color:rgba(4,99,250,.3)} .service-item i,.feature-item i,.service-item .service-icon{ transition:transform .34s var(--g-ease),color .34s var(--g-ease)} .service-item:hover i,.feature-item:hover i{transform:scale(1.14) rotate(-8deg)} .row > [class*="col"]:nth-child(6n+1) .service-item:hover i{color:var(--c1)} .row > [class*="col"]:nth-child(6n+2) .service-item:hover i{color:var(--c2)} .row > [class*="col"]:nth-child(6n+3) .service-item:hover i{color:var(--c5)} .row > [class*="col"]:nth-child(6n+4) .service-item:hover i{color:var(--c3)} .row > [class*="col"]:nth-child(6n+5) .service-item:hover i{color:var(--c4)} .row > [class*="col"]:nth-child(6n+6) .service-item:hover i{color:var(--c6)} .team-item img,.blog-item img,.service-item img{transition:transform .55s var(--g-ease)} .team-item:hover img,.blog-item:hover img,.service-item:hover img{transform:scale(1.07)} /* -------------------------------------------------------------- sections */ section,.container-fluid{position:relative} /* Soft colour fields behind alternating bands — colour without swamping the text that sits on top. */ section:nth-of-type(even),.container-fluid.bg-light,.bg-light{ background: radial-gradient(660px 360px at 8% 0%,var(--c1-soft),transparent 58%), radial-gradient(620px 340px at 92% 100%,var(--c3-soft),transparent 58%), var(--g-tint) !important} section:nth-of-type(4n+3){ background: radial-gradient(640px 340px at 88% 4%,var(--c2-soft),transparent 58%), radial-gradient(560px 320px at 6% 96%,var(--c4-soft),transparent 58%), #fff} .container-fluid + .container-fluid{border-top:1px solid var(--g-line)} /* ------------------------------------------------------------- key stats */ .counter,.fact-item,.counter-item{border-radius:var(--g-radius);border:none;color:#fff; background:var(--grad-hero);background-size:180% 180%; animation:gShift 12s ease infinite;box-shadow:var(--g-shadow-lg)} @keyframes gShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .counter h1,.counter h2,.fact-item h1,.counter-item h2{color:#fff;font-weight:800} .counter p,.fact-item p{color:rgba(255,255,255,.85)} /* ----------------------------------------------------------------- forms */ .form-control,.form-select,.custom-select{border-radius:14px;border:1.5px solid var(--g-line); padding:.82rem 1.05rem;transition:border-color .2s,box-shadow .2s} .form-control:focus,.form-select:focus{border-color:var(--g-blue); box-shadow:0 0 0 .25rem rgba(4,99,250,.15)} textarea.form-control{min-height:150px} /* ---------------------------------------------------------------- footer */ footer,.footer{position:relative;color:rgba(255,255,255,.78); background: radial-gradient(760px 420px at 12% 0%,rgba(124,58,237,.35),transparent 60%), radial-gradient(680px 380px at 88% 10%,rgba(0,184,169,.22),transparent 60%), linear-gradient(165deg,#0b2450,#0d2a5c 55%,#06162F)} footer::before,.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px; background:var(--grad-hero)} footer h4,footer h5,.footer h4,.footer h5{color:#fff} footer a,.footer a{color:rgba(255,255,255,.78);transition:color .2s,padding-left .2s var(--g-ease)} footer a:hover,.footer a:hover{color:#fff;padding-left:5px} /* ------------------------------------------------------ reveal on scroll */ [data-g-reveal]{opacity:0;transform:translateY(28px); transition:opacity .75s var(--g-ease),transform .75s var(--g-ease); will-change:opacity,transform} [data-g-reveal].g-in{opacity:1;transform:none} /* ===================================================== floating actions A WhatsApp button and a back-to-top arrow, stacked bottom-right. The template's own .back-to-top is folded into the same stack so there are never two arrows fighting for the corner. ======================================================================= */ .g-fab{position:fixed;right:22px;bottom:22px;z-index:1080; display:flex;flex-direction:column;align-items:center;gap:14px} .g-fab a,.g-fab button{width:56px;height:56px;border-radius:50%;border:none; display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px; text-decoration:none;cursor:pointer;position:relative; transition:transform .26s var(--g-ease),box-shadow .26s var(--g-ease)} .g-fab a:hover,.g-fab button:hover{transform:translateY(-4px) scale(1.06);color:#fff} .g-fab-wa{background:linear-gradient(145deg,#25D366,#12A150); box-shadow:0 10px 28px rgba(18,161,80,.45)} /* a slow halo, so the eye finds it without it nagging */ .g-fab-wa::after{content:"";position:absolute;width:56px;height:56px;border-radius:50%; background:rgba(37,211,102,.45);animation:gPulse 2.6s ease-out infinite;pointer-events:none} @keyframes gPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.75);opacity:0}100%{transform:scale(1.75);opacity:0}} .g-fab-top{background:linear-gradient(145deg,#7C3AED,#EC4899); box-shadow:0 10px 28px rgba(124,58,237,.42); opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .28s,visibility .28s,transform .28s var(--g-ease)} .g-fab-top.show{opacity:1;visibility:visible;transform:none} .g-fab-tip{position:absolute;right:68px;white-space:nowrap; background:var(--g-ink);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em; padding:7px 13px;border-radius:9px;opacity:0;transform:translateX(8px);pointer-events:none; transition:opacity .2s,transform .2s var(--g-ease)} .g-fab a:hover .g-fab-tip{opacity:1;transform:none} /* the template's own arrow is hidden; ours replaces it */ .back-to-top{display:none !important} @media (max-width:575.98px){ .g-fab{right:14px;bottom:14px;gap:11px} .g-fab a,.g-fab button{width:50px;height:50px;font-size:21px} .g-fab-wa::after{width:50px;height:50px} .g-fab-tip{display:none} } /* ------------------------------------------------------------ responsive */ @media (max-width:991.98px){ body{font-size:15.5px} .btn{padding:.68rem 1.45rem} .section-title h1::after,.section-title h2::after{margin-top:15px} } @media (max-width:575.98px){ .carousel-caption h1{font-size:1.6rem} .service-item:hover,.card:hover,.team-item:hover{transform:none} } /* people who prefer less motion get none of it */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important} [data-g-reveal]{opacity:1;transform:none} } @media print{.navbar,footer,.g-fab{display:none !important}body{color:#000}} /* ===================================================== social icons ==== The template stretched these into ovals because the width came from the padding. Pinning width, height and line-height to the same value makes them true circles at every breakpoint, and each platform takes its own colour on hover instead of the same grey. ======================================================================= */ .btn-social, .btn-square, .btn-sm-square, .btn-lg-square{ width: 42px !important; height: 42px !important; min-width: 42px; padding: 0 !important; line-height: 1 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 42px; aspect-ratio: 1 / 1; font-size: 15px; border-width: 1.5px; transition: transform .22s var(--g-ease), background .22s, border-color .22s, color .22s; } .btn-social:hover,.btn-square:hover,.btn-sm-square:hover,.btn-lg-square:hover{ transform: translateY(-3px) scale(1.06); color:#fff !important; } /* Brand colours, in the order the icons appear. */ .btn-social:has(.fa-twitter):hover, .btn-social:has(.fa-x-twitter):hover{ background:#1DA1F2; border-color:#1DA1F2 } .btn-social:has(.fa-facebook-f):hover{ background:#1877F2; border-color:#1877F2 } .btn-social:has(.fa-youtube):hover{ background:#FF0000; border-color:#FF0000 } .btn-social:has(.fa-linkedin-in):hover{ background:#0A66C2; border-color:#0A66C2 } .btn-social:has(.fa-whatsapp):hover{ background:#25D366; border-color:#25D366 } .btn-social:has(.fa-instagram):hover{ background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); border-color:#DD2A7B } /* The floating buttons are circles too — the halo is sized from the button so it can never drift into an ellipse. */ .g-fab a,.g-fab button{ aspect-ratio: 1 / 1; flex: 0 0 auto; padding: 0 } /* ================================================ mission / vision slides Left at the size and spacing the template gives it — only the colour of each slide changes, so the panel cycles through the palette instead of showing the same glass card four times. No sizing, no layout. ======================================================================= */ .mission-vision-slider .slide-item:nth-child(1){ background: linear-gradient(135deg, rgba(4,99,250,.55), rgba(0,184,169,.30)) !important } .mission-vision-slider .slide-item:nth-child(2){ background: linear-gradient(135deg, rgba(124,58,237,.52), rgba(236,72,153,.30)) !important } .mission-vision-slider .slide-item:nth-child(3){ background: linear-gradient(135deg, rgba(16,185,129,.50), rgba(0,184,169,.30)) !important } .mission-vision-slider .slide-item:nth-child(4){ background: linear-gradient(135deg, rgba(245,158,11,.52), rgba(236,72,153,.28)) !important } .mission-vision-slider .slide-item h1{ color:#fff !important } .mission-vision-slider .slide-item p{ color:rgba(255,255,255,.94) !important } .mission-vision-slider .slide-item strong{ color:#fff } /* ================================================= V52.7 launch polish === */ html,body{max-width:100%;overflow-x:hidden} img,svg,video,canvas{max-width:100%;height:auto} .mission-vision-slider .slide-item{ padding:26px 132px 26px 28px; position:absolute; } .mission-slide-logo{ position:absolute;top:50%;right:32px;z-index:2; width:72px !important;height:72px !important;max-width:72px !important; object-fit:contain;flex:0 0 72px;transform:translateY(-50%); padding:7px;margin:0;border-radius:50%;background:#fff; border:3px solid rgba(255,255,255,.68); box-shadow:0 14px 34px rgba(2,35,82,.28) } .custom-carousel{height:clamp(360px,39vw,500px);border-radius:0} .custom-carousel .carousel-item,.custom-carousel .carousel-item img{height:100%;width:100%} .custom-carousel .carousel-item img{object-fit:cover} .navbar-brand{min-width:0;max-width:70vw} .navbar-brand h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .navbar .dropdown-menu{max-width:calc(100vw - 24px)} @media (max-width:991.98px){ .navbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; } .navbar-brand{grid-column:1;min-width:0;width:auto;max-width:none} .navbar-toggler{ display:block !important;grid-column:2;justify-self:end;align-self:center; flex:0 0 48px;position:relative;z-index:20;width:48px;height:44px; color:#1b2c51;background:#fff;border:1px solid #cfd9ea;border-radius:10px } .navbar-toggler-icon{ display:block !important;position:relative;width:24px;height:18px;margin:auto; background:none !important;border-top:2px solid currentColor;border-bottom:2px solid currentColor } .navbar-toggler-icon::after{ content:"";position:absolute;left:0;right:0;top:7px;border-top:2px solid currentColor } .navbar-collapse{grid-column:1 / -1;width:100%} .container-fluid.header .col-lg-6.p-5{padding:2rem !important} .mission-vision-slider{min-height:300px} .mission-vision-slider .slide-item{min-height:280px} .custom-carousel{height:clamp(300px,62vw,440px)} .navbar-collapse{max-height:calc(100vh - 76px);overflow-y:auto} .navbar-nav{gap:2px} .gawagi-language .dropdown-menu{margin-left:12px;max-width:260px} } @media (max-width:575.98px){ .navbar-brand{padding-left:14px !important;padding-right:4px !important;max-width:none;width:100%} .navbar-brand img{height:42px !important;margin-right:8px !important} .navbar-brand h1{font-size:1rem !important;letter-spacing:.01em} .navbar-toggler{margin:0 12px 0 8px !important;padding:.4rem .55rem} .container-fluid.header .col-lg-6.p-5{padding:1rem !important} .mission-vision-slider{min-height:315px;margin-bottom:1rem !important} .mission-vision-slider .slide-item{min-height:300px;padding:20px 82px 20px 18px} .mission-slide-logo{ top:50%;right:16px; width:48px !important;height:48px !important;max-width:48px !important; display:block !important;visibility:visible !important;opacity:1 !important; flex-basis:48px;border-radius:50%;padding:4px;border-width:2px;z-index:12; background:#fff url('../img/logo.png') center/82% no-repeat } .mission-vision-slider .slide-item h1{font-size:clamp(1.45rem,7vw,1.9rem) !important;line-height:1.2} .mission-vision-slider .slide-item p{font-size:.92rem !important;line-height:1.5} .custom-carousel{height:290px} .carousel-nav{width:42px;height:42px} .header .row.g-4{--bs-gutter-y:.65rem} .header .border-start{padding-left:1rem !important} .btn{white-space:normal} } /* V52.8.2 — restrained brand motion and richer interactive polish. */ @keyframes gawagiLogoBreathe{ 0%,100%{transform:translateY(-50%) scale(1)} 50%{transform:translateY(-50%) scale(1.055)} } @keyframes gawagiGlowShift{ 0%,100%{box-shadow:0 14px 34px rgba(2,35,82,.28),0 0 0 0 rgba(255,255,255,.22)} 50%{box-shadow:0 18px 42px rgba(2,35,82,.34),0 0 0 10px rgba(255,255,255,0)} } @keyframes gawagiButtonSheen{from{transform:translateX(-130%) skewX(-20deg)}to{transform:translateX(330%) skewX(-20deg)}} .mission-vision-slider .slide-item.active .mission-slide-logo{ animation:gawagiLogoBreathe 3.8s ease-in-out infinite,gawagiGlowShift 3.8s ease-in-out infinite } .navbar-brand img{transition:transform .35s ease,filter .35s ease} .navbar-brand:hover img{transform:rotate(-4deg) scale(1.07);filter:drop-shadow(0 7px 12px rgba(4,99,250,.2))} .navbar-toggler{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .navbar-toggler:hover,.navbar-toggler:focus{transform:translateY(-2px);border-color:#0463fa;box-shadow:0 8px 20px rgba(4,99,250,.18)} .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease} .btn:hover{transform:translateY(-2px)} .btn-primary::after{content:"";position:absolute;inset:-30% auto -30% -35%;width:24%;z-index:-1;background:rgba(255,255,255,.28);transform:skewX(-20deg)} .btn-primary:hover::after{animation:gawagiButtonSheen .75s ease-out} .service-item,.team-item,.ge-stat,.ge-reason,.ge-frame{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease} .service-item:hover,.team-item:hover,.ge-stat:hover,.ge-reason:hover{transform:translateY(-7px);box-shadow:0 18px 42px rgba(4,70,150,.15)} .ge-frame:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(4,70,150,.18)} .feature img[src*="why-choose-us-v2"],.ge-frame img[src*="why-choose-us-v2"]{object-position:center;filter:saturate(1.04) contrast(1.02)} @media (prefers-reduced-motion:reduce){ .mission-vision-slider .slide-item.active .mission-slide-logo{animation:none} .navbar-brand img,.navbar-toggler,.btn,.service-item,.team-item,.ge-stat,.ge-reason,.ge-frame{transition:none!important} .btn-primary:hover::after{animation:none} }