* { margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 18px; line-height: 27px; color: var(--text-color); overflow-x: hidden; } /* header section styling start */ .header-con { z-index: 99; top: 30px; position: absolute; } .header-con .navbar-light .navbar-nav .nav-item { position: relative; } .header-con .navbar-light .navbar-nav .nav-link { color: var(--white-color); font-size: 16px; font-weight: 600; } .header-con .navbar-light .navbar-nav .nav-item::after { content: ""; background: var(--white-color); width: 0; height: 1px; position: absolute; left: 0; bottom: -4px; transition: .4s ease-in-out; } .header-con .navbar-light .navbar-nav .nav-item:hover::after { width: 100%; } .header-con .navbar-light .navbar-nav .nav-item.dropdown::after { display: none; } .header-con .navbar-light .navbar-nav .nav-item.dropdown:hover .dropdown-menu { display: block; } .navbar-expand-lg .navbar-nav .dropdown-menu { top: 26px; padding: 0; margin: 0; } .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item { padding: 8px 20px; } .header-con .navbar-expand-lg .navbar-nav { gap: 48px; } .phone span { font-size: 18px; margin-bottom: 5px; color: var(--white-color); } .phone a { font-size: 22px; font-weight: 700; line-height: 22px; text-decoration: none; color: var(--white-color); } .phone a:hover { color: var(--primary--color); } .phone-txt { padding-left: 18px; } .search-field { padding-right: 42px; margin-right: 40px; line-height: 38px; display: inline-block; border-right: 1px solid rgb(255 255 255 / 30%); } .header-con .navbar-expand-lg .navbar-nav { gap: 25px; margin-right: 75px; } .header-con .dropdown-item:focus, .header-con .dropdown-item:hover { color: var(--white-color); text-decoration: none; background-color: var(--wb-primary-color); } /* header section styling end */ /* banner section styling start */ .banner-con { padding-top: 147px; background: var(--wb-primary-color) no-repeat; background-size: cover; } .banner-inner-con { display: grid; grid-template-columns: 40% 60%; } .banner-title { padding-top: 110px; } .banner-title h1 { margin-bottom: 19px; } .banner-title p { font-size: 20px; color: #d4dffb; line-height: 35px; margin-bottom: 34px; padding-right: 100px; } .banner-btn a { font-size: 20px; font-weight: 600; text-decoration: none; color: var(--white-color); transition: .4s ease-in-out; } .banner-btn a:hover { transform: translateY(-8px); } .banner-btn a:hover figure { background: var(--white-color); } .banner-btn a:hover figure img { filter: brightness(0) saturate(100%) invert(17%) sepia(65%) saturate(5340%) hue-rotate(236deg) brightness(96%) contrast(104%); } .banner-btn figure { width: 65px; height: 65px; border-radius: 50%; border: 1px solid var(--white-color); } .banner-btn { gap: 17px; transition: .3s ease-in-out; } .banner-details>figure { margin-left: -180px; } .banner-details-txt p { font-size: 20px; line-height: 31px; position: relative; margin-bottom: 49px; color: var(--white-color); width: 97%; margin-left: -28px; } .banner-details-txt { right: 0; width: 55%; position: absolute; } .banner-details-txt p:after { top: 50%; width: 3px; left: -21px; content: ""; height: 80px; position: absolute; transform: translateY(-50%); background: var(--white-color); } .banner-details-txt { position: absolute; top: 149px; } .banner-static-box ul li figure { width: 77px; height: 77px; border-radius: 50%; background: rgb(0 0 0 / 10%); } .static-value { font-size: 60px; font-weight: 700; line-height: 50px; color: var(--white-color); font-family: 'Montserrat', sans-serif; } .banner-static-txt span { font-size: 16px; color: #d4dffb; } .banner-static-txt span:nth-child(2) { font-size: 18px; font-weight: 600; color: var(--white-color); } .banner-static-box ul li { gap: 20px; margin-bottom: 50px; } .banner-static-box ul li:last-child { margin-bottom: 0; } .client-review { top: 56%; gap: 15px; padding: 14px 56px 14px 14px; position: absolute; border-radius: 37px; transform: translateY(-50%); background: rgb(255 255 255 / 92%); left: 31%; box-shadow: 13px 13px 35px 9px rgb(0 0 0 / 8%); } .review-img figure { width: 45px; height: 45px; border-radius: 50%; border: 2px solid var(--white-color); } .review-img img { border-radius: 50%; width: 100%; object-fit: cover; } .review-img figure:nth-child(2), .review-img figure:last-child { margin-left: -20px; } .review-txt span:first-child { font-size: 22px; color: #fbab00; font-weight: 700; line-height: 22px; } .review-txt span:last-child { font-size: 13px; color: var(--primary--color); line-height: 13px; } .review-txt figure { margin-left: 3px; } .banner-inner-box:after { content: ""; bottom: 0; right: -110px; width: 216px; height: 254px; position: absolute; /*background: url(../images/apple-shape-img.png) no-repeat;*/ } .banner-inner-box:before { content: ""; bottom: 0; left: -110px; width: 330px; height: 183px; position: absolute; /*background: url(../images/box-shape-img1.png) no-repeat;*/ } .banner-con:after { content: ""; top: 0; right: 0; width: 130px; height: 120px; position: absolute; /*background: url(../images/double-shape-img2.png) no-repeat;*/ } /* banner section styling end */ /* service section styling start */ .service-box { gap: 30px; display: grid; grid-template-columns: 23% 23% 23% 23%; } .service-box-content span { margin-bottom: 10px; } .service-box-content h2 { margin-bottom: 17px; } .service-box-item { border-radius: 10px; padding: 44px 32px 26px 36px; background: var(--white-color); border: 1px solid transparent; box-shadow: 2px 2px 52px 6px rgb(36 63 250 / 4%); } .service-box-item figure { height: 73px; margin-bottom: 21px; } .service-box-item:hover { border-color: var(--wb-primary-color); box-shadow: 2px 2px 52px 6px rgb(36 63 250 / 13%); transition: .3s; } .service-box-item h4 { margin-bottom: 10px; } .service-box-item p { margin-bottom: 15px; } .service-box-item a { font-size: 15px; font-weight: 500; color: var(--wb-primary-color); text-decoration: none; display: inline-block; } .service-provide-box { gap: 15px; width: 211.6%; display: grid; align-items: center; grid-template-columns: 36% 64%; background: #0f2349; border-radius: 10px; overflow: hidden; padding-left: 37px; } .service-provide-img figure img { width: 332px; height: 332px; border-radius: 50%; margin-left: auto; object-fit: cover; } .service-provide-img { margin-left: auto; } .service-provide-title h3 { margin-bottom: 5px; color: var(--white-color); } .service-provide-title p { line-height: 25px; color: #c5ccd8; margin-bottom: 17px; } .service-provide-title a { font-size: 16px; font-weight: 600; text-decoration: none; color: var(--white-color); transition: .4s ease-in-out; } .service-provide-title a:hover { transform: translateY(-8px); } .provide-arrow figure { width: 30px; height: 30px; border-radius: 50%; background: var(--wb-primary-color); margin-left: 11px; } .service-box-item a i { top: 1px; position: relative; margin-left: 3px; } .about-con { overflow: hidden; background: #f6f9ff; } .design-img:before { left: -363px; bottom: -161px; width: 770px; height: 848px; content: ""; position: absolute; /*background: url(../images/design-lft-img.png) no-repeat;*/ } .design-img:after { right: -297px; top: -53px; width: 577px; height: 635px; content: ""; position: absolute; /*background: url(../images/design-rt-img.png) no-repeat;*/ } /* service section styling start */ /* lightbox styling start */ #fade1 { top: 0; left: 0; width: 100%; height: 100%; opacity: .80; z-index: 1001; display: none; position: fixed; filter: alpha(opacity=80); background-color: black; } #fade2 { top: 0; left: 0; width: 100%; height: 100%; opacity: .80; z-index: 1001; display: none; position: fixed; filter: alpha(opacity=80); background-color: black; } #light iframe { width: 100%; height: 500px; } #light2, #light { top: 70%; left: 50%; display: none; z-index: 1002; position: absolute; margin-top: -180px; transform: translate(-50%, -50%); } #light { width: 50%; } #light2 { width: 58%; } #light2 iframe { width: 100%; height: 500px; } .index3-poster { position: absolute; left: 10%; } .index3-video-wrap { left: 50%; top: 42%; height: 56px; width: 53px; } #boxclose { top: -10px; width: 40px; right: -10px; height: 40px; padding: 7px 10px 10px; display: flex; align-items: center; z-index: 1002; cursor: pointer; font-size: 30px; font-weight: bold; line-height: 30px; position: absolute; border-radius: 50%; justify-content: center; color: var(--white-color); background: var(--wb-primary-color); } .boxclose:before { content: "×"; } #fade1:hover~#boxclose { display: none; } .test:hover~.test2 { display: none; } /* lightbox styling end */ /* video section styling start */ .index1-poster { width: 296px; height: 266px; object-fit: cover; border-radius: 10px; } .vedio-sub-img { display: flex; gap: 30px; flex-wrap: wrap; } .video-wrap { width: 64px; display: flex; height: 64px; z-index: 1; position: relative; background: var(--white-color); border-radius: 50%; align-items: center; outline-offset: 10px; justify-content: center; } .btn-outer a { display: inline-block; } .btn-outer { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); width: 168px; height: 168px; background: var(--wb-primary-color); display: flex; align-items: center; justify-content: center; border-radius: 50%; background-repeat: no-repeat; background-position: center; } .about-box { gap: 60px; display: grid; align-items: center; grid-template-columns: 53% 44%; } .vedio-sub-img img:nth-child(2) { width: 295px; height: 455px; } .vedio-sub-img img:last-child { margin-top: -249px; } .about-box-title { position: relative; z-index: 2; } .about-box-title span { margin-bottom: 10px; } .about-box-title h2 { margin-bottom: 26px; } .about-box-title p { margin-bottom: 28px; } .about-box-title .generic-list { display: grid; margin-bottom: 32px; grid-template-columns: 52.5% 47%; } .generic-btn a { font-size: 20px; font-weight: 600; text-decoration: none; transition: .3s ease-in-out; color: var(--wb-primary-color); } .generic-btn { gap: 19px; display: flex; align-items: center; } .generic-btn a figure { width: 65px; height: 65px; display: flex; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid var(--wb-primary-color); } .generic-btn a:hover { transform: translateY(-8px); } .generic-btn a:hover i { color: #fff; } .generic-btn a:hover figure { background: var(--wb-primary-color); border-color: var(--wb-primary-color); } .generic-btn a:hover figure img { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(81deg) brightness(105%) contrast(104%); } .vedio-sub-img img:nth-child(2) { margin-top: 60px; } /* video section styling end */ /* contact section styling start */ .contact-con { background-size: cover; } .contact-con:before { top: 0; left: 0; width: 100%; content: ""; height: 100%; position: absolute; background: rgb(15 35 73 / 95%); } .contact-form { position: relative; z-index: 1; } .contact-form { border-radius: 10px; width: 100%; margin: auto; padding: 75px 63px 76px; } .contact-form span { margin-bottom: 10px; color: var(--white-color); } .contact-form form ul li span { font-size: 13px; color: var(--primary--color); } .contact-form h2 { margin-bottom: 45px; color: var(--white-color); } .form-box ul { display: grid; gap: 23px 20px; margin-bottom: 40px; grid-template-columns: 48.4% 48.4%; } .form-box ul li input, .form-box ul li textarea { border: none; font-size: 16px; color: #d4dffb !important; width: 100%; padding-bottom: 10px; background: none; border-bottom: 1px solid rgb(255 255 255 / 30%); } .form-box ul li textarea { resize: none; height: 75px } .form-box ul li input::placeholder, .form-box ul li textarea::placeholder { font-size: 16px; color: #d4dffb; } .form-box ul li input:focus, .form-box ul li textarea:focus { outline: none; } .form-box ul li:last-child { grid-column: 1/-1; } .submit-btn a { text-decoration: none; color: var(--white-color); transition: .3s ease-in-out; line-height: 0; } .submit-btn button:hover { cursor: pointer; transform: translateY(-8px); color: #fff; } .submit-btn button:hover i { color: var(--wb-primary-color) } .submit-btn, .submit-btn button { border: none; background: transparent; display: flex; align-items: center; font-size: 20px; font-weight: 600; color: var(--white-color); gap: 18px; transition: .4s ease-in-out; } .submit-btn button:focus { outline: none; border: none; } .submit-btn a figure, .submit-btn button figure { width: 65px; height: 65px; display: flex; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid var(--white-color); } .submit-btn a:hover { transform: translateY(-8px); color: #fff; } .submit-btn a:hover figure, .submit-btn button:hover figure { background: var(--white-color); border-color: var(--white-color); } .submit-btn a:hover i { color: var(--wb-primary-color); } .submit-btn a:hover img, .submit-btn button:hover figure img { filter: brightness(0) saturate(100%) invert(17%) sepia(65%) saturate(5340%) hue-rotate(236deg) brightness(96%) contrast(104%); } .contact-inner-con:after { bottom: 0; left: -172px; content: ""; width: 707px; height: 630px; /*background: url(../images/shape-img.png) no-repeat;*/ position: absolute; } input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); margin: 0px; margin-right: 0 !important; } .dots-img:after { top: 0; left: 0; content: ""; width: 130px; height: 120px; position: absolute; /*background: url(../images/dots-lft-img.png) no-repeat;*/ } .dots-img::before { bottom: 0; right: 80px; z-index: 1; content: ""; width: 330px; height: 183px; position: absolute; /*background: url(../images/dots-rt-img.png) no-repeat;*/ } /* contact section styling end */ /* ********process section style start ******* */ .process-con ul { display: grid; grid-gap: 0 29px; grid-template-columns: 1fr 1fr 1fr 1fr; } .process-con ul li { display: flex; align-items: center; flex-direction: column; } .process-con ul li h4 { margin-bottom: 12px; } .process-con .process-img-box { width: 181px; height: 181px; display: flex; cursor: pointer; position: relative; border-radius: 100%; align-items: center; margin-bottom: 51px; justify-content: center; border: 1px dashed rgb(36 63 250 / 40%); transition: .3s; } .process-con .process-img-box figure { width: 144px; height: 144px; display: flex; margin: 0 auto; border-radius: 100%; transition: .3s; align-items: center; justify-content: center; box-shadow: 0 0 5px rgb(2 6 52 / 4%); } .process-con .process-img-box:hover figure { background: var(--wb-primary-color); } .process-con .process-img-box:hover { border: 1px dashed var(--wb-primary-color); } .process-con .process-img-box:hover figure img { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(3deg) brightness(107%) contrast(109%); } .process-img-box span { position: absolute; bottom: -19px; left: 50%; font-size: 14px; height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 100%; color: var(--white-color); background: var(--wb-primary-color); transform: translateX(-50%); } .generic-title { margin-bottom: 53px; position: relative; z-index: 1; } .generic-title span { margin-bottom: 10px; } .process-con ul li p:last-child { margin-bottom: 0; } /* ******** process section style end ******* */ /* ******** Team sections style start ******* */ .team-section { background: #f6f9ff; position: relative; overflow: hidden; } .bg-design::before { content: ""; /*background: url(../images/team-left-bg-img.png) no-repeat left;*/ width: 341px; height: 635px; position: absolute; left: 0; top: -55px; } .bg-design::after { content: ""; /*background: url(../images/team-right-bg-img.png) no-repeat right;*/ background-size: cover; width: 408px; height: 609px; position: absolute; right: 0; bottom: 0; } .social-links li { height: 40px; width: 40px; margin: 0 3px; border-radius: 100%; background: var(--wb-primary-color); font-size: 16px; transition: .3s ease-in-out; border: 1px solid transparent; } .social-links li a { color: var(--white-color); padding: 6px 13px; border-radius: 100%; transition: .3s ease-in-out; display: flex; align-items: center; } .social-links li:hover { background: var(--white-color); border-color: var(--wb-primary-color); transform: translateY(-6px); } .social-links li:hover a { color: var(--wb-primary-color); } .team-members-con>ul { display: grid; grid-gap: 60px 30px; grid-template-columns: 1fr 1fr 1fr 1fr; } .team-members-con ul li figure { margin-bottom: 24px; overflow: hidden; } .team-members-con ul li h4 { margin-bottom: 5px; } .team-members-con ul li span { margin-bottom: 16px; } .team-members-con ul li figure img { width: 254px; height: 254px; border-radius: 100%; object-fit: cover; } /* ********Team sections style end******* */ /* *******Review section style start****** */ .patients-reviews-sec .owl-carousel .owl-item img { width: auto; } .review-box { width: 350px; padding: 50px 34px 46px; border-radius: 10px; background: var(--white-color); box-shadow: 2px 2px 52px 6px rgb(36 63 250 / 4%); transition: .3s; } .review-box p { margin-bottom: 20px; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; height: 108px; } .patient-details .patient-rating { margin-left: 16px; } .patient-rating h5 { font-size: 18px; margin-bottom: 0; font-weight: 600; color: var(--primary--color); } .patient-rating span { font-size: 14px; } .patient-rating figure { margin-bottom: 12px; } .patients-reviews-sec .owl-carousel .owl-dots.disabled { display: block; } .patients-reviews-sec .owl-carousel .owl-dots { text-align: center; } .patients-reviews-sec .owl-carousel button.owl-dot { border: solid; margin: 0 5px; height: 13px; width: 13px; background: #c5ccdc; border-radius: 100%; border-color: #c5ccdc; } .patients-reviews-sec .owl-carousel .owl-nav { display: none; } .patients-reviews-sec .owl-carousel button.owl-dot.active { height: 18px; width: 18px; background: var(--primary--color); border-color: var(--primary--color); } .patients-reviews-sec .owl-carousel button.owl-dot:focus { outline: none; } .patients-reviews-sec .owl-carousel .owl-stage { width: 8000px !important; } .patients-reviews-sec .owl-carousel .owl-stage-outer { margin-bottom: 25px; box-shadow: 2px 2px 52px 6px rgb(36 63 250 / 4%); } .patients-reviews-sec .owl-carousel { position: relative; } .patients-reviews-sec .owl-carousel::after { content: ""; /*background: url(../images/review-small-img.png) no-repeat right;*/ width: 312px; height: 367px; position: absolute; right: -165px; top: -161px; z-index: -1; } .patients-reviews-sec .review-box:hover { cursor: pointer; color: #d4dffb; background: var(--wb-primary-color); } .patients-reviews-sec .review-box:hover>figure img { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(3deg) brightness(107%) contrast(109%); } .patients-reviews-sec .review-box:hover .patient-rating h5 { color: var(--white-color); } /* *******Review section style end****** */ /* ********counter section style start******** */ .counter-section { position: relative; padding: 105px 0; background-position: center; background-repeat: no-repeat; } .counter-section::before { content: ""; /*background: url(../images/counter-sec-left-img.png) no-repeat left bottom;*/ width: 216px; height: 254px; position: absolute; bottom: -60px; left: 40px; } .counter-section::after { content: ""; /*background: url(../images/counter-sec-right-top-img.png) no-repeat top right;*/ width: 130px; height: 120px; position: absolute; right: 0; top: 0; } .counter-inner-sec .counter-box { font-size: 50px; line-height: 60px; font-weight: 600; color: var(--white-color); margin-left: 10px; margin-bottom: 10px; } .counter-inner-sec .client-status { font-size: 18px; line-height: 20px; color: #a2b1cc; margin-left: 10px; } .counter-inner-sec ul { display: grid; grid-template-columns: 26% 25% 26% 23%; } .counter-inner-sec ul li { padding: 0 10px 0 50px; border-right: 1px solid #fff; } .counter-inner-sec ul li:nth-child(4) { border-right: none; } .counter-inner-sec ul li figure { margin-bottom: 32px; } .counter-inner-sec .counter-box .plus { margin-left: -9px; } /* ********counter section style end******** */ /* ******blog section style start***** */ .blog-box { width: 350px; background: var(--white-color); border-radius: 15px; overflow: hidden; } .blog-img-box { width: 350px; height: 342px; border-radius: 10px; transition: .4s ease-in-out; } .blog-first-img { background-position-x: 36%; background-size: cover; } .blog-second-img { /*background: url(../images/blog-slider-img2.jpg) no-repeat bottom;*/ background-position-x: 46%; } .blog-third-img { /*background: url(../images/blog-slider-img3.jpg) no-repeat center;*/ background-position-x: 63%; } .blog-details { width: 290px; padding: 28px 28px 23px; border-radius: 10px; margin: -96px auto 0; transition: .4s ease-in-out; background: var(--white-color); border-bottom: 2px solid var(--wb-primary-color); position: relative; z-index: 3; } .blog-details span { font-size: 14px; margin-bottom: 8px; color: var(--wb-primary-color); } .blog-details span i { margin-right: 4px; } .blog-details h4 a { font-size: 18px; font-weight: 600; line-height: 27px; color: var(--primary--color); } .blog-details h4 { margin-bottom: 11px; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blog-details h4 a:hover { color: var(--wb-primary-color); } .blog-details a { font-size: 15px; font-weight: 500; display: inline-block; margin-bottom: 0; color: var(--wb-primary-color); } .blog-details a:hover { text-decoration: none; } .blog-details p { margin-bottom: 12px; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; } .lower-portion p { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-align: justify; margin-top: 7px; } .blogs-section .owl-carousel .owl-dots.disabled { display: block; } .blogs-section .owl-carousel .owl-nav { display: none; } .blogs-section .owl-carousel .owl-dots { text-align: center; } .blogs-section .owl-carousel button.owl-dot { border: solid; margin: 0 5px; height: 13px; width: 13px; background: #c5ccdc; border-radius: 100%; border-color: #c5ccdc; } .blogs-section .owl-carousel button.owl-dot.active { height: 18px; width: 18px; background: var(--primary--color); border-color: var(--primary--color); } .blogs-section .owl-carousel button.owl-dot:focus { outline: none; } .blogs-section .owl-carousel .owl-stage-outer { margin-bottom: 27px; } .blog-box:hover .blog-img-box { transform: translateY(15px); } .blog-box:hover .blog-details { transform: translateY(-15px); } /* ******blog section style end***** */ /* *****contact section style start***** */ .get-in-touch-section { padding-top: 100px; } .contact-section { background: var(--wb-primary-color); position: relative; padding: 78px 40px 60px; min-height: 363px; border-radius: 10px; overflow: hidden; } .contact-section::after { content: ""; /*background: url(../images/contact-section-right-img.png) no-repeat center;*/ width: 197px; height: 109px; position: absolute; right: 33px; bottom: 0; } .doctor-img-con { /*background: url(../images/doctors-img.png) no-repeat center;*/ width: 566px; height: 530px; position: absolute; top: -167px; left: -64px; } .contact-txt-con span, .contact-txt-con h2 { color: var(--white-color); } .contact-txt-con span { margin-bottom: 14px; } .contact-txt-con h2 { font-size: 44px; line-height: 50px; margin-bottom: 30px; } .contact-txt-con { width: 52%; float: right; } /* *****contact section style end***** */ /* ****footer section style start**** */ .footer-main-section { padding-top: 270px; padding-bottom: 82px; background: #0f2349; margin-top: -188px; } .footer-inner-con { display: grid; grid-template-columns: 31% 19% 24% 26%; } .footer-box p, .footer-box ul li, .footer-box ul li a { color: #a2b1cc; } .footer-box.footer-pages-links ul li { margin-bottom: 3px; position: relative; padding-left: 25px; } .footer-box.footer-pages-links ul li i { position: absolute; left: 0; top: 5px; } .footer-box p, .footer-box ul li a { font-size: 16px; } .footer-box ul li a:hover { color: var(--wb-primary-color); } .footer-box ul li { transition: .4s ease-in-out; } .footer-newsletter .social-links ul li:hover { background: var(--white-color); transform: translateY(-8px); } .footer-box h4 { font-size: 24px; color: var(--white-color); margin-bottom: 20px; font-weight: 500; } .footer-pages-links ul li i { margin-right: 10px; color: var(--white-color); } .contact-details-box ul li { position: relative; padding-left: 32px; margin-bottom: 6px; font-size: 16px; } .contact-details-box ul li i { position: absolute; left: 0; top: 5px; color: var(--white-color); } .footer-logo-box { padding-right: 50px; } .footer-logo-box figure { margin-bottom: 22px; } .footer-box { padding-top: 18px; } .footer-box.footer-logo-box { padding-top: 0; } .footer-logo-box p { margin-bottom: 7px; } .footer-pages-links { padding-left: 7px; } .contact-details-box { padding-left: 2px; padding-right: 20px; } .footer-box ul li input { border: none; color: #a2b1cc; padding: 8px 0; background: transparent; border-bottom: 1px solid #a2b1cc; } .footer-box ul li input::placeholder { color: #a2b1cc; } .footer-newsletter { padding-left: 3px; } .footer-newsletter ul li input { width: 100%; font-size: 14px; } .footer-newsletter ul li input:focus { outline: none; } .footer-newsletter ul li { position: relative; margin-bottom: 31px; } .footer-newsletter ul li button i { color: var(--wb-primary-color); } .footer-newsletter ul li button:hover { cursor: pointer; } .footer-newsletter ul li button:hover i { color: var(--white-color); } .footer-newsletter ul li button:focus { outline: none; } .footer-newsletter .social-links ul li a i { color: var(--white-color); transition: .4s ease-in-out; line-height: 0; } .footer-newsletter .social-links ul li:hover i { color: var(--wb-primary-color); } .footer-newsletter h4 { margin-bottom: 19px; } .copyright-con { padding: 20px; background: #02B8FE; } .copyright-con p { font-size: 14px; line-height: 18px; color: #a2b1cc; } /* ****footer section style end**** */ /* about us page start */ /* sub banner section style start*/ .sub-banner-con { /*background: url(../images/sub-banner-bg-img.jpg) no-repeat center;*/ background-size: cover; } .sub-banner-con::before { content: ""; background: #02B8FE; width: 100%; height: 100%; opacity: .8; position: absolute; top: 0; left: 0; } .sub-banner-inner-box p { color: var(--white-color); font-size: 20px; line-height: 33px; margin-bottom: 35px; } .sub-banner-inner-box { padding: 100px 0 20px; } .sub-banner-con .breadcrumb-item+.breadcrumb-item::before { display: inline-block; padding-right: 12px; padding-left: 15px; color: var(--white-color); content: "-"; } .sub-banner-con .breadcrumb { background: #0093cc; padding: 13px 35px 13px 36px; border-radius: 10px; } .sub-banner-con .breadcrumb li a { color: var(--white-color); } .sub-banner-con .breadcrumb li { font-size: 18px; } .sub-banner-inner-box h1 { font-size: 65px; margin-bottom: 0px; } .sub-banner-con:after { content: ""; top: 0; right: 0; width: 130px; height: 120px; position: absolute; /*background: url(../images/double-shape-img2.png) no-repeat;*/ } .sub-banner-inner-box:after { content: ""; bottom: -50px; right: -110px; width: 216px; height: 254px; position: absolute; /*background: url(../images/apple-shape-img.png) no-repeat;*/ } .sub-banner-inner-box:before { content: ""; bottom: 0; left: -110px; width: 330px; height: 183px; position: absolute; /*background: url(../images/box-shape-img1.png) no-repeat;*/ } /* sub banner section style end */ /* about page about us section */ .about-con.about-us-section { background: var(--white-color); padding-block: 60px; } .about-us-section .about-box-title .generic-list { grid-template-columns: 100%; } .about-poster1, .about-poster2, .about-poster3 { object-fit: cover; border-radius: 10px; border: 6px solid var(--white-color); } .vedio-sub-img .about-poster1 { width: 294px; height: 388px; } .vedio-sub-img img.about-poster2:nth-child(2) { width: 144px; height: 128px; margin-top: 34px; } .vedio-sub-img img.about-poster3:last-child { width: 285px; height: 388px; right: 60px; position: absolute; bottom: -184px; } .about-con.about-us-section .about-box { gap: 0; display: grid; align-items: center; grid-template-columns: 53% 47%; } .about-us-section .vedio-sub-img { gap: 20px; } .experience-box { width: 167px; height: 167px; padding: 20px; padding-top: 40px; position: absolute; left: 22%; bottom: -190px; transform: translateX(-40%); border-radius: 100%; background: var(--wb-primary-color); display: flex; flex-direction: column; align-items: center; justify-content: center; } .experience-box .years-con { font-size: 46px; font-weight: 600; padding-right: 20px; color: var(--white-color); } .experience-box .years-con span { font-size: 30px; line-height: 30px; position: absolute; top: 0; right: 0; } .experience-box p { font-size: 16px; line-height: 20px; color: var(--white-color); } /* about page about us section */ /* about page services section */ .about-service-section { overflow: hidden; background: #f6f9ff; } .about-services-box ul { display: grid; gap: 30px; grid-template-columns: 23% 23% 23% 23%; } .about-services-box ul li { padding: 36px 36px 36px 38px; display: flex; border-radius: 10px; border: 1px solid; border-color: transparent; flex-direction: column; background: var(--white-color); box-shadow: 2px 2px 52px 6px rgb(36 63 250 / 4%); } .about-services-box ul li:hover { cursor: pointer; border-color: var(--wb-primary-color); box-shadow: 2px 2px 52px 6px rgb(36 63 250 / 13%); } .about-services-box ul li p:last-child { margin-bottom: 0; } .design-img.about-service-section:before { left: -363px; bottom: -161px; width: 770px; height: 548px; content: ""; position: absolute; /*background: url(../images/design-lft-img.png) no-repeat;*/ } .about-services-box ul li figure { margin-bottom: 18px; } .about-services-box ul li h4 { line-height: 30px; } .about-services-box { position: relative; z-index: 2; } /* about page services section */ /* about us result section */ .contact-con.result-section:after { top: 0; right: 0; width: 50%; height: 100%; content: ""; position: absolute; /*background: url(../images/results-right-img.jpg) no-repeat;*/ background-size: cover; background-position: right; } .contact-con.result-section:before { top: 0; left: 0; width: 100%; content: ""; height: 100%; position: absolute; background: rgb(15 35 73 / 95%); } .result-inner-section { position: relative; z-index: 3; width: 45%; } /* .result-inner-section span, .result-inner-section h2, .result-inner-section h4 { color: var(--white-color); } */ .result-inner-section p { color: #a2b1cc; } .result-inner-section ul li { display: grid; gap: 25px; grid-template-columns: 23% 73%; align-items: center; margin-bottom: 35px; } .result-inner-section .single-chart span { position: absolute; top: 55%; transform: translateY(-50%) translateX(-50%); left: 50%; } .result-inner-section h2 { margin-bottom: 23px; } .result-inner-section>p { margin-bottom: 36px; } .results-percentage-txt h4 { margin-bottom: 13px; } .result-inner-section ul li:last-child { margin-bottom: 0; } /* percentage box */ .flex-wrapper { display: flex; flex-flow: row nowrap; } .single-chart { width: 100%; } .circular-chart { display: block; margin: 0; max-width: 116px; max-height: 116px; } .circle-bg { fill: none; stroke: #eee; stroke-width: 1px; } .circle { fill: none; stroke-width: 1.2; stroke-linecap: round; animation: progress 1s ease-out forwards; } @keyframes progress { 0% { stroke-dasharray: 0 100; } } .circular-chart.orange .circle { stroke: var(--wb-primary-color); } .percentage { fill: var(--wb-primary-color); font-size: 0.5em; text-anchor: middle; } .contact-con.result-section { /*background: url(../images/results-left-bg-img.jpg) no-repeat center;*/ background-size: cover; } /* percentage box */ /* about us result section */ /* about us page */ /* services page banner section */ .services-banner-sec { /*background: url(../images/services-banner-img.jpg) no-repeat center;*/ background-size: cover; } .service-categories { display: grid; gap: 30px; grid-template-columns: 23% 23% 23% 23%; } .category-details { flex-direction: column; padding: 55px 28px 25px; } .category-box { display: flex; flex-direction: column; border-radius: 10px; transition: .3s ease-in-out; background: var(--white-color); box-shadow: 2px 2px 52px 6px rgb(36 63 250 / 4%); } .category-box>figure { overflow: hidden; border-radius: 10px 10px 0 0; } .category-box>figure img { width: 255px; height: 205px; object-fit: cover; transition: .3s ease-in-out; } .category-box:hover>figure img { scale: 1.1; } .category-details figure { height: 70px; width: 70px; border-radius: 100%; display: flex; align-items: center; justify-content: center; background: var(--wb-primary-color); position: absolute; top: -37px; left: 28px; } .category-details a { font-weight: 500; font-size: 15px; color: var(--wb-primary-color); display: inline-block; margin-top: auto; } .category-details h4 { margin-bottom: 13px; } .category-details p { margin-bottom: 14px; } /* services page banner section */ /* doctors page start */ /* doctors page banner style */ .doctors-banner-sec { /*background: url(../images/doctor-banner-img.jpg) no-repeat center;*/ background-size: cover; } /* doctors page banner style */ /* doctors page end */ /* pricing page start */ /* pricing page banner style */ .pricing-banner-sec { /*background: url(../images/pricing-banner-img.jpg) no-repeat center;*/ background-size: cover; } /* pricing page banner style */ /* plan section style */ .plan-main-section { background: #f6f9ff; position: relative; overflow: hidden; } .plan-box { border-radius: 10px; padding: 53px 39px 57px; background: var(--white-color); border: 1px solid var(--white-color); } .plan-boxes-section { z-index: 3; display: grid; grid-gap: 30px; position: relative; grid-template-columns: 31.5% 31.5% 31.5%; } .dollar-sign { font-size: 30px; line-height: 30px; font-weight: 700; position: absolute; left: 0; top: 4px; } .price { font-size: 52px; line-height: 52px; color: var(--wb-primary-color); font-weight: 600; display: inline-block; position: relative; padding-left: 17px; margin-bottom: 14px; } .price .monthly-txt { font-size: 16px; line-height: 18px; color: var(--primary--color); margin-left: -6px; } .plan-box p { font-size: 16px; line-height: 23px; padding-bottom: 24px; margin-bottom: 26px; border-bottom: 1px solid #dae3f5; } .plan-box>figure { margin-bottom: 25px; } .plan-box h5 { margin-bottom: 10px; } .plan-box .generic-list ul li { margin-bottom: 10px; } .plan-box .generic-list { margin-bottom: 32px; } .plan-box .generic-btn a { gap: 14px; padding-left: 3px; } .plan-box:hover { border-color: var(--wb-primary-color); box-shadow: 2px 2px 52px 6px rgb(36 63 250 / 5%); } /* plan section style end */ /* pricing page end */ /* faq page start */ /* faq banner style start */ .faq-banner-sec { /*background: url(../images/faq-banner-img.jpg) no-repeat center;*/ background-size: cover; } /* faq banner style end */ /* faq section style start */ .faq-main-section { background: #f6f9ff; overflow: hidden; } .faq-inner-section .card-header { position: relative; border-radius: 10px; padding: 9px 20px 12px 72px; } .faq-inner-section .card-body { padding: 2px 50px 31px 73px; border-radius: 10px; } .faq-inner-section .card-header, .faq-inner-section .card-body { background-color: var(--white-color); border: none; } .faq-inner-section { width: 745px; margin: 0 auto; position: relative; z-index: 1; } .faq-inner-section .card-header h5 .btn { width: 100%; text-align: left; padding: 11px 60px 22px 0; font-size: 20px; line-height: 24px; font-weight: 500; text-decoration: none; color: var(--primary--color); border-bottom: 1px solid #dae3f5; } .faq-inner-section .card-header h5 .btn:focus { border-bottom: 1px solid #dae3f5; } .faq-inner-section .card { border: 1px solid transparent; margin-bottom: 24px; border-radius: 10px; } .faq-inner-section .card:hover { border: 1px solid var(--wb-primary-color); } .faq-inner-section .card:last-child { margin-bottom: 0; } .faq-inner-section .card-header h5 .btn.collapsed { border-color: transparent; padding: 11px 10px 12px 0; } .faq-inner-section .card-header::before { content: "\f128"; font-family: "Font Awesome 5 free"; position: absolute; font-weight: 600; left: 16px; top: 13px; padding: 11px; border-radius: 100%; border: 1px solid var(--wb-primary-color); color: var(--primary--color); height: 41px; width: 41px; display: flex; align-items: center; justify-content: center; } .faq-inner-section .card-header h5 .btn::after { content: "\f062"; } .faq-inner-section .card-header h5 .btn::after, .faq-inner-section .card-header h5 .btn.collapsed::after { font-family: "Font Awesome 5 free"; position: absolute; font-weight: 600; right: 25px; } .faq-inner-section .card-header h5 .btn.collapsed::after { content: "\f061"; } .faq-inner-section .card-header h5 .btn:hover { color: var(--wb-primary-color); } /* faq section style end */ /* faq page start end */ /* contact page start */ /* contact page banner style */ .contact-banner-sec { /*background: url(../images/contact-banner-img.jpg) no-repeat center;*/ background-size: cover; } /* contact page banner style */ /* contact links section style */ .contact-links-main-sec { display: grid; grid-gap: 30px; z-index: 3; position: relative; grid-template-columns: 31.4% 31.4% 31.4%; } .contact-details-section { background: #f6f9ff; overflow: hidden; } .contact-links-box { padding: 34px 40px 33px; display: flex; border-radius: 10px; background: var(--white-color); border: 1px solid transparent; transition: .3s; } .contact-links-box:hover { border-color: var(--wb-primary-color); box-shadow: 2px 2px 52px 6px rgb(36 63 250 / 13%); } .text-primary { color: var(--wb-primary-color) !important; } .contact-img-box { margin-right: 25px; margin-top: 4px; } .contact-link { display: flex; flex-direction: column; } .contact-link p { font-size: 16px; line-height: 24px; } .contact-link .contact-btn { font-size: 15px; font-weight: 500; display: inline-block; margin-top: auto; color: var(--wb-primary-color); } .contact-link ul li a { font-size: 16px; text-decoration: none; color: var(--text-color); } .contact-link ul li a:hover { color: var(--wb-primary-color); } .contact-link ul li { line-height: 24px; } .contact-link ul, .contact-link p { margin-bottom: 13px; } .contact-link .contact-btn i { margin-left: 6px; } /* contact links section style */ .contact-page-form-section.contact-con:after { /*background: url(../images/contact-con-right-img.png) no-repeat;*/ background-position-x: 100%; background-size: cover; } /* map section style */ .responsive-map { overflow: hidden; position: relative; height: 733px; margin-bottom: -175px; } .responsive-map iframe { left: 0; top: 0; height: 733px; width: 100%; position: absolute; } /* contact page end */ /* 404 page start */ .not-found-section { background: #f6f9ff; padding-bottom: 400px; } .not-found-con { margin: 0 auto; } .not-found-con h2 { font-size: 200px; line-height: 210px; } .not-found-con span { font-size: 22px; line-height: 24px; letter-spacing: 8px; margin-bottom: 25px; } .not-found-con p { font-size: 20px; line-height: 30px; margin-bottom: 30px; } .not-found-con .submit-btn a { color: var(--wb-primary-color); } .not-found-con .submit-btn a figure { border-color: var(--wb-primary-color); background: var(--white-color); } .not-found-con .submit-btn a figure img { filter: brightness(0) saturate(100%) invert(17%) sepia(65%) saturate(5340%) hue-rotate(236deg) brightness(96%) contrast(104%); } .not-found-con .submit-btn { justify-content: center; } .not-found-con .submit-btn:hover figure { background: var(--wb-primary-color); } .not-found-con .submit-btn:hover figure img { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(250deg) brightness(103%) contrast(101%); } .no-found-page-contact .contact-section { top: -173px; } .footer-main-section.no-found-page-footer { margin-top: -362px; } /* 404 page end */ /* Preloader -------------------------------------------------------*/ /* Loader Styles start here */ .loader-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 99999; } .loader { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; font-size: 0; color: var(--wb-primary-color); display: inline-block; margin: -25px 0 0 -25px; text-indent: -9999em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .lead { font-size: 13px; } .loader div { background-color: var(--wb-primary-color); display: inline-block; float: none; position: absolute; top: 0; left: 0; width: 50px; height: 50px; opacity: .5; border-radius: 50%; -webkit-animation: ballPulseDouble 2s ease-in-out infinite; animation: ballPulseDouble 2s ease-in-out infinite; } .loader div:last-child { -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes ballPulseDouble { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes ballPulseDouble { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } /* Preloader -------------------------------------------------------*/ /* bottom to top button */ #button.show { opacity: 1; visibility: visible; } #button:hover { cursor: pointer; } #button { display: inline-block; background-color: var(--wb-primary-color); width: 62px; height: 62px; text-align: center; border-radius: 50%; position: fixed; bottom: 57px; right: 113px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000; display: flex; align-items: center; justify-content: center; -webkit-animation: spineer 2s infinite; animation: spineer 2s infinite; cursor: pointer; } #button::after { content: '\f106'; font-family: "fontello"; font-size: 26px; line-height: 50px; color: #fff; } .copyright-willaarts a { font-size: 17px !important; color: #fff !important; } .copyright-willaarts i, .copyright-willaarts a .company-name, .copyright-willaarts a .copy-right-content { color: #fff !important; } .blogpage-section .blog-box .lower-portion { padding: 15px 30px 15px; border-bottom: 1px solid var(--wb-primary-color); background: #fafafa; } .blogpage-section .blog-box .button-portion { position: relative; padding: 16px 30px 16px 0px; background: #fafafa; } .blogpage-section .blog-box .button-portion .date { display: inline-block; width: 50.5%; } .blogpage-section .blog-box .button-portion .button { display: inline-block; text-align: left; width: 48%; } .blogpage-section .blog-box .button-portion .read_more { background: var(--wb-primary-color); color: #fff; font-size: 15px; line-height: 22px; font-weight: 400; border-radius: 0 30px 30px 0; padding: 14px 24px 14px 26px; text-align: center; display: inline-block; transition: all 0.3s ease-in-out; border: none; overflow: visible; outline: none; border: 1px solid transparent; } .lower-portion h5 { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: var(--wb-primary-color); } .pic-item { border-radius: 10px; } .pic-item:after { content: ''; background: #02B8FE; width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transition: .3s; } .pic-item h3 { position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50%; margin: 0; line-height: 1; opacity: 0; visibility: hidden; transition: .3s; text-align: center; color: #fff; z-index: 1; } .pic-item:hover h3 { opacity: 1; visibility: visible; } .pic-item:hover:after { opacity: .8; visibility: visible; } @-webkit-keyframes spineer { from { box-shadow: 0 0 0 0 var(--wb-primary-color) } to { box-shadow: 0 0 0 25px rgba(148, 194, 46, .01) } } @keyframes spineer { from { box-shadow: 0 0 0 0 var(--wb-primary-color) } to { box-shadow: 0 0 0 25px rgba(148, 194, 46, .01) } } /* bottom to top button */ /* ------------------- Gallery ------------------ */ .dir-ltr { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .dir-ltr a img { border: 2px solid #e2e8f0; border-radius: 4px; transition: all 0.3s ease; cursor: pointer; width: 55px; height: 55px; object-fit: cover; } .dir-ltr a img:hover { border-color: #4a5568; transform: scale(1.05); } .text-center img { max-width: 100%; height: auto; max-height: 500px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); object-fit: contain; }