@media (max-width: 1600px) { :root { /* Fonts Sizes and Font Weights*/ --text-base: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 20px; --text-3xl: 25px; --text-4xl: 30px; --text-5xl: 40px; --text-6xl: 55px; --text-7xl: 60px; --text-15xl: 100px; --text-18xl: 150px; --text-20xl: 200px; } /*-------------------------------------------------------------- # Home Page Banner --------------------------------------------------------------*/ .hero-wrapper { height: 65vh; } .hero-left h3 { margin-bottom: 20px; } video { height: 103%; } /*-------------------------------------------------------------- # Loved Ones --------------------------------------------------------------*/ .loved-ones .btn-wrapper { margin-top: 40px; } /*-------------------------------------------------------------- # Explore our Services --------------------------------------------------------------*/ .explore-our-service { padding-top: 100px; } .service-card.text { padding: 30px; } .explore-our-service h2 { margin-bottom: 60px; } /*-------------------------------------------------------------- # Why families choose us --------------------------------------------------------------*/ .yellow-box { width: 80px; height: 80px; } .why-choose h2 { margin-bottom: 60px; } .why-choose-card { gap: 20px; } .talk-card-care { padding: 30px 40px; } /*-------------------------------------------------------------- # Ongoing Care --------------------------------------------------------------*/ .ongoing { padding: 80px; } .step { padding: 30px 50px; } /*-------------------------------------------------------------- # Help & Advice --------------------------------------------------------------*/ .testimonial-wrapper { padding: 100px 0; } .testimonial-wrapper>div .quote-img { top: -50px; } .pod-cast-img { width: 90px; height: 90px; } .home-blogs-slider .reource-content { padding: 30px; } .home-blogs-slider { margin-top: 60px; } /*-------------------------------------------------------------- # What our patients say! --------------------------------------------------------------*/ .testimonial-left { gap: 30px; } .testimonial-card { padding: 40px 30px; gap: 15px; height: 330px; } } @media (max-width: 1440px) { /* Fonts Sizes and Font Weights*/ :root { --text-xl: 16px; --text-2xl: 18px; --text-3xl: 20px; --text-4xl: 25px; --text-5xl: 30px; --text-6xl: 50px; --text-7xl: 55px; --text-18xl: 120px; --text-20xl: 150px; } /*-------------------------------------------------------------- # Global Footer --------------------------------------------------------------*/ footer ul li { margin-bottom: 15px; } footer .footer-bottom { padding: 15px 0; } .footer-wrapper { padding: 0 65px; } /*-------------------------------------------------------------- # Home Page Banner --------------------------------------------------------------*/ // video { // height: 117%; // } .hero-wrapper { padding: 30px 0; height: 73vh; } .hero-left { max-width: 90%; } /*-------------------------------------------------------------- # Loved Ones --------------------------------------------------------------*/ .loved-ones-content { padding: 50px; } .loved-ones .btn-wrapper { margin-top: 30px; } .home-about-right { gap: 30px; } .home-about-content { padding: 65px; } /*-------------------------------------------------------------- # Explore our Services --------------------------------------------------------------*/ .explore-our-service h2 { margin-bottom: 40px; } .explore-our-service { padding-top: 80px; } .home-services h2 { margin-bottom: 60px; } .home-services { padding-top: 60px; } /*-------------------------------------------------------------- # Why families choose us --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Ongoing Care --------------------------------------------------------------*/ .ongoing { padding: 60px; } .home-steps-wrapper { padding: 65px; } /*-------------------------------------------------------------- # Help & Advice --------------------------------------------------------------*/ .home-blogs-slider .swiper { max-width: 95%; } .swiper-nav-btn { width: 15px; } .home-blogs-slider-wrapper h2 { margin-bottom: 25px; } .home-blogs { padding: 70px 0 100px; } /*-------------------------------------------------------------- # Book Appointment --------------------------------------------------------------*/ .appointment-form { padding: 65px; } .appointment-form .form-group { margin-bottom: 30px; } } @media (max-width: 1366px) { /* Fonts Sizes and Font Weights*/ :root { --text-7xl: 50px; --text-6xl: 40px; --text-18xl: 100px; --text-15xl: 80px; --text-20xl: 150px; } .footer-wrapper { padding: 0px 50px; } .navmenu a, .navmenu a:focus { font-size: 15px !important; } /*-------------------------------------------------------------- # Home Page Banner --------------------------------------------------------------*/ .hero-left h3 { margin-bottom: 15px; } .hero-wrapper { height: 70vh; } .hero-wrapper { padding: 20px 0; } .home-about-content { padding: 60px; } .loved-ones-content { padding: 40px; } .loved-ones-content ul li::before { width: 1.5em; height: 1.5em; } .loved-ones-content ul li { padding-left: 2.5em; margin-bottom: 10px; } /*-------------------------------------------------------------- # Why families choose us --------------------------------------------------------------*/ .talk-card-care { padding: 30px; } /*-------------------------------------------------------------- # Ongoing Care --------------------------------------------------------------*/ .ongoing { padding: 50px; } .step h4 { margin-bottom: 10px; } .home-steps-wrapper { padding: 60px; } /*-------------------------------------------------------------- # Help & Advice --------------------------------------------------------------*/ .appointment-form { padding: 60px; } .testimonial-slider p { font-size: 15px; } .Stars { margin-bottom: 10px; } .testimonial-card { height: 300px; padding: 30px; } .testimonial-slider h5 { font-size: 15px; } } @media (max-width: 1280px) { main { padding: 0 20px; } } @media (max-width: 1199.98px) { :root { --text-4xl: 20px; --text-5xl: 25px; --text-6xl: 30px; --text-7xl: 40px; --text-15xl: 50px; --text-18xl: 80px; --text-20xl: 100px; } .common-padding-left-right { padding-left: 30px; padding-right: 30px; } .footer-wrapper { padding: 0px 30px; } /* Menu styles */ .menu { position: fixed; top: 120px; left: 0; width: 300px; height: calc(100vh - 120px); background: var(--dark-green); } .menu__wrap { position: absolute; top: 10em; bottom: 0; overflow: hidden; width: 100%; } .menu__level { position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; overflow-y: scroll; width: calc(100% + 50px); height: 100%; margin: 0; padding: 0; list-style-type: none; } .menu__level:focus { outline: none; } .menu__level--current { visibility: visible; } .menu__item { display: block; width: calc(100% - 50px); padding: 0 1em 0 1em; } .menu__item a span img { filter: brightness(0) saturate(100%) invert(17%) sepia(15%) saturate(2596%) hue-rotate(135deg) brightness(94%) contrast(101%); } .menu-logo { height: 60px; top: 1.25em; left: 1em; position: absolute; } .menu__link { font-weight: var(--font-semibold); position: relative; display: block; font-size: var(--text-4xl); padding: 1em 0; color: var(--white); -webkit-transition: color 0.1s; transition: color 0.1s; border-bottom: 1px solid #20615E; text-transform: uppercase; } .menu__btn--wrapper { background-color: transparent; -webkit-transition: all 0.1s; transition: all 0.1s; } .menu__link[data-submenu]::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); position: absolute; right: 0; } .menu__link:hover, .menu__link:focus, .menu__link[data-submenu]:hover::after, .menu__link[data-submenu]:focus::after { color: var(--yellow); } .menu__link--current::before { content: '\00B7'; font-size: 1.5em; line-height: 0; position: absolute; top: 50%; left: 0.5em; height: 4px; color: #5c5edc; } .menu__level .menu__item .menu__link { font-size: var(--text-xl); } [class^='animate-'], [class*=' animate-'] { visibility: visible; } .animate-outToRight .menu__item { -webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes outToRight { to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes outToRight { to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate-outToLeft .menu__item { -webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes outToLeft { to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes outToLeft { to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate-inFromLeft .menu__item { -webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes inFromLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes inFromLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate-inFromRight .menu__item { -webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes inFromRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes inFromRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } // .menu__breadcrumbs { // font-size: 0.65em; // line-height: 1; // position: relative; // padding: 2.5em 3.75em 1.5em 2.5em; // } // .menu__breadcrumbs a { // font-weight: bold; // display: inline-block; // cursor: pointer; // vertical-align: middle; // letter-spacing: 1px; // text-transform: uppercase; // color: #5c5edc; // } // .menu__breadcrumbs a:last-child { // pointer-events: none; // } // .menu__breadcrumbs a:hover, // .menu__breadcrumbs a:focus { // color: #8182e0; // } // .menu__breadcrumbs a:not(:last-child)::after { // content: '\e902'; // font-family: 'feather'; // display: inline-block; // padding: 0 0.5em; // color: #33353e; // } // .menu__breadcrumbs a:not(:last-child):hover::after, // .menu__breadcrumbs a:not(:last-child):focus::after { // color: #33353e; // } .menu__back { position: absolute; z-index: 100; top: 7rem; left: 1em; margin: 0; cursor: pointer; border: none; background: none; } .menu__back--hidden { pointer-events: none; opacity: 0; } .menu__back:hover, .menu__back:focus { color: #fff; outline: none; } /* Open and close buttons */ .action { position: absolute; display: block; margin: 0; padding: 0; cursor: pointer; border: none; background: none; } .action:focus { outline: none; } .action--open { font-size: 1.5em; display: none; color: var(--dark-green); position: relative; z-index: 1000; } .action--close { font-size: 1.1em; top: 1.25em; right: 1em; display: none; color: #45464e; } .action--open, .action--close { display: block; } .menu { z-index: 1000; top: 0; width: 100%; height: 100vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .menu--open { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /*-------------------------------------------------------------- # Home Page Banner --------------------------------------------------------------*/ .hero { height: auto; } .page-title { margin-bottom: 30px; } .hero-left { max-width: 100%; } .hero-wrapper { height: auto; padding: 0; } .hero-left { margin-bottom: 30px; } .home-about-content { padding: 55px 40px; } .home-steps-wrapper { padding: 50px 40px 30px; } .home-services { padding-top: 50px; } .logo { height: 50px; } .home-about-content { border-radius: 40px 0 0 40px; } .home-about-content h2 { margin-right: 0; margin-bottom: 20px; } /*-------------------------------------------------------------- # Loved Ones --------------------------------------------------------------*/ .loved-ones-content { padding: 30px; } .loved-ones-content h2 { margin: 0 0 30px 0; } .loved-ones-content ul { margin-top: 20px; } /*-------------------------------------------------------------- # Explore our Services --------------------------------------------------------------*/ .explore-our-service h2 { margin-bottom: 30px; } .services { grid-template-columns: repeat(2, 1fr); } .service-card { border-radius: 20px; } .service-card h3 { font-size: 23px; } .services-mbl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px } .services-mbl .service img { border-top-left-radius: 20px; border-top-right-radius: 20px; max-height: 350px; object-fit: cover; } .services-mbl .service { min-height: 485px; display: flex; flex-direction: column; } .service-card { border-radius: 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .service-card h3 { margin-bottom: 35px; } .service-card.text { padding: 30px; flex: 1; } .service-card.text img { width: 30px; } .why-choose { padding: 65px 0; } /*-------------------------------------------------------------- # Why families choose us --------------------------------------------------------------*/ .why-choose-card { padding: 0 10px; } /*-------------------------------------------------------------- # Ongoing Care --------------------------------------------------------------*/ .ongoing { padding: 30px; } .home-steps h2 { margin-bottom: 35px; } .process-wrapper { margin: 30px auto; } .step-count { top: 32px; left: -7vw; } .home-blogs-slider .swiper { max-width: 90%; } .home-blogs { padding: 60px 0; } .home-blogs p { width: 70%; } .testimonial { padding-bottom: 65px; } .testimonial-left { max-width: 100%; gap: 30px; } .testimonial-wrapper>div { margin-left: 0; } .book-appointment { padding-bottom: 65px; } .appointment-form { padding: 50px 40px; } .appointment-form h2, .appointment-form .h2 { margin-bottom: 40px; } .testimonial-wrapper { border-radius: 50px 0 0 50px; padding: 120px 0; } .testimonial-wrapper>div .quote-img { width: 140px; top: -35px; left: -90px; } .home-about-content ul li::before { width: 1.5em; height: 1.5em; } .home-about-content ul li { padding-left: 2.5em; margin-bottom: 10px; } footer { border-radius: 40px 40px 0 0; } footer .certifications { justify-content: start } .menu__item--btns .btn { width: 50%; } /*-------------------------------------------------------------- # Disable aos animation delay on mobile devices --------------------------------------------------------------*/ [data-aos-delay] { transition-delay: 0 !important; } [data-aos] { opacity: 1 !important; transform: none !important; } } @media (min-width: 1200px) { .mw-xl-50 { max-width: 50% !important; } } @media (max-width: 991.98px) {} @media (min-width: 767.98px) and (max-width: 991.98px) {} @media (max-width: 768px) { :root { --text-lg: 14px; --text-4xl: 18px; --text-6xl: 25px; --text-7xl: 35px; --text-18xl: 60px; --text-20xl: 80px; } .common-padding-left-right { padding-left: 15px; padding-right: 15px; } .logo img { width: 100px; } .services { grid-template-columns: 1fr; } .logo { height: 40px; } .hero { padding-top: 40px; } .hero-left>div { position: relative; inset: unset; } .hero-left { margin-bottom: 20px; } .home-about-content { border-radius: 0px 0 30px 30px; } .home-about-content { padding: 40px 30px; } video { height: 100%; } .home-services { padding-top: 40px; } .why-choose { padding: 40px 0; } .home-services h2 { margin-bottom: 25px; } .services-mbl { grid-template-columns: 1fr; } .services-mbl .service { min-height: 380px; } .services-mbl .service img { max-height: 260px; } .service { margin-bottom: 10px; } .why-choose h2 { margin-bottom: 25px; } .talk-card-care { padding: 30px; border-radius: 20px; } .talk-card-care h3 { margin-bottom: 20px; text-align: center; } .process-wrapper { position: relative; width: 85%; margin: auto; } .step { padding: 10px 0 40px 50px; } .home-steps-wrapper { border-radius: 30px; } .step-count { font-size: 12px; top: 14px; left: -30px; } .home-about-content h2 { margin-right: 0; } .home-steps-wrapper { padding: 50px 30px; } .home-steps .your-journey { padding-bottom: 30px; } .home-blogs p { width: 100%; } .home-blogs { padding: 40px 0; } .home-blogs-slider .swiper { max-width: 80%; } .home-blogs-slider-wrapper h2 { margin-bottom: 10px; } .home-blogs-slider { margin-top: 30px; } .home-blogs-slider .swiper-slide { border-radius: 30px; } .home-blogs-slider .swiper-slide.podcast { border-radius: 50%; } .home-blogs-slider .reource-content { padding: 25px; } .testimonial-wrapper { padding: 0; background: none; } .testimonial-slider { margin-top: 30px; } .testimonial-wrapper>div .quote-img { display: none; } .testimonial { padding-bottom: 40px; } .testimonial-card { padding: 20px; gap: 15px; border-radius: 20px; } .book-appointment-wrapper { border-radius: 0px 0 30px 30px; } .appointment-form { padding: 50px 30px; } .appointment-form h2 { margin-bottom: 25px; } .appointment-form .form-group { margin-bottom: 20px; } footer { border-radius: 30px 30px 0 0; padding: 50px 30px 0; } .footer-wrapper { padding: 0; } footer h6 { margin-bottom: 8px; } footer .social-icons { width: 100%; justify-content: center; } footer .certifications { gap: 30px; justify-content: start; } .book-appointment { padding-bottom: 40px; } main { padding: 0 15px; } .yellow-box img { width: 60px; height: 60px; } .why-choose-card { margin-bottom: 30px; } .home-blogs-slider .swiper { max-width: 88%; } .home-blogs-slider .swiper-button-prev { left: 0; } .home-blogs-slider .swiper-button-next { right: 0; } .certifications img { width: 80px; } .loader .logo { height: 80px; } .menu__item--btns .btn { width: 100%; } } @media (max-width: 575.98px) { :root { --text-20xl: 50px; --text-7xl: 30px; } .home-about-content { padding: 40px 10px; } .home-steps-wrapper { padding: 40px 10px; } .appointment-form { padding: 40px 10px; } .page-title { margin-bottom: 20px; } .hero-left { margin-bottom: 30px; } .service-card.text { padding: 30px 20px; } .process-wrapper { width: 92%; margin-left: auto; margin-right: 0; } .testimonial-wrapper>div .quote-img { top: -25px; left: 0; } footer { padding: 50px 10px 0; } }