/* Theme Name: Jersey Orthodontic Centre 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:#ffffff; 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} 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: "Figtree", sans-serif; /*--headfont:"Cormorant Garamond", serif;*/ --headfont:"Figtree", serif; --accent-font: "SFProDisplay", sans-serif ; --fs-100:100px; --fs-80:80px; --fs-70:70px; --fs-60:60px; --fs-65:65px; --fs-50:50px; --fs-48:55px; --fs-46:46px; --fs-45:45px; --fs-42:42px; --fs-40:40px; --fs-38:38px; --fs-36:36px; --fs-30:30px; --fs-28:28px; --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:#03204d; --seconday-color:#4c77a0; --black-clr:#0a1628; --hover-color:#1a3a6b; --body-font-color:#1a2942; --light-font-color:#4a5670; --light-bg:#f4f7fb; --btn-clr:#b88867; } body{ font-family:var(--bodyfont); color:var(--body-font-color); background:#ffffff } h1{ margin: 0px; padding: 0px; font-weight:300; font-size:var(--fs-48); color:var(--main-clr); font-family:var(--headfont); padding:0 0 30px 0 } h1 em{ font-weight:400; font-style:italic; } h2{ margin: 0px; font-size: var(--fs-48); color: var(--black-clr); font-weight: 300; padding: 0 0 30px 0; line-height: 1.2; font-family:var(--headfont); letter-spacing:inherit; } h2 strong{ font-weight:600 } h2 em{ font-weight:400; } h3{ font-size:var(--fs-30); padding:0 0 30px 0; } h4{ font-weight: 300; font-size: var(--fs-20); padding:0 0 30px 0; } h5{font-size:var(--fs-20); padding:0 0 30px 0; } h6{ font-size:var(--fs-14); padding:0 0 30px 0; color:rgba(0,0,0,0.7) ; text-transform:uppercase; letter-spacing:3px; font-weight:300; margin:0; font-family:var(--secondary-font); font-weight:300 } p{ font-size:var(--fs-18); line-height:1.6; font-weight: 300 ; text-align: justify; padding:0 0 30px 0; color:var(--black-clr); font-family: var(--secondary-font); color: #161617;} .btncn{ position:relative; display: inline-block; padding:14px 35px 14px; font-size: var(--fs-17); font-weight:600; border-radius:0; text-align: center; margin:15px 0; font-family:var(--bodyfont); text-transform:uppercase; letter-spacing:1px ; } .btncn-default{ background: var(--main-clr); color:#fff } .btncn-secondary{ background: #e1e0dd; } .btncn-white{ background:#fff; color:var(--body-font-color); } .btncn-default:hover{ background:var(--hover-color); color:#fff } .btncn-secondary:hover{ background: var(--seconday-color); color:#fff } .btncn-white:hover{ background:var(--hover-color); color:#fff } .btn-line{ border:1px solid var(--seconday-color); color:#000; font-family:var(--secondary-font); } .btn-line:hover{ background:var(--main-clr); color:#fff; border:1px solid var(--main-clr); } .buttonGroup{ display:flex; gap:15px } .dark-bg .btncn-default:hover{ background:#fff; border-color:#fff;color:var(--main-clr) } .btncn i{ margin:0 0 0 10px } .section{ padding:100px 0 } .section .container{ position:relative; } .section-light{ background:var(--light-blue-color); } .light-section{ background:var(--light-bg); } .no-padding-top{ padding-top:0 } .hoverImage{ overflow:hidden; position:relative; } .hoverImage:after{ content:''; position:absolute; width:100%; height:100%; top:0; left:0; background: linear-gradient(0deg, rgba(53,161,177,0.7) 0%, transparent 100%); opacity:0; transition:all .5s } .hoverImage:hover:after{ opacity:1; transition:all .5s } .hoverImage img{ width:100%; transition:all .5s } .hoverImage:hover img{ transform:scale(1.1); transition:all .5s } .g-5, .gx-5 { --bs-gutter-x: 5rem;} .g-4, .gx-4 { --bs-gutter-x: 3rem;} .section-heading{ margin:0 0 30px 0 } .section-heading h6{ padding-bottom:15px; } .text-center p{ text-align:center; } .light-bg{ background:#f5f5f7 } .dark-bg{ background:var(--main-clr); } .text-clr-main,.text-clr-main *{color: var(--body-font-color);} .mobile{ display:none; } .btn-group{ display:flex; margin:30px 0 0 0; gap:15px; } .full-image img{ width:100%; max-width:100%; } .full-right{ display:flex; justify-content:flex-end; } /*HEADER*/ @media (min-width: 1700px) { .container{ max-width:1420px } .header .container { max-width: 1680px; } } .headerTop{ background:var(--black-clr); padding:7px 0; } .headerTop p{ color:var(--light-font-color); font-weight:300; padding:0; font-size:var(--fs-18); } .headerTop p a{ color:var(--light-font-color); font-weight:600 } .headerTop p a:hover{ color:var(--main-clr); } .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(--accent-font); color:#fff; font-weight:300;font-size:var(--fs-18);} .headerTop ul li a{ color:#fff; } .headerTop ul li a:hover{ color:var(--main-clr); } .headerTop ul li:before{ content:''; position:absolute; left:0; top:4px; width:1px; height:19px; background:#fff; } .headerTop ul li:first-child:before{ display:none; } .headerMian{width: 100%; transition: all .5s; } .header{position: relative;z-index: 99;} .headerMian{transition:all .5s; background: #fff} .logo{max-width: 140px;transition:all .5s;} .headerHolder{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; } .navigation nav ul{ display:flex; /* align-items:center; */ margin:0; padding:0; list-style:none; gap:55px; } .navigation nav ul li a{font-weight:400;font-size: var(--fs-16);position: relative;color: var(--black-clr); z-index: 10; text-transform: uppercase;} .navigation nav ul li a:hover{ color:var(--seconday-color); } ul.dropdown-menu-holder{ flex-wrap:wrap; gap: 0 !important; row-gap: 30px !important; width: 100%; border: none; justify-content: space-between; } ul.dropdown-menu-holder li { width:31%; } ul.dropdown-menu-holder li ul{ display:block; } .section-parent-menu{ width:100% } .section-parent-menu{ margin:0 -10px; padding:0 0 0 340px } .fixed .section-parent-menu{ padding:0 0 0 260px } .fixed{position:fixed;top:0;left:0;width:100%; box-shadow:0 4px 4px rgba(0,0,0,0.1); z-index: 999} .fixed .bookAppointment a{padding: 0; transition:all .5s } .headerMian .container-fluid{ padding:0 40px; } ul.dropdown-menu-holder li a{ color:#fff !important } ul.dropdown-menu-holder li a:hover{ color:var(--seconday-color) !important; } @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;padding-bottom: 4rem; top: 100%;opacity:0.0;visibility: hidden; z-index: -1; backdrop-filter: blur(10px); background: rgba(28,50,71,0.75);} .navigation nav ul li:hover .mega-menu-wrapper{opacity:1.0;visibility:visible; padding-top: 70px; z-index: 1} ul.dropdown-menu-holder li a{ font-size:var(--fs-20) !important; font-weight:300!important; margin:0 0 15px 0; display:block; text-transform:capitalize !important; } ul.dropdown-menu-holder li ul li a{ font-size: 20px !important; padding:5px 0; display:block; font-weight:300 !important; margin:0; text-transform: capitalize; } ul.dropdown-menu-holder li ul li{ width:100% } li.normal-menu {position: relative;} li.normal-menu ul {position: absolute;top: 109%;left: inherit;flex-direction: column;min-width: 260px;backdrop-filter: blur(10px); background: rgba(28,50,71,0.75);gap: 0;padding:10px 0 10px;display: none;z-index: 100;border: 0px solid #57555a;border-top: 0; } li.normal-menu ul::before{position: absolute;top: 0%;left: inherit;transform:translateY(-100%);content:'';background: transparent;width:100%;height:calc(var(--headerHeight) / 2 - 10px)} li.normal-menu:hover ul{display:block;} li.normal-menu ul a {padding: 10px 25px;display: block; font-size: var(--fs-16) !important; color: #fff !important; text-transform: capitalize !important;} li.normal-menu a:hover{ color:var(--seconday-color) !important; } } @media only screen and (max-width:1500px){ li.normal-menu ul {position: absolute;top: 100%; } } .mean-container .mean-nav ul li li li a{ padding: 0.5em 15% !important; } .headerRight{ display:flex; align-items:center; } .phoneNumber a{font-weight: 600;color: var(--btn-clr);font-size: var(--fs-20); display: flex; align-items: center; transition:all .5s; font-weight:600 } .phoneNumber a:hover{ color:var(--main-clr); transition:all .5s; opacity:0.8 } .phoneNumber a span{margin-left:12px} .whatsapp a{ color:#fff; font-size:24px; display:block; width:45px; height:45px; border-radius:50%; background:#52c869; text-align:center; line-height:45px; margin:0 10px 0 50px } .headerSocial{ margin:0 15px 0 0 } .headerSocial i{ background:var(--main-clr); padding:5px; border-radius:50%; width:39px; height:39px; display:flex; justify-content:center; align-items:center; color:#fff ; transition:all .5s} .headerSocial a:hover i{ background:var(--seconday-color); transition:all .5s } 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-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: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;}.mean-container .mean-nav ul li li a{width:100%;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:100%;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) ; color: #fff !important}.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:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mean-remove{display:none!important} .mean-container a.meanmenu-reveal span{ background:var(--main-clr); } .mean-container .mean-nav{ background:#1c3247} .mean-container .mean-bar { position: absolute; left: 0; width: 100%; float: none; z-index: 99; top: 35px; background: var(--top-header-bg);} .mean-container a.meanmenu-reveal{ color:var(--main-clr); } .mean-container a.meanmenu-reveal{ border:1px solid var(--main-clr); padding: 0; margin-top:-14px; border-radius: 4px;} .mean-container .mean-nav{ margin-top:45px } .fixed .mean-container .mean-nav{ margin-top:44px } .mean-container .mean-nav ul li a{ font-family:var(--bodyfont); } .mean-container .mean-nav ul li:first-child a{ } .mean-container .mean-nav ul li a.mean-expand{ border:none !important; background:transparent !important; font-size:12px !important } .mean-nav{ box-shadow: -50vw 0 0 #1c3247, 50vw 0 0 #1c3247; } .navigation nav>ul>li>a { line-height: 110px; display: block;} .bookAppointment a{padding:0;display:block;background: transparent;color:var(--main-clr); position:relative;margin: 0 0 0 50px;font-size: var(--fs-18);font-weight: 700; transition:all .5s; font-family: var(--secondary-font); text-transform: uppercase; color: var(--main-clr); } .bookAppointment a i{ margin:0 10px 0 0; display:none; } .bookAppointment a:hover{ color:var(--seconday-color); } .phoneNumberIcon{ margin:0 0 0 30px; } .phoneNumberIcon a{ display:flex; align-items:flex-start; gap:8px; } .phIcon{ width:39px; height:39px; flex-shrink:0; display:flex; justify-content:center; align-items:center; background: var(--hover-color); color:#fff; border-radius:50% } .phContent{ font-weight:500; color:#fff; font-family:var(--bodyfont); font-size:var(--fs-20); } .phContent span{ display:block; font-weight:300; font-size:14px; text-transform:uppercase; } .phoneNumberIcon a:hover *{ color:var(--seconday-color); } @media only screen and (max-width: 1800px) { .logo{ width:340px } .navigation nav ul{ gap:25px } .bookAppointment a{ font-size:16px } .navigation nav ul li a{ font-size:17px; } .phoneNumber a{ font-size:18px; } .headerTop ul li{ font-size:16px } .headerMian .btncn{ padding:13px 20px } .whatsapp a{ margin:0 15px } ul.dropdown-menu-holder li a{ font-size:18px !important } .section-parent-menu{ padding:0 0 0 270px } .fixed .section-parent-menu{ padding:0 0 0 240px } } @media only screen and (max-width: 1500px) { .headerHolder{ padding:0 } .bookAppointment a{ padding:45px 25px; margin: 0 0 0 30px; } } @media only screen and (max-width: 1399px) { .header .container { width:98%; max-width:100% } .logo{ width:230px } .phoneNumber a{ font-size:16px; margin:0 15px 0 0 } .navigation nav ul{ gap:15px } .bookAppointment a{ margin:0 ; } .section-parent-menu{ padding:0 0 0 185px } .fixed .section-parent-menu{ padding:0 0 0 200px } .bookAppointment a{ padding: 35px 25px; } .fixed .bookAppointment a{ padding: 20px 25px; } } @media only screen and (max-width: 1199px) { .bookAppointment a{ margin:0 65px 0 20px } .headerHolder{ position:relative; } .section-parent-menu{ padding:0 0 0 0 } .mean-container a.meanmenu-reveal{ margin-top:-8px } a, a:hover{ transition:none; } .mean-container a.meanmenu-reveal{ background:#fff ; border-radius: 0; border: none;} .mean-container .mean-nav ul li li a{ padding:15px 10%; font-size:14px !important } .bookAppointment a:after{ display:none; } .headerMian{position:static;} .header .container{ width:100% } } @media only screen and (max-width: 991px) { } @media only screen and (max-width: 767px) { .phoneNumber a span{ display:none; } .bookAppointment a span{ display:none; } .logo{ width:120px } .fixed .logo{ width:120px } .whatsapp a{ width:38px; height:38px; line-height:38px;} .bookAppointment a{ display: flex; align-items: center; justify-content: center; width:40px; height:40px; border-radius:4px; background:var(--seconday-color); color:#fff; text-align:center; line-height:38px; padding:0 } .bookAppointment a i{ margin:0 } .headerTop p{ font-size:14px } .header .container{ padding:0px 10px; } .bookAppointment a{ margin:0 56px 0 0 } .whatsapp a{ margin:0 5px } .fixed{ position:static; } .mean-container a.meanmenu-reveal{ } .mean-container .mean-nav{ margin-top:28px } } /*END HEADER*/ /*START BANNER*/ .banner{ background: var(--main-clr); position: relative;} .bannerImage img{ width:100% } .bannerCaption{ position:absolute; width:100%; top:40%; transform:translateY(-50%); z-index:1 } .bannerCaption h2{ font-weight:900; color:#fff; font-size:24px; letter-spacing:0.2rem; text-transform:uppercase;font-family:var(--bodyfont); } .bannerCaption h1{ color:#fff; font-size:120px; padding:0 0 60px 0; } .banner-btn-group{ display:flex; gap:14px; } .banner h5{ font-weight:200; font-family: var(--secondary-font); font-size:var(--fs-16); color:var(--body-font-color) ; text-transform: uppercase; letter-spacing: 2.2px; padding-bottom: 20px; margin: 0} .banner h5 span, .banner h5 strong{ font-weight:600 } .banner h1{ font-weight:300; font-size:132px; color:var(--body-font-color); line-height:1; letter-spacing:0; } .banner-logo-holder{ max-width:600px; margin:0 0 45px 0 } .inner-banner h1{ padding-bottom:45px; color:#fff; font-weight: 300} .home-hero-sec h1,h5{color:#fff !important;} /*END BANNER*/ /*WELCOME SECTION*/ .welcomeSection{} .welcomeContent{ text-align:center; } .welcomeContent h6{ font-weight:300; font-family:var(--secondary-font); font-size: var(--fs-14); letter-spacing:3px; margin:0 } .welcomeContent h2{ font-size:var(--fs-48); font-weight: 300; letter-spacing: 2px} .welcomeContent p{ font-weight:300; text-align:center; font-size:var(--fs-18); text-align:justify; text-align-last: center; } .welcomeSection .container{ position:relative; z-index:1 } .side-line-image{ position:absolute; bottom:-350px; right:-175px; z-index:1; opacity:0.7 } .welcomeSection{ position:relative; } .welcomeSection .btncn-default:hover{ background:var(--seconday-color); color:#fff; } .welcome-content{ background:#fff; position:relative; margin-top:-135px; padding:65px 10px 0 } .introSection p{ text-align:justify; text-align-last: center; } /*END WELCOME SECTION*/ .top-content-overlap{background: rgb(27,49,70);position:relative;margin-top:-185px;z-index: 99999;} .top-content-overlap:after{ content:''; position:absolute; top:-250px; width: 100%; height:250px; background: rgb(27,49,70); background: linear-gradient(180deg, rgba(27,49,70,0.0) 0%, rgba(27,49,70,1) 100%); } .full-image{ box-shadow: 10px 10px 25px 3.36px rgba(0, 0, 0, 0.30); } .top-content-overlap h6{ color:rgba(255,255,255,0.7) } .top-content-overlap p{ font-size:var(--fs-18); } /*SERVICE SECTION*/ .serviceSlider{ width:150%; } .serviceSlider .slick-slide { margin: 0 10px; } .serviceSlider .slick-list { margin: 0 -10px; } .serviceItem h3{ padding:25px 0 0 0; font-family: 'AvenirRoman'; } .serviceItem a{ color:var(--main-clr); } .serviceItem a:hover{ color:var(--seconday-color); } .serviceItem{ opacity:1.0; pointer-events: none; transition:all .5s; } .serviceItem h3{ display:none; color: #fff; font-size: var(--fs-30); font-family: var(--headfont); font-weight: 300; padding: 25px 0 45px 0; letter-spacing: 1px; } .serviceSlider .slick-active .serviceItem{ opacity:1.0; pointer-events: inherit;transition:all .5s; } .serviceSlider .slick-active .serviceItem h3{ display:block; } .serviceSlider .slick-prev{ position:absolute; top:50%; transform: translateY(-50%); left:0; background:#ffffff; border:none; font-size:20px; transition:all .5s; width: 46px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 0%; color: #000; z-index: 9} .serviceSlider .slick-next{ position:absolute; top:50%; transform: translateY(-50%); right:0; background:#ffffff; border:none; font-size:20px; transition:all .5s; width: 46px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 0%; color: #000; z-index: 9} .serviceSlider .slick-next:hover, .serviceSlider .slick-prev:hover{ opacity:1; transition:all .5s; background:var(--main-clr); color:#fff } .service-slider-section .btn-position-absolute{ top:-15px; } .service-slider-section .section-heading h2{ padding-right:220px; } .serviceItem{ position:relative; } .serviceItem h3{ color:#fff } .progress { display: block; width: 100%; height: 3px; border-radius: 3px; overflow: hidden; background-color: rgba(255,255,255,0.5);background-image: linear-gradient(to right, #fff, #fff); background-repeat: no-repeat; background-size: 0 100%; transition: all .5s;} .service-slider-bottom{ display:flex; align-items:center; gap:20px } .service-slider-bottom .btn-wrap{ display:flex; gap:10px; } .service-slider-bottom .prev-btn{ background:rgba(255, 255, 255, 0.20); width:44px; height:44px; border-radius:50%; color:#fff; border:none; } .service-slider-bottom .next-btn{ background:rgba(255, 255, 255, 0.20); width:44px; height:44px; border-radius:50%; color:#fff; border:none; } .service-slider-bottom .next-btn:hover, .service-slider-bottom .prev-btn:hover{ background:var(--main-clr); } /*END SERVICE SECTION*/ .treatment-welcome:after{ display:none; background:transparent; } .treatment-welcome{ background:#fff } .treatment-welcome h6{ color:rgba(42,42,42,0.7) } .treatment-welcome h2{ color:var(--main-clr); font-size:var(--fs-48); } .treatment-welcome p{ color:var(--body-font-color); } .treatment-welcome .qualityContent h3{ color:var(--body-font-color); } /*CONTENT SECTION*/ .contentSection{ position:relative; z-index:1 } .ratingSection{ padding:25px 0 0 0 } .ratingSection h4{ font-size:var(--fs-18); padding:0 0 0; font-weight:300; text-transform:uppercase; color:var(--black-clr); font-family:var(--secondary-font); } .number{ font-size:var(--fs-36); font-weight:300; color: var(--black-clr); font-family: var(--secondary-font);} .absolutBtn{ position:absolute; top:30px; right:30px; z-index:12 } .contentBottom{ } /*.contentHolder ul{ margin:0 0 25px 0; padding:0 0 0 0; list-style:none; } .contentHolder ul li{ font-family: var(--cabinetGrotesk); font-weight:300 ; font-size:var(--fs-20); margin:0 0 15px 0; position:relative; padding:0 0 0 25px; } .contentHolder ul li:after{ content:'\f00c'; position:absolute; left:0; top:0; color:var(--main-clr); font-family: 'FontAwesome'; } */ .contentTop ul{ margin:0; padding:0 0 0 0; list-style:none; } .contentTop ul li{ font-weight:300 ; font-size:var(--fs-20); } .contentTop ul li a{ color:var(--body-font-color); padding: 15px 0; display: block; border-bottom: 2px solid #ebe7eb; position: relative; font-weight: 300} .contentTop ul li a:after{ content:''; position:absolute; width:60px; height:2px; background:var(--main-clr); bottom:-2px; left:0 ; transition: all .5s;} .contentTop ul li a:hover:after{width:100%; background: var(--hover-color); transition: all .5s;} .contentTop ul li a:before{ content:'\f061' ; font-family: 'FontAwesome'; position:absolute; right:0; top:13px; color:var(--main-clr);} .contentTop ul li a:hover{ color:var(--hover-color); } .contentTop ul li a:hover:before{ color:var(--hover-color); } .contentSection h2 strong{ font-weight:500 } .content-gradient{ background: linear-gradient(180deg, #1B3146 0%, #243E58 28.82%, #375C7F 72.3%, #4A79A5 100%);} .content-gradient.contentTop ul li a{ border-bottom:2px solid rgba(255,255,255,0.10); color:#fff; } .content-gradient.contentTop ul li a:after{ content:''; position:absolute; width:60px; height:2px; background:#ffffff; bottom:-2px; left:0 ; transition: all .5s;} .content-gradient.contentTop ul li a:hover:after{width:100%; background: #fff; transition: all .5s;} .content-gradient.contentTop ul li a:before{ content:'\f061' ; font-family: 'FontAwesome'; position:absolute; right:0; top:13px; color:#fff;} .content-gradient p{ font-size:var(--fs-18); } .content-sec-bottom{ padding:100px 0 0 0 } .content-sec-bottom h3{ font-size:var(--fs-24); color:#fff; line-height:1.5; font-weight:300 } .content-sec-bottom h6{ font-size:var(--fs-18); color:#D5D5D7; font-weight:300; padding:15px 0 0 0 } /*CONTENT SECTION END*/ /*new parent*/ .new-patient h2{font-size:var(--fs-60);} .new-patient h3{font-weight: 400;letter-spacing: 0.1rem} /*NEW PARENT END*/ /*HOME GALLERY*/ .dark-bg .section-heading h2{ color:#fff ; font-size: var(--fs-60);} .dark-bg .section-heading p{ color:#fff; text-align:justify; text-align-last: center;} .home-gallery-holder{ margin-top:15px } .buttonGroupCenter{ justify-content:center; margin:40px 0 0 0; display:flex; } .dark-bg .btncn-secondary{ color:#fff } .spacial-padding{ padding-bottom:450px; } /*END HOME GALLERY*/ /*DUEL BG SECTION*/ .duel-bg{ background: linear-gradient(to bottom, #2d8692 48%,#ffffff 48%);} .sp-section{ position:relative; } .sp-section-bottom{ position:absolute; width:100%; bottom:0; z-index:1 ; left: 0; display: flex; justify-content: flex-end; align-items: flex-end;} .sp-section-bottom h2{ margin:0; padding:0 65px 30px ; font-size:var(--fs-60); color:#fff; font-weight:500 } .sp-section-bottom .btncn{ margin:0; padding:40px 45px; font-size:var(--fs-22); } .sp-section-bottom .btncn i{margin: 0 15px 0 0} .cts-image .full-image{ position:relative; } .cts-image h2{ position:absolute; bottom:30px; left:40px; padding:0; margin:0; color:#fff; font-weight:500; font-size:72px; mix-blend-mode:soft-light; } /*END DUEL BG SECTION*/ /*APPOINTMENT */ .appointmentSticker{ background:var(--main-clr); padding:40px 65px; display:flex; align-items:center; justify-content:space-between; } .appointmentSticker h2{ padding:0 } .appointmentSticker h2{ color:#fff; font-size:var(--fs-42); } /*END APPOINTMENT*/ /*DOCTOR SLIDER*/ @media screen and (min-width: 991px) { .doctorSliderNav .slick-list{ padding-right:250%; margin-right:-250%; } .doctorSliderNav .slick-slide{ position:relative ; width:400px } .doctorSliderNav .slick-slide img{ transition: all .5s; width:100%; height:380px; object-fit:cover; object-position:top; transition-delay:0.5s; filter: grayscale(100%);opacity:0.2} .doctorSliderNav .slick-slide.slick-active img{ transition: all .5s; width:100%; height:488px; transition-delay:0.5s; filter: grayscale(0%);opacity:1 } .doctorSliderNav .slick-slide.slick-active + div{ padding-left:0; } .doctorSliderNav .slick-slide{ transition:all .5s } .doctorSliderNav .slick-track{ display:flex; align-items:center; } } .doctorSliderNav .slick-slide { margin: 0 8px; } .doctorSliderNav .slick-list { margin: 0 -8px; } .doctorSliderNav .slick-prev{ position:absolute; left:-160px; bottom:30px; border:none; outline:none ; background:transparent; font-size: 25px; opacity: 0.5} .doctorSliderNav .slick-next{ position:absolute; left:-100px; bottom:30px; border:none; outline:none ; background:transparent; font-size: 25px; opacity: 0.5} .doctorSliderNav .slickButton:hover{ opacity:1.0 } .doctorItem h2{ font-weight:400 } .doctorItem h4{ font-size:var(--fs-24); text-transform:uppercase; margin:0; padding:0 0 15px 0;color:var(--seconday-color); } .doctorItem h6{ font-size:var(--fs-18); text-transform: uppercase; letter-spacing: 1px; margin: 0} /*END DOCTOR SLIDER*/ /*PARTNERS START*/ .partnerLogoHolder{ padding:0 0;} .partnersLogoRow{display:flex;gap:35px;align-items:center; justify-content: space-between;} .partnersLogoImg img {margin: 0 auto; display: block; } .partnersHd h6{font-size:var(--fs-18);} .prtner-logo-section{ background:#1b3146 } @media only screen and (max-width:991px){ .partnersLogoRow{flex-wrap:wrap;justify-content:center;gap: 30px; justify-content: center;} .partnersLogoItem {width: calc(30% - 15px); } } /*PARTNERS END*/ /*HOME FORM SECTION*/ .formHolder{ position: relative;z-index:3;} .right-full-image{ width:50%; right: 0; height:100%; position:absolute; top: 0} .right-full-image img{ height:100%; width:100%; object-fit:cover; } .formGroup{ display:flex; gap:30px; } .homeFormHolder{ padding:0 0 0 0 } .homeFormHolder input[type=text], .homeFormHolder input[type=email], .homeFormHolder input[type=tel], .homeFormHolder select{ width:100% !important; background:transparent!important; border:none!important; border-bottom:1px solid rgba(255,255,255,0.4)!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.4)!important; margin: 0 0 30px 0; border-radius: 0 !important} .homeFormHolder .inputHolder{ width:100% } .homeFormHolder ::placeholder { color:rgba(255,255,255,0.4)!important; opacity: 1; } .homeFormHolder ::-ms-input-placeholder { color:rgba(255,255,255,0.4)!important;} .homeFormHolder input[type=submit]{ padding:17px 45px!important ; background:#fff !important; border:none!important; outline:none!important; cursor:pointer!important; font-weight:400!important; font-size:15px!important; transition:all .5s!important; margin-top:10px; color:#000 !important; font-family:var(--bodyfont) !important; font-weight:300; text-transform:uppercase !important; border-radius:0 !important; font-weight:600 !important; font-size:17px !important } option{ background:var(--seconday-color); color:#fff } .homeFormHolder input[type=submit]:hover{ background:var(--seconday-color) !important; color:#fff !important ; } .formHolderDark p{ color:#fff ; text-align:left; line-height:1.6; font-size: var(--fs-16);} .formHolder .section-heading h2{ color:#fff ; font-size: var(--fs-48); padding: 0 0 30px 0} .hmfrmcon{ padding:90px 90px 90px 0 } .formHolderDark .bgImage{ width:43%; position:absolute; top:0; right:0; height:100% } .formHolderDark .bgImage img{ width:100%; height:100%; object-fit:cover; } .formHolderDark{ position:relative; overflow:hidden; } .sideImage{ margin-bottom:-1px; margin-left:-120px } .hmfrmcon p{ font-size:var(--fs-16); } .gform_button { position: relative; padding: 18px 26px 18px 26px !important; background:#fff !important; border:none!important; outline:none!important; cursor:pointer!important; transition:all .5s!important; margin-top:20px; color:#000 !important; font-family:var(--bodyfont) !important; font-weight:300; text-transform:uppercase !important; border-radius:0 !important; font-weight:600 !important; font-size:17px !important } .gform_button::before { content: "\f061"; font-family: "Font Awesome 6 Free" !important; font-weight: 900; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 16px; pointer-events: none; color: #000;} .gform_button:hover{ background:var(--seconday-color) !important; color:#fff !important ; } .gform_button:hover::before { color:#fff !important ; } .gf-btn-icon{ font-family: "Font Awesome 6 Free" !important; } /*END HOME FORM SECTION*/ /*Team */ .teamHolder{ margin:60px 0 0 0 } .teamImage img{ width:280px; height:280px; border-radius:50% ; } .teamBox h3{ font-size:var(--fs-36); padding:0 0 15px 0 } .teamImage{ overflow:hidden; width:300px; height:300px; border-radius:50%; padding:10px; border:1px solid var(--deep-blue); transition:all .5s; margin:0 auto 45px ; } .teamImage:hover{ transform:scale(1.1); transition:all .5s; } .midBtn .btncn-default{ background:var(--deep-blue); border-color:var(--deep-blue); } .midBtn .btncn-default:hover{ background:var(--seconday-color); border-color: var(--seconday-color); } .modal.teamModal {--bs-modal-border-radius: 0;} .btn-close.teamModalClose {position: absolute;top: 13px;right: 16px;z-index: 9;font-size: 10px;} .teamModal ul{ margin:10px 0 30px 0; padding:0; list-style:none; } .teamModal ul li{ font-size: var(--fs-18); line-height: 1.4; font-weight: 300; margin:0 0 8px 0; position:relative; padding: 0 0 0 30px} .teamModal ul li:before{ content:'\f00c'; position:absolute; left:0; top:0; color:var(--main-clr); font-family: 'FontAwesome'; } .teamModal ul li a{ color:var(--main-clr); } .teamModal ul li a:hover{ color:var(--seconday-color); } .teamModal .modal-body {padding: 28px 20px; } .doctor-bio-popup .doc-details h6{text-transform: capitalize;font-size: var(--fs-16);padding-bottom: 0;} .doctor-bio-popup .doc-details .doc-name{ font-family:var(--headfont); font-size: var(--fs-36); padding-bottom: 0; } .doctor-bio-popup .doc-details .doc-designation{ font-family: var(--bodyfont); font-size: var(--fs-18); padding-bottom: 0; text-transform: capitalize; color: var(--main-clr); letter-spacing: 1px; font-weight: 500; } .doctor-bio-popup .doc-details .doc-degree{ font-family: var(--bodyfont); font-size: var(--fs-16); padding-bottom: 5px; text-transform: capitalize; } .doctor-bio-popup .doc-details .doc-reg-no{ font-family: var(--bodyfont); font-size: var(--fs-16); padding-bottom: 10px; text-transform: capitalize; color: var(--hover-color); font-weight: 500; } .doctor-bio-popup .doc-details .doc-bio{ font-family: var(--bodyfont); font-size: var(--fs-18); padding-top: 15px; text-align: left; } .doctor-bio-popup .doc-details .doc-bio p{padding-bottom:20px;} .doctor-bio-popup .doc-details .doc-bio ul{margin:0; padding: 0; padding-bottom: 15px;} .doctor-bio-popup .doc-details .doc-bio ul li{font-size: var(--fs-16); line-height: 1.4; font-weight: 300; margin: 0 0 8px 0; position: relative; padding: 0 0 0 30px; } /*End Team*/ /*REVIEW SECTION*/ .reviewSlider{ margin:30px 0 0 0 } .reviewSlider .slick-slide { margin: 0 8px; } .reviewSlider .slick-list { margin: 0 -8px; } .reviewItem{ text-align:center; } .star{ font-size:20px; color:var(--main-clr); margin:0 0 20px 0 } .reviewItem p{ text-align:center; font-weight:300 ; } .reviewItem h6{ font-size:16px; color:var(--body-font-color); margin:0; padding:0; text-transform:uppercase; font-weight:300 ; letter-spacing: 1px} .btn-view{ text-decoration:underline; text-underline-offset:5px; font-size:var(--fs-18); color:#000000 } .btn-view:hover{ color:var(--seconday-color); } .reviewSlider .slick-prev{ position:absolute; font-size:25px; border:none; outline:none; color:var(--black-clr); left:-80px; top:0%; transition: all .5s; height: 100%; background: #ECEFF3; width: 57px; } .reviewSlider .slick-next{ position:absolute; font-size:25px; border:none; outline:none; color:var(--black-clr); top: 0; right:-80px; transition: all .5stransition: all .5s; height: 100%; background: #ECEFF3; width: 57px; } .reviewSlider .slick-prev:hover, .reviewSlider .slick-next:hover{ background:var(--main-clr); color: #fff; transition: all .5s} #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 .reviewItem {height: 100%; background:#ECEFF3; padding: 55px 45px} .more_txt:hover {color: #003380;} .reviewSection .btncn-secondary{ border-color:var(--main-clr); } .reviewSection .btncn-secondary:hover{ border-color:var(--seconday-color); } .reviewSection .slick-track{ display: flex !important;} .reviewSection .slick-slide{height: inherit !important;} .reviewSlider{ width:80%; margin:0 auto; } .reviewSlider .slick-slide>div{ height:100% } .reviewSection h6{ font-size:var(--fs-16); font-weight:400; font-family:var(--headfont); padding-bottom:30px; letter-spacing:2px; } .reviewSection .section-heading h2{ font-size:var(--fs-48); } .reviewItem h6{ font-weight:200 } .video-holder h2{ font-weight:400; font-style:var(--fs-48); color:#fff; letter-spacing:2px; mix-blend-mode:overlay; position:relative; text-align:center; padding:0 30px; z-index:2; position:absolute; top:55%; transform:translateY(-50%); width:100% } h2.btm-txt-vid{ font-weight:400; font-style:var(--fs-48); color:#fff; letter-spacing:2px; text-align:center; padding:0 30px; z-index:1; opacity: 0.12; position:absolute; width:100%; top:55%; transform:translateY(-50%); width:100%; mix-blend-mode:inherit; } .video-caption{ top:65%; transform:translateY(-50%); width:100%; text-align:center; position:absolute; } .video-btn{ font-family:var(--accent-font); color:#ffffff; font-size:var(--fs-16); text-transform:uppercase; letter-spacing:1px; opacity:0.5 } .video-btn:hover{ opacity:1.0 } /*END REVIEW SECTION*/ /*TREATMENT PAGE*/ .main-content-center p{ text-align:justify; text-align-last:center; } .traement-dark{ background:url(assets/images/gal-bg.jpg) no-repeat; background-size: cover; padding:90px 0px; } .text-white p, .text-white h2{ color:#fff } /*INNER BANNER*/ .innerBanner{ position:relative; } .banerImageHolder{ position:relative;} .bannerImage img{ width:100%; } .innerbannerContent{ position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); padding:20px } .innerbannerContent .bannerButtonGroup{ justify-content:center; } .innerbannerContent h2{ font-size:var(--fs-70); color:#fff; padding:0 0 20px 0; } .innerbannerContent .btncn-white{ color:var(--body-font-color); } .innerbannerContent .btncn-white:hover{ color:#fff; background: var(--seconday-color);} .inner-no-overlap{ margin:0 } .halfInnerBanner{ position:relative; display:flex; justify-content:flex-end; } .halfBannerImage{ width:50%; } .halfBannerImage img{ width:100% } .halfBannerCaption{ position:absolute; top:50%; transform:translateY(-50%); width:100%; left:0 } .halfBannerCaption h1{ font-size:90px; color:#fff; } .partnetSectionTreatment{ padding:0 0 75px 0 } .treatmentImageHolder{ display:flex; flex-wrap:wrap; gap:20px; row-gap:60px; justify-content:center; margin:0 0 0 0 } .treatment-repeat{ width:23%; position:relative; } .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:5px 0 } .galInnerContainer ul li a{ color:#fff } .galInnerContainer ul li a:hover{ color:var(--main-clr); } .treatmentImage{ overflow:hidden; } .treatmentImage img{ transition: all .5s } .treatment-repeat:hover img{ filter:brightness(0.5) blur(30px); transition: all .5s; transform: scale(1.1);} .treatment-repeat:hover .galInnerContainer{ opacity:1; visibility:visible; transition: all .5s} .qualityContent h3{ font-size:var(--fs-30); font-weight:300; font-family:var(--headfont); color: var(--body-font-color);} .last-treatment .qualityContent h3{ color:var(--main-clr); } .qualityContent a:hover h3{ color:var(--main-clr); } .treatmentImageHolder .qualityContent{ } .treatmentImageHolder .qualityContent h3{ margin:0; color:#fff; font-weight:normal; font-size:var(--fs-30); padding:25px 0; transition:all .3s ; color: #fff; font-weight: 300} .treatmentImageHolder .treatmentImage{ margin:0; box-shadow: 5px 5px 15px 3.36px rgba(0, 0, 0, 0.20); } /*CTA SECTION*/ .cts-section{ background:url(assets/images/cta-section-bg.jpg) no-repeat; background-size:cover; padding: 75px 0; background-attachment: fixed;} .cts-section p { font-size:var(--fs-18); } .card-body h5{ color:var(--main-clr); margin:0; padding:0 0 15px 0 } .card-body{ padding:30px; } .card-body p{ padding-bottom:0; text-align:left } @media only screen and (max-width: 1400px) { .innerBanner{ padding:0 0 0 0 } .innerbannerContent h2{ font-size:50px; } } @media only screen and (max-width: 991px) { .innerbannerContent h2{ font-size:40px; padding:0 0 30px 0 } .bannerImage img{ height:430px; object-fit:cover; } } @media only screen and (max-width: 767px) { .innerbannerContent h2{ font-size:32px } .innerbannerContent .btncn-white{ padding:13px 15px } } /*END INNER BANNER*/ /*PAGINATION SECTION*/ .pagination{ padding:40px 0 0 0 } .pagination ul{ display:flex; justify-content:center; margin:0; padding:0; list-style:none; gap:30px; } .pagination ul li{ font-family:var(--bodyfont); font-size:var(--fs-18); text-transform:uppercase; letter-spacing:1px ; color:rgba(0,0,0,0.4); position:relative; } .pagination ul li:after{ content:''; position:absolute; background:#cdcdcd; width:6px; height:6px; border-radius:50%; right: -18px; top: 10px; } .pagination ul li:last-child:after{ display:none; } .pagination ul li a{ color:rgba(0,0,0,0.4); } .pagination ul li a:hover{ color:var(--main-clr); } @media only screen and (max-width: 991px) { .pagination{ padding:25px 0 0 0 } } /*END PAGINATION SECTION*/ /*BLOG SECTION*/ .blogCategory{ padding:20px 30px ; display:flex; align-items:center; background: #fcf8fa} .blogCategory span{ font-family:var(--bodyfont); font-size:var(--fs-30); font-weight:300; padding:0 12px 0 0 } .blogCategory select{ width:100%; border:none; background:transparent; font-family:var(--bodyfont); font-size:var(--fs-30); font-weight:300; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image:url(assets/images/downArrow.png); background-repeat:no-repeat; background-position: 100% center;} .blogCategory select option{} .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:#fff; font-size:var(--fs-18); line-height:1.5; font-family:var(--bodyfont); margin: 0} .blogPostContent a:hover h4{ color:var(--seconday-color); } .blogTop{ padding:24px 40px; margin:0 0 50px 0 ; display:flex; align-items: center; background:var(--seconday-color); } .sortBy{ font-weight:200; color:#fff; font-size:var(--fs-30); } .categotyDropdown{ width:100%; margin:0 0 0 15px; } .categotyDropdown select{ width:100%; background:transparent; border:none; padding: 5px 0; font-weight:500; color:#fff; font-size:var(--fs-30); background-image: url(assets/images/arrowDown.png); background-repeat: no-repeat; background-position: 100% center; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; -ms-appearance:none; appearance:none; font-family: 'DunbarTall-Book'; font-weight: normal} .categotyDropdown select option{ color:#fff } .blogPostContent .hoverImage{ box-shadow: 5px 5px 15px 3.36px rgba(0, 0, 0, 0.20); } .full-part-banner{ background: #1B3146; background: linear-gradient(180deg, #1B3146 0%, #4977a3 90%, #fff 90%, #fff 100%); padding:90px 0 0 0 } .full-part-banner h1{ font-size:60px; text-align:center; padding-bottom:60px; } .blog-details-brd.breadcumb ul { margin:0; justify-content: center; padding:20px 0 } .full-part-banner .bannerImage{ box-shadow: 10px 10px 25px 3.36px rgba(0, 0, 0, 0.30); } @media only screen and (max-width: 991px) { .blogPostContent h4{ padding-top:0 } .blogPostContent{ margin:0 0 30px 0 } .blogCategory{ padding:20px 15px } .blogCategory span{ font-size:16px } .blogCategory select{ font-size:16px } .blogPostContent .hoverImage{ margin-bottom:15px } } @media only screen and (max-width: 767px) { .blogCategory select{ background-size:16px } } /*END BLOG SECTION*/ /*BLOG DETAILS BANNER*/ /*.blogdetails h1{ font-size:var(--fs-48); padding:0 0 50px 0 } .pageContent h2{ font-size:var(--fs-42); padding:0 0 35px 0 ; text-transform: none;font-weight:400;color:var(--main-clr);font-family:var(--headfont);} */ @media only screen and (max-width: 1199px) { .blogdetails h1{ font-size:40px ; padding: 0 0 20px 0} } @media only screen and (max-width: 1199px) { .blogdetails h1{ font-size:36px } } /*END BLOG DETAILS BANNER*/ /*BLOG DETAILS*/ .pageContent p{font-size:var(--fs-18);line-height: 1.5;color: var(--body-font-color);} .pageContent h3{ padding-top:10px;color:var(--btn-clr);font-family:var(--headfont);font-size:var(--fs-36);font-weight:300 ; margin: 0} .pageContent h6{ } .pageContent h2{ } .pageContent ul{ margin:10px 0 30px 0; padding:0; list-style:none; } .pageContent ul li{ font-size: var(--fs-18); line-height: 1.4; font-weight: 300; margin:0 0 8px 0; position:relative; padding: 0 0 0 30px} .pageContent ul li:before{ content:'\f00c'; position:absolute; left:0; top:0; color:var(--main-clr); font-family: 'FontAwesome'; } .pageContent table{ width:100%; max-width:380px } .pageContent table td{ color:var(--black-clr) ; font-size:var(--fs-18); font-family:var(--secondary-font); line-height:1.8; font-weight: 400} .pageContent table td:first-child{ padding-right:20px; } /*END BLOG DETAILS*/ /*BLOG DETAILS SIDEBAR*/ .brdholder{ text-align:right; } .darksidebar-bg{ } .sidebarFormHolder{ padding:0; margin:5px 0 0 45px} .sidebarFormHolder h2{font-weight: 300; font-size: var(--fs-36); color: #fff;} .sidebarImage img{ width:100% } .sidebar{ overflow: auto; position: -webkit-sticky; position: sticky; top: 100px; min-height: 200px; z-index:1; } .sidebarContent{ padding:55px ; background: #2E4D6B} .sidebar h3{ color:var(--body-font-color); font-weight:300; font-family:var(--bodyfont); font-size:var(--fs-42); } .sidebar p{ text-align:center; font-weight:400; font-size:16px; color:#fff } .sidebar-form .inputHolder{} .sidebar-form .inputHolder input[type=text], .sidebar-form .inputHolder input[type=email], .sidebar-form .inputHolder input[type=tel], .sidebar-form .inputHolder select{ width:100% !important; background-color:transparent !important; border:none !important; border-bottom:1px solid rgba(255,255,255,0.38)!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.38) !important; margin: 0 0 0 0 !important; border-radius: 0 !important; box-shadow: none !important;} .sidebar-form .inputHolder { width:100% } .sidebar-form .inputHolder ::placeholder { color:rgba(255,255,255,0.38); opacity: 1; } .sidebar-form .inputHolder ::-ms-input-placeholder { color: rgba(255,255,255,0.38);} .formGroup{ } .sidebar-form input[type=submit]{ padding:15px 45px !important; background:var(--main-clr); !important; border:none !important; outline:none !important; cursor:pointer !important; font-weight:300 !important; font-size:var(--fs-16) !important; transition:all .5s !important; margin: 15px auto !important; display: block !important; border-radius: 0 !important; color: var(--btn-clr) !important; text-transform:uppercase; font-family:fontawesome; letter-spacing: 2px; } .sidebar-form input[type=submit]:hover{ background:var(--seconday-color) !important; color:#fff !important } .sidesticky{ position:sticky; top:0; overflow:auto; } .breadcumb{ padding:20px 10px 0; } .breadcumb.main{ position:relative; z-index:9 ; } .breadcumb ul{ display:flex; justify-content:flex-start; margin:0; padding:0; list-style:none; column-gap: 30px; position: relative; margin-top: -55px;} .breadcumb ul li{ font-family:var(--bodyfont); font-size:var(--fs-14); text-transform:uppercase; letter-spacing:0.2em ; color:rgba(15,55,61,0.7); position:relative; } .breadcumb ul li:after{ content:'\f105'; position:absolute; border-radius:50%; right: -18px; top: 0px; font-family: "Font Awesome 6 Free"; font-weight: 900; } .breadcumb ul li:last-child:after{ display:none; } .breadcumb ul li a{ color:rgba(0,0,0,0.7); } .breadcumb ul li a:hover{ color:var(--main-clr); } .callToBook{ background:var(--seconday-color); text-align:center; } .callToBook a{ display:block; padding:20px; font-weight:500; font-size:var(--fs-24); text-transform:uppercase; color:#fff; letter-spacing:1px } .callToBook a i{ margin:0 10px 0 0 } @media only screen and (max-width: 991px) { .sidebarFormHolder{ margin:0 } .sidebar{ margin-top:45px; } .breadcumb ul{ justify-content:flex-start; } } @media only screen and (max-width: 767px) { .sidebarFormHolder{ padding:0 } .sidebarContent{ padding:30px } .sidebar{ margin-top:10px } .breadcumb ul{ flex-wrap:wrap; } } /*END BLOG DETAILS SIDEBAR*/ /*GALLERY*/ .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { content: " "; display: block; background: white; position: absolute; z-index: 30; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after { width: 3px; height: 9999px; left: 50%; margin-left: -1.5px; } .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { width: 9999px; height: 3px; top: 50%; margin-top: -1.5px; } .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { position: absolute; top: 0; width: 100%; height: 100%; } .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } .twentytwenty-before-label, .twentytwenty-after-label { -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; } .twentytwenty-before-label:before, .twentytwenty-after-label:before { color: white; font-size: 13px; letter-spacing: 0.1em; } .twentytwenty-before-label:before, .twentytwenty-after-label:before { position: absolute; background: rgba(255, 255, 255, 0.2); line-height: 38px; padding: 0 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before { top: 50%; margin-top: -19px; } .twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before { left: 50%; margin-left: -45px; text-align: center; width: 90px; } .twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute; } .twentytwenty-left-arrow, .twentytwenty-right-arrow { top: 50%; margin-top: -6px; } .twentytwenty-up-arrow, .twentytwenty-down-arrow { left: 50%; margin-left: -6px; } .twentytwenty-container { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; z-index: 0; overflow: hidden; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .twentytwenty-container img { max-width: 100%; position: absolute; top: 0; display: block; } .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay { background: rgba(0, 0, 0, 0); } .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label { opacity: 0; } .twentytwenty-container * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .twentytwenty-before-label { opacity: 0; } .twentytwenty-before-label:before { content: attr(data-content); } .twentytwenty-after-label { opacity: 0; } .twentytwenty-after-label:before { content: attr(data-content); } .twentytwenty-horizontal .twentytwenty-before-label:before {left: 10px; } .twentytwenty-horizontal .twentytwenty-after-label:before { right: 10px; } .twentytwenty-vertical .twentytwenty-before-label:before { top: 10px; } .twentytwenty-vertical .twentytwenty-after-label:before { bottom: 10px; } .twentytwenty-overlay { -webkit-transition-property: background; -moz-transition-property: background; transition-property: background; background: rgba(0, 0, 0, 0); z-index: 25; } .twentytwenty-overlay:hover { background: rgba(0, 0, 0, 0.5); } .twentytwenty-overlay:hover .twentytwenty-after-label { opacity: 1; } .twentytwenty-overlay:hover .twentytwenty-before-label { opacity: 1; } .twentytwenty-before {z-index: 20; } .twentytwenty-after { z-index: 10; } .twentytwenty-handle { height: 38px; width: 38px; position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border: 3px solid white; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); z-index: 40; cursor: pointer; } .twentytwenty-horizontal .twentytwenty-handle:before { bottom: 50%; margin-bottom: 22px; -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:after { top: 50%; margin-top: 22px; -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-vertical .twentytwenty-handle:before { left: 50%; margin-left: 22px; -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-vertical .twentytwenty-handle:after { right: 50%; margin-right: 22px; -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-left-arrow { border-right: 6px solid white; left: 50%; margin-left: -17px; } .twentytwenty-right-arrow { border-left: 6px solid white; right: 50%; margin-right: -17px; } .twentytwenty-up-arrow { border-bottom: 6px solid white; top: 50%; margin-top: -17px; } .twentytwenty-down-arrow { border-top: 6px solid white; bottom: 50%; margin-bottom: -17px; } .social-share-section{ } .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 } .section-heading-inner h2 a{ font-weight:600; color:var(--body-font-color); } .section-heading-inner h2 a:hover{ color:var(--main-clr); } /*END GALLERY*/ /*CONTACT ICON*/ .iconHolder{ margin:10px 0 30px 0 } .iconList{ display:flex; margin:0 0 15px 0 } .iconListIcon{ width:26px; flex-shrink:0; margin:0 5px 0 0; color:var(--black-clr); font-size:18px } .iconListText{ font-size:var(--fs-18); color:var(--btn-clr); font-family:var(--bodyfont); font-weight:300 } .iconListText a{ color:var(--btn-clr); } .iconListText a:hover{ color:var(--seconday-color); } .mapHolder{ margin:15px 0 30px 0 ; border: 1px solid #2f2841} .mapHolder { overflow: hidden; padding-top: 56.25%; position: relative; display: block;} .mapHolder iframe { position: absolute; top: 0; left: 0; border: 0; width: 100%; height: 100%; } .openingHr td{ padding:5px 5px 5px } .openingHr h2{ font-size:var(--fs-36); } .add-con-hold{ margin:0 0 30px 0 } .time-holder table td{ color:var(--btn-clr); font-family:var(--bodyfont); font-size:var(--fs-18); font-weight:300 } @media only screen and (max-width:767px){ .iconListIcon{ margin:0 10px 0 0 } } /*END CONTACT ICON*/ /*TREATMENT BOX*/ .treatmentImage{ margin:0 0 30px 0 ; overflow: hidden; position: relative;} .treatmentImage img{ width:100% ; transition: all .5s;display:block;} .treamentHolder{ position:relative; } .treamentHolder h3{ color:var(--body-font-color); transition:all .5s } .treamentHolder a:hover h3{ color:var(--seconday-color); transition:all .5s } .treamentCaption{ position:absolute; top:50%; transform:translateY(-50%); text-align:center; padding:30px; width: 100%; left: 0; opacity: 0; visibility: hidden;transition: all .5s;} .treamentCaption ul{ margin:0; padding:0; list-style:none; } .treamentCaption ul li{ float:none; font-size:var(--fs-20); margin:12px 0 } .treamentCaption ul li a{color:#fff; } .treamentHolder *{ box-sizing:border-box; } .treamentHolder:hover .treatmentImage img{filter: blur(65px); transition: all .5s;} .treamentHolder:hover .treamentCaption{ opacity:1.0; visibility:visible; transition: all .5s;} .pageContent .btncn { margin:25px 0 25px 0; } .treatmentContentHolder h2{ text-transform:none; } .treatmentContentHolder .btncn-white{ border:1px solid var(--body-font-color); } .treatmentBoxHolder{ display:flex; background:#f7f7f7; } .treatmentContent{ width:50%; display:flex; align-items:center; padding:45px } .treatmentContent ul{ margin:0; padding:0; list-style:none; } .treatmentContent ul li{ font-size:var(--fs-20); color:var(--body-font-color); font-weight:400; padding:10px 0 } .pageContent h4{ color:var(--main-clr); font-size:var(--fs-20); font-weight:600; margin:0 } .address-holder{ margin:0 0 50px 0 } @media only screen and (max-width:1399px){ .treatmentContent{ padding:30px; } } @media only screen and (max-width:991px){ .treamentHolder{ margin-bottom:30px; } .treatmentImage{ margin:0 0 20px 0 } } @media only screen and (max-width:767px){ .treatmentBoxHolder{ flex-direction:column; } .treatmentContent{ width:100%; padding:5px 30px 30px } .treatmentBoxHolder{ margin-bottom:25px } } /*PINK SECTION*/ .pink-section{ background:var(--seconday-color); text-align:center; } .pink-section h2{ color:#fff } .pink-section .btncn-default{ background:var(--main-clr); } .pink-section .buttonGroupCenter{ margin:0 } .pink-section .btncn-default:hover{ background:transparent; } /*TREATMENT GALLERY*/ .treatmentGallery h2{ text-transform:none; } /*ACCRIDIAN SECTION*/ .accordian-new h3 { font-family: var(--bodyfont); font-weight: 400; font-size: var(--fs-20); color: var(--body-font-color); cursor: pointer; margin-bottom: 0; position: relative; padding: 30px 30px 30px 0; } .ui-accordion-content-new { } .ui-accordion-header-active-new{} .accordian-new h3:focus { outline: 0} .accordian-new h3:after { content: "\f063"; font-family: 'FontAwesome'; position: absolute; right: 0; top: 30px; font-size: 20px; color: #000000; font-weight: 300; transition: .5s} .inneraccordina-area { padding: 10px 0 45px 0; } .accordian-new h3.ui-accordion-header-active-new:after { transform: rotate(180deg); color: #3b3b3b} .accordianarea-new .accordian h3.ui-accordion-header-active-new:after { transform: rotate(-180deg); color: #f05824} .ui-accordion-content-new { padding: 0px 0px 30px 0; display: none} .ui-accordion-content-new p { text-align: justify; padding-bottom: 0} .accroContent{ border-bottom:1px solid #d3d3d3; } .accroContent h3{ margin:0; padding:30px 0; font-size:var(--fs-20); font-weight:500; font-family:var(--headfont); position: relative; cursor: pointer;} .accroContent p{ font-size:var(--fs-18); } h3.clcikbtn-new-3:after { content: "\f063"; font-family: 'FontAwesome'; position: absolute; right: 0; top: 26px; font-size: 20px; color: #000000; font-weight: 300; transition: .5s} h3.ui-accordion-header-active-new-3:after { transform: rotate(180deg); color: #3b3b3b;} .accordian-new-3 .accroContent{ border-bottom:1px solid #c8c6c1; } .content-tab-section .accroContent h3{ padding:25px 0; font-weight:300 ; font-size: var(--fs-24); font-family: var(--bodyfont); padding-right: 25px;} .gallerySlider .slick-slide { margin: 0 10px; } .gallerySlider .slick-list { margin: 0 -10px; } .gallerySlider .serviceItem{ opacity:1.0 } .gallerySlider .slick-prev{ position:absolute; top:50%; transform: translateY(-50%); left:0; background:#ffffff; border:none; font-size:20px; transition:all .5s; width: 46px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 0%; color: #000; z-index: 9} .gallerySlider .slick-next{ position:absolute; top:50%; transform: translateY(-50%); right:0; background:#ffffff; border:none; font-size:20px; transition:all .5s; width: 46px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 0%; color: #000; z-index: 9} .gallerySlider .slick-next:hover, .gallerySlider .slick-prev:hover{ opacity:1; transition:all .5s; background:var(--seconday-color); color:#fff } @media only screen and (max-width:767px){ .accordian-new h3{ padding: 15px 30px 15px 0; } .accordian-new h3:after{ top:17px; font-size:17px } } /*BEFORE AFTER SLIDER*/ .beforeAfterSlider{ width:100%; margin:0 auto; } .beforeAfterSlider .slick-prev{ position:absolute; top:50%; transform:translateY(-50%); left:-50px; font-size:30px; border:none; outline:none; background:transparent; color:#fff } .beforeAfterSlider .slick-next{ position:absolute; top:50%; transform:translateY(-50%); right:-50px; font-size:30px; border:none; outline:none; background:transparent; color:#fff } .beforeAfterSlider .slick-prev:hover, .beforeAfterSlider .slick-next:hover{ color:var(--body-font-color); } .beforeAfterSlider .slick-center{ transform:scale(1.3); transition:all .5s; transition-delay:0.5s } .beforeAfterSlider .slick-track{ } .sp-hover .btncn-default:hover{ background:transparent; border-color:var(--seconday-color); } .beforeAfterSlider .slick-prev{ position:absolute; top:50%; transform: translateY(-50%); left:-60px; background:transparent; border:none; font-size:20px; transition:all .5s; width: 47px; height: 47px; background: #ceeff0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--main-clr); } .beforeAfterSlider .slick-next{ position:absolute; top:50%; transform: translateY(-50%); right:-60px; background:transparent; border:none; font-size:20px; transition:all .5s; width: 47px; height: 47px; background: #ceeff0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--main-clr);} .beforeAfterSlider .slick-next:hover, .serviceSlider .slick-prev:hover{ opacity:1; transition:all .5s } @media only screen and (max-width:1199px){ } @media only screen and (max-width:767px){ .beforeAfterSlider .slick-center{ transform:scale(1.0); transition:all .5s; } .beforeAfterSlider{ margin:0 auto; width:75% } .beforeAfterSlider .slick-track{ padding:10px 0 } .beforeAfterSlider .slick-prev{ left:-40px } .beforeAfterSlider .slick-next{ right:-40px } } /*FOOTER*/ .footer{ background:#1C3247; } .footBottom{ padding:0px 0 30px 0; } .ftbtm{ justify-content:space-between; align-items:center; display: flex; border-top: 1px solid #2D4358; padding-top: 30px; } .copyright{ font-size:14px; color:rgba(255,255,255,0.42) ; text-transform: uppercase; letter-spacing: 2px; font-weight: 300} .footer-logo img{ } .footerTop{ padding:85px 0 50px 0; } .footerTopContent{ display:flex; justify-content:space-between; } .footerwidget_1{ width:15%; } .footerwidget_2{ width:300px; } .footerwidget_3{ width:15%; } .footerwidget_3{ width:26%; } .footerContent h4{ font-family:var(--headfont); font-size:var(--fs-26); color:#fff ; line-height:1.4 } .footer-nav{ } .footer-nav ul{ margin:0; padding:0; list-style:none; } .footer-nav ul li{ display:block; } .footer-nav ul li a{ display:block; font-weight:200; font-size:var(--fs-16); line-height:36px; color:#fff } .footer-nav ul li a:hover{ color:var(--main-clr); } .footerLogo img{ filter: grayscale(1) brightness(100); margin:0 0 30px 0 } .footerTopContent h2{ color:#fff ; font-size: var(--fs-36); font-weight: 300; line-height: 1.4; padding: 0 0 25px 0} .footerTopContent p{ color:#fff; font-size:var(--fs-16); font-family:var(--bodyfont); line-height:2; padding:0 0 30px 0 ; font-weight: 200; text-align: left;} .footerTopContent p strong{ font-weight:700 } .footerTopContent p a:hover{ color:var(--main-clr); } .footerTopContent p a i{ margin:0 5px 0 0 } .btnnSocialGrp{ display:flex; align-items:center; margin:15px 0 0 0 } .btnnSocialGrp .btncn-secondary{ color:#fff } .footerTop .btncn-light:hover{ background:#6daff3 } .footerTop h2{ font-size:var(--fs-28); font-family:var(--bodyfont); font-weight: 300} .social{ margin:45px 0 0 0; } .social ul{ margin:0; padding:0; list-style:none; display: flex; gap: 15px; justify-content: center;} .social ul li a{ display:block ; color:#fff; font-size:20px; width:48px; height:48px; background:#606f7e; border-radius:50%; text-align:center; line-height:48px; } .social ul li a:hover{ background:var(--main-clr); color:#fff } .footerTopContent p a{ color:#fff } .footerTopContent p a:hover{ color:var(--main-clr); } .footerTopContent table{ width:100%; } .footerTopContent table td{ color:#fff ; font-size:var(--fs-16); font-family:var(--bodyfont); line-height:1.8; font-weight: 200} .footerTopContent table td:first-child{ padding-right:20px; } .footer-main-cn h2{ font-size:var(--fs-36); } .breadcumb.mobile{ background:var(--light-blue-color); } .blogSection{ padding-bottom:45px ; padding-top: 90px} .blogdetails h1{ font-size:var(--fs-60); } .both-address-section h2{ } .both-address-section .iconListText{ font-size:var(--fs-20); line-height:35px; font-weight:300 } .both-address-section .iconListText span{ color:var(--main-clr); } .both-address-section .iconList{ margin:0 0 10px 0 } .both-address-section .iconListText a:hover{ color:var(--hover-color); } .both-address-section .iconListText i{ margin:0 10px 0 0 } .both-address-section .section-heading h2{ font-size:var(--fs-48); } .section-heading h2{ color:var(--body-font-color); font-size:var(--fs-48); padding:0 0 20px 0 } .btn-position-absolute { position: absolute; right: 15px; top: 10px;} .homeGallerySection .container{ position:relative; } .homeGallerySection .section-heading h2{ padding:0 } .homeGallerySection .section-heading h2 strong{ font-weight:400 } .homeGallerySection .section-heading{ display:flex; align-items:center; gap:50px; text-align:center; justify-content:center; padding-bottom:30px; } .homeGallerySection .section-heading .btncn-default{ background:var(--seconday-color); color:#fff; font-weight:400 } .homeGallerySection .section-heading .btncn-default:hover{ background:var(--main-clr); } @media (min-width: 768px) { .teamMobileSlider{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px} } .team-content{ padding:30px 0 0; text-align: center;} .team-content h3{ font-size:var(--fs-30); font-family:var(--headfont); font-weight:300; margin:0; padding:0 0 12px 0; color:var(--body-font-color); } .team-content h3 span{ display:block; font-family:var(--bodyfont); font-size:var(--fs-16); padding-top:10px } .team-content p{ padding-bottom:0; color:#161617 } .tag-line-box{ position:relative; } .tag-line-box img{ width:100%; } .tag-line-box-caption{ position:absolute; bottom:45px; left:0; width:100%; padding:0 60px } .tag-line-box-caption-inner{ background:rgba(255,255,255,0.7); padding:30px 50px; display:flex; align-items:center; justify-content:space-between; } .tag-line-box-caption-inner h2{ padding:0 } .border-heading{ border-bottom:2px solid #d2e3e8; } .border-heading h2 span{ position:relative; } .border-heading h2 span:after{ content:''; position:absolute; bottom:-35px; background:#1e718b ; height: 2px; left: 0; width: 100%; } .abt-conetnt-box{ padding:60px 0 0 0 } .abt-conetnt-box h3{ font-size:var(--fs-36); font-weight:300; font-family:var(--headfont); } .formHolderDark h2{ color:#fff; font-family:var(--secondary-font); font-weight:100 } .formHolderDark h2 strong{ font-weight:400 } .address-bottom{ display:flex; align-items:center; justify-content:space-between; gap:25px; } .address-left h5{ margin:0; font-size:var(--fs-28); font-weight:300; color:var(--main-clr); padding:0 0 15px 0 } .address-bottom .btncn-default{ margin:0 } .address-left p{ padding:0; font-size:var(--fs-16); } .both-address-section .border-heading { margin:0 0 60px 0 } .footerTopContent .btncn-default{ } .footerTopContent .btncn-default:hover{ opacity:0.8 } .contact-page-details .address-bottom{ align-items: flex-start; flex-direction: column; text-align:left; } .contact-page-details .btncn-default{ background:var(--seconday-color); } .contact-page-details .btncn-default:hover{ opacity:0.8 } .beforeAfterSlider{ width:100%; margin:0 auto; } .beforeAfterSlider .slick-slide { margin: 0 40px; } .beforeAfterSlider .slick-list { margin: 0 -40px; } .beforeAfterSlider .slick-prev{ position:absolute; top:50%; transform:translateY(-50%); left:30%; z-index: 9; font-size:30px; border:none; outline:none; background:transparent; color:#fff; width:46px; height:66px; background:#fff; color:var(--black-clr); text-align:center; display:flex; align-items:center; justify-content:center; border-radius: 0} .beforeAfterSlider .slick-next{ position:absolute; top:50%; transform:translateY(-50%); right:30%; font-size:30px; border:none; outline:none; width:46px; height:66px; background:#fff; color:var(--black-clr); text-align:center; display:flex; align-items:center; justify-content:center; border-radius: 0} .beforeAfterSlider .slick-prev:hover, .beforeAfterSlider .slick-next:hover{ color:#fff; background:var(--main-clr); } .beforeAfterSlider .slick-center{ transform:scale(1.3); transition:all .5s; transition-delay:0.5s } .beforeAfterSlider .slick-track{ padding:60px 0; overflow:visible; } .sp-hover .btncn-default:hover{ background:transparent; border-color:var(--seconday-color); } .traement-dark .section-heading h2{ color:#fff; font-size:var(--fs-48); } .traement-dark .btncn-white:hover{ background:var(--main-clr); } .current-date-tr td{ font-weight:500 !important } .sp-header-highlight{ background:var(--seconday-color); } .address-bx p{ line-height:1.7 } .servic-slider-holder{ background:url(assets/images/servic-slider-bg.jpg) no-repeat; background-size:cover; padding:175px 0 ; position: relative;} .servic-slider-holder:after{ content:''; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.75) } .servic-slider-holder .container{ position:relative; z-index:9 } .half-banner .bannerImage{ width:50%; box-shadow: 10px 10px 25px 3.36px rgba(0, 0, 0, 0.30); } .half-banner{ display:flex; justify-content: flex-end; background: #1B3146 ; background: linear-gradient(180deg, #1B3146 0%, #4977a3 90%, #fff 90%, #fff 100%);} .half-banner h1{ font-size:80px; } .gal-image{ box-shadow: 5px 5px 15px 3.36px rgba(0, 0, 0, 0.20); } .resultReview{background:#EFF1F3;padding:20px;border-radius: 20px;margin: 14px 0 0 0;text-align: center;} .revImage img{ width:62px; height:62px; border-radius: 50%;} .revImage{ width:62px; flex-shrink:0 } .resultReviewTop{display:flex;align-items:center;gap:12px;/* border-bottom:1px solid #D5D5D7; *//* padding-bottom:15px; *//* margin:0 0 15px 0; */text-align: center;} .revDetails{font-weight:500;color:#231F20;font-size:var(--fs-18);text-align: center;} .revDetails span{display:block;color:#0055A5;font-size: 18px;text-align: center;font-weight: 300} .resultReview p{ font-size:var(--fs-16) ; line-height: 25px; padding-bottom:0 } .resultReview p a{ color:var(--main-clr); } .resultReview p a:hover{ text-decoration:underline; text-underline-offset:5px; } .resultSlider .slick-slide { margin: 0 15px; } .resultSlider .slick-list { margin: 0 -15px; } .resultSlider .slick-prev{ background:transparent; border:none; outline:none; color:#fff; font-size:40px; top:140px; left:30px; z-index: 9; position: absolute;} .resultSlider .slick-next{ background:transparent; border:none; outline:none; color:#fff; font-size:40px; top:140px; right:30px; z-index: 9; position: absolute;} .contentVideo { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; margin: 0 0 30px 0} .contentVideo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .resultImage img{ width:100% } .result-slider-grid{ display: grid;grid-template-columns: repeat(3, 1fr); gap: 20px; } @media only screen and (min-width:992px){ .footer-heading-block{ pointer-events:none; } } @media only screen and (max-width:1199px){ .footerTopContent h2{ font-size:36px } .footerTop{ padding:45px 0 } .footBottom{padding: 15px 0} .footerTopContent{ display:block; } .footerwidget_1{ width:100%; margin:0 0 15px 0 } .footerwidget_2{ width:100%; margin:30px 0 30px 0} .footerwidget_3{ width:100%; margin:0 0 15px 0} } @media only screen and (max-width:767px){ .footerTopContent h2{ font-size:32px } .enquiryBtn a{ padding:15px 20px } .ftbtm{ flex-direction:column; align-items: center;} .copyright{ padding-bottom:15px } .btnnSocialGrp{ flex-direction:column; } .footerTopContent h2{ font-size:24px } .copyright{ text-align:center; } } /*FOOTER END*/ /*RESPONSIVE CSS*/ .desktop{ display:block; } .mobile{ display:none; } @media only screen and (max-width:1700px){ :root{ --fs-48: 50px; --fs-24: 22px; } .bannerCaption h1{ font-size:75px } .inner-banner .bannerCaption h1{ font-size:70px } .halfBannerCaption h1{ font-size:70px } .logo{ width:300px } .fixed .logo{ width:300px } .headerMian{ top:38px } .fixed.headerMian{ top:0 } .phContent{ font-size:18px; } .bookAppointment a{ padding:35px 25px; } .banner h5{ font-size:16px; padding:0 0 10px 0 } .fixed .bookAppointment a{ padding:35px 25px; } .welcome-content{ margin-top: -85px; } .content-tab-section .accroContent h3{ font-size:24px; } } @media only screen and (max-width:1399px){ :root{ --fs-60: 45px; --fs-48: 36px; --fs-42: 30px; --fs-18: 16px; --fs-28: 22px; } .headerMian .container-fluid{ padding:0 20px } .bannerCaption h1{ font-size:80px } .bannerCaption h2{ font-size:20px } .welcomeSection{ padding:50px 0 0 } .section{ padding:50px 0 } .contentHolder:not(:last-child){ padding:0 0 50px 0 } .btncn{ padding: 15px 25px 13px; } .duel-bg{ padding-top:0 } .sp-section-bottom .btncn{ padding: 30px 45px; } .no-padding-top{ padding-top:0 } .halfBannerCaption h1{ font-size:60px } .phContent{ font-size:14px; } .phContent span{ font-size:12px; } .phIcon{ width:30px; height:30px; font-size:13px; } .bookAppointment a{ font-size:15px; padding: 35px 15px; } .fixed .bookAppointment a{ font-size:15px; padding: 35px 15px; } .logo{ width:160px } .fixed .logo{ width:200px } .navigation nav ul li a{ font-size:18px; } .navigation nav ul{ gap:30px; } .bookAppointment a{ margin:0 0 0 15px; } .bannerCaption h1{ font-size:65px } .bannerCaption{ top:38% } .serviceSlider { padding:0 0; } .serviceSlider .slick-prev{ left:-25px; } .serviceSlider .slick-next{ right:-25px } .footerContent h4{ font-size:22px; margin:0 } .qualityContent h3{ margin:0; font-size:26px; } .hmfrmcon{ padding:50px 50px 50px 0 } .g-5, .gx-5 { --bs-gutter-x: 2rem;} .inner-banner .bannerCaption h1{ font-size:60px; } .top-content-overlap{ margin:0 } .treatmentImageHolder .qualityContent h3{ font-size:24px; } .treatmentImageHolder{ row-gap:30px } .galInnerContainer{ padding:20px } .galInnerContainer ul li{ font-size:18px } .content-sec-bottom{ padding:50px 0 0 0 } .cts-image h2{ font-size:60px } .full-part-banner h1{ font-size:55px; padding-bottom:40px; } .resultSlider .slick-prev{ top:106px } .resultSlider .slick-next{ top:106px } .resultImage img{ height:268px; object-fit:cover; border-radius:20px } .footerwidget_2{ width:210px } ..footerwidget_3{ width:30% } } @media only screen and (max-width:1300px){ .navigation nav ul{ gap:20px; } .navigation nav ul li a{ font-size:15px } .fixed .bookAppointment a{ padding: 35px 15px; } .serviceItem h3{ font-size:28px; } .servic-slider-holder{ padding:75px 0 } } @media only screen and (max-width:1199px){ :root{ --fs-60: 40px; --fs-36: 27px; --fs-30: 25px; --fs-24: 18px; --fs-22: 18px; } .logo{ position:relative; z-index:9999 } .welcomeLeft, .welcomeRight{ width:50% } .g-5, .gx-5{ --bs-gutter-x: 3rem; } .welcomeContent{ gap:120px } .buttonGroup{ flex-direction:column; } .buttonGroup a{ margin:0 } .contentHolder ul li a{ font-size:20px; padding:12px 0 } .sp-section-bottom h2{ padding:0 30px 20px } .sp-section-bottom .btncn{ padding:25px 25px } .formHolderDark .align-items-center { align-items: flex-end !important;} .formHolderDark p br{ display:none; } .formHolderDark h2{ font-size:30px } .hmfrmcon{ padding-top:50px; padding-bottom:50px } .ratingSection h4{ font-size:16px } .number{ font-size:26px } .phoneNumber, .bookAppointment a{ position:relative; z-index:9999 } .halfBannerCaption h1{ font-size:50px; padding:0 0 15px 0 } .innerbannerContent{top:50%} .navigation{ visibility:hidden; } .headerMian .container-fluid{ } .bookAppointment{ margin:0 60px 0 0 } .treatment-welcome:before { height: 30%; top: -30%;} .treatment-repeat{ width:48% } .bookAppointment a{ padding:30px 15px } .logo{ width:170px } .fixed .logo { width: 170px; } .fixed .bookAppointment a{ padding: 30px 15px; } .fixed .section-parent-menu{ padding:0 } .serviceSlider{ margin:20px 0 0 0 } .team-content{ padding:15px 0 0 } .tag-line-box-caption-inner{ padding:15px 30px } .abt-conetnt-box{ padding:40px 0 0 0 } .abt-conetnt-box h3{ margin:0 } .reviewSection .reviewItem{ padding:30px; } .address-bottom{ margin:0 0 45px 0 } .footerLogo{ width:120px } .footerTop h2{ font-size:25px; } .footer-nav{ margin-bottom:30px } .footBottom{ padding-bottom:30px } .inner-banner .bannerCaption h1{ font-size:50px; } .mean-container a.meanmenu-reveal{ right:0px !important } .full-image img{ max-width:100% } .sidebarContent{ padding:40px 20px; } .video-caption{ top: 70%; } .bannerCaption h1{ font-size:55px; } .banner-logo-holder{ margin:0 0 20px 0 } .serviceItem h3{ font-size:20px; } .cts-image h2{ font-size:50px } .inner-banner h1{ padding-bottom:25px; } .bannerCaption{ top:50% } .breadcumb ul{ margin:0; margin-top:15px; } .full-part-banner{ padding:50px 0 0 0 } .full-part-banner h1{ font-size:45px; } li.normal-menu ul{ position:relative; } .section-parent-menu{ margin:0 } .result-slider-grid{ display: grid;grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media only screen and (max-width:991px){ :root{ --fs-30: 22px; } .bannerCaption h1{ font-size:55px } .bannerCaption h2{ font-size:15px } .welcomeContent{ flex-direction:column; gap: 10px} .welcomeLeft, .welcomeRight{ width:100% } .serviceSlider{ margin:0 } .serviceSlider .slick-next{ bottom:-2px; top:inherit; left:55%; right:inherit; } .serviceSlider .slick-prev{ bottom:-2px; top:inherit; left: 39%; right: inherit;} .serviceSlider {padding:0 0 30px 0 } .ratingSection{ padding:10px 0 0 0 } .sp-section-bottom h2{ font-size:24px } .sp-section-bottom .btncn{ font-size:16px } .doctorSliderNav .slick-slide.slick-current{ outline:2px solid var(--seconday-color); outline-offset:-2px } .doctorItemNav{ display:block !important; } .desktop{ display:none; } .mobile{ display:block; } .doctorSliderNav .slick-next{ left: inherit; right: 0; bottom:inherit; top:50%; transform:translateY(-50%); } .doctorSliderNav .slick-prev{right: inherit; left: 0; bottom:inherit; top:50%; transform:translateY(-50%); } .doctorSliderNav { padding:0 50px } .hmfrmcon{ padding-right:0; padding-left:0 } .beforeAfterSlider{ width:85% } .halfBannerCaption h1{ font-size:42px } .formHolderBg {position: static; margin: 0 0 50px 0; } .formHolderDark::after {width: 100%; } .formHolderDark {padding-top: 0; background: var(--deep-blue); } .formHolderBg img {aspect-ratio: 1.38; } .contentHolder ul li a:before{ top:12px; } .appointmentSticker{ padding:30px; flex-wrap: wrap; text-align: center; justify-content: center;} .teamHolder{ margin:10px 0 0 0 } .midBtn{ margin-top:0 !important } .welcomeLeft h2 br{ display:none; } .welcomeLeft:after{ display:none; } .g-5, .gy-5 { --bs-gutter-y: 0rem !important;} .partnetSectionTreatment{ padding:0 0 50px 0 } .phoneNumberIcon{ margin:0 0 0 20px } .hoverImage{ margin:0 0 30px 0 } .formHolderDark{ background:var(--main-clr); } .inner-banner .bannerCaption h1{ font-size:50px; } .halfBannerCaption h1{ font-size:50px; } .traement-dark{ padding: 30px 28px; } .team-content{ padding:0; margin-bottom:20px } .team-content h3{ font-size:28px; } .abt-conetnt-box .btn-line{ margin:0 0 30px 0 } .right-full-image{ width:100%; position:static; } .formHolder{ background-size:cover !important; } .reviewSection .section-heading{ text-align:center; } .content-tab-section{ padding:30px 0 } .beforeAfterSlider .slick-prev{ left:-39px; } .beforeAfterSlider .slick-next{ right:-28px } .welcome-content{ margin-top:0 } .welcome-content{ padding:0 } .service-slider-section .btn-position-absolute{ top:0 } .service-slider-section{ padding-bottom:50px } .serviceItem h3{ font-size:20px; padding:0 15px 15px } .full-image{ margin-bottom:30px; } .footer-logo{ width:300px; } .serviceSlider { margin:30px 0 0 0; width:100%; } .homeGallerySection .section-heading{ flex-direction:column; gap:20px; padding-bottom:0 } .half-banner .bannerImage{ width:100% } .teamMobileSlider{ gap:20px } .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} .inner-banner{ position:relative; } .inner-banner:after{content:''; background: #1C3247; background: linear-gradient(0deg,rgba(28, 50, 71, 1) 0%, rgba(255, 255, 255, 0) 100%); width: 100%; position: absolute; bottom: 0; left: 0; height: 100%} } @media only screen and (max-width:767px){ :root { --fs-60: 44px; --fs-48: 40px; --fs-42: 26px; --fs-18: 16px; --fs-20: 17px; } .container{ padding:0 30px } .bannerCaption h1{ font-size:42px } .btncn{ font-size:15px; padding: 15px 20px 13px; } .btncn-default i, .btncn-secondary i{ margin:0 5px 0 0 } .serviceSlider .slick-next{ left:60% } .serviceSlider .slick-prev{ left:40% } .number{ margin-bottom:25px } .reviewSlider .slick-prev{ left:-30px; } .reviewSlider .slick-next{ right:-30px } .reviewSlider{ padding:0 20px } .reviewItem{ padding:30px } .contentHolder ul li a:before{ top:12px } .sp-section-bottom{ position: static; background: var(--main-clr); flex-direction: column; align-items: center; box-shadow: -50vw 0 0 var(--main-clr), 50vw 0 0 var(--main-clr), -50vw -65px 0 var(--main-clr), 50vw -65px 0 var(--main-clr); padding-bottom: 30px; padding-top: 25px; } .sp-section-bottom h2{ padding:15px; text-align:center; } .sp-section-bottom .btncn{ font-size:15px } .mean-container a.meanmenu-reveal{ margin-top:-17px } .headerMian{ padding-top:10px; padding-bottom:10px } .bookAppointment a{ margin: 0 0 0 0; } .mean-container a.meanmenu-reveal{ right:0 !important ; } .headerHolder{ gap:5px; } .bookAppointment a{ width:34px; height:34px } .mean-container .mean-nav{ } .welcomeLeft:after{ display:none; } .logo{ width:130px } .fixed .logo { width: 130px; } .innerbannerContent h2{ font-size:40px } .innerbannerContent{ padding:0 } .g-5, .gy-5{--bs-gutter-y: 1rem;} .treamentHolder h3{ padding:0; margin:0 } .pageContent h2{ font-size:30px; } .accordian-new h3{ font-weight:500; font-size:18px; } .blogTop{ padding:15px; flex-direction:column; justify-content:center; align-items:center; } .categotyDropdown select{ width:100% } .sortBy{ width:100%; } .categotyDropdown{ width:100% } .blogPostContent a h4{ margin:0 } .fixed .bookAppointment a { padding: inherit; } /*.mean-container a.meanmenu-reveal{background: transparent;margin-top:0;color:#fff } .mean-container a.meanmenu-reveal {background: transparent; } .mean-container a.meanmenu-reveal span {background: #fff; }*/ .halfBannerImage{ width:100% } .halfBannerCaption{ text-align:center; position: static; transform: translate(0); padding: 15px 0} .halfInnerBanner{ display:block; } .formGroup{ flex-wrap:wrap; gap:0 } .iconList{ margin:0 0 20px 0 } .blogSection{ padding:30px 0 } .categotyDropdown select{ background-size:24px 24px } .categotyDropdown{ margin:0 } .phContent{ display:none; } .bookAppointment a{ width:39px; height:39px; background:var(--main-clr) ; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 } .phoneNumberIcon{ margin:0 0 0 15px } .headerTop ul li{ padding:0 10px } .btncn{ padding: 15px 14px 15px; } .banner-logo-holder{ gap:10px } .welcomeContent h6{ padding:0 0 15px 0 } .serviceItem h3{ padding:0 15px 15px; text-align: center;} .serviceSlider .slick-prev{ left:24% } .number{ font-size:30px; } .reviewSlider .slick-prev{ left:-42px; width: 40px;} .reviewSlider .slick-next{ right:-42px; width: 40px;} .footerContent h4{ font-size:20px } .contentSection{ padding-top:0 } .mapHolder{ margin:0 0 30px 0 } .both-address-section .section-heading{ margin:0 } .banner h5{ font-size:14px; } .inner-banner .bannerCaption h1{ font-size:50px; } .halfBannerCaption h1{ font-size:42px; } .treatment-repeat{ width:100% } .welcomeSection:before{ top: -30%; height: 30%; } .treatment-welcome:before{ top: -5%; height: 5%; } .innerBanner img{ height:400px; object-fit:cover; } .halfBannerCaption{ background:var(--seconday-color); } .beafSliderItem{ flex-direction:column; } .beafSliderItem img{ width:100% } .fixed .mean-container .mean-nav { margin-top: 16px;} .bannerCaption{ text-align:center; } .banner-btn-group{display:flex; flex-wrap:wrap; gap:14px; justify-content: center;} .banner-btn-group .btncn{ margin:0 } .welcomeSection { margin:0 0 0 0 } .btn-position-absolute{ position:static; } .homeGallerySection .section-heading{ margin:0 0 5px 0 } .tag-line-box-caption{ position:static; padding:0; } .tag-line-box-caption-inner{ padding:15px ; background: rgb(233 233 233 / 70%)} .tag-line-box-caption-inner{ flex-direction:column; text-align:center; } .homeFormHolder{ padding:0 } .reviewSlider{ width:88%; padding:0 } .address-bottom{ flex-direction:column; text-align:center; } .address-left p{ text-align:center; } .reviewSection .section-heading{ text-align:center; } .inneraccordina-area{ padding-bottom:0 } .both-address-section .border-heading { margin: 0 0 35px 0;} .blogTop{ border-radius:4px; } .homeGallerySection .section-heading h2{ padding-right:0 } .bookAppointment a i{ display:block; } .phoneNumber a{ width:39px; height:39px; color: #fff; background:var(--main-clr) ; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 } .service-slider-section .section-heading h2{ padding-right:0; padding-bottom:0 } .full-image{ max-width: 70%; margin:0 auto 25px;} .footerTop h2{ } .btn-group{ flex-direction:column; gap:0; margin:0; } .btn-group .btncn{ margin:3px 0 } .breadcumb.main{ position:static; margin:0 } .beforeAfterSlider .slick-track{ padding:0 } .insta-feed{ margin:0 } .btm-txt-vid{ display:none; } .video-holder h2{ position:static; top:inherit; transform:translateY(0); mix-blend-mode: normal; padding:15px } .video-holder{ background:var(--seconday-color); } .video-caption{ position:static; top:inherit; transform:translateY(0); } .video-caption{ padding-bottom:15px } .content-tab-section{ padding:0 } .breadcumb ul li{ font-size:12px; } .cts-image h2{ font-size:28px; left:10px; bottom:10px; position:static; padding:10px; background:var(--seconday-color); mix-blend-mode:normal; } .gallery-item .hoverImage{ margin:0 } .content-tab-section .accroContent h3{ font-size:22px; padding-right:25px; } .full-part-banner h1{ font-size:35px; } .full-part-banner .bannerImage img{ height:260px } .partnersLogoImg{ width:45% } .time-holder{ margin-bottom:30px; } .teamMobileSlider .slick-list{ overflow:visible ; } .teamMobileSlider .slick-slide { margin: 0 15px; } .teamMobileSlider .slick-list { margin: 0 -15px; } .homeGallerySection .container{ width:80%; margin:0 auto; } .homeGallerySection .slick-prev{ background:transparent; border:none; outline:none; font-size:30px; color:#fff ; position: absolute; top: 100px; left: 20px; z-index: 9} .homeGallerySection .slick-next{ background:transparent; border:none; outline:none; font-size:30px; color:#fff ; position: absolute; top: 100px; right: 20px; z-index: 9} .footerTopContent p{ font-size:14px } .teamMemberImage{ margin-bottom:15px } .resultSlider .slick-list, .serviceSlider .slick-list{ width:100%; margin:0 auto; overflow:visible; } .resultImage img{ height:134px; } .resultReview{ padding:20px 10px } .sp-subnav{ display:none; } } @media only screen and (max-width:550px){ .result-slider-grid{ display: grid;grid-template-columns: repeat(1, 1fr); gap: 20px; } } .gal-before-imgsec{position:relative;} .gal-before-imgsec img{border-radius:10px 10px 0 0;} .gal-before-imgsec span{position:absolute; top:10px; right:15px; color:#fff;} .gal-after-imgsec{position:relative;} .gal-after-imgsec img{border-radius: 0 0 10px 10px;} .gal-after-imgsec span{position:absolute; bottom:10px; right:15px; color:#fff;} /* Pricing Table */ .custom-pricing-table { width: 100%; border-collapse: collapse; border: 2px solid var(--seconday-color); /* Match your brand's purple border */ margin-bottom: 1.5rem; } .custom-pricing-table th, .custom-pricing-table td { padding: 1rem; border-bottom: 1px solid #ddd; } .custom-pricing-table th { background-color: var(--seconday-color); color: white; text-align: left; } .custom-pricing-table tr.group-header td { background-color: var(--seconday-color); color: white; font-weight: bold; } .custom-pricing-table tbody tr:nth-child(even) { background-color: #f8f8f8; } .custom-pricing-table .note { text-align: centre; font-size: 0.85rem; color: #666; } /* === Sub Navigation Bar === */ .sp-subnav { width: 100%; background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.08); font-family: inherit; } .sp-subnav__inner { max-width: 100%; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--seconday-color); } .sp-subnav__left, .sp-subnav__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* === Buttons === */ .sp-subnav__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; text-decoration: none; line-height: 1; white-space: nowrap; transition: background .2s ease, color .2s ease; } .sp-subnav__btn i { font-size: 14px; } /* Primary buttons */ .sp-subnav__btn--call, .sp-subnav__btn--book { background: #fff; color: var(--main-clr); } .sp-subnav__btn--call:hover, .sp-subnav__btn--book:hover { background: var(--main-clr); color: #fff; } /* Ghost buttons */ .sp-subnav__btn--ghost { background: var(--main-clr); color: #fff; } .sp-subnav__btn--ghost:hover { background: #fff; color: var(--main-clr); } /* === Responsive === */ @media (max-width: 991px) { .sp-subnav__inner { flex-direction: column; align-items: stretch; } .sp-subnav__left, .sp-subnav__right { width: 100%; justify-content: center; } .sp-subnav__btn { justify-content: center; } } /* Video Gallery */ .video-card .thumb-wrapper { position: relative; overflow: hidden; border: 2px solid var(--seconday-color); cursor: pointer; transition: transform 0.2s ease; } .video-card .thumb-wrapper:hover { transform: scale(1.02); } .video-card img { width: 100%; height: auto; display: block; } .video-title { background: var(--seconday-color); color: white; padding: 0.75rem; text-align: center; font-weight: 600; font-size: 0.95rem; } /* Lightbox Modal */ .video-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 2rem; } .video-modal.open { display: flex; } .video-modal-inner { position: relative; max-width: 960px; width: 100%; } .video-iframe-wrapper { position: relative; padding-top: 56.25%; /* 16:9 ratio */ } .video-iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-close { position: absolute; top: -20px; right: -20px; background: white; border: none; font-size: 2rem; color: black; cursor: pointer; border-radius: 50%; width: 40px; height: 40px; z-index: 99999; } .sp-dental-referral-form { padding: 60px 20px; } /* shared container */ .sp-container { max-width: 760px; margin: 0 auto; } /* header container */ .sp-referral-header { text-align: center; margin-bottom: 32px; } .sp-referral-title { margin-bottom: 12px; } .sp-referral-intro { max-width: 640px; margin: 0 auto; } /* form container */ .sp-referral-form { text-align: left; /* keeps Gravity Forms tidy */ } #gform_submit_button_3 {background: var(--main-clr) !important; color: white !important;} #gform_submit_button_3:hover {color: var(--main-clr) !important; background: white !important;} /* Banner text overlay — keeps hero heading readable over the photo. Gradient is darkest on the left (where the text sits) and fades out to the right so the subject in the photo stays visible. */ .banner { position: relative; } .banner .bannerImage { position: relative; } .banner .bannerImage img { display: block; width: 100%; height: auto; } /* Overlay sits above the image but below the caption */ .banner .bannerImage .bannerOverlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .banner .bannerImage .bannerOverlay.overlay-light { background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0) 80%); } .banner .bannerImage .bannerOverlay.overlay-medium { background: linear-gradient(90deg, rgba(0,0,0,1.6) 0%, rgba(0,0,0,0.25) 68%, rgba(0,0,0,0) 85%); } .banner .bannerImage .bannerOverlay.overlay-dark { background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.10) 90%); } /* Make sure the caption (text + buttons) renders above the overlay */ .banner .bannerCaption { z-index: 2; } /* On small screens text usually stacks centered over the image — use a top-to-bottom wash there instead so it reads on any layout. */ @media (max-width: 991px) { .banner .bannerImage .bannerOverlay.overlay-light { background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.45)); } .banner .bannerImage .bannerOverlay.overlay-medium { background: linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.60)); } .banner .bannerImage .bannerOverlay.overlay-dark { background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.75)); } }