/* * roundness.css — Eden Fife Healthcare * Applies soft rounded corners consistently across the entire site. * Add this LAST in the so it overrides base styles where needed. */ /* ========================================================= 0. SITE FONTS AND HERO FIX ========================================================= */ /* Fix missing Next.js font variables */ :root { --poppins: "PT Sans", sans-serif; --pT_Serif: "PT Serif", serif; } body { font-family: var(--poppins) !important; } /* Recovered Next.js styled-jsx for Hero Video Banner */ .video-banner-slide { position: relative; width: 100%; overflow: hidden; height: 100vh; /* Fits exactly on any landing screen */ display: flex; align-items: center; justify-content: center; } /* Ensure padding pushes content down appropriately, similar to what the original slider had */ .video-banner-slide .content-outer { position: relative; z-index: 2; width: 100%; } .video-banner-slide .content-box { display: flex; justify-content: center; } .banner-bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; z-index: 0; } .banner-video-overlay { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #000; opacity: 0.5; z-index: 1; } .banner-shape { z-index: 3; } /* Animations and layout recovered */ .banner-inner-visible { opacity: 1 !important; transform: translateX(0) !important; max-width: 50%; /* Less than half the screen */ text-align: center; /* Center horizontally */ margin: 0 auto; } .banner-inner-visible h4, .banner-inner-visible h1, .banner-inner-visible .text { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .banner-linkbox-visible { opacity: 1 !important; visibility: visible !important; transform: scale(1) translateY(0) !important; margin-top: 20px; } /* Recovered Sticky Header Visibility */ .sticky-header.fixed-header { opacity: 1 !important; visibility: visible !important; z-index: 99999 !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; transition: all 0.5s ease; background-color: #ffffff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } /* Recovered Scroll Animations (WOW.js replacement) */ .wow:not(.animated) { visibility: hidden; } /* ========================================================= 1. GLOBAL IMAGES — round all standalone images ========================================================= */ img { border-radius: 12px; } /* Exceptions: icons/logos/shapes that should stay sharp */ .logo img, .nav-logo img, .footer-1-top .logo img, .banner-shape img, .about-1-shape-1 img, .about-1-shape-2 img, .why-chooseus-1-shape img, .testimonial-1-shape-1 img, .testimonial-1-shape-2 img, .contact-1-shape-1 img, .contact-1-shape-2 img, .mobile-nav-toggler img { border-radius: 0; } /* Profile / avatar images stay circular */ .team-1-image img, .team-2-image img, .testimonial-1-author-thumb img, .testimonial-2-thumb img { border-radius: 50%; } /* ========================================================= 2. HEADER & NAVIGATION ========================================================= */ /* Main header wrapper gets a very subtle bottom radius on scroll */ .main-header .header-upper { border-radius: 0 0 20px 20px; padding: 0 !important; } .main-header .header-upper .inner-container { padding: 0 !important; } .main-header .logo img { padding: 0 !important; margin: 0 !important; } /* Dropdown menus — already have radius but make consistent */ .main-menu .navigation>li>ul { border-radius: 20px; overflow: hidden; } .main-menu .navigation>li>ul>li>ul { border-radius: 20px; overflow: hidden; } /* ========================================================= 3. BANNER / HERO SECTION ========================================================= */ /* Video banner — clip to rounded bottom */ .banner-section { border-radius: 0 0 40px 40px; overflow: hidden; } /* ========================================================= 4. SERVICE CARDS ========================================================= */ /* service-1-block — round cards and give text room to breathe */ .service-1-block { border-radius: 30px !important; padding-left: 25px !important; padding-right: 25px !important; } /* Ensure hover pseudo-elements respect the rounded corners */ .service-1-block:before, .service-1-block:after { border-radius: 30px !important; } /* Change tilted hover background from pink to light green */ .service-1-block:before { background: #a8d97a !important; } /* Service 2 blocks */ .service-2-block { border-radius: 0 0 30px 30px !important; overflow: hidden; } .service-2-image { border-radius: 30px 30px 0 0 !important; overflow: hidden; } .service-2-image img { border-radius: 30px 30px 0 0 !important; } /* Service detail image boxes */ .image-box-1-image img { border-radius: 20px; } .image-box-1-content { border-radius: 0 0 20px 20px; overflow: hidden; } /* ========================================================= 5. ABOUT SECTION ========================================================= */ .about-1-image-1 img { border-radius: 30px; } .about-1-video-area { border-radius: 30px !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* ========================================================= 6. FUNDRAISE / COMMITMENT CARDS ========================================================= */ .fundraise-1-image img, .fundraise-1-image:before { border-radius: 30px 30px 0 0 !important; } .fundraise-1-content { border-radius: 0 0 30px 30px !important; } .fundraise-1-block { border-radius: 30px; overflow: visible; /* Prevent box-shadow truncation */ } /* ========================================================= 7. WHY CHOOSE US ========================================================= */ .why-chooseus-1-image img { border-radius: 30px !important; } /* Featured/highlighted block border */ .why-chooseus-1-block:nth-child(2) { border-radius: 20px !important; } /* ========================================================= 8. VIDEO BACKGROUND SECTION ========================================================= */ section.video-1-section { border-radius: 30px; overflow: hidden; } /* ========================================================= 9. TEAM SECTION ========================================================= */ /* Team wrapper background card */ .team-1-wrapper { border-radius: 30px; overflow: hidden; } /* ========================================================= 10. TESTIMONIAL BLOCKS ========================================================= */ /* Explicitly round individual testimonial cards */ .testimonial-1-block { border-radius: 30px !important; overflow: hidden; } /* Swiper wrapper */ .testimonial-1-block-wrap { border-radius: 20px; overflow: visible; } /* ========================================================= 11. BLOG CARDS ========================================================= */ /* blog-1-image top + blog-1-bottom-content bottom already set ✓ */ .blog-1-block { border-radius: 30px; overflow: hidden; } /* Blog date badge */ .blog-1-date { border-radius: 40px !important; } /* Standard/detail blog images */ .blog-1-image img { border-radius: 30px 30px 0 0; } /* ========================================================= 12. CONTACT SECTION ========================================================= */ .contact-1-image img { border-radius: 30px 30px 0 0 !important; } /* Contact form inputs — already 30px ✓ */ /* ========================================================= 13. SIDEBAR WIDGETS (service detail pages, etc.) ========================================================= */ .tp-default-widget, .category-widget { border-radius: 30px !important; } ul.category-widget-list a { border-radius: 12px; overflow: hidden; } .contact-widget { border-radius: 30px !important; } .event-info-widget { border-radius: 20px; overflow: hidden; } .service-details-download-wrap { border-radius: 20px !important; } /* ========================================================= 14. FAQ ACCORDION ========================================================= */ .accordion-box .block { border-radius: 20px; overflow: hidden; } /* ========================================================= 15. EVENT CARDS ========================================================= */ .event-1-image { border-radius: 20px 20px 0 0; overflow: hidden; } .event-1-bottom-content { border-radius: 0 0 20px 20px; overflow: hidden; } .event-1-block { border-radius: 20px; overflow: hidden; } .event-2-block { border-radius: 20px; overflow: hidden; } .event-2-image { border-radius: 20px; overflow: hidden; } /* ========================================================= 16. FUNFACT / STATISTICS WRAPPER ========================================================= */ .funfact-1-wrapper { border-radius: 30px; overflow: hidden; } /* ========================================================= 17. ESTIMATE / CTA FORM ========================================================= */ .estimate-form-1-wrap { border-radius: 30px; overflow: hidden; } /* ========================================================= 18. HIDDEN SIDEBAR ========================================================= */ .hidden-sidebar { border-radius: 20px 0 0 20px; } .hidden-sidebar .news-widget .image { border-radius: 10px; overflow: hidden; } .hidden-sidebar .news-widget .image img { border-radius: 10px; } /* ========================================================= 19. FOOTER ========================================================= */ /* Footer top section */ .footer-1-top { border-radius: 30px 30px 0 0; } .footer-1-top-content .logo { margin-top: 80px !important; } /* ========================================================= 20. PAGE TITLE / BREADCRUMB ========================================================= */ .page-title { border-radius: 0 0 30px 30px; overflow: hidden; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } .cta-1-bg { background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } /* ========================================================= 21. FORMS — newsletter, estimate, contact ========================================================= */ form.newsletter-1-form input[type="text"], form.newsletter-1-form input[type="email"] { border-radius: 20px !important; } form.estimate-form-1-form input { border-radius: 20px !important; } /* ========================================================= 22. SKILL SECTION IMAGE ========================================================= */ .skill-1-image img { border-radius: 20px; } /* ========================================================= 23. SINGLE TEAM / BLOG / SERVICE DETAIL IMAGES ========================================================= */ .faq-1-image img { border-radius: 20px; } /* ========================================================= 24. CLIENT LOGO SECTION ========================================================= */ .client-logo-1 { border-radius: 20px; } .client-logo-1-image img { border-radius: 8px; } /* ========================================================= 25. CAREER PAGE FORMS ========================================================= */ .form-alt-2 form input[type="text"], .form-alt-2 form input[type="email"], .form-alt-2 form input[type="password"], .form-alt-2 form input[type="tel"], .form-alt-2 form input[type="number"], .form-alt-2 form input[type="file"], .form-alt-2 form select, .form-alt-2 form textarea, .form-alt-3 form input[type="text"], .form-alt-3 form input[type="email"], .form-alt-3 form input[type="tel"], .form-alt-3 form textarea { border-radius: 45px !important; width: 100% !important; display: block; } .form-alt-2 .form-gorup, .form-alt-2 .form-group.text-center { text-align: center; } /* Custom file input styling */ .form-alt-2 form input[type="file"] { border: none !important; background: transparent !important; padding-top: 15px; cursor: pointer; } /* ========================================================= 26. CONTACT PAGE ========================================================= */ .contact-map iframe { border-radius: 30px; } /* ========================================================= 27. GLOBAL BUTTON FIX ========================================================= */ .btn-1, .btn-1.btn-small, .btn-1.btn-large { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .btn-1 i { position: static !important; top: auto !important; line-height: normal !important; margin-left: 10px !important; display: inline-flex !important; align-items: center !important; height: auto !important; } .btn-1 span { top: 50% !important; left: 50% !important; } /* ========================================================= 28. GLOBAL RESPONSIVENESS FIXES ========================================================= */ @media (max-width: 991px) { /* Reduce massive paddings and margins */ .section-padding { padding-top: 80px !important; padding-bottom: 80px !important; } .pt_120 { padding-top: 80px !important; } .pb_120 { padding-bottom: 80px !important; } .pt_100 { padding-top: 60px !important; } .pb_100 { padding-bottom: 60px !important; } .mt_120 { margin-top: 80px !important; } .mb_120 { margin-bottom: 80px !important; } .mt_100 { margin-top: 60px !important; } .mb_100 { margin-bottom: 60px !important; } /* Optimize feature images and overflowing elements */ .feature-image img, .about-1-image-wrap img, .banner-feature-image img { max-width: 100% !important; height: auto !important; } /* Prevent horizontal scrolling on mobile */ html, body { overflow-x: hidden !important; width: 100% !important; } /* Form elements spacing on tablets/mobile */ .contact-form .form-group, .estimate-form-1-form .form-group { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 15px !important; } .estimate-form-1-wrap { padding: 40px 20px !important; } /* Font scales */ .fs_60 { font-size: 40px !important; line-height: 1.3 !important; } .fs_50 { font-size: 36px !important; line-height: 1.3 !important; } .fs_40 { font-size: 30px !important; line-height: 1.3 !important; } /* Disable random breaks inside headers causing weird gaps */ h1 br, h2 br, h3 br, h4 br, h5 br, h6 br, .section_heading_title_big br { display: none !important; } /* Re-space overlapping cards in grids */ .testimonial-1-block, .service-1-block, .project-1-block, .funfact-1-block, .team-1-block { margin-bottom: 30px !important; } /* Shrink Maps */ .contact-map iframe { height: 300px !important; } /* Text align overrides for small screens where things float strangely */ .text-lg-end { text-align: left !important; } .justify-content-lg-end { justify-content: flex-start !important; } } @media (max-width: 767px) { /* Phone level paddings and margins */ .section-padding { padding-top: 60px !important; padding-bottom: 60px !important; } .pt_120, .pt_100 { padding-top: 50px !important; } .pb_120, .pb_100 { padding-bottom: 50px !important; } .mt_120, .mt_100 { margin-top: 50px !important; } .mb_120, .mb_100 { margin-bottom: 50px !important; } /* Hide header top on tiny screens to save space */ .header-top-1 { display: none !important; } /* Typography scale */ h1 { font-size: 36px !important; line-height: 1.2 !important; } h2 { font-size: 28px !important; line-height: 1.3 !important; } h3 { font-size: 24px !important; line-height: 1.4 !important; } .fs_60 { font-size: 32px !important; } .fs_50 { font-size: 28px !important; } .fs_40 { font-size: 24px !important; } /* Grid gaps / Alignment fixes */ .row { margin-left: -15px !important; margin-right: -15px !important; } /* Increased horizontal margins for all content except hero */ .auto-container { padding-left: 30px !important; padding-right: 30px !important; } /* Contact page specific phone adjustments */ .contact-info-1 li { display: block; margin-bottom: 10px; width: 100% !important; } /* Breadcrumbs shrink */ .page-title h1 { font-size: 38px !important; } .bredcrumb-wrap { padding: 15px 0 !important; } /* Slider navs hidden on phones favoring touch swiping */ .swiper-button-next, .swiper-button-prev, .owl-nav { display: none !important; } } @media (max-width: 575px) { /* Further squeeze text bounds */ .section_heading_title_big { font-size: 26px !important; line-height: 1.4 !important; } /* Outer container padding - Increased for mobile margins */ .auto-container { padding-left: 30px !important; padding-right: 30px !important; } /* Fix logo width to not crush nav */ .header-upper .logo img { max-width: 140px !important; height: auto !important; } /* Squeeze Buttons */ .btn-1, .btn-1.btn-small, .btn-1.btn-large { padding: 12px 20px !important; font-size: 14px !important; } } @media (max-width: 1200px) { /* Force Sticky Nav and Mobile Header full touch */ .sticky-header { display: block !important; } .sticky-header .mobile-nav-toggler { display: block !important; } .sticky-icon-bar { filter: invert(1) brightness(0); } .header-upper .logo-box { padding: 0 !important; margin: 0 !important; display: flex !important; align-self: stretch !important; /* Force stretch on cross axis */ align-items: stretch !important; justify-content: flex-start !important; } .header-upper .logo, .sticky-header .logo, .header-upper .logo a { padding: 0 !important; margin: 0 !important; display: flex !important; align-self: stretch !important; /* Force stretch */ align-items: stretch !important; width: 100%; } .sticky-header .logo img, .header-upper .logo img { height: 100% !important; max-height: none !important; /* Don't restrict max height, let it fill */ width: auto !important; max-width: 220px !important; object-fit: cover !important; object-position: left center !important; padding: 0 !important; margin: 0 !important; display: block !important; } .header-upper .inner-container { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; align-items: stretch !important; height: 100%; } .header-upper .auto-container { padding-top: 0 !important; padding-bottom: 0 !important; height: 100%; } /* Remove all margins and paddings on nav bar to keep it tight */ .main-header, .main-header .header-upper, .main-header .nav-outer, .sticky-header { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .main-header .header-upper, .main-header .nav-outer, .sticky-header { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } } @media (max-width: 767px) { /* Ensure hero width is perfectly sized to screen */ .banner-section { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 0 !important; } .video-banner-slide { width: 100% !important; height: 800px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .banner-shape img { width: 180%; max-width: none; height: auto; position: relative; left: 50%; transform: translateX(-50%); } /* Widen content by reducing margins significantly */ .banner-section .banner-inner-visible { max-width: 95% !important; width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; margin: 0 auto !important; } /* Hero section mobile overrides */ .banner-section .banner-inner-visible .text { font-size: 15px !important; line-height: 1.5 !important; margin-top: 5px !important; margin-bottom: 5px !important; } .banner-section .banner-linkbox-visible { margin-top: 10px !important; } .banner-section .banner-linkbox-visible .btn-large, .banner-section .banner-inner-visible a.btn-1 { font-size: 13px !important; padding: 10px 20px !important; } /* Lower contact section image completely behind footer */ .contact-1-image-wrap { margin-bottom: -60px !important; transform: translateY(20px) !important; position: relative; z-index: 1; } .footer-1 { position: relative; z-index: 5; } /* Footer Neatness overrides */ .footer-1-top { padding: 30px 0 10px !important; } .footer-1-top-content { flex-direction: column !important; align-items: center !important; justify-content: center !important; } .footer-1-top-content .logo { margin-top: 0 !important; margin-bottom: 15px !important; } .footer-1-social-icon { margin: 0 !important; justify-content: center !important; } .footer-1-social-icon li { margin-left: 7px !important; margin-right: 7px !important; } .footer-1-middle { padding: 50px 0 30px !important; } .footer-bottom { padding: 20px 0 !important; font-size: 12px !important; } .about-widget-1, .link-widget-1, .contact-widget-1 { margin-bottom: 30px !important; } /* Sidebar Logo Resize & Spacing */ .mobile-menu .nav-logo { margin-bottom: 30px !important; margin-top: 20px !important; text-align: center !important; } .mobile-menu .nav-logo img { max-width: 130px !important; height: auto !important; } /* Hidden Sidebar Logo Resize */ .hidden-sidebar .logo img { max-width: 150px !important; height: auto !important; } }