/* Theme Name: Highfield Dental Practice Theme URI: # Author: Sk Version: 1.0 */ /* Start - Main Style */ @font-face {font-family: 'LTRemark'; src: url('assets/fonts/LTRemark.eot'); src: url('assets/fonts/LTRemark.eot?#iefix') format('embedded-opentype'), url('assets/fonts/LTRemark.woff2') format('woff2'), url('assets/fonts/LTRemark.woff') format('woff'), url('assets/fonts/LTRemark.ttf') format('truetype'), url('assets/fonts/LTRemark.svg#LTRemark') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face {font-family: 'HelveticaNeue'; src: url('assets/fonts/HelveticaNeue-Bold.eot'); src: 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: bold; font-style: normal; font-display: swap; } @font-face {font-family: 'HelveticaNeue'; src: url('assets/fonts/HelveticaNeue-Medium.eot'); src: 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: 'HelveticaNeue'; src: url('assets/fonts/HelveticaNeue-Roman.eot'); src: 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: normal; font-style: normal; font-display: swap; } @font-face {font-family: 'HelveticaNeue'; src: url('assets/fonts/HelveticaNeue-Light.eot'); src: 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; } @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); *{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);overflow-x: hidden; } 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; color: var(--seconday-color);} 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(--main-clr);} ::selection { color: #fff; background: var(--main-clr);} /*variables--*/ :root{ --bodyfont: "Raleway", sans-serif; --headfont: "Raleway", sans-serif; --fs-80:80px; --fs-100:100px; --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-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; --main-clr:#393d3f; --seconday-color:#eda700; --body-font-color:#161617; --black-color:#000; --secondary-font-color:rgba(22,44,105,0.7); --white-color:#fff; --hover-color:#885610; --color2:#000000; --topbarColor:#555861; } body{ font-family:var(--bodyfont);background: #fff} h1{ margin: 0px; padding: 0px; font-weight:300; font-size: 55px; color: var(--body-font-color); font-family: var(--headfont); padding:0 0 30px 0; font-family: var(--headfont); } h2{ margin: 0px; padding: 0px; font-size: 55px; color: var(--body-font-color); font-family: var(--headfont); font-weight: 300; padding: 0 0 30px 0} h3{ margin: 0px; padding: 0px; font-family:var(--headfont); font-weight:300; font-size: 32px; color:var(--body-font-color); padding:0 0 25px 0 } h4{ margin: 0px; padding: 0px; font-family: var(--headfont); font-weight: 300; font-size: 20px; color: var(--body-font-color); padding:0 0 18px 0 } h5{ margin: 0px; padding: 0px; font-weight:300; font-size:var(--fs-21); color:var(--body-font-color); } h6{ margin: 0px; padding: 0px; font-weight:300; font-size:var(--fs-14);color: var(--body-font-color); letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--bodyfont);opacity: 0.4} .pageContent ul {color:var(--body-font-color); font-size:var(--fs-20); line-height:1.4; font-weight:300} .pageContent li {padding: 0 0 15px 0;} p{ color:var(--body-font-color); font-size:var(--fs-20); line-height:1.4; padding: 0 0 30px 0;font-weight:300} .btncn{position:relative;display: inline-block;padding: 15px 37px;font-size: var(--fs-18);font-weight:400;border-radius: 0;margin:20px 8px;text-transform: uppercase;font-family: var(--bodyfont);letter-spacing: 0.1em;} .btncn:hover{ background:var(--hover-color); } .btncn-default{background: var(--seconday-color);color: #fff;outline: 1px solid var(--seconday-color);outline-offset: 8px;} .btncn-default:hover{ background:var(--hover-color);outline-color:var(--hover-color) } .btncn-dark{background:var(--main-clr); color: #fff;outline: 1px solid var(--main-clr);outline-offset: 8px;} .btncn-dark:hover{ background:var(--hover-color);outline-color:var(--hover-color) } section{ padding:90px 0 } .g-5, .gx-5 { --bs-gutter-x: 5rem;} .g-4, .gx-4 { --bs-gutter-x: 3rem;} .g-4, .gy-4 { --bs-gutter-y: 3rem;} .desktop{ display:block; } .mobile{ display:none; } .main-clr-bg{background:var(--main-clr);} .duelBg{background:linear-gradient(to bottom, var(--main-clr) 50%, transparent 50%);} .text-white,.text-white *{color:#fff!important} @media (min-width: 1400px) { .header .container { max-width: 100%; } } @media (min-width: 1800px) { .header .container { max-width: 1750px; } } @media (min-width: 1600px) { .container { max-width: 1450px; } } /*Header*/ .headerTop{ background:var(--topbarColor); padding:7px 0; } .headerTop ul{ margin:0; padding:0; list-style:none; } .headerTop ul li{ display:inline-block; vertical-align:top; padding:0 22px; position:relative; font-family:var(--bodyfont); color:var(--white-color);font-size:var(--fs-18);font-weight:300 } .headerTop ul li a{ color:#fff } .headerTop ul li a:hover{ color:var(--hover-color); } .headerTop ul li:before{ content:''; position:absolute; left:0; top:4px; width:1px; height:19px; background:var(--white-color); } .headerTop ul li:first-child:before{ display:none; } .header{ position:relative; z-index: 99} .headerMian{ transition:all .5s; position:relative; width: 100%} .logo{ width:310px; transition:all .5s; position: relative; z-index: 999} .headerHolder{ display:flex; align-items:center;gap: 50px; } .navigation nav ul li a{ z-index: 999; position:relative; } .navigation nav ul{display:flex;margin:0;padding:0;list-style:none;gap:60px;} .navigation nav ul li a{color: var(--color2);font-size: var(--fs-21);position: relative;font-weight: 300} .navigation nav ul li a:hover{ color:var(--seconday-color); } .headerRight{ position: relative; z-index: 999 } ul.dropdown-menu-holder{flex-wrap:wrap;gap: 0 !important;row-gap: 45px !important;width: 100%;border: none;justify-content: space-between;max-width:1400px;margin:0 auto!important;padding-left: 6%!important;} ul.dropdown-menu-holder li {width: 25%;} .navigation nav ul.dropdown-menu-holder > li > a{color: #393939;} ul.dropdown-menu-holder li ul{ display:block; } ul.dropdown-menu-holder li ul li a{font-family:var(--bodyfont)!important;} .section-parent-menu{ width:100% } .section-parent-menu{ margin:0 -10px } @media only screen and (min-width:1199px){ .navigation nav ul li a:after{ content:''; position:absolute; height: 100px; background: transparent; left: 0; width: 100%; top: 50%} .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;background: #333b52;padding-bottom: 4rem;transition: padding .6s ease, opacity .6s ease;/* box-shadow: 0 -150px 0px 0px #333b52; */top: 100%;opacity:0.0;max-height: calc(100vh - 130px);overflow-y: auto} .fixed .mega-menu-wrapper{max-height: calc(100vh - 80px)} .navigation nav ul li:not(:hover) .mega-menu-wrapper{ pointer-events: none; } .navigation nav ul li:not(:hover) .mega-menu-wrapper * { pointer-events: none !important; } .navigation nav ul li:hover .mega-menu-wrapper{pointer-events:all;opacity:1.0;background: #f8f7f6;padding-top:30px} ul.dropdown-menu-holder li a{font-size: var(--fs-30) !important;margin: 0 0 9px 0;display:block;font-family:var(--headfont) !important;} ul.dropdown-menu-holder li ul li a{font-size: var(--fs-20) !important;padding:5px 0;display:block;margin:0;color: #393939;} ul.dropdown-menu-holder li ul li{width:100%;} } @media only screen and (min-width:1401px){ .mega-menu-wrapper{max-height: calc(100vh - 172px);} .fixed .mega-menu-wrapper{max-height: calc(100vh - 80px)} } .mean-container .mean-nav ul li li li a{ padding: 0.5em 15% !important; } .headerRight{ display:flex; align-items:center;margin-left: auto; } .phoneNumber a{ font-weight:bold ; font-size:var(--fs-21); color:var(--topbarColor); } .phoneNumber a:hover{ color:var(--hover-color); } .phoneNumber a i{ display:none; } .bookAppointment a{margin:0 0 0 50px;} .bookAppointment a i{ margin:0 10px 0 0 } .bookAppointment .btncn {padding: 52px 0 52px 50px; outline: 0; position: relative;letter-spacing: 0.05em; } .bookAppointment .btncn::after {content: ''; position: absolute; top: 0; left: 0; background: var(--seconday-color); width: 100vw; height: 100%; z-index: -1;transition:0.5s all } .bookAppointment .btncn:hover:after{background:var(--hover-color);} .fixed{position:fixed;width:100%;left:0;top:0;z-index:9;background: #ffffff;padding:0;transition:all .5s;box-shadow:0 4px 4px rgba(0,0,0,0.1)} .fixed .logo{ width:160px; transition:all .5s; } .fixed .bookAppointment .btncn{padding: 26px 0 26px 50px} .banner{ background: #000; padding: 0 0 0 0; position: relative;} .banner .sliderImage {position: relative; } .banner .sliderImage { width: 100%; min-height: 281px; position: relative; overflow: hidden; } @media (min-width: 768px) { .home .banner .sliderImage { min-height:540px } } @media (min-width: 992px) { .home .banner .sliderImage { min-height:600px } } @media (min-width: 1200px) { .home .banner .sliderImage { min-height:660px } } @media (min-width: 1600px) { .home .banner .sliderImage { min-height:720px } } @media (min-width: 2200px) { .home .banner .sliderImage { min-height:780px } } .banner .sliderImage iframe {width: 100vw; height: 100vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .banner .sliderImage::after {position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: linear-gradient(0deg, #000, transparent); content: ''; opacity: 0.5; } .sliderInner{ position:relative; background:#162c69; overflow:hidden; } .sliderImage{ width:100%;} .sliderImage img{ width:100%; height:100%; object-fit:cover;opacity: 0.6 } .overlay { position: absolute; width: 100%; height: 100%; background: #000; opacity: 50%;} .sliderContent{ position:absolute; top:55%; transform:translateY(-50%); left:0; width:100% ;text-align:center;} .sliderContent h3{font-size:var(--fs-18);color: var(--body-font-color); letter-spacing: 0.1em; text-transform: uppercase; padding:0 0 30px 0;font-family:var(--bodyfont);color: #fff } .sliderContent h3 strong{ font-weight:600 } .sliderContent h1{ font-family:var(--headfont); ; font-size:80px; font-weight: 300; padding: 0 0 40px 0;color: #fff;max-width: 800px; margin-left: auto; margin-right: auto;letter-spacing:-0.025em;text-shadow: 5px 8.66px 32px rgba(0, 0, 0, 0.2);} .innerBanner .sliderContent h1,.innerBanner .sliderContent h1{ font-size:80px;;color: #fff;letter-spacing: -0.02em; } .sliderContent p{ color:var(--white-color); font-size:var(--fs-24); padding:0 0 40px 0; font-weight:300 } .bannerButtonGroup{ display:flex; gap:12px } .bannerButtonGroup a i{ margin:0 10px 0 0; } .bannerButtonGroup a.bookBtn{ background:var(--color2); } .bannerButtonGroup a.bookBtn:hover{ background:var(--hover-color); color:#fff } .bannerButtonGroup a.viewBtn{ background:#99a2a9; color:#fff } .bannerButtonGroup a.viewBtn:hover{ background:var(--hover-color); } .qualitySection h2{ padding:0 0 25px 0; } .qualitySection h6{ padding:0 0 30px 0 } .qualitySection p{ text-align: justify; text-align-last: center; padding: 0 39px 30px } .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 } .qualityImage img{ width:100% } .qualityImage:before{ content:''; position:absolute; width:100%; height:100%; bottom:0; left:0;background:#00000069;transition:0.3s } .qualityLg{ display:flex; justify-content:space-between; gap:20px; margin:55px 0 0 0 } .qualityImageHolder{ display:flex; justify-content:space-between; align-items:center; gap:15px } .qualityImage:nth-child(2){ width:39%; flex-shrink:0 } .qualityImage:nth-child(2) h3{ font-size:var(--fs-60);} .contentSection h2{ padding:0 0 25px 0;color:#393d3f; } .contentSection p{ text-align:justify; font-size: var(--fs-20);} .ratingSection{ padding:40px 0 0 0;color:var(--main-clr); } .ratingSection h4{ font-size:var(--fs-20); padding:0 0 12px 0; text-transform:uppercase; letter-spacing:1px; font-weight:300;color:var(--main-clr); } .number{ font-family:var(--headfont); font-size:var(--fs-42); font-weight:400; } .contentImage img{ width:100%;} .contentTop ul{ margin:0; padding:25px 0 0 0; list-style:none; } .contentTop ul li{font-size:var(--fs-24); } .contentTop ul li a{ color:var(--body-font-color); padding: 15px 0; display: block; border-bottom: 1px solid #c1c6d4; position: relative;font-weight: 300} .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:var(--body-font-color);transition: all .5s;} .contentTop ul li a:hover{ color: var(--seconday-color); } .contentTop ul li a:hover:before{ color: var(--seconday-color); } .contentItemInner{ display:flex; background:#333b52 ; align-items: center;position:relative;z-index:2} .contentSliderImage{ position:absolute;z-index:-1;top:0;left: 0;width:100%;height:100%} .contentSliderImage img{object-fit:cover;width:100%;height:100%} .contentSliderContent{ width:46.5%; padding: 190px 120px 120px 120px;background:rgba(33, 33, 32, 0.8);} .contentSliderContent h2{ color:#fff; padding:0 0 30px 0 } .contentSliderContent p{ color:#fff; text-align:justify; padding:0 0 20px 0 } .contentSliderSection .slick-prev{ left:0; top:50%; transform:translateY(-50%); position:absolute; z-index:1; background:rgba(0, 0, 0, 36%); color:#fff; width: 60px; height: 88px; font-size: 24px; border: none;} .contentSliderSection .slick-next{ right:0; top:50%; transform:translateY(-50%); position:absolute; z-index:1; background:rgba(0, 0, 0, 36%); color:#fff;width: 55px; height: 80px; font-size: 24px; border: none; } .section-heading{ padding:25px 0 } .buttonGroup { display:flex; gap:15px; align-items: center; margin: 30px 0 0 0} .buttonGroup.text-center{ justify-content:center; } .btncn i{ margin:0 10px 0 0 } .teamImg{width:100%;padding:9px;border:2px solid var(--seconday-color);margin-bottom:40px} .teamImg img{width:100%;display:block;} .teamHolder h6{font-size:var(--fs-20);opacity:1} .galImage img{width:100%} .homepageFormSection{ background:var(--main-clr); } .homepageFormSection h2{ color:#e9e4da;} .homepageFormSection p{ padding-top:15px; color:#e9e4da ; font-weight: 300} .formGroup{ display:flex; gap:30px; align-items: flex-end;} .homeFormHolder{ padding:30px 0 0 0 } .homeFormHolder input[type=text], .homeFormHolder input[type=email], .homeFormHolder input[type=tel],.homeFormHolder select{ width:100% !important; background-color:transparent !important; border:none !important; border-bottom:1px solid #a0a0a4 !important; padding:15px 0 !important; font-size:14px !important; text-transform:uppercase !important; letter-spacing:2px !important; font-weight:300 !important; color: #fff !important; box-shadow: none !important; border-radius: 0 !important} .homeFormHolder option{background: #333;color: #fff} .homeFormHolder select{padding-right: 50px!important;background-image: url(assets/images/arrow.png) !important;background-repeat: no-repeat !important;background-position: center right !important;background-size:auto;appearance: none;color:#fff; padding:0 !important;} .homeFormHolder .inputHolder{ width:100% } .homeFormHolder ::placeholder { color: rgba(255,255,255, 1); opacity: 1; } .homeFormHolder ::-ms-input-placeholder { color: rgba(255,255,255, 1);} .formGroup{ margin:0 0 45px 0 } .homeFormHolder input[type=submit]{padding: 15px 45px !important; font-size: var(--fs-18) !important; background:var(--seconday-color) !important; border:none; cursor:pointer !important; font-weight:400 !important; transition:all .5s !important; font-family:var(--bodyfont) !important; border-radius:0px !important;text-transform: uppercase !important;letter-spacing: 0.1em !important; } .homeFormHolder .gform_footer{margin-top:45px !important;} .homeFormHolder input[type=submit]:hover{ background:var(--hover-color) !important; transition:all .5s !important; } .homeFormImg{height:100%;width:100%;top:0;right:0;position:absolute;z-index: -1} .homeFormImg::after{content:'';position:absolute;top:0;left:0;width:100%;height: 100%;background: linear-gradient(90deg, #000 36%, transparent);} .homeFormImg img{width:100%;height:100%;object-fit:cover;z-index: -1} .smallLogo{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .homepageFormSection{position:relative;z-index:3;} .reviewSlider { padding:50px 0 0 0 } .reviewSlider .slick-slide { margin: 0 60px; } .reviewSlider .slick-list { margin: 0 -60px; } .reviewItem{ text-align:center;} .star{ font-size:20px; color:var(--seconday-color); margin:0 0 20px 0 } .reviewItem p{ text-align:center; color: #161617;max-width: 345px;margin-left: auto;margin-right:auto;} .reviewItem h6{ font-size:16px;color:#000000;opacity:1 } .btn-view{ text-decoration:underline; text-underline-offset:5px; font-size:var(--fs-30); color:#333b52; font-family:var(--headfont); margin:35px 0 0 0; display:inline-block; } .btn-view:hover{ color:var(--hover-color); } .reviewSlider .slick-prev{ position:absolute; bottom: -119px; left:50%; transform: translateX(-170px); font-size:25px; border:none; outline:none; background:transparent; color:#00000040;font-size:16px ;transition: 0.3s} .reviewSlider .slick-next{ position:absolute; bottom: -119px; right:50%; transform: translateX(170px); font-size:25px; border:none; outline:none; background:transparent; color:#00000040;font-size:16px;transition: 0.3s } .reviewSlider .slick-prev:hover, .reviewSlider .slick-next:hover{ color:var(--body-font-color); } .mapSection img{ width:100% } .footer{ background:var(--main-clr);} .footBottom{ padding:45px 0 } .ftbtm{ justify-content:space-between; align-items:center; display: flex;} .copyright{ font-size:14px; color:rgba(255,255,255,0.4) ; text-transform: uppercase; letter-spacing: 2px; font-weight: 300} .footerTop{ padding:85px 0 50px 0 } .footerTopContent{ display:flex; justify-content:space-between; } .footerwidget_1{ width:40%; } .footerwidget_2{ width:27%; } .footerwidget_3{ width:26%; } .footerTopContent h2{ color:#fff ; font-size: var(--fs-36);padding: 0 0 25px 0} .footerTopContent p{ color:#fff; font-size:var(--fs-16); font-family:var(--bodyfont); line-height:1.5; padding:0 0 20px 0 ; font-weight: 300} .btnnSocialGrp{ display:flex; align-items:center; margin:25px 0 0 0 } .enquiryBtn a{ font-family:var(--bodyfont); font-weight:400; font-size:var(--fs-18); color: #fff; border:1px solid #ffffff; padding: 15px 30px; display: block;} .enquiryBtn a:hover{ background:var(--seconday-color); } .social ul{ margin:0; padding:0; list-style:none; display: flex; gap: 45px} .social ul li a{ display:block ; color:#fff; font-size:22px; } .social ul li a:hover{ color:var(--seconday-color); } .footerTopContent p a{ color:#fff } .footerTopContent p a:hover{ color:var(--seconday-color); } .openingHrList ul{ width:100%; color:#fff ; font-size:var(--fs-16); font-family:var(--bodyfont); line-height:31px; font-weight: 300;padding:0;margin:0;list-style:none;} .openingHrList ul span{min-width: 110px;display: inline-block;} .footerTopContent .btncn-default{ color:#fffbf4; } .footerContactItem {display: flex; gap: 15px; color: #fff; font-weight: 300; padding: 5px 0; margin-bottom: 10px; } .footerContactItem:hover {color:var(--seconday-color); } .footerContactItemImg {min-width: 20px; } .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;} /*! ####################################################################### 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:90%;padding:1em 5%;margin:0;text-align:left;color:#fff;border-top:1px solid #383838;border-top:1px solid rgba(255,255,255,.5);text-decoration:none;text-transform:uppercase}.mean-container .mean-nav ul li li a{width:80%;padding:1em 10%;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:70%;padding:1em 15%}.mean-container .mean-nav ul li li li li a{width:60%;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:32px;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); } /*Treatment Page*/ .innerBanner{ background:var(--main-clr); overflow:hidden; } .innerBannerImage{ width:46%; float:right; } .innerBannerContent{ position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); } .treatmentPage{ background:#ebedf0; } .treatmentPage a.bookBtn{ background:var(--main-clr); color:#fff; } .treatmentPage a.bookBtn i{ color:#fff } .innerBanner{ position:relative; } .breadcumb{ padding:15px 0; background:#e6e5e5; } .breadcumb ul{ display:flex; justify-content:center; margin:0; padding:0; list-style:none; column-gap: 30px;} .breadcumb ul li{ font-family:var(--bodyfont); font-size:var(--fs-16); text-transform:uppercase; letter-spacing:0.2em ; color:rgba(51,59,82,0.3); position:relative;color:var(--main-clr);opacity:0.4; padding: 0;} .breadcumb ul li:after{ content:'|'; position:absolute; color:var(--main-clr); border-radius:50%; right: -20px; top: 0px; } .breadcumb ul li:last-child:after{ display:none; } .breadcumb ul li a{ color:rgba(51,59,82,0.3);color:var(--main-clr) } .breadcumb ul li a:hover{ color:var(--seconday-color); } .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-14); 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); } .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:2;backdrop-filter:brightness(0.6) blur(30px); transition: all .5s } .galInnerContainer ul{ margin:0; padding:0; list-style:none; } .galInnerContainer ul li{ font-size:var(--fs-22); color:#fff; font-weight:400; padding:13px 0 } .galInnerContainer ul li a{ color:#fff } .galInnerContainer ul li a:hover{ color:#aaa; } .treatmentImage{ overflow:hidden;z-index:2 } .treatmentImage img{ transition: all .5s } /*.treatmentImage:hover img{ filter:brightness(0.5) blur(30px); }*/ .treatmentImage:hover .qualityContent h3{ opacity:0; visibility:hidden; transition:all .5s } .treatmentImage:hover .galInnerContainer{ opacity:1; visibility:visible;} .treatmentRepeaterSection .qualityContent h3{font-size:var(--fs-48);} .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; } .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:70px 0; overflow:visible; } .treatmentItem{display:block;} .postExcerpt p{ padding:20px 0 0 0; font-weight: 300; color: var(--body-font-color);font-size:var(--fs-24);} .permalink a{ padding:10px 0; font-weight:300; font-size:var(--fs-18); 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);} .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-family:var(--headfont); padding:0 0 20px 0 ; font-weight: 300;color:var(--main-clr);font-size:40px;} .pageContent h3:not(:first-child){margin-top:40px} .brdholder{ text-align:right; } .sidebarFormHolder{ background:var(--main-clr); padding:55px; margin:0px 0 0 60px} .sidebarFormHolder + div:not([class]){ pointer-events: none; } .sidebarFormHolderLight{ background:#e0dbd3; padding:55px; margin:0px 0 0 60px } .sidebar h3{ color:#fff; font-weight:300; font-family:var(--headfont); font-size:41px; } .sidebar p{ text-align:center; color:#fff; font-weight:300; font-size:16px; line-height:1.6 } .sidebarFormHolder h3 + p{max-width:410px;margin-left:auto;margin-right:auto;} .sidebar-form .inputHolder input[type=text], .sidebar-form .inputHolder input[type=email], .sidebar-form .inputHolder input[type=tel],.sidebar-form select{ width:100% !important; background-color:transparent !important; border:none !important; border-bottom:1px solid #6a6e7b !important; padding:15px 0 !important; font-size:14px !important; text-transform:uppercase !important; letter-spacing:0.1em !important; font-weight:300 !important; color: rgba(233,228,218, 0.4) !important; margin: 0 0 20px 0 !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom:0 !important;} .sidebar-form .inputHolder { width:100% } .sidebar-form .inputHolder ::placeholder { color: rgba(255,255,255, 0.4); opacity: 1; } .sidebar-form .inputHolder ::-ms-input-placeholder { color: rgba(255,255,255, 0.4); opacity: 1} .formGroup{ margin:0 0 45px 0 } .sidebar-form option{background: #333;color: #fff} .sidebar-form select{padding-right: 50px!important;background-image: url(assets/images/arrow.png) !important;background-repeat: no-repeat !important;background-position: center right !important; background-size:auto;appearance: none !important;padding:0 !important;} .sidebar-form input[type=submit]{padding:20px 27px !important; font-size: var(--fs-18) !important; background:var(--seconday-color) !important; border:none !important; cursor:pointer !important; font-weight:400 !important; transition:all .5s !important; font-family:var(--bodyfont) !important; border-radius:0px !important;text-transform: uppercase !important;letter-spacing: 0.1em !important;outline: 1px solid var(--seconday-color)!important;outline-offset: 8px !important; margin: 30px auto 0!important;color:#fff ;display:table !important;} .sidebar-form input[type=submit]:hover{ background:var(--hover-color) !important; transition:all .5s !important;outline-color:var(--hover-color)!important; } .sidebar-form h2{padding:0;} .sidebarFormHolderLight h3{ color:var(--body-font-color); font-weight:400; font-family:var(--headfont); 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:100px; overflow:auto;min-height:200px } .sidebarImg{margin:0px 0 0 60px;} .sidebarImg img{width:100%;} .pageContent .btn-blue{ margin:10px 0 30px 0 } .pageContent .btncn-default:hover{ background:var(--hover-color); } .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 } .faqHolder{ background:#f5f5f5;} .accordian-new h3 { font-family: var(--headfont); font-weight: 400; font-size: var(--fs-24); color: #161617; cursor: pointer; margin-bottom: 0; position: relative; padding: 30px 30px 30px 0; } .ui-accordion-content-new { } .ui-accordion-header-active-new{ border:none !important; } .accordian-new h3:focus { outline: 0} .accordian-new h3:after { content: "\f063"; font-family: 'FontAwesome'; position: absolute; right: 0; top: 19px; font-size: 24px; color: #161617; font-weight: 300; transition: .5s} .faqHolder h2{ color:#000000; font-weight:300;font-size:var(--fs-42); } .inneraccordina-area { padding: 45px 0; } .accordian-new h3.ui-accordion-header-active-new:after { transform: rotate(180deg); color: #161617} .accordianarea-new .accordian h3.ui-accordion-header-active-new:after { transform: rotate(-180deg); color: #161617} .ui-accordion-content-new { padding: 0px 0px 10px 0; display: none} .ui-accordion-content-new p { text-align: justify; color: #161617;} .accroHolder{ border-bottom:1px solid #c0bec1; } .trtmnt-accordian-new h3 {color: var(--body-font-color);font-size:var(--fs-24);padding: 15px 29px 15px 0;display: block;position: relative;cursor:pointer;} .trtmnt-ui-accordion-header-active-new{ border:none !important; } .trtmnt-accordian-new h3:focus { outline: 0} .trtmnt-accordian-new h3:after {content: "\f063";font-family: 'FontAwesome';position: absolute;right: 0;top: 20px;font-size: 22px;color: #000;font-weight: 300;transition: .5s} .inneraccordina-area { padding: 45px 0; } .trtmnt-accordian-new h3.trtmnt-ui-accordion-header-active-new:after { transform: rotate(180deg);} .trtmnt-ui-accordion-content-new { padding: 0px 0px 10px 0; display: none} .trtmnt-ui-accordion-content-new p {text-align: justify;} .trtmnt-accroHolder{ border-bottom:1px solid #c2c1c1; } .contactmap{ margin:10px 0 45px 0 } .contactDetails{ padding:15px 0;font-weight:300;font-size:var(--fs-20); } .contactDetails p{ padding:0;margin:0 } .contactDetailsIcon{min-width:25px;color:var(--seconday-color); } .contactDetails a{ color:var(--body-font-color); } .contactDetails a:hover{ color:var(--hover-color); } .contactDetails {display: flex; gap: 15px;font-weight: 300;} .blogCategorySelect{ padding:20px 30px ; display:flex; align-items:center; background:#f5f5f5; margin:0 0 40px 0 } .blogCategorySelect span{ font-family:var(--headfont); font-size:var(--fs-30); font-weight:400; padding:0 12px 0 0;color:#161617 } .blogCategorySelect select{ width:100%; border:none; background:transparent; font-family:var(--headfont); font-size:var(--fs-30); font-weight:400; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image:url(assets/images/downArrow.png); background-repeat:no-repeat; background-position: 100% center;color: #161617} .blogImage img{width:100%} .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 } .treatmentBanner{ background:#333b52; overflow:hidden; padding:160px 0 0 0; position:relative; } .treatmentBannerImage{ width:55%; float:right; } .treatmentBannerImage img{ width:100% } .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;} .openingHrTable table{color:var(--body-font-color); font-size:var(--fs-18); line-height:1.4; padding: 0 0 30px 0;font-weight:300;} .openingHrTable table td:first-child{min-width: 145px} .openingHrTable td {padding: 9px 0; } .aboutSec {position: relative; overflow: hidden; min-height: 810px; display: flex; flex-direction: column; justify-content: center; } .aboutSecImage {position: absolute; top: 0; right: 0; width: 47%; height: 100%; } .aboutSecImage img {width: 100%; height: 100%; object-fit: cover; } .aboutSecTextInr {width: 46%; } .aboutSecTextInr h6 {padding: 0 0 30px 0; } .aboutSecTextInr p {max-width: 590px; text-align: justify;} .aboutSecImageLogo{position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);z-index: 1;} .featureSec{text-align:center;} .featureSec .row{row-gap:10px;} .featureSec h3{color: #393d3f} .featureSecItem img {padding-bottom: 25px; } .homeCtaSecImg{width:100%;} .homeCtaSecImg img{display:block;width:100%;} .homeCtaSecText{max-width:990px;width:90%;background:#fff;margin:-115px auto 0;text-align:center;padding:50px 100px 0;position:relative;} .smallLogoTop{margin:-78px auto;text-align:center;} @media only screen and (max-width:1600px){ :root{ --fs-100: 60px; --fs-48: 40px; } .logo{ width:160px } .navigation nav ul{ gap:40px } .bannerContent{ padding-right:0 } .banner .slick-dots{ bottom:60px } .number{ font-size:38px } section{ padding:60px 0 } .smallLogoTop{margin: -40px auto;} .smallLogoTop img{height:80px} } @media only screen and (max-width:1500px){ :root{ --fs-100 :50px; --fs-60: 45px; --fs-48: 36px; --fs-42:34px ; --fs-36: 30px; --fs-30: 28px; --fs-24: 20px; --fs-21: 19px; --fs-20: 18px; } .banner .slick-dots{ max-width:1310px } .footerwidget_2 {width: 30%; } .blogDetailsBanner{ padding:160px 0 0 0 } .tretmentBannerCaption{ bottom:7% } } @media only screen and (max-width:1400px){ .bookAppointment a{font-size: var(--fs-21); } .sliderContent p{ font-size: } .qualitySection{ } .contentBottom ul li a{ font-size:20px } .number{ font-size:30px } .contentTop{ margin:0 0 0 0 } .homepageFormSection{ padding:50px 0 } .footerTop{ padding:50px 0 } .footBottom{ padding:0 0 50px 0 } .contentSliderContent{ padding:60px 60px 60px 91px} .sliderContent h1{ font-size:44px; padding:0 0 20px 0 } .bookAppointment a {margin: 0 0 0 30px; } .bookAppointment .btncn,.fixed .bookAppointment .btncn {padding: 30px 0px 30px 15px; } .headerHolder {gap: 30px; } .navigation nav ul {gap: 28px; } .aboutSecImageLogo {width: 80px; } .navigation nav ul li a {font-size: 16px; } .featureSec h3 {font-size: 27px; padding-bottom: 15px;} .footerwidget_2 {width: 32%; } .footerwidget_1 {width: 29%; } .footerwidget_3 {width: 31%; } } @media only screen and (max-width:1199px){ .banner .slick-dots{ max-width:1130px; bottom:10px } .banner ul.slick-dots{ display:none !important; } .bookAppointment a{ margin:0 60px 0 25px } .qualityContent h3{ font-size:22px } .qualityImage:nth-child(2) h3{ font-size:30px } .footerTopContent{ display:block; } .footerwidget_1{ width:100%; } .footerwidget_2{ width:100%; margin:30px 0 10px 0} .footerwidget_3{ width:100%;margin-top:30px } .footerTopContent h2{padding-bottom:15px} .reviewSection{ padding-top:50px; padding-bottom:50px } .mean-container .mean-bar { position: absolute; left: 0; width: 100%; float: none; z-index: 99; top: 22px;pointer-events: none;background: transparent;} .mean-container .mean-bar a{pointer-events: all} .headerHolder{ position:relative; } .bookAppointment .btncn,.fixed .bookAppointment .btncn{padding:30px} .bookAppointment .btncn::after{display:none;} .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(--seconday-color); padding: 8px 8px 8px; color: var(--seconday-color);} .mean-container .mean-nav{ margin-top:58px } .fixed .mean-container .mean-nav{ margin-top:58px } .featureSecItem img {width: 70px; } .mean-container .mean-nav ul li a{ font-family:var(--bodyfont); } .mean-container .mean-nav ul li:first-child a{ border:none; } .logo { width: 140px; } .fixed .logo{ width: 100px; } .innerBannerImage img{ height:500px; object-fit:cover; } .sidebarFormHolder,.sidebarImg{ margin: 0px 0 0 30px; } .itemContent{ padding:0 59px 0 0 } .itemContent p{ line-height:1.4; font-size:16px } .sliderContent h3{ padding-bottom:7px; font-size: 12px; } .sliderContent h1{ font-size:43px; padding:0 0 5px 0 } .sliderContent{ top:54% } .qualityContent{ padding:0 20px } .g-5, .gx-5{ --bs-gutter-x: 2rem; } .mean-container a.meanmenu-reveal span{ background:var(--seconday-color); } .headerRight{ position:static; } .mean-nav { box-shadow: -50vw 0 0 var(--hover-color), 50vw 0 0 var(--hover-color)} .mean-container .mean-nav{ background:var(--hover-color); } .treatmentBannerImage{ width:100%; float:none; } .treatmentBanner{ padding:100px 0 0 0 } .navigation{display:none;} .contentTop ul{padding-top:0} } @media only screen and (max-width:991px){ :root{ --fs-100 :50px; --fs-60: 45px; --fs-48: 36px; --fs-42:34px ; --fs-36:24px; --fs-30:22px; --fs-24:17px; --fs-21:16px; --fs-20:16px; --fs-18:16px; } .sliderImage img{ height:500px } .sidebarFormHolder,.sidebarImg{ 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 } .contentItemInner{ flex-direction:column; } .contentSliderImage{ width:100% } .contentSliderContent{ width:100%;padding:60px 90px } .section-heading{ padding:0 0 25px 0 } .reviewSlider .slick-slide { margin: 0 20px; } .reviewSlider .slick-list { margin: 0 -20px; } .sidebarFormHolderLight{ margin:30px 0 0 0; } .sidebarFormHolderLight{ padding:45px 25px } .blogDetailsBanner{ padding: 150px 0 0 0; } .homeFormImg {position: static; width: 100%; } .homepageFormSection {padding-top: 0; } .smallLogo {position: static; transform: none; margin: -60px auto 0; text-align: center; } .treatmentImageSlider {width: 85%; margin: 0 auto; } .treatmentImageSlider .slick-slide {margin: 0 20px; } .sidesticky{position:static;-webkit-position:static} .accordian-new h3:after {top: 34px;font-size: 16px;} .aboutSecImage {position: static;width: 100%;} .aboutSecImageLogo {position: static; transform: none; margin: -40px auto; } .aboutSec {padding-bottom: 0; } .aboutSecTextInr {width: 100%; padding-bottom: 60px; } .homeCtaSecText {margin-top: -50px; } .homeFormImg::after {display: none; } .pageContent h3:not(:first-child){margin-top:20px} .pageContent .btncn:not(:last-child){margin-bottom: 45px} .blogCategorySelect select{background-size: 15px;} .reviewSlider .slick-prev {transform: translateX(-130px); bottom: -68px; } .reviewSlider .slick-next {transform: translateX(130px);bottom: -68px } } @media only screen and (max-width:767px){ :root{ --fs-100 : 38px; --fs-60: 35px; --fs-48:30px; --fs-42:28px ; } .container{ padding:0 40px; } .btncn{ font-size:16px } .btncn{ padding:13px 17px } .qualityLg{ flex-wrap:wrap; justify-content:center; } .lgItem{ width:45% } .qualitySection p{ padding:0 0 30px 0 } .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; } .logo{ width:180px } .headerMian{ padding:15px 0 } .bookAppointment a i{margin:0;line-height: 40px;} .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(--seconday-color); display: block; text-align: center; color:#fff; line-height:40px; padding:0 } .bookAppointment a{ margin-left:5px } .fixed .logo{ width:160px } .sliderImage{ width:100%; } .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:390px } .sidebarFormHolder{ padding:45px 25px } .contentSliderHolder .slick-prev{ top:100px; transform:none} .contentSliderHolder .slick-next{ top:100px; transform:none; } .reviewSection{ overflow-x:hidden; } .contactDetails{ padding-top:0 } .qualityImageHolder{ flex-direction:column; } .qualityImage:nth-child(2){ width:100% } .contentSection{ padding-top:0 } .duelBg .contentSliderSection{ padding-top:0 } .contentSliderSection .slick-next, .contentSliderSection .slick-prev{ width:30px; height:45px; top:100px; } .ratingSection{ padding:0 } .contentTop ul{ padding:0 } .contentSliderContent{ padding:30px 15px } .section-heading{ padding:0 } .buttonGroup{ flex-direction:column; } .buttonGroup a{ margin:0 } .btncn{ width:calc(100% - 16px); text-align:center; } .reviewItem{ padding:0 } .reviewSlider{ padding:0 } .ftbtm{ flex-direction:column; text-align:center; } .copyright{ padding-bottom:15px; } .headerMian{ position:static;} .phoneNumber a i{ display:block; } .phoneNumber a{ display:flex; align-items:center; justify-content:center; } .bookAppointment a{border-radius:0;outline: 0!important;} .headerMian .container{ padding:0 15px } .logo{ width:160px } .sliderContent{ text-align:center; } .bannerButtonGroup{ flex-direction:column; } .bannerButtonGroup a{ margin:0 } .sliderContent{ top:50%; } .homeFormHolder{ padding:15px 0 0 0 } .headerTop ul li{ font-size:14px } .breadcumb ul{ flex-wrap:wrap; } .innerBanner .sliderImage img{ height:330px; } .desktop{ display:none; } .mobile{display:block;} .sliderImage img{ filter:brightness(0.7); } .galInnerContainer ul li{ font-size:18px;padding: 5px 0; } .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; } .treatmentBanner{ padding:0 } .treatmentBannerImage img{ height:350px; object-fit:cover; } .mean-container a.meanmenu-reveal{margin:0} .bookAppointment a {margin: 0 46px 0 6px; } .qualityImage:nth-child(2) h3{font-size:22px} .contentSliderImage {position: static; } .treatmentImageSlider .slick-center {transform: scale(1);} .treatmentImageSlider .slick-track{padding:0} .openingHrTable table td:first-child {min-width: 100px; } .bookAppointment .btncn, .fixed .bookAppointment .btncn{padding: 0} .mean-container .mean-bar{top:0} .mean-container .mean-nav,.fixed .mean-container .mean-nav {margin-top: 50px; } .homeCtaSec {padding-top: 0; } .homeCtaSecText {padding: 15px; margin-top: -25px; } .homeFormHolder {padding-top: 50px; } .btn-view {font-size: 25px; } .breadcumb ul li{font-size:14px} } @media only screen and (max-width:380px){ .btncn{font-size:15px} } @media (max-width: 1199px) { .mega-menu-wrapper{ background:transparent; position:relative; width:100%; padding:0} .mega-menu-container.container{ width:100%; padding:0 } .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 } } .sticky-buttons { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #fff; z-index: 1000; justify-content: space-between; align-items: stretch; padding: 0 } .sticky-buttons .button { text-decoration: none; font-size: 14px; font-weight: 400; text-transform: uppercase; color: #fff; text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: none; margin: 0; padding: 10px 0 } .sticky-buttons .call-now { background-color: var(--main-clr); } .sticky-buttons .whatsapp { background-color: #25d366 } .sticky-buttons .book-now { background-color: var(--seconday-color); } .sticky-buttons .button i { font-size: 20px; margin-bottom: 5px } @media (max-width: 768px) { .footer{ padding-bottom:40px; } .sticky-buttons { display:flex } } /* Team Section Modal */ /* Custom Modal Styles */ .custom-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); margin: 0 !important; } /* Center modal content */ .custom-modal-content { position: absolute; top: 10%; left: 25%; /* Adjust centring */ width: 60%; /* Set width to 30% of the screen */ padding: 50px; background-color: #fff; border-radius: 0; text-align: left; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .custom-modal-content h3 {color: var(--seconday-color); padding: 0;} .custom-modal-content h4 {font-size: 1.2rem;} /* Make modal content responsive for smaller screens */ @media (max-width: 768px) { .custom-modal-content { left: 5%; /* Adjust centring */ width: 90%; /* Increase width for smaller screens */ } } /* Close button */ .close-modal { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #000; } p.special-details { font-size: 17px; } /* Overlay full height */ .custom-modal .custom-modal-content { animation: fadeIn 0.3s ease-out; } .responsive-table { width: 100%; overflow-x: auto; } .responsive-table { width: 100%; overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } th { background-color: #22211F; color: white; text-transform: uppercase; } td { border-left: none; border-right: none; } .category-heading { background-color: #22211F; font-weight: normal; letter-spacing: 1px; color: white; text-transform: uppercase; font-size: 15px; } .subtext { font-size: smaller; font-style: italic; display: block; color: #666; } .note { font-style: italic; padding-top: 10px; } body .gform_wrapper #gform_2 .gform_body .gform_fields .gfield textarea, body .gform_wrapper #gform_4 .gform_body .gform_fields .gfield textarea { width:100% !important; background:transparent !important; border:none !important; border-bottom:1px solid rgba(255,255,255,0.6) !important; padding:15px 0 !important; font-size:14px !important; text-transform:uppercase !important; letter-spacing:2px !important; font-weight:300 !important; color: rgba(255,255,255,0.6) !important; margin: 0 0 0 0 !important; border-radius: 0 !important; box-shadow: none !important;} #gform_2 .gform-field-label--type-inline, #gform_2 legend.gfield_label.gform-field-label, #gform_4 .gform-field-label--type-inline, #gform_4 legend.gfield_label.gform-field-label { color: #fff !important; } .plan-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 20px; } .card { background-color: white; border: 2px solid var(--main-clr); border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 100%; max-width: 320px; padding: 20px; text-align: left; } .card h2 { color: var(--seconday-color); font-size: 1.5rem; margin-bottom: 0; padding: 0; } .card ul { padding: 0; list-style-type: none; } .card ul li { margin-bottom: 10px; font-size: 0.95rem; } .card li { display: flex; align-items: center; padding: 0.5rem 0; /* Add spacing between items */ font-size: 1rem; /* Ensure readability */ line-height: 1.5; colour: #333; /* Neutral text colour */ border-bottom: 1px solid #f0f0f0; /* Add a subtle divider between items */ } .card li:last-child { border-bottom: none; /* Remove border from the last item */ } .card li::before { content: "✓"; /* Add a checkmark before each item */ font-size: 1.2rem; /* Slightly larger icon */ color: var(--seconday-color); /* Branded colour for the checkmark */ margin-right: 0.75rem; /* Add spacing between icon and text */ } .card .price { color: var(--seconday-color); font-weight: bold; font-size: 1.2rem; margin-top: 10px; } @media (min-width: 768px) { .card { flex: 1 1 calc(33.333% - 20px); } } @media (max-width: 480px) { .card { max-width: 100%; } .card h2 { font-size: 1.3rem; } .card ul li { font-size: 0.9rem; } .card .price { font-size: 1rem; } } .pricing-table { max-width: 800px; margin: 2rem auto; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid var(--seconday-color); } tr.category-header { color: var(--seconday-color); font-weight: normal; text-align: left; text-transform: uppercase; letter-spacing: 1px; } tr.category-header td { text-align: left !important; } .pricing-table table { width: 100%; border-collapse: collapse; } .pricing-table thead { background-color: #462E66; color: white; } .pricing-table thead th { text-align: left; padding: 1rem; } .pricing-table tbody tr:nth-child(even) { background-color: #f4f4f4; } .pricing-table tbody tr:hover { background-color: #eaeaea; } .pricing-table tbody td { padding: 1rem; border-bottom: 1px solid #ddd; } @media screen and (max-width: 600px) { .pricing-table table, .pricing-table thead, .pricing-table tbody, .pricing-table th, .pricing-table td, .pricing-table tr { display: block; } .pricing-table thead tr { position: absolute; top: -9999px; left: -9999px; } .pricing-table tr { border: 1px solid #ccc; } .pricing-table td { border: none; position: relative; text-align: left; } .pricing-table td::before { content: attr(data-label); position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-weight: bold; color: #462E66; } } .disclaimer p {font-size: 12px;} /* End - Main Style */ .custom-whatsapp-modal__overlay { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0, 0, 0, 0.5); } .custom-whatsapp-modal__content { background: #fff; margin: 5% auto; padding: 22px 19px; border-radius: 0px; width: 90%; max-width: 600px; position: relative; } .custom-whatsapp-modal__content h3 { margin-bottom: 10px; padding: 0; } .custom-whatsapp-modal__content p { padding: 0 0 10px 0; } .custom-whatsapp-modal__close { position: absolute; top: -15px; right: -11px; font-size: 28px; cursor: pointer; background: #fff; border-radius: 100%; width: 40px; height: 40px; text-align: center; line-height: 34px; border: 1px solid var(--seconday-color); } body #gform_submit_button_5 { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; background-color: #25D366; color: white; font-size: 16px; font-weight: normal; text-decoration: none; border-radius: 15px; transition: background-color 0.3s ease; border: none; text-transform: uppercase; cursor: pointer; letter-spacing: 1px; line-height: 14px; margin: 0 auto;} .whatsapp-button i { font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: 400; font-size: 20px; display: inline-block; } /* === Invisalign Open Day === */ .invisalign-open-day { background-color: #f8f9fa; } /* Event Info Styling */ .event-details { gap: 2rem; margin-top: 2rem; margin-bottom: 2.5rem; } .event-detail-box { background-color: #fff8e1; border: 1px solid #ffe58f; padding: 1.5rem 1.25rem; border-radius: 0.75rem; height: 100%; } .event-icon { font-size: 2rem; margin-bottom: 0.5rem; } .event-label { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; color: #666; margin-bottom: 0.25rem; } .event-value { font-size: 1rem; font-weight: 700; color: #222; line-height: 1.4; } /* Optional: spacing between boxes on smaller screens */ @media (max-width: 767.98px) { .event-detail-box { margin-bottom: 1rem; } } /* Step Cards */ .step-card { background-color: #ffffff; border: 1px solid #e5e5e5; transition: box-shadow 0.3s ease, border-color 0.3s ease; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding: 2rem; text-align: center; } .step-card:hover { box-shadow: 0 0 14px rgba(0, 0, 0, 0.05); border-color: #ffc107; } .step-circle { font-size: 1.25rem; font-weight: 700; background-color: #ffc107; color: #fff; width: 44px; height: 44px; line-height: 44px; border-radius: 50%; margin: 0 auto; } .step-value { font-size: 0.9rem; font-weight: 600; color: #ffc107; margin: 0.5rem 0 0.75rem; display: inline-block; border-bottom: 2px solid #ffc107; padding-bottom: 2px; } /* Buttons */ .btn-warning { background: linear-gradient(90deg, #ffc107 0%, #ffb300 100%); color: #000; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.5px; border: none; transition: all 0.2s ease-in-out; border-radius: 0.375rem; } .btn-warning:hover { background: #e0a800; color: #000; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .btn-xl { font-size: 1.25rem; padding: 1rem 2.75rem; } /* Gravity Form Overrides */ .gravity-form-wrapper form { margin-top: 1.5rem; } .gravity-form-wrapper .gform_heading { display: none; } .gravity-form-wrapper .gform_wrapper { text-align: left; } .gravity-form-wrapper .gform_body { margin-top: 1rem; } .gravity-form-wrapper .gform_fields { row-gap: 1.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .gravity-form-wrapper .gform_footer { margin-top: 2rem; text-align: center; } .gravity-form-wrapper input[type="text"], .gravity-form-wrapper input[type="email"], .gravity-form-wrapper input[type="tel"], .gravity-form-wrapper textarea, .gravity-form-wrapper select { width: 100%; padding: 0.75rem 1rem; font-size: 0.95rem; border: 1px solid #ced4da; border-radius: 0.375rem; margin-bottom: 0.5rem; background-color: #fff; } .gravity-form-wrapper input[type="submit"], .gravity-form-wrapper .gform_button { background: linear-gradient(90deg, #ffc107 0%, #ffb300 100%); border: none; padding: 0.85rem 2rem; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; border-radius: 0.375rem; color: #000; transition: all 0.3s ease-in-out; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); cursor: pointer; } .gravity-form-wrapper input[type="submit"]:hover, .gravity-form-wrapper .gform_button:hover { background-color: #e0a800; color: #000; } /* Responsive */ @media (max-width: 767.98px) { .step-card { padding: 1.5rem; } .btn-xl { width: 100%; padding: 0.9rem 1rem; } } .terms-and-conditions { font-size: 0.85rem; color: #666; background-color: #f9f9f9; padding: 2rem 1rem; border-top: 1px solid #e0e0e0; } .terms-and-conditions h5 { font-size: 1rem; text-transform: uppercase; font-weight: 600; margin-bottom: 1rem; color: #444; } .terms-and-conditions ul { padding-left: 1.2rem; margin-bottom: 1.5rem; } .terms-and-conditions ul li { margin-bottom: 0.5rem; line-height: 1.4; } .terms-and-conditions a { color: #cc9900; text-decoration: none; } .terms-and-conditions a:hover { text-decoration: underline; } /* Parent layout for radio field */ #gform_wrapper_8 .gfield_radio { display: flex; flex-direction: column; gap: 1rem; } /* Make each choice a block */ #gform_wrapper_8 .gchoice { display: block; width: 100%; position: relative; } /* Hide native radio */ #gform_wrapper_8 .gchoice input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } /* Style label as card */ #gform_wrapper_8 .gchoice label { display: flex; align-items: flex-start; gap: 1rem; width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: 12px; background: #f9f9f9; padding: 1.25rem 1.5rem; cursor: pointer; transition: all 0.3s ease; font-size: 1rem; font-weight: bold; margin: 0 !important; } /* Style when selected */ #gform_wrapper_8 .gchoice input[type="radio"]:checked + label { border-color: #244289; background-color: #edf0ff; box-shadow: 0 0 0 2px rgba(36, 66, 137, 0.2); } /* Icon inside label */ #gform_wrapper_8 .gchoice label i { font-size: 1.5rem; color: #244289; flex-shrink: 0; margin-top: 0.25rem; } /* Text area next to icon */ #gform_wrapper_8 .gchoice label strong, #gform_wrapper_8 .gchoice label .radio-description { display: block; line-height: 1.4; } /* Description styling */ #gform_wrapper_8 .gchoice label .radio-description { font-weight: normal; font-size: 0.95rem; color: #555; margin-top: 0.25rem; } .iti { width: 100%; position: relative; } .iti input { padding-left: 52px !important; /* adjust to avoid overlapping with flag */ } .iti__flag-container { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 2; } .iti__country-list { z-index: 9999 !important; max-height: 250px; overflow-y: auto; } .gform_wrapper .iti { margin-bottom: 20px; } .page-id-669 #dppm-footer-menu {display: none; !important} .gform-conversational.gform-theme--foundation .gform-conversational__screen-content { padding-block: 10px !important;} .inactive {display: none !important;}