/* Theme Name: Dr Ross Calopedos Theme URI: # Author: Sk Version: 1.0 */ *{margin:0px; padding:0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html{ width:100%; height:100%; margin:0px; padding:0px;scroll-behavior: smooth; overflow-x:hidden; } body{ margin:0px; padding:0px;background:#fff; font-family:var(--bodyfont); } p{ margin:0px; padding:0px; } address, blockquote, dd, div, dl, dt, fieldset, form, frame, frameset{ margin:0; padding:0; border: 0px; outline: none; } label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0px; padding:0; outline:none; border:0;} a{ text-decoration:none; border: 0px; outline: none; transition:all .5s} a:hover, a:focus, a:active{ transition:all .5s } a img{ border:none; outline: none;} a:focus {outline:none; } border{ border-collapse:collapse;} hr{ height:1px; background:#333333; border:none;} img { max-width: 100%; height: auto;} strong{font-weight:bold;} button,input,select,option,textarea {outline: 0 !important;pointer-events:all;font-family:inherit;font-size:100%;} ::-moz-selection { color: #fff; background:var(--seconday-color);} ::selection { color: #fff; background: var(--seconday-color);} @font-face { font-family: 'Helvetica Neue'; src: url('assets/fonts/HelveticaNeue-Bold.eot'); src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), url('assets/fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'), url('assets/fonts/HelveticaNeue-Bold.woff2') format('woff2'), url('assets/fonts/HelveticaNeue-Bold.woff') format('woff'), url('assets/fonts/HelveticaNeue-Bold.ttf') format('truetype'), url('assets/fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue'; src: url('assets/fonts/HelveticaNeue-Black.eot'); src: local('Helvetica Neue Black'), local('HelveticaNeue-Black'), url('assets/fonts/HelveticaNeue-Black.eot?#iefix') format('embedded-opentype'), url('assets/fonts/HelveticaNeue-Black.woff2') format('woff2'), url('assets/fonts/HelveticaNeue-Black.woff') format('woff'), url('assets/fonts/HelveticaNeue-Black.ttf') format('truetype'), url('assets/fonts/HelveticaNeue-Black.svg#HelveticaNeue-Black') format('svg'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue'; src: url('assets/fonts/HelveticaNeue-Heavy.eot'); src: local('Helvetica Neue Heavy'), local('HelveticaNeue-Heavy'), url('assets/fonts/HelveticaNeue-Heavy.eot?#iefix') format('embedded-opentype'), url('assets/fonts/HelveticaNeue-Heavy.woff2') format('woff2'), url('assets/fonts/HelveticaNeue-Heavy.woff') format('woff'), url('assets/fonts/HelveticaNeue-Heavy.ttf') format('truetype'), url('assets/fonts/HelveticaNeue-Heavy.svg#HelveticaNeue-Heavy') format('svg'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue'; src: url('assets/fonts/HelveticaNeue-Light.eot'); src: local('Helvetica Neue Light'), local('HelveticaNeue-Light'), url('assets/fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'), url('assets/fonts/HelveticaNeue-Light.woff2') format('woff2'), url('assets/fonts/HelveticaNeue-Light.woff') format('woff'), url('assets/fonts/HelveticaNeue-Light.ttf') format('truetype'), url('assets/fonts/HelveticaNeue-Light.svg#HelveticaNeue-Light') format('svg'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue'; src: url('assets/fonts/HelveticaNeue-Medium.eot'); src: local('Helvetica Neue Medium'), local('HelveticaNeue-Medium'), url('assets/fonts/HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'), url('assets/fonts/HelveticaNeue-Medium.woff2') format('woff2'), url('assets/fonts/HelveticaNeue-Medium.woff') format('woff'), url('assets/fonts/HelveticaNeue-Medium.ttf') format('truetype'), url('assets/fonts/HelveticaNeue-Medium.svg#HelveticaNeue-Medium') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue'; src: url('assets/fonts/HelveticaNeue-Roman.eot'); src: local('Helvetica Neue Roman'), local('HelveticaNeue-Roman'), url('assets/fonts/HelveticaNeue-Roman.eot?#iefix') format('embedded-opentype'), url('assets/fonts/HelveticaNeue-Roman.woff2') format('woff2'), url('assets/fonts/HelveticaNeue-Roman.woff') format('woff'), url('assets/fonts/HelveticaNeue-Roman.ttf') format('truetype'), url('assets/fonts/HelveticaNeue-Roman.svg#HelveticaNeue-Roman') format('svg'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue'; src: url('assets/fonts/HelveticaNeue-Thin.eot'); src: local('Helvetica Neue Thin'), local('HelveticaNeue-Thin'), url('assets/fonts/HelveticaNeue-Thin.eot?#iefix') format('embedded-opentype'), url('assets/fonts/HelveticaNeue-Thin.woff2') format('woff2'), url('assets/fonts/HelveticaNeue-Thin.woff') format('woff'), url('assets/fonts/HelveticaNeue-Thin.ttf') format('truetype'), url('assets/fonts/HelveticaNeue-Thin.svg#HelveticaNeue-Thin') format('svg'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue'; src: url('assets/fonts/HelveticaNeue-UltraLight.eot'); src: local('Helvetica Neue Ultra Light'), local('HelveticaNeue-UltraLight'), url('assets/fonts/HelveticaNeue-UltraLight.eot?#iefix') format('embedded-opentype'), url('assets/fonts/HelveticaNeue-UltraLight.woff2') format('woff2'), url('assets/fonts/HelveticaNeue-UltraLight.woff') format('woff'), url('assets/fonts/HelveticaNeue-UltraLight.ttf') format('truetype'), url('assets/fonts/HelveticaNeue-UltraLight.svg#HelveticaNeue-UltraLight') format('svg'); font-weight: 200; font-style: normal; font-display: swap; } /*variables--*/ :root{ --bodyfont: "Helvetica Neue", sans-serif; --headfont: "Helvetica Neue", sans-serif; --fs-100:100px; --fs-72:72px; --fs-60:60px; --fs-65:65px; --fs-50:50px; --fs-48:48px; --fs-46:46px; --fs-45:45px; --fs-42:42px; --fs-40:40px; --fs-38:38px; --fs-36:36px; --fs-32:32px; --fs-30:30px; --fs-26:26px; --fs-24:24px; --fs-23:23px; --fs-22:22px; --fs-21:21px; --fs-20:20px; --fs-18:18px; --fs-17:17px; --fs-16:16px; --fs-14:14px; /* Brand palette — navy + green identity. --seconday-color is the single action green (buttons, links, accents on light backgrounds): white text on it passes WCAG AA (4.59:1). --brand-sage is the light tint — hover states and accents on dark backgrounds only; never under white text. */ --main-clr:#002b4f; --seconday-color:#4a815a; --green-dark:#3d6b4a; --brand-sage:#95b592; --body-font-color:#002b4f; --black-color:#000000; --white-color:#fff; --light-font-clr:#64686c; --green-bg:#4a815a; --light-bg:#f0f2f3; --light-green-bg:#95b592; } body{ font-family:var(--bodyfont); font-size:var(--fs-17); } h1{ margin: 0px; padding: 0px;font-family:var(--headfont);font-weight:500; font-size:var(--fs-48); color: var(--main-clr); padding:0 0 30px 0 } h2{ margin: 0px; padding: 0px;font-family:var(--headfont);font-weight:700; font-size: var(--fs-48); line-height: 1.3; padding: 0 0 20px 0; color: var(--main-clr);} h3{ margin: 0px; padding: 0px;font-family:var(--headfont);font-weight:600; font-size:var(--fs-36); color: var(--main-clr); padding:0 0 25px 0 } h4{ margin: 0px; padding: 0px;font-family:var(--headfont);font-weight:600; font-size: var(--fs-24);color: var(--main-clr);} h5{ margin: 0px; padding: 0px;font-family:var(--headfont);font-weight:500; font-size:var(--fs-21); } h6{ margin: 0px; padding: 0px;font-family:var(--bodyfont);font-weight:300; font-size:var(--fs-24); color:rgba(0,43,79,0.7); letter-spacing: 0px; padding: 0 0 25px 0} h2 strong{ font-weight:600 } p{ color:var(--body-font-color); font-size:var(--fs-18); line-height:1.5; font-weight: 300 ; padding: 0 0 30px 0; text-align: left;} .btncn{ position:relative; display: inline-block; padding:16px 40px 16px; font-size: var(--fs-16);font-weight:500; margin:20px 0 20px 0; font-family:var(--bodyfont); border-radius: 23px; text-transform:uppercase; line-height: 1} .btncn i{ margin:0 10px 0 0 } .btncn:hover{ background:var(--green-dark); } .btncn:focus-visible{ outline:2px solid var(--main-clr); outline-offset:2px; } .btncn-default{ background: var(--seconday-color); color: var(--white-color); } .btncn-default:hover{color: var(--white-color); background: var(--main-clr);} .btncn-secondary{ background: #64686c; color: #fff} .btncn-secondary:hover{ background:var(--main-clr); } .btncn-light{ font-weight:400 ; background: #fff; color: var(--main-clr);} .btncn-light:hover{ background:var(--main-clr);color:#fff } .btncn-dark{ font-weight:500 ; background: var(--main-clr); color: #fff;} .btncn-dark:hover{ background:var(--seconday-color);color:#fff } .btncn-black{ font-weight:500 ; background: var(--black-color); color: #fff; display: inline-flex; align-items: center; gap: 15px} .btncn-black:hover{ background:var(--seconday-color);color:#fff } .btncn-acent{ font-weight:500 ; background: #eff0f0; color: var(--black-color); display: inline-flex; align-items: center; gap: 15px} .btncn-acent:hover{ background:var(--seconday-color);color:#fff } .btncn-white{ font-weight:400 ; background: #fff; color: var(--main-clr); border: 1px solid #eeeeee;} .btncn-white:hover{ background:var(--main-clr); color:#fff } .btncn-border{font-weight:400 ; background: transparent; color: var(--white-color); border: 1px solid var(--brand-sage); line-height: 1.4;} .btncn-border:hover{background: var(--white-color); color: var(--main-clr);} .quiz-contact-btn-cta{ background: var(--seconday-color) !important; color: var(--white-color) !important; } .quiz-contact-btn-cta:hover{color: var(--white-color) !important; background: var(--main-clr) !important;} .main-clr-bg{background-color: var(--main-clr);} .secondary-bg{background-color: var(--seconday-color);} .duel-bg{background:linear-gradient(to bottom, var(--main-clr) 63%, transparent 63%);} .duel-bg-dark{background-image:linear-gradient(to bottom, transparent 50%, #29272a 50%);} .duel-bg-dark2{background-image:linear-gradient(to top, transparent 50%, #29272a 50%);} .duel-bg-light{background-image:linear-gradient(to bottom, #f6f4f7 50%, transparent 50%);} .dark-bg{background-color:var(--main-clr);} .text-main-clr *{color: var(--color2);} .text-white *{color:#fff} .light-bg{background-color:#e4e7eb} section{ padding:90px 0 } .g-5, .gx-5 { --bs-gutter-x: 5rem;} .hoverImage{position:relative; } .hoverImage img{ width:100%; border-radius: 20px; } .hoverImage:after{ content:''; position:absolute; width:100%; height:100%; top:0; left:0; background: linear-gradient(45deg, var(--brand-sage) 0%, transparent 100%); opacity:0; transition:all .5s } .hoverImage:hover:after{ opacity:1; transition:all .5s } .desktop{ display:block; } .mobile{ display:none; } .small-h2 h2{font-size: var(--fs-36);} @media (min-width: 1700px) { .container { max-width: 1380px; } } @media (min-width: 1200px) { } /*Header*/ .headerTop{ background:var(--black-color); padding:15px 0; } .header-top-content{ display:flex; align-items:center; justify-content:space-between; padding:0 70px; } .headert-top-left, .headert-top-right{ display:flex; gap:50px; align-items:center; } .header-inline-icon-box{ color:#fff; font-weight:300 } .header-inline-icon-box i{ color:var(--brand-sage); margin:0 8px 0 0 } .header-inline-icon-box a{ color:var(--white-color);} .header-inline-icon-box a:hover{ color:var(--brand-sage); } .header-inline-icon-box strong{ font-weight:600 } .header{position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;background: var(--main-clr);} .headerMian{transition:all .5s;left: 0;width: 100%;background:transparent;display: flex;justify-content: center;align-items: center;position:relative;flex-direction: column;gap: 12px;padding-top: 20px;} .logo{width: 250px;transition:all .5s;z-index: 999} .headerHolder{display:flex;align-items:center;justify-content:flex-start;gap:0;width: 100%;padding:0;} /* Nav fills the space left of the utility cluster and centres its links, so they sit under the stacked logo with the phone + Book grouped at the right edge — no empty navy void in the middle. */ .header-phone-numbers{display:flex;align-items:center;gap: 30px;flex-shrink:0;margin:0 30px 0 0;} .header-ph-num{ font-size:var(--fs-14); font-weight:300; color:var(--white-color); flex-shrink:0; text-transform:uppercase; } .header-ph-num a{ display:block; font-size:var(--fs-20); font-weight:700; color:#fff; white-space:nowrap; } .header-ph-num a:hover{ color:var(--brand-sage); } .navigation{ flex:1; padding-left:40px; } .navigation ul li a{ z-index: 999; position:relative; } .navigation nav ul{ display:flex; margin:0; padding:0; list-style:none; gap:0; align-items:center; justify-content:center; } .navigation nav ul li a{ font-family:var(--bodyfont); font-weight:300 ; color:var(--white-color); font-size: var(--fs-18); position: relative; padding: 0 20px; white-space:nowrap;} .navigation nav ul li a:hover{ color:var(--brand-sage); } .headerRight{ position: relative; z-index: 999 } .navigation nav>ul>li>a{ line-height:90px; display: block; } .navigation nav ul li.special-headet-btn a{ line-height:47px; padding:0 48px; border:1px solid #fff; } .fixed .navigation nav ul li.special-headet-btn a{ line-height:47px; } ul.dropdown-menu-holder{flex-wrap:wrap;gap: 30px 0!important;width: 100%;border: none; max-width: 1620px;} ul.dropdown-menu-holder li { width:31%; } ul.dropdown-menu-holder li ul{ display:block; } .section-parent-menu{ width:100%; position:relative; } .section-parent-menu{ margin:0 -10px } /*@media only screen and (min-width:1199px){ .fixed{position: fixed;width:100%;left:0;top:0;z-index:999;background:rgba(0,43,79,0.96);transition:all .5s;box-shadow:0 4px 4px rgba(0,0,0,0.1);backdrop-filter:blur(10px);} .fixed{flex-direction:row;align-items:center;gap:20px;padding-top:0;padding-left:30px;} .fixed .headerHolder{ transition:all .5s; padding:0; width:auto; flex:1; justify-content:flex-end; } .fixed .logo{ width:170px; flex-shrink:0; transition:all .5s } .fixed .header-phone-numbers{ display:none; } .fixed .navigation{ flex:0 1 auto; padding-left:0; } .navigation nav>ul>li>a{ line-height: 110px; display: block; } .fixed .navigation nav>ul>li>a{ line-height:70px; font-size:14px; padding:0 10px; } .fixed .book-online a{ padding:0 24px; } }*/ .language{ margin:0 15px 0 45px } .language a{ display:block; width:41px; height:41px; background:var(--main-clr); border-radius:50%; display:flex; align-items:center; justify-content:center; padding:9px; } .social-icn a{ display:block; width:41px; height:41px; background:var(--main-clr); border-radius:50%; display:flex; align-items:center; justify-content:center; padding:9px; color:#fff; } .contact-icn a{ display:flex; align-items:center; gap:10px ; font-family:var(--bodyfont); font-size:var(--fs-21); font-weight:300; color: var(--black-color);} .contact-icn a i{ font-size:30px ; color: #46d650} .contact-icn a:hover{ color:var(--seconday-color); } .book-online{flex-shrink:0;align-self: stretch;} .book-online a{ color:var(--white-color); font-weight:500 ; background:var(--seconday-color) ; height: 100%; display: inline-flex; justify-content: center; align-items: center; padding:0 45px ; text-transform: uppercase; letter-spacing: 0.5px; font-size: var(--fs-18);} .book-online a:hover{ background:var(--main-clr); color:var(--white-color); } @media only screen and (min-width:1199px){ .headerMian a{pointer-events: none; } .headerMian:hover a{pointer-events:all;} ul.dropdown-menu-holder li a{ font-size:var(--fs-24) !important; font-weight:300!important; margin:0 0 15px 0; display:block; } ul.dropdown-menu-holder li ul li a{ font-size: 16px !important; padding:5px 0; display:block; font-weight:300 !important; margin:0 } ul.dropdown-menu-holder li ul li{ width:100% } li.normal-menu {position: relative;} li.normal-menu ul {position: absolute;top: 100%;left: 0;flex-direction: column;min-width: 250px;background: var(--white-color);gap: 0; padding:8px 0; border:0; border-radius:0 0 14px 14px; box-shadow:0 18px 40px rgba(0,43,79,.18); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .28s ease, transform .28s ease, visibility .28s ease; overflow:hidden;} li.normal-menu ul li{ width:100% } li.normal-menu ul::before{position: absolute;top: 0%;left: 0;transform:translateY(-100%);content:'';background: transparent;width:100%;height:14px} li.normal-menu:hover ul{ visibility:visible; opacity:1 ; transform:translateY(0); } li.normal-menu ul a {padding: 11px 24px !important;display: block; font-size: var(--fs-16) !important; color: var(--main-clr) !important;} li.normal-menu ul a:hover{ color:var(--seconday-color) !important; } } .mean-container .mean-nav ul li li li a{ padding: 0.5em 15% !important; } .headerRight{ display:flex; align-items:center; gap:60px } .phoneNumber a{ font-weight:600 ; font-size:var(--fs-18); color:var(--color2); font-family:var(--bodyfont); } .phoneNumber a:hover{ color:var(--seconday-color); } .phoneNumber a span{margin-left:10px } .bookAppointment a{padding:15px 25px;display:block;background: var(--main-clr);color:#fff;position:relative;margin: 0 0 0 50px;font-size: var(--fs-18);letter-spacing: 0.05em;transition:all .5s; font-weight: 400;font-family:var(--headfont); text-align: center;} .bookAppointment a i{display:none;} .bookAppointment a:hover{background:rgba(243, 237, 228, 1.0); color: var(--body-font-color);} .banner{ background: #000; padding: 0 0 0 0; position: relative; line-height: 1} .slick-slide> div{ line-height:0 } .sliderInner{ position:relative; background:#000; overflow:hidden; } .sliderImage{ width:100%; background:var(--main-clr);position:relative;} .sliderImage:after{ } .sliderImage img{ width:100%; height:100%; object-fit:cover;opacity:1.0; display:block; } .sliderContent{ position:absolute; top:55%; transform:translateY(-50%); left:0; width:100% } .sliderContent h3{ font-size:var(--fs-30); font-weight:400; color:var(--white-color) ; padding:0 0 20px 0;font-family:var(--bodyfont); } .sliderContent h3 strong,.sliderContent h1 strong{ font-weight:600 } .sliderContent h1{ color:var(--white-color) ; font-size:var(--fs-100); font-weight: 700; padding: 0 0 20px 0; font-family: var(--bodyfont); } .innerBanner h1{ color:var(--white-color); font-size:var(--fs-100); } .innerBanner .sliderContent h1{ text-transform:inherit; font-weight:700 ; font-size: var(--fs-72); padding: 0 0 20px 0; line-height: 1.3} .innerBanner .sliderContent p{ text-align:left; } .sliderContent p{ color:var(--white-color); font-size:var(--fs-16); padding:0 0 20px 0; font-weight:300; font-family:var(--bodyfont); text-align:left; } .bannerButtonGroup{ display:flex; gap:12px; margin:0 0 15px 0 } .bannerButtonGroup a.bookBtn{ background:var(--seconday-color); color:var(--white-color); } .bannerButtonGroup a.bookBtn:hover{ background:var(--main-clr); color:#fff } .slider-content-inner{ max-width:690px; margin:0 auto; text-align:center; } .slider-item-inner{ position:relative; } .banner-holder{padding:0;margin-top: 100px;} /* At narrower desktops the 75px hero heading makes the caption taller than the banner image and it climbs under the fixed header — scale it down. */ @media only screen and (min-width:1200px) and (max-width:1600px){ .banner-holder .sliderContent h1{ font-size:58px; } .banner-holder .sliderContent h3{ font-size:24px; } .banner-holder .sliderContent{ top:calc(55% + 28px); } } .banner-holder p{ color: var(--white-color); font-size: var(--fs-20); font-weight: 400;} .banner .slick-dots{ position:absolute; bottom:0 ; bottom: 180px; width: 100%; display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; gap: 10px} .banner .slick-dots li button{ text-indent:-999em; width:15px; height:15px; border:1px solid #fff; border-radius:50% } .banner .slick-dots li.slick-active button{ background:transparent; } .btncn-transparent{ background:rgba(255, 255, 255, 0.2); color: #fff} .btncn-transparent:hover{ background:var(--seconday-color); color:var(--white-color); } .welcomeContent p{ text-align:justify; text-align-last: center; } .welcomeContent h1, .blogSection h1{ color:var(--seconday-color); font-size:14px; font-weight:400; text-transform:uppercase; letter-spacing:2px; } .welcomeContent h2{ font-weight:300 } .welcomeContent h2 strong{ font-weight:600 } .qualitySection h2{ padding:0 0 25px 0 } .qualitySection h6{ padding:0 0 30px 0;opacity:0.7;font-weight:300;} .qualitySection p{ text-align: center; padding: 0 44px 30px;} .qualitySectionSlider{ width:100%; margin:0 auto; } .qualitySectionSlider .slick-slide { margin: 0 40px; } .qualitySectionSlider .slick-list { margin: 0 -40px; } .qualitySectionSlider .slick-prev{ position:absolute; top:50%; transform:translateY(-50%); left:-50px; font-size:30px; border:none; outline:none; background:transparent; color:#fff } .qualitySectionSlider .slick-next{ position:absolute; top:50%; transform:translateY(-50%); right:-50px; font-size:30px; border:none; outline:none; background:transparent; color:#fff } .qualitySectionSlider .slick-prev:hover, .qualitySectionSlider .slick-next:hover{ color:var(--brand-sage); } .qualitySectionSlider .slick-center{ transform:scale(1.3); transition:all .5s; transition-delay:0.5s } .qualitySectionSlider .slick-track{ padding:60px 0; overflow:visible; } .sp-hover .btncn-default:hover{ background:transparent; border-color:var(--seconday-color); } .qualityImage{ position:relative; } .qualityContent{ position:absolute; padding:0 40px; width:100%; left:0; bottom:30px; z-index:2 } .qualityContent h3{ color:#fff; padding:0; transition:all .5s;font-weight:300 } .qualityImage img{ width:100% } .qualityLg{ display:flex; justify-content:space-between; gap:20px; margin:55px 0 0 0 } .serviceSlider .slick-slide { margin: 0 10px; } .serviceSlider .slick-list { margin: 0 -10px; } .serviceSlider .slick-prev{position:absolute; top:50%; transform: translateY(-50%); left:-35px; border:none; font-size:20px; transition:all .5s; color: var(--body-font-color); background:transparent; } .serviceSlider .slick-next{ position:absolute; top:50%; transform: translateY(-50%); right:-35px; border:none; font-size:20px; transition:all .5s; color: var(--body-font-color); background:transparent;} .serviceSlider .slick-next:hover, .serviceSlider .slick-prev:hover{ color:var(--seconday-color); } .serviceItem h3{ text-align:left; padding:20px 0; font-weight:300; font-size:var(--fs-24); color:var(--black-color); } .serviceItem{ position:relative; } .serviceItem h3{ position:absolute; bottom:0; left:50% ; transform: translateX(-50%) ; font-weight: 300; font-size: var(--fs-24); color:var(--black-color); background: #fff; padding: 14px 20px; width: calc( 100% - 60px ); text-align: center;} .serviceSlider { padding:0 0 20px 0 } .icon-box{ text-align:center; position: relative; padding: 0 40px; height: 100%} .icon-box:after{ content:''; position:absolute; right:0; top:0; height:100%; background:var(--brand-sage); width:1px; } .icon-box-last:after{ display:none; } .icon-box p{ text-align:center; padding:0 } .icon-box p strong{ font-weight:600; } .icon-box-image{ height:68px; margin:0 0 25px 0 } .full-video-section video{ width:100%; height:auto } @media only screen and (max-width:1199px){ .qualitySectionSlider .slick-slide { margin: 0 25px; } .qualitySectionSlider .slick-list { margin: 0 -25px; } .qualitySectionSlider .slick-track{ padding:40px 0 } } @media only screen and (max-width:767px){ .qualitySectionSlider .slick-center{ transform:scale(1.0); transition:all .5s; } .qualitySectionSlider{ margin:0 auto; width:75% } .qualitySectionSlider .slick-track{ padding:10px 0 } .qualitySectionSlider .slick-prev{ left:-40px } .qualitySectionSlider .slick-next{ right:-40px } } /*.contentSection h1{ font-size:var(--fs-72); } .contentSection h2{ font-size:var(--fs-72); }*/ .featured-about.contentSection h1,.featured-about.contentSection h2{font-size:var(--fs-48);} .contentSection h5{ font-weight:400; font-size:var(--fs-24); color:rgba(255,255,255,0.7); padding:0 0 25px 0 } .innerIntro h1{ font-family: var(--bodyfont); font-weight: 300; font-size: var(--fs-24); color: rgba(0, 43, 79, 0.7); letter-spacing: 0px; padding: 0 0 25px 0; } /* Section subheads were blending into body copy (About feedback): short green keyline under intro-section H2s. */ .innerIntro h2{ position:relative; padding-bottom:16px; margin-bottom:14px; } .innerIntro h2:after{ content:''; position:absolute; left:0; bottom:0; width:56px; height:3px; background:var(--green-bg); border-radius:2px; } .innerIntro .text-center h2:after{ left:50%; transform:translateX(-50%); } .ratingSection{ padding:10px 0 0 0 } .ratingSection h4{ font-size:var(--fs-14); padding:0 0 5px 0; font-weight:300; text-transform:uppercase; } .number{ font-size:var(--fs-36); font-weight:300;font-family:var(--bodyfont);display: table; margin-left: auto; margin-right: auto;margin-bottom:10px;position:relative;z-index:2;padding:0 15px } .draw-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible;opacity:0} .draw-svg.active{ opacity:1} .draw-svg .svg-path {stroke: var(--brand-sage); stroke-width: 4px;stroke-linecap:round;} .contentSection2 .contentImage{display: flex;justify-content: flex-end;} .contentTop{position:relative;z-index:2} .bg-logo{position:absolute;top: -160px;right:0;z-index:-1} .contentTop ul{ margin:0; padding:25px 0 0 0; list-style:none; } .contentTop ul li{ font-weight:300 ; font-size:var(--fs-18); } .contentTop ul li a{ color:#161617; padding: 15px 0; display: block; border-bottom: 1px solid #c1c6d4; position: relative;} .contentTop ul li a:after{ content:''; position:absolute; width:0%; height:1px; background:#c1c6d4; bottom:-1px; left:0 ; transition: all .5s;} .contentTop ul li a:hover:after{width:100%; background: var(--seconday-color); transition: all .5s;} .contentTop ul li a:before{ content:'\f061' ; font-family: 'FontAwesome'; position:absolute; right:0; top:13px; color:#161617;} .contentTop ul li a:hover{ color:var(--seconday-color); } .contentTop ul li a:hover:before{ color:var(--seconday-color); } .dark-bg .contentTop ul li{color:#fff; margin: 0 0 10px 0 !important;} .dark-bg .contentTop ul li:after{color:#fff;} .dark-bg .contentTop ul li strong{font-weight: 500;} .dark-bg .contentTop p strong{font-weight: 500;} .dark-bg .contentTop ul{padding: 0px 40px 20px;} .dark-bg p a{color:var(--brand-sage) !important; text-decoration:underline; text-underline-offset:3px;} .dark-bg p a:hover{color:var(--white-color) !important;} .contentTop ul{ margin:0; padding: 10px 40px; list-style:none; } .contentTop ul li{ margin:0 0 15px 0; font-size:var(--fs-18); font-weight:300; color:var(--body-font-color); padding:0 0 0 30px; position:relative; } .contentTop ul li:after{ content: "\f00c"; font-family: 'FontAwesome'; position:absolute; left:0; top:0; color: var(--body-font-color);} .contentItemInner{display:flex;background: var(--seconday-color);justify-content: space-between;} .contentSliderImage{width: 47%;} .contentSliderImage img{width: 100%;height:100%;object-fit:cover;} .contentSliderContent{width: 53%;padding: 65px 80px;align-self: center} .contentSliderContent h2{ color:#fff; padding:0 0 30px 0 } .contentSliderContent p{ color:#fff; text-align:justify; padding:0 0 20px 0 } .contentSliderContent h6 {color: #fff; font-size: 100%; padding-bottom: 25px; } .contentSliderSection .slick-prev{left: 42%;bottom: 130px;position:absolute;z-index:1;color: #fff;font-size: 24px;border: none;background: transparent;opacity: 0.3;} .contentSliderSection .slick-next{left: calc(42% + 45px);bottom: 130px;position:absolute;z-index:1;background: transparent;color: #fff;font-size: 24px;border: none;opacity: 0.3;} .contentSliderSection .slick-prev:hover,.contentSliderSection .slick-next:hover{opacity: 1} .section-heading{ padding:25px 0 } .buttonGroup { display:flex; gap:15px; align-items: center; margin: 0 0 0 0} .buttonGroup.text-center{ justify-content:center; } .contentSlider h2{ font-size:var(--fs-36); } .contentSlider .slick-prev{ position:absolute; top:20px; left:inherit; right: 50px; background:#f6f0e5; border:none; font-size:20px; transition:all .5s; width: 43px; height: 59px; display: flex; align-items: center; justify-content: center; color: #000; z-index:2 } .contentSlider .slick-next{ position:absolute; top:20px; right:-1px; background:#f6f0e5; border:none; font-size:20px; transition:all .5s; width: 43px; height: 59px; display: flex; align-items: center; justify-content: center; color: #000; z-index:2} .contentSlider .slick-next:hover, .contentSlider .slick-prev:hover{ background:var(--main-clr); } .section-heading h2{ font-size:var(--fs-42); } .teamSlider .slick-slide { margin: 0 8px; } .teamSlider .slick-list { margin: 0 -8px; } .team-slider{ text-align:center; } .team-slider h3{ font-size:var(--fs-24); font-weight:300; text-align:center; padding:20px 0; } .team-slider h3 span{ display:block; color:var(--main-clr); font-size:var(--fs-14); font-family:var(--bodyfont); color:var(--main-clr); font-weight:300; text-transform:uppercase; padding-top:15px; letter-spacing:2px; } .teamSlider ul.slick-dots{ margin:0; padding:0; list-style:none; display:flex; } .teamSlider ul.slick-dots li{ width:100% ; flex-grow: 1} .teamSlider ul.slick-dots li button{ text-indent:-999em; width:100%; height:1px; background:#e8e8ea; border:none; } .teamSlider ul.slick-dots li.slick-active button{ background:var(--black-color); } .exparties-header{ display:flex; justify-content:space-between; align-items:flex-end; margin:0 0 45px 0 } .exparties-heading h2{ padding-bottom:0 } .exparties-buttons .btncn { margin:0 } .exparties-heading h1{ color:var(--seconday-color); font-size:var(--fs-14); text-transform:uppercase; font-weight:300; padding:0 0 15px 0; letter-spacing:1px } .exparties-icon-box{ display:flex; align-items:center; gap:15px ; border:1px solid #e8e8e8; padding:15px 25px; transition:all .5s } .exparties-icon-box:hover{ border-color:var(--seconday-color); transition:all .5s } .exparties-icon{ width:60px; flex-shrink:0 } .exparties-content p{ padding:0 ; text-align: left; font-size: var(--fs-18);} .team-member-con{ text-align:center; } .team-member-con:hover .team-member-image{ box-shadow: 3.5px 6.062px 16.38px 1.62px rgba(39, 39, 39, 0.067); transition: all .5s} .team-member-image{ border:1px solid var(--seconday-color); transition: all .5s } .team-member-details{ padding:25px 0 } .team-member-details h4{ font-weight:500; font-size:var(--fs-24); padding:0 0 12px 0 } .team-member-details h6{ font-size:var(--fs-16); letter-spacing:inherit; padding-bottom:0 } .team-member-image{ position:relative; } .badge{ position:absolute; top:10px; right:10px; } .teamHolder{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media only screen and (min-width:767px){ .homeTeamSlider{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media only screen and (min-width:991px){ .homeTeamSlider{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } } .homeTeamSlider .slick-prev{ position:absolute; top:40%; transform: translateY(-50%); left:-45px; background:#f5f1ed; border:none; font-size:20px; transition:all .5s; display: flex; align-items: center; justify-content: center; color: #000; z-index:2; border-radius:50%; width:40px; height:40px; display:flex; justify-content:center; align-items:center; } .homeTeamSlider .slick-next{ position:absolute; top:40%; transform: translateY(-50%); right:-45px; background:#f5f1ed; border:none; font-size:20px; transition:all .5s; display: flex; align-items: center; justify-content: center; color: #000; z-index:2; border-radius:50%; width:40px; height:40px; display:flex; justify-content:center; align-items:center;} .homeTeamSlider .slick-prev:hover, .homeTeamSlider .slick-next:hover{ background:var(--seconday-color); color:#fff } .homeTeamSlider .slick-list{ overflow:visible; } .homeTeamSlider .slick-slide { margin: 0 10px; } .homeTeamSlider .slick-list { margin: 0 -10px; } .homeTeamSlider .slick-slide{ opacity:0.5 } .homeTeamSlider .slick-slide.slick-active{ opacity:1.0 } .home-contact-section{ background:url(assets/images/home-contact-bg.jpg) no-repeat; background-size:cover; padding: 0; background-attachment: fixed;} .home-contact-form-holder{ background:rgba(0,0,0,0.8); padding:80px; } /*.teamSlider .slick-slide { margin: 0 70px; } .teamSlider .slick-list { margin: 0 -70px; } .team-image{ width:340px; height:340px; display:flex; justify-content:center; align-items:center; margin:0 auto; } .team-image img{ width:300px; height:300px; border-radius:50%; outline:1px solid var(--main-clr); outline-offset:10px; align-items:center; justify-content:center; } .team-slider h3{ font-size:var(--fs-32); font-weight:300; text-align:center; padding:20px 0 } .team-slider h3 span{ display:block; color:var(--main-clr); font-size:var(--fs-18); font-family:var(--bodyfont); color:var(--main-clr); font-weight:300; text-transform:uppercase; padding-top:15px; } .teamSlider .slick-prev{ position:absolute; top:40%; transform: translateY(-50%); left:-20px; background:transparent; border:none; font-size:20px; transition:all .5s; display: flex; align-items: center; justify-content: center; color: #000; z-index:2 } .teamSlider .slick-next{ position:absolute; top:40%; transform: translateY(-50%); right:-20px; background:transparent; border:none; font-size:20px; transition:all .5s; display: flex; align-items: center; justify-content: center; color: #000; z-index:2} .teamSlider .slick-next:hover, .teamSlider .slick-prev:hover{ color:var(--main-clr); } */ .blogSlider .slick-slide { margin: 0 15px; } .blogSlider .slick-list { margin: 0 -15px; } .blogSlider .slick-prev{ position:absolute; top:40%; transform: translateY(-50%); left:-60px; background:#f5f1ed; border:none; font-size:20px; transition:all .5s; display: flex; align-items: center; justify-content: center; color: #000; z-index:2; border-radius:50%; width:50px; height:50px; display:flex; justify-content:center; align-items:center; } .blogSlider .slick-next{ position:absolute; top:40%; transform: translateY(-50%); right:-60px; background:#f5f1ed; border:none; font-size:20px; transition:all .5s; display: flex; align-items: center; justify-content: center; color: #000; z-index:2; border-radius:50%; width:50px; height:50px; display:flex; justify-content:center; align-items:center;} .blogSlider .slick-prev:hover, .blogSlider .slick-next:hover{ background:var(--seconday-color); color:#fff } .practice-area{ background:#272626; padding:60px 0 75px 0; } .practic-icon-holder{ display:flex; } .practice-icon{ width:20%; text-align:center; } .practice-icon-image{ height:85px; } .practice-icon span{ display:block; color:#fff ; padding: 15px 0 0 0; font-size: var(--fs-20);} .qualitySectionSlider .slick-prev{ position:absolute; top:50%; transform: translateY(-50%); left:-60px; background:#f6f0e5; border:none; font-size:20px; transition:all .5s; width: 43px; height: 59px; display: flex; align-items: center; justify-content: center; color: #000; z-index:2 } .qualitySectionSlider .slick-next{ position:absolute; top:50%; transform: translateY(-50%); right:-60px; background:#f6f0e5; border:none; font-size:20px; transition:all .5s; width: 43px; height: 59px; display: flex; align-items: center; justify-content: center; color: #000; z-index:2} .qualitySectionSlider .slick-next:hover, .qualitySectionSlider .slick-prev:hover{ background:var(--main-clr); } .homepageFormSection{ } .home-form-sec h4,.home-form-sec h5{padding-bottom:1em} .homepageFormSection h2 strong{font-weight: 600} .homepageFormSection p{font-weight: 300; font-size: var(--fs-16); text-align: center;} .home-form-inner{ background:#f7f7f8; padding:80px 150px } .formGroup .gform_fields{ display:flex; gap:30px; align-items: flex-end;} .homeFormHolder input[type=text], .homeFormHolder input[type=email], .homeFormHolder input[type=tel]{ width:100% !important; background:#fff !important; border:none !important; padding:15px 25px!important; font-size:18px !important; font-weight:300 !important; color: #64686c !important; box-shadow: none !important; border-radius: 62px !important; height: 60px !important} .gform-theme--foundation .gform_fields{ row-gap:20px !important ; row-gap: 20px !important} .homeFormHolder select{ width:100% !important; background:#fff !important; border:none !important; padding:15px !important; font-size:18px !important; font-weight:300 !important; color: #64686c !important; box-shadow: none !important; border-radius: 0 !important } .homeFormHolder .inputHolder{ width:100% } .homeFormHolder ::placeholder { color: #64686c; opacity: 1; } .homeFormHolder ::-ms-input-placeholder { color: #64686c; opacity:1} .formGroup{ margin:0 0 45px 0 } .homeFormHolder input[type=submit]{padding: 15px 36px !important;background: var(--seconday-color) !important; border:none!important;outline:none!important;cursor:pointer!important;font-weight:400!important;font-size:var(--fs-18)!important;transition:all .5s!important;color: var(--white-color)!important;margin-top: 0!important; font-family: var(--headfont) !important; text-transform: uppercase !important; border-radius: 60px !important;} .homeFormHolder input[type=submit]:hover{ background:var(--white-color) !important; color:var(--body-font-color) !important; transition:all .5s !important; } .mobile-input{ width:35% !important } .homeFormHolder .gform_footer{ justify-content:flex-end !important; position: relative;} .homeFormHolder .gform-loader{ position:absolute !important; right:10px !important; top:10px !important } .homeFormHolder .inputHolder h4{padding-bottom: 20px !important;} .orfForm .gsection_title{color:var(--light-green-bg) !important; font-size: var(--fs-22) !important;} .orfForm .gfield_label{color:var(--brand-sage) !important;} .orfForm .gform-field-label--type-sub{color:#c1c1c1 !important;} .orfForm .gfield_consent_label, .orfForm .gfield_description{color:#c1c1c1 !important;} .orfForm .gform_confirmation_message{color:var(--seconday-color) !important; text-align: center !important;} .review-qa-sec p{text-align:left !important;} .reviewSlider { padding:20px 0 0 0 } .reviewSlider .slick-slide { margin: 0 10px; } .reviewSlider .slick-list { margin: 0 -10px; } .reviewItem{ text-align:center; } .star{ font-size:16px; color:var(--main-clr); margin:0 0 20px 0 } .reviewItem p{ text-align:center; font-family: var(--bodyfont); font-weight: 300;} .reviewItem h4{color:#000000; font-size: 16px; text-transform: uppercase; font-weight: 500; padding: 25px 0 0 0; letter-spacing: 2px; font-family: var(--bodyfont);} .btn-view{ text-decoration:underline; text-underline-offset:5px; font-size:var(--fs-18); color:#333b52;margin:35px 0 0 0; display:inline-block; } .btn-view:hover{ color:var(--seconday-color); } .reviewSlider .slick-prev{ position:absolute; top:50%; transform: translateY(-50%); left:0; background: var(--black-color); border:none; font-size:20px; transition:all .5s; color: var(--black-color); z-index:2; background:url(assets/images/previous.png) no-repeat; width:160px; height:107px; } .reviewSlider .slick-next{ position:absolute; top:50%; transform: translateY(-50%); right:0px; border:none; font-size:20px; transition:all .5s; z-index:2; color: var(--black-color); background:url(assets/images/next.png) no-repeat; width:120px; height:108px;} .reviewSlider .slick-next:hover, .reviewSlider .slick-prev:hover{ } .reviewSection h3{ font-size:var(--fs-36); padding-bottom: 20px;} .reviewSection p{ padding-bottom:0 } .mapSection img{ width:100% } .reviewSlider .slick-track{ display: flex !important;} .reviewSlider .slick-slide{ height: inherit !important;} .review-item-inner{ max-width:650px; margin:0 auto; } .review-item-inner h4{ color:#fff ; font-weight: 600; } .btn-google-review{ font-size:var(--fs-20); font-weight:400; color:var(--black-color); text-decoration:underline; text-underline-offset: 5px; margin-top: 15px} .btn-google-review:hover{ color:var(--seconday-color); } .social-share-section{ background:#f8f2e5 } .section-heading-inner{ display:flex; align-items:center; justify-content:center; gap:30px; } .share-social-icons ul{ margin:0; padding:0; list-style:none; } .share-social-icons ul li{ float:none; display:inline-block; vertical-align:top; } .share-social-icons ul li a{ color:var(--main-clr); font-size:var(--fs-30); margin:0 10px; } .section-heading-inner h2{ padding:0 } .insta-feed{ margin:30px 0 0 0 } .mapSection img{ width:100% } .footer{ background:var(--main-clr); } .footBottom{ padding:30px 0; background:#fff } .ftbtm{ justify-content:space-between; align-items:center; display: flex;} .copyright{ font-size:14px; color:#999999 ; text-transform: uppercase; letter-spacing: 2px; font-weight: 300} .footerTop{ padding:0 0 0 0; background:var(--main-clr); } .footerTopContent{ display:flex; justify-content:space-between; gap:40px ; align-items: flex-start;} .footerwidget_1{width: 26%; padding: 50px 0} .footerwidget_2{width: 24%; padding: 50px 0} .footerwidget_3{width: 25%; padding: 50px 0} .footerwidget_4{width: 265px; } .footer-logo{ width:340px; } /* Kalix association badge: modest size, clickable */ .footer-lg{width:190px;background: #fff;padding: 12px 20px;border-radius: 0 0 25px 25px;} .footer-lg img{ width:100%; height:auto; } .footer-lg a{ display:block; } .footerTop h3{ font-size:var(--fs-18); font-weight:700; color:var(--brand-sage); padding:0 0 5px 0} .footerTop p{ font-size:var(--fs-16); text-align:left; } .footer-content{ padding:30px 0 0 0 } .footer-content h4{ color:var(--brand-sage); font-size:12px; text-transform:uppercase; padding:0 0 10px 0 } .footer-content ul{ margin:0; padding:10px 0; list-style:none; } .footer-content ul li{ display:block; } .footer-content ul li a{ display:block; color:#fff; line-height:32px; font-size:16px; font-weight:300 } .footer-content ul li a:hover{ color:var(--brand-sage); } .footer-content .btncn-default:hover{ background:#fff; color:var(--black-color); } .social{ margin:0 0 0 0px; padding:0 0 0 0 } .social ul{margin:30px 0 0 0;padding:0;list-style:none;display: flex;gap: 10px; justify-content: flex-end;} .social ul li a{display:flex; color:var(--main-clr);font-size: 20px; background: #335572; border-radius: 50%; width: 43px; height: 43px;align-items: center; justify-content: center; } .social ul li a:hover{ background:var(--brand-sage); } .footerTopContent p a{ color:#fff } .footerTopContent p a:hover{ color:var(--brand-sage); } .footerTopContent table{ width:100%; } .footerTopContent table td{ color:#fff ; font-size:var(--fs-16); font-family:var(--bodyfont); line-height:31px; font-weight: 300} .footerTopContent table td:first-child{ padding-right:0; } .footer-icon-box-list{ display:flex; align-items:flex-start; gap: 20px; margin: 0 0 20px 0} .footer-icon-box-list a{ font-size:var(--fs-16); color:var(--white-color); font-weight:300 } .footer-icon-box{ padding-top:10px; } .footerwidgetInner{ } .formGroup{position:relative;} .wpcf7-spinner{position:absolute; right:0; bottom:16px;margin:0 !important;} .wpcf7 form .wpcf7-response-output{margin:0 !important; color:#fff !important;} .footer-btn-sec{ display:flex; align-items:center; gap:60px } .btn-make{ border:1px solid #fff; color:#fff; border-radius:30px; } /*! ####################################################################### MeanMenu 2.0.7 -------- To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/) ####################################################################### */a.meanmenu-reveal{display:none}.mean-container .mean-bar{float:left;width:100%;position:relative;background:#0c1923;padding:4px 0;min-height:42px;z-index:999999}.mean-container a.meanmenu-reveal{width:22px;height:22px;padding:13px 13px 11px;position:absolute;top:0;right:0;cursor:pointer;color:#fff;text-decoration:none;font-size:16px;text-indent:-9999em;line-height:22px;font-size:1px;display:block;font-family:Arial,Helvetica,sans-serif;font-weight:700}.mean-container a.meanmenu-reveal span{display:block;background:#fff;height:3px;margin-top:3px}.mean-container .mean-nav{float:left;width:100%;background:#0c1923;margin-top:44px}.mean-container .mean-nav ul{padding:0;margin:0;width:100%;list-style-type:none}.mean-container .mean-nav ul li{position:relative;float:left;width:100%}.mean-container .mean-nav ul li a{display:block;float:left;width:100%;padding:15px 10px;margin:0;text-align:left;color:#fff;border-top:1px solid #383838;border-top:1px solid rgba(255,255,255,.5);text-decoration:none;}.mean-container .mean-nav ul li li a{width:100%;padding:10px 20px;border-top:1px solid #f1f1f1;border-top:1px solid rgba(255,255,255,.25);opacity:.75;filter:alpha(opacity=75);text-shadow:none!important;visibility:visible}.mean-container .mean-nav ul li.mean-last a{border-bottom:0;margin-bottom:0}.mean-container .mean-nav ul li li li a{width:100%;padding:1em 15%}.mean-container .mean-nav ul li li li li a{width:100%;padding:1em 20%}.mean-container .mean-nav ul li li li li li a{width:50%;padding:1em 25%}.mean-container .mean-nav ul li a:hover{background:#252525;background:rgba(255,255,255,.1)}.mean-container .mean-nav ul li a.mean-expand{margin-top:1px;width: 26px;height: 54px;padding:12px!important;text-align:center;position:absolute;right:0;top:0;z-index:2;font-weight:700;background:rgba(255,255,255,.1);border:0!important;border-left:1px solid rgba(255,255,255,.4)!important;border-bottom:1px solid rgba(255,255,255,.2)!important}.mean-container .mean-nav ul li a.mean-expand:hover{background:rgba(0,0,0,.9)}.mean-container .mean-push{float:left;width:100%;padding:0;margin:0;clear:both}.mean-nav .wrapper{width:100%;padding:0;margin:0}.mean-container .mean-bar,.mean-container .mean-bar *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.mean-remove{display:none!important} .mean-container a.meanmenu-reveal span{ background:var(--main-clr); } .mean-container .mean-nav ul li a:hover{ background:transparent; } .mean-container .mean-nav ul li a{ border-top:1px solid rgba(255,255,255,.1) } .mean-container .mean-nav ul li li a{ border-top:1px solid rgba(255,255,255,.1) } .mobilemenu{ visibility:hidden; } /*Treatment Page*/ /* Banner containers share the image's dark tone so subpixel rounding can't show as a thin white line at the image edge. */ .innerBanner{ position:relative;padding:0; background:var(--main-clr); } .innerBannerImage{ background:var(--main-clr); } .innerBannerImage img{width:100%;display:block;} .innerbannerContent{ position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); padding:20px; } .innerbannerContent .bannerButtonGroup{ } .innerbannerContent h2{ font-size:var(--fs-80); color:#fff; font-weight: 400} .breadcumb{ padding:20px 10px 18px;background:transparent; position:relative; z-index:99; margin-top:-60px } .breadcumb ul{ display:flex; justify-content:flex-start; margin:0; padding:0; list-style:none; column-gap: 30px;font-weight: 600;color:var(--main-clr);opacity: 0.7} .breadcumb ul li{ font-family:var(--bodyfont); font-size:12px; font-weight: 500; text-transform:uppercase; letter-spacing:0.2em ; position:relative; color:#fff} .breadcumb ul li:after{ content:'|'; position:absolute; color:#fff; border-radius:50%; right: -18px; top: 0px; } .breadcumb ul li:last-child:after{ display:none; } .breadcumb ul li a{ color:#fff;font-weight:300 } .breadcumb ul li a:hover{ color:var(--brand-sage); } .sidebar .breadcumb{ padding:0 0 20px 0; background:transparent; } .sidebar .breadcumb ul{ display:flex; justify-content:flex-end; margin:0; padding:0; list-style:none; column-gap: 30px;} .sidebar .breadcumb ul li{ font-family:var(--bodyfont); font-size:var(--fs-18); text-transform:uppercase; letter-spacing:1px ; color:rgba(51,59,82,0.3); position:relative; } .sidebar .breadcumb ul li:after{ content:'•'; position:absolute; color:rgba(51,59,82,0.3); border-radius:50%; right: -18px; top: 0px; } .sidebar .breadcumb ul li:last-child:after{ display:none; } .sidebar .breadcumb ul li a{ color:rgba(51,59,82,0.3); } .sidebar .breadcumb ul li a:hover{ color:var(--main-clr); } a.btn-blue{ background:var(--main-clr); color:#fff; } a.btn-blue i{ color:#fff; margin:0 10px 0 0 } a.btn-blue:hover{ background:var(--seconday-color); } .treatmentImageHolder{ display:flex; flex-wrap:wrap; gap:20px; row-gap:30px; justify-content:center; margin: 30px 0 0 0} .treatment-repeat{ width:32% } .galInnerContainer{ position:absolute; top:0; left:0; width:100%; height:100%; padding:30px; text-align:center; display:flex; justify-content:center; align-items:center; opacity:0; visibility:hidden; z-index:99 } .galInnerContainer ul{ margin:0; padding:0; list-style:none; } .galInnerContainer ul li{ font-size:var(--fs-20); color:#fff; font-weight:300; padding:15px 0 } .galInnerContainer ul li a{ color:#fff } .galInnerContainer ul li a:hover{ color:var(--brand-sage); } .treatmentImage{ overflow:hidden; } .treatmentImage img{ transition: all .5s } .treatmentImage:hover img{ filter:brightness(0.5) blur(30px); transition: all .5s; transform: scale(1.1);} .treatmentImage:hover .qualityContent h3{ opacity:0; visibility:hidden; transition:all .5s } .treatmentImage:hover .galInnerContainer{ opacity:1; visibility:visible; transition: all .5s} .treatmentContent{ color:#161617; font-weight:400; font-family:var(--cabinetGrotesk); font-size:24px; padding:20px 0; } .treatmentHolder a{ display:block; margin-bottom: 40px;} .treatmentHolder a:hover .treatmentContent{ color:var(--main-clr); } .treatmentImage img{ width:100% } .treatmentImage{ position:relative; } .treatmentImage:after{ content: ''; background: rgb(22, 44, 105); background: linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%); position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; opacity: 1; transition: all .5s} .treatmentHolder:hover .treatmentImage:after{ opacity:1 } .postExcerpt p{ padding:20px 0 0 0; font-weight: 300; color: var(--body-font-color);} .permalink a{ padding:10px 0; font-weight:400; font-size:14px; font-family:var(--bodyfont); text-decoration:underline; text-underline-offset:3px; color:var(--body-font-color); } .permalink a:hover{ color:var(--seconday-color); } .blogTop{ background:#ebedf0; padding:15px 20px 15px 35px; margin:0 0 45px 0 ; display:flex; justify-content:space-between; align-items: center;} .sortBy{ font-weight:300; color:#161617; font-size:var(--fs-18); } .categotyDropdown{ width:325px; } .categotyDropdown select{ width:100%; background:transparent; border:none; border-bottom:1px solid #bcbec0 ; padding: 10px 0; font-weight:300; color:#161617; font-size:var(--fs-18);} .treatmentImageSlider{ width:100%; margin:0 auto; } .treatmentImageSlider .slick-slide { margin: 0 40px; } .treatmentImageSlider .slick-list { margin: 0 -40px; } .treatmentImageSlider .slick-prev{ position:absolute; top:50%; transform:translateY(-50%); left:-50px; font-size:30px; border:none; outline:none; background:transparent; color:#161617;z-index:2 } .treatmentImageSlider .slick-next{ position:absolute; top:50%; transform:translateY(-50%); right:-50px; font-size:30px; border:none; outline:none; background:transparent; color:#161617;z-index:2 } .treatmentImageSlider .slick-prev:hover, .treatmentImageSlider .slick-next:hover{ color:var(--seconday-color); } .treatmentImageSlider .slick-center{ transform:scale(1.3); transition:all .5s; transition-delay:0.5s } .treatmentImageSlider .slick-track{ padding:75px 0; overflow:visible; } .treatmentItem{display:block;} .pageContent h2{ padding:0 0 30px 0 } .pageContent h6{ padding:0 0 30px 0; } .pageContent p{ text-align:justify ; padding:0 0 30px 0 } .pageContent h3{ font-size:var(--fs-30);padding:20px 0 20px 0 ; font-weight: 500;} .brdholder{ text-align:right; } .sidebarFormHolder{ background:#f2f2f2; padding:40px; margin:0px 0 0 0; z-index: 999} .sidebarFormHolderLight{ background:#e0dbd3; padding:55px; margin:0px 0 0 0 } .sidebarImg { } .sidebar {height: 100%; margin:0 0 0 70px; background:#f2f2f2; padding:25px } .sidebarFormHolder{ overflow: auto; position: -webkit-sticky; position: sticky; top: 100px; min-height: 200px; } .sidebarImg img{ width:100% } .sidebar h3{ color:var(--body-font-color); font-weight:600; font-size:var(--fs-30); } .sidebar p{ text-align:center; color:var(--body-font-color); font-weight:300; font-size:16px; line-height:1.6 } .sidebar-form{ margin:25px 0 0 0 } .sidebar-form .inputHolder input[type=text], .sidebar-form .inputHolder input[type=email], .sidebar-form .inputHolder input[type=tel], .sidebar-form .inputHolder select,.sidebar-form .inputHolder textarea{ width:100% !important; background:#fff !important; border:none !important; padding:15px 25px !important; font-size:14px !important; text-transform:uppercase !important; font-weight:300 !important; color: var(--body-font-color)!important; border-radius: 0 !important; box-shadow: none !important; height: 50px; border-radius: 30px !important} .sidebar-form .inputHolder textarea{min-height: 90px !important; resize: none !important; border:none !important;} .sidebar-form .inputHolder { width:100% } .sidebar-form .inputHolder ::placeholder { color:#cfc8ba; opacity: 1; } .sidebar-form .inputHolder ::-ms-input-placeholder { color:#cfc8ba;opacity:1} .formGroup{ margin:0 0 20px 0 } .sidebar-form input[type=submit]{padding: 15px 36px !important;background:var(--seconday-color) !important;border:none !important;outline:none!important;cursor:pointer!important;font-weight:500!important;font-size:var(--fs-18)!important;transition:all .5s!important;border-radius: 0!important;color: var(--white-color) !important; border-radius:60px !important } .sidebar-form input[type=submit]:hover{ background:var(--white-color) !important; color:var(--body-font-color) !important; transition:all .5s !important; } .sidebar-form .gform_footer{ justify-content:center !important; } .sidebar-form .inputHolder select{padding-right: 45px !important;background-image: url(assets/images/arrow-down.png) !important;background-repeat: no-repeat !important;background-position: center right 19px !important;appearance:none !important;color: #cfc8ba!important;line-height: 1.5;} .sidebar-form option{ background: var(--body-font-color) !important; color:#fff !important;text-transform:none!important } .sidebarFormHolderLight h3{ color:var(--body-font-color); font-weight:400; font-size:var(--fs-42); } .sidebarFormHolderLight p{ text-align:center; color:var(--body-font-color); font-weight:300; font-size:16px; line-height:1.6 } .sidebarFormHolderLight .inputHolder input[type=text], .sidebarFormHolderLight .inputHolder input[type=email], .sidebarFormHolderLight .inputHolder input[type=tel]{ width:100% !important; background:transparent !important; border:none !important; border-bottom:1px solid #acabac !important; padding:15px 0 !important; font-size:14px !important; text-transform:uppercase !important; letter-spacing:2px !important; font-weight:300 !important; color: rgba(0,0,0, 0.4) !important; margin: 0 0 20px 0 !important; border-radius: 0 !important; box-shadow: none !important;} .sidebarFormHolderLight .sidebar-form .inputHolder ::placeholder { color: rgba(0,0,0, 0.4); opacity: 1; } .sidebarFormHolderLight .sidebar-form .inputHolder ::-ms-input-placeholder { color: rgba(0,0,0, 0.4)} .sidebarFormHolderLight input[type=submit]{ padding:15px 30px !important; color: #fff !important; background:var(--main-clr) !important; border:none !important; outline:none !important; cursor:pointer !important; font-weight:500 !important; font-size:var(--fs-18) !important; transition:all .5s !important; margin: 30px auto 0!important; width: 155px !important; display: block !important; border-radius: 30px !important} .sidesticky{ position:sticky; top:0; overflow:auto; } .pageContent .btn-blue{ margin:10px 0 30px 0 } .contentSliderHolder{ background:#f8f7f6; padding:45px 0 } .contentSlider .itemHolder{ background:#ebedf0; display:flex; align-items:center; justify-content: space-between;} .itemImage{ width:44%; } .itemContent{ width:54%; padding:0 100px 0 40px } .itemImage img{ width:100% } .itemContent h3{ padding:0 0 20px 0 ; font-weight: 400; color: var(--body-font-color); font-size:var(--fs-30); font-family:var(--cabinetGrotesk); } .itemContent p{ text-align:justify; padding:0 0 30px 0 ; line-height: 1.6} .contentSliderHolder .slick-prev{ position:absolute; top:50%; transform:translateY(-50%); left:0; z-index:1 } .contentSliderHolder .slick-next{ position:absolute; top:50%; transform:translateY(-50%); right:0; z-index:1 } .contentSliderImage img{width:100%} .pageContent blockquote{ border:1px solid #f0f1f1; padding:30px 30px 30px 30px; margin:15px 0 ; position: relative;} .pageContent blockquote p{ padding-bottom:0 } .pageContent blockquote:after{ content:''; position:absolute; top:20px; left:0; width:1px; height:50px; background:var(--seconday-color); } .pageContent blockquote h6{ color:var(--seconday-color); } .accordian-new h3 { font-family: var(--bodyfont); font-weight: 600; font-size: var(--fs-16); color:var(--seconday-color); cursor: pointer; margin-bottom: 0; position: relative; padding: 25px 0; } .ui-accordion-content-new ul li:not(:last-child){ padding-bottom: 15px;} .ui-accordion-content-new ol li:not(:last-child){ padding-bottom: 10px;} .ui-accordion-header-active-new{ border:none !important; } .accordian-new h3:focus { outline: 0} .accordian-new h3:after { content: "\2b"; font-family: 'FontAwesome'; position: absolute; right: 0; top: 22px; font-size: 18px; color:var(--seconday-color); font-weight: 300; transition: .5s} .accordian-new h3.ui-accordion-header-active-new:after { content: "\f068"; font-family: 'FontAwesome'; position: absolute; right: 0; top: 22px; font-size: 18px; color:var(--seconday-color); font-weight: 300; transition: .5s} .pageContent h1{ color:var(--seconday-color); font-size:var(--fs-14); text-transform:uppercase; font-weight:300; padding:0 0 15px 0; letter-spacing:1px } .faqHolder{position:relative;z-index:2; background: #faf8f6} .bg-logo5{position:absolute;z-index:-1;top:270px;right:0;} .inneraccordina-area { padding: 0 0 45px 0; } .accordian-new h3.ui-accordion-header-active-new:after { transform: rotate(180deg); } .accordianarea-new .accordian h3.ui-accordion-header-active-new:after { transform: rotate(-180deg); color: #f05824} .ui-accordion-content-new { padding: 0px 0px 10px 0; display: none} .faqHolder .accroHolder h3{ font-size:var(--fs-18); font-weight:500; color:var(--white-color); padding-right: 25px} .faqHolder .accordian-new h3:after{ color:var(--white-color); } .faqHolder .ui-accordion-content-new p{ text-align:left;} .faqHolder .ui-accordion-content-new p:last-child{ padding-top: 0px; } .accordian-new-2 h3.ui-accordion-header-active-new-2:after { transform: rotate(180deg); } .accordianarea-new-2 .accordian h3.ui-accordion-header-active-new-2:after { transform: rotate(-180deg); color: #f05824} .ui-accordion-content-new-2 { padding: 0px 0px 10px 0; display: none} .ui-accordion-content-new-2 p { text-align: justify; color: #686868} .accordian-new-2 h3:after { content: "\2b"; font-family: 'FontAwesome'; position: absolute; right: 0; top: 30px; font-size: 18px; color:#fff; font-weight: 300; transition: .5s} h3.clcikbtn-new-2.ui-accordion-header-active-new:after{ content: "\f068"; } h3.clcikbtn-new-2.ui-accordion-header-active-new-2:after{ content: "\f068"; } .accordian-new-3 h3.ui-accordion-header-active-new-3:after { transform: rotate(180deg); } .accordianarea-new-3 .accordian h3.ui-accordion-header-active-new-3:after { transform: rotate(-180deg); color: #f05824} .ui-accordion-content-new-3 { padding: 0px 0px 10px 0; display: none} .ui-accordion-content-new-3 p { text-align: justify; color: #fff} .accordian-new-3 h3:after { content: "\2b"; font-family: 'FontAwesome'; position: absolute; right: 0; top: 30px; font-size: 18px; color:var(--main-clr); font-weight: 300; transition: .5s} h3.clcikbtn-new-3.ui-accordion-header-active-new:after{ content: "\f068"; } h3.clcikbtn-new-3.ui-accordion-header-active-new-3:after{ content: "\f068"; } .accordian-new-3 h3{ color:var(--main-clr); font-weight:300; padding:20px 0; font-size:var(--fs-36); } .accroHolder h3{ position:relative; cursor:pointer; } .accroHolder{border-bottom: 1px solid #efe9e3; position: relative;} .deep-bg-section .accroHolder{ border-bottom:1px solid #525151 } .contactDetails{ margin:20px 0 } .contactmap{ margin:10px 0 45px 0 } .contactmap iframe{} .contactDetails p{ padding:0 0 10px 0 } .contactDetails p strong{ font-weight:500 } .contactDetails p a{ color:var(--body-font-color); } .contactDetails p a:hover{ color:var(--seconday-color); } .blogCategorySelect{ padding:20px 30px ; display:flex; align-items:center; border: 2px solid var(--main-clr); margin:0 0 40px 0 ; font-family: var(--headfont);} .blogCategorySelect span{ font-size:var(--fs-20); font-weight:300; padding:0 12px 0 0; color: var(--main-clr); font-family: var(--headfont);} .blogCategorySelect select{ width:100%; border:none; background:transparent; font-size:var(--fs-20); font-weight:300; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image:url(assets/images/downArrowDark.png); background-repeat:no-repeat; background-position: 100% center; color: var(--main-clr); font-family: var(--headfont);} .dark-bg .blogCategorySelect{background:rgba(255, 255, 255, 9%)} .dark-bg .blogCategorySelect select{background-image:url(assets/images/downArrow.png);} .dark-bg .blogCategorySelect select option{background: #272727} .contactmap { overflow: hidden; padding-top: 56.25%; position: relative; margin: 25px 0 25px 0} .contactmap iframe { position: absolute; top: 0; left: 0; border: 0; width: 100%; height: 100%;} .blogDetailsBanner{ background: linear-gradient(to bottom, #333b52 0%,#333b52 80%,#e9e4da 80%,#e9e4da 100%); padding:200px 0 0 0 } .blogDetailsBanner h1{ color:#fff; font-size:var(--fs-60); padding:0 0 50px 0 } .tretmentBannerCaption{ position:absolute; bottom:20%; transform:translateY(-50%); z-index:9; width:100%; left:0; } .tretmentBannerCaption h1{ color:#e9e4da; font-size:var(--fs-60); } #reviewtxt .modal-body {padding:30px 35px 35px} .reviewModalClose {position: absolute;top: 0px;right: 0px;transform: translate(50%, -50%);background: #ff0000;width: 31px;height: 31px;display:flex;align-items:center;justify-content:center;line-height:1;border: 0;border-radius: 11px;font-size:18px;color: #fff;z-index:9;} .modal-backdrop.show {opacity: 0.9;} #reviewtxt .modal-dialog {max-width: 700px;text-align: center;} #reviewtxt h3 {margin-bottom: 10px;} #reviewtxt .star {margin-bottom:10px} #reviewtxt .modal-body {max-height: calc(100vw - 150px);overflow: auto;} .more_txt {font-size: 16px;display: block;color: #ff0000; margin: 15px 0;font-weight: bold;} .reviewSlider .slick-track {display: flex;align-items: stretch;} .reviewSection .slick-slide > div,.reviewItem {height: 100%;} .more_txt:hover {color: #003380;} .awardsSec{} .awardsRow{display:flex;gap:30px;align-items:center;justify-content: space-between;} .awardsImg img {margin: 0 auto; display: block; filter: grayscale(100%); opacity: 0.4} .iconHolder{ margin:10px 0 30px 0 } .iconList{ display:flex; align-items:center; margin:0 0 15px 0 } .iconListIcon{ width:22px; flex-shrink:0; margin:0 8px 0 0;font-size:16px;color:var(--main-clr); } .iconListText{ font-size:var(--fs-16);font-family:var(--bodyfont);font-weight:300;color:#fff; line-height:1.8 } .iconListText a{ color:var(--body-font-color); } .iconListText a:hover{ color:var(--main-clr); } .footer .iconListIcon,.footer .iconListText,.footer .iconListText a{ color:#fff; } .footer .iconListText a:hover{ color:var(--brand-sage); } @media only screen and (max-width:767px){ .iconListIcon{ margin:0 10px 0 0 } } .homeFormImg{height:100%} .homeFormImg img{width:100%;height:100%;object-fit:cover;} .homeGallerySection{position:relative;z-index:2} .bg-logo2{position:absolute;bottom:-170px;left:0;z-index:-1} .contentSliderSection,.reviewSection{position:relative;z-index: 2} .bg-logo3{position:absolute;top:50%;right:0;transform:translateY(-50%);z-index: -1} .reviewSection{ background:url(assets/images/testimonials-bg.jpg) no-repeat; background-size: cover; } .beforeAfterGalSec{position:relative;z-index: 2} .bg-logo4{position:absolute;top:50%;left:0;transform:translateY(-50%);z-index: -1} .beforeAfterGalSec .container {max-width: 886px; } .beforeAfterGalSlider .slick-list {overflow: visible; } .beforeAfterGalSlider .slick-slide{background: #272727} .beforeAfterGalSlider .slick-slide img{opacity:0.2;transition:0.3s;display:block;} .beforeAfterGalSlider .slick-slide.slick-center img{opacity:1;transition-delay: 0.5s} .beforeAfterGalSlider .slickButton {position: absolute; width: 52px; height: 50px; border: 0; background: #ffffff; font-size: 28px; top: 50%; transform: translateY(-50%);transition:0.3s } .beforeAfterGalSlider .slickButton:hover{background:var(--seconday-color);color:#fff} .beforeAfterGalImg img {margin: 0 auto; } .beforeAfterGalImg {padding: 0 20px; } .beforeAfterGalSlider .slickButton.slick-prev{left:50px;z-index:2} .beforeAfterGalSlider .slickButton.slick-next{right:50px} .sidebarImg{display:block;} .appointmentSticker { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 99} .appointmentSticker .btncn-secondary{ flex-shrink:0 } .appointmentSticker h2{ font-size:var(--fs-36); padding-bottom:0; padding-right:30px; line-height:1.6 } .teamImage img{ } .teamBox h3{ font-size:var(--fs-30); padding:30px 0 15px 0 ; font-weight:600 } .teamBox h6{ font-size:var(--fs-20); font-weight:300; font-family:var(--bodyfont); opacity:0.6 } .meetSec{ background: var(--color2);} .meetSec h2{ color:#fff } .meetSecLeft h2 {font-size: var(--fs-60); } .meetTabNav ul li {width: 100%; margin: 0; overflow: hidden; } .meetTabNav .nav-link {font-size: var(--fs-18); border: 0; color:#95969b; font-family:var(--bodyfont); font-weight:300; text-transform: uppercase; letter-spacing: 2px; position:relative; padding:20px 10px 20px 40px; line-height:1; margin-left: -40px; transition: 0.5s; } .meetTabNav .nav-link::before{content: "\f111"; font-family: 'Font Awesome\ 6 Free'; font-size:18px; font-weight: 900; position: absolute; left:1px; top: 14px; color: var(--brand-sage); line-height:30px } .meetTabNav .nav-link.active,.meetTabNav .nav-link:hover {margin-left:0;opacity:1;color:#fff; background: transparent;} .meetTabNav ul {border: 0; } .meetTabThumb {position: relative; } .meetTabThumb img {display: block; width: 100%; } a.meetTabThumbLink {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .meetPlayBtn {font-size: 40px; color: #fff; border-radius: 50%; border: 1px solid #fff; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; } a.meetTabThumbLink:hover {background: #00000075; } .meetTabText {padding: 0 0 0 0; } .meetTabText h3 {color: var(--main-clr); padding-bottom: 10px; } .meetTabText p{text-align: justify; color: #fff} .meetTabText ul{ margin:0; padding:0; list-style:none; } .meetTabText li li{ display:block; } .meetTabText ul li a{ display:block ; font-size:var(--fs-24); font-weight:300; padding:0 0 20px 0; color:#fff } .meetTabText ul li a:hover{ color:var(--main-clr); } .meetTabContent{ display:flex; gap:45px; align-items:center; } .meettabImage{ width:57%; flex-shrink:0; padding-left:30px } .meetSec .accordion-body{ padding:0; border-radius:0; background:transparent; } .meetSecRight .accordion-item{ background:transparent; border: none;} .meetTabText h4{ color:#fff; font-size:var(--fs-24); font-weight:400; color:#fff; line-height:1.5; margin:0; padding-bottom:20px; } .meetTabText p{ font-size:var(--fs-18); font-weight:300 } .content-cn-inner{ padding:30px 60px 30px 30px; } .treatmentImageSlider .qualityContent h3{ text-align:center; font-size:var(--fs-20); padding-top:15px } .treatmentImageSlider .qualityContent{ position:static; } .treatmentImageSlider .treatmentImage:after{ display:none; } .treatmentImageSlider .treatmentImage:before{ display:none; } .treatmentImageSlider .galInnerContainer ul li{ padding:8px 0; font-size:var(--fs-18); font-weight:300 } .treatmentImageSlider .slick-prev{ color:#fff } .treatmentImageSlider .slick-next{ color:#fff } .treatmentImageSlider .treatmentItem:hover .galInnerContainer{ opacity:1; visibility:visible; transition:all .5s } .step-inner{ padding:80px; } .step-inner h2{ color:#fff } .step-inner p{ color:#fff } .step_inner-holder{ display:flex; gap:70px; margin:45px 0 0 0 } .step-box h3{ color:#fff; font-size:var(--fs-36); font-weight:600 } .step-box h3{ position:relative; margin:0 0 30px 0 } .step-box h3:after{ content:''; position:absolute; bottom:0; height:1px; background:#fff; width:calc(100% + 70px); left:0 } .step-box:last-child h3:after{ width:100% } .blogPostRepeater{ margin:35px 0 } .blogPostContent h4{ padding:25px 0 15px 0; font-size:var(--fs-22); } a.postReadMore{ font-size:var(--fs-14); color:var(--seconday-color); font-weight:500; text-decoration:underline; text-underline-offset:5px } a.postReadMore:hover{ color:var(--main-clr); } .blogPostContent{ margin:0 0 30px 0 } .blogPostContent a h4{ color:var(--body-font-color); font-size:var(--fs-20); line-height:1.5; text-align: center; } .blogdetails{ padding-top:45px; padding-bottom:0 } .blogPostContent p{ padding:15px 0 15px 0; font-size:var(--fs-20); text-align:left; } .blogdetails h1{ padding-bottom:45px ; font-weight:300 } .blogPostContent a.blog-read-more{ display:inline-block; line-height:1.4; color:var(--body-font-color); text-decoration:underline; text-underline-offset:5px; font-weight:500; text-transform:uppercase; } .blogPostContent a.blog-read-more:hover{ color:var(--seconday-color); } .approachBd .row {--bs-gutter-x: 0; } .row:nth-child(odd) .approachBdText {padding-right: 73px; } .row:nth-child(even) .approachBdText {padding-left: 75px; } .approachBd .row:not(:last-child) {margin-bottom: 120px; } .approachBd .row:nth-child(odd){flex-direction:row-reverse} .approachBdText h2{ font-size:var(--fs-36); } .approachBd{ position:relative; } .approachBd::after {position: absolute; top: 0; left: calc(50% - 1px); width: 2px; height: 100%; content: ''; background: #ccc9c3; } .approachBdImg img{ width:100% } .qualitySection{ } .treatment-welcome{ background:#fff; padding-bottom:90px } .treatment-welcome .qualityContent{ position:static; padding:30px 0 30px 0; } .treatment-welcome .qualityContent h3{ font-size:var(--fs-24); color:var(--black-color); } .treatment-welcome .qualityContent a:hover h3{ color:var(--seconday-color); } .deep-bg-section{ background:#272626 } .contact-section h3{ color:var(--main-clr); } .contact-section p{ padding:0 0 0 } .sidebarFormHolder{ position:sticky; top:0 } .quote-section h2{ font-weight:500; font-size:var(--fs-42); line-height:1.5; padding:30px 0 } .sidebarFormHolder h6{ font-weight:300; font-size:var(--fs-14); text-transform:uppercase; letter-spacing:1px; color: var(--seconday-color); padding-bottom: 0} .team-section{ background:var(--light-bg); } .cta-section{ position: relative; z-index: 9; overflow: hidden; background: #FFF; background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100px, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 100%); padding: 200px 0 90px 0} .cta-image{ position:absolute; right:0; top:0; height:100%; width:40%; } .cta-image img{width: 100%; height:100%; object-fit:cover; } .cta-inner{ position:relative; } .cta-inner .nextPreviousButtons{ position:absolute; right:0; bottom:15px; font-size:30px; gap:30px; color: #333333} .cta-inner .nextPreviousButtons .prevBtn2 i{ color:#333333 } .cta-inner .nextPreviousButtons .nextBtn2 i{ color:#333333 } .cta-inner .nextPreviousButtons .prevBtn2{ cursor:pointer; } .cta-inner .nextPreviousButtons .nextBtn2{ cursor:pointer; } .cta-inner .nextPreviousButtons .prevBtn2:hover i{ color:#fff } .cta-inner .nextPreviousButtons .nextBtn2:hover i{ color:#fff } .cta-gallery{ background:url(assets/images/cta-gallery-bg.jpg) no-repeat; background-size:cover; padding: 210px 0 } .cta-gallery h2{ color:#fff } .special-offer{ background:#404040; padding:0px; background-image:url(assets/images/special-offer-image.jpg); background-repeat:no-repeat; background-size:45%; } .offer-inner{ padding:120px 0 } .special-offer h5{ color:#fff; font-size:var(--fs-24); text-transform:uppercase; letter-spacing:2px;padding-bottom:20px ; font-weight: 500} .special-offer h2, .special-offer p{ color:#fff } .footer-heading-block{ pointer-events:none; } .team-image img{ width:100% } .treatment-details{ background:#f7f7f8 } .treatment-details h2{ margin-bottom:30px } .iconBox{max-width:350px;margin:0 auto;text-align:center;text-align-last: center;padding-top:30px} .iconBox h3{padding-bottom:15px;font-size: var(--fs-30);} .iconBoxImg{width:144px;aspect-ratio:1;border-radius: 50%;border: 1px solid var(--seconday-color);margin: 0 auto 20px;display:flex;align-items:center;justify-content:center;} .iconBoxCol:not(:last-child){border-right: 1px solid var(--black-color);} .treatment-details .iconBox{text-align:left;text-align-last: left;} .contactItemHolder{padding-bottom: 25px} .contactItem {display: flex; gap: 15px; font-size: var(--fs-18); padding: 5px 0; } .contactIcon {width: 27px; text-align: center; flex-shrink: 0; font-size: var(--fs-18);color:var(--dark-color); } .contactText p,.contactText a {flex-grow: 1; color: var(--dark-color);padding-bottom: 0} .contactText a:hover {color: var(--seconday-color)} .pageContent table{ width:100%; margin: 0 0 30px 0; table-layout: fixed; } .pageContent table td{ font-size:var(--fs-16); font-family:var(--bodyfont); line-height:2; font-weight: 300; border: 1px solid #d6d5d2; padding: 12px} .pageContent table td:first-child{ padding-right:20px; } .home-blog-section h2{ border-bottom:1px solid var(--seconday-color); padding-bottom:15px ; margin:0 0 35px 0 } .why-shoose-section{ background:var(--black-color); position:relative; overflow:hidden; } .why-choose-image{ width:36%; position:absolute; top:0; left:0; height:100% } .why-choose-image img{ height:100%; object-fit:cover; width: 100%} .choose-slider-main{ display:flex; } .choose-slider-left{ padding:100px 40px; width:50% ; display: flex; flex-direction: column; justify-content: space-between;} .choose-slider-right{ padding:100px 0px 80px 60px; width:50% ; border-left: 1px solid var(--brand-sage);} .choose-slider-left h2{ color:#fff } .choose-slider-left h6{ color:var(--brand-sage); } .content-slide-item .btncn-white{ color:#fff ; background: transparent; line-height: 1.4} .content-slide-item .btncn-white:hover{ background:var(--white-color); color:var(--black-color); } .nextPreviousButtons{ display:flex; gap:15px } .nextPreviousButtons .prevBtn, .nextPreviousButtons .nextBtn{ background:#1a1a1a ; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items:center; justify-content: center; color: #fff; cursor: pointer;} .nextPreviousButtons .prevBtn:hover, .nextPreviousButtons .nextBtn:hover{ background:var(--seconday-color); } .mobile{ display:none; } .desktop{ display:block; } .skip-link { position: absolute; top: -40px; left: 10px; background: #000; color: #fff; padding: 8px 12px; z-index: 1000; text-decoration: none;} .skip-link:focus { top: 10px;} .sideLogo{ position:fixed; right:-50px; top:50%; transform:translateY(-50%); z-index: 1} .banner-holder{ position:relative; z-index:9 } .why-shoose-section, .home-contact-section, .reviewSection, .footer{ position:relative; z-index:9 } #toTop { width: 40px; height: 40px; background: var(--seconday-color); color: #fff; position: fixed; bottom: 30px; right: 30px; display: none; border-radius: 50%; z-index: 999; display: flex; justify-content: center; align-items: center; cursor: pointer;} .rounded-image img{ border-radius:30px } .dark-bg .btncn-default:hover{ background:var(--white-color); color:var(--body-font-color); } .home-service-section h2{ padding:0 0 45px 0 } .home-service-slider{display:flex;gap: 0;position:relative;align-items:center} .home-service-slider .slick-arrow{background:transparent;border:0;outline:0;font-size:20px;width:45px;height:45px;background: var(--seconday-color);color: var(--body-font-color)!important;z-index:9;flex-shrink: 0;} .home-service-slider .slick-arrow i{color: #ffffff;} .home-service-slider .slick-list{margin: 0 -33px;} .home-service-slider .slick-slide{padding:0 10px;height: auto;} .home-service-slider .slick-track{display:flex} .home-service-slider .slick-slide > div{height:100%} .home-service-item{position:relative;z-index:2;height: 100%;} .home-service-image img{ border-radius:30px; width:100%;height:100%;object-fit:cover } .home-service-image{ position:absolute;inset:0;z-index:-1 ; width:100%;height: 100%;} .home-slider-caption{text-align:center;padding: 30px 30px 40px;height: 100%;display: flex;flex-direction: column;justify-content: center;} .home-slider-caption h3{font-weight:700;font-size:var(--fs-36);color: #fff;} .home-slider-caption a{ font-size:var(--fs-18); font-weight:500 ; color: var(--white-color); text-decoration: underline; text-underline-offset: 5px;line-height: 1.2} .home-slider-caption a:hover{ color:var(--brand-sage); } .home-slider-caption ul {display: flex; flex-direction: column; gap: 15px; line-height: 1.3; list-style: none; padding: 0; text-align: center; margin-bottom: 0px; } .home-slider-caption ul a {font-weight: 400;text-decoration:none;} .home-slider-caption ul:not(:last-child){margin-bottom: 25px;} .green-bg-sec{ background:var(--green-bg); } .green-bg-sec h6{ font-size:var(--fs-18) ; font-weight:400; text-transform:uppercase; color:var(--white-color); padding:0 } .sec-image-in{ padding:30px 0;max-width:390px;margin-left:auto;margin-right:auto } .green-bg-sec h5{ font-weight: 400; font-size: var(--fs-24); color: var(--white-color); padding: 0 0 25px 0; } .green-bg-sec p{ text-align:center; } .partner-logo-section{ } .partner-log-holder{ display:flex; gap:0; flex-wrap:wrap;align-items:center;} .partner-logo{ width:16.66% ; padding:15px; text-align:center; } .download-sec-inner{ background:var(--main-clr); border-radius:62px; overflow:hidden; } .download-sec-inner{ display:flex; } .home-form-image{ width:40%; } .home-form-sec{ width:60%; padding:85px } .home-form-image img{ height:100%; object-fit:cover; } .home-location-section{ background:var(--light-bg); } .location-inner{ background:var(--main-clr); padding:35px; } .home-location-section h2{ padding:0 0 40px 0 } .location-top{ text-align:center; } .location-top p{ text-align:center; } .location-top h3{ font-weight:700; font-size:var(--fs-24); padding-bottom:10px; } .map-holder { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; margin: 0 0 30px 0} .map-holder iframe { position: absolute;top: 0;left: 0; width: 100%; height: 100%;} .location-inner .btncn-default:hover{ background:var(--white-color); color:var(--body-font-color); } .location-bottom-sec{ padding:45px 0 0 ; text-align:center; } .location-bottom-sec p{ padding:0; margin:0 ; font-size: var(--fs-18); font-weight: 400; color: rgba(0,43,79,0.70); text-align: center;} .location-bottom-sec p a{ color: rgba(0,43,79,0.70) ; font-weight: 700; text-decoration: underline; text-underline-offset: 5px;} .location-bottom-sec p a:hover{ color: rgba(0,43,79,1.0) ; } .ph-icon-hd{ display:none; } .flex-div{display: flex; flex-direction: column; align-items: center;} .light-green-bg{ background:var(--light-green-bg); } .light-green-bg p{ font-weight:500 } .light-green-bg .text-center p{ text-align:center; } .light-green-bg .text-white .btncn-white{ color:var(--body-font-color) !important; } .light-green-bg .text-white .btncn-white:hover{ color:#fff !important; border-color:var(--main-clr); } .light-green-bg a:not(.btncn){color:var(--body-font-color) !important; text-decoration: underline;} .light-green-bg a:hover{color:var(--main-clr) !important;} .light-green-bg ul{ margin:0; padding:0; list-style:none; } .light-green-bg ul li{ margin:0 0 15px 0; font-size:var(--fs-18); font-weight:300; color:var(--body-font-color); padding:0 0 0 30px; position:relative; } .light-green-bg ul li:after{ content: "\f00c"; font-family: 'FontAwesome'; position: absolute; left:0; top:0; color: var(--body-font-color);} .light-gray-bg{ background:#f0f2f3 } .side-form-holder{ background:var(--main-clr); padding:50px; border-radius:62px; } .text-center p{ text-align:center; } .side-holder{ padding: 50px; border-radius: 62px; } .side-holder p{ font-weight: 300 !important; text-align: left !important; } .main-content-sec ul{ margin:0; padding:0; list-style:none; } .main-content-sec ul li{ margin:0 0 15px 0; font-size:var(--fs-18); font-weight:300; color:var(--body-font-color); padding:0 0 0 30px; position:relative; } .main-content-sec ul li:after{ content: "\f00c"; font-family: 'FontAwesome'; position:absolute; left:0; top:0; color: var(--body-font-color);} .main-content-sec:not(.dark-bg) ul li strong{color: var(--body-font-color) !important;} .main-content-sec .dark-bg ul li:after{color:#fff;} .dark-bg .main-content-sec ul li{color:#fff;} .main-content-sec ol{margin: 0 0 20px 20px; padding: 0; } .main-content-sec ol li{ font-size:var(--fs-18); font-weight:300; } .main-content-sec h3{ font-size:var(--fs-30); font-weight:600; } .main-content-sec h5{ color:var(--green-bg); padding-bottom: 20px; font-weight:600; } .content-section-mid h5{ font-weight: 400; font-size: var(--fs-24); color: rgba(0, 43, 79, 0.7); padding: 0 0 25px 0; } .content-section-mid a{color:var(--green-bg) !important;} .content-section-mid a:hover{color:var(--seconday-color) !important;} .light-content-sec{ height:100%; background:#f3f9f9; border-radius:62px; padding:45px; } .light-content-sec h3{font-size: var(--fs-30);} .light-content-sec h4{ font-size:var(--fs-18); font-weight:700;padding:15px 0 15px 0 } .light-content-sec ul{ margin:0 0 10px 20px;padding:0 } .light-content-sec ul li{ font-size:var(--fs-18); font-weight:300; color:var(--body-font-color); margin: 0 0 10px 0;} .light-content-sec ul li:last-child{margin-bottom:0;} .light-content-sec ol{ margin:0 0 10px 20px;padding:0 } .light-content-sec ol li{ font-size:var(--fs-18); font-weight:300; color:var(--body-font-color); margin: 0 0 10px 0;} .light-content-sec ol li:last-child{margin-bottom:0;} .light-content-sec ol li::marker{font-weight: 500 !important; color: var(--body-font-color) !important; } .light-content-sec ol li ul{ padding-top: 10px; list-style:none; padding: 20px 20px 0px;} .light-content-sec ol li ul li{ margin:0 0 15px 0; font-size:var(--fs-18); font-weight:300; color:var(--body-font-color); padding:0 0 0 30px; position:relative; } .light-content-sec ol li ul li:after{ content: "\f00c"; font-family: 'FontAwesome'; position:absolute; left:0; top:0; color: var(--body-font-color); } .light-content-sec ol li ul li:last-child{padding-bottom: 0;} .personalized-sec ul,.personalized-sec ol{padding: 0px 40px 20px;} .light-gray-bg ul{padding: 10px 20px;} .feature-info-sec ul{ margin:0; padding: 10px 40px; list-style:none; text-align: left;} .feature-info-sec ul li{ margin:0 0 15px 0; font-size:var(--fs-18); font-weight:300; color:#fff; padding:0 0 0 30px; position:relative; } .feature-info-sec ul li:after{ content: "\f00c"; font-family: 'FontAwesome'; position:absolute; left:0; top:0; color: var(--brand-sage);} .white-bg{background:var(--white-color);padding: 30px 50px;border-radius:60px;} .white-bg h2{ text-align:center; } .white-bg h3{ padding-bottom:15px } .quizFormHolder .formGroup{margin:0} .quizFormHolder .gf_progressbar_title{ font-weight:500 !important; font-size:var(--fs-18) !important; text-transform:uppercase !important; color: var(--body-font-color) !important; } .quizFormHolder legend.gform-field-label{font-weight: 600 !important;font-size: var(--fs-26) !important;color:var(--main-clr) !important;margin: 0 0 15px 0 !important;line-height: 1.1;} .quizFormHolder legend.gform-field-label--type-sub{ font-weight:700 !important; font-size:var(--fs-36) !important; color:var(--main-clr) !important; margin:0 0 40px 0 !important } .quizFormHolder input[type=button]{padding: 15px 36px !important;background: var(--seconday-color) !important; border:none!important;outline:none!important;cursor:pointer!important;font-weight:400!important;font-size:var(--fs-18)!important;transition:all .5s!important;color: var(--white-color)!important;margin-top: 0!important; font-family: var(--headfont) !important; text-transform: uppercase !important; border-radius: 60px !important;} .quizFormHolder input[type=button]:hover{ background:var(--main-clr) !important; color:var(--white-color) !important; transition:all .5s !important; } .quizFormHolder .gform_page_footer{justify-content:center !important;position: relative;margin: 20px 0 0 0 !important;} .quizFormHolder .gfield_radio input[type="radio"]{ display:none !important;} .quizFormHolder .gfield_checkbox input[type="checkbox"]{ display:none !important;} .quizFormHolder .gfield_radio .gchoice label,.quizFormHolder .gfield_checkbox .gchoice label{display:block;padding: 8px 16px;border-radius:40px;background:#e9e9e9;cursor:pointer;font-weight: 400;color:var(--body-font-color);transition:all .3s ease;border:2px solid transparent;width: 100%;text-align:left;font-size: var(--fs-18);margin:0} .quizFormHolder .gfield_radio .gchoice{ margin-bottom:12px;} .quizFormHolder .gfield_checkbox .gchoice{ margin-bottom:12px;} .quizFormHolder .gfield_radio input[type="radio"]:checked + label{ background:#fff; border:2px solid #1f3f5b;} .quizFormHolder .gfield_checkbox input[type="checkbox"]:checked + label{ background:#fff; border:2px solid #1f3f5b;} .quizFormHolder .gfield_radio .gchoice {margin-bottom: 0px;width: 100% !important;display: block !important;} .quizFormHolder .gfield_checkbox .gchoice {margin-bottom: 0px;width: 100% !important;display: block !important;} .gform-theme--framework .gf_progressbar .percentbar_blue{ background:var(--seconday-color) !important; } .quizFormHolder input[type=text], .quizFormHolder input[type=email], .quizFormHolder input[type=tel]{ width:100% !important; background:#fff !important; border:2px solid #002b4f !important; padding:15px 25px !important; font-size:18px !important; font-weight:300 !important; color: #64686c !important; box-shadow: none !important; border-radius: 62px !important; height: 60px !important; text-align:left !important; } .quizFormHolder textarea{ width:100% !important; background:#fff !important; border:2px solid #1f3f5b !important; padding:15px 25px!important; font-size:18px !important; font-weight:300 !important; color: #64686c !important; box-shadow: none !important; border-radius: 20px !important; height: 120px !important; resize: none !important; text-align: left !important} .quizFormHolder input[type=submit]{padding: 15px 36px !important;background: var(--seconday-color) !important; border:none!important;outline:none!important;cursor:pointer!important;font-weight:400!important;font-size:var(--fs-18)!important;transition:all .5s!important;color: var(--white-color)!important;margin-top: 0!important; font-family: var(--headfont) !important; text-transform: uppercase !important; border-radius: 60px !important;} #gform_ajax_spinner_3{ display: none !important; } .appointment-sec h5{ font-weight: 400; font-size: var(--fs-24); color: rgba(0, 43, 79, 0.7); padding: 0 0 25px 0; } .appointment-sec p i{color:var(--green-bg) !important;} .appointment-sec p strong{font-weight: 500;} .glance-sec h6{text-align: center; padding-bottom: 50px;} .glance-sec .icon-box h4{text-align: left; padding-bottom: 30px;} .glance-sec .icon-box p{text-align: left !important;} .featured-about .contentImage{ position:sticky; top:75px } .contentSection.featured-about {background: #fff;} .contentSection.featured-about *,.featured-about .contentTop ul li:after{color: var(--body-font-color)!important;} .only-mob-show{ display:none; } .blue-side-box .side-holder {background: var(--main-clr);} .blue-side-box .side-holder ul li:after{color:#fff} @media only screen and (min-width:1200px){ .mega-menu-container.container{max-width:1440px} .headerMian a{pointer-events: none;} .headerMian:hover a{pointer-events:all;} .mega-menu-wrapper{ position: absolute; z-index: 9; inset: 0 0 auto; width: 100vw; max-width: 100vw; box-shadow: 0 10px 10px 4px rgba(0, 0, 0, .05); top: 100%; opacity: 1; overflow:hidden; height: 0; transition: height .5s; background: var(--main-clr); padding: 0} .navigation nav ul li:hover .mega-menu-wrapper{ display:block; overflow:hidden; height:600px; transition: height .5s} .section-parent-menu{ padding:40px 0 } ul.dropdown-menu-holder > li > a{font-size: var(--fs-24) !important;font-weight: 400!important;margin:0;display:block;padding:10px 30px 10px 15px;border-radius:7px} ul.dropdown-menu-holder > li:has( ul) > a{background-image:url(assets/images/arrow-menu.png);background-position:center right 15px;background-size:12px auto;background-repeat:no-repeat;} ul.dropdown-menu-holder > li > a:hover{background-color:var(--seconday-color); color:#fff!important} ul.dropdown-menu-holder li ul li a{font-size: var(--fs-18) !important;padding: 0px 0;display:block;font-weight: 400 !important;margin:0 0 0px} ul.dropdown-menu-holder li ul li a:hover{ text-decoration:underline; text-underline-offset:5px; color:var(--white-color); } ul.dropdown-menu-holder li ul li ul a{font-size: var(--fs-18) !important;padding: 0px 0;display:block;font-weight: 300 !important;margin:0} ul.dropdown-menu-holder li ul li{width:100%} ul.dropdown-menu-holder > li > ul{position: absolute;width: 75%;top: 40px;right: 0;padding: 45px 6.5% 45px 13%;opacity: 0;transition:0.1s;z-index: -1;align-items: flex-start;} ul.dropdown-menu-holder > li > ul::before{content:'';position: absolute;width: 90%;height:100%;top: 0;right: 0;background: var(--seconday-color);border-radius: 25px;pointer-events: none;} ul.dropdown-menu-holder > li:hover > ul{opacity:1;z-index:1} .navigation nav ul.dropdown-menu-holder{gap: 0 !important;row-gap: 10px !important;flex-wrap: wrap;border: none;align-items: flex-start!important;display: flex;width: 25%;align-content: flex-start;} .navigation nav ul.dropdown-menu-holder > li,.navigation nav ul.dropdown-menu-holder > li > a{width:100%; } .navigation nav ul.dropdown-menu-holder > li > a{ padding-top: 12px; padding-bottom: 12px } ul.dropdown-menu-holder > li > ul > li {width: 100%;} ul.dropdown-menu-holder li ul{display:flex;flex-wrap:wrap;gap:9px 30px;align-items: flex-start!important;justify-content: flex-start;} ul.dropdown-menu-holder li ul ul{gap:12px 0;min-height:initial!important;height:auto!important;} } @media only screen and (max-width:1900px){ .headerHolder{ padding:0 0 0 20px; } .navigation nav ul li a{ font-size:15px; } .header-ph-num{ font-size:12px; } .header-ph-num a{ font-size:16px; } } @media only screen and (min-width:1199px){ .mobilemenu{ display:none; } } @media only screen and (min-width:1900px){ .container{max-width: 1430px} } @media only screen and (max-width:1900px){ :root{ --fs-72: 48px; --fs-80: 60px; --fs-60: 48px; --fs-50: 40px; --fs-48: 39px; --fs-42: 37px; --fs-40: 35px; --fs-30: 28px; --fs-100:75px; --fs-24:20px; } .bannerContent{ padding-right:0 } .banner .slick-dots{ bottom:60px } .number{ font-size:38px } .ratingSection h4{ font-size:16px } section{ padding:60px 0 } .treatment-welcome{ padding-bottom:60px; } .contentTop:not(:last-child){ padding:0 0 60px 0 } .special-offer h5{ font-size:20px; } .headert-top-left, .headert-top-right{ gap:20px } .header-inline-icon-box{ font-size:14px } .headerHolder{ gap:20px } .header-top-content{ padding:0 30px } .headerHolder{ padding:0 0 0 30px } .navigation nav>ul>li>a{ line-height:90px } .book-online a{ padding:0 20px; font-size:14px } .footerwidget_1{ width:20% } .footer-logo{ width:240px } } @media only screen and (max-width:1500px){ .banner .slick-dots{ } .blogDetailsBanner{ padding:160px 0 0 0 } .tretmentBannerCaption{ bottom:7% } ul.dropdown-menu-holder{ padding:200px !important } .bookAppointment a{ padding: 20px 20px; margin: 0 0 0 25px; } .language { margin: 0 15px 0 15px;} .offer-inner{ padding:55px 0 } } @media only screen and (max-width:1430px){ :root{ --fs-80: 55px; --fs-60: 45px; --fs-50: 36px; --fs-48: 36px; --fs-40: 33px; --fs-36: 30px; --fs-30: 22px; --fs-24: 18px; --fs-21: 17px; --fs-20: 16px; --fs-18: 16px; --fs-100: 60px; --fs-72: 40px; } .bookAppointment a{font-size: var(--fs-21); } .sliderContent p{ font-size: } .contentBottom ul li a{ font-size:20px } .number{ font-size:30px } .contentTop{ margin:0 0 0 0 } .homepageFormSection{ padding:50px 0 } .footBottom{ padding:30px 0 } .contentSliderContent{ padding:30px 80px 30px 30px; } .sliderContent h1{ font-size:44px; padding:0 0 20px 0 } .qualitySectionSlider .slick-prev{ left:0 } .qualitySectionSlider .slick-next{ right:0px } .content-cn-inner h6{ padding:0 0 10px 0 } .contentSection p{ padding-bottom:20px } .footerTopContent h2{ font-size:30px; } .bookAppointment a{ margin:0 0 0 15px } .treatmentImageSlider .slick-center { transform: scale(1.0); transition: all .5s; transition-delay: 0.5s;} .treatmentImageSlider .slick-slide { margin: 0 20px; } .treatmentImageSlider .slick-list { margin: 0 -20px; } .step_inner-holder{ gap:15px } .approachBd .row:not(:last-child){ margin-bottom:70px } .reviewSlider{ padding:0 30px; } .reviewSlider .slick-prev{ left:-25px; } .reviewSlider .slick-next{ right:-25px } .bookAppointment a { padding: 13px 13px;} .headerHolder{ gap:20px } .cta-inner{ padding:30px } .home-form-inner{ padding:75px } .cta-gallery{ padding:100px 0 } .header-inline-icon-box{ font-size:12px } .book-online a{ font-size:14px } .logo,.fixed .logo{ width:180px } .fixed .navigation nav>ul>li>a{ font-size:13px; padding:0 7px; } .navigation nav ul li.special-headet-btn a{ padding:0 30px } .ratingSection h4{ font-size:14px } .blogSlider { margin:0 30px } .footerTopContent{ gap:40px } .footerLogo img{ width:150px } .sliderImage img{ height:600px; } .cta-section{ padding:120px 0 40px 0 } .ph-icon-hd{ display:block; } .ph-bx{ display:none; } .header-phone-numbers{ width:auto } .header-phone-numbers{gap:10px;position:relative;z-index:9999;margin-left:auto;margin-right: 0px;} .ph-icon-hd, .ph-icon-hd a{ font-size:30px; } } @media only screen and (max-width:1199px){ :root{ --fs-42:34px ; --fs-30:24px ; --fs-60:38px ; } .bookAppointment a{ margin:0 60px 0 25px;padding: 25px 20px; } .slick-slider .qualityContent h3{ font-size:16px } .reviewSection{ padding-top:50px; padding-bottom:50px } .mean-container .mean-bar {position: absolute;left: 0;width: 100%;float: none;z-index: 99;top: 0;background: var(--top-header-bg);padding: 0;} .headerHolder{position: static;} .mean-container a.meanmenu-reveal{ color:var(--main-clr); } a{ text-decoration:none; border: 0px; outline: none; transition:none;} a:hover, a:focus, a:active{ transition:none; } .mean-container a.meanmenu-reveal{ border:1px solid var(--white-color); padding: 8px 13px 8px; margin-top:0px; color: var(--white-color);} .mean-container .mean-nav{margin-top:80px;box-sizing: border-box;padding: 0 30px;} .fixed .mean-container .mean-nav{ margin-top:36px } /* Mobile menu: left-aligned with a clear indentation hierarchy per level (centred items read oddly with the 3-level Treatments accordion). */ .mean-container .mean-nav ul li a{ font-family:var(--bodyfont); font-size:18px; text-align:left; padding:15px 54px 15px 24px; } .mean-container .mean-nav ul li ul li a{ font-size:16px; padding-left:40px !important; font-weight:400; opacity:1; } .mean-container .mean-nav ul li ul li ul li a{ font-size:15px; padding-left:56px !important; font-weight:300; } .mean-container .mean-nav ul li:first-child > a{ border:none; } /* Treatments mega menu flattens through wrapper divs, so target its category/child links directly to keep the indentation hierarchy. */ .mean-nav .dropdown-menu-holder > li > a{ font-size:16px !important; padding-left:44px !important; font-weight:400 !important; } .mean-nav .dropdown-menu-holder li ul li a{ font-size:15px !important; padding-left:62px !important; font-weight:300 !important; } .logo {position:relative;z-index:9999;transform:translate(0);left:inherit;width:180px;flex-shrink: 0;} .logo,.fixed .logo{width: 95px;} .innerBannerImage img{ height:500px; object-fit:cover; } .sidebarFormHolder{ } .itemContent{ padding:0 59px 0 0 } .itemContent p{ line-height:1.4; font-size:16px } .faqHolder{ padding:45px 0 } .sliderContent h3{ padding-bottom:20px } .sliderContent{ top:58% } .qualityContent{ padding:0 20px } .g-5, .gx-5{ --bs-gutter-x: 2rem; } .mean-container a.meanmenu-reveal span{ background:var(--white-color); } .headerRight{ position:static; } .mean-nav { box-shadow: -50vw 0 0 var(--main-clr), 50vw 0 0 var(--main-clr);} .mean-container .mean-nav{ background:var(--main-clr); } .treatmentImageSlider .treatmentImage{ width:100% } .bookAppointment a:after{display:none;} .headerMian {position: relative;flex-direction: row;padding: 0 30px;} .logo img {margin: 0; } .ratingSection h4 {font-size: 12px; } .qualitySectionSlider,.reviewSlider {width: 90%; margin: 0 auto; } .contentSliderSection .slick-next, .contentSliderSection .slick-prev {bottom: 59px; } .bookAppointment a{ position:relative; z-index:999 } .mean-container a.meanmenu-reveal{ z-index:9999 } .phoneNumber{ z-index:9999 } .navigation{ visibility:hidden; display:none; } .mean-container a.meanmenu-reveal{top:20px;right: 30px!important;} .number{ margin:0 0 20px 0 } .meettabImage{ padding:0 } .meettabImage{ width:45%; } .meetTabContent{ align-items:flex-start; gap:20px; } .meetTabNav .nav-link{ padding: 20px 10px 20px 30px; margin-left: -20px; } .treatmentImageSlider .slick-track{ padding:0; } .treatmentImageSlider .slick-prev{ left:0 } .treatmentImageSlider .slick-next{ right:0 } .sidebarImg{ margin: 0 0 0 0; } .step-inner{ padding:50px 30px; } .sidebarImg img{ width:100% } .bookAppointment a{ padding:20px 20px } .headerHolder{height: 80px;justify-content:space-between;padding: 0;margin: 0 30px} .welcomeSection{ padding-bottom:15px; } .contentSlider .slick-prev{ top:inherit; bottom:0 } .contentSlider .slick-next{ top:inherit; bottom:0 } .treatment-repeat{ width:48% } .treatment-welcome{ padding-bottom:45px; } .book-online a{ display:none; } .serviceSlider{ margin:0 50px } .header-inline-icon-box span{ display:none; } .mean-container .mean-nav ul li a.mean-expand{ border:none !important; background:transparent !important; } .banner .slick-dots{ bottom:20px } .banner-holder{margin-top: 0px;} .icon-box-last:after{ content: ''; position: absolute; right: 0; top: 0; height: 100%; background: var(--brand-sage); width: 1px; display:block; } .icon-box{ margin:10px 0; height:96% } .btncn{ padding: 11px 20px 13px; white-space:nowrap; } .exparties-header{ gap:30px } .choose-slider-right{ padding: 50px 0px 50px 20px; } .choose-slider-left{ padding:50px 30px } .footerwidget_1{ padding-bottom:30px } .footerwidget_2{ padding:0 } .footerwidget_3{ padding:0 } .footer-lg{border-radius:12px} .reviewSection .slick-dots{ width: 100%; display: flex; justify-content: center; margin: 30px 0 0 0; padding: 0; list-style: none; gap: 10px} .reviewSection .slick-dots li button{ text-indent:-999em; width:15px; height:15px; border:1px solid #fff; border-radius:50% } .reviewSection .slick-dots li.slick-active button{ background:transparent; } .blogSlider .slick-prev{ left:-54px } .blogSlider .slick-next{ right:-54px } .home-contact-form-holder{ padding:40px } .sidebar{ margin:30px 0 0 0 } .footerTopContent{ flex-direction:column; } .footerTopContent{ gap:0 } .footerwidget_1, .footerwidget_2, .footerwidget_3, .footerwidget_4{ width:100% } .social ul{ justify-content:flex-start; } .footerwidget_4{ padding-bottom:45px; } body{ overflow-x:hidden; } .header-phone-numbers{ display:none; } .home-service-slider ul.slick-dots{ margin:20px 0 0 0; padding:0 ; list-style: none; display: flex; justify-content: center; gap:8px;; } .home-service-slider ul.slick-dots li button{ width:15px; height:15px; border-radius:50% ; text-indent:-999em; border:none } .home-service-slider ul.slick-dots li.slick-active button{ background-color: var(--seconday-color); } .only-mob-show{ display:block; position:relative; } .mean-container .mean-nav ul li a{ box-sizing:border-box; } .only-mob-show a{ position:relative; } .only-mob-show a:before{ content: "\f095"; font-family: 'FontAwesome'; margin:0 10px 0 0 } } @media only screen and (max-width:991px){ .sliderImage img{ height:500px } .sidebarFormHolder{ margin:0 } .contentSliderHolder{ padding:0 0 0 0 } .contentSlider .itemHolder{ display:block; } .itemImage{ width:100%; margin:0 0 25px 0 } .itemContent{ width:100%; padding:0 30px 30px } .inneraccordina-area{ padding:0 0 30px 0} .contentItemInner{ flex-direction:column-reverse; } .contentSliderImage{ width:100% } .contentSliderContent{ width:100% } .section-heading{ padding:0 0 25px 0 } .reviewSlider .slick-slide { margin: 0 20px; } .reviewSlider .slick-list { margin: 0 -20px; } .treatmentImage{ width:100% } .sidebarFormHolderLight,.sidebarImg{ margin:0 0 0 0; } .sidebarFormHolderLight{ padding:45px 25px } .blogDetailsBanner{ padding: 150px 0 0 0; } .awardsRow{flex-wrap:wrap;justify-content:center;gap: 30px; justify-content: center;} .awardsItem {width: calc(50% - 15px); } .qualitySectionSlider,.reviewSlider {width: 100%;margin: 0 auto;} .contentSliderSection .slick-prev{left: 85%;bottom: 40px;position:absolute;z-index:1;color: #fff;font-size: 24px;border: none;background: transparent;opacity: 0.3;} .contentSliderSection .slick-next{left: calc(85% + 45px);bottom: 40px;position:absolute;z-index:1;background: transparent;color: #fff;font-size: 24px;border: none;opacity: 0.3;} .qualitySection p{padding-left: 0;padding-right:0} .beforeAfterGalSec .container {max-width: calc(100% - 60px);padding:0 10px } .beforeAfterGalSlider .slickButton.slick-prev {left: -30px;width:25px;font-size:18px;height:25px } .beforeAfterGalSlider .slickButton.slick-next {right: -30px;width:25px;font-size:18px;height:25px } .beforeAfterGalImg{padding: 0 5px} .sidebarFormHolder,.sidesticky{position:static;} .number{ margin:0 } .hoverImage img{ width:100% } .homeFormHolder{ padding:45px 45px 0 45px; } .formGroup{ flex-wrap:wrap; } .homeFormHolder .inputHolder{ width:100% !important } .step_inner-holder{ flex-wrap:wrap; } .step-box h3:after{width: 100%} .practic-icon-holder{ flex-wrap:wrap; justify-content:center; row-gap:30px; } .practice-icon{ width:32%; } .approachBd::after{ display:none; } .row:nth-child(odd) .approachBdText{ padding:30px 0 0} .row:nth-child(even) .approachBdText{ padding:30px 0 0 } .footerLogo { width:220px; } .team-section{ text-align:center; } .team-section p{ text-align:center; } .teamSlider { margin-top:30px } .special-offer{ background-image:none; } .footer-heading-block{position:relative;pointer-events:all ;padding-right: 20px;} .footer-content-block{ display:none;} .footer-heading-block h2{padding-bottom:0} .footer-content-block > *:first-child{margin-top: 20px} .footer-heading-block:after{ content:''; position:absolute; right:0; top:-3px; content: "\f061"; font-family: 'FontAwesome'; color:#fff; transform: rotate(90deg);transition: all .5s } .footer-heading-block.active:after{ transform: rotate(-90deg); transition: all .5s} .footerTopContent{ flex-direction:column; gap: 30px} .footerwidget_1, .footerwidget_2, .footerwidget_3, .footerwidget_4, .footerwidget_5{ width:100% } .iconBoxCol:not(:last-child){ border:none; } .sliderContent h3{ font-size:24px } .why-choose-image{ width:100%; position:static; } .why-choose-image img { width:100% } .choose-slider-left{ padding-left:0 } .home-contact-form-holder{ padding:40px } .teamHolder{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .cta-image{ position:relative; width:100% } .cta-image img{ width:100% } .cta-section{ padding:0 0 40px 0 } .home-service-section{} .sec-image-in img{ max-width:30%; } .partner-logo{ width:25% } .home-form-sec{ padding:35px 30px } .location-top{ min-height:inherit; } .home-service-slider .slick-arrow {width: 36px;height: 36px;} .home-service-slider .slick-list {margin: 0 -28px;} } @media only screen and (max-width:767px){ :root{ --fs-80: 45px; --fs-60: 35px; --fs-50: 32px; --fs-48: 32px; --fs-40: 30px; --fs-36: 28px; --fs-100: 50px; --fs-72: 40px; } h1,h2,h3,h4,h5,h6{ line-height:1.4 } .container{ padding:0 30px; } .btncn{ font-size:16px } .btncn{ padding:13px 17px } .qualityLg{ flex-wrap:wrap; justify-content:center; } .lgItem{ width:45% } .number{ margin:0 0 30px } .contentTop{ margin-bottom:0px } .formGroup{ display:block; } .formGroup{ margin:0 } .reviewSection{ } .reviewItem{ padding:50px 20px } .homeFormHolder input[type=submit]{ margin-top:20px } .headerTop ul li{ padding:0 10px } .reviewItem h6{ font-size:14px } .phoneNumber a span{ display:none; } .bookAppointment span{ display:none; } .bookAppointment a i{ margin:0;display:block;line-height:inherit; } .phoneNumber a{ width: 40px; height: 40px; background: var(--seconday-color); display: block; text-align: center; color:#fff; line-height:40px } .bookAppointment a{ width: 40px; height: 40px; background: var(--main-clr); display: block; text-align: center; color:#fff; line-height:40px; padding:0 } .bookAppointment a{ margin-left:5px } .fixed{ padding:10px 0 } /* Mobile hero: image becomes a cover layer and the caption sits in flow, so long headings can't slide up under the header. */ .sliderImage{ width:100%; position:absolute; inset:0; z-index:1; } .sliderImage img{ height:100% !important; } .sliderContent{ position:relative; z-index:2; top:auto; transform:none; padding:135px 20px 45px; } .sliderInner{ position:relative;} .sliderInner:after{ background: rgb(22, 44, 105); background: linear-gradient(360deg, rgba(22, 44, 105, 1) 0%, rgba(22, 44, 105, 0) 100%); } .treatmentHolder a{ margin-bottom:20px; } .blogTop{ flex-direction:column; } .blogTop div{ width:100% } .innerBannerImage{ width:100%; } .innerBannerImage img{ height:450px } .sidebarFormHolder{ padding:30px 0 45px } .contentSliderHolder .slick-prev{ top:100px; transform:none} .contentSliderHolder .slick-next{ top:100px; transform:none; } .reviewSection{ overflow-x:hidden; } .contactDetails{ margin-bottom:0 } .pageContent{ padding:45px 0 } .qualityImageHolder{ flex-direction:column; } .qualityImage:nth-child(2){ width:100% } .contentSliderSection .slick-next{ left:inherit;right:calc(50% - 30px);bottom:10px } .contentSliderSection .slick-prev{ left:calc(50% - 30px);bottom:10px } .ratingSection{ padding:0 } .contentTop ul{ padding:0 } .contentSliderContent{ padding:30px 15px } .section-heading{ padding:0 } .buttonGroup{ } .buttonGroup a{ margin:0 } .reviewItem{ padding:0 } .reviewSlider{ padding:0 } .ftbtm{ flex-direction:column; text-align:center; } .copyright{ padding-bottom:15px; } .headerMian{padding: 15px 30px;} .phoneNumber a i{ display:block; } .phoneNumber a{ display:flex; align-items:center; justify-content:center; } .bookAppointment a{ border-radius:0; border-radius:50%; } .headerMian .container{ padding:0 15px } .logo,.fixed .logo{ width:85px } .sliderContent{ text-align:center; } .sliderContent h3{ font-size:18px } .sliderContent h1{ font-size:28px; } .bannerButtonGroup a{ margin:0 } .sliderContent{ top:60%; } .homeFormHolder{ padding:0 } .headerTop ul li{ font-size:14px } .treatmentImage{ width:100% } .breadcumb ul{ flex-wrap:wrap; justify-content:center; } .innerBanner .sliderImage img{ height:400px; } .desktop{ display:none; } .mobile{ display:block; } .sliderImage img{ } .galInnerContainer ul li{ font-size:18px } .sidebar{ margin-top:40px; } .footerTopContent table td{ font-size:14px } .blogDetailsBanner{ padding: 50px 0 0 0; } .blogDetailsBanner h1{ padding:0 0 20px 0 } .blogDetailsBanner .sliderImage img{ height:300px; } .blogDetailsBanner{ margin:0 0 30px 0 } .tretmentBannerCaption h1{ text-align:center; } .qualitySectionSlider,.reviewSlider {width: 80%;margin: 30px auto 0;} .qualitySectionSlider{ width:100% } .reviewSlider .slick-prev {left: -38px;} .reviewSlider .slick-next {right: -38px;} .reviewItem p{font-size:16px} .contentImage img{ width:100% } .appointmentSticker{ flex-wrap:wrap; } .appointmentSticker h2{ padding-right:0; font-size:20px; } .meetTabContent{ flex-wrap:wrap; } .meettabImage{ width:100% } .content-cn-inner{ padding:20px; } .awardsRow{ gap:10px } .reviewSlider .slick-slide{ margin:0 } .tab-content>.tab-pane{ opacity:1; display:block; } .accordion-button{ box-shadow:none !important; outline:none !important; } .treatmentImageSlider .slick-next{ right:10px } .treatmentImageSlider .slick-prev{ left:10px } .treatmentImageSlider .slick-track{ padding:0 } .mean-container .mean-nav{margin-top: 59px;} .blogCategorySelect{ flex-wrap:wrap; } .blogCategorySelect span{ font-size:20px; } .blogCategorySelect select{ font-size:20px; } .blogdetails{ padding-top:0 } .contentSlider .slick-dots{ display:flex; justify-content:center; gap:10px } .contentSlider .slick-dots li button{ border:none; text-indent:-999em; border-radius:50%; background:#bfa16452; width:15px; height:15px; border:none; } .contentSlider .slick-dots li.slick-active button{ background:var(--main-clr); } .practice-icon{ width:48% } .footer-btn-sec{ gap:10px; } .social ul{ gap:20px; } .section-heading-inner{ flex-direction:column; } .social-icn a{ width:40px; height:40px; } .language a{ width:40px; height:40px } .language{ margin: 0 5px 0 15px; } .headerHolder{ height:inherit; } .sliderImage img{height: 450px;} .qualitySectionSlider .slick-slide { margin: 0 0px; } .qualitySectionSlider .slick-list { margin: 0 0px; } .qualitySectionSlider .slick-track{ padding:0 0 0} .approachBd .row:not(:last-child){ margin-bottom:40px; } .treatment-repeat{ width:100% } .treatment-welcome .qualityContent{ padding-bottom:0 } .treatment-welcome .qualityContent{ padding: 20px 0 10px 0; } .blogdetails h1{ padding-bottom:20px; } .banerImageHolder .bannerImage img{ height:320px; object-fit:cover; } .sliderContent p{ text-align:center; } .serviceSlider .slick-list{ overflow:visible; } .serviceSlider .slick-slide{ opacity:0.3 } .serviceSlider .slick-slide.slick-current{ opacity:1 } .number{ font-size:18px } .quote-section h2{ font-size:26px } .home-form-inner{ padding:30px } .breadcumb{ margin-top:-70px } .innerbannerContent .container{ padding:0 } .bannerButtonGroup .btncn { text-align:center; font-size:15px } .header-top-content{ flex-direction:column; row-gap:10px } .header-top-content{ padding:0 20px } .icon-box:after{ display:none; } .exparties-header{ flex-direction:column; } .welcomeSection{ padding-bottom:45px } .mobile{ display:block; } .desktop{ display:none; } .choose-slider-main{ flex-direction:column; } .choose-slider-left{ width:100% ; padding:30px 0 0} .choose-slider-right{ width:100% ; border:none; padding: 30px 0} .home-contact-form-holder{ padding:30px } .homeTeamSlider { width:80%; margin:0 auto; } .blogSlider .slick-prev{ width:40px; height:40px } .blogSlider .slick-next{ width:40px; height:40px } .blogSlider .slick-list{ overflow:visible; } .blogSlider .slick-slide { margin: 0 10px; } .blogSlider .slick-list { margin: 0 -10px; } .blogSlider .slick-slide{ opacity:0.5 } .blogSlider .slick-slide.slick-active{ opacity:1.0 } .welcomeContent h1{ padding-bottom:20px } .footerwidget_1{ padding-bottom:0 } .innerBanner .sliderContent p{ text-align:center; } .cta-inner{ padding:30px 0 0 0} .footerwidget_2{ padding:0 } .btncn{ font-size:14px } .headerHolder{ margin:0 15px } .partner-logo{ width:33.33% } .download-sec-inner{ flex-direction:column; } .home-form-sec{ width:100%; order:2 } .home-form-image{ width:100%; order:1 } .location-inner{ padding:15px } .btncn{ white-space:inherit; } .side-holder{ padding:25px 15px } .light-content-sec{ padding:25px 15px;border-radius:20px } .side-form-holder{ padding:30px } .white-bg{ padding:25px } .partner-logo img{ max-width:60%; margin: 0 auto;} .icon-box{ padding:0 } .side-form-holder{ margin-top:45px } .partner-logo{ text-align:center; } .location-content{ display:none; } .location-inner{ border-bottom:1px solid #fff; } .home-service-image img{} } @media (max-width: 519px) { .teamHolder{display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; } .partner-logo{ width:50% } } @media (max-width: 1199px) { .mega-menu-wrapper{ background:transparent; position:relative; width:100%; padding:0 } .mega-menu-container.container{width:100%;padding:0;max-width: 100%;} .mean-container .mean-nav ul li a.mean-expand{ border:none !important;background:transparent; } .mean-container .mean-nav ul li a.mean-expand:hover{ background:transparent; } .section-parent-menu{ margin:0 } ul.dropdown-menu-holder{ padding:0 !important } } /*contact SECTION start*/ .mapHolder{ margin:15px 0 30px 0 ;} .mapHolder { overflow: hidden; padding-top: 56.25%; position: relative; display: block; border: 2px solid #728f94;} .mapHolder iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .openingHr table{width: auto;} .openingHr table td{padding: 8px 10px 8px 0; border: 0; font-size: var(--fs-20);} .openingHr h2{ font-size:var(--fs-36); } .pageContent .clcikbtn-new:has( i){padding-left: 40px;} .pageContent .clcikbtn-new i{position:absolute;top:22px;left:0;} .icon-list {display: flex; gap: 12px; font-size: var(--fs-20); color: var(--body-font-color); transition: 0.3s;margin-bottom:30px } .icon-list-icon {flex-shrink: 0; line-height: 1.4; width: 24px;color:var(--seconday-color); } .icon-list-text p {padding-bottom: 0; transition: 0.3s; } .icon-list:not(:last-child) {margin-bottom: 15px; } a.icon-list:hover,a.icon-list:hover .icon-list-icon{color: var(--hover-color); } .contact-sec h5{font-size: var(--fs-20); padding-bottom: 20px;} /*contact SECTION end*/ .ratingSection{ padding:30px 0; } .ratingSection h4{ font-size:var(--fs-16); padding:0 0 0; font-weight:500; text-transform:uppercase;font-family:var(--bodyfont);margin:0;letter-spacing:0.05em } .number{ font-size:var(--fs-48); font-weight:600;font-family: var(--headfont);;} @media only screen and (max-width:1199px){ .ratingSection .row {--bs-gutter-x: 8px; justify-content: space-between; } .ratingSection h4 {font-size: 11px; } .number {font-size: 20px; } .ratingSection .row > [class*=col] {width: auto; } } /* Publication Section Style - Start */ .publication-sec .row{counter-reset: publication-counter;} .publication-sec .publication { background: #d8e1d7; padding: 18px 20px; margin-bottom: 18px; border-left: 4px solid var(--green-bg); box-shadow: 0 2px 6px rgba(0,0,0,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius: 6px; position: relative; padding-left: 50px; counter-increment: publication-counter; } .publication-sec .publication::before { content: counter(publication-counter) "."; position: absolute; left: 10px; top: 50%; font-weight: 300; font-size: var(--fs-20); color: var(--main-clr); transform: translateY(-50%); } .publication-sec .publication p{text-align: left;} .publication-sec .publication p:last-child{padding-bottom: 0;} /* Hover effect (desktop only) */ @media (hover: hover) { .publication-sec .publication:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); } } /* Tablet */ @media (max-width: 768px) { .publication-sec .publication { padding: 16px; margin-bottom: 16px; border-left-width: 3px; } } /* Mobile */ @media (max-width: 480px) { .publication-sec .publication { padding: 14px; margin-bottom: 14px; border-left: 3px solid var(--green-bg); border-radius: 4px; padding-left: 40px; } .publication-sec .publication::before { left: 10px; font-size: 16px; } } /* Publication Section Style - End */ /* Presentation Section Style - Start */ .presentation-sec .row{counter-reset: publication-counter;} .presentation-sec .publication { background: var(--main-clr); padding: 18px 20px; margin-bottom: 18px; border-left: 4px solid var(--green-bg); box-shadow: 0 2px 6px rgba(0,0,0,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius: 6px; position: relative; padding-left: 50px; counter-increment: publication-counter; } .presentation-sec .publication::before { content: counter(publication-counter) "."; position: absolute; left: 10px; top: 50%; font-weight: 300; font-size: var(--fs-20); color: #fff; transform: translateY(-50%); } .presentation-sec .publication p{text-align: left; color:#fff;} .presentation-sec .publication p:last-child{padding-bottom: 0;} /* Hover effect (desktop only) */ @media (hover: hover) { .presentation-sec .publication:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); } } /* Tablet */ @media (max-width: 768px) { .presentation-sec .publication { padding: 16px; margin-bottom: 16px; border-left-width: 3px; } } /* Mobile */ @media (max-width: 480px) { .presentation-sec .publication { padding: 14px; margin-bottom: 14px; border-left: 3px solid var(--green-bg); border-radius: 4px; padding-left: 40px; } .presentation-sec .publication::before { left: 10px; font-size: 16px; } } /* Presentation Section Style - End */ /* Publication Section Style - Start */ .sp-publications { padding: 40px 0; } .sp-publications__inner { width: min(1100px, 92%); margin: 0 auto; } .sp-publications__title { margin: 0 0 18px; } .sp-publications__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .sp-publications__card { display: block; border: 1px solid rgba(0,0,0,0.10); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; transition: transform 180ms ease, box-shadow 180ms ease; } .sp-publications__card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); } .sp-publications__media { aspect-ratio: 16 / 10; background: rgba(0,0,0,0.04); } .sp-publications__img { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-publications__meta { padding: 14px 14px 16px; } .sp-publications__item-title { margin: 0; font-size: 16px; line-height: 1.3; } @media (max-width: 900px) { .sp-publications__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .sp-publications__grid { grid-template-columns: 1fr; } } /* Publication Section Style - End */ /* Homepage rhythm: lighten the "Meet Dr Ross" intro so the navy doesn't run unbroken from the hero. Scoped to the front page; other pages keep the dark intro design. */ .home .contentSection.dark-bg{ background:var(--light-bg); } .home .contentSection.dark-bg.text-white *{ color:var(--body-font-color); } .home .contentSection.dark-bg.text-white h2{ color:var(--main-clr); } .home .contentSection.dark-bg.text-white h5{ color:var(--green-bg); font-weight:600; } .home .contentSection.dark-bg .btncn-default, .home .contentSection.dark-bg.text-white .btncn-default{ background:var(--seconday-color); color:var(--white-color); } .home .contentSection.dark-bg.text-white .btncn-default:hover{ background:var(--main-clr); color:var(--white-color); } .home .contentSection.dark-bg p a{ color:var(--green-bg) !important; } .home .contentSection.dark-bg p a:hover{ color:var(--main-clr) !important; } div .gform_heading { display:none; } span .gfield_required { display:none; } span .gform_ajax_spinner { display:none; } @media only screen and (min-width:1200px){.no-banner {padding-top: 250px;}} /* Buttons on green sections were the SAME green as the background, so they vanished and had no visible hover. Give them a white fill with a clear navy hover for contrast and an obvious live state. */ .green-bg-sec .btncn-default, .light-green-bg .btncn-default{ background:var(--white-color); color:var(--main-clr); } .green-bg-sec .btncn-default:hover, .light-green-bg .btncn-default:hover{ background:var(--main-clr); color:var(--white-color); } /* ============================================================ Mega menu — authoritative full-width column grid. The inherited design used a fragile hover-to-reveal panel: the category list sat far left, the children floated in a centred green panel, and the right third stayed empty ("covers half the screen"). Replace it with a clean 4-column grid where every category heading + its child links are visible at once and the panel fills the container width edge to edge. ============================================================ */ @media only screen and (min-width:1200px){ /* Panel opens to fit its content (no fixed 600px that clipped/over-ran) */ .navigation nav ul li:hover .mega-menu-wrapper{ height:auto !important; overflow:visible !important; } .mega-menu-wrapper{ padding:0 !important; } .section-parent-menu{ padding:52px 0 !important; } /* The grid */ .navigation nav ul.dropdown-menu-holder{ display:flex !important; flex-wrap:nowrap !important; width:100% !important; gap:36px !important; padding:0 !important; align-items:flex-start !important; align-content:initial !important; } .navigation nav ul.dropdown-menu-holder > li{ display:block !important; width:25% !important; flex:1 1 0 !important; margin:0 !important; } /* Category heading */ .navigation nav ul.dropdown-menu-holder > li > a{ display:block !important; width:auto !important; white-space:normal !important; color:var(--white-color) !important; font-size:var(--fs-20) !important; font-weight:600 !important; line-height:1.3 !important; padding:0 0 14px 0 !important; margin:0 0 14px 0 !important; border-bottom:1px solid rgba(255,255,255,.20) !important; background-image:none !important; pointer-events:auto !important; border-radius:0 !important; } .navigation nav ul.dropdown-menu-holder > li > a:hover{ background:transparent !important; color:var(--brand-sage) !important; } /* Children always visible (no hover-reveal, no green floating panel) */ .navigation nav ul.dropdown-menu-holder > li > ul{ position:static !important; opacity:1 !important; z-index:auto !important; width:auto !important; padding:0 !important; display:block !important; transition:none !important; transform:none !important; min-height:0 !important; } .navigation nav ul.dropdown-menu-holder > li > ul::before{ display:none !important; } .navigation nav ul.dropdown-menu-holder > li > ul > li{ width:100% !important; } .navigation nav ul.dropdown-menu-holder li ul li a{ display:block !important; color:rgba(255,255,255,.82) !important; font-size:var(--fs-16) !important; padding:7px 0 !important; font-weight:300 !important; white-space:normal !important; margin:0 !important; } .navigation nav ul.dropdown-menu-holder li ul li a:hover{ color:var(--white-color) !important; text-decoration:underline !important; text-underline-offset:4px; } } /* ============================================================ Elevation system — modernise oversized pill-radius panels. The previous designer used 60–62px radii on large content panels, which reads as dated/bubbly. Normalise to a calm 24px with soft, consistent shadows so panels feel like considered cards. (Form INPUT pills keep their rounded look.) ============================================================ */ .download-sec-inner, .side-form-holder, .side-holder, .light-content-sec, .white-bg{ border-radius:24px; } .light-content-sec{ box-shadow:0 10px 30px rgba(0,43,79,.06); } .side-form-holder{ box-shadow:0 24px 55px rgba(0,43,79,.20); } .download-sec-inner{ box-shadow:0 24px 55px rgba(0,43,79,.18); } /* Contact form: elevate to a clean white card (was a flat grey box) so it matches the quiz/appointment card language. Scoped so treatment-page sidebars are untouched. */ .contact-sec .sidebar{ background:transparent; padding:0; margin:0; } .contact-sec .sidebarFormHolder{ background:var(--white-color); border-radius:24px; padding:44px; box-shadow:0 22px 55px rgba(0,43,79,.12); } /* ============================================================ Visual polish pass — site-wide refinements ============================================================ */ /* 1. Readable measure for centred section intros. Lead paragraphs ran ~966px wide (≈140 chars/line); hold them to a comfortable measure so centred copy reads as intentional. */ /* NB: exclude .faqHolder — its answers are left-aligned accordion copy, not a centred lead paragraph, so they must not be centre-constrained. */ .green-bg-sec:not(.faqHolder) p, .step-form-section .gf-quiz-intro, .home-service-section > .container > .row p, .cta-section .cta-inner p, .glance-sec h6{ max-width: 760px; margin-left:auto; margin-right:auto; } /* FAQ answers: align left under the question with a readable measure (was being squeezed into a narrow centred column). */ .faqHolder .ui-accordion-content-new p{ max-width:860px; margin-left:0; margin-right:0; } /* 2. Consistent accent keyline under centred section headings, so each section opens with a deliberate, designed feel rather than a bare H2. */ .green-bg-sec .text-center h2, .home-service-section h2, .home-location-section h2, .faqHolder .text-center h2{ position:relative; padding-bottom:20px; margin-bottom:10px; } .green-bg-sec .text-center h2:after, .home-service-section h2:after, .home-location-section h2:after, .faqHolder .text-center h2:after{ content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:60px; height:3px; border-radius:2px; } /* green keyline on light backgrounds, white on dark/green */ .home-service-section h2:after, .home-location-section h2:after{ background:var(--seconday-color); } .green-bg-sec .text-center h2:after, .faqHolder .text-center h2:after{ background:rgba(255,255,255,.6); } /* 3. Homepage service cards — overlay for legibility + hover lift */ .home-service-item{ border-radius:30px; overflow:hidden; transition:transform .4s ease, box-shadow .4s ease; } .home-service-image:after{ content:''; position:absolute; inset:0; border-radius:30px; background:linear-gradient(180deg, rgba(0,43,79,.45) 0%, rgba(0,43,79,.82) 100%); } .home-service-item:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.20); } .home-slider-caption ul li a{ transition:color .25s ease; } /* "Learn More" → clear bordered pill */ .home-slider-caption > a{ display:inline-block; margin-top:8px; padding:11px 30px; border:1.5px solid rgba(255,255,255,.7); border-radius:40px; text-decoration:none !important; font-size:var(--fs-16); letter-spacing:.5px; } .home-slider-caption > a:hover{ background:var(--white-color); color:var(--main-clr) !important; border-color:var(--white-color); } /* 4. Partner / affiliation logo strip — normalise to a uniform height, centre each cell, and use a subtle grey→colour hover so a mismatched logo set reads as a clean, cohesive row. */ .partner-log-holder{ row-gap:10px; } .partner-logo{ display:flex; align-items:center; justify-content:center; min-height:110px; } .partner-logo img{ max-height:64px; width:auto; max-width:80%; object-fit:contain; filter:grayscale(100%); opacity:.6; transition:filter .3s ease, opacity .3s ease; } .partner-logo:hover img{ filter:none; opacity:1; } /* ============================================================ ED / self-assessment quiz — two-column layout. The explanation now sits BESIDE the quiz card (left), so the navy section no longer stacks a wall of centred text above the form. Reads as "context → action" instead of "essay → quiz". ============================================================ */ .quiz-section .quiz-section__grid{ padding:20px 0; } .quiz-section .quiz-intro{ text-align:left; } .quiz-section .quiz-intro h2{ text-align:left; color:#fff; padding:0; margin:0 0 20px; } .quiz-section .quiz-intro p{ text-align:left !important; max-width:none; margin:0 0 16px; color:rgba(255,255,255,.82); font-size:var(--fs-18); line-height:1.65; } .quiz-section .quiz-intro p:last-child{ margin-bottom:0; } .quiz-section .quiz-intro p strong{ color:#fff; } .quiz-section .quiz-card{ border-radius:24px; padding:42px 46px; text-align:left; box-shadow:0 30px 70px rgba(0,0,0,.30); } .quiz-section .quiz-card__head{ border-bottom:1px solid #e7edf0; padding-bottom:20px; margin-bottom:26px; } .quiz-section .quiz-card__head h3{ text-align:left; padding:0; margin:0; font-size:var(--fs-30); } @media only screen and (max-width:991px){ .quiz-section .quiz-intro{ text-align:center; } .quiz-section .quiz-intro h2, .quiz-section .quiz-intro p{ text-align:center !important; } .quiz-section .quiz-card{ padding:30px 24px; } } /* ============================================================ Treatment page rhythm (scoped to single treatment pages) Problem: each content block renders as its own tall, heavily padded full-width band — short copy beside a large near-square image leaves big empty voids and the page reads as an endless stack. Tighten padding, cap side images, and vertically centre text with the image so each section is compact and balanced. ============================================================ */ @media only screen and (min-width:992px){ /* Tighter vertical rhythm between content bands */ .single-treatment .contentSection, .single-treatment .main-content-sec, .single-treatment .content-section-mid{ padding-top:48px; padding-bottom:48px; } /* Vertically centre copy against the side image (dark classification rows lacked this, so short text top-aligned and left a void) */ .single-treatment .contentSection .contentTop > .container > .row, .single-treatment .content-section-mid .container > .row{ align-items:center; } /* Cap the oversized side images so bands aren't driven to ~640px tall */ .single-treatment .contentImage img{ max-height:400px; width:100%; object-fit:cover; object-position:center; border-radius:20px; } .single-treatment .contentImage .rounded-image img{ max-height:400px; object-fit:cover; } /* Full-width text-only sections: hold a comfortable reading measure instead of stretching a short paragraph across the whole band */ .single-treatment .main-content-sec .container > .row > .col-lg-12{ max-width:980px; margin-left:auto; margin-right:auto; } } /* ============================================================ 2026 motion — tasteful, performant micro-interactions. GPU-friendly (transform/opacity). Honours reduced-motion: the .reveal hidden state only applies when motion is allowed (and JS only tags .reveal then), so content never hides for reduced-motion users. ============================================================ */ @media (prefers-reduced-motion: no-preference){ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; } .reveal.is-visible{ opacity:1; transform:none; } } /* Buttons: smooth hover lift */ .btncn, .book-online a, .home-service-cta{ transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .25s ease, box-shadow .25s ease !important; } .btncn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,43,79,.20); } .book-online a:hover{ transform:translateY(-1px); } /* Cards: consistent hover lift */ .publication, .sp-publications__card, .light-content-sec, .location-inner, .home-service-item{ transition: transform .35s ease, box-shadow .35s ease; } .location-inner:hover, .light-content-sec:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,43,79,.16); } .publication:hover{ transform:translateY(-3px); } /* Mega menu: staggered column entrance on open. Safe-by-default: the columns' resting state stays fully visible (opacity:1); the animation only plays on hover via a from/to keyframe, so a column can never get stuck hidden. */ @media (min-width:1200px){ .navigation nav ul li:hover .dropdown-menu-holder > li{ animation:megaColIn .5s cubic-bezier(.22,.61,.36,1) both; } .navigation nav ul li:hover .dropdown-menu-holder > li:nth-child(1){ animation-delay:.04s; } .navigation nav ul li:hover .dropdown-menu-holder > li:nth-child(2){ animation-delay:.10s; } .navigation nav ul li:hover .dropdown-menu-holder > li:nth-child(3){ animation-delay:.16s; } .navigation nav ul li:hover .dropdown-menu-holder > li:nth-child(4){ animation-delay:.22s; } } @keyframes megaColIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } } /* Mega/child link nudge on hover */ @media (min-width:1200px){ .navigation nav ul.dropdown-menu-holder li ul li a{ transition:color .25s ease, padding-left .25s ease !important; } .navigation nav ul.dropdown-menu-holder li ul li a:hover{ padding-left:6px !important; } } /* Respect reduced-motion: neutralise the mega entrance animation */ @media (prefers-reduced-motion: reduce){ .navigation nav ul li:hover .dropdown-menu-holder > li{ opacity:1; transform:none; animation:none; } .mega-menu-wrapper{ opacity:1; transform:none; } } /* ============================================================ Homepage category cards (rebuilt) — "Explore Treatments". Light cards: image top (consistent aspect) + title link + one-line description + green Learn More button. Replaces the old dark-overlay tiles that auto-listed child pages. ============================================================ */ /* Flex-centre so a short/last row (fewer items than columns) centres in the container instead of hugging left. Per-modifier calc() basis keeps exact column counts: homepage 4-up (--4), cross-link grids 3-up (default/--3). */ .home-service-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px; align-items:stretch; } .home-service-grid .home-service-item{ flex:0 1 calc((100% - 56px) / 3); max-width:340px; } /* 3-up */ .home-service-grid--4 .home-service-item{ flex-basis:calc((100% - 84px) / 4); } /* homepage 4-up */ .home-service-section .home-service-item{ position:relative; z-index:2; height:auto; display:flex; flex-direction:column; background:var(--white-color); border:1px solid rgba(0,43,79,.07); border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,43,79,.07); transition:transform .35s ease, box-shadow .35s ease; } .home-service-section .home-service-item:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(0,43,79,.16); } .home-service-media{ display:block; aspect-ratio:16 / 11; overflow:hidden; background:var(--light-bg); } .home-service-media img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; transition:transform .55s ease; } .home-service-section .home-service-item:hover .home-service-media img{ transform:scale(1.05); } .home-service-body{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:26px 26px 30px; flex:1 1 auto; text-align:left; } .home-service-body h3{ font-size:var(--fs-24); font-weight:600; padding:0; margin:0; line-height:1.25; } .home-service-body h3 a{ color:var(--main-clr); } .home-service-body h3 a:hover{ color:var(--seconday-color); } .home-service-body p{ color:var(--light-font-clr); font-size:var(--fs-16); line-height:1.55; padding:0; margin:0 0 4px; text-align:left; } /* Pin the button to the bottom so cards align regardless of text length */ .home-service-body .home-service-cta{ margin:16px 0 0; margin-top:auto; } @media only screen and (max-width:991px){ .home-service-grid{ gap:20px; } .home-service-grid .home-service-item, .home-service-grid--4 .home-service-item{ flex-basis:calc((100% - 20px) / 2); max-width:none; } /* 2-up */ } @media only screen and (max-width:600px){ .home-service-grid .home-service-item, .home-service-grid--4 .home-service-item{ flex-basis:100%; max-width:none; } /* 1-up */ } .card-text, .card-text *{color: var(--body-font-color) !important;} /* ============================================================ Slim condensing header (replaces the tall centred stacked logo). Single row, logo left, fixed; condenses to 70px once the page is scrolled past 80px (.is-scrolled toggled in custom.js). ============================================================ */ .header{ position:fixed; top:0; left:0; width:100%; z-index:9999; background:var(--main-clr); box-shadow:0 2px 0 rgba(0,0,0,.04); } .header .headerMian{ flex-direction:row; align-items:center; justify-content:flex-start; gap:30px; height:96px; padding:0 40px; background:transparent; transition:height .35s ease; } .header .logo{ width:auto; flex-shrink:0; } .header .logo a{ display:block; } .header .logo img{ height:64px; width:auto; display:block; transition:height .35s ease; } .header .headerHolder{ flex:1 1 auto; height:100%; padding:0; gap:26px; display:flex; align-items:center; justify-content:flex-end; } .header .navigation{ flex:0 1 auto; padding:0; } .header .navigation nav>ul{ align-items:center; } .header .navigation nav>ul>li>a{ line-height:96px; transition:line-height .35s ease; } .header .book-online{ align-self:stretch; flex-shrink:0; } /* Condensed state */ .header.is-scrolled .headerMian{ height:70px; } .header.is-scrolled .logo img{ height:46px; } .header.is-scrolled .navigation nav>ul>li>a{ line-height:70px; } /* Page offset so the fixed header never sits over content */ body{ padding-top:96px; } .banner-holder{ margin-top:0 !important; } /* The old 250px no-banner offset was sized for the previous tall header; the body padding now clears the fixed header, so neutralise it. */ .no-banner{ padding-top:0 !important; } /* Logged-in admin bar: drop the fixed header below it so there's no gap between the header and the content. */ .admin-bar .header{ top:32px; } @media screen and (max-width:782px){ .admin-bar .header{ top:46px; } } @media only screen and (max-width:1199px){ .header .headerMian{ height:70px; padding:0 20px; gap:14px; } .header .logo img{ height:44px; } .header.is-scrolled .headerMian{ height:64px; } body{ padding-top:70px; } } /* ============================================================ Home banner — left text column + navy scrim. Keeps copy off Dr Ross (right of frame), drops the low-contrast sage line, and trims to headline + one white line + button. Scoped to the homepage slider (.banner) so inner-page banners (.innerBanner) are unaffected. ============================================================ */ .banner .slider-item-inner{ position:relative; } .banner .slider-item-inner::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(0,43,79,.85) 0%, rgba(0,43,79,.55) 38%, rgba(0,43,79,0) 70%); } .banner .sliderImage img{ object-position:75% center; } .banner .sliderContent{ z-index:2; text-align:left; } .banner .sliderContent .container > *{ max-width:560px; margin-left:0; } .banner .sliderContent h1{ font-size:48px; line-height:1.15; } .banner .sliderContent h3{ font-weight:400; } /* Drop the sage support line (low contrast on the image) */ .banner .sliderContent p{ display:none; } @media only screen and (max-width:991px){ .banner .slider-item-inner::before{ background:linear-gradient(180deg, rgba(0,43,79,.5) 0%, rgba(0,43,79,.82) 100%); } .banner .sliderImage img{ object-position:70% center; } .banner .sliderContent .container > *{ max-width:none; } } /* ============================================================ Colour restraint + single section green + CTA de-dup (items 3-5) ============================================================ */ /* Section subheadings: navy on light, white on dark — not green */ .main-content-sec h5{ color:var(--main-clr); } .home .contentSection.dark-bg.text-white h5{ color:var(--main-clr); } .choose-slider-left h6{ color:var(--white-color); } /* One section green: the sage "Book a Consultation" band becomes the brand green with white text (no sage as a section background) */ .light-green-bg{ background:var(--green-bg); } .light-green-bg, .light-green-bg h2, .light-green-bg h3, .light-green-bg h5, .light-green-bg p, .light-green-bg li{ color:var(--white-color); } .light-green-bg a:not(.btncn){ color:var(--white-color) !important; } .light-green-bg ul li:after{ color:var(--white-color) !important; } /* Sage never as text on a green/dark surface (low contrast) */ .feature-info-sec ul li:after{ color:var(--white-color); } .dark-bg p a{ color:var(--white-color) !important; text-decoration:underline; text-underline-offset:3px; } .dark-bg p a:hover{ color:var(--brand-sage) !important; } /* One ask at the foot: drop the consult band when it directly follows the enquiry form (keeps the form as the single CTA) */ .appointment-sec + .light-green-bg{ display:none; } /* ============================================================ Affiliations merged under "Why Men Choose Dr Ross" (partner-logo strip relocated by custom.js). ============================================================ */ .partner-logo-section--merged{ padding-top:36px; padding-bottom:50px; } .partner-eyebrow{ text-align:center; text-transform:uppercase; letter-spacing:2px; font-size:13px; font-weight:600; color:var(--seconday-color); margin:0 0 24px; padding:0; } /* ============================================================ Quiz section polish (homepage self-assessment) ============================================================ */ /* Card: subtle green top accent + a touch more presence */ .quiz-section .quiz-card{ border-top:4px solid var(--seconday-color); box-shadow:0 30px 70px rgba(0,0,0,.32); } .quiz-section .quiz-card__head h3{ font-size:var(--fs-26); } /* Intro: readable measure + green keyline under the heading */ .quiz-section .quiz-intro{ max-width:460px; } .quiz-section .quiz-intro h2{ position:relative; padding-bottom:18px; margin-bottom:18px; } .quiz-section .quiz-intro h2:after{ content:''; position:absolute; left:0; bottom:0; width:56px; height:3px; border-radius:2px; background:var(--seconday-color); } .quiz-section .quiz-intro p{ line-height:1.7; } /* Step label + progress bar */ .quiz-section .gf_progressbar_title{ color:var(--main-clr) !important; letter-spacing:1px !important; } .quiz-section .gf_progressbar{ background:rgba(0,43,79,.08) !important; border-radius:30px !important; height:8px !important; padding:0 !important; overflow:hidden !important; box-shadow:none !important; margin-bottom:26px !important; } .quiz-section .gf_progressbar_percentage, .quiz-section .percentbar_blue{ background:var(--seconday-color) !important; height:8px !important; border-radius:30px !important; line-height:8px !important; } .quiz-section .gf_progressbar_percentage span{ display:none !important; } /* Options: clearer hover + selected */ .quiz-section .gfield_radio .gchoice label, .quiz-section .gfield_checkbox .gchoice label{ border:2px solid transparent !important; transition:background .2s ease, border-color .2s ease !important; } .quiz-section .gfield_radio .gchoice label:hover, .quiz-section .gfield_checkbox .gchoice label:hover{ background:#e7f0ea !important; border-color:var(--seconday-color) !important; } /* Continue/next: prominent full-width primary action */ .quiz-section .gform_page_footer{ display:flex !important; gap:14px !important; } .quiz-section .gform_page_footer input[type=button], .quiz-section .gform_page_footer input[type=submit]{ flex:1 1 auto !important; min-width:160px !important; } .quiz-section .gform_page_footer .gform_previous_button{ flex:0 0 auto !important; background:transparent !important; color:#fff !important; border:2px solid rgba(0,43,79,.2) !important; color:var(--main-clr) !important; } /* ============================================================ Treatments landing — 2x2 category card grid (built by custom.js from the curated category sections). ============================================================ */ .tcat-section{ background:var(--light-bg); padding:64px 0; } .tcat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; align-items:stretch; } .tcat-card{ display:flex; flex-direction:column; background:var(--white-color); border:1px solid rgba(0,43,79,.07); border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,43,79,.07); transition:transform .35s ease, box-shadow .35s ease; } .tcat-card:hover{ transform:translateY(-5px); box-shadow:0 22px 48px rgba(0,43,79,.16); } .tcat-card__media{ display:block; aspect-ratio:16 / 8; overflow:hidden; background:var(--light-bg); } .tcat-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; } .tcat-card:hover .tcat-card__media img{ transform:scale(1.05); } .tcat-card__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:26px 28px 30px; gap:12px; text-align:left; } .tcat-card__title{ margin:0; padding:0; font-size:var(--fs-24); font-weight:600; line-height:1.2; } .tcat-card__title a{ color:var(--main-clr); } .tcat-card__title a:hover{ color:var(--seconday-color); } .tcat-card__desc{ margin:0; padding:0; color:var(--light-font-clr); font-size:var(--fs-16); line-height:1.55; } .tcat-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 6px; } .tcat-chip{ font-size:13px; line-height:1; padding:8px 13px; border-radius:30px; background:#eef2f1; color:var(--main-clr); border:1px solid rgba(0,43,79,.06); transition:background .2s ease, color .2s ease, border-color .2s ease; } .tcat-chip:hover{ background:var(--seconday-color); color:var(--white-color); border-color:var(--seconday-color); } .tcat-card__btn{ margin-top:auto; align-self:flex-start; white-space:normal; } @media only screen and (max-width:991px){ .tcat-grid{ grid-template-columns:1fr; gap:20px; } .tcat-section{ padding:44px 0; } } /* ============================================================ Partner Logo Slider — slim auto-scrolling marquee block. Seamless loop (logo set rendered twice -> translateX -50%), pause on hover, greyscale -> colour on hover, edge fade. Honours prefers-reduced-motion (static centred row). ============================================================ */ .partner-slider{ background:transparent; padding:20px 0; overflow:hidden; } .partner-slider__viewport{ width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .partner-slider__track{ display:flex; align-items:center; width:max-content; animation:partner-marquee 45s linear infinite; will-change:transform; } .partner-slider:hover .partner-slider__track{ animation-play-state:paused; } .partner-slider__item{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; height:48px; padding:0 40px; } .partner-slider__item img{ max-height:40px; width:auto; max-width:170px; object-fit:contain; display:block; filter:grayscale(100%); opacity:.6; transition:filter .3s ease, opacity .3s ease; } .partner-slider__item img:hover{ filter:none; opacity:1; } @keyframes partner-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media only screen and (max-width:767px){ .partner-slider__item{ padding:0 26px; height:44px; } .partner-slider__item img{ max-height:34px; max-width:130px; } } /* Reduced motion: no auto-scroll — show a static, centred row */ @media (prefers-reduced-motion: reduce){ .partner-slider__viewport{ -webkit-mask-image:none; mask-image:none; } .partner-slider__track{ animation:none; width:100%; flex-wrap:wrap; justify-content:center; gap:14px 0; } .partner-slider__item.is-clone{ display:none; } } /* ============================================================ Eyebrow labels (were

SEO titles, now so the banner title is the page's single

). Keep their original look. ============================================================ */ .innerIntro .sec-eyebrow{ display:block; font-family:var(--bodyfont); font-weight:300; font-size:var(--fs-24); color:rgba(0,43,79,.7); letter-spacing:0; padding:0 0 25px 0; } .pageContent .sec-eyebrow{ display:block; color:var(--seconday-color); font-size:var(--fs-14); text-transform:uppercase; font-weight:300; letter-spacing:1px; padding:0 0 15px 0; } /* ============================================================ Section colour-clash guard. Adjacent same-colour bands get a hairline at the seam so they don't blend into one block. This also covers the enquiry-form band (.appointment-sec is .light-gray-bg) when it follows a grey content section. Where the form follows a navy section the natural contrast is enough — no extra rule, no stray keyline. ============================================================ */ .light-gray-bg + .light-gray-bg{ box-shadow:inset 0 1px 0 rgba(0,43,79,.12); } .green-bg-sec + .green-bg-sec{ box-shadow:inset 0 1px 0 rgba(255,255,255,.20); } /* ============================================================ Treatment-page consistency layer drross_alt_section_bg() (PHP) walks the content sections in order and tags each .sec-alt / --light / --dark, alternating navy & grey so no two adjacent content sections share a background. These rules make every section read as the same template regardless of block: one heading scale, text legible on either background, tidy cards. ============================================================ */ /* --- Legible text + links on alternated NAVY sections -------------- Body text is navy (--body-font-color:#002b4f) by default, so every text element inside a navy band must be forced light. !important + ul/ol li out-rank .main-content-sec ul li (0,1,2, navy text). */ .sec-alt--dark, .sec-alt--dark p, .sec-alt--dark ul li, .sec-alt--dark ol li, .sec-alt--dark h2, .sec-alt--dark h3, .sec-alt--dark h4, .sec-alt--dark h6, .sec-alt--dark strong{ color:#fff !important; } .sec-alt--dark h5{ color:rgba(255,255,255,.72) !important; } .sec-alt--dark a, .sec-alt--dark p a, .sec-alt--dark ul li a, .sec-alt--dark .contentTop ul li a{ color:#8fc7a4 !important; text-decoration:underline; text-underline-offset:3px; } .sec-alt--dark a:hover, .sec-alt--dark p a:hover, .sec-alt--dark ul li a:hover, .sec-alt--dark .contentTop ul li a:hover{ color:#ffffff !important; } .sec-alt--dark ul li:after, .sec-alt--dark .contentTop ul li a:before{ color:#fff !important; } .sec-alt--dark .contentTop ul li a{ border-bottom-color:rgba(255,255,255,.28); } /* Nested light panels keep dark text even inside a navy section (higher specificity + !important to win back from the rules above) */ .sec-alt--dark .light-content-sec, .sec-alt--dark .light-content-sec p, .sec-alt--dark .light-content-sec ul li, .sec-alt--dark .light-content-sec ol li, .sec-alt--dark .light-content-sec h3, .sec-alt--dark .light-content-sec h4, .sec-alt--dark .light-content-sec strong{ color:var(--body-font-color) !important; } .sec-alt--dark .light-content-sec a{ color:var(--green-bg) !important; } .sec-alt--dark .light-content-sec ul li:after{ color:var(--body-font-color) !important; } /* The alternation is authoritative: force the band background so a stray per-block "Additional CSS" override can't break the page rhythm. */ .single-treatment .sec-alt--light{ background:#f0f2f3 !important; } .single-treatment .sec-alt--dark{ background:var(--main-clr) !important; } /* --- One consistent heading scale across every section type -------- */ .sec-alt h2{ font-size:var(--fs-42); } .single-treatment .small-h2 h2{ font-size:var(--fs-42); } /* --- Comparison cards: an even 2-up grid, centred, equal width, each card sized to its own content (no fixed/min/max height, tighter padding). */ .single-treatment .content-section-mid .row.gy-3{ display:grid !important; grid-template-columns:1fr 1fr; gap:24px; max-width:1000px; margin-left:auto; margin-right:auto; align-items:start; } .single-treatment .content-section-mid .row.gy-3 > [class*="col-"]{ flex:none !important; width:auto !important; max-width:none !important; padding:0 !important; } .content-section-mid .light-content-sec{ width:100%; height:auto !important; padding:26px 28px !important; border-radius:18px !important; line-height:1.5; } .content-section-mid .light-content-sec h3{ margin-top:0; font-size:var(--fs-20); padding-bottom:6px; } @media (max-width:600px){ .single-treatment .content-section-mid .row.gy-3{ grid-template-columns:1fr; } } /* ============================================================ Item 7 — multi-item content as horizontal cards. Content-heavy sections list several "items" (a strong-led paragraph or a numbered h4/h5 sub-heading, each followed by a short list/para) as one tall vertical wall. custom.js detects a run of 3+ such items and wraps each into .tx-card inside a responsive .tx-cardgrid, so they read as a row of cards (3–4 across) like the comparison block. White cards work on both the grey and navy alternating bands. ============================================================ */ /* Centred row of cards, 3 across, wrapping to a centred row (a short last row stays centred — no lone card stuck to one side). align-items:stretch evens each row to its tallest sibling only (no fixed/min/max height); cards are flex-column so content stays top-aligned. */ .tx-cardgrid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:24px; margin:30px 0 6px; } /* 2 cards per row, equal width, centred (reads like the comparison cards). */ .tx-card{ flex:0 1 calc((100% - 24px) / 2); max-width:calc((100% - 24px) / 2); } @media (max-width:600px){ .tx-card{ flex-basis:100%; max-width:100%; } } /* A section that holds a card grid gives the cards the full container width (so 3 sit comfortably across) instead of squeezing them beside a side image or callout; that sibling drops to its own full-width row. */ .tx-row-stack > [class*="col-"]{ flex:0 0 100% !important; max-width:100% !important; } .tx-row-stack > [class*="order-md-2"]{ order:-1; } .tx-row-stack .contentImage{ max-width:560px; margin:0 0 4px; } .tx-row-stack .contentImage img{ width:100%; } .tx-card{ background:#fff; border:1px solid rgba(0,43,79,.15); border-radius:18px; padding:28px 26px; box-shadow:0 6px 22px rgba(0,43,79,.05); display:flex; flex-direction:column; } /* Featured pricing tier ("Most Popular") — make it the eye's first stop: brand-green border, soft green tint, a green pill badge, and a lift on desktop. The duplicate in-card title is hidden (the badge replaces it). */ /* Solid white (same as the other tiers; NEVER a transparent tint — the pricing section is on the navy band, where a transparent card goes dark). The 2px green border + badge carry the "featured" emphasis. */ .tx-card--featured{ border:2px solid var(--seconday-color); background:#fff !important; } .tx-card--featured > .tx-card-title{ display:none; } .tx-card__badge{ align-self:flex-start; display:inline-block; background:var(--seconday-color); color:var(--white-color); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1px; line-height:1; padding:7px 14px; border-radius:999px; margin:0 0 14px; } @media (min-width:992px){ .tx-card--featured{ box-shadow:0 16px 34px rgba(74,129,90,.20); } } .tx-card > :first-child{ margin-top:0; } .tx-card-title{ font-family:var(--headfont); font-size:var(--fs-20); font-weight:700; color:var(--main-clr); line-height:1.3; margin:0 0 14px; padding:0; } .tx-card p{ margin:0 0 10px; padding:0; font-size:var(--fs-16); } .tx-card p:last-child{ margin-bottom:0; } .tx-card ul, .tx-card ol{ margin:0; padding:0; } .tx-card ul li, .tx-card ol li{ margin:0 0 9px; } .tx-card ul li:last-child, .tx-card ol li:last-child{ margin-bottom:0; } /* Cards keep dark text on the navy bands (undo the white-forcing) */ .sec-alt--dark .tx-card, .sec-alt--dark .tx-card p, .sec-alt--dark .tx-card ul li, .sec-alt--dark .tx-card ol li, .sec-alt--dark .tx-card strong{ color:var(--body-font-color) !important; } .sec-alt--dark .tx-card .tx-card-title{ color:var(--main-clr) !important; } .sec-alt--dark .tx-card a{ color:var(--green-bg) !important; } .sec-alt--dark .tx-card ul li:after{ color:var(--green-bg) !important; } /* Ticked lists: pull the tick in tight to the text and tighten line spacing (was a 30px indent with a small tick = big gap, plus loose 1.6 line-height). */ .single-treatment .main-content-sec ul li, .single-treatment .contentTop ul li, .single-treatment .content-section-mid ul li, .tx-card ul li, .tx-card ol li{ padding-left:23px !important; margin-bottom:7px !important; line-height:1.45 !important; } .single-treatment .main-content-sec ul li:after, .single-treatment .contentTop ul li:after, .tx-card ul li:after{ top:2px; font-size:13px; } /* ===== Section headings — CENTRED (true page-centre) ===== The section heading + eyebrow (and the intro/comparison header blocks) are centred across the FULL container so they sit in the middle of the page. They are only centred where the heading lives in a full-width column (col-lg-12 / the comparison col-lg-10, forced full-width below). Sections whose heading sits in a narrow column beside an image or the enquiry form (col-lg-7) are left alone, because centring inside that column would push the text off to one side. Body copy and lists stay left for readability. */ .single-treatment .main-content-sec .col-lg-12 > h2, .single-treatment .main-content-sec .col-lg-12 > h3, .single-treatment .main-content-sec .col-lg-12 > h5, .single-treatment .main-content-sec .col-lg-12 > .sec-eyebrow, .single-treatment .innerIntro .col-lg-12 > h2, .single-treatment .innerIntro .col-lg-12 > h3, .single-treatment .innerIntro .col-lg-12 > h5, .single-treatment .innerIntro .col-lg-12 > .sec-eyebrow, .single-treatment .innerIntro .col-lg-12 > p, .single-treatment .content-section-mid .col-lg-10, .single-treatment .content-section-mid .col-lg-10 > *{ text-align:center !important; } /* Comparison header block: full-width and centred on the page */ .single-treatment .content-section-mid .col-lg-10{ flex:0 0 100%; max-width:100%; margin-left:auto; margin-right:auto; } .single-treatment .content-section-mid .container > .row:first-child{ justify-content:center; } /* Comparison card titles stay left, matching the multi-item cards */ .single-treatment .content-section-mid .light-content-sec .text-center{ text-align:left !important; } /* Long standalone lists flow into columns instead of one tall wall */ .tx-multicol{ columns:2; column-gap:46px; } .tx-multicol li{ break-inside:avoid; } @media (max-width:767px){ .tx-multicol{ columns:1; } .tx-cardgrid{ gap:16px; } } /* Cap the heading hierarchy on treatment content sections: one section heading (h2) + one sub-heading scale + one eyebrow, so a single band can't show 3–4 competing sizes. */ .single-treatment .main-content-sec h3, .single-treatment .sec-alt h3{ font-size:var(--fs-30); } .single-treatment .main-content-sec h4, .single-treatment .sec-alt h4{ font-size:var(--fs-20); font-weight:700; } .single-treatment .main-content-sec h5, .single-treatment .main-content-sec h6, .single-treatment .sec-alt h5, .single-treatment .sec-alt h6{ font-size:var(--fs-16); text-transform:uppercase; letter-spacing:.04em; font-weight:600; } /* ============================================================ In-content links — brand colours, never Bootstrap blue. Bootstrap 5.3 is loaded, so classless content fall back to --bs-link-color (#0d6efd). Override the Bootstrap link vars so the default never resolves to blue anywhere, then set explicit brand colours on body-content anchors. Header/footer nav, buttons (.btncn/.btn — they carry a class) and .tx-card links keep their own styling via the :not([class]) scoping. ============================================================ */ :root{ --bs-link-color:#4A815A; --bs-link-color-rgb:74,129,90; --bs-link-hover-color:#002b4f; --bs-link-hover-color-rgb:0,43,79; } main a:not([class]), .contentSection a:not([class]){ color:#4A815A; text-decoration:underline; text-underline-offset:2px; } main a:not([class]):hover, .contentSection a:not([class]):hover{ color:#002b4f; } /* Cross-link card grids land in alternating bands; on the navy bands the generic .sec-alt--dark white-text/link rules would erase the white cards' own colours. Restore the home-service card's light-card palette here. */ .sec-alt--dark .home-service-item, .sec-alt--dark .home-service-body p{ color:var(--light-font-clr) !important; } .sec-alt--dark .home-service-body h3, .sec-alt--dark .home-service-body h3 a{ color:var(--main-clr) !important; } .sec-alt--dark .home-service-body h3 a:hover{ color:var(--seconday-color) !important; } .sec-alt--dark .home-service-cta{ color:var(--white-color) !important; text-decoration:none !important; } .sec-alt--dark .home-service-cta:hover{ color:var(--white-color) !important; } /* The white card-container styles were scoped to .home-service-section; the cross-link card grids reuse the component OUTSIDE that section, so apply the container to any card in a .home-service-grid (covers homepage + cross-link grids). Without this the cards were transparent and went dark on navy bands. */ .home-service-grid .home-service-item{ position:relative; z-index:2; height:auto; display:flex; flex-direction:column; background:var(--white-color); border:1px solid rgba(0,43,79,.07); border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,43,79,.07); transition:transform .35s ease, box-shadow .35s ease; } .home-service-grid .home-service-item:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(0,43,79,.16); } .home-service-grid .home-service-item:hover .home-service-media img{ transform:scale(1.05); } /* Make the cross-link card grids WIDER + BIGGER: break them out of the 980px prose reading-measure so they use the full section width, and let the 3-up cards grow (≈400px vs the cramped 281px that left blurbs half-wrapped). */ @media only screen and (min-width:992px){ .single-treatment .main-content-sec .container > .row > .col-lg-12:has(.home-service-grid), .single-treatment .contentSection .container > .row > .col-lg-12:has(.home-service-grid){ max-width:none; } } .home-service-grid--3 .home-service-item{ max-width:420px; } /* Banner intro / sub-heading paragraph (SEO copy under the banner title) */ .banner-holder .banner-intro{ max-width:640px; margin:6px 0 6px; } .banner-holder .banner-intro p{ color:var(--white-color); font-size:var(--fs-18); font-weight:300; line-height:1.55; padding:0 0 10px 0; } .banner-holder .banner-intro p:last-child{ padding-bottom:0; margin-bottom:0; } /* In-page anchor targets: offset the scroll landing so the fixed header doesn't cover the top of the section the anchor jumps to. */ main section[id]{ scroll-margin-top:110px; } .admin-bar main section[id]{ scroll-margin-top:142px; } /* ============================================================ Consistent section bottom/top gap on treatment pages. Some content blocks have a Bootstrap pb-0 / pt-0 / py-0 utility class baked into their `className` (e.g. Peyronie's "Congenital Penile Curvature" comparison block), which zeroes the band's padding with !important — so its white cards run straight into the next section with no gap. Re-assert the normal treatment section rhythm over those utilities (matches the 48px desktop / 60px sub-1900px values used by every other content band). All and only content sections carry .sec-alt, so the trailing form / partner / FAQ / location bands are untouched. ============================================================ */ .single-treatment main > section.sec-alt.pt-0, .single-treatment main > section.sec-alt.py-0{ padding-top:60px !important; } .single-treatment main > section.sec-alt.pb-0, .single-treatment main > section.sec-alt.py-0{ padding-bottom:60px !important; } @media only screen and (min-width:992px){ .single-treatment main > section.sec-alt.pt-0, .single-treatment main > section.sec-alt.py-0{ padding-top:48px !important; } .single-treatment main > section.sec-alt.pb-0, .single-treatment main > section.sec-alt.py-0{ padding-bottom:48px !important; } } /* ============================================================ Header phone number visible on desktop & laptop. The visible number (.ph-bx) was hidden up to 1430px and only the icon (.ph-icon-hd) showed, so most laptops (1280/1366/1408) saw a phone glyph instead of "1300 525 490". Show the number from the standard desktop breakpoint (>=992px) and keep the icon-only treatment for true mobile/tablet (<992px) where space is tight. ============================================================ */ @media only screen and (min-width:992px){ .ph-bx{ display:block; } .ph-icon-hd{ display:none; } } @media only screen and (max-width:991px){ .ph-bx{ display:none; } .ph-icon-hd{ display:block; } } /* ============================================================ Intro section side image fills its half. The inner-intro block put a fixed ~16:9 image in a col-lg-5 beside a tall col-lg-7 text column with the row vertically centred, so the image floated as a small thumbnail with big empty gaps. Stretch the row so the image column matches the text height and let the image cover its full half (rounded corners kept). min-height floors short rows so the image still reads as a panel, not a thumbnail. ============================================================ */ @media only screen and (min-width:992px){ .innerIntro .contentTop > .container > .row{ align-items:stretch !important; } .innerIntro .contentTop > .container > .row > [class*="col-lg-5"]{ display:flex; } .innerIntro .contentImage{ display:flex; width:100%; } .innerIntro .contentImage img{ width:100%; height:100%; object-fit:cover; min-height:380px; max-height:none; border-radius:20px; } } /* ============================================================ Mega-menu dropdown side gutter. The Treatments mega-menu wrapper is full-bleed (100vw) for its navy background, but the inner .container only carried Bootstrap's ~12px padding, and .section-parent-menu's -10px negative margins cancelled it — so on any screen narrower than the 1440px container cap (e.g. 1280/1366 laptops) the menu content ran to ~2px from the screen edge. Give the inner container a real horizontal gutter and neutralise the negative margins so content never touches the sides; the full-width navy panel stays full-bleed. ============================================================ */ @media only screen and (min-width:1200px){ .mega-menu-container.container{ padding-left:clamp(40px, 4vw, 80px); padding-right:clamp(40px, 4vw, 80px); } .mega-menu-container.container .section-parent-menu{ margin-left:0; margin-right:0; } } /* ============================================================ Inner-page banner scrim (treatment / page / blog banners). The navy scrim was scoped to the homepage slider only, so every inner banner (.banner-holder) had NO overlay — white title/intro text was only readable when the photo happened to be dark. On light photos (e.g. Erectile Dysfunction) the copy was unreadable. Add the same left-weighted navy scrim to all inner banners so white text always has contrast; the right of frame (Dr Ross / photo subject) still shows through. ============================================================ */ .banner-holder .slider-item-inner{ position:relative; } .banner-holder .slider-item-inner::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(0,43,79,.92) 0%, rgba(0,43,79,.82) 42%, rgba(0,43,79,.5) 66%, rgba(0,43,79,.12) 85%, rgba(0,43,79,0) 100%); } .banner-holder .sliderContent{ z-index:2; } /* Blog single-post title is an

; the white-text rule only covered h1/h3, so the title rendered in navy body colour on the banner. */ .sliderContent h1, .sliderContent h2{ color:var(--white-color); } /* Hero framing: default crop sat at 50% 50% and cut faces at the top; shift toward the upper third. Homepage keeps its own 75% framing. */ .sliderImage img{ object-position:50% 30%; } @media only screen and (max-width:991px){ /* Stacked mobile banner: text sits over the lower half — use a vertical scrim instead so the bottom (where copy lands) is dark. */ .banner-holder .slider-item-inner::before{ background:linear-gradient(180deg, rgba(0,43,79,.45) 0%, rgba(0,43,79,.6) 45%, rgba(0,43,79,.9) 100%); } }