/*====================================================================== Nilan's Ortho Clinic — Enhancement Layer (v2 — bold) Pervasive scroll choreography + micro-interactions + visual polish. ADDITIVE & reversible: loaded after custom.css. Delete this file + enhancements.js + restore WOW in function.js to fully revert. ======================================================================*/ :root { --fx-ease : cubic-bezier(0.22, 1, 0.36, 1); --fx-ease-soft : cubic-bezier(0.4, 0, 0.2, 1); --fx-shadow-sm : 0 8px 22px rgba(41, 45, 109, 0.10); --fx-shadow-md : 0 22px 48px rgba(41, 45, 109, 0.16); --fx-shadow-lg : 0 34px 70px rgba(41, 45, 109, 0.22); --fx-gold-glow : 0 12px 34px rgba(208, 187, 104, 0.50); } html { scroll-behavior: smooth; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; border-radius: 6px; } /*====================================================================== A. REVEAL GUARD — hide animated elements before JS paints them in. Only active while . JS sets transforms then animates to natural position. If JS/gsap fail, the class is removed and everything is instantly visible (see enhancements.js). ======================================================================*/ .fx-js .home-contact-item, .fx-js .service-item, .fx-js .team-member-item, .fx-js .blog-item, .fx-js .testimonial-item, .fx-js .need-attention-list, .fx-js .why-choose-item, .fx-js .about-list-item, .fx-js .solution-counter-item, .fx-js .company-experience, .fx-js .about-img, .fx-js .solution-plan-img-1, .fx-js .solution-plan-img-2, .fx-js .section-title h3, .fx-js .hero-content p, .fx-js .hero-content-body, .fx-js .solution-plan-body, .fx-js .footer-logo, .fx-js .footer-contact, .fx-js .about-service-list, .fx-js .footer-map, .fx-js .footer-info-box, .fx-js .footer-social-links { opacity: 0; } /*====================================================================== 1. Scroll progress bar ======================================================================*/ .fx-scroll-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0%; z-index: 99999; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); box-shadow: 0 0 12px rgba(208, 187, 104, 0.6); transition: width 0.1s linear; pointer-events: none; } /*====================================================================== 2. Back-to-top button with circular progress ring ======================================================================*/ .fx-back-to-top { position: fixed; right: 26px; bottom: 26px; width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; z-index: 9998; display: grid; place-items: center; background: var(--primary-color); color: #fff; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.8); transition: opacity 0.4s var(--fx-ease), transform 0.4s var(--fx-ease), background 0.3s ease; box-shadow: var(--fx-shadow-md); } .fx-back-to-top::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(var(--accent-color) calc(var(--fx-progress, 0) * 1%), rgba(255,255,255,0.25) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); transition: background 0.1s linear; } .fx-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .fx-back-to-top:hover { background: var(--accent-color); transform: translateY(-4px) scale(1.05); } .fx-back-to-top svg { width: 20px; height: 20px; position: relative; z-index: 1; } /*====================================================================== 3. Hero — slow Ken Burns zoom + readability overlay + scroll cue ======================================================================*/ .hero-slider-image { overflow: hidden; } .hero-slider-image img { will-change: transform; transform: scale(1.04); transition: transform 1.2s var(--fx-ease-soft); } .swiper-slide-active .hero-slider-image img { animation: fxKenBurns 9s ease-out forwards; } @keyframes fxKenBurns { from { transform: scale(1.04); } to { transform: scale(1.16); } } .hero-slider-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, rgba(41,45,109,0.55) 0%, rgba(41,45,109,0.20) 45%, rgba(41,45,109,0) 75%); } .hero .container { position: relative; z-index: 2; } .hero-slider-layout .swiper-pagination-bullet { transition: all 0.4s var(--fx-ease); } .hero-slider-layout .swiper-pagination-bullet-active { width: 26px; border-radius: 6px; } /*====================================================================== 4. Buttons — lift, depth, glow + attention pulse on header phone btn ======================================================================*/ .btn-default { transition: transform 0.35s var(--fx-ease), box-shadow 0.35s var(--fx-ease), background-color 0.3s ease, color 0.3s ease; } .btn-default:hover { transform: translateY(-3px); box-shadow: var(--fx-shadow-sm); } .btn-default.btn-highlighted:hover { box-shadow: var(--fx-gold-glow); } .header-btn .btn-default { animation: fxSoftPulse 2.8s ease-in-out infinite; } .header-btn .btn-default:hover { animation: none; } @keyframes fxSoftPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(208,187,104,0.45); } 50% { box-shadow: 0 0 0 12px rgba(208,187,104,0); } } /*====================================================================== 5. Navigation — animated underline ======================================================================*/ header .main-menu ul li a { position: relative; } header .main-menu ul li a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; border-radius: 2px; background: var(--accent-color); transition: width 0.4s var(--fx-ease); } header .main-menu ul li a:hover::after, header .main-menu ul li.active > a::after { width: 100%; } /*====================================================================== 6. Card lift + layered shadow (declared AFTER reveal so hover wins) ======================================================================*/ .service-item, .team-member-item, .blog-item, .home-contact-item, .testimonial-item, .solution-counter-item, .why-choose-item, .need-attention-list { transition: transform 0.45s var(--fx-ease), box-shadow 0.45s var(--fx-ease); will-change: transform; } .service-item:hover, .team-member-item:hover, .blog-item:hover { transform: translateY(-12px) !important; box-shadow: var(--fx-shadow-md); } .home-contact-item:hover, .testimonial-item:hover, .solution-counter-item:hover, .why-choose-item:hover, .need-attention-list:hover { transform: translateY(-7px) !important; } /*====================================================================== 7. Image zoom inside cards & gallery ======================================================================*/ .service-image, .team-image, .post-featured-image, .blog-item figure, .image-item, .gallery-img { overflow: hidden; } .service-image img, .team-image img, .post-featured-image img, .blog-item figure img, .image-item img { transition: transform 0.7s var(--fx-ease-soft); will-change: transform; } .service-item:hover .service-image img, .team-member-item:hover .team-image img, .blog-item:hover .post-featured-image img, .blog-item:hover figure img, .image-item:hover img { transform: scale(1.09); } .image-item { position: relative; border-radius: 14px; } .image-item::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(to top, rgba(41,45,109,0.35), transparent 60%); transition: opacity 0.5s var(--fx-ease); } .image-item:hover::after { opacity: 1; } /*====================================================================== 8. Icon micro-interactions + gentle continuous float ======================================================================*/ .home-contact-item .icon-box img, .why-choose-item .icon-box img, .solution-counter-item img { transition: transform 0.5s var(--fx-ease); } .home-contact-item:hover .icon-box img, .why-choose-item:hover .icon-box img, .solution-counter-item:hover img { transform: scale(1.14) rotate(-5deg); } .home-contact-item .icon-box { animation: fxFloat 4s ease-in-out infinite; } .home-contact-item:nth-child(2) .icon-box, .home-contact-us .col-lg-4:nth-child(2) .icon-box { animation-delay: 0.6s; } @keyframes fxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /*====================================================================== 9. Section eyebrow chip — sheen sweep ======================================================================*/ .section-title h3 { position: relative; overflow: hidden; } .section-title h3::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); animation: fxSheen 5s var(--fx-ease) infinite; } @keyframes fxSheen { 0%,60% { left: -120%; } 100% { left: 160%; } } /*====================================================================== 10. Footer links + social ======================================================================*/ .footer-links ul li a, .footer-menu ul li a, footer ul li a { display: inline-block; transition: transform 0.35s var(--fx-ease), color 0.3s ease; } .footer-links ul li a:hover, .footer-menu ul li a:hover, footer ul li a:hover { transform: translateX(6px); color: var(--accent-color); } .footer-social-links ul li a, .social-links ul li a { transition: transform 0.35s var(--fx-ease), background-color 0.3s ease, color 0.3s ease; } .footer-social-links ul li a:hover, .social-links ul li a:hover { transform: translateY(-4px); } /*====================================================================== 11. Reduced motion ======================================================================*/ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .swiper-slide-active .hero-slider-image img { animation: none; transform: scale(1.04); } } /*====================================================================== 12. NEW SECTIONS (client changes) — story/vision, stats band, single-specialist profile, and the on-page booking form. ======================================================================*/ /* --- About: story & vision --- */ .about-story-block { margin-bottom: 24px; } .about-story-block:last-child { margin-bottom: 0; } .about-story-block h4 { font-family: var(--accent-font); font-size: 18px; font-weight: 700; color: var(--primary-color); margin-bottom: 8px; display: flex; align-items: center; gap: 12px; line-height: 1.2; } .about-story-block h4::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--accent-color); display: inline-block; flex-shrink: 0; } .about-story-block p { margin-bottom: 0; } /* --- Stats band --- */ .stats-band { padding: 90px 0; background: var(--secondary-color); text-align: center; } .stats-band .section-title { margin-bottom: 44px; } .stats-band .solution-counter-item { display: flex; align-items: center; justify-content: center; gap: 16px; background: #fff; border-radius: 16px; padding: 26px 18px; box-shadow: var(--fx-shadow-sm); height: 100%; } .stats-band .solution-counter-content { text-align: left; } .stats-band .solution-counter-content h3 { font-size: 40px; color: var(--primary-color); line-height: 1; } .stats-band .solution-counter-content p { margin: 4px 0 0; text-transform: capitalize; } .stats-band .solution-counter-item .icon-box img { width: 46px; height: 46px; } /* --- Single specialist profile --- */ .our-specialist { padding: 100px 0; } .our-specialist .section-row { margin-bottom: 50px; } .specialist-photo { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--fx-shadow-md); } .specialist-photo figure { margin: 0; } .specialist-photo img { width: 100%; display: block; } .specialist-name-tag { position: absolute; left: 18px; right: 18px; bottom: 18px; background: rgba(41, 45, 109, 0.92); border-radius: 14px; padding: 16px 22px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .specialist-name-tag h3 { color: #fff; font-size: 21px; margin-bottom: 3px; } .specialist-name-tag p { color: var(--accent-color); margin: 0; font-size: 14px; } .specialist-details { padding-left: 24px; } .specialist-intro { font-size: 17px; line-height: 1.7; margin-bottom: 28px; } .credentials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; } .credential-block-wide { grid-column: 1 / -1; } .credential-block h4 { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--primary-color); margin-bottom: 14px; } .cred-icon { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--secondary-color); color: var(--primary-color); display: grid; place-items: center; font-size: 14px; transition: transform 0.4s var(--fx-ease), background 0.3s ease, color 0.3s ease; } .credential-block:hover .cred-icon { background: var(--accent-color); color: #fff; transform: rotate(-8deg) scale(1.08); } .credential-block ul { list-style: none; padding: 0; margin: 0; } .credential-block li { position: relative; padding-left: 20px; margin-bottom: 11px; font-size: 14.5px; line-height: 1.55; color: var(--text-color); } .credential-block li:last-child { margin-bottom: 0; } .credential-block li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color); } .credential-block li strong { color: var(--primary-color); font-weight: 600; } .credential-block li span { color: var(--accent-color); font-weight: 600; font-size: 13px; white-space: nowrap; } /* --- Booking form --- */ .appointment-section { padding: 100px 0; background: var(--secondary-color); position: relative; overflow: hidden; } .appointment-section::before { content: ""; position: absolute; top: -120px; right: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(208,187,104,0.20), transparent 70%); pointer-events: none; } .appointment-section .section-title h2 { color: var(--primary-color); } .appointment-section .section-title h2 span { color: var(--accent-color); } .appointment-section .section-title h3 { color: var(--accent-color); } .appointment-info p { color: var(--text-color); } .appointment-contact { list-style: none; padding: 0; margin: 26px 0 30px; } .appointment-contact li { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; color: var(--primary-color); font-size: 15px; line-height: 1.5; } .appointment-contact li a { color: var(--primary-color); transition: color 0.3s ease; } .appointment-contact li a:hover { color: var(--accent-color); } .ac-icon { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: #fff; color: var(--accent-color); display: grid; place-items: center; box-shadow: var(--fx-shadow-sm); } .btn-whatsapp { background: #25D366 !important; color: #fff !important; } .btn-whatsapp::before { background-color: #128C7E !important; background-image: none !important; } .btn-whatsapp::after { background: #1ebe5d !important; } .appointment-form-box { background: #fff; border-radius: 22px; padding: 38px; box-shadow: var(--fx-shadow-lg); } .appointment-form-box .form-group { margin-bottom: 16px; } .appointment-form-box .form-control { width: 100%; border: 1px solid #e3e3ee; border-radius: 11px; padding: 14px 16px; font-family: var(--default-font); font-size: 15px; color: var(--primary-color); background: #f8f8fc; transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .appointment-form-box .form-control::placeholder { color: #9a9ab0; } .appointment-form-box .form-control:focus { outline: none; border-color: var(--accent-color); background: #fff; box-shadow: 0 0 0 3px rgba(208, 187, 104, 0.18); } .appointment-form-box textarea.form-control { resize: vertical; min-height: 110px; } .appointment-form-box button.btn-default { cursor: pointer; margin-top: 6px; } /* service dropdown styled to match the inputs */ .appointment-form-box select.form-control { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23292d6d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; cursor: pointer; } .appointment-form-box select.form-control:invalid { color: #9a9ab0; } #msgSubmit.hidden { display: none; } /* --- New-section reveal start states (paired with enhancements.js) --- */ .fx-js .about-story-block, .fx-js .specialist-photo, .fx-js .credential-block, .fx-js .appointment-info, .fx-js .appointment-form-box { opacity: 0; } /* --- Responsive --- */ @media (max-width: 991px) { .specialist-details { padding-left: 0; margin-top: 34px; } .credentials-grid { grid-template-columns: 1fr; gap: 22px; } .appointment-form-box { margin-top: 36px; } .stats-band .solution-counter-item { padding: 22px 14px; } } @media (max-width: 575px) { .appointment-form-box { padding: 26px; } .specialist-name-tag { left: 12px; right: 12px; bottom: 12px; padding: 13px 16px; } } /*====================================================================== 13. SCROLLING TICKER — richer, more attractive treatment (additive: overrides the flat band from custom.css) ======================================================================*/ /* Gradient band + soft depth, replacing the flat navy */ .our-scrolling-ticker { background: linear-gradient(100deg, #d0bb68 0%, #e0cf86 50%, #c9b25c 100%) !important; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.08); } /* Faint moving sheen across the whole band */ .our-scrolling-ticker::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: fxTickerSheen 7s ease-in-out infinite; pointer-events: none; } @keyframes fxTickerSheen { 0% { left: -40%; } 60% { left: 140%; } 100% { left: 140%; } } /* Fade the left/right edges so items glide in and out softly */ .scrolling-ticker-box { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* Pause the marquee when the user hovers, so they can read it */ .scrolling-ticker-box:hover .scrolling-content { animation-play-state: paused; } /* Each item becomes a subtle glass "pill" */ .our-scrolling-ticker .scrolling-content span { color: var(--primary-color) !important; display: inline-flex !important; align-items: center; gap: 12px; padding: 9px 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); border: 1px solid rgba(255, 255, 255, 0.45); transition: background 0.35s var(--fx-ease), transform 0.35s var(--fx-ease), border-color 0.35s var(--fx-ease); white-space: nowrap; } .our-scrolling-ticker .scrolling-content span:hover { background: rgba(255, 255, 255, 0.55); border-color: #fff; transform: translateY(-2px); } /* Sparkle icon: navy tint + gentle continuous spin */ .our-scrolling-ticker .scrolling-content span img { margin-right: 0 !important; max-width: 22px !important; /* recolor the sparkle SVG toward the navy primary */ filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(2200%) hue-rotate(216deg) brightness(95%) contrast(95%); animation: fxSparkleSpin 6s linear infinite; } @keyframes fxSparkleSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Make the phone-number item pop as the key call-to-action */ .our-scrolling-ticker .scrolling-content span:nth-child(3) { background: var(--primary-color); border-color: var(--primary-color); color: #fff !important; font-weight: 700; box-shadow: 0 6px 18px rgba(41, 45, 109, 0.35); animation: fxPhonePulse 2.6s ease-in-out infinite; } .our-scrolling-ticker .scrolling-content span:nth-child(3) img { filter: brightness(0) invert(1); } @keyframes fxPhonePulse { 0%, 100% { box-shadow: 0 6px 18px rgba(41, 45, 109, 0.30); } 50% { box-shadow: 0 6px 26px rgba(41, 45, 109, 0.55); } } /* Slightly slower, smoother marquee */ .our-scrolling-ticker .scrolling-content { animation-duration: 30s !important; } @media (prefers-reduced-motion: reduce) { .our-scrolling-ticker::after, .our-scrolling-ticker .scrolling-content span img, .our-scrolling-ticker .scrolling-content span:nth-child(3) { animation: none !important; } } /*====================================================================== 14. HIGHLIGHTS SECTION (home-contact-us) — richer cards & effects Additive: enriches resting + hover states on the navy band. ======================================================================*/ /* Give the navy band a touch of depth with a faint radial glow */ .home-contact-us { position: relative; overflow: hidden; } .home-contact-us::before { content: ""; position: absolute; top: -40%; right: -10%; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(208, 187, 104, 0.10), transparent 70%); pointer-events: none; } /* Turn each item into a real glass card */ .home-contact-us .home-contact-item { border-right: none !important; /* drop the thin divider line */ padding: 28px 26px !important; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; z-index: 1; transition: transform 0.45s var(--fx-ease), background 0.4s ease, border-color 0.4s ease, box-shadow 0.45s var(--fx-ease); } .home-contact-us .col-lg-4:last-child .home-contact-item { padding-right: 26px !important; } .home-contact-us .home-contact-item:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(208, 187, 104, 0.45); transform: translateY(-8px) !important; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28); } /* Big decorative number watermark behind each card */ .home-contact-us .col-lg-4:nth-child(1) .home-contact-item::after { content: "01"; } .home-contact-us .col-lg-4:nth-child(2) .home-contact-item::after { content: "02"; } .home-contact-us .col-lg-4:nth-child(3) .home-contact-item::after { content: "03"; } .home-contact-us .home-contact-item::after { position: absolute; right: 14px; bottom: -18px; font-family: var(--accent-font); font-size: 84px; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, 0.05); transition: color 0.4s ease, transform 0.5s var(--fx-ease); pointer-events: none; z-index: 0; } .home-contact-us .home-contact-item:hover::after { color: rgba(208, 187, 104, 0.16); transform: translateY(-6px) scale(1.05); } /* Icon box: gold gradient reveal + lively icon on hover */ .home-contact-us .home-contact-item .icon-box { transition: transform 0.5s var(--fx-ease), box-shadow 0.5s var(--fx-ease); animation: fxFloat 4.5s ease-in-out infinite; } .home-contact-us .col-lg-4:nth-child(2) .home-contact-item .icon-box { animation-delay: 0.5s; } .home-contact-us .col-lg-4:nth-child(3) .home-contact-item .icon-box { animation-delay: 1s; } /* Recolor the existing scale-in overlay from grey to a gold gradient */ .home-contact-us .home-contact-item .icon-box::before { background-color: transparent !important; background-image: linear-gradient(135deg, var(--accent-color), #b89f48) !important; } .home-contact-us .home-contact-item:hover .icon-box { transform: rotate(-6deg) scale(1.06); box-shadow: 0 10px 24px rgba(208, 187, 104, 0.4); } .home-contact-us .home-contact-item .icon-box img { transition: transform 0.5s var(--fx-ease); } .home-contact-us .home-contact-item:hover .icon-box img { transform: rotate(6deg) scale(1.08); /* counter-rotate so icon stays upright-ish */ } /* Heading gets a growing gold underline on hover */ .home-contact-us .home-contact-content h3 { position: relative; display: inline-block; padding-bottom: 8px; transition: color 0.3s ease; } .home-contact-us .home-contact-content h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 3px; background: var(--accent-color); transition: width 0.45s var(--fx-ease); } .home-contact-us .home-contact-item:hover .home-contact-content h3 { color: var(--accent-color); } .home-contact-us .home-contact-item:hover .home-contact-content h3::after { width: 64px; } /* Soften the body text so the heading leads */ .home-contact-us .home-contact-content p { color: rgba(255, 255, 255, 0.72) !important; transition: color 0.3s ease; } .home-contact-us .home-contact-item:hover .home-contact-content p { color: rgba(255, 255, 255, 0.9) !important; } @media (max-width: 767px) { .home-contact-us .home-contact-item { margin-bottom: 18px; } .home-contact-us .home-contact-item::after { font-size: 64px; } } @media (prefers-reduced-motion: reduce) { .home-contact-us .home-contact-item .icon-box { animation: none; } } /*====================================================================== 15. ABOUT / OUR STORY — full redesign (layered images, timeline, focus tags, CTA). Additive; overrides the plain layout. ======================================================================*/ .about-us { padding: 110px 0 90px !important; position: relative; } /* ---- Left: single clean image composition ---- */ .about-us-image-v2 { position: relative; padding: 22px 22px 22px 0; } /* decorative dotted shape behind the image, top-left */ .about-us-image-v2 .about-shape { position: absolute; top: -6px; left: -14px; width: 150px; height: 150px; border-radius: 20px; background: radial-gradient(circle at center, rgba(41,45,109,0.16) 1.6px, transparent 1.7px) 0 0 / 16px 16px; z-index: 0; opacity: 0.7; } /* gold L-frame accent on the bottom-right corner */ .about-us-image-v2::after { content: ""; position: absolute; right: 0; bottom: 0; width: 130px; height: 130px; border-right: 5px solid var(--accent-color); border-bottom: 5px solid var(--accent-color); border-bottom-right-radius: 26px; z-index: 0; pointer-events: none; } .about-us-image-v2 .about-img { position: relative; z-index: 1; } .about-us-image-v2 .about-img figure { margin: 0; overflow: hidden; border-radius: 24px; } .about-us-image-v2 .about-img img { border-radius: 24px; width: 100%; display: block; box-shadow: var(--fx-shadow-md); transition: transform 0.8s var(--fx-ease-soft); } .about-us-image-v2:hover .about-img img { transform: scale(1.04); } /* experience badge -> gold gradient, bottom-left of the image */ .about-us-image-v2 .company-experience { right: auto !important; left: 28px; bottom: 28px; top: auto !important; background: linear-gradient(135deg, var(--accent-color), #b89f48) !important; border-radius: 16px !important; box-shadow: 0 14px 32px rgba(208,187,104,0.45) !important; animation: fxFloat 4s ease-in-out infinite !important; z-index: 3; } .about-us-image-v2 .company-experience .icon-box img { filter: brightness(0) invert(1); } .about-us-image-v2 .company-experience-content h3 { color: #fff !important; } .about-us-image-v2 .company-experience-content p { color: rgba(255,255,255,0.92) !important; } /* small "trusted care" stamp, top-right of the image */ .about-us-image-v2 .about-img::after { content: "Trusted Care"; position: absolute; top: 18px; right: 18px; width: 96px; height: 96px; border-radius: 50%; background: rgba(41, 45, 109, 0.94); color: #fff; font-family: var(--accent-font); font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; padding: 0 16px; display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(208, 187, 104, 0.75); box-shadow: var(--fx-shadow-sm); z-index: 2; animation: fxStampSpinIn 0.8s var(--fx-ease) both; } @keyframes fxStampSpinIn { from { transform: scale(0.4) rotate(-40deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } } /* ---- Right: timeline story ---- */ .about-timeline { position: relative; margin: 8px 0 26px; padding-left: 8px; } .about-timeline::before { content: ""; position: absolute; left: 25px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(to bottom, var(--accent-color), rgba(208,187,104,0.15)); } .about-timeline .about-story-block { position: relative; display: flex; gap: 22px; padding-bottom: 28px; } .about-timeline .about-story-block:last-child { padding-bottom: 0; } .about-timeline .timeline-dot { position: relative; z-index: 1; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--primary-color); border: 2px solid var(--accent-color); font-size: 18px; box-shadow: 0 8px 20px rgba(41,45,109,0.10); transition: transform 0.45s var(--fx-ease), background 0.35s ease, color 0.35s ease; } .about-timeline .about-story-block:hover .timeline-dot { background: var(--accent-color); color: #fff; transform: scale(1.1) rotate(-6deg); } .about-timeline .timeline-content h4 { font-family: var(--accent-font); font-size: 19px; font-weight: 700; color: var(--primary-color); margin: 8px 0 8px; } .about-timeline .timeline-content p { margin: 0; } /* ---- Focus tags ---- */ .about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .about-tags span { font-family: var(--accent-font); font-size: 13px; font-weight: 600; color: var(--primary-color); padding: 7px 16px; border-radius: 999px; background: var(--secondary-color); border: 1px solid transparent; transition: background 0.3s ease, color 0.3s ease, transform 0.35s var(--fx-ease), border-color 0.3s ease; cursor: default; } .about-tags span:hover { background: #fff; color: var(--accent-color); border-color: var(--accent-color); transform: translateY(-3px); } /* ---- CTA row ---- */ .about-cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .about-cta-link { font-family: var(--accent-font); font-weight: 600; color: var(--primary-color); display: inline-flex; align-items: center; gap: 9px; transition: color 0.3s ease, gap 0.3s ease; } .about-cta-link i { transition: transform 0.35s var(--fx-ease); } .about-cta-link:hover { color: var(--accent-color); gap: 14px; } .about-cta-link:hover i { transform: translateX(4px); } /* ---- Responsive ---- */ @media (max-width: 991px) { .about-us-image-v2 { padding: 10px 14px 14px 0; margin-bottom: 50px; max-width: 560px; } } @media (max-width: 575px) { .about-us { padding: 70px 0 60px !important; } .about-us-image-v2 .company-experience { left: 12px; top: 12px; padding: 12px 16px !important; } .about-us-image-v2 .company-experience-content h3 { font-size: 26px; } .about-timeline .timeline-dot { width: 44px; height: 44px; font-size: 15px; } .about-timeline::before { left: 21px; } } /*====================================================================== 16. SPECIALIST SECTION — richer photo frame & credential cards ======================================================================*/ .our-specialist { position: relative; overflow: hidden; } /* faint gold glow in the background */ .our-specialist::before { content: ""; position: absolute; top: 10%; left: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(208,187,104,0.10), transparent 70%); pointer-events: none; } /* ---- Photo: decorative frame ---- */ .specialist-photo { overflow: visible !important; /* allow shapes to peek out */ box-shadow: none !important; } .specialist-photo figure { position: relative; z-index: 1; border-radius: 22px; overflow: hidden; box-shadow: var(--fx-shadow-md); } .specialist-photo img { transition: transform 0.8s var(--fx-ease-soft); } .specialist-photo:hover img { transform: scale(1.05); } /* dotted shape behind, top-left */ .specialist-photo::before { content: ""; position: absolute; top: -16px; left: -16px; width: 120px; height: 120px; border-radius: 18px; background: radial-gradient(circle at center, rgba(41,45,109,0.16) 1.6px, transparent 1.7px) 0 0 / 15px 15px; z-index: 0; } /* gold offset frame that hugs the photo's bottom-right corner */ .specialist-photo::after { content: ""; position: absolute; left: 18px; right: -18px; top: 18px; bottom: -18px; border: 3px solid var(--accent-color); border-radius: 24px; z-index: 0; pointer-events: none; transition: transform 0.5s var(--fx-ease); } .specialist-photo:hover::after { transform: translate(4px, 4px); } /* moving shine sweep across the photo */ .specialist-photo figure::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-20deg); animation: fxPhotoShine 6s var(--fx-ease) infinite; pointer-events: none; } @keyframes fxPhotoShine { 0%, 70% { left: -60%; } 100% { left: 130%; } } /* name tag refinements */ .specialist-name-tag { transition: transform 0.45s var(--fx-ease); } .specialist-photo:hover .specialist-name-tag { transform: translateY(-4px); } /* ---- Credential blocks as cards ---- */ .credential-block { background: #fff; border: 1px solid #ececf4; border-radius: 16px; padding: 24px 24px 22px; box-shadow: var(--fx-shadow-sm); transition: transform 0.45s var(--fx-ease), box-shadow 0.45s var(--fx-ease), border-color 0.4s ease; } .credential-block:hover { transform: translateY(-6px); box-shadow: var(--fx-shadow-md); border-color: rgba(208,187,104,0.5); } .credential-block h4 { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid #eee; } /* list items: animated bullet that grows on hover */ .credential-block li::before { transition: transform 0.3s var(--fx-ease), background 0.3s ease; } .credential-block li:hover::before { transform: scale(1.6); } .credential-block li { transition: color 0.3s ease; } /* the highlighted "current" experience row gets a soft tint */ .credential-block .affiliations-list li:last-child, .our-specialist .credential-block ul li:first-child { /* keep subtle, nothing heavy */ } /* gentle continuous pulse on the cred icons */ .cred-icon { will-change: transform; } .credential-block:hover .cred-icon { animation: fxIconNudge 0.6s var(--fx-ease); } @keyframes fxIconNudge { 0%,100% { transform: rotate(-8deg) scale(1.08); } 50% { transform: rotate(4deg) scale(1.14); } } @media (prefers-reduced-motion: reduce) { .specialist-photo figure::after { animation: none; } } @media (max-width: 575px) { .specialist-photo::after { right: 0; bottom: 70px; width: 80px; height: 80px; } .specialist-photo::before { top: -10px; left: -10px; width: 90px; height: 90px; } } /*====================================================================== 16b. SPECIALIST — specialty highlights row + card accent strip ======================================================================*/ .specialist-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 30px; } .specialist-highlights .sh-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--secondary-color); transition: background 0.3s ease, transform 0.4s var(--fx-ease); } .specialist-highlights .sh-item:hover { background: #fff; box-shadow: var(--fx-shadow-sm); transform: translateY(-3px); } .specialist-highlights .sh-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-color), #b89f48); color: #fff; font-size: 15px; transition: transform 0.4s var(--fx-ease); } .specialist-highlights .sh-item:hover .sh-icon { transform: rotate(-6deg) scale(1.08); } .specialist-highlights .sh-item p { margin: 0; font-family: var(--accent-font); font-size: 14px; font-weight: 600; color: var(--primary-color); line-height: 1.3; } /* gold accent strip on the left edge of each credential card */ .credential-block { position: relative; overflow: hidden; } .credential-block::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, var(--accent-color), rgba(208,187,104,0.2)); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--fx-ease); } .credential-block:hover::before { transform: scaleY(1); } @media (max-width: 575px) { .specialist-highlights { grid-template-columns: 1fr; } } /*====================================================================== 17. WHY CHOOSE US — livelier items, accents & floating doctor ======================================================================*/ .why-choose-us { position: relative; overflow: hidden; } /* item hover: slide + gold side accent */ .why-choose-item { position: relative; transition: background 0.4s ease, transform 0.45s var(--fx-ease); } .why-choose-box-1 .why-choose-item::before, .why-choose-box-2 .why-choose-item::before { content: ""; position: absolute; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--accent-color); transform: scaleY(0); transition: transform 0.45s var(--fx-ease); } /* left box: accent on the left edge */ .why-choose-box-1 .why-choose-item::before { left: 0; transform-origin: center; } .why-choose-box-1 .why-choose-item:hover::before { transform: scaleY(1); } .why-choose-box-1 .why-choose-item:hover { transform: translateX(6px); } /* right box: accent on the right edge */ .why-choose-box-2 .why-choose-item::before { right: 0; left: auto; } .why-choose-box-2 .why-choose-item:hover::before { transform: scaleY(1); } .why-choose-box-2 .why-choose-item:hover { transform: translateX(-6px); } /* icon box pop on hover */ .why-choose-item .icon-box { transition: transform 0.45s var(--fx-ease), box-shadow 0.4s ease; } .why-choose-item:hover .icon-box { transform: rotate(-6deg) scale(1.08); box-shadow: 0 8px 20px rgba(41,45,109,0.18); } /* heading colour shift on hover (left side -> accent) */ .why-choose-box-1 .why-choose-item:hover .why-choose-content h3 { color: var(--accent-color); } .why-choose-box-2 .why-choose-item:hover .why-choose-content h3 { color: var(--accent-color); } /* floating center doctor */ .why-choose-image img { animation: fxFloat 5s ease-in-out infinite; will-change: transform; } /* reveal start-states: items slide in from their side */ .fx-js .why-choose-box-1 .why-choose-item, .fx-js .why-choose-box-2 .why-choose-item, .fx-js .why-choose-image { opacity: 0; } @media (prefers-reduced-motion: reduce) { .why-choose-image img { animation: none; } } /*====================================================================== 18. SERVICES — number badges, corner accent, arrow, richer hover ======================================================================*/ .our-service { position: relative; overflow: hidden; } .our-service .service-item { position: relative; overflow: hidden; } /* number badge on each service card */ .our-service .service-item:not(.service-cta-item) .service-image { position: relative; } .our-service .service-item:not(.service-cta-item) .service-image::after { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; border-radius: 10px; background: rgba(41, 45, 109, 0.86); color: #fff; font-family: var(--accent-font); font-weight: 700; font-size: 15px; display: grid; place-items: center; z-index: 2; transition: background 0.4s ease, transform 0.45s var(--fx-ease); } /* set the numbers per service card (cards are the col wrappers) */ .our-service .row > div:nth-of-type(1) .service-image::after { content: "01"; } .our-service .row > div:nth-of-type(2) .service-image::after { content: "02"; } .our-service .row > div:nth-of-type(3) .service-image::after { content: "03"; } .our-service .row > div:nth-of-type(4) .service-image::after { content: "04"; } .our-service .row > div:nth-of-type(5) .service-image::after { content: "05"; } .our-service .row > div:nth-of-type(6) .service-image::after { content: "06"; } .our-service .row > div:nth-of-type(7) .service-image::after { content: "07"; } .our-service .service-item:hover .service-image::after { background: var(--accent-color); transform: scale(1.1); } /* arrow that appears on hover in the body */ .our-service .service-item:not(.service-cta-item) .service-body h3 { transition: color 0.3s ease; } /* keep text readable on the gold hover background (template slides gold up) */ .our-service .service-item:hover .service-body h3 { color: #fff !important; } .our-service .service-item:hover .service-body p { color: rgba(255,255,255,0.92) !important; } /* 7 cards: the lone 7th card centers gracefully instead of hanging left */ @media (min-width: 992px) { .our-service .row > div:nth-of-type(7) { margin-left: 33.333%; } } /* image overlay tint that fades in on hover for extra depth */ .our-service .service-item .service-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(41,45,109,0.28), transparent 55%); opacity: 0; transition: opacity 0.45s var(--fx-ease); z-index: 1; pointer-events: none; } .our-service .service-item:hover .service-image::before { opacity: 1; } /* whole card border-glow + stronger lift on hover */ .our-service .service-item { border: 1px solid transparent; transition: transform 0.45s var(--fx-ease), box-shadow 0.45s var(--fx-ease), border-color 0.4s ease; } .our-service .service-item:hover { border-color: rgba(208,187,104,0.45); } /*====================================================================== 19. STATS BAND ("Our Impact") — livelier counter cards ======================================================================*/ .stats-band { position: relative; overflow: hidden; } .stats-band::before { content: ""; position: absolute; bottom: -120px; left: 50%; transform: translateX(-50%); width: 520px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(208,187,104,0.12), transparent 70%); pointer-events: none; } .stats-band .solution-counter-item { position: relative; border: 1px solid transparent; transition: transform 0.45s var(--fx-ease), box-shadow 0.45s var(--fx-ease), border-color 0.4s ease; } .stats-band .solution-counter-item:hover { transform: translateY(-8px); box-shadow: var(--fx-shadow-md); border-color: rgba(208,187,104,0.5); } /* gold underline accent under each stat number */ .stats-band .solution-counter-content h3 { position: relative; display: inline-block; padding-bottom: 8px; } .stats-band .solution-counter-content h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--accent-color); transition: width 0.45s var(--fx-ease); } .stats-band .solution-counter-item:hover .solution-counter-content h3::after { width: 100%; } /* icon pop + gentle float */ .stats-band .solution-counter-item .icon-box img { transition: transform 0.5s var(--fx-ease); } .stats-band .solution-counter-item:hover .icon-box img { transform: scale(1.15) rotate(-6deg); } /*====================================================================== 20. NEED ATTENTION — interactive condition pills + animated bg ======================================================================*/ .need-attention { overflow: hidden; } /* slow drifting gold sheen over the navy overlay */ .need-attention::after { content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient(100deg, transparent, rgba(208,187,104,0.10), transparent); animation: fxNASheen 9s ease-in-out infinite; z-index: 0; pointer-events: none; } @keyframes fxNASheen { 0%, 65% { left: -30%; } 100% { left: 130%; } } .need-attention .row { position: relative; z-index: 1; } /* turn each row into an interactive pill */ .need-attention-list { position: relative; border-bottom: none !important; padding: 14px 18px !important; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08) !important; transition: background 0.4s ease, transform 0.45s var(--fx-ease), border-color 0.4s ease; } .need-attention .col-lg-4:nth-last-child(-n + 3) .need-attention-list { padding: 14px 18px !important; } .need-attention-list:hover { background: rgba(208,187,104,0.18); border-color: rgba(208,187,104,0.5) !important; transform: translateY(-4px); } /* icon box gets a circular gold base + flip on hover */ .need-attention-list .icon-box { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,0.06); transition: transform 0.5s var(--fx-ease), background 0.4s ease; } .need-attention-list:hover .icon-box { background: var(--accent-color); transform: rotateY(180deg); } .need-attention-list .icon-box img { transition: transform 0.5s var(--fx-ease); } .need-attention-list:hover .icon-box img { transform: rotateY(180deg); } /* counter-flip so icon stays readable */ .need-attention-list .need-attention-content p { transition: color 0.3s ease, letter-spacing 0.3s ease; } .need-attention-list:hover .need-attention-content p { color: #fff; letter-spacing: 0.3px; } /* reveal start-states */ .fx-js .stats-band .solution-counter-item, .fx-js .need-attention-list { opacity: 0; } @media (prefers-reduced-motion: reduce) { .need-attention::after { animation: none; } .need-attention-list:hover .icon-box, .need-attention-list:hover .icon-box img { transform: none; } } /*====================================================================== 21. GALLERY STRIP — pause on hover, image hover polish, edge fade ======================================================================*/ .gallery-carousel { position: relative; } .gallery-carousel-box { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .gallery-carousel-box:hover .gallery-scrolling-content { animation-play-state: paused; } .gallery-image { position: relative; border-radius: 30px; overflow: hidden; transition: transform 0.5s var(--fx-ease), box-shadow 0.5s var(--fx-ease); } .gallery-image figure { margin: 0; overflow: hidden; border-radius: 30px; } .gallery-image img { transition: transform 0.7s var(--fx-ease-soft); will-change: transform; display: block; } .gallery-image:hover { transform: translateY(-8px); box-shadow: var(--fx-shadow-md); } .gallery-image:hover img { transform: scale(1.08); } /* navy tint on hover (sits flush inside the rounded corners, no border) */ .gallery-image::after { content: ""; position: absolute; inset: 0; border-radius: 30px; background: linear-gradient(to top, rgba(41,45,109,0.32), transparent 55%); opacity: 0; transition: opacity 0.5s var(--fx-ease); pointer-events: none; } .gallery-image:hover::after { opacity: 1; } /*====================================================================== 22. TESTIMONIALS — quote mark, accent, avatar, star pop, hover ======================================================================*/ .our-testimonial { position: relative; } .testimonial-item { position: relative; overflow: hidden; border: 1px solid transparent; transition: transform 0.45s var(--fx-ease), box-shadow 0.45s var(--fx-ease), border-color 0.4s ease; } .testimonial-item:hover { transform: translateY(-8px); box-shadow: var(--fx-shadow-md); border-color: rgba(208,187,104,0.45); } /* big decorative quote mark */ .testimonial-item::before { content: "\201C"; position: absolute; top: 6px; right: 22px; font-family: Georgia, "Times New Roman", serif; font-size: 96px; line-height: 1; color: rgba(208,187,104,0.18); pointer-events: none; transition: color 0.4s ease, transform 0.5s var(--fx-ease); } .testimonial-item:hover::before { color: rgba(208,187,104,0.32); transform: translateY(2px) scale(1.04); } /* gold left accent that grows on hover */ .testimonial-item::after { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 4px; border-radius: 4px; background: var(--accent-color); transform: scaleY(0); transition: transform 0.45s var(--fx-ease); } .testimonial-item:hover::after { transform: scaleY(1); } /* star pop on hover */ .testimonial-rating i { transition: transform 0.4s var(--fx-ease); } .testimonial-item:hover .testimonial-rating i { transform: scale(1.15); } .testimonial-item:hover .testimonial-rating i:nth-child(2) { transition-delay: 0.04s; } .testimonial-item:hover .testimonial-rating i:nth-child(3) { transition-delay: 0.08s; } .testimonial-item:hover .testimonial-rating i:nth-child(4) { transition-delay: 0.12s; } .testimonial-item:hover .testimonial-rating i:nth-child(5) { transition-delay: 0.16s; } /* author gets an avatar circle with initial */ .testimonial-body .author-content { position: relative; padding-left: 64px; } .testimonial-body .author-content::before { content: attr(data-initial); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), #353a82); color: #fff; font-family: var(--accent-font); font-weight: 700; font-size: 18px; display: grid; place-items: center; } /*====================================================================== 23. BLOG — richer cards, tag badge, read-more, image overlay ======================================================================*/ .our-blog { position: relative; } .our-blog .blog-item { transition: transform 0.45s var(--fx-ease), box-shadow 0.45s var(--fx-ease), border-color 0.4s ease !important; } .our-blog .blog-item:hover { transform: translateY(-10px); box-shadow: var(--fx-shadow-md); border-color: rgba(208,187,104,0.5) !important; } .our-blog .post-featured-image { position: relative; overflow: hidden; } .our-blog .post-featured-image img { transition: transform 0.7s var(--fx-ease-soft); } .our-blog .blog-item:hover .post-featured-image img { transform: scale(1.08); } /* navy tint over image on hover */ .our-blog .post-featured-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(41,45,109,0.30), transparent 55%); opacity: 0; transition: opacity 0.45s var(--fx-ease); pointer-events: none; } .our-blog .blog-item:hover .post-featured-image::after { opacity: 1; } /* "Health Tips" tag badge on the image */ .our-blog .post-featured-image figure::after { content: "Health Tips"; position: absolute; top: 16px; left: 16px; background: var(--accent-color); color: var(--primary-color); font-family: var(--accent-font); font-weight: 700; font-size: 12px; padding: 6px 14px; border-radius: 999px; z-index: 2; } /* heading colour on hover */ .our-blog .post-item-body h2 a { transition: color 0.3s ease; } .our-blog .blog-item:hover .post-item-body h2 a { color: var(--accent-color); } /* reveal start-states (blog only; gallery marquee & testimonial swiper animate themselves) */ .fx-js .our-blog .blog-item { opacity: 0; } @media (prefers-reduced-motion: reduce) { .gallery-carousel-box:hover .gallery-scrolling-content { animation-play-state: running; } } /*====================================================================== 24. BOOKING SECTION — effects (now on a light background) ======================================================================*/ .appointment-form-box { position: relative; transition: transform 0.5s var(--fx-ease), box-shadow 0.5s var(--fx-ease); } .appointment-form-box:hover { box-shadow: 0 36px 72px rgba(41,45,109,0.16); } /* form-group label-float feel: lift the field slightly on focus */ .appointment-form-box .form-control:focus { transform: translateY(-1px); } /* contact rows: icon pop + slide on hover */ .appointment-contact li { transition: transform 0.35s var(--fx-ease); } .appointment-contact li:hover { transform: translateX(5px); } .appointment-contact li .ac-icon { transition: transform 0.4s var(--fx-ease), background 0.3s ease, color 0.3s ease; } .appointment-contact li:hover .ac-icon { transform: scale(1.1) rotate(-6deg); background: var(--accent-color); color: #fff; } /* WhatsApp button gentle pulse to draw the eye */ .btn-whatsapp { animation: fxWhatsPulse 2.8s ease-in-out infinite; } .btn-whatsapp:hover { animation: none; } @keyframes fxWhatsPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); } 50% { box-shadow: 0 0 0 12px rgba(37,211,102,0); } } /* submit button shine sweep on hover */ .appointment-form-box button.btn-default { position: relative; overflow: hidden; } /*====================================================================== 25. FOOTER — crisp boundary, link/icon polish, info-box hover ======================================================================*/ .main-footer { position: relative; border-top: 4px solid var(--accent-color); /* clean gold divider from the light booking section */ } /* faint decorative glow */ .main-footer::before { content: ""; position: absolute; top: -60px; left: 8%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(208,187,104,0.08), transparent 70%); pointer-events: none; } .main-footer .container { position: relative; z-index: 1; } /* footer headings get a small gold underline */ .main-footer h3 { position: relative; padding-bottom: 12px; } .main-footer h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--accent-color); transition: width 0.45s var(--fx-ease); } .footer-contact:hover h3::after, .about-service-list:hover h3::after, .footer-map:hover h3::after { width: 60px; } /* services list links: slide + gold dot */ .about-service-list ul li a { position: relative; display: inline-block; padding-left: 0; transition: transform 0.35s var(--fx-ease), color 0.3s ease, padding-left 0.3s ease; } .about-service-list ul li a::before { content: "\f105"; /* fa angle-right */ font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--accent-color); opacity: 0; margin-right: 6px; transition: opacity 0.3s ease; position: absolute; left: -14px; } .about-service-list ul li a:hover { transform: translateX(14px); color: var(--accent-color); } .about-service-list ul li a:hover::before { opacity: 1; } /* footer contact info boxes: subtle lift + icon pop */ .footer-info-box { transition: transform 0.4s var(--fx-ease); } .footer-info-box:hover { transform: translateX(5px); } .footer-info-box .icon-box { transition: transform 0.4s var(--fx-ease); } .footer-info-box:hover .icon-box { transform: scale(1.12) rotate(-6deg); } /* social icons: gold fill + lift */ .footer-social-links ul li a { transition: transform 0.4s var(--fx-ease), background 0.3s ease, color 0.3s ease; } .footer-social-links ul li a:hover { transform: translateY(-5px); background: var(--accent-color) !important; color: var(--primary-color) !important; } /* map: zoom-frame on hover */ .footer-map .map-box { transition: transform 0.5s var(--fx-ease), box-shadow 0.5s var(--fx-ease); } .footer-map .map-box:hover { transform: translateY(-4px); box-shadow: var(--fx-shadow-md); } /* copyright bar refinement */ .footer-copyright { border-top: 1px solid rgba(255,255,255,0.12); } /* reveal start-states already cover footer cols via earlier rules */ @media (prefers-reduced-motion: reduce) { .btn-whatsapp { animation: none; } } /*====================================================================== 26. HERO — extra effects (replaces the removed scroll cue) ======================================================================*/ .hero { position: relative; } /* floating decorative shapes drifting over the hero */ .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 2; } .hero::before { top: 16%; left: 7%; width: 90px; height: 90px; border: 2px solid rgba(208,187,104,0.45); animation: fxHeroFloat1 7s ease-in-out infinite; } .hero::after { bottom: 18%; right: 9%; width: 56px; height: 56px; background: radial-gradient(circle, rgba(208,187,104,0.30), transparent 70%); animation: fxHeroFloat2 6s ease-in-out infinite; } @keyframes fxHeroFloat1 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(20deg); } } @keyframes fxHeroFloat2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px, 14px); } } /* badge ("Expert Orthopedic Care"): soft shimmer + gentle pulse */ .hero .hero-content .section-tag, .hero .hero-content h3, .hero .hero-content .hero-tag { position: relative; overflow: hidden; } /* the small pill is usually the first child of hero-content; target it generically */ .hero-content > *:first-child { animation: fxBadgePulse 3s ease-in-out infinite; } @keyframes fxBadgePulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* animated gold underline under the hero headline */ .hero-content h1 { position: relative; } .hero-content h1::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--accent-color), transparent); transform: translateX(-50%); animation: fxHeadlineLine 2.4s var(--fx-ease) 1.2s forwards; } @keyframes fxHeadlineLine { from { width: 0; opacity: 0; } to { width: 160px; opacity: 1; } } /* hero buttons: subtle continuous shine + lift already handled by .btn-default */ .hero-content-body .btn-default { position: relative; overflow: hidden; } .hero-content-body .btn-default::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); animation: fxBtnShine 4.5s var(--fx-ease) infinite; pointer-events: none; } @keyframes fxBtnShine { 0%, 70% { left: -70%; } 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { .hero::before, .hero::after, .hero-content > *:first-child, .hero-content h1::after, .hero-content-body .btn-default::after { animation: none; } .hero-content h1::after { width: 160px; opacity: 1; } } /*====================================================================== 27. FLOATING CONTACT BUTTONS (bottom-left) — WhatsApp + Call ======================================================================*/ .floating-icons { position: fixed; bottom: 24px; left: 24px; display: flex; flex-direction: column; gap: 14px; z-index: 9999; } .floating-icons .icon-btn { position: relative; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; text-decoration: none; border-radius: 50%; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); transition: transform 0.35s var(--fx-ease), box-shadow 0.35s var(--fx-ease), background 0.3s ease; animation: fxFloatBtn 2.6s ease-in-out infinite; } .floating-icons .whatsapp-btn { background: #25D366; } .floating-icons .phone-btn { background: linear-gradient(135deg, var(--primary-color), #353a82); animation-delay: 0.4s; } /* hover: lift + grow + brand-coloured glow */ .floating-icons .icon-btn:hover { transform: scale(1.12) translateY(-2px); } .floating-icons .whatsapp-btn:hover { box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55); } .floating-icons .phone-btn:hover { box-shadow: 0 10px 26px rgba(41, 45, 109, 0.55); } /* icon animation on hover */ .floating-icons .icon-btn i { transition: transform 0.4s var(--fx-ease); } .floating-icons .whatsapp-btn:hover i { transform: rotate(8deg) scale(1.1); } .floating-icons .phone-btn:hover i { animation: fxPhoneRing 0.6s ease-in-out; } @keyframes fxPhoneRing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } } /* pulsing ring behind each button */ .floating-icons .icon-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1; animation: fxPulseRing 2.4s ease-out infinite; } .floating-icons .whatsapp-btn::before { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } .floating-icons .phone-btn::before { box-shadow: 0 0 0 0 rgba(208, 187, 104, 0.55); animation-delay: 0.6s; } @keyframes fxPulseRing { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } /* hover tooltip (label slides out to the right) */ .floating-icons .icon-btn::after { content: attr(data-tip); position: absolute; left: 64px; top: 50%; transform: translateY(-50%) translateX(-8px); white-space: nowrap; background: var(--primary-color); color: #fff; font-family: var(--accent-font); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s var(--fx-ease); box-shadow: var(--fx-shadow-sm); } .floating-icons .icon-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* gentle float */ @keyframes fxFloatBtn { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } /* keep clear of the back-to-top button on small screens */ @media (max-width: 768px) { .floating-icons { left: 14px; bottom: 18px; } .floating-icons .icon-btn { width: 50px; height: 50px; font-size: 22px; } /* hide tooltips on touch (no hover) */ .floating-icons .icon-btn::after { display: none; } } @media (max-width: 480px) { .floating-icons .icon-btn { width: 46px; height: 46px; font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .floating-icons .icon-btn, .floating-icons .icon-btn::before { animation: none; } }