.carousel-item {
height: 100%;
}
.carousel-item video {
margin-bottom: -7px;
}
/* Slider Height */
.hero-slider {
height: 100%;
/* min-height: 500px; */
position: relative;
overflow: hidden;
background-color: #fdecf1;
}
/* Make video & image cover full slider */
.hero-slider img,
.hero-slider video {
object-fit: cover;
width: 100%;
height: 100%;
}
/* Small screen media query */
@media (max-width: 768px) {
.hero-slider {
height: 100%;
}
}
/* ==================== end banners ========================== */
/* =========== new feature Banner ============== */
.carousel-item {
height: 100%;
}
.carousel-item video {
margin-bottom: -7px;
}
/* Slider Height */
.hero-slider {
height: 100%;
position: relative;
overflow: hidden;
background-color: var(--theme-color);
}
.hero-slider img,
.hero-slider video {
object-fit: cover;
width: 100%;
height: 100%;
}
/* ------- new ----------- */
.bottom-text {
gap: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.ban-img {
width: 70px !important;
}
.bot-txt {
font-size: 17px;
color: var(--theme-color-highlight) !important;
}
/* Text and clickable small images */
.hero-content {
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
/* width: 80%; */
transform: translate(-50%, -50%);
text-align: center;
color: var(--theme-color-highlight) !important;
}
.hero-text {
width: 70%;
text-align: left;
padding-left: 40px;
}
.hero-text h1 {
color: var(--theme-color-highlight) !important;
font-size: 45px;
margin-bottom: 1rem;
font-weight: 900;
font-family: var(--body-font);
}
.hero-text h3 {
color: var(--body-color) !important;
font-size: 42px;
margin-bottom: 1rem;
font-weight: 900;
}
.hero-text h4 {
font-size: 29px;
margin-bottom: 2rem;
}
.small-images {
display: flex;
justify-content: center;
align-items: center;
}
.small-images .row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.mumbai-img {
}
@media only screen and (max-width: 1200px) and (min-width: 769px) {
.hero-content {
display: flex;
flex-direction: row;
align-items: center;
top: 50%;
}
.small-img img {
/* width: 225px !important; */
width: 225px !important;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease;
}
.small-images {
gap: 6px;
display: block !important;
}
.hero-text h1 {
font-size: 28px;
margin-bottom: 6px;
}
.hero-text h3 {
color: var(--body-color) !important;
font-size: 25px;
margin-bottom: 1rem;
font-weight: 900;
}
.hero-text h4 {
font-size: 16px;
margin-bottom: 16px;
}
}
@media only screen and (min-width: 1201px) and (max-width: 1490px) {
.small-img img {
/* width: 400px !important; */
width: 330px !important;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease;
}
.mumbai-img {
margin-right: -45px;
margin-bottom: -25px;
}
.indore-img {
margin-left: -40px;
margin-bottom: -50px;
}
.jaipur-img {
margin-top: -40px !important;
}
.hero-text h1 {
color: var(--theme-color-highlight) !important;
/* font-size: 30px; */
font-size: 47px;
}
.hero-text h3 {
color: var(--body-color) !important;
font-size: 46px;
/* font-size: 44px; */
margin-bottom: 1rem;
font-weight: 900;
}
.hero-text h4 {
font-size: 38px;
/* font-size: 33px; */
margin-bottom: 2rem;
}
.bot-txt {
/* font-size: 17px; */
font-size: 25px;
}
}
@media only screen and (min-width: 1490px) and (max-width: 1550px) {
.small-img img {
/* width: 400px !important; */
width: 360px !important;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease;
}
.mumbai-img {
margin-right: -45px;
margin-bottom: -25px;
}
.indore-img {
margin-left: -45px;
margin-bottom: -50px;
}
.jaipur-img {
margin-top: -40px !important;
}
.hero-text h1 {
color: var(--theme-color-highlight) !important;
font-size: 58px;
}
.hero-text h3 {
color: var(--body-color) !important;
font-size: 55px;
margin-bottom: 1rem;
font-weight: 900;
}
.hero-text h4 {
font-size: 42px;
margin-bottom: 2rem;
}
.bot-txt {
font-size: 18px;
}
}
@media (min-width: 1551px) {
.small-img img {
/* width: 580px !important; */
width: 400px !important;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease;
}
.mumbai-img {
margin-right: -46px;
}
.indore-img {
margin-left: -60px;
}
.jaipur-img {
margin-top: -90px !important;
}
.hero-text h1 {
color: var(--theme-color-highlight) !important;
font-size: 63px;
/* font-size: 60px; */
}
.hero-text h3 {
color: var(--body-color) !important;
font-size: 63px;
/* font-size: 57px; */
margin-bottom: 1rem;
font-weight: 900;
}
.hero-text h4 {
font-size: 61px;
/* font-size: 45px; */
margin-bottom: 2rem;
}
.bot-txt {
font-size: 32px;
/* font-size: 18px; */
}
}
@media (min-width: 1920px) {
.indore-img {
margin-left: -80px;
}
.hero-text h1 {
color: var(--theme-color-highlight) !important;
/* font-size: 65px; */
font-size: 80px;
}
.hero-text h3 {
color: var(--body-color) !important;
/* font-size: 50px; */
font-size: 77px;
margin-bottom: 1rem;
font-weight: 900;
}
.hero-text h4 {
/* font-size: 35px; */
font-size: 55px;
margin-bottom: 2rem;
}
.bot-txt {
font-size: 38px;
/* font-size: 25px; */
}
}
@media (min-width: 2500px) {
.hero-text h1 {
color: var(--theme-color-highlight) !important;
font-size: 102px;
/* font-size: 100px; */
}
.hero-text h3 {
color: var(--body-color) !important;
font-size: 102px;
/* font-size: 97px; */
margin-bottom: 1rem;
font-weight: 900;
}
.hero-text h4 {
font-size: 90px;
/* font-size: 75px; */
margin-bottom: 2rem;
}
.bot-txt {
font-size: 45px;
/* font-size: 27px; */
}
.small-img img {
/* width: 700px !important; */
width: 580px !important;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease;
}
.mumbai-img {
margin-right: -70px;
}
.indore-img {
margin-left: -70px;
}
.jaipur-img {
margin-top: -105px !important;
}
}
@media (max-width: 884px) {
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
top: 50%;
}
.hero-text h4 {
font-size: 23px;
}
.bot-txt {
font-size: 19px;
}
.hero-text {
width: 80% !important;
text-align: center;
padding-left: 0px;
}
}
/* Small screen media query */
@media (max-width: 620px) {
.hero-slider {
height: 100%;
}
.hero-text {
width: 80% !important;
text-align: center;
padding-left: 0px;
}
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
top: 50%;
width: 80%;
}
.hero-text h1 {
font-size: 23px;
margin-bottom: 0px;
}
.hero-text h3 {
color: var(--body-color) !important;
font-size: 20px;
margin-bottom: 0px;
font-weight: 700;
}
.hero-text h4 {
font-size: 17px;
margin-bottom: 5px;
}
.bot-txt {
font-size: 11px;
margin-bottom: 0px;
}
.hero-text p {
font-size: 1rem;
margin-bottom: 1px;
}
.small-images {
gap: 6px;
display: block;
/* justify-content: center;
align-items: center; */
}
.small-img img {
width: 190px !important;
height: auto;
}
}
@media (max-width: 460px) {
.small-img img {
width: 107px !important;
height: auto;
}
.hero-text {
width: 80% !important;
text-align: center;
padding-left: 0px;
}
.hero-text h1 {
font-size: 21px;
margin-bottom: 0px;
}
.hero-text h3 {
color: var(--body-color) !important;
font-size: 18px;
margin-bottom: 0px;
font-weight: 700;
}
.hero-text h4 {
font-size: 17px;
margin-bottom: 5px;
}
.bot-txt {
font-size: 11px;
margin-bottom: 0px;
}
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
top: 50%;
width: 80%;
}
}
/* ============ end bsnner feature ============= */
/*===================== End view banners ===================== */
.accordion-item {
border: none !important;
}
/* ======= MENU ========= */
/* Right arrow for inner submenu (Admission) */
.inner-submenu > a {
position: relative;
padding-right: 18px;
/* space for arrow */
}
.inner-submenu > a::after {
content: "\f105";
/* Font Awesome right arrow */
font-family: "Font Awesome 5 Pro";
/* or 6 Pro based on your setup */
position: absolute;
right: 0;
/* <-- moves arrow to right side */
top: 50%;
transform: translateY(-50%);
font-size: 13px;
font-weight: 600;
}
.menu-item-has-children.inner-submenu .sub-menu {
left: 100%;
top: 0;
margin-left: 5px;
}
/* ======= megamenu design ::after ========== */
@media (max-width: 1399px) {
.main-menu .mega-menu > li > ul > li a {
font-size: 14px;
/* Adjust this to your desired font size */
}
.main-heading3 {
padding-left: -10px !important;
padding-right: -10px !important;
font-size: 15px !important;
}
}
.main-menu .mega-menu > li > a {
padding-left: 10px;
position: relative;
}
.main-menu ul.sub-menu li a:before,
.main-menu .mega-menu li ul li a:before {
content: "\f111";
position: absolute;
top: 2.5em;
left: -20px;
font-family: var(--icon-font);
width: 11px;
height: 11px;
text-align: center;
border-radius: 50%;
display: inline-block;
font-size: 0.2em;
line-height: 11.5px;
color: var(--white-color);
font-weight: 700;
background-color: var(--theme-color2-highlight);
-webkit-box-shadow: inset 0px 2px 4px 0px var(--theme-color-highlight);
box-shadow: inset 0px 2px 4px 0px var(--theme-color-highlight);
}
/* Make sure each column is positioned properly */
.main-menu .mega-menu > li {
position: relative;
padding-left: 0;
}
/* Apply vertical line ONLY to the list container */
.main-menu .mega-menu > li > ul {
position: relative;
margin-left: 19px;
padding-left: 0;
}
/* Draw line only where list items exist */
.main-menu .mega-menu > li > ul:before {
content: "";
position: absolute;
left: -15px;
/* position of vertical line */
top: 5px;
/* start near 1st bullet */
bottom: 5px;
/* end near last bullet */
width: 1px;
background-color: var(--theme-color-highlight);
opacity: 0.8;
}
/* ------- heading ------ */
.main-menu ul.mega-menu li.main-heading {
padding: 0 !important;
}
.main-heading {
padding: 3px 6px;
/* background-color: var(--white-color); */
border-radius: 13px;
text-align: center;
font-size: 17px;
}
.main-heading1 {
font-size: 17px;
padding: 3px 6px;
/* background-color: var(--white-color); */
border-radius: 13px;
text-align: right;
padding-right: -15px !important;
}
.main-heading2 {
font-size: 17px;
padding: 3px 6px;
/* background-color: var(--white-color); */
border-radius: 13px;
text-align: left;
padding-left: -15px !important;
}
.main-heading3 {
padding: 3px 6px;
/* background-color: var(--white-color); */
border-radius: 13px;
text-align: center;
font-size: 16px !important;
}
.sub-cats {
background-color: var(--theme-color2-highlight);
font-weight: 400;
text-align: center;
padding: 0px 3px;
border-radius: 15px;
margin-bottom: 2px;
}
/* =================== about section =============== */
.set-about-bg {
background-image: url(../gallery/about-bg-1.png) !important;
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
background-color: #ffffff;
/* fallback color if needed */
background-attachment: scroll;
}
.about-img2 .img-1 img {
border-bottom-left-radius: 80px;
border-top-right-radius: 80px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* ============== */
.cardio-types li a.services-hightlight {
color: var(--body-color) !important;
font-weight: 600;
font-size: 17px !important;
}
/* Cardiology submenu (scoped by class) */
.cardio-parent > a {
font-weight: 400;
}
.cardio-sub {
margin-top: 4px;
margin-left: 14px;
padding-left: 12px;
border-left: none;
}
.cardio-sub li {
padding: 2px 0;
}
/* Remove menu "dot" markers only for Cardiology sub-items */
.main-menu .mega-menu .cardio-sub li > a:before {
content: none !important;
display: none !important;
}
.main-menu .mega-menu .cardio-sub li > a {
padding-left: 0 !important;
}
/* Mobile menu: remove the leading chevron only for Cardiology sub-items */
.vs-mobile-menu .cardio-sub li > a:before {
content: none !important;
display: none !important;
}
/* Remove the dropdown caret only for Cardiology parent link */
.main-menu ul li.cardio-parent > a:after {
content: none !important;
display: none !important;
}
/*
.vs-mobile-menu ul li.cardio-parent > a:after {
content: none !important;
display: none !important;
} */
/* ======== mobile menu ========== */
.vs-mobile-menu ul li a.main-services {
font-size: 16px;
font-weight: 600;
color: var(--theme-color-highlight);
}
/* ==== mobile menu btns =========== */
.top-line {
border-top: 2px dotted var(--theme-color-highlight);
}
.vs-btn.style2.mob {
position: relative;
display: inline-block;
border: none;
text-align: center;
background-color: var(--theme-color-highlight);
color: var(--white-color);
font-size: 13.3px;
line-height: 1;
font-weight: 500;
padding: 10px 20px 10px 20px;
border-radius: 9999px;
--icon-shape: 40px;
--icon-size: 20px;
}
.vs-btn.style2.mob {
margin-right: calc(var(--icon-shape) / 2);
}
.vs-btn.style2.mob:before {
display: none !important;
}
.vs-btn.style2.mob:hover i {
background-color: var(--theme-color-highlight);
}
.vs-btn.style2.mob i {
position: absolute;
right: calc(var(--icon-size) / -2);
top: 50%;
width: 20px;
height: 20px;
line-height: var(--icon-size);
margin-top: calc(var(--icon-size) / -2);
border-radius: 50%;
background-color: var(--theme-color2-highlight);
font-size: 11px;
-webkit-transition: inherit;
transition: inherit;
}
.vs-btn.style2.mob:hover {
background-color: var(--theme-color2-highlight);
}
.vs-btn.style2.mob i:hover {
background-color: var(--theme-color-highlight);
}
.vs-btn.style2.mob:hover:before {
-webkit-box-shadow: inset 0px 5px 5px 0px rgba(39, 71, 125, 0.3);
box-shadow: inset 0px 5px 5px 0px rgba(39, 71, 125, 0.3);
}
/* ---------- */
.vs-btn.style2 {
margin-right: calc(var(--icon-shape) / 2);
}
.vs-btn.style2:before {
content: "";
position: absolute;
right: calc(var(--icon-shape) / -2);
top: 50%;
width: var(--icon-shape);
height: var(--icon-shape);
margin-top: calc(var(--icon-shape) / -2);
background-color: var(--white-color);
border-radius: 50%;
-webkit-box-shadow: inset 0px 5px 5px 0px rgba(7, 204, 236, 0.3);
box-shadow: inset 0px 5px 5px 0px rgba(7, 204, 236, 0.3);
-webkit-transition: inherit;
transition: inherit;
}
.vs-btn.style2 i {
position: absolute;
right: calc(var(--icon-size) / -2);
top: 50%;
width: var(--icon-size);
height: var(--icon-size);
line-height: var(--icon-size);
margin-top: calc(var(--icon-size) / -2);
border-radius: 50%;
background-color: #8e0006;
font-size: 14px;
-webkit-transition: inherit;
transition: inherit;
}
.vs-btn.style2:hover,
.vs-btn.style3 {
background-color: var(--title-color);
}
.vs-btn.style2:hover:before,
.vs-btn.style3:before {
-webkit-box-shadow: inset 0px 5px 5px 0px rgba(39, 71, 125, 0.3);
box-shadow: inset 0px 5px 5px 0px rgba(39, 71, 125, 0.3);
}
/* ------ Hero banner video ----------- */
/* .hero-section {
position: relative;
width: 100%;
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
}
@media (min-width: 992px) {
.hero-section {
height: calc(100vw * 0.5625);
}
}
@media (max-width: 991px) {
.hero-section {
position: relative;
min-height: 80vh;
height: 90vh;
display: grid;
place-items: center;
overflow: hidden;
}
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: -1;
background: #0b1320;
} */
/* ---------new------------- */
/* ========== end hero banner video ================== */
/* ========== Responsive Hero Video Banner ================== */
.hero-video-banner {
width: 100%;
margin: 0;
padding: 0;
background-color: #000;
}
/* Desktop Video Wrapper (lg and xl screens) */
.hero-video-banner .video-wrapper-desktop {
width: 100%;
height: 0;
padding-bottom: 36.5%;
/* 16:9 Aspect Ratio */
position: relative;
overflow: hidden;
background-color: #000;
}
.hero-video-banner .hero-video-desktop {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: contain;
/* Display full video without cropping */
object-position: center;
background-color: #000;
}
/* Mobile/Tablet Video Wrapper (sm and md screens) */
.hero-video-banner .video-wrapper-mobile {
width: 100%;
position: relative;
overflow: hidden;
background-color: #000;
display: flex;
align-items: stretch;
justify-content: center;
}
.hero-video-banner .hero-video-mobile {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
/* Fill container completely to eliminate black space */
object-position: center center;
background-color: #000;
}
/* Responsive adjustments for mobile/tablet screens */
@media (max-width: 991.98px) {
.hero-video-banner .video-wrapper-mobile {
/* height: 50vh; */
/* min-height: 400px; */
}
.hero-video-banner .hero-video-mobile {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media (max-width: 767.98px) {
.hero-video-banner .video-wrapper-mobile {
/* height: 45vh;
min-height: 350px; */
}
.hero-video-banner .hero-video-mobile {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.home-youtube {
display: none !important;
}
}
@media (max-width: 575.98px) {
.hero-video-banner .video-wrapper-mobile {
/* height: 40vh;
min-height: 300px; */
}
.hero-video-banner .hero-video-mobile {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* Landscape orientation on mobile/tablet */
@media (max-width: 991.98px) and (orientation: landscape) {
.hero-video-banner .video-wrapper-mobile {
height: 60vh;
min-height: 400px;
}
.hero-video-banner .hero-video-mobile {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* Extra small devices */
@media (max-width: 375px) {
.hero-video-banner .video-wrapper-mobile {
height: 35vh;
min-height: 280px;
}
.hero-video-banner .hero-video-mobile {
width: 100%;
height: 100%;
}
}
/* Ensure video loads properly */
.hero-video-banner .hero-video[poster] {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* ========== End Responsive Hero Video Banner ================== */
/* ------------------------ */
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.55),
rgba(0, 0, 0, 0.65)
);
}
.hero-txt {
color: var(--white-color);
}
/* .hero-content {
position: relative;
z-index: 3;
text-align: center;
color: #fff;
max-width: 900px;
padding: 40px 20px;
} */
/* .img-box {
width: 100%;
height: 250px;
text-align: center;
line-height: 150px;
} */
.hero-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 8px 18px;
border-radius: 30px;
margin-bottom: 15px;
font-size: 14px;
}
.accent {
color: var(--theme-color-highlight);
}
.hero-subtext {
font-size: 19px;
opacity: 0.92;
max-width: 700px;
margin: 0 auto 25px;
color: var(--white-color);
}
.hero-cta {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.btn-primary,
.btn-outline {
padding: 12px 22px;
border-radius: 10px;
font-weight: 600;
text-decoration: none;
}
.btn-primary {
background: #31c2c7;
color: #04262a;
}
.btn-outline {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.specialty-strip {
width: 100%;
background: #fdecf1;
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
overflow: hidden;
}
.specialty-scroll {
/* display: flex; */
gap: 40px;
padding: 14px 28px;
white-space: nowrap;
animation: scroll 26s linear infinite;
}
.chip {
padding: 5px 12px;
background: rgba(255, 255, 255, 0.12);
border-radius: 30px;
border: 1px solid var(--theme-color-highlight);
font-weight: 500;
color: var(--theme-color-highlight);
display: inline-flex;
}
.chip img {
width: 25px;
padding-right: 4px;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* ----our academy------- */
/* ----Academy Card Layout---- */
.academy-sec {
background: linear-gradient(0deg, var(--theme-extra), #ffffff);
}
.academy-card {
padding: 25px;
border-radius: 14px;
box-shadow: 0px 6px 22px rgba(132, 131, 131, 0.07);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background-color: #fff;
}
.academy-card--reverse {
flex-direction: column-reverse;
}
.academy-img img {
width: 80%;
max-width: 270px;
height: auto;
border-radius: 10px;
object-fit: cover;
margin-bottom: 20px;
/* Add space below the image */
}
/* Style for the title with logo */
.academy-title {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
/* Space between logo and title */
}
.academy-logo {
width: 60px;
/* Fixed logo size */
height: auto;
object-fit: contain;
}
/* Title Styling */
.academy-title h3 {
font-size: 20px;
font-weight: 700;
color: #111;
}
/* Button Styling */
.vs-btn {
position: relative;
display: inline-flex;
/* Changed from inline-block to inline-flex */
justify-content: center;
/* Centers content horizontally */
align-items: center;
/* Centers content vertically */
padding: 13px 25px;
background-color: #336d68;
color: white;
font-weight: 600;
border-radius: 30px;
text-decoration: none;
/* transition: background-color 0.3s ease; */
display: inline-block;
margin-top: 15px;
}
.vs-btn:hover {
background-color: #004e53;
}
/* Mobile Responsive */
@media (max-width: 767px) {
.academy-title {
display: flex;
justify-content: start;
align-items: center;
gap: 5px;
/* Space between logo and title */
}
.academy-card,
.academy-card--reverse {
flex-direction: column;
text-align: center;
}
.academy-img img {
max-width: 220px;
/* Adjust the image size for mobile */
}
.academy-title h3 {
font-size: 17px;
}
.booking-btn.vs-btn {
font-size: 14px !important;
padding: 10px 20px !important;
font-weight: 400 !important;
/* width: 100%; */
}
.vs-btn {
font-size: 14px !important;
padding: 10px 20px !important;
}
}
/* ------- In-Patient Guide ------ */
/* .hospital-links-carousel .brand img {
transition: transform 0.3s ease;
}
.hospital-links-carousel .brand img:hover {
transform: scale(1.1);
} */
/* ------- YouTube Channel Section (Isolated by .youtube-channel) ---------- */
.youtube-channel {
background: var(--theme-bg);
padding: 60px 20px;
}
.youtube-channel2 {
background: transparent !important;
}
.youtube-channel .youtube-container {
max-width: 1200px;
margin: 0 auto;
}
/* Video Cards */
.youtube-channel .yt-video {
border-radius: 16px;
overflow: hidden;
position: relative;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
transition: all 0.35s ease;
background: #000;
}
.youtube-channel .yt-video:hover {
transform: scale(1.02) translateY(-6px);
box-shadow: 0 10px 25px #ccf1ef;
}
.youtube-channel iframe {
width: 100%;
height: 100%;
border: none;
}
/* Overlay Play Icon */
.youtube-channel .video-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.25);
opacity: 0;
transition: opacity 0.3s ease;
}
.youtube-channel .yt-video:hover .video-overlay {
opacity: 1;
}
.youtube-channel .video-overlay i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem;
color: #fff;
background: rgba(230, 57, 70, 0.8);
border-radius: 50%;
padding: 18px 22px;
transition: all 0.3s ease;
}
.youtube-channel .yt-video:hover .video-overlay i {
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0 0 15px rgba(230, 57, 70, 0.8);
}
/* View More Button */
.youtube-channel .view-more-btn {
display: inline-block;
padding: 12px 40px;
background: var(--theme-color-highlight);
color: #fff;
border-radius: 30px;
font-weight: 500;
letter-spacing: 0.5px;
text-decoration: none;
box-shadow: 0 4px 15px #5ba8a05a;
transition: all 0.3s ease;
}
.youtube-channel .view-more-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px #5ba8a041;
color: #fff;
}
@media (max-width: 992px) {
.youtube-channel {
padding: 30px 15px;
}
}
/* ------ why choose us section -------- */
.vs-about-wrapper {
background-image: url(../gallery/bg-why.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* ================= Modern Vision-Mission-Motto Styles ================= */
.our-vmm {
background: linear-gradient(0deg, #fff4f4, rgb(255 255 255 / 15%) 100%);
}
/* Accordion Wrap */
.vm-accordion {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Accordion Card */
.vm-item {
background: linear-gradient(135deg, #ffffffc9, #ffffff64);
backdrop-filter: blur(14px);
border-radius: 20px;
border: 1px solid var(--theme-color-highlight);
overflow: hidden;
cursor: pointer;
transition: 0.35s ease;
position: relative;
box-shadow: var(--shadow-soft);
}
/* Accent Gradient Bar */
.vm-item::before {
content: "";
position: absolute;
left: 0;
top: 15px;
height: calc(100% - 30px);
width: 6px;
background: linear-gradient(
180deg,
var(--theme-color-highlight),
var(--theme-color2-highlight)
);
border-radius: 20px;
opacity: 0;
transition: 0.35s ease;
}
/* Hover */
.vm-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-strong);
}
/* Active */
.vm-item.active {
border-color: var(--theme-color-highlight);
background: linear-gradient(
135deg,
var(--theme-color),
var(--theme-color2)
);
}
.vm-item.active::before {
opacity: 1;
}
/* Header */
.vm-header {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 25px;
position: relative;
}
/* Arrow */
.vm-header::after {
content: "›";
position: absolute;
right: 25px;
font-size: 24px;
color: var(--theme-color-highlight);
transition: 0.3s ease;
}
.vm-item.active .vm-header::after {
transform: rotate(90deg);
color: var(--theme-color2-highlight);
}
/* Icon */
.vm-header .icon img {
width: 58px;
height: 58px;
border-radius: 50%;
object-fit: contain;
background: var(--white);
padding: 10px;
border: 1px solid var(--theme-color-highlight);
transition: 0.3s ease;
}
.vm-item.active .icon img {
border-color: var(--theme-color-highlight);
transform: scale(1.08);
}
/* Title */
.vm-header h5 {
margin: 0;
font-size: 22px;
color: var(--theme-color-highlight);
font-weight: 700;
transition: 0.3s ease;
}
.vm-item.active h5 {
color: var(--theme-color-highlight);
}
/* Body */
.vm-body {
height: 0;
opacity: 0;
overflow: hidden;
padding: 0 25px;
transition: 0.35s ease;
}
.vm-item.active .vm-body {
padding: 20px 25px 30px;
height: auto;
opacity: 1;
}
/* Body Text */
.vm-body p {
margin-bottom: 15px;
font-size: 17px;
line-height: 1.6;
color: #333;
}
/* Mobile Image */
.vm-img img {
width: 100%;
border-radius: 18px;
border-bottom-left-radius: 80px;
border-top-right-radius: 80px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-top: 10px;
border: 1px solid var(--theme-color2-highlight);
box-shadow: var(--shadow-strong);
}
/* Desktop Image */
.desktop-image-box {
position: relative;
}
.vm-image-wrapper {
position: relative;
height: 100%;
min-height: 400px;
}
.vm-main-img {
position: absolute;
inset: 0;
/* width: 100%; */
width: 90%;
height: 100%;
/* border-radius: 22px; */
border-bottom-left-radius: 100px;
border-top-right-radius: 100px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border: 1px solid var(--theme-color-highlight);
object-fit: cover;
opacity: 0;
transform: translateY(20px) scale(0.95);
transition: 0.55s ease;
/* box-shadow: var(--shadow-strong); */
box-shadow: 0px 12px 24px -6px rgb(255 244 244),
0px 10px 25px -5px rgb(255 245 245);
}
.vm-main-img.active {
opacity: 1;
transform: translateY(0px) scale(1);
}
.mobiles-only {
display: none;
}
@media (max-width: 992px) {
.desktop-image-box {
display: none;
}
.mobiles-only {
display: block;
}
.vm-header h5 {
font-size: 19px;
}
.vm-header .icon img {
width: 48px;
height: 48px;
}
}
/* ======================================================================== */
/* ----------- desktop view specility section css -------- */
.body-bg {
background-image: url(../gallery/human-body-bg.png);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
@media (min-width: 320px) and (max-width: 480px) {
.body-bg {
background-size: cover;
}
}
@media (min-width: 500px) and (max-width: 1380px) {
.body-bg {
background-image: url(../gallery/human-body-bg.png);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
}
}
/*----------- Departments css ----------*/
.cs_tab {
display: none;
}
.cs_tab.active {
display: block;
}
.cs_tab_links.cs_style_1 {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 30px;
}
@media (max-width: 991px) {
.cs_tab_links.cs_style_1 {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
}
}
@media (max-width: 575px) {
.cs_height_50 {
height: 50px;
}
}
.cs_height_lg_50 {
height: 35px;
}
.cs_solution_links {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.cs_card.cs_style_2 {
padding: 10px 0 10px 10px;
border: 1px solid var(--border-color);
border-radius: 10px;
background-color: var(--theme-extra);
}
.cs_tab_links.cs_style_1 li {
border-radius: 5px;
position: relative;
background-color: var(--theme-color2-highlight);
color: var(--heading-color);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cs_tab_links.cs_style_1 li::after {
content: "";
width: 30px;
height: 30px;
background-color: var(--theme-color-highlight);
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform: translate(-50%, -10px) rotate(45deg);
transform: translate(-50%, -10px) rotate(45deg);
opacity: 0;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
@media (max-width: 991px) {
.cs_tab_links.cs_style_1 li::after {
/* display: none; */
content: "";
width: 15px;
height: 15px;
background-color: var(--theme-color-highlight);
position: absolute;
left: 50%;
bottom: 50%;
-webkit-transform: translate(-50%, -10px) rotate(45deg);
transform: translate(-50%, -10px) rotate(45deg);
opacity: 0;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cs_gap_y_30 {
gap: 0px 0;
}
}
.cs_tab_links.cs_style_1 li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
padding-right: 40px;
font-size: 23px;
color: var(--white-color);
height: 69px;
position: relative;
border-radius: 5px;
overflow: hidden;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
@media (max-width: 1199px) {
.cs_tab_links.cs_style_1 li a {
padding-right: 20px;
}
}
@media (max-width: 575px) {
.cs_tab_links.cs_style_1 li a {
height: 60px;
}
}
.cs_tab_links.cs_style_1 li a span {
position: relative;
z-index: 1;
font-size: 20px;
}
.cs_tab_links.cs_style_1 li .cs_tab_link_icon {
width: 50px;
height: 50px;
background-color: var(--theme-color-highlight);
border-right: 2px solid transparent;
border-radius: 0px 60px 60px 0px;
margin-left: -2px;
position: relative;
display: flex;
/* ✔ center icon */
align-items: center;
justify-content: center;
font-size: 24px;
/* ✔ icon size */
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cs_tab_links.cs_style_1 li .cs_tab_link_icon i {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cs_tab_links.cs_style_1 li.active {
background-color: var(--theme-color-highlight);
}
.cs_tab_links.cs_style_1 li.active a {
color: var(--white-color);
}
.cs_tab_links.cs_style_1 li.active::after {
-webkit-transform: translate(-50%, 14px) rotate(45deg);
transform: translate(-50%, 14px) rotate(45deg);
opacity: 1;
}
.cs_tab_links.cs_style_1 li.active .cs_tab_link_icon {
background-color: var(--theme-color2-highlight);
border-color: var(--white-color);
}
.cs_tab_links.cs_style_1 li.active .cs_tab_link_icon img {
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
@media (max-width: 575px) {
.cs_tab_links.cs_style_1 li.active .cs_tab_link_icon {
/* background-color: inherit;
border: none; */
display: none;
}
.cs_tab_links.cs_style_1 li .cs_tab_link_icon {
display: none;
}
.cs_tab_links.cs_style_1 li a {
padding-right: 5px;
}
.cs_tab_links.cs_style_1 li a span {
font-size: 16px;
}
.cs_gap_y_30 {
gap: 0px 0;
}
.cs_tab_links.cs_style_1 li.active .cs_tab_link_icon {
display: none;
}
}
.cs_tab_links.cs_style_1 li:hover {
background-color: var(--theme-color-highlight);
color: var(--white-color);
}
.cs_tab_links.cs_style_1 li:hover a {
color: var(--white-color);
}
.cs_tab_links.cs_style_1 li:hover::after {
-webkit-transform: translate(-50%, 10px) rotate(45deg);
transform: translate(-50%, 10px) rotate(45deg);
opacity: 1;
}
.cs_tab_links.cs_style_1 li:hover .cs_tab_link_icon {
background-color: var(--theme-color-highlight);
border-color: var(--white-color);
}
.cs_tab_links.cs_style_1 li:hover .cs_tab_link_icon img {
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
@media (max-width: 575px) {
.cs_tab_links.cs_style_1 li:hover .cs_tab_link_icon {
background-color: inherit;
border: none;
}
}
@media (max-width: 1399px) {
.cs_tab_links.cs_style_1 {
gap: 15px;
}
}
.cs_solution_links.cs_style_2 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 8px;
}
.cs_solution_links.cs_style_2 li {
padding: 3px 4px;
border: 1px solid var(--border-color);
border-radius: 25px;
background-color: var(--white-color);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cs_solution_links.cs_style_2 li:hover {
background: var(--theme-bg2);
color: var(--dark-color) !important;
}
.cs_solution_links.cs_style_2 li:hover a {
color: var(--dark-color) !important;
}
.cs_solution_links.cs_style_2 li:hover a,
.cs_solution_links.cs_style_2 li:hover a * {
color: #000 !important;
/* Make anchor + span black */
}
.cs_solution_links.cs_style_2 a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
font-size: 17px;
font-weight: 400;
color: var(--dark-color);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cs_solution_links.cs_style_2 .cs_tab_link_icon_left {
width: 30px;
height: 30px;
/* background-color: var(--blue-color); */
color: var(--white);
border-radius: 50%;
border: 1px solid #cbcbcb;
padding: 5px;
display: flex;
/* enable perfect centering */
align-items: center;
/* vertical centering */
justify-content: center;
/* horizontal centering */
overflow: hidden;
/* crop image overflow */
background: #fff;
transition: all 0.4s ease;
}
.cs_solution_content_wrapper.cs_type_1 {
padding: 8px 2px;
}
@media (max-width: 575px) {
.cs_solution_content_wrapper.cs_type_1 {
padding: 4px 1px;
}
}
.main-menu-part {
background-color: var(--theme-color-highlight) !important;
color: #fff !important;
}
/* ===== mobile tab view ======= */
/* ========== BASE SETUP ========== */
.cs_tab {
display: none;
}
.cs_tab.active {
display: block;
}
/* Hide accordion on desktop */
.mobile-only {
display: none;
}
/* Desktop-only visible normally */
.desktop-only {
display: flex;
}
/* ========== MOBILE ACCORDION ========== */
/* ================= MOBILE DEPARTMENT ACCORDION ================= */
@media (max-width: 991px) {
.department-accordion .dep-item {
border-radius: 10px;
overflow: hidden;
margin-bottom: 12px;
border: 1px solid var(--theme-color-highlight);
background: var(--theme-color2-highlight);
transition: 0.3s ease;
}
.department-accordion .dep-item.active {
background: var(--theme-color-highlight);
}
.department-accordion .dep-header {
padding: 14px 18px;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: 600;
}
.department-accordion .dep-header i {
margin-right: 10px;
font-size: 20px;
}
.department-accordion .dep-body {
display: none;
background: #f6fffe;
padding: 15px 12px;
}
.department-accordion .dep-item.active .dep-body {
display: block;
}
.department-accordion .dep-item .icon {
font-size: 24px;
font-weight: bold;
color: #ffffff;
}
}
/* Default Icon */
.dep-header .icon i::before {
content: "\f105";
/* angle-right */
}
/* When open */
.dep-item.active .icon i::before {
content: "\f107";
/* angle-down */
}
/* ========== ========== */
/* ================== Various Specialities-section ==================== */
/* SECTION BACKGROUND */
.speciality-section {
background: url(../gallery/various-speciality.webp) center/cover no-repeat;
padding: 90px 0;
position: relative;
overflow: hidden;
}
.speciality-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, #7e7a7aa1, #d0c9c9);
backdrop-filter: blur(2px);
z-index: 1;
}
.speciality-content {
position: relative;
z-index: 2;
color: #fff;
}
.speciality-subtitle {
font-size: 18px;
opacity: 0.9;
margin-bottom: 35px;
color: var(--body-color);
}
/* SWIPER */
.speciality-swiper {
padding: 20px 0;
}
.speciality-swiper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
/* ITEM CARD */
.marquee-item {
/* width: 150px; */
width: 200px;
background: rgba(255, 255, 255, 0.22);
padding: 10px;
border-radius: 10px;
text-align: center;
backdrop-filter: blur(4px);
}
.marquee-item img {
/* height: 115px;
width: 115px; */
height: 150px;
width: 150px;
border-radius: 12px;
opacity: 0.9;
transition: 0.3s;
}
.marquee-item img:hover {
transform: scale(1.1);
opacity: 1;
}
.img-label {
margin-top: 8px;
font-size: 19px;
font-weight: 600;
color: var(--theme-color-highlight);
}
.bottom-text {
margin-top: 35px;
font-size: 18px;
color: var(--body-color);
}
/* RESPONSIVE */
@media (max-width: 768px) {
.marquee-item {
/* width: 120px; */
width: 160px;
}
.marquee-item img {
/* width: 100px;
height: 100px; */
width: 115px;
height: 115px;
}
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: var(--swiper-pagination-bottom, -7px) !important;
top: var(--swiper-pagination-top, auto);
left: 0;
width: 100%;
}
/* ========== End ============== */
/* ========= Our Healthcare Strength ============ */
/* Animated Gradient Background */
.stats-section {
padding: 100px 20px;
/* background: linear-gradient(0deg, var(--theme-extra), #ffffff); */
background-color: var(--theme-extra);
animation: gradientMove 12s ease infinite;
}
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Title */
.stats-heading {
text-align: center;
font-size: 34px;
font-weight: 800;
color: var(--theme-color-highlight);
margin-bottom: 10px;
}
.stats-subtitle {
text-align: center;
font-size: 16px;
color: var(--theme-color-highlight);
margin-bottom: 55px;
}
/* Grid Layout */
.stats-grid {
max-width: 1150px;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
padding-top: 10px;
}
/* Premium Glass Cards */
.stat-card {
padding: 20px;
text-align: center;
border-radius: 22px;
background: #fff;
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.5);
position: relative;
transition: 0.35s ease-in-out;
box-shadow: 8px 8px 22px rgba(0, 0, 0, 0.1),
-5px -5px 18px rgba(255, 255, 255, 0.6);
}
/* Hover effect */
.stat-card:hover {
transform: translateY(-10px);
box-shadow: 12px 12px 28px rgba(0, 0, 0, 0.15),
-5px -5px 30px rgba(255, 255, 255, 0.9);
border-color: var(--theme-color-highlight);
}
/* Icon Circle */
.icon-circle {
width: 76px;
height: 76px;
border-radius: 50%;
background: linear-gradient(0deg, #fff4f4, #ffffff);
margin: auto;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.1),
inset -4px -4px 12px rgba(255, 255, 255, 0.95);
margin-bottom: 18px;
}
/* SVG Icons */
.icon-circle svg {
width: 40px;
height: 40px;
fill: var(--theme-color-highlight);
}
/* Numbers */
.stat-card h3 {
font-size: 30px;
font-weight: 700;
color: var(--theme-color-highlight);
margin: 14px 0 6px;
}
/* Labels */
.stat-card p {
font-size: 17px;
font-weight: 600;
color: var(--theme-color-highlight);
}
/* Tablet View */
@media (max-width: 992px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
/* Mobile View */
@media (max-width: 576px) {
.stats-section {
padding: 70px 10px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.stat-card {
padding: 15px 10px;
}
.stat-card h3 {
font-size: 21px;
margin: 1px 0 1px;
}
.icon-circle {
width: 63px;
height: 63px;
}
.stat-card p {
font-size: 16.5px;
font-weight: 600;
color: var(--theme-color-highlight);
margin-bottom: 0px;
}
.icon-circle {
margin-bottom: 10px;
}
.icon-circle svg {
width: 35px;
height: 35px;
}
.about-image img {
width: 80%;
}
}
/* ======== top-footer ========= */
/* General Footer Section */
.top-footer {
background: var(--theme-color);
padding: 10px 0;
}
/* Styled List */
.footer-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
/* Style for each list item */
@media (min-width: 980px) {
.footer-list li {
font-size: 14px;
margin: 0;
border-radius: 25px;
border: 1px solid #0c6057;
padding: 0px 21px;
}
}
/* Link Styling */
.footer-list a {
color: var(--dark-color);
text-decoration: none;
/* font-weight: 500; */
transition: color 0.3s ease;
}
.footer-list a:hover {
color: #336d68;
}
/* Responsive: Mobile View */
@media (max-width: 885px) {
.footer-list li {
font-size: 14px;
margin: 0;
padding-right: 4px;
position: relative;
border-radius: 0px;
border: none;
/* padding: 0px 15px; */
}
/* Vertical divider */
.footer-list li:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 14px;
background-color: #01452c;
/* change color if needed */
}
.footer-list {
gap: 5px;
}
}
/* ======== language selector ========== */
.goog-te-menu-value {
font-size: 14px;
color: #336d68;
}
.goog-te-menu-value span {
display: none;
}
.goog-te-menu-value:before {
content: "Select Language";
font-size: 14px;
color: #336d68;
}
.goog-te-menu-frame {
border: 1px solid #336d68;
background-color: #f9f9f9;
}
/* --------Book appoinments ------------- */
.booking-sec {
background-color: var(--theme-color2);
border-radius: 15px !important;
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.find-our-doctor {
padding: 80px;
background: linear-gradient(
45deg,
rgb(252 234 213) 0%,
hsla(32, 100%, 97%, 1) 100%
);
}
@media (max-width: 992px) {
.top-specialists {
padding-bottom: 20px;
}
.title-area-three h2 {
font-size: 30px !important;
}
}
@media (max-width: 576px) {
.about-title {
font-size: 30px !important;
}
}
/* =========== social media section ========== */
.bh-social-media {
padding: 50px;
}
.card {
border-radius: 15px;
overflow: hidden;
position: relative;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card img {
width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.3s ease;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
z-index: 0;
transition: background 0.3s ease;
}
.text-block {
position: absolute;
bottom: 10px;
/* Move text-block to 10px from the bottom */
left: 20px;
font-size: 18px;
font-weight: 600;
color: #fff;
z-index: 1;
transition: bottom 0.6s ease, transform 0.6s ease;
}
.text-block a {
display: flex;
align-items: center;
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}
.text-block a img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.img-description {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
font-weight: 400;
color: #fff;
z-index: 1;
display: none;
/* padding: 6px 12px; */
background: transparent;
/* Make background transparent */
border: 2px solid #fff;
/* Border for the button */
border-radius: 30px;
backdrop-filter: blur(5px);
transition: opacity 0.3s ease, border-color 0.3s ease;
}
.card:hover .text-block {
bottom: 70px;
transform: translateY(-10px);
}
.card:hover .img-description {
display: block;
opacity: 1;
}
.view-post-btn {
padding: 6px 12px;
font-size: 16px;
font-weight: 600;
border-radius: 35px;
text-decoration: none;
color: #ffffff;
display: inline-block;
transition: background-color 0.6s ease;
}
.view-post-btn:hover {
background-color: transparent;
color: #ffffff;
}
/* Bootstrap Grid Customization */
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card-wrapper {
position: relative;
margin-bottom: 30px;
}
.text-block h5 {
font-size: 18px;
bottom: 10px;
color: #fff;
}
.social-name {
font-size: 15px;
color: #fff;
}
/* Responsive Media Query for Mobile */
@media (max-width: 768px) {
.social-name {
font-size: 13px !important;
color: #fff;
}
/* Text block */
.text-block {
font-size: 14px;
/* Smaller font size */
left: 10px;
right: 10px;
bottom: 20px;
}
/* Image description button */
.img-description {
font-size: 12px;
/* Adjusted font size */
padding: 5px 10px;
border-radius: 25px;
/* Smaller radius for button */
}
/* Card adjustments for mobile view */
.col-md-4 {
width: 100%;
/* Full width for cards on smaller screens */
}
/* Card margins */
.card-wrapper {
margin-bottom: 20px;
/* Reduced space between cards */
}
/* Card content and images */
.card img {
object-fit: cover;
}
/* Button styling on smaller screens */
.view-post-btn {
font-size: 14px;
/* Smaller font size for buttons */
padding: 4px 10px;
}
/* .text-block h5 {
font-size: 15px;
bottom: 10px;
} */
}
/* Larger screen (tablets and above) adjustments */
@media (min-width: 768px) {
.social-name {
font-size: 14px !important;
color: #fff;
}
.text-block h5 {
font-size: 17px;
bottom: 10px;
}
}
/* ================ end social media section ========= */
/* ====== About Hospital css ========== */
.need-help-two {
position: relative;
padding: 60px 0;
overflow: hidden;
}
.need-help-two__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%;
opacity: 0.4;
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
border-top-left-radius: 275px;
border-bottom-left-radius: 275px;
mix-blend-mode: luminosity;
z-index: 0;
}
.need-help-two__left,
.need-help-two__right {
position: relative;
z-index: 1;
}
/* Section Title Styling */
.section-title {
margin-bottom: 35px;
}
.section-title__title {
font-size: 32px;
font-weight: 700;
color: #0b0b0b;
line-height: 1.3;
margin: 0;
}
/* Stats List Styling */
.need-help-two__list {
margin: 0;
padding: 0;
}
.need-help-two__list li {
display: flex;
align-items: start;
gap: 8px;
margin-bottom: 2px;
padding: 8px 20px;
background: #ffffff;
border-radius: 10px;
/* border: 1px solid #e5e5e5; */
position: relative;
padding-left: 28px;
}
.need-help-two__list li::before {
content: "\f101";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 0;
/* top: 2px; */
font-size: 14px;
color: var(--theme-color-highlight);
}
.need-help-two__list li:last-child {
margin-bottom: 0;
}
/* Icon Styling */
.need-help-two__icon {
flex-shrink: 0;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme-color-highlight);
font-size: 16px;
}
/* Content Styling */
.need-help-two__content {
flex: 1;
}
.need-help-two__content p {
/* font-size: 16px; */
line-height: 1.6;
color: #333;
margin: 0;
}
/* Image Section */
.need-help-two__right {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.need-help-two__img-1 {
position: relative;
width: 100%;
max-width: 500px;
}
.need-help-two__img-1 img {
width: 100%;
height: auto;
border-radius: 15px;
border-top-right-radius: 110px;
border-bottom-left-radius: 80px;
}
/* Responsive Design */
@media (max-width: 1199px) {
.section-title__title {
font-size: 28px;
}
.need-help-two__list li {
padding: 7px 18px;
}
.need-help-two__content p {
margin-left: 10px;
}
}
@media (max-width: 991px) {
.need-help-two {
padding: 50px 0;
}
.need-help-two__content p {
margin-left: 10px;
}
.need-help-two__bg {
width: 100%;
border-radius: 0;
opacity: 0.05;
}
.section-title {
margin-bottom: 30px;
text-align: center;
}
.section-title__title {
font-size: 26px;
}
.need-help-two__list li {
margin-bottom: 2px;
padding: 6px 18px;
}
/* .need-help-two__content p {
font-size: 15px;
} */
.need-help-two__right {
margin-top: 40px;
}
.need-help-two__img-1 {
max-width: 400px;
}
}
@media (max-width: 767px) {
.need-help-two {
padding: 40px 0;
}
.section-title__title {
font-size: 22px;
}
.need-help-two__list li {
padding: 5px 16px;
margin-bottom: 2px;
}
.need-help-two__content p {
margin-left: 10px;
}
.need-help-two__list li::before {
content: "\f101";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 3px;
font-size: 16px;
color: var(--theme-color-highlight);
}
/* .need-help-two__content p {
font-size: 14px;
line-height: 1.5;
} */
.need-help-two__img-1 {
max-width: 100%;
}
}
@media (max-width: 575px) {
.need-help-two {
padding: 35px 0;
}
.section-title__title {
font-size: 20px;
}
.need-help-two__list li {
padding: 5px 14px;
gap: 6px;
}
.need-help-two__icon {
width: 18px;
font-size: 14px;
}
/* .need-help-two__content p {
font-size: 13px;
} */
}
/* ---------- map css---------------- */
/* MAP FULL WIDTH */
.hospital-map-section .map-container iframe {
width: 100%;
height: 520px;
display: block;
}
/* FLOATING CARD DEFAULT (DESKTOP) */
.floating-card {
position: absolute;
bottom: 5%;
right: 4%;
transform: translateY(-50%);
width: 380px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.35);
z-index: 10;
transition: 0.4s ease;
}
.card-title {
color: var(--theme-color-highlight);
}
/* ICON DESIGN */
.icon-box {
width: 42px;
height: 42px;
min-width: 42px;
border-radius: 50%;
background: var(--theme-color2);
display: flex;
align-items: center;
justify-content: center;
color: var(--theme-color-highlight);
font-size: 1.2rem;
}
.icon-box i {
font-size: 20px;
color: var(--theme-color-highlight) !important;
}
/* ANIMATION */
.aos-card {
opacity: 0;
transform: translateY(40px);
transition: 0.8s ease;
}
.aos-animate {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* ---------- RESPONSIVE BEHAVIOR ---------- */
/* TABLET VIEW */
@media (max-width: 992px) {
.floating-card {
right: 2%;
transform: translate(-50%, -50%);
width: 50%;
bottom: 4%;
}
}
/* MOBILE VIEW */
@media (max-width: 576px) {
.floating-card {
display: none;
}
.icon-box {
width: 34px;
height: 34px;
font-size: 1rem;
}
.floating-card h3 {
font-size: 1.25rem;
}
}
.visit-us {
color: var(--body-color);
font-size: 18px;
/* font-weight: 500; */
}
/* ------------------ Department numbers ------------- */
.dept-title-aos {
color: var(--theme-color-highlight);
font-size: 2rem;
letter-spacing: 0.5px;
position: relative;
animation: fadeInDown 0.8s ease;
}
.dept-category {
font-size: 1.3rem;
font-weight: 700;
color: var(--theme-color-highlight);
padding: 14px 18px;
background: linear-gradient(90deg, #fff7f0, #ffffff);
border-left: 6px solid var(--theme-color2-highlight);
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 25px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.dept-category i {
font-size: 1.4rem;
color: var(--theme-color-highlight);
}
.dept-items {
padding-left: 10px;
}
.card-style {
background: #ffffff;
padding: 16px 20px;
margin-bottom: 15px;
border-radius: 10px;
border: 1px solid #eee;
transition: 0.3s ease;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}
.card-style:hover {
transform: translateY(-4px);
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.12);
border-color: var(--theme-color2-highlight);
}
.item-title {
font-size: 1.05rem;
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
.item-line {
margin: 0;
font-size: 0.94rem;
color: #555;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.item-line i {
color: var(--theme-color-highlight);
margin-right: 4px;
}
.divider {
color: #999;
}
/* Desktop split layout */
@media (min-width: 992px) {
.dept-group.enhanced {
display: flex;
gap: 40px;
}
.dept-category {
width: 30%;
}
.dept-items {
width: 70%;
}
}
/* Animations */
.aos-fade {
opacity: 0;
transform: translateY(25px);
transition: all 0.7s ease;
}
.aos-animate {
opacity: 1 !important;
transform: translateY(0) !important;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============== Contact page css ============ */
.location-ui-sec {
/* background: var(--theme-extra); */
}
.main-head {
font-size: 32px;
color: #1a2b49;
}
.contact-card {
gap: 15px;
background: #ffffff;
border-radius: 10px;
border: 1px solid #f1f1f1;
transition: 0.3s ease;
}
.contact-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
}
.icon-box {
width: 50px;
height: 50px;
color: #ffffff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.label-title {
color: var(--theme-color-highlight);
font-weight: 700;
margin-bottom: 4px;
}
/* Text styles */
.label-text {
font-size: 16px;
line-height: 1.5;
white-space: normal !important;
}
.contact-link {
color: #000;
text-decoration: none;
}
.contact-link:hover {
color: var(--theme-color-highlight);
}
/* .label-text a {
color: var(--black-color);
line-height: 1.5;
margin-bottom: 0 !important;
font-size: 16px;
} */
.map-card {
border-radius: 28px;
}
/* RESPONSIVE FIXES */
@media (max-width: 768px) {
.icon-box {
width: 40px;
height: 40px;
min-width: 40px;
font-size: 20px;
}
.contact-card {
padding: 20px;
gap: 12px;
}
}
/* ----------- */
/* .locations-section {
max-width: 1000px;
margin: 0 auto;
} */
.location-tabs {
border: none;
justify-content: center;
margin-bottom: 30px !important;
background: transparent;
flex-wrap: nowrap !important;
padding: 0;
display: flex;
align-items: center;
}
.location-tabs .nav-item {
margin: 0 8px;
}
.location-tabs .nav-link {
border: 2px solid var(--theme-color2);
background: var(--theme-color2);
color: #555;
font-weight: 600;
padding: 12px 32px;
border-radius: 25px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
font-size: 0.95rem;
letter-spacing: 0.2px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.location-tabs .nav-link::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.5s, height 0.5s;
}
.location-tabs .nav-link:hover::before {
width: 200px;
height: 200px;
}
.location-tabs .nav-link:hover {
border-color: var(--theme-color2-highlight);
background: var(--theme-color2-highlight);
color: var(--theme-color-highlight);
transform: translateY(-2px) scale(1.01);
box-shadow: 0 4px 15px rgba(142, 0, 6, 0.2);
z-index: 1;
}
.location-tabs .nav-link.active {
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
#a00008 100%
);
border-color: var(--theme-color-highlight);
color: white;
box-shadow: 0 4px 18px rgba(142, 0, 6, 0.35);
transform: translateY(-1px);
z-index: 2;
}
.location-tabs .nav-link.active::after {
content: "";
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 3px;
background: var(--theme-color-highlight);
border-radius: 2px;
box-shadow: 0 2px 6px rgba(142, 0, 6, 0.25);
}
.tab-pane {
animation: fadeInUp 0.5s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.location-card {
background: linear-gradient(135deg, var(--theme-color) 0%, #faf5f5 100%);
border-radius: 20px;
padding: 40px;
border-left: 6px solid var(--theme-color-highlight);
box-shadow: 0 5px 20px rgba(142, 0, 6, 0.08);
}
.location-title {
color: var(--theme-color-highlight);
font-size: 2rem;
font-weight: 700;
margin-bottom: 35px;
display: flex;
align-items: center;
gap: 15px;
letter-spacing: -0.3px;
}
.location-info {
margin-bottom: 0;
}
.location-info-item {
display: flex;
align-items: flex-start;
margin-bottom: 28px;
gap: 22px;
background: white;
padding: 25px;
border-radius: 15px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(142, 0, 6, 0.08);
}
.location-info-item:hover {
box-shadow: 0 8px 25px rgba(142, 0, 6, 0.15);
transform: translateX(8px) translateY(-2px);
border-color: rgba(142, 0, 6, 0.2);
}
.location-info-item:last-child {
margin-bottom: 0;
}
.location-info-icon {
background: var(--theme-color-highlight);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.3rem;
box-shadow: 0 3px 10px rgba(142, 0, 6, 0.2);
}
.location-info-text {
flex: 1;
}
.location-info-text h5 {
color: var(--theme-color-highlight);
font-weight: 700;
margin-bottom: 8px;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.location-info-text p {
color: #555;
margin: 0;
line-height: 1.7;
font-size: 1.05rem;
}
.phone-link {
color: var(--theme-color-highlight);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
.phone-link:hover {
color: var(--theme-color2-highlight);
text-decoration: underline;
transform: scale(1.05);
}
@media (max-width: 768px) {
.location-tabs {
margin-bottom: 30px;
flex-wrap: nowrap;
justify-content: center;
display: flex;
width: 100%;
}
.location-tabs .nav-item {
margin: 0 4px;
flex: 0 0 auto;
}
.location-tabs .nav-link {
padding: 10px 20px;
font-size: 0.85rem;
border-radius: 20px;
white-space: nowrap;
font-weight: 600;
border-width: 2px;
min-width: 80px;
}
.location-tabs .nav-link:hover {
transform: translateY(-2px) scale(1.02);
}
.location-tabs .nav-link.active::after {
width: 40%;
height: 2px;
bottom: -4px;
}
.location-card {
padding: 25px 18px;
border-radius: 15px;
border-left-width: 5px;
}
.location-title {
font-size: 1.3rem;
margin-bottom: 22px;
gap: 10px;
}
.location-info-item {
margin-bottom: 18px;
padding: 18px 15px;
gap: 15px;
border-radius: 12px;
}
.location-info-item:hover {
transform: translateX(5px) translateY(-1px);
}
.location-info-icon {
width: 42px;
height: 42px;
font-size: 1.15rem;
}
.location-info-text h5 {
font-size: 0.88rem;
margin-bottom: 6px;
}
.location-info-text p {
font-size: 0.92rem;
line-height: 1.6;
}
}
@media (max-width: 360px) {
.location-tabs {
margin-bottom: 25px;
justify-content: center;
display: flex;
width: 100%;
}
.location-tabs .nav-item {
margin: 0 3px;
flex: 0 0 auto;
}
.location-tabs .nav-link {
padding: 8px 14px;
font-size: 0.75rem;
border-width: 2px;
border-radius: 18px;
min-width: 70px;
}
.location-tabs .nav-link.active::after {
width: 35%;
height: 2px;
bottom: -4px;
}
.location-card {
padding: 20px 15px;
border-radius: 12px;
}
.location-title {
font-size: 1.15rem;
margin-bottom: 18px;
}
.location-info-item {
padding: 15px 12px;
margin-bottom: 15px;
gap: 12px;
}
.location-info-icon {
width: 38px;
height: 38px;
font-size: 1.05rem;
}
.location-info-text h5 {
font-size: 0.82rem;
}
.location-info-text p {
font-size: 0.88rem;
}
}
/* ============ media gallery css ============== */
/* Tabs */
.media-tabs {
border: none !important;
justify-content: center !important;
display: flex !important;
flex-wrap: wrap;
margin-bottom: 30px;
}
.media-tabs .nav-item {
margin: 0 5px;
}
.media-tabs .nav-link {
background: var(--theme-color2);
color: #8e0006;
border-radius: 8px;
margin-right: 0;
padding: 10px 18px;
font-weight: 600;
border: none !important;
}
.media-tabs .nav-link.active {
background: var(--theme-color-highlight);
color: #ffffff;
}
/* Gallery */
.media-img {
width: 400px !important;
height: 400px !important;
object-fit: cover;
border-radius: 10px;
transition: transform 0.3s ease;
border: 3px solid var(--theme-color2-highlight);
}
.media-img:hover {
transform: scale(1.05);
}
.tab-pane {
padding-top: 25px;
}
.gallery-title {
font-weight: 700;
color: var(--theme-color-highlight);
}
@media (min-width: 350px) {
.glightbox-clean .gprev {
top: 45%;
}
.glightbox-clean .gnext {
top: 45%;
}
}
/* ============ video gallery css ============== */
.youtubes-videos iframe {
border-radius: 10px;
}
.specialist-card iframe {
border-radius: 10px;
}
/* ============= why state ========= */
/* .why-stats-section {
position: relative;
padding: 80px 0;
background: linear-gradient(
135deg,
#1e3c72 0%,
#2a5298 50%,
transparent 50%
),
url("bombay-facebook.jpg") center/cover no-repeat;
background-blend-mode: overlay;
min-height: 500px;
display: flex;
align-items: center;
}
.why-stats-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(30, 60, 114, 0.7);
z-index: 1;
} */
/*
.why-stats-container {
position: relative;
z-index: 2;
width: 100%;
padding: 0 15px;
} */
.why-stats-grid {
max-width: 1150px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding-top: 10px;
width: 100%;
}
.why-stat-card {
background: #ffffff;
border-radius: 15px;
padding: 40px 8px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
height: 100%;
border: none;
}
.why-stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}
.why-stat-icon {
width: 90px;
height: 90px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
var(--theme-color) 100%
);
border-radius: 50%;
color: #ffffff;
font-size: 40px;
transition: all 0.3s ease;
}
.why-stat-card:hover .why-stat-icon {
transform: scale(1.1) rotate(5deg);
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
var(--theme-color) 100%
);
}
.why-stat-number {
font-size: 30px;
font-weight: 700;
color: var(--theme-color-highlight);
margin-bottom: 6px;
line-height: 1.2;
}
.why-stat-text {
font-size: 26px;
color: #2e2e2e;
font-weight: 600;
margin: 0;
line-height: 1.4;
}
/* Responsive Design */
@media (max-width: 992px) {
.why-stats-container {
padding: 0 20px;
}
.why-stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 100%;
}
.why-stat-card {
padding: 35px 25px;
}
.why-stat-icon {
width: 70px;
height: 70px;
font-size: 30px;
margin-bottom: 10px;
}
.why-stat-number {
font-size: 26px;
}
.why-stat-text {
font-size: 22px;
}
}
@media (max-width: 768px) {
.why-stats-section {
padding: 60px 0;
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
var(--theme-color) 100%
);
}
.why-stats-container {
padding: 0 15px;
}
.why-stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 15px;
max-width: 100%;
}
.why-stat-card {
padding: 30px 10px;
}
.why-stat-icon {
width: 60px;
height: 60px;
font-size: 27px;
margin-bottom: 5px;
}
.why-stat-number {
font-size: 22px;
}
.why-stat-text {
font-size: 17px;
}
}
@media (max-width: 576px) {
.why-stats-section {
padding: 30px 0;
}
.why-stats-container {
padding: 0 10px;
}
.why-stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
max-width: 100%;
}
.why-stat-card {
padding: 20px 5px !important;
}
.why-stat-icon {
width: 50px;
height: 50px;
font-size: 20px;
margin-bottom: 5px;
}
.why-stat-number {
font-size: 19px;
}
.why-stat-text {
font-size: 15px;
line-height: 1.3;
}
}
/* ======= wow animation ======= */
/* The WOW.js trigger - apply zoomIn animation */
.wow.zoomIn {
animation: zoomIn 1s ease forwards;
}
/* @keyframes for custom zoomIn effect */
@keyframes zoomIn {
0% {
transform: scale(0.2);
/* Start small */
opacity: 0;
}
100% {
transform: scale(1);
/* End at normal size */
opacity: 1;
}
}
/* =================== Service pages Style ================== */
.service-banner-img img {
/* width: 90% !important; */
width: 700px !important;
text-align: center;
}
.short-description {
font-size: 17px;
font-weight: 600;
color: var(--body-color);
font-family: var(--title-font);
line-height: 1.3;
margin: 0 0 15px 0;
text-align: center;
}
/* ----------- service page img thunnail ---------- */
.shop-wrap1 {
padding: 25px;
background: var(--theme-bg2);
border-radius: 12px;
}
@media (max-width: 1199px) {
.shop-wrap1 {
padding: 25px;
}
}
@media (max-width: 767px) {
.shop-wrap1 {
padding: 20px;
}
}
@media (max-width: 575px) {
.shop-wrap1 {
padding: 20px 15px;
}
}
/* ---------------- MAIN IMAGE ---------------- */
.product-big-img {
position: relative;
}
.product-big-img .price {
position: absolute;
top: 20px;
right: 20px;
background: #fff;
padding: 8px 15px;
font-size: 28px;
border-radius: 6px;
font-weight: bold;
color: #8e0006;
border: 2px solid #f0bb7f;
z-index: 5;
}
.product-big-img .price del {
margin-left: 10px;
font-size: 18px;
color: #444;
}
.product-big-img .add_to_wishlist {
position: absolute;
bottom: 15px;
right: 15px;
background: #8e0006;
color: #fff;
padding: 8px 15px;
border-radius: 5px;
font-size: 14px;
text-decoration: none;
z-index: 5;
transition: background 0.3s;
}
.product-big-img .add_to_wishlist:hover {
background: #6b0004;
}
.img-fullsize {
position: relative;
overflow: hidden;
border-radius: 10px;
border: 3px solid #f0bb7f;
}
.product-big-img img {
width: 100%;
height: auto;
display: block;
transition: opacity 0.3s ease;
}
/* ---------------- THUMBNAIL SLIDER ---------------- */
.thumb-slider-wrapper {
position: relative;
margin-top: 20px;
padding: 0 50px;
overflow: hidden;
}
.thumb-slider-wrapper.no-nav {
padding: 0;
}
.thumb-strip {
display: flex;
gap: 12px;
transition: transform 0.4s ease;
}
.thumb-item {
min-width: 0;
border: 2px solid transparent;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
}
.thumb-item img {
width: 100%;
height: 150px !important;
/* height: auto; */
object-fit: cover;
display: block;
}
.thumb-item:hover {
border-color: #8e0006;
transform: scale(1.05);
}
.thumb-item.active {
border-color: #8e0006;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(142, 0, 6, 0.3);
}
/* Prev/Next Buttons */
.thumb-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: #f0bb7f;
color: #8e0006;
border-radius: 50%;
border: none;
font-size: 18px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.thumb-nav:hover {
background: #8e0006;
color: #fff;
transform: translateY(-50%) scale(1.1);
}
.thumb-nav:active {
transform: translateY(-50%) scale(0.95);
}
.thumb-nav.prev {
left: 0;
}
.thumb-nav.next {
right: 0;
}
.thumb-nav.hidden {
display: none !important;
}
/* Responsive */
@media (max-width: 768px) {
.thumb-slider-wrapper {
padding: 0 45px;
}
.thumb-slider-wrapper.no-nav {
padding: 0;
}
.thumb-item img {
height: 80px;
}
}
@media (max-width: 576px) {
.thumb-slider-wrapper {
padding: 0 40px;
}
.thumb-slider-wrapper.no-nav {
padding: 0;
}
.thumb-item img {
height: 70px;
}
.thumb-nav {
width: 35px;
height: 35px;
font-size: 16px;
}
}
@media (max-width: 400px) {
.thumb-slider-wrapper {
padding: 0 35px;
}
.thumb-slider-wrapper.no-nav {
padding: 0;
}
.thumb-item img {
height: 60px;
}
.thumb-nav {
width: 30px;
height: 30px;
font-size: 14px;
}
}
/* ================ Lab home Testing ================== */
.lab-doorstep-section {
background: var(--theme-bg);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.lab-doorstep-section::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 500px;
height: 500px;
background: var(--theme-bg2);
border-radius: 50%;
opacity: 0.4;
z-index: 0;
animation: float 6s ease-in-out infinite;
}
.lab-doorstep-section::after {
content: "";
position: absolute;
bottom: -30%;
left: -5%;
width: 400px;
height: 400px;
background: var(--theme-bg2);
border-radius: 50%;
opacity: 0.25;
z-index: 0;
animation: float 8s ease-in-out infinite reverse;
}
@keyframes float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
}
.section-content {
position: relative;
z-index: 1;
}
.section-title {
font-size: 2.75rem;
font-weight: 800;
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
#b3000a 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.25rem;
letter-spacing: -1px;
line-height: 1.2;
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.trust-tagline {
font-size: 1.2rem;
color: #333;
margin-bottom: 3rem;
font-weight: 500;
line-height: 1.7;
animation: fadeInUp 0.8s ease-out 0.2s both;
}
.trust-tagline strong {
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
#b3000a 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
position: relative;
}
/* Glassmorphism Image Container */
.lab-image-container {
position: relative;
/* width: 80%; */
margin: auto;
border-radius: 10px;
overflow: hidden;
/* box-shadow: 0 20px 60px rgba(142, 0, 6, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%); */
padding: 8px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.8);
animation: fadeInUp 0.8s ease-out 0.4s both;
}
.lab-image-container::before {
content: "";
position: absolute;
inset: 0;
border-radius: 24px;
/* background: linear-gradient(
135deg,
rgba(142, 0, 6, 0.05),
rgba(252, 234, 213, 0.1)
); */
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.lab-image-container:hover::before {
opacity: 1;
}
.lab-image-container:hover {
transform: translateY(-8px) scale(1.02);
/* box-shadow: 0 30px 80px rgba(142, 0, 6, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.8); */
}
.lab-image-container img {
width: 330px;
height: auto;
object-fit: cover;
border-radius: 16px;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.lab-image-container:hover img {
transform: scale(1.05);
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
/* padding: 1rem;
background: rgba(255, 255, 255, 0.5); */
}
.features-list li {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
padding: 10px;
border-radius: 10px;
/* background: rgba(255, 255, 255, 0.5); */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* border: 1px solid rgba(255, 255, 255, 0.6); */
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.features-list li::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: left 0.5s ease;
}
.features-list li:hover::before {
left: 100%;
}
.features-list li:hover {
transform: translateX(5px) translateY(-2px);
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 15px 40px rgba(142, 0, 6, 0.15);
border-color: rgba(142, 0, 6, 0.2);
}
.feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(
135deg,
var(--theme-bg2),
rgba(252, 234, 213, 0.8)
);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.25rem;
flex-shrink: 0;
color: var(--theme-color-highlight);
font-size: 24px;
box-shadow: 0 8px 20px rgba(142, 0, 6, 0.15);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.lab-image-container {
width: 100%;
}
.feature-icon {
width: 40px;
height: 40px;
border-radius: 10px;
font-size: 18px;
}
}
.feature-icon::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--theme-color-highlight), #b3000a);
opacity: 0;
transition: opacity 0.4s ease;
}
.feature-icon i {
position: relative;
z-index: 1;
transition: all 0.4s ease;
}
.features-list li:hover .feature-icon {
transform: scale(1) rotate(3deg);
box-shadow: 0 12px 30px rgba(142, 0, 6, 0.25);
}
.features-list li:hover .feature-icon::before {
opacity: 1;
}
.features-list li:hover .feature-icon i {
color: white;
transform: scale(1);
}
.feature-content h5 {
font-size: 16px;
font-weight: 500;
color: var(--body-color);
margin-bottom: 5px;
transition: color 0.3s ease;
}
.features-list li:hover .feature-content h5 {
color: var(--theme-color-highlight);
}
/* Premium Glassmorphism Contact Box */
.contact-highlight {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-radius: 24px;
padding: 30px;
box-shadow: 0 20px 27px rgba(142, 0, 6, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-top: 5px;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
animation: fadeInUp 0.8s ease-out 1.2s both;
}
.contact-highlight::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(
90deg,
var(--theme-color-highlight),
var(--theme-color2-highlight)
);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.contact-highlight:hover::before {
transform: scaleX(1);
}
.contact-highlight:hover {
transform: translateY(-8px);
box-shadow: 0 30px 80px rgba(142, 0, 6, 0.2),
0 0 0 1px rgba(255, 255, 255, 1), inset 0 1px 0 rgba(255, 255, 255, 1);
}
.contact-highlight h6 {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
background: linear-gradient(135deg, var(--theme-color-highlight), #b3000a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
margin-bottom: 1.5rem;
}
/* Contact Info Wrapper - Horizontal on Desktop, Vertical on Mobile */
.contact-info-wrapper {
display: flex;
gap: 1.5rem;
align-items: stretch;
}
.mobile-number {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.3s ease;
cursor: pointer;
flex: 1;
min-width: 0;
}
.mobile-number:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(142, 0, 6, 0.1);
}
.mobile-number .icon {
width: 52px;
height: 52px;
background: linear-gradient(
135deg,
var(--theme-bg2),
rgba(252, 234, 213, 0.9)
);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme-color-highlight);
font-size: 1.35rem;
box-shadow: 0 6px 20px rgba(142, 0, 6, 0.15);
transition: all 0.3s ease;
flex-shrink: 0;
}
.mobile-number:hover .icon {
transform: scale(1) rotate(-3deg);
background: linear-gradient(135deg, var(--theme-color-highlight), #b3000a);
color: white;
box-shadow: 0 10px 30px rgba(142, 0, 6, 0.3);
}
.mobile-number .text {
flex: 1;
min-width: 0;
}
.mobile-number .label {
font-size: 14px;
color: var(--body-color);
margin-bottom: 0.35rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mobile-number .number {
font-size: 16px;
font-weight: 700;
background: linear-gradient(135deg, var(--theme-color-highlight), #b3000a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 0.5px;
transition: all 0.3s ease;
word-break: break-word;
}
.mobile-number:hover .number {
transform: scale(1);
}
.working-hours {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.3s ease;
flex: 1;
min-width: 0;
cursor: pointer;
}
.working-hours:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(142, 0, 6, 0.1);
}
.working-hours .icon {
width: 52px;
height: 52px;
background: linear-gradient(
135deg,
var(--theme-bg2),
rgba(252, 234, 213, 0.9)
);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme-color-highlight);
font-size: 1.35rem;
box-shadow: 0 6px 20px rgba(142, 0, 6, 0.15);
transition: all 0.3s ease;
flex-shrink: 0;
}
.working-hours:hover .icon {
transform: scale(1.1) rotate(5deg);
background: linear-gradient(135deg, var(--theme-color-highlight), #b3000a);
color: white;
box-shadow: 0 10px 30px rgba(142, 0, 6, 0.3);
}
.working-hours .text {
flex: 1;
min-width: 0;
}
.working-hours .label {
font-size: 14px;
color: var(--body-color);
margin-bottom: 0.35rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.working-hours .time {
font-size: 1rem;
font-weight: 700;
color: #2c2c2c;
transition: color 0.3s ease;
line-height: 1.4;
word-break: break-word;
}
.working-hours:hover .time {
color: var(--theme-color-highlight);
}
@media (max-width: 768px) {
.section-title {
font-size: 2rem;
}
.trust-tagline {
font-size: 1rem;
}
.lab-doorstep-section {
padding: 3rem 0;
}
.features-list li:hover {
transform: translateX(4px) translateY(-2px);
}
/* Stack contact info vertically on mobile */
.contact-info-wrapper {
flex-direction: column;
gap: 1rem;
}
.mobile-number {
margin-bottom: 0;
}
.mobile-number .number {
font-size: 16px;
}
.working-hours .time {
font-size: 16px;
}
.contact-highlight {
padding-top: 20px;
padding: 15px;
}
.working-hours .icon {
width: 40px;
height: 40px;
border-radius: 10px;
font-size: 16px;
}
.mobile-number .icon {
width: 40px;
height: 40px;
border-radius: 10px;
font-size: 16px;
}
.working-hours {
padding: 10px;
}
.mobile-number {
padding: 10px;
}
}
/*= ========= Founders Section Container============== */
.founders-section {
/* background: var(--theme-bg); */
padding: 80px 0;
position: relative;
}
/* Founder Block - Unified Card Style */
.founder-card {
background: var(--theme-bg);
border-radius: 25px;
padding: 60px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
margin-bottom: 60px;
}
.founder-role {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--theme-color-highlight);
margin-bottom: 15px;
}
.founder-name {
font-size: 30px;
font-weight: 700;
color: var(--title-color);
margin-bottom: 10px;
line-height: 1.2;
}
.founder-years {
font-size: 18px;
color: var(--body-color2);
margin-bottom: 30px;
font-style: italic;
}
.founder-content {
font-size: 17px;
line-height: 1.9;
color: var(--body-color);
}
/* Founder Image */
.founder-image {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
margin-bottom: 30px;
transition: transform 0.5s ease;
}
.founder-image:hover {
transform: translateY(-10px);
}
.founder-image img {
width: 100%;
height: 400px;
object-fit: cover;
}
/* Info Box */
.founder-info-box {
background: var(--theme-extra);
padding: 30px;
border-radius: 15px;
border-left: 5px solid var(--theme-color-highlight);
}
.founder-info-box h4 {
color: var(--theme-color-highlight);
font-size: 18px;
margin-bottom: 15px;
font-weight: 700;
}
.founder-info-box p {
font-size: 15px;
line-height: 1.7;
margin: 0;
color: var(--body-color);
}
/* Pull Quote Style */
.pull-quote {
font-size: 18px;
font-weight: 500;
color: var(--theme-color-highlight);
line-height: 1.5;
padding: 30px;
margin: 40px 0;
border-left: 5px solid var(--theme-color-highlight);
background: var(--theme-color2);
border-radius: 10px;
font-style: italic;
position: relative;
}
/* Highlighted Key Lines */
.highlight-line {
background: linear-gradient(
120deg,
var(--theme-color2) 0%,
var(--theme-color2) 100%
);
background-repeat: no-repeat;
background-size: 100% 0.4em;
background-position: 0 88%;
padding: 0 5px;
font-weight: 600;
}
/* Responsive Design */
@media (max-width: 768px) {
.founder-role {
padding-top: 25px;
}
.founders-section {
padding: 40px 0;
}
.founder-card {
padding: 40px 30px;
}
.founder-name {
font-size: 25px;
}
.pull-quote {
font-size: 18px;
padding: 15px;
}
.founder-image {
width: 90% !important;
margin: auto;
text-align: center;
}
}
@media (max-width: 900px) {
.founder-image {
width: 60%;
margin: auto;
text-align: center;
}
.founder-role {
padding-top: 30px;
}
}
.founder-display {
display: flex;
gap: 20;
align-items: center;
justify-content: space-between;
}
/* =========== consultants page style =========== */
.consultant-section {
/* --theme-color: #f7eeee;
--theme-color-highlight: #8e0006;
--theme-color2: #fcead5;
--theme-color2-highlight: #f0bb7f;
--theme-extra: #fff4f4;
--theme-bg: linear-gradient(135deg, #fff4f4 0%, #fff4f9 100%);
--theme-bg2: linear-gradient(45deg, #fcead5 0%, #fff8f0 100%);
padding: 90px 0;
background: var(--theme-bg); */
}
.consultant-container {
max-width: 1400px;
}
.consultant-dept-heading {
margin: 0 0 30px;
padding: 9px 20px;
background: rgba(142, 0, 6, 0.06);
border: 1px solid rgba(142, 0, 6, 0.12);
border-radius: 14px;
position: relative;
overflow: hidden;
}
.consultant-dept-heading::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 20% 30%,
rgba(142, 0, 6, 0.08),
transparent 35%
),
radial-gradient(
circle at 80% 20%,
rgba(240, 187, 127, 0.15),
transparent 32%
);
pointer-events: none;
}
.consultant-dept-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
border-radius: 999px;
background: #fff;
color: var(--theme-color-highlight);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
position: relative;
z-index: 1;
box-shadow: 0 6px 14px rgba(142, 0, 6, 0.12);
}
.consultant-dept-title {
font-size: 24px;
font-weight: 800;
color: #1c1c1c;
letter-spacing: -0.2px;
position: relative;
z-index: 1;
}
.consultant-dept-sub {
margin: 0;
font-size: 14px;
color: #4b4b4b;
line-height: 1.6;
position: relative;
z-index: 1;
}
.consultant-card {
background: #fff;
border-radius: 18px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid #f0e2e2;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.consultant-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
}
.consultant-img {
position: relative;
width: 100%;
overflow: hidden;
background: var(--theme-bg2);
}
.consultant-img img {
width: 100%;
/* height: 240px; */
height: auto;
object-fit: cover;
display: block;
}
.consultant-body {
padding: 22px 20px 24px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.consultant-name {
text-align: center;
font-size: 20px;
font-weight: 800;
color: #1c1c1c;
margin: 0;
}
.consultant-edu {
font-size: 14px;
color: var(--body-color);
margin: 2px 0 2px;
line-height: 1.5;
text-align: center;
letter-spacing: 0.1px;
}
.consultant-dept {
font-size: 13px;
color: var(--theme-color-highlight);
font-weight: 700;
margin: 4px auto 2px;
display: inline-flex;
align-items: center !important;
justify-content: center !important;
padding: 6px 14px;
border-radius: 999px;
background: rgba(142, 0, 6, 0.08);
letter-spacing: 0.3px;
}
.consultant-actions {
margin-top: auto;
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.consultant-actions .btn {
flex: 1 1 48%;
min-width: 140px;
border-radius: 10px;
font-weight: 700;
padding: 9px 12px;
font-size: 13px;
line-height: 1.4;
transition: all 0.2s ease;
}
.consultant-outline-btn {
color: var(--theme-color-highlight);
border: 1.5px solid var(--theme-color-highlight) !important;
background: var(--theme-extra) !important;
}
.consultant-outline-btn:hover {
background: var(--theme-color-highlight);
color: #fff;
}
.consultant-btn {
background: var(--theme-color-highlight) !important;
color: #fff !important;
border: 1.5px solid var(--theme-color-highlight);
}
/* .consultant-btn:hover {
background: var(--theme-extra) !important;
color: var(--theme-color-highlight) !important;
} */
@media (max-width: 1199px) {
.consultant-section {
padding: 80px 0;
}
.consultant-title h2 {
font-size: 34px;
}
.consultant-img img {
height: 220px;
}
}
@media (max-width: 992px) {
.consultant-section {
padding: 70px 0;
}
.consultant-title h2 {
font-size: 32px;
}
.consultant-img img {
height: 210px;
}
.consultant-actions {
gap: 10px;
}
}
@media (max-width: 767px) {
.consultant-section {
padding: 60px 0;
}
.consultant-title h2 {
font-size: 28px;
}
.consultant-title p {
font-size: 15px;
}
.consultant-img img {
height: 200px;
}
.consultant-actions .btn {
font-size: 13px;
}
}
@media (max-width: 576px) {
.consultant-section {
padding: 50px 0;
}
.consultant-title h2 {
font-size: 26px;
}
.consultant-img img {
height: 190px;
}
.consultant-actions {
gap: 8px;
}
.consultant-actions .btn {
flex: 1 1 100%;
}
}
/* =================== Philosophy Section ============================ */
.philosophy-section {
padding: 100px 0;
/* background: linear-gradient(
135deg,
var(--theme-extra) 0%,
var(--theme-color) 100%
); */
position: relative;
}
.philosophy-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.philosophy-container {
position: relative;
z-index: 1;
}
/* Highlighted Text Area */
.highlighted-text-area {
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
#a0000a 100%
);
color: white;
padding: 50px 40px;
border-radius: 20px;
position: relative;
box-shadow: 0 15px 40px rgba(142, 0, 6, 0.25);
margin-bottom: 35px;
transition: box-shadow 0.3s ease;
}
.highlighted-text-area:hover {
box-shadow: 0 20px 50px rgba(142, 0, 6, 0.3);
}
.highlighted-text-area .quote-icon {
font-size: 3.5rem;
color: rgba(255, 255, 255, 0.2);
margin-bottom: 20px;
display: block;
line-height: 1;
}
.highlighted-text-area h3 {
font-family: "Playfair Display", serif;
font-size: 2.2rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 15px;
}
.highlighted-text-area p {
font-size: 1.1rem;
line-height: 1.8;
opacity: 0.95;
margin: 0;
}
/* Image Wrapper - Fully Responsive */
.philosophy-image-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(142, 0, 6, 0.15);
transition: box-shadow 0.3s ease;
/* width: 100%;
height: 100%; */
}
.philosophy-image-wrapper:hover {
box-shadow: 0 20px 50px rgba(142, 0, 6, 0.25);
}
.philosophy-image-wrapper img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Remove overlay on hover - keep it simple */
.philosophy-image-overlay {
display: none;
}
/* Content Paragraphs */
.philosophy-content {
display: flex;
flex-direction: column;
gap: 25px;
}
.philosophy-content .paragraph {
background: white;
padding: 35px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease;
border-top: 4px solid var(--theme-color-highlight);
}
.philosophy-content .paragraph:hover {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.philosophy-content .paragraph .icon-wrapper {
display: inline-flex;
width: 60px;
height: 60px;
background: var(--theme-color2);
border-radius: 15px;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.philosophy-content .paragraph .icon-wrapper i {
color: var(--theme-color-highlight);
font-size: 1.6rem;
}
.philosophy-content .paragraph h4 {
font-family: "Playfair Display", serif;
font-size: 1.6rem;
color: var(--theme-color-highlight);
margin-bottom: 15px;
font-weight: 600;
line-height: 1.3;
}
.philosophy-content .paragraph p {
font-size: 1rem;
line-height: 1.8;
color: #555;
margin: 0;
}
/* Last Paragraph - Full Width */
.philosophy-last-paragraph {
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease;
border-top: 4px solid var(--theme-color-highlight);
margin-top: 35px;
}
.philosophy-last-paragraph:hover {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.philosophy-last-paragraph .icon-wrapper {
display: inline-flex;
width: 60px;
height: 60px;
background: var(--theme-color2);
border-radius: 15px;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.philosophy-last-paragraph .icon-wrapper i {
color: var(--theme-color-highlight);
font-size: 1.6rem;
}
.philosophy-last-paragraph h4 {
font-family: "Playfair Display", serif;
font-size: 1.6rem;
color: var(--theme-color-highlight);
margin-bottom: 15px;
font-weight: 600;
line-height: 1.3;
}
.philosophy-last-paragraph p {
font-size: 1rem;
line-height: 1.8;
color: #555;
margin: 0;
}
/* Responsive Design */
@media (max-width: 992px) {
.philosophy-section {
padding: 70px 0;
}
.highlighted-text-area {
padding: 40px 35px;
margin-bottom: 30px;
}
.highlighted-text-area h3 {
font-size: 1.9rem;
}
.philosophy-content .paragraph {
padding: 30px;
}
.philosophy-last-paragraph {
padding: 30px;
margin-top: 30px;
}
}
@media (max-width: 768px) {
.philosophy-section {
padding: 50px 0;
}
.highlighted-text-area {
padding: 35px 30px;
}
.highlighted-text-area .quote-icon {
font-size: 3rem;
}
.highlighted-text-area h3 {
font-size: 1.6rem;
}
.highlighted-text-area p {
font-size: 1rem;
}
.philosophy-content .paragraph {
padding: 25px;
}
.philosophy-content .paragraph h4 {
font-size: 1.4rem;
}
.philosophy-content .paragraph .icon-wrapper {
width: 55px;
height: 55px;
}
.philosophy-content .paragraph .icon-wrapper i {
font-size: 1.4rem;
}
.philosophy-last-paragraph {
padding: 25px;
}
.philosophy-last-paragraph h4 {
font-size: 1.4rem;
}
.philosophy-last-paragraph .icon-wrapper {
width: 55px;
height: 55px;
}
.philosophy-last-paragraph .icon-wrapper i {
font-size: 1.4rem;
}
}
@media (max-width: 576px) {
.philosophy-section {
padding: 40px 0;
}
.highlighted-text-area {
padding: 30px 25px;
}
.highlighted-text-area h3 {
font-size: 1.4rem;
}
.philosophy-content .paragraph {
padding: 20px;
}
.philosophy-content .paragraph h4 {
font-size: 1.2rem;
}
.philosophy-last-paragraph {
padding: 20px;
}
.philosophy-last-paragraph h4 {
font-size: 1.2rem;
}
}
/* =================== Management Board ===================== */
.section-title {
font-size: 25px;
font-weight: 600;
color: var(--theme-color-highlight);
margin-bottom: 2rem;
padding-bottom: 4px;
border-bottom: 3px solid var(--theme-color-highlight);
display: inline-block;
position: relative;
}
.section-title::after {
content: "";
position: absolute;
bottom: -3px;
left: 0;
width: 60px;
height: 3px;
background: var(--theme-color2-highlight);
}
.section-title2 {
font-size: 22px;
font-weight: 600;
color: var(--theme-color-highlight);
margin-bottom: 2rem;
/* padding-bottom: 2px; */
border-bottom: 3px solid var(--theme-color-highlight);
display: inline-block;
position: relative;
}
.section-title2::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 30px;
height: 2px;
background: var(--theme-color2-highlight);
}
.section-container {
margin-bottom: 4rem;
}
.management-card {
background: var(--theme-color);
border-radius: 12px;
padding: 1.5rem;
text-align: center;
margin-bottom: 1.5rem;
box-shadow: var(--card-shadow);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.05);
height: 100%;
position: relative;
overflow: hidden;
}
.management-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(
180deg,
var(--theme-color-highlight),
var(--theme-color2-highlight)
);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.management-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-shadow-hover);
}
.management-card:hover::before {
transform: scaleY(1);
}
@media (max-width: 885px) {
.administration-cards.management-card {
background: var(--theme-color);
border-radius: 12px;
padding: 5px !important;
text-align: center;
margin-bottom: 1.5rem;
box-shadow: var(--card-shadow);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.05);
height: 100%;
position: relative;
overflow: hidden;
}
}
.card-name {
font-size: 1.15rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.5rem;
line-height: 1.4;
}
.card-designation {
font-size: 0.95rem;
color: var(--text-light);
font-weight: 500;
padding: 0.4rem 0.8rem;
background: var(--theme-color2);
border-radius: 6px;
display: inline-block;
margin-top: 0.5rem;
}
.trustee-card .card-designation {
background: var(--white-color);
color: var(--theme-color-highlight);
border: 1px solid rgba(142, 0, 6, 0.2);
}
/* Trustees Section Layout */
.trustees-row {
margin-bottom: 1.5rem;
}
.trustees-row-second {
justify-content: center;
}
/* Desktop and Tablet: 5 cards in first row, 2 cards in second row */
@media (min-width: 768px) {
.trustees-row-first > .col-lg-2,
.trustees-row-first > .col-md-2 {
flex: 0 0 20% !important;
max-width: 20% !important;
}
.trustees-row-second > .col-lg-2,
.trustees-row-second > .col-md-2 {
flex: 0 0 20% !important;
max-width: 20% !important;
}
}
/* Tablet View: Reduced padding for trustee cards */
@media (min-width: 768px) and (max-width: 991px) {
.trustees-row-first .management-card.trustee-card,
.trustees-row-second .management-card.trustee-card {
padding: 0.9rem 0.7rem !important;
margin-bottom: 1rem !important;
}
.trustees-row-first .trustee-card .card-name,
.trustees-row-second .trustee-card .card-name {
font-size: 0.95rem !important;
margin-bottom: 0.35rem !important;
line-height: 1.3 !important;
}
.trustees-row-first .trustee-card .card-designation,
.trustees-row-second .trustee-card .card-designation {
font-size: 0.8rem !important;
padding: 0.25rem 0.5rem !important;
margin-top: 0.35rem !important;
}
}
/* Mobile: Full width for all cards */
@media (max-width: 767px) {
.trustees-row-first > .col-12,
.trustees-row-second > .col-12 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.trustees-row {
margin-bottom: 0;
}
}
.admin-card .card-designation {
background: var(--theme-color2);
color: var(--theme-color-highlight);
border: 1px solid rgba(240, 187, 127, 0.3);
}
.academic-card .card-designation {
background: var(--theme-color2);
color: var(--theme-color-highlight);
border: 1px solid rgba(240, 187, 127, 0.3);
}
.divider-line {
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--theme-color-highlight),
transparent
);
margin: 3rem 0;
opacity: 0.3;
}
@media (max-width: 768px) {
.page-header h1 {
font-size: 2rem;
}
.page-header {
padding: 2rem 0;
}
.section-title {
font-size: 20px;
}
.section-title2 {
font-size: 18px;
}
.management-card {
padding: 1.25rem;
}
}
.fade-in {
animation: fadeIn 0.6s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stagger-1 {
animation-delay: 0.1s;
}
.stagger-2 {
animation-delay: 0.2s;
}
.stagger-3 {
animation-delay: 0.3s;
}
.stagger-4 {
animation-delay: 0.4s;
}
.stagger-5 {
animation-delay: 0.5s;
}
.stagger-6 {
animation-delay: 0.6s;
}
.stagger-7 {
animation-delay: 0.7s;
}
/* ================== Emergency style ====================== */
.emergency-section {
/* background: linear-gradient(
135deg,
var(--theme-color) 0%,
var(--theme-color2) 100%
); */
padding: 80px 0;
position: relative;
overflow: hidden;
}
.emergency-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.emergency-container {
position: relative;
z-index: 1;
}
.emergency-card {
background: var(--theme-bg2);
border-radius: 20px;
padding: 50px 40px;
box-shadow: 0 20px 60px rgba(142, 0, 6, 0.15);
border-top: 5px solid var(--theme-color-highlight);
transition: transform 0.3s ease, box-shadow 0.3s ease;
max-width: 900px;
margin: 0 auto;
}
.emergency-card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 70px rgba(142, 0, 6, 0.2);
}
.emergency-icon {
width: 80px;
height: 80px;
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
#a00008 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
box-shadow: 0 10px 30px rgba(142, 0, 6, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 10px 30px rgba(142, 0, 6, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 15px 40px rgba(142, 0, 6, 0.4);
}
}
.emergency-icon i {
font-size: 36px;
color: #ffffff;
}
.emergency-title {
font-family: "Poppins", sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: var(--theme-color-highlight);
text-align: center;
margin-bottom: 30px;
letter-spacing: -0.5px;
text-transform: uppercase;
}
.emergency-content {
font-size: 1.125rem;
line-height: 1.8;
color: #444;
text-align: center;
margin-bottom: 0;
padding: 0 20px;
}
.emergency-content strong {
color: var(--theme-color-highlight);
font-weight: 600;
}
.contact-info {
margin-top: 35px;
padding-top: 35px;
border-top: 2px solid var(--theme-color2);
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.contact-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.1rem;
color: #555;
}
.contact-item i {
color: var(--theme-color-highlight);
font-size: 1.3rem;
width: 24px;
text-align: center;
}
.contact-item strong {
color: var(--theme-color-highlight);
font-weight: 600;
}
.phone-number {
font-size: 1.5rem;
font-weight: 700;
color: var(--theme-color-highlight);
letter-spacing: 1px;
}
@media (max-width: 768px) {
.emergency-section {
padding: 60px 0;
}
.emergency-card {
padding: 40px 25px;
border-radius: 15px;
}
.emergency-title {
font-size: 2rem;
}
.emergency-content {
font-size: 1rem;
padding: 0 10px;
}
.emergency-icon {
width: 70px;
height: 70px;
}
.emergency-icon i {
font-size: 30px;
}
.phone-number {
font-size: 1.3rem;
}
}
@media (max-width: 576px) {
.emergency-title {
font-size: 1.75rem;
}
.emergency-content {
font-size: 0.95rem;
}
}
/* =========== Routine css =========== */
.routine-section {
padding: 60px 0;
position: relative;
overflow: hidden;
}
.routine-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.routine-container {
position: relative;
z-index: 1;
}
.routine-card {
/* background: #ffffff; */
border-radius: 20px;
padding: 45px 40px;
/* box-shadow: 0 15px 50px rgba(142, 0, 6, 0.12);
border-top: 5px solid var(--theme-color-highlight);
max-width: 950px; */
margin: 0 auto;
}
.routine-title {
font-family: "Poppins", sans-serif;
font-size: 2.25rem;
font-weight: 700;
color: var(--theme-color-highlight);
text-align: center;
margin-bottom: 35px;
letter-spacing: -0.5px;
text-transform: uppercase;
position: relative;
padding-bottom: 15px;
}
.routine-title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(
90deg,
var(--theme-color-highlight) 0%,
var(--theme-color2-highlight) 100%
);
border-radius: 2px;
}
.routine-list {
list-style: none;
padding: 0;
margin: 0;
}
.routine-list-item {
/* display: flex;
align-items: flex-start; */
padding: 18px 20px;
margin-bottom: 16px;
background: linear-gradient(
135deg,
rgba(247, 238, 238, 0.4) 0%,
rgba(252, 234, 213, 0.4) 100%
);
border-left: 4px solid var(--theme-color-highlight);
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
}
.routine-list-item:hover {
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(142, 0, 6, 0.1);
background: linear-gradient(
135deg,
rgba(247, 238, 238, 0.6) 0%,
rgba(252, 234, 213, 0.6) 100%
);
}
.routine-list-item:last-child {
margin-bottom: 0;
}
.routine-text {
font-size: 0.95rem;
line-height: 1.7;
color: #444;
margin: 0;
flex: 1;
}
.routine-text strong {
color: var(--theme-color-highlight);
font-weight: 600;
}
.routine-note {
background: linear-gradient(
135deg,
var(--theme-color2) 0%,
rgba(252, 234, 213, 0.8) 100%
);
border-left: 4px solid var(--theme-color2-highlight);
padding: 20px 25px;
margin-top: 25px;
border-radius: 8px;
position: relative;
}
.routine-note::before {
content: "\f05a";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--theme-color2-highlight);
font-size: 1.2rem;
position: absolute;
left: 20px;
top: 20px;
}
.routine-note-text {
font-size: 0.95rem;
line-height: 1.7;
color: #555;
margin: 0;
padding-left: 30px;
}
.routine-note-text strong {
color: var(--theme-color-highlight);
font-weight: 600;
}
@media (max-width: 768px) {
.routine-section {
padding: 40px 0;
}
.routine-card {
padding: 30px 15px;
border-radius: 15px;
}
.routine-title {
font-size: 1.75rem;
margin-bottom: 30px;
}
.routine-list-item {
padding: 15px 18px;
margin-bottom: 14px;
}
.routine-text {
font-size: 0.9rem;
}
.routine-note {
padding: 18px 20px;
}
.routine-note-text {
font-size: 0.9rem;
padding-left: 25px;
}
}
@media (max-width: 576px) {
.routine-title {
font-size: 1.5rem;
}
.routine-list-item {
padding: 14px 15px;
margin-bottom: 12px;
}
.routine-text {
font-size: 0.85rem;
line-height: 1.6;
}
.routine-note-text {
font-size: 0.85rem;
}
}
/* -------Mobile Book Appoinment Btn ------------ */
.mobile-book-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
background: var(--theme-color-highlight, #8e0006) !important;
color: #fff !important;
border-radius: 0;
text-align: center;
padding: 14px 18px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: capitalize;
text-decoration: none;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
}
.mobile-book-icon {
font-size: 1.1em;
line-height: 1;
flex-shrink: 0;
}
.mobile-book-text {
display: inline-block;
}
@media (max-width: 480px) {
.mobile-book-cta {
padding: 12px 16px;
font-size: 18px;
}
.mobile-book-icon {
font-size: 1em;
}
}
@media (max-width: 360px) {
.mobile-book-cta {
padding: 10px 14px;
font-size: 17px;
gap: 6px;
}
.mobile-book-icon {
font-size: 0.95em;
}
}
.mobile-book-cta:active {
color: #fff;
}
@media (min-width: 768px) {
.mobile-book-cta {
display: none !important;
}
}
/* ========================== desktop ================ */
.desktop-book-cta {
position: fixed;
bottom: 20%;
right: -56px;
background-color: var(--theme-color-highlight);
color: #fff;
border: none;
padding: 6px 14px;
text-decoration: none;
text-align: center;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 999;
font-size: 15px;
transition: background-color 0.3s ease, transform 0.3s ease;
border: 1px solid #fc888e;
transform: translateY(-50%) rotate(-90deg);
}
.desktop-book-cta:active {
color: #fff;
}
.desktop-book-cta:hover {
color: #fff;
}
/* ================== desktop book appoin================== */
/* ============ Lab at Doorstep floating badge (mobile)=================== */
.lab-doorstep-btn {
position: fixed;
right: 30px;
bottom: 84px;
z-index: 1050;
width: 70px;
height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transform: translateX(100px);
animation: labSlideIn 0.6s ease-out forwards;
animation-delay: 1s;
}
@keyframes labSlideIn {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.lab-doorstep-btn img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
@media (max-width: 992px) {
.lab-doorstep-btn {
right: 15px;
bottom: 90px;
}
}
@media (max-width: 480px) {
.lab-doorstep-btn {
width: 52px;
height: 52px;
bottom: 95px;
}
}
@media (max-width: 360px) {
.lab-doorstep-btn {
width: 48px;
height: 48px;
bottom: 105px;
}
}
/* =====biling page ================= */
.note-card {
background: #fffaf6;
border: 1px solid rgba(142, 0, 6, 0.15);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.note-card h4 {
color: var(--theme-color-highlight);
font-weight: 700;
margin-bottom: 0.75rem;
}
.note-card p {
margin-bottom: 0.75rem;
color: #4a3a30;
}
.note-card p.note-highlight {
color: #000;
font-size: 16px;
}
.billing-section {
padding: 2.5rem;
margin: 2rem auto;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
padding-bottom: 1.5rem;
border-bottom: 3px solid var(--theme-color2-highlight);
}
.section-header h1 {
color: var(--theme-color-highlight);
font-weight: 700;
margin-bottom: 0.5rem;
font-size: 2.5rem;
}
.section-header p {
color: #666;
font-size: 1.1rem;
margin: 0;
}
.pricing-table {
width: 100%;
min-width: 800px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.pricing-table thead {
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
#a9000a 100%
);
color: #fff;
}
.pricing-table thead th {
padding: 1.25rem 1rem;
font-weight: 600;
text-align: center;
font-size: 0.95rem;
border: none;
white-space: nowrap;
}
.pricing-table thead th:first-child {
text-align: left;
padding-left: 1.5rem;
}
.pricing-table tbody tr {
transition: background-color 0.2s ease;
}
.pricing-table tbody tr:hover {
background-color: var(--theme-color);
}
.pricing-table tbody tr:nth-child(even) {
background-color: rgba(247, 238, 238, 0.3);
}
.pricing-table tbody tr:nth-child(even):hover {
background-color: var(--theme-color);
}
.pricing-table tbody td {
padding: 1.25rem 1rem;
text-align: center;
border-bottom: 1px solid rgba(142, 0, 6, 0.1);
vertical-align: middle;
font-size: 0.95rem;
}
.pricing-table tbody td:first-child {
text-align: left;
padding-left: 1.5rem;
font-weight: 600;
color: var(--theme-color-highlight);
background-color: var(--theme-color2);
}
.price-value {
font-weight: 400;
color: #333;
font-size: 1rem;
}
.price-value::before {
content: "₹";
margin-right: 2px;
color: var(--theme-color-highlight);
}
.table-responsive {
border-radius: 12px;
overflow: hidden;
position: relative;
}
/* Horizontal scroll styling for mobile */
.table-responsive {
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--theme-color-highlight) var(--theme-color);
}
.table-responsive::-webkit-scrollbar {
height: 8px;
}
.table-responsive::-webkit-scrollbar-track {
background: var(--theme-color);
border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb {
background: var(--theme-color-highlight);
border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
background: #a9000a;
}
.info-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--theme-color2);
color: #5f3f1c;
border-radius: 8px;
font-size: 0.9rem;
margin-top: 1.5rem;
}
.info-badge i {
color: var(--theme-color-highlight);
}
.scroll-hint {
font-size: 0.85rem;
color: var(--theme-color-highlight);
font-weight: 500;
opacity: 0.8;
}
.scroll-hint i {
margin-right: 0.25rem;
}
.vertical-table thead {
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
#a9000a 100%
);
color: #fff;
}
.vertical-table thead th {
padding: 1.25rem 1rem;
font-weight: 600;
text-align: left;
font-size: 0.95rem;
border: none;
}
.vertical-table thead th:last-child {
text-align: right;
}
.vertical-table tbody tr {
transition: background-color 0.2s ease;
}
.vertical-table tbody tr:hover {
background-color: var(--theme-color);
}
.vertical-table tbody tr:nth-child(even) {
background-color: rgba(247, 238, 238, 0.3);
}
.vertical-table tbody tr:nth-child(even):hover {
background-color: var(--theme-color);
}
.vertical-table tbody td {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(142, 0, 6, 0.1);
vertical-align: middle;
font-size: 0.95rem;
}
.vertical-table tbody td:first-child {
font-weight: 600;
color: var(--theme-color-highlight);
background-color: var(--theme-color2) !important;
}
.vertical-table tbody tr:nth-child(even) td:first-child {
background-color: var(--theme-color2) !important;
}
.vertical-table tbody td:last-child {
text-align: right;
}
@media (max-width: 768px) {
.billing-section {
padding: 1.5rem;
margin: 1rem;
border-radius: 12px;
}
.section-header {
margin-bottom: 2rem;
}
.section-header h1 {
font-size: 1.8rem;
}
.table-responsive {
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
.pricing-table {
font-size: 0.85rem;
min-width: 700px;
}
.pricing-table thead th,
.pricing-table tbody td {
padding: 0.75rem 0.5rem;
font-size: 0.8rem;
white-space: nowrap;
}
.pricing-table thead th:first-child {
position: sticky;
left: 0;
z-index: 10;
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
#a9000a 100%
);
padding-left: 1.5rem;
}
.pricing-table tbody td:first-child {
position: sticky;
left: 0;
z-index: 5;
background-color: var(--theme-color2);
padding-left: 1.5rem;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}
.pricing-table tbody tr:nth-child(even) td:first-child {
background-color: var(--theme-color2);
}
.info-badge {
font-size: 0.85rem;
padding: 0.65rem 0.85rem;
flex-wrap: wrap;
}
.vertical-table {
max-width: 100%;
font-size: 0.85rem;
}
.vertical-table tbody td {
padding: 0.75rem 1rem;
font-size: 0.8rem;
}
}
@media (max-width: 576px) {
.billing-section {
padding: 1rem;
margin: 0.5rem;
border-radius: 10px;
}
.section-header h1 {
font-size: 1.5rem;
}
.section-header p {
font-size: 0.95rem;
}
.pricing-table {
font-size: 0.75rem;
min-width: 650px;
}
.pricing-table thead th,
.pricing-table tbody td {
padding: 0.6rem 0.4rem;
font-size: 0.75rem;
}
.pricing-table thead th:first-child,
.pricing-table tbody td:first-child {
padding-left: 1rem;
}
.info-badge {
font-size: 0.8rem;
padding: 0.6rem 0.75rem;
}
.vertical-table {
font-size: 0.75rem;
}
.vertical-table tbody td {
padding: 0.6rem 0.85rem;
font-size: 0.75rem;
}
}
/* =========== corporate style ============ */
.corporate {
--theme-color: #f7eeee;
--theme-color-highlight: #8e0006;
--theme-color2: #fcead5;
--theme-color2-highlight: #f0bb7f;
}
body.corporate {
background: #f5f6f8;
min-height: 100vh;
color: #1f1f1f;
}
.corporate .section-wrapper {
padding: 60px 0 80px;
position: relative;
}
.corporate .section-title {
margin-bottom: 10px;
}
.corporate .section-lead {
max-width: 820px;
}
.corporate .corporate-title {
color: #1f1f1f;
letter-spacing: 0.04em;
font-weight: 700;
margin: 20px 0 22px;
}
.corporate .section-wrapper::before,
.corporate .section-wrapper::after {
content: none;
}
.corporate .card-corporate {
background: var(--theme-bg2);
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
transition: transform 140ms ease, box-shadow 140ms ease,
border-color 140ms ease;
position: relative;
overflow: hidden;
min-height: 260px;
}
.corporate .card-corporate::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.02),
rgba(0, 0, 0, 0.02)
);
opacity: 0;
transition: opacity 140ms ease;
}
.corporate .card-corporate:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
border-color: #d2d2d2;
}
.corporate .card-corporate:hover::after {
opacity: 1;
}
.corporate .card-corporate .corporate-card-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
text-align: center;
}
.corporate .card-corporate h5 {
font-weight: 700;
font-size: 1.05rem;
color: #1f1f1f;
}
.corporate .badge-pill {
background-color: var(--theme-color-highlight);
color: #fff;
border-radius: 999px;
font-size: 0.85rem;
padding: 6px 14px;
}
.corporate .heading-accent {
color: var(--theme-color-highlight);
letter-spacing: 0.08em;
font-weight: 700;
text-transform: uppercase;
}
.corporate .company-img {
width: 300px;
height: 200px;
border-radius: 12px;
background: #ffffff;
border: 1px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.corporate .company-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* ===view more btn ========= */
.view-more-btn2 {
display: inline-block;
padding: 6px 20px;
background: var(--theme-color-highlight);
color: #fff;
border-radius: 30px;
font-weight: 500;
font-size: 16px;
letter-spacing: 0.5px;
text-decoration: none;
box-shadow: 0 4px 15px #5ba8a05a;
transition: all 0.3s ease;
}
.view-more-btn2:hover {
color: #fff;
}
/* ============ bh meal section css =========== */
/* .bh-meal .meals-hero {
background: radial-gradient(
circle at 20% 20%,
var(--theme-color2) 0%,
var(--theme-color) 45%,
#ffffff 100%
);
position: relative;
overflow: hidden;
} */
.bh-meal .meals-hero::before,
.bh-meal .meals-hero::after {
content: "";
position: absolute;
width: 340px;
height: 340px;
border-radius: 50%;
background: linear-gradient(
135deg,
var(--theme-color2-highlight),
rgba(142, 0, 6, 0.18)
);
filter: blur(40px);
opacity: 0.5;
z-index: 0;
}
.bh-meal .meals-hero::before {
top: -120px;
left: -60px;
}
.bh-meal .meals-hero::after {
bottom: -140px;
right: -80px;
}
.bh-meal .container-elevated {
position: relative;
z-index: 1;
}
.bh-meal .lead-text {
color: #4b3535;
}
.bh-meal .glass-card {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(240, 187, 127, 0.5);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(6px);
border-radius: 18px;
}
.bh-meal .service-chip {
/* width: 50px;
height: 50px; */
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--theme-color2-highlight);
color: #6a3100;
font-weight: 700;
}
.bh-meal .badge-accent {
background: linear-gradient(135deg, var(--theme-color-highlight), #b10009);
color: #fff;
padding: 0.4rem 0.85rem;
border-radius: 999px;
letter-spacing: 0.5px;
font-weight: 600;
box-shadow: 0 12px 24px rgba(142, 0, 6, 0.25);
}
.bh-meal .timeline {
list-style: none;
padding: 0;
margin: 0;
}
.bh-meal .timeline li {
display: flex;
align-items: center;
padding: 0.85rem 1rem;
border-radius: 12px;
background: linear-gradient(
90deg,
rgba(247, 238, 238, 0.8),
rgba(252, 234, 213, 0.9)
);
border: 1px solid rgba(240, 187, 127, 0.35);
gap: 0.75rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bh-meal .timeline li:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(142, 0, 6, 0.12);
}
.bh-meal .timeline .dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--theme-color-highlight);
box-shadow: 0 0 0 6px rgba(142, 0, 6, 0.15);
flex-shrink: 0;
}
.bh-meal .timeline .time {
color: var(--theme-color-highlight);
font-weight: 700;
letter-spacing: 0.4px;
}
.bh-meal .timeline .label {
color: #3c2a2a;
font-weight: 600;
}
/*========== Registration page css =========== */
.bh-registration {
position: relative;
}
/* Registration Page Title */
.bh-registration .registration-page-title {
font-size: 2rem;
font-weight: 700;
color: #333;
margin-bottom: 0;
letter-spacing: -0.02em;
line-height: 1.2;
}
/* Main Card */
.bh-registration .registration-main-card .card {
transition: transform 0.3s ease;
}
.bh-registration .registration-main-card .card:hover {
transform: translateY(-5px);
}
/* Introduction Text */
.bh-registration .intro-text-primary {
color: #333;
line-height: 1.7;
font-size: 1.125rem;
font-weight: 400;
letter-spacing: -0.01em;
}
.bh-registration .intro-text-secondary {
color: #555;
line-height: 1.7;
font-size: 1rem;
font-weight: 400;
}
/* Contact Banner */
.bh-registration .contact-banner {
background-color: var(--theme-color2, #fcead5);
border-left: 4px solid var(--theme-color-highlight, #8e0006);
transition: all 0.3s ease;
}
.bh-registration .contact-banner:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px rgba(142, 0, 6, 0.15);
}
.bh-registration .contact-banner-text {
color: #333;
font-size: 0.95rem;
line-height: 1.6;
}
.bh-registration .info-icon {
color: var(--theme-color-highlight, #8e0006);
}
/* Section Title */
.bh-registration .section-title {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--theme-color-highlight, #8e0006);
border-bottom: 3px solid var(--theme-color-highlight, #8e0006);
padding-bottom: 8px;
display: inline-block;
line-height: 1.3;
}
/* Registration Mobile Card */
.bh-registration .registration-mobile-card .card {
border-radius: 10px;
overflow: hidden;
}
.bh-registration .registration-mobile-item {
transition: all 0.3s ease;
}
.bh-registration .registration-mobile-value {
font-size: 0.9375rem;
color: #333;
font-weight: 500;
line-height: 1.5;
word-break: break-word;
}
/* Registration Table Wrapper */
.bh-registration .registration-table-wrapper {
border-radius: 10px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
}
.bh-registration .registration-table-wrapper::-webkit-scrollbar {
height: 8px;
}
.bh-registration .registration-table-wrapper::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.bh-registration .registration-table-wrapper::-webkit-scrollbar-thumb {
background: rgba(142, 0, 6, 0.3);
border-radius: 10px;
}
.bh-registration .registration-table-wrapper::-webkit-scrollbar-thumb:hover {
background: rgba(142, 0, 6, 0.5);
}
/* Registration Table */
.bh-registration .registration-table {
border: 1px solid rgba(142, 0, 6, 0.2);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border-collapse: separate;
border-spacing: 0;
width: 100%;
margin: 0;
min-width: 600px;
}
.bh-registration .registration-table-header {
background: linear-gradient(
135deg,
var(--theme-color-highlight, #8e0006),
#a5000a
);
color: #fff !important;
}
.bh-registration .registration-table thead th {
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 0.875rem;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.2);
line-height: 1.4;
}
.bh-registration .registration-th {
white-space: nowrap;
}
.bh-registration .registration-table thead th:last-child {
border-right: none;
}
.bh-registration .registration-table tbody tr {
transition: all 0.3s ease;
border-bottom: 1px solid rgba(142, 0, 6, 0.1);
}
.bh-registration .registration-table tbody tr:last-child {
border-bottom: none;
}
.bh-registration .registration-table tbody tr.table-row-hover:hover {
background-color: var(--theme-color2) !important;
transform: scale(1);
}
.bh-registration .registration-table tbody td {
background-color: white;
vertical-align: middle;
border: none;
border-right: 1px solid rgba(142, 0, 6, 0.1);
}
.bh-registration .registration-table tbody td:last-child {
border-right: none;
}
.bh-registration .table-cell-text {
color: #333;
}
/* Badge Timing */
.bh-registration .badge-timing {
display: inline-block;
padding: 0.5rem 1rem;
background-color: var(--theme-color-highlight, #8e0006);
color: white;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
margin-right: 0.5rem;
white-space: nowrap;
}
.bh-registration .timing-slot {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Phone Link */
.bh-registration .phone-link {
color: var(--theme-color-highlight, #8e0006);
transition: all 0.3s ease;
}
.bh-registration .phone-link:hover {
color: #a5000a;
text-decoration: underline !important;
transform: translateX(3px);
}
/* Card Body */
.bh-registration .card-body-white {
background-color: white;
}
/* Registration Card Title */
.bh-registration .registration-card-title {
font-size: 1.125rem;
line-height: 1.4;
letter-spacing: -0.01em;
}
/* Admission Cards */
.bh-registration .admission-card .card {
transition: all 0.3s ease;
overflow: hidden;
}
.bh-registration .admission-card-routine:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(240, 187, 127, 0.25) !important;
}
.bh-registration .admission-card-emergency:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(142, 0, 6, 0.25) !important;
}
/* Routine Card Header */
.bh-registration .routine-card-header {
background: linear-gradient(
135deg,
var(--theme-color2-highlight, #f0bb7f),
var(--theme-color2, #fcead5)
);
}
.bh-registration .routine-icon {
color: var(--theme-color-highlight, #8e0006);
}
/* Emergency Card Header */
.bh-registration .emergency-card-header {
background: linear-gradient(
135deg,
var(--theme-color-highlight, #8e0006),
#a5000a
);
}
/* Contact Items */
.bh-registration .contact-item {
transition: all 0.3s ease;
}
.bh-registration .contact-item:hover {
transform: translateX(5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.bh-registration .contact-item-location,
.bh-registration .contact-item-phone {
transition: all 0.3s ease;
}
.bh-registration .contact-item-location:hover,
.bh-registration .contact-item-phone:hover {
transform: translateX(5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.bh-registration .contact-item-routine {
background-color: var(--theme-color, #f7eeee);
}
.bh-registration .contact-item-emergency {
background-color: var(--theme-color, #f7eeee);
border-left: 4px solid var(--theme-color-highlight, #8e0006);
}
/* Contact Icon Wrapper */
.bh-registration .contact-icon-wrapper {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.875rem;
background-color: rgba(142, 0, 6, 0.1);
border-radius: 50%;
}
.bh-registration .contact-icon {
color: var(--theme-color-highlight, #8e0006);
font-size: 1rem;
}
/* Contact Content Wrapper */
.bh-registration .contact-content-wrapper {
flex: 1;
}
.bh-registration .contact-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #666;
font-weight: 600;
margin-bottom: 0.25rem;
}
.bh-registration .contact-value {
font-size: 0.95rem;
color: #333;
font-weight: 500;
line-height: 1.5;
word-break: break-word;
}
.bh-registration .contact-value:hover {
color: var(--theme-color-highlight, #8e0006);
}
/* Timing Info */
.bh-registration .timing-info {
background-color: var(--theme-color2, #fcead5);
border-left: 3px solid var(--theme-color2-highlight, #f0bb7f);
transition: all 0.3s ease;
}
.bh-registration .timing-info:hover {
transform: translateX(3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.bh-registration .timing-info .contact-icon-wrapper {
background-color: rgba(240, 187, 127, 0.2);
}
.bh-registration .timing-icon {
color: var(--theme-color-highlight, #8e0006);
}
/* Note Box */
.bh-registration .note-box {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
transition: all 0.3s ease;
}
.bh-registration .note-box:hover {
transform: translateX(3px);
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
}
.bh-registration .registration-note-text {
font-size: 0.875rem;
line-height: 1.6;
color: #856404;
}
/* Emergency Phone */
.bh-registration .emergency-phone-icon {
color: var(--theme-color-highlight, #8e0006);
}
.bh-registration .emergency-phone-text {
color: var(--theme-color-highlight, #8e0006);
}
/* Responsive Styles */
@media (max-width: 991.98px) {
.bh-registration .registration-page-title {
font-size: 1.75rem;
}
.bh-registration .section-title {
font-size: 1.375rem;
}
}
@media (max-width: 767.98px) {
.bh-registration {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.bh-registration .registration-page-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.bh-registration .intro-text-primary {
font-size: 1rem;
line-height: 1.6;
}
.bh-registration .intro-text-secondary {
font-size: 0.9375rem;
line-height: 1.6;
}
.bh-registration .contact-banner-text {
font-size: 0.875rem;
line-height: 1.5;
}
.bh-registration .section-title {
font-size: 1.25rem;
padding-bottom: 6px;
}
.bh-registration .registration-table-wrapper {
border-radius: 8px;
}
.bh-registration .registration-mobile-card .card-header {
padding: 0.875rem !important;
}
.bh-registration .registration-mobile-card .card-body {
padding: 1rem !important;
}
.bh-registration .registration-mobile-item {
margin-bottom: 0.875rem !important;
padding-bottom: 0.875rem !important;
}
.bh-registration .registration-mobile-value {
font-size: 0.875rem;
}
.bh-registration .registration-table {
font-size: 0.875rem;
min-width: 650px;
}
.bh-registration .registration-table thead th {
font-size: 0.75rem;
padding: 0.75rem 0.5rem !important;
}
.bh-registration .registration-table tbody td {
padding: 0.75rem 0.5rem !important;
}
.bh-registration .badge-timing {
font-size: 0.8125rem;
padding: 0.375rem 0.75rem;
margin-bottom: 0.5rem !important;
margin-right: 0;
display: block;
}
.bh-registration .timing-slot {
flex-direction: column;
gap: 0.5rem;
}
.bh-registration .phone-link {
font-size: 0.875rem;
word-break: break-all;
}
.bh-registration .registration-card-title {
font-size: 1rem;
line-height: 1.4;
}
.bh-registration .contact-icon-wrapper {
width: 32px;
height: 32px;
margin-right: 0.75rem;
}
.bh-registration .contact-icon {
font-size: 0.9rem;
}
.bh-registration .contact-label {
font-size: 0.6875rem;
margin-bottom: 0.375rem;
}
.bh-registration .contact-value {
font-size: 0.875rem;
line-height: 1.4;
}
.bh-registration .registration-note-text {
font-size: 0.8125rem;
line-height: 1.5;
}
.bh-registration .registration-main-card .card-body {
padding: 1rem !important;
}
.bh-registration .card-header {
padding: 1rem !important;
}
.bh-registration .card-body {
padding: 1rem !important;
}
.bh-registration .contact-item-location,
.bh-registration .contact-item-phone,
.bh-registration .timing-info,
.bh-registration .note-box {
padding: 0.875rem !important;
}
.bh-registration .rounded-lg-4 {
border-radius: 0.5rem !important;
}
.bh-registration .rounded-top-lg-4 {
border-top-left-radius: 0.5rem !important;
border-top-right-radius: 0.5rem !important;
}
}
@media (min-width: 992px) {
.bh-registration .rounded-lg-4 {
border-radius: 1rem !important;
}
.bh-registration .rounded-top-lg-4 {
border-top-left-radius: 1rem !important;
border-top-right-radius: 1rem !important;
}
}
@media (max-width: 575.98px) {
.bh-registration .registration-page-title {
font-size: 1.375rem;
}
.bh-registration .section-title {
font-size: 1.125rem;
}
.bh-registration .registration-mobile-card .card-header h5 {
font-size: 1rem;
}
.bh-registration .registration-mobile-value {
font-size: 0.8125rem;
}
.bh-registration .registration-mobile-card .card-body {
padding: 0.875rem !important;
}
.bh-registration .contact-icon-wrapper {
width: 28px;
height: 28px;
margin-right: 0.625rem;
}
.bh-registration .contact-icon {
font-size: 0.8rem;
}
}
/*========== Visiting Hours page css =========== */
.visiting-hours-card {
background: #fff;
border: 1px solid var(--theme-color2);
border-radius: 16px;
box-shadow: 0 20px 50px rgba(142, 0, 6, 0.08);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.visiting-hours-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 60px rgba(142, 0, 6, 0.12);
}
.visiting-hours-card .card-header {
background: var(--theme-color2);
color: var(--theme-color-highlight);
border-bottom: 1px solid var(--theme-color2-highlight);
font-weight: 700;
letter-spacing: 0.4px;
}
.visiting-hours-card .card-body {
color: #3c2f2f;
}
.visiting-hours-item {
padding: 14px 0;
border-bottom: 1px dashed var(--theme-color2-highlight);
}
.visiting-hours-item:last-child {
border-bottom: none;
}
.visiting-hours-label {
font-weight: 700;
color: var(--theme-color-highlight);
margin-bottom: 6px;
font-size: 1.05rem;
}
.visiting-hours-time {
font-size: 0.98rem;
color: #5a4646;
}
.visiting-hours-badge {
display: inline-block;
background: var(--theme-color2-highlight);
color: #5a2f00;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.9rem;
margin-top: 4px;
}
@media (max-width: 767.98px) {
.visiting-hours-section {
padding: 40px 0;
}
.visiting-hours-card {
border-radius: 12px;
}
}
/* ------ blog style ----------- */
/* .blog-inner-imgs {
text-align: center;
}
.blog-inner-imgs img {
width: 80%;
margin: 20px;
text-align: center;
} */
/* ------ blog style here starts---------- */
/* .blog-inner-imgs {
text-align: center;
}
.blog-inner-imgs img {
max-width: 100%;
width: 600px;
height: auto;
margin: 20px auto;
display: block;
} */
/* blog pg address */
.blog-address {
background-color: #fcead5;
border: 2px solid #aa0006;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
}
/* =========== */
.inner-blogs-title {
color: var(--theme-color-highlight);
font-weight: 700;
}
.inner-blogs-section-title {
margin-top: 45px;
margin-bottom: 15px;
font-weight: 600;
color: var(--theme-color-highlight);
border-left: 6px solid var(--theme-color2-highlight);
padding-left: 15px;
}
.inner-blogs-tag {
display: inline-block;
background: var(--theme-color2);
color: var(--theme-color-highlight);
padding: 8px 30px;
border-radius: 30px;
font-size: 22px;
margin-top: 20px;
font-weight: 500;
}
.inner-blogs-img {
text-align: center;
margin: 35px 0;
}
.inner-blogs-img img {
max-width: 600px;
width: 100%;
border-radius: 16px;
}
/* LIST STYLE 1 */
.inner-blogs-list-style-1 {
list-style: none;
padding-left: 0;
}
.inner-blogs-list-style-1 li {
position: relative;
padding-left: 34px;
margin-bottom: 12px;
}
.inner-blogs-list-style-1 li::before {
content: "\f058";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--theme-color-highlight);
position: absolute;
left: 0;
top: 2px;
}
/* LIST STYLE 2 */
.inner-blogs-list-style-2 {
list-style: none;
padding-left: 0;
}
.inner-blogs-list-style-2 li {
background: var(--theme-color2);
padding: 12px 18px 12px 42px;
border-radius: 12px;
margin-bottom: 12px;
position: relative;
}
.inner-blogs-list-style-2 li::before {
content: "\f135";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--theme-color-highlight);
position: absolute;
left: 16px;
top: 14px;
}
/* LIST STYLE 3 */
.inner-blogs-list-style-3 {
list-style: none;
padding-left: 0;
}
.inner-blogs-list-style-3 li {
position: relative;
padding-left: 26px;
margin-bottom: 10px;
}
.inner-blogs-list-style-3 li::before {
content: "";
width: 10px;
height: 10px;
background: var(--theme-color-highlight);
border-radius: 50%;
position: absolute;
left: 0;
top: 8px;
}
.inner-blogs-final {
background: var(--theme-color-highlight);
color: #fff;
padding: 35px;
border-radius: 18px;
margin-top: 45px;
}
@media (max-width: 768px) {
.inner-blogs-wrapper {
padding: 25px;
}
}
.inner-blog-imgs {
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.top-line {
border-top: 2px solid var(--theme-color2-highlight);
}
/* ====== faq Section accoedian ========== */
/* Accordion container */
.inner-page-faq-accordion .accordion-item {
border: none;
margin-bottom: 1rem;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
/* Accordion button */
.inner-page-faq-accordion .accordion-button {
background-color: var(--theme-color);
color: var(--theme-color-highlight);
font-weight: 600;
border: none;
padding: 1rem 1.25rem;
position: relative;
}
.inner-page-faq-accordion .accordion-button:focus {
box-shadow: none;
}
/* Open state */
.inner-page-faq-accordion .accordion-button:not(.collapsed) {
background-color: var(--theme-color2);
color: var(--body-color);
}
/* Accordion body */
.inner-page-faq-accordion .accordion-body {
background-color: #fff;
color: #333;
padding: 1rem 1.25rem;
font-size: 1rem;
}
.inner-page-faq-accordion .accordion-button.collapsed::after {
display: inline-block;
/* keep your arrow */
}
.inner-page-faq-accordion .accordion-button:not(.collapsed)::after {
transform: rotate(-180deg);
}
/* Responsive */
@media (max-width: 767px) {
.inner-page-faq-accordion .accordion-button {
font-size: 0.95rem;
padding: 0.75rem 1rem;
}
.inner-page-faq-accordion .accordion-body {
font-size: 0.9rem;
padding: 0.75rem 1rem;
}
}
/* =========== list styles ================= */
/* ========= Health Packages ================ */
.btn-close {
color: var(--white-color) !important;
}
.health-packages-section {
padding: 60px 0;
/* background-color: var(--theme-color); */
}
.health-package-card {
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.health-package-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.package-image-wrapper {
width: 100%;
overflow: hidden;
background: linear-gradient(
135deg,
var(--theme-color) 0%,
var(--theme-color2) 100%
);
display: flex;
align-items: center;
justify-content: center;
}
.package-image {
width: 100%;
height: auto;
display: block;
object-fit: contain;
transition: transform 0.3s ease;
}
.health-package-card:hover .package-image {
transform: scale(1.02);
}
.package-content {
background: white;
}
.package-title {
font-size: 0.95rem;
color: #666;
font-weight: 400;
margin-bottom: 0.5rem;
}
.package-name {
font-size: 22px;
font-weight: 700;
color: var(--theme-color-highlight);
margin: 0;
}
.star-rating {
font-size: 1.1rem;
}
.price-label {
font-weight: 500;
color: #555;
}
.price-amount {
font-weight: 500;
font-size: 17px;
color: var(--theme-color-highlight);
}
.package-description {
font-size: 0.95rem;
color: #666;
line-height: 1.6;
margin: 0;
}
.package-params {
color: #333;
font-size: 0.95rem;
line-height: 1.6;
}
.package-params strong {
display: block;
margin-bottom: 0.25rem;
}
.package-label {
margin-bottom: 1.5rem;
margin-top: 0.5rem;
display: block;
width: 100%;
}
.package-label strong {
display: block;
margin-bottom: 0.25rem;
font-weight: 600;
color: #333;
}
.package-label .badge {
position: relative;
padding: 8px 16px;
font-size: 0.9rem;
font-weight: 500;
background-color: var(--theme-color2-highlight) !important;
color: #333;
border-radius: 20px;
display: inline-block;
border: none;
width: auto;
}
.package-buttons {
margin-top: 0;
margin-bottom: 0;
clear: both;
width: 100%;
}
.package-buttons .btn-primary {
background-color: var(--theme-color-highlight);
border-color: var(--theme-color-highlight);
padding: 10px 20px;
font-weight: 600;
transition: all 0.3s ease;
}
.package-buttons .btn-primary:hover {
background-color: var(--theme-color-highlight) !important;
border-color: var(--theme-color-highlight) !important;
transform: translateY(-2px);
}
.package-buttons .btn-outline-primary {
border-color: var(--theme-color-highlight);
color: var(--theme-color-highlight);
padding: 10px 20px;
font-weight: 600;
transition: all 0.3s ease;
}
.package-buttons .btn-outline-primary:hover {
background-color: var(--theme-color) !important;
color: var(--theme-color-highlight);
transform: translateY(-2px);
border: 1px solid var(--theme-color-highlight);
}
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
box-shadow: 0 0 0 0.25rem rgba(250, 151, 129, 0.5) !important;
}
.btn-check:focus + .btn-primary,
.btn-primary:focus {
box-shadow: 0 0 0 0.25rem rgba(250, 151, 129, 0.5) !important;
}
.btn-check:focus + .btn-primary,
.btn-primary:focus.btn-outline-primary:focus {
box-shadow: 0 0 0 0.25rem rgba(250, 151, 129, 0.5) !important;
}
/* Modal Styles */
#platinumModal .modal-dialog,
#comprehensiveModal .modal-dialog {
max-width: 90%;
width: 90%;
margin: 1.75rem auto;
}
@media (max-width: 768px) {
#platinumModal .modal-dialog,
#comprehensiveModal .modal-dialog {
max-width: 100%;
width: 100%;
margin: 0;
height: 100%;
}
#platinumModal .modal-content,
#comprehensiveModal .modal-content {
height: 85%;
border-radius: 0;
}
}
@media (min-width: 992px) {
#platinumModal .modal-dialog,
#comprehensiveModal .modal-dialog {
max-width: 90%;
width: 90%;
}
}
.modal-header {
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.modal-header-custom {
background-color: var(--theme-color-highlight);
color: white;
}
.modal-title {
font-size: 22px;
font-weight: 700;
color: var(--white-color);
}
.modal-section-title {
color: var(--theme-color-highlight);
}
.test-list {
margin: 0;
}
.test-list li {
padding: 8px 0;
font-size: 0.95rem;
color: #333;
line-height: 1.5;
border-bottom: 1px solid #f0f0f0;
}
.test-list li:last-child {
border-bottom: none;
}
.test-list i {
font-size: 0.9rem;
color: var(--theme-color-highlight);
}
/* Departments Pills */
.departments-pills {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.department-badge {
display: inline-block;
padding: 4px 16px;
background: linear-gradient(
135deg,
var(--theme-color2) 0%,
var(--theme-color) 100%
);
color: var(--theme-color-highlight);
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
border: 2px solid var(--theme-color2-highlight);
transition: all 0.3s ease;
}
.department-badge:hover {
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
#6d0004 100%
);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(142, 0, 6, 0.3);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.health-packages-section {
padding: 40px 0;
}
.package-name {
font-size: 19px;
}
.price-amount {
font-size: 16px;
}
.package-label {
margin-bottom: 1.25rem;
margin-top: 0.5rem;
}
.package-buttons {
flex-direction: column;
margin-top: 0;
margin-bottom: 0;
}
.package-buttons .btn {
width: 100%;
}
.test-list {
margin-bottom: 20px;
}
.departments-pills {
justify-content: center;
}
.department-badge {
font-size: 0.85rem;
padding: 4px 10px;
}
}
@media (max-width: 576px) {
.package-content {
padding: 1.5rem !important;
}
.package-image {
max-width: 100%;
height: auto;
}
}
/* ============= services list =============== */
.inner-list-four {
max-width: 100%;
}
.inner-list-four-item {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.inner-list-four-item:last-child {
border-bottom: none;
}
.inner-list-four-icon {
min-width: 38px;
height: 38px;
background: var(--theme-color2);
color: var(--theme-color-highlight);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
margin-top: 2px;
}
.inner-list-four-text {
font-size: 15px;
color: #444;
line-height: 1.6;
}
.inner-list-four-text strong {
color: var(--theme-color-highlight);
font-weight: 600;
}
@media (max-width: 576px) {
.inner-list-four-text {
font-size: 14px;
}
}
/* =================service accordian ================ */
.services-accordion-style-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.services-accordion-style-header {
margin-bottom: 3rem;
text-align: center;
}
.services-accordion-style-header h1 {
color: var(--theme-color-highlight);
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 0.5rem;
letter-spacing: -0.5px;
}
.services-accordion-style-header p {
color: #666;
font-size: 1.1rem;
margin: 0;
}
.services-accordion-style-accordion {
--bs-accordion-border-radius: 12px;
--bs-accordion-border-width: 0;
--bs-accordion-btn-padding-x: 1.75rem;
--bs-accordion-btn-padding-y: 1.25rem;
--bs-accordion-body-padding-x: 1.75rem;
--bs-accordion-body-padding-y: 1.5rem;
--bs-accordion-active-color: var(--theme-color-highlight);
--bs-accordion-btn-focus-border-color: transparent;
--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(142, 0, 6, 0.15);
}
.services-accordion-style-item {
background-color: #fff;
border: none;
border-radius: 12px !important;
margin-bottom: 1.25rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
overflow: hidden;
}
.services-accordion-style-item:hover {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.services-accordion-style-button {
background-color: #fff;
color: var(--theme-color-highlight);
font-weight: 600;
font-size: 1.25rem;
border: none;
padding: 1.5rem 1.75rem;
transition: all 0.3s ease;
}
.services-accordion-style-button:not(.collapsed) {
background: linear-gradient(
135deg,
var(--theme-color-highlight) 0%,
#a0000a 100%
);
color: #fff;
box-shadow: none;
}
.services-accordion-style-button:not(.collapsed)::after {
filter: brightness(0) invert(1);
}
.services-accordion-style-button:focus {
box-shadow: 0 0 0 0.25rem rgba(142, 0, 6, 0.15);
}
.services-accordion-style-button:hover:not(.collapsed) {
background: linear-gradient(
135deg,
#a0000a 0%,
var(--theme-color-highlight) 100%
);
}
.services-accordion-style-body {
background-color: #fff;
padding: 2rem 1.75rem;
}
.services-accordion-style-content-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: start;
}
.services-accordion-style-content-text {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.services-accordion-style-intro {
color: #555;
font-size: 1.05rem;
line-height: 1.8;
margin: 0;
}
.services-accordion-style-image-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.services-accordion-style-image {
width: 600px;
max-width: 100%;
height: auto;
border-radius: 10px;
object-fit: cover;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
}
.services-accordion-style-image:hover {
transform: scale(1.02);
}
.services-accordion-style-list {
list-style: none;
padding: 0;
margin: 0;
}
.services-accordion-style-list li {
padding: 1rem 0;
padding-left: 2rem;
position: relative;
color: #333;
font-size: 1rem;
line-height: 1.7;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.services-accordion-style-list li strong {
color: var(--theme-color-highlight);
font-weight: 600;
}
.services-accordion-style-list li:last-child {
border-bottom: none;
}
.services-accordion-style-list li::before {
content: "\f00c";
/* Font Awesome check */
font-family: "Font Awesome 6 Free";
font-weight: 900;
/* REQUIRED for solid/thick icons */
position: absolute;
left: 0;
top: 0.75rem;
color: var(--theme-color-highlight);
font-size: 1.1rem;
}
/*
.services-accordion-style-list li:nth-child(even)::before {
color: var(--theme-color2-highlight);
} */
/* .services-accordion-style-button {
color: #000000 !important;
} */
.services-accordion-style-button:not(.collapsed) {
color: #ffffff !important;
background-color: transparent;
/* or keep your own bg */
}
/* Responsive Design */
@media (max-width: 768px) {
.services-accordion-style-header h1 {
font-size: 2rem;
}
.services-accordion-style-content-wrapper {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.services-accordion-style-button {
font-size: 1.1rem;
padding: 1.25rem 1.5rem;
}
.services-accordion-style-body {
padding: 1.5rem 1.5rem;
}
.services-accordion-style-image {
width: 100%;
}
}
@media (max-width: 576px) {
.services-accordion-style-header h1 {
font-size: 1.75rem;
}
.services-accordion-style-button {
font-size: 1rem;
padding: 1rem 1.25rem;
}
.services-accordion-style-body {
padding: 1.25rem 1.25rem;
}
.services-accordion-style-list li {
font-size: 0.95rem;
padding: 0.875rem 0;
padding-left: 1.75rem;
line-height: 1.6;
}
.services-accordion-style-intro {
font-size: 1rem;
}
.services-accordion-style-image {
width: 100%;
}
}
/* ====== services cards====== */
.what-is-section {
background: white;
}
.info-card {
background: white;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
height: 100%;
transition: all 0.3s ease;
border-top: 4px solid var(--theme-color-highlight);
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}
.info-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--theme-color-highlight);
margin-bottom: 1rem;
}
.info-card p {
color: #555;
line-height: 1.8;
}
/* why choose tavi section */
.how-it-works-section {
/* background: linear-gradient(180deg, var(--theme-color) 0%, white 100%); */
}
.process-step {
position: relative;
padding: 2rem;
background: white;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
margin-bottom: 2rem;
transition: all 0.3s ease;
}
.process-step:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.step-number {
position: absolute;
top: -20px;
left: 30px;
width: 50px;
height: 50px;
background: var(--theme-color-highlight);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.3rem;
box-shadow: 0 5px 15px rgba(142, 0, 6, 0.3);
}
.step-content h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--theme-color-highlight);
margin-bottom: 1rem;
margin-top: 1rem;
}
.step-content p {
color: #555;
line-height: 1.8;
}
/* Compact Process List Styles */
.inner-list-one {
list-style: none;
padding: 0;
margin: 0;
margin: 0 auto;
position: relative;
}
.inner-list-one::before {
content: "";
position: absolute;
left: 35px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(
180deg,
var(--theme-color-highlight) 0%,
var(--theme-color2-highlight) 100%
);
border-radius: 2px;
}
.inner-list-one-item {
display: flex;
align-items: flex-start;
padding: 1.25rem 1.5rem;
margin-bottom: 1.25rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
position: relative;
border-left: 4px solid transparent;
}
.inner-list-one-item:hover {
transform: translateX(8px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
border-left-color: var(--theme-color-highlight);
}
.inner-list-one-number {
width: 50px;
height: 50px;
min-width: 50px;
background: linear-gradient(135deg, var(--theme-color-highlight), #a00008);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
margin-right: 1.25rem;
box-shadow: 0 4px 12px rgba(142, 0, 6, 0.25);
position: relative;
z-index: 1;
}
.inner-list-one-content {
flex: 1;
padding-top: 0.25rem;
}
.inner-list-one-content h4 {
font-size: 1.15rem;
font-weight: 700;
color: var(--theme-color-highlight);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.inner-list-one-content h4 i {
font-size: 1rem;
opacity: 0.8;
}
.inner-list-one-content p {
color: #555;
margin: 0;
line-height: 1.7;
font-size: 0.95rem;
}
/* ====================== */
/* dr profile start */
/* Dr profile */
.dr-profile-img {
width: 100%;
height: 240px;
object-fit: cover;
-o-object-fit: cover;
display: block;
border: 5px solid var(--theme-color2-highlight);
border-radius: 12px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-transform: scale(1);
transform: scale(1);
}
.dr-profile-img:hover {
-webkit-transform: scale(1.08);
transform: scale(1.08);
border-color: var(--theme-color-highlight);
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.dr-profile-name {
position: relative;
display: inline-block;
padding: 10px;
}
/* Dr profile image container */
.dr-profile-img-container {
border: none !important;
position: relative;
padding: 25px;
overflow: visible;
}
/* Dr specialty banner */
.card .position-relative {
position: relative;
}
.dr-specialty-banner {
position: absolute;
left: 10px;
bottom: 40px;
color: #ffffff;
font-size: 18px;
font-weight: 700;
border-radius: 0px 50px 50px 0px;
background-color: var(--theme-color-highlight);
padding: 10px 25px 10px 90px;
}
.dr-specialty-banner::before {
position: absolute;
content: "";
width: 0;
height: 0;
left: 0px;
bottom: -14px;
border-top: 15px solid var(--theme-color-highlight);
border-left: 15px solid transparent;
}
/* dr profile end */
/* =============================================================== */
/* Custom Styles */
a .service-main-img {
border-radius: 30px !important;
/* Custom border-radius */
border-top: 5px solid var(--theme-color-highlight);
/* Example border-top with color */
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px !important;
transition: all 0.3s ease;
/* Smooth transition for hover effect */
}
.service-main-img:hover {
transition: all 0.3s ease !important;
/* Smooth transition for hover effect */
}
/* Main Image (Full Width) */
.service-gallery {
max-width: 1000px !important;
}
.remaining-imgs .media-img2 {
position: absolute;
top: 0;
left: 0;
/* width: 250px; */
height: auto;
object-fit: cover;
/* Ensures the image covers the container while maintaining its aspect ratio */
transition: transform 0.3s ease-in-out;
/* Transition for hover effect */
}
/* Hover effect on images */
.remaining-imgs .media-img2:hover {
transform: scale(1.02);
/* Slight zoom on hover */
}
/* ================ sticky top menu ================ */
/* ================ No sticky initially ================ */
.header-lower-six {
transition: top 0.3s ease;
/* Smooth transition */
position: relative;
/* Initially not sticky */
}
/* ================ Sticky menu when scrolling ================ */
/* Default styling for the header */
.all-menu {
position: relative;
/* Default position (not sticky) */
z-index: 9999;
/* Ensure it stays above other content */
background-color: #fff;
box-shadow: none;
/* No shadow by default */
}
/* Optional: Additional styles for the sticky header */
.is-sticky {
position: fixed;
/* Make it stick to the top when scrolled */
top: -2px;
/* Stick to the top */
width: 100%;
/* Ensure it spans full width */
transition: all 0.3s ease;
/* Smooth transition for visual effect */
}
/* Mobile View (less than 980px) */
@media (max-width: 980px) {
/* Same sticky behavior for mobile */
.mobile-all-menu {
position: relative;
z-index: 9999;
background-color: #fff;
box-shadow: none;
}
.is-sticky {
position: fixed;
top: 0;
width: 100%;
}
}
/* ================================================= */
/* ============ &5 Years IMg =========== */
/* Initial position of the image */
.more-than img {
position: fixed;
top: 157px;
left: 0px;
border: none;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
z-index: 999;
transition: top 0.3s ease;
/* Smooth transition for position change */
}
.year-img {
width: auto;
/* height: 95px !important; */
height: 105px !important;
}
@media (max-width: 780px) {
.year-img {
width: auto;
height: 55px !important;
}
.more-than img {
top: 390px;
}
}
/* Custom sticky class for the image */
/* .sticky-image-fixed {
position: fixed;
top: 80px;
left: 0;
z-index: 9999;
width: 10%;
} */
/* ============= mediclaim========== */
.tpa-identification {
background-color: #f7f7f7;
}
.tpa-identification h2 {
font-size: 2rem;
color: #333;
}
.tpa-identification ul {
list-style: none;
padding: 0;
}
.tpa-identification li {
font-size: 1rem;
font-weight: 500;
color: #333;
}
.tpa-identification i {
font-size: 1.5rem;
color: #8e0006;
}
.tpa-identification li span {
font-size: 1rem;
line-height: 1.5;
color: #333;
}
/* ============== Downloads page css ============ */
.download-item-box {
border: 1px solid rgb(38, 38, 39);
border-radius: 4px;
padding: 15px 20px;
margin-top: 20px;
background-color: #fff;
transition: all 0.3s ease;
}
.download-item-box:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-color: #8e0006;
}
.download-link {
color: #333;
text-decoration: none;
font-size: 1rem;
display: block;
transition: color 0.3s ease;
}
.download-link:hover {
color: #8e0006;
text-decoration: none;
}
/* =============Awards Section Styles============== */
.award-international-badge {
background-color: #8e0006;
color: #fff;
padding: 12px 30px;
border-radius: 8px;
display: inline-block;
font-weight: 700;
font-size: 1.1rem;
text-align: center;
margin: 20px auto 0;
width: fit-content;
}
.award-image-wrapper {
margin-bottom: 20px;
}
.award-image-wrapper a {
display: block;
cursor: pointer;
}
.award-image {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
/* width: 100%;
height: auto; */
}
.award-image:hover {
transform: scale(1.02);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.award-image-small .award-image {
max-height: 300px;
object-fit: contain;
object-position: center;
}
.award-content {
padding-left: 20px;
}
.award-text {
font-size: 1.05rem;
line-height: 1.8;
color: #333;
margin-bottom: 0;
}
.award-equal-height-row {
display: flex;
}
.award-equal-height-col {
display: flex;
flex-direction: column;
gap: 20px;
}
.award-equal-height-col .award-content {
flex: 1;
display: flex;
align-items: center;
}
@media (max-width: 767px) {
.award-content {
padding-left: 0;
padding-top: 0;
margin-top: 20px;
}
.award-image-wrapper {
margin-bottom: 0;
}
.award-image-small .award-image {
max-height: 250px;
}
.award-text {
font-size: 1rem;
}
.row.align-items-center.mt-5 {
margin-top: 2rem !important;
}
}
/* ============================== */
/* General Styles */
.fn-hero {
background: radial-gradient(
circle at 20% 20%,
var(--theme-color2),
transparent 35%
),
radial-gradient(circle at 80% 10%, var(--theme-color), transparent 35%),
radial-gradient(circle at 15% 80%, #f5dabc, transparent 40%), #fff;
border-radius: 24px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.06);
}
.fn-lead {
font-size: 1.1rem;
line-height: 1.7;
}
.foreign-list h3 {
font-size: 19px;
color: #000;
}
.foreign-list i {
color: var(--theme-color-highlight);
}
/* Procedures & Surgeries Section Styles */
.procedures-routine-section {
background: linear-gradient(
180deg,
transparent 0%,
rgba(247, 238, 238, 0.2) 50%,
transparent 100%
);
}
.procedures-main-title {
color: var(--theme-color-highlight);
font-weight: 700;
font-size: 2rem;
letter-spacing: -0.02em;
line-height: 1.3;
margin-bottom: 0.75rem;
}
.procedures-title-icon {
color: var(--theme-color-highlight);
font-size: 2.25rem;
opacity: 0.9;
}
.procedures-subtitle {
font-size: 1.1rem;
font-weight: 400;
line-height: 1.6;
}
.procedures-routine-card {
background: radial-gradient(
circle at 20% 20%,
rgba(252, 234, 213, 0.4),
transparent 50%
),
radial-gradient(
circle at 80% 80%,
rgba(247, 238, 238, 0.5),
transparent 50%
),
#fff;
border: 1px solid rgba(142, 0, 6, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.procedures-routine-card:hover {
transform: translateY(-4px);
box-shadow: 0 30px 80px rgba(142, 0, 6, 0.12) !important;
}
.procedures-card-header {
background: linear-gradient(135deg, var(--theme-color-highlight), #a5000a);
position: relative;
overflow: hidden;
}
.procedures-card-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
pointer-events: none;
}
.procedures-card-header h3 {
font-size: 1.5rem;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
.procedures-card-header i {
font-size: 1.75rem;
opacity: 0.95;
}
.procedure-item-card {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.9),
rgba(247, 238, 238, 0.5)
);
border: 2px solid rgba(142, 0, 6, 0.1);
border-radius: 16px;
padding: 2rem 1.5rem;
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.procedure-item-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(
90deg,
var(--theme-color-highlight),
var(--theme-color2-highlight)
);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.procedure-item-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(142, 0, 6, 0.15);
border-color: var(--theme-color-highlight);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 1),
rgba(252, 234, 213, 0.7)
);
}
.procedure-item-card:hover::before {
transform: scaleX(1);
}
.procedure-icon-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 1.25rem;
background: linear-gradient(
135deg,
rgba(142, 0, 6, 0.1),
rgba(142, 0, 6, 0.15)
);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.procedure-icon-wrapper::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 24px;
background: linear-gradient(
135deg,
var(--theme-color-highlight),
var(--theme-color2-highlight)
);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.procedure-item-card:hover .procedure-icon-wrapper {
transform: scale(1.15) rotate(5deg);
background: linear-gradient(135deg, var(--theme-color-highlight), #a5000a);
box-shadow: 0 10px 25px rgba(142, 0, 6, 0.3);
}
.procedure-item-card:hover .procedure-icon-wrapper::after {
opacity: 0.3;
}
.procedure-icon {
color: var(--theme-color-highlight);
font-size: 2rem;
transition: all 0.4s ease;
}
.procedure-item-card:hover .procedure-icon {
color: #fff;
transform: scale(1.1);
}
.procedure-item-title {
color: #2f2f2f;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.5;
margin: 0;
transition: color 0.3s ease;
}
.procedure-item-card:hover .procedure-item-title {
color: var(--theme-color-highlight);
}
/* Contact Information Section Styles */
.fn-contact-card {
background: radial-gradient(
circle at 20% 20%,
rgba(252, 234, 213, 0.4),
transparent 45%
),
radial-gradient(
circle at 80% 10%,
rgba(247, 238, 238, 0.5),
transparent 45%
),
#fff;
border: 1px solid rgba(142, 0, 6, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.fn-contact-card:hover {
transform: translateY(-4px);
box-shadow: 0 30px 80px rgba(142, 0, 6, 0.12) !important;
}
.fn-contact-header {
background: linear-gradient(135deg, var(--theme-color-highlight), #a5000a);
position: relative;
overflow: hidden;
}
.fn-contact-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
pointer-events: none;
}
.fn-contact-header h3 {
font-size: 1.25rem;
line-height: 1.5;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
.fn-contact-header i {
font-size: 1.5rem;
opacity: 0.95;
}
.fn-contact-item {
background: linear-gradient(
135deg,
rgba(247, 238, 238, 0.6),
rgba(252, 234, 213, 0.4)
);
border: 1px solid rgba(142, 0, 6, 0.1);
border-left: 4px solid var(--theme-color-highlight);
border-radius: 12px;
padding: 1.5rem 1.75rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.fn-contact-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(
180deg,
var(--theme-color-highlight),
var(--theme-color2-highlight)
);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.fn-contact-item:hover {
transform: translateX(8px) translateY(-2px);
box-shadow: 0 12px 30px rgba(142, 0, 6, 0.15);
border-left-color: var(--theme-color2-highlight);
background: linear-gradient(
135deg,
rgba(247, 238, 238, 0.8),
rgba(252, 234, 213, 0.6)
);
}
.fn-contact-item:hover::before {
transform: scaleY(1);
}
.fn-contact-icon-wrapper {
width: 48px;
height: 48px;
background: linear-gradient(
135deg,
rgba(142, 0, 6, 0.1),
rgba(142, 0, 6, 0.15)
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.25rem;
transition: all 0.3s ease;
flex-shrink: 0;
}
.fn-contact-item:hover .fn-contact-icon-wrapper {
background: linear-gradient(135deg, var(--theme-color-highlight), #a5000a);
transform: scale(1.1) rotate(5deg);
}
.fn-contact-icon {
color: var(--theme-color-highlight);
font-size: 1.25rem;
transition: all 0.3s ease;
}
.fn-contact-item:hover .fn-contact-icon {
color: #fff;
transform: scale(1.1);
}
.fn-contact-content {
min-width: 0;
}
.fn-contact-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--theme-color-highlight);
margin-bottom: 0.5rem;
}
.fn-contact-value {
font-size: 1rem;
line-height: 1.6;
color: #2f2f2f;
word-break: break-word;
}
.fn-contact-link {
color: #2f2f2f;
font-weight: 500;
transition: all 0.3s ease;
display: inline-block;
}
.fn-contact-link:hover {
color: var(--theme-color-highlight);
transform: translateX(4px);
}
/* Responsive Styles */
@media (max-width: 991.98px) {
.fn-contact-header h3 {
font-size: 1.125rem;
}
.fn-contact-header {
padding: 1.25rem 1.5rem !important;
}
.fn-contact-card .card-body {
padding: 1.5rem 1.75rem !important;
}
}
@media (max-width: 991.98px) {
.procedures-main-title {
font-size: 1.75rem;
}
.procedures-title-icon {
font-size: 2rem;
}
.procedures-card-header {
padding: 1.5rem 2rem !important;
}
.procedures-card-header h3 {
font-size: 1.25rem;
}
.procedures-routine-card .card-body {
padding: 2rem 1.5rem !important;
}
}
@media (max-width: 768px) {
.procedures-main-title {
font-size: 1.5rem;
}
.procedures-title-icon {
font-size: 1.75rem;
}
.procedures-subtitle {
font-size: 1rem;
}
.procedure-item-card {
padding: 1.5rem 1.25rem;
}
.procedure-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 1rem;
}
.procedure-icon {
font-size: 1.75rem;
}
.procedure-item-title {
font-size: 1rem;
}
.fn-contact-header h3 {
font-size: 1rem;
flex-direction: column;
align-items: flex-start;
}
.fn-contact-header h3 i {
margin-bottom: 0.5rem;
margin-right: 0;
}
.fn-contact-item {
padding: 1.25rem 1.5rem;
}
.fn-contact-icon-wrapper {
width: 44px;
height: 44px;
margin-right: 1rem;
}
.fn-contact-icon {
font-size: 1.125rem;
}
.fn-contact-value {
font-size: 0.95rem;
}
}
@media (max-width: 576px) {
.procedures-main-title {
font-size: 1.25rem;
}
.procedures-title-icon {
font-size: 1.5rem;
margin-right: 0.75rem !important;
}
.procedures-subtitle {
font-size: 0.9375rem;
}
.procedures-card-header {
padding: 1.25rem 1.5rem !important;
}
.procedures-card-header h3 {
font-size: 1.125rem;
flex-direction: column;
align-items: flex-start;
}
.procedures-card-header i {
font-size: 1.5rem;
margin-bottom: 0.5rem;
margin-right: 0;
}
.procedures-routine-card .card-body {
padding: 1.5rem 1.25rem !important;
}
.procedure-item-card {
padding: 1.25rem 1rem;
}
.procedure-icon-wrapper {
width: 60px;
height: 60px;
margin-bottom: 0.875rem;
}
.procedure-icon {
font-size: 1.5rem;
}
.procedure-item-title {
font-size: 0.9375rem;
line-height: 1.4;
}
.fn-contact-header {
padding: 1rem 1.25rem !important;
}
.fn-contact-header h3 {
font-size: 0.9375rem;
line-height: 1.4;
}
.fn-contact-header h3 i {
font-size: 1.25rem;
}
.fn-contact-card .card-body {
padding: 1.25rem 1.5rem !important;
}
.fn-contact-item {
padding: 1rem 1.25rem;
}
.fn-contact-icon-wrapper {
width: 40px;
height: 40px;
margin-right: 0.875rem;
}
.fn-contact-icon {
font-size: 1rem;
}
.fn-contact-label {
font-size: 0.6875rem;
margin-bottom: 0.375rem;
}
.fn-contact-value {
font-size: 0.875rem;
}
}
/* ============ service page gallery ============================ */
#myCarousel {
--f-arrow-pos: 10px;
--f-arrow-bg: rgba(255, 255, 255, 0.75);
--f-arrow-hover-bg: rgba(255, 255, 255, 1);
--f-arrow-color: #333;
--f-arrow-width: 40px;
--f-arrow-height: 40px;
--f-arrow-svg-width: 20px;
--f-arrow-svg-height: 20px;
--f-arrow-svg-stroke-width: 2px;
--f-arrow-border-radius: 50%;
padding: 0px;
}
.service-sliding-gallery {
max-width: 800px;
padding: 15px;
margin: auto;
border-radius: 15px;
}
@media (max-width: 576px) {
.service-sliding-gallery {
max-width: 800px;
padding: 0px;
margin: auto;
border-radius: 15px;
}
}
#myCarousel .f-carousel__slide {
display: flex;
align-items: center;
justify-content: center;
}
#myCarousel img {
max-width: 100%;
max-height: 100%;
height: auto;
object-fit: contain;
border-radius: 15px;
border: 2px solid var(--theme-color2-highlight);
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
/* ************************Start Slider and Fancybox Functionality************************** */
.pdp-main {
width: 90%;
max-width: 1440px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
.pdp-image-gallery,
.pdp-content {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-top: 30px;
}
.pdp-image-gallery {
overflow: hidden;
}
.pdp-content {
padding: 20px;
}
.pdp-content h2 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}
@media (min-width: 980px) {
.pdp-main {
grid-template-columns: repeat(12, 1fr);
}
.pdp-image-gallery {
grid-column: span 8;
}
.pdp-content {
grid-column: span 4;
}
}
.slick-slide {
text-align: center;
/* background: #fff; */
display: flex;
justify-content: center;
align-items: center;
}
.slick-slide img {
display: block;
/* width: 100%;
height: 100%; */
object-fit: cover;
}
.main-slider .slick-slide a,
.main-slider .slick-slide img {
cursor: pointer !important;
}
.main-slider .slick-slide a {
display: block;
width: 100%;
height: 100%;
}
.main-slider .slick-slide img:hover {
opacity: 0.9;
transition: opacity 0.3s ease;
}
.fancybox__container {
z-index: 99999 !important;
}
.fancybox__toolbar {
background: rgba(0, 0, 0, 0.8) !important;
opacity: 1 !important;
}
.fancybox__toolbar button {
color: #fff !important;
opacity: 1 !important;
}
.fancybox__toolbar button:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.fancybox__thumbs {
background: rgba(0, 0, 0, 0.9) !important;
}
.fancybox__slide {
padding: 30px 50px !important;
}
.fancybox__button--close {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
opacity: 1 !important;
width: 44px !important;
height: 44px !important;
}
.fancybox__button--close:hover {
background: rgba(255, 255, 255, 0.2) !important;
}
.thumbnail-slider .slick-slide {
box-shadow: none !important;
padding: 0 5px !important;
margin: 0 !important;
transition: none !important;
width: 33.333% !important;
flex: 0 0 auto !important;
box-sizing: border-box !important;
border: none !important;
}
.thumbnail-slider.few-slides .slick-slide {
width: auto !important;
max-width: 150px;
padding: 0 8px !important;
}
.thumbnail-slider .slick-slide img {
width: 100%;
height: 100px;
object-fit: cover;
cursor: pointer;
border-radius: 4px !important;
display: block;
border: none !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.thumbnail-slider .slick-slide img:hover {
opacity: 0.9;
transform: none !important;
border: none !important;
transition: opacity 0.3s ease;
}
.thumbnail-slider .slick-current {
box-shadow: none !important;
transition: none !important;
border: none !important;
}
.thumbnail-slider .slick-current img {
opacity: 1 !important;
border: none !important;
transform: none !important;
transition: none !important;
}
.thumbnail-slider.few-slides .slick-current img {
transform: scale(1.08);
}
.thumbnail-slider {
position: relative;
margin: 20px auto;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.thumbnail-slider.few-slides {
padding: 0 20px !important;
}
.thumbnail-slider.few-slides .slick-track {
justify-content: center !important;
margin: 0 auto !important;
left: 0 !important;
transform: translateX(0) !important;
}
.thumbnail-slider.few-slides .slick-arrow {
display: none !important;
}
.thumbnail-slider .slick-list {
overflow: hidden;
border-radius: 0 !important;
background: transparent !important;
padding: 0 !important;
max-width: 100% !important;
margin: 0 auto;
width: 100% !important;
transition: none !important;
box-sizing: border-box !important;
border: none !important;
}
.thumbnail-slider.few-slides .slick-list {
display: flex;
justify-content: center;
max-width: 400px;
}
.thumbnail-slider .slick-track {
display: flex !important;
align-items: center;
gap: 0 !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
left: 0 !important;
transform: none !important;
transition: none !important;
}
.thumbnail-slider .slick-slide:last-child {
margin-right: 0 !important;
padding-right: 0 !important;
}
.thumbnail-slider .slick-slide:first-child {
margin-left: 0 !important;
padding-left: 0 !important;
}
.thumbnail-slider .slick-track {
width: auto !important;
}
.thumbnail-slider .slick-list {
margin: 0 !important;
}
.thumbnail-slider .slick-slide > div {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
}
.thumbnail-slider .slick-list {
display: flex;
justify-content: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.thumbnail-slider .slick-track {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
justify-content 0.4s ease !important;
}
.thumbnail-slider .slick-track[style*="width"] {
justify-content: center !important;
margin: 0 auto !important;
}
.thumbnail-slider.slick-initialized
.slick-track
> .slick-slide:nth-last-child(-n + 2):first-child,
.thumbnail-slider.slick-initialized
.slick-track
> .slick-slide:nth-last-child(-n + 2):first-child
~ .slick-slide {
margin: 0 auto;
}
.thumbnail-slider
.slick-list:has(
.slick-track > .slick-slide:nth-last-child(-n + 2):first-child
)
.slick-track {
justify-content: center !important;
margin: 0 auto !important;
}
.thumbnail-slider-centered .slick-list {
text-align: center;
}
.thumbnail-slider-centered .slick-track {
display: flex !important;
justify-content: center !important;
transform: none !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.thumbnail-slider-centered .slick-slide {
float: none !important;
display: inline-block !important;
vertical-align: middle;
transition: all 0.3s ease;
}
.thumbnail-slider-centered .slick-arrow {
display: none !important;
}
.thumbnail-slider-centered {
padding: 0 20px !important;
}
.thumbnail-slider .slick-slide:first-child:nth-last-child(1),
.thumbnail-slider .slick-slide:first-child:nth-last-child(2),
.thumbnail-slider .slick-slide:first-child:nth-last-child(1) ~ .slick-slide,
.thumbnail-slider .slick-slide:first-child:nth-last-child(2) ~ .slick-slide {
margin: 0 auto;
}
.thumbnail-slider .slick-slide:first-child:nth-last-child(-n + 2) {
justify-self: center;
}
.thumbnail-slider
.slick-track:has(.slick-slide:nth-last-child(-n + 2):first-child) {
justify-content: center !important;
margin: 0 auto !important;
left: 0 !important;
transform: translateX(0) !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.thumbnail-slider.slick-initialized {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.thumbnail-slider:not(.slick-initialized) {
opacity: 0.7;
}
.pdp-image-gallery {
padding: 20px 15px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.thumbnail-scroll-wrapper {
position: relative;
display: flex;
align-items: center;
gap: 15px;
max-width: 600px;
margin: 20px auto;
padding: 0 10px;
}
.scroll-btn {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgb(142, 0, 6);
border: 2px solid #f0bb7f;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
outline: none;
}
.scroll-btn:hover {
background: rgb(180, 0, 8);
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.scroll-btn:active {
transform: scale(0.95);
}
.scroll-btn svg {
pointer-events: none;
}
.thumbnail-scroll-container {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 12px 8px;
background: #f5f5f5;
border-radius: 10px;
flex: 1;
scrollbar-width: none;
-ms-overflow-style: none;
}
.thumbnail-scroll-container::-webkit-scrollbar {
display: none;
}
.thumbnail-item {
flex-shrink: 0;
width: 150px;
height: 100px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 8px;
overflow: hidden;
border: 3px solid transparent;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.thumbnail-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: all 0.3s ease;
}
.thumbnail-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
border-color: #007bff;
}
.thumbnail-item:hover img {
transform: scale(1.05);
}
.thumbnail-item.active {
border-color: #007bff;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
transform: scale(1.05);
}
.thumbnail-item.active img {
opacity: 1;
}
@media (max-width: 768px) {
.thumbnail-scroll-wrapper {
gap: 10px;
padding: 0 5px;
}
.scroll-btn {
width: 35px;
height: 35px;
}
.thumbnail-item {
width: 120px;
height: 80px;
}
.thumbnail-scroll-container {
gap: 8px;
padding: 10px 6px;
}
}
@media (max-width: 480px) {
.scroll-btn {
width: 30px;
height: 30px;
}
.scroll-btn svg {
width: 8px;
height: 14px;
}
.thumbnail-item {
width: 100px;
height: 70px;
}
.thumbnail-scroll-container {
gap: 6px;
}
}
.thumbnail-slider .slick-arrow,
.thumbnail-slider .slick-prev,
.thumbnail-slider .slick-next,
.thumbnail-slider button.slick-arrow,
.thumbnail-slider button.slick-prev,
.thumbnail-slider button.slick-next,
.thumbnail-slider > button,
.thumbnail-slider > .slick-prev,
.thumbnail-slider > .slick-next {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
font-size: 0px;
}
.thumbnail-slider .slick-prev,
.thumbnail-slider button.slick-prev {
left: 0 !important;
right: auto !important;
}
.thumbnail-slider .slick-next,
.thumbnail-slider button.slick-next {
right: 0 !important;
left: auto !important;
}
.thumbnail-slider .slick-arrow:before,
.thumbnail-slider .slick-prev:before,
.thumbnail-slider .slick-next:before,
.thumbnail-slider button:before,
.thumbnail-slider button.slick-prev:before,
.thumbnail-slider button.slick-next:before {
content: "" !important;
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
.thumbnail-slider .slick-prev:after,
.thumbnail-slider button.slick-prev:after,
.thumbnail-slider > button.slick-prev:after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 10px !important;
height: 10px !important;
border-left: 3px solid #ffffff !important;
border-bottom: 3px solid #ffffff !important;
border-right: 0 !important;
border-top: 0 !important;
transform: translate(-40%, -50%) rotate(45deg) !important;
display: block !important;
}
.thumbnail-slider .slick-next:after,
.thumbnail-slider button.slick-next:after,
.thumbnail-slider > button.slick-next:after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 10px !important;
height: 10px !important;
border-right: 3px solid #ffffff !important;
border-top: 3px solid #ffffff !important;
border-left: 0 !important;
border-bottom: 0 !important;
transform: translate(-60%, -50%) rotate(45deg) !important;
display: block !important;
}
.thumbnail-slider .slick-arrow:hover {
transform: translateY(-50%) scale(1.12) !important;
}
.thumbnail-slider .slick-prev:hover {
left: -3px !important;
}
.thumbnail-slider .slick-next:hover {
right: -3px !important;
}
.thumbnail-slider .slick-arrow:active {
transform: translateY(-50%) scale(0.95);
}
.thumbnail-slider .slick-arrow:focus {
outline-offset: 2px;
}
.thumbnail-slider .slick-arrow.slick-disabled {
opacity: 0 !important;
cursor: not-allowed !important;
pointer-events: none;
visibility: hidden !important;
}
.thumbnail-slider .slick-arrow.slick-disabled:hover {
transform: translateY(-50%);
}
.thumbnail-slider.slick-initialized .slick-arrow.slick-disabled {
display: none !important;
}
@media (max-width: 768px) {
.thumbnail-slider {
padding: 0 !important;
transition: none !important;
}
.thumbnail-slider .slick-list {
max-width: 100% !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.thumbnail-slider .slick-slide {
width: 33.333% !important;
padding: 0 4px !important;
margin: 0 !important;
}
.thumbnail-slider .slick-slide:first-child {
padding-left: 0 !important;
}
.thumbnail-slider .slick-slide:last-child {
padding-right: 0 !important;
}
.thumbnail-slider .slick-slide img {
height: 85px;
border-radius: 3px !important;
}
.thumbnail-slider .slick-arrow {
display: none !important;
}
}
@media (max-width: 480px) {
.thumbnail-slider {
padding: 0 !important;
transition: none !important;
}
.thumbnail-slider .slick-list {
max-width: 100% !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.thumbnail-slider .slick-slide {
width: 33.333% !important;
padding: 0 3px !important;
margin: 0 !important;
}
.thumbnail-slider .slick-slide:first-child {
padding-left: 0 !important;
}
.thumbnail-slider .slick-slide:last-child {
padding-right: 0 !important;
}
.thumbnail-slider .slick-slide img {
height: 70px;
border-radius: 3px !important;
}
.thumbnail-slider .slick-arrow {
display: none !important;
}
.pdp-image-gallery {
padding: 15px 10px;
}
}
@media (max-width: 360px) {
.thumbnail-slider {
padding: 0 !important;
transition: none !important;
}
.thumbnail-slider .slick-list {
max-width: 100% !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.thumbnail-slider .slick-slide {
width: 33.333% !important;
padding: 0 !important;
margin: 0 !important;
}
.thumbnail-slider .slick-slide img {
height: 60px;
border-radius: 0 !important;
}
.thumbnail-slider .slick-arrow {
display: none !important;
}
}
.slick-prev,
.slick-next {
z-index: 9;
width: 36px;
height: 36px;
}
.slick-prev {
left: 20px;
}
.slick-next {
right: 20px;
}
.slick-prev:before,
.slick-next:before {
font-size: 36px;
color: black;
}
.main-slider .slick-prev,
.main-slider .slick-next {
display: none !important;
}
.thumbnail-slider .slick-arrow.slick-prev,
.thumbnail-slider .slick-arrow.slick-next,
.thumbnail-slider button.slick-arrow.slick-prev,
.thumbnail-slider button.slick-arrow.slick-next {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.thumbnail-slider .slick-arrow {
display: none !important;
}
.thumbnail-slider .slick-hidden {
display: none !important;
}
.slider-index-wrapper {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.slider-index-wrapper button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: 2px solid transparent;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, border 0.3s, box-shadow 0.3s;
}
.slider-index-wrapper button.active {
background-color: #0056b3;
color: #fff;
border: 2px solid #0056b3;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.slider-index-wrapper button:hover {
background-color: #0056b3;
border: 2px solid #0056b3;
}
#disable-slider {
background-color: #007bff;
color: #ffffff;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s, box-shadow 0.3s;
}
#disable-slider:hover {
background-color: #0056b3;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
#disable-slider:active {
background-color: #003d80;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#disable-slider:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}
.thumbnail-slider {
padding: 0 !important;
margin: 20px auto !important;
max-width: 100% !important;
transition: none !important;
overflow: visible !important;
}
.thumbnail-slider .slick-list {
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
max-width: 100% !important;
width: 100% !important;
}
.thumbnail-slider .slick-track {
display: flex !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
transform: none !important;
transition: none !important;
left: 0 !important;
}
.thumbnail-slider .slick-slide {
width: 33.333% !important;
padding: 0 5px !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
transition: none !important;
box-sizing: border-box !important;
}
.thumbnail-slider .slick-slide:first-child {
padding-left: 0 !important;
}
.thumbnail-slider .slick-slide:last-child {
padding-right: 0 !important;
}
.thumbnail-slider .slick-slide > div {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
}
.thumbnail-slider .slick-slide img {
width: 100% !important;
height: 100px !important;
object-fit: cover !important;
display: block !important;
border: none !important;
border-radius: 4px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
cursor: pointer !important;
}
.thumbnail-slider .slick-slide img:hover {
opacity: 0.9 !important;
transform: none !important;
transition: opacity 0.2s ease !important;
}
.thumbnail-slider .slick-current {
box-shadow: none !important;
border: none !important;
}
.thumbnail-slider .slick-current img {
opacity: 1 !important;
transform: none !important;
border: none !important;
}
.thumbnail-slider .slick-arrow,
.thumbnail-slider .slick-prev,
.thumbnail-slider .slick-next,
.thumbnail-slider button,
.thumbnail-slider button.slick-prev,
.thumbnail-slider button.slick-next {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
@media (max-width: 768px) {
.thumbnail-slider .slick-slide {
padding: 0 4px !important;
}
.thumbnail-slider .slick-slide img {
height: 85px !important;
border-radius: 3px !important;
}
}
@media (max-width: 480px) {
.thumbnail-slider .slick-slide {
padding: 0 3px !important;
}
.thumbnail-slider .slick-slide img {
height: 70px !important;
border-radius: 3px !important;
}
}
@media (max-width: 360px) {
.thumbnail-slider .slick-slide {
padding: 0 2px !important;
}
.thumbnail-slider .slick-slide img {
height: 60px !important;
border-radius: 2px !important;
}
}
/* Room Details Section - Responsive CSS */
.space {
padding: 60px 15px;
}
/* Room Details Row Styling */
.room-details-row {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding: 30px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 2rem;
}
.room-details-row:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
/* Room Info Column */
.room-info-col {
display: flex;
flex-direction: column;
}
.room-header h2 {
font-size: 1rem;
font-weight: 500;
margin-bottom: 8px;
}
h2.class_name {
color: #343131;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.3;
}
.particulars_ {
color: #8e0006;
font-size: 1.1rem;
font-weight: 600;
}
.room-particulars p {
font-size: 0.95rem;
line-height: 1.7;
color: #555;
}
/* Room Stats */
.room-stats {
margin-top: auto;
}
.room-stats h3 {
font-size: 1rem;
font-weight: 600;
}
.room-stats .beds,
.room-stats .price {
color: #8e0006;
font-size: 1rem;
}
.room-stats .beds_no,
.room-stats .price_ {
color: #343131;
font-size: 1.25rem;
font-weight: 700;
}
/* Room Image Column */
.room-image-col {
display: flex;
align-items: stretch;
}
.room-image,
.pdp-main {
width: 100%;
border-radius: 12px;
overflow: hidden;
}
/* Image Gallery Carousel Styling */
.f-carousel,
.pdp-image-gallery {
height: 100%;
min-height: 350px;
}
.f-carousel {
--f-arrow-pos: 10px;
--f-arrow-bg: rgba(255, 255, 255, 0.9);
--f-arrow-hover-bg: rgba(142, 0, 6, 1);
--f-arrow-color: #333;
--f-arrow-hover-color: #fff;
--f-arrow-width: 45px;
--f-arrow-height: 45px;
--f-arrow-svg-width: 22px;
--f-arrow-svg-height: 22px;
--f-arrow-svg-stroke-width: 2px;
--f-arrow-border-radius: 50%;
}
.f-carousel__slide {
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
}
.f-carousel__slide img {
max-width: 100%;
max-height: 100%;
height: auto;
object-fit: cover;
border-radius: 8px;
}
/* Slick Slider (for first room) */
.main-slider {
margin-bottom: 15px;
}
.main-slider img,
.thumbnail-slider img {
width: 100%;
height: auto;
border-radius: 8px;
}
.main-slider .slick-slide {
height: 350px;
}
.main-slider .slick-slide img {
height: 100%;
object-fit: cover;
}
.thumbnail-slider {
display: block !important;
visibility: visible !important;
}
.thumbnail-slider .slick-slide {
padding: 0 5px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.3s;
display: block !important;
visibility: visible !important;
}
.thumbnail-slider .slick-slide:hover,
.thumbnail-slider .slick-current {
opacity: 1;
}
.thumbnail-slider .slick-track {
display: flex !important;
visibility: visible !important;
}
.thumbnail-slider .slick-list {
display: block !important;
visibility: visible !important;
}
/* Responsive Design */
/* Tablet (768px - 991px) */
@media (max-width: 991px) {
.room-details-row {
padding: 25px;
}
h2.class_name {
font-size: 1.5rem;
}
.particulars_ {
font-size: 1rem;
}
.room-particulars p {
font-size: 0.9rem;
}
.room-stats h3 {
font-size: 0.95rem;
}
.room-stats .beds_no,
.room-stats .price_ {
font-size: 1.1rem;
}
.f-carousel,
.pdp-image-gallery {
min-height: 300px;
}
}
/* Mobile (576px - 767px) */
@media (max-width: 767px) {
.space {
padding: 40px 10px;
}
.room-details-row {
padding: 20px;
margin-bottom: 1.5rem;
}
.room-info {
padding: 20px;
}
h2.class_name {
font-size: 1.3rem;
}
.particulars_ {
font-size: 0.95rem;
}
.room-particulars p {
font-size: 0.85rem;
}
.room-stats h3 {
font-size: 0.9rem;
}
.room-stats .beds_no,
.room-stats .price_ {
font-size: 1rem;
}
.f-carousel,
.pdp-image-gallery {
min-height: 250px;
}
.main-slider .slick-slide {
height: 250px;
}
.f-carousel {
--f-arrow-width: 35px;
--f-arrow-height: 35px;
--f-arrow-svg-width: 18px;
--f-arrow-svg-height: 18px;
}
}
/* Small Mobile (< 576px) */
@media (max-width: 575px) {
.space {
padding: 30px 5px;
}
.room-details-row {
padding: 15px;
margin-bottom: 1rem;
border-radius: 12px;
}
.room-info {
padding: 15px;
}
.room-header h2 {
font-size: 0.9rem;
}
h2.class_name {
font-size: 1.2rem;
}
.particulars_ {
font-size: 0.9rem;
}
.room-particulars p {
font-size: 0.8rem;
line-height: 1.5;
}
.room-stats {
margin-top: 15px;
}
.room-stats h3 {
font-size: 0.85rem;
}
.room-stats .beds_no,
.room-stats .price_ {
font-size: 0.95rem;
}
.f-carousel,
.pdp-image-gallery {
min-height: 220px;
}
.main-slider .slick-slide {
height: 220px;
}
.f-carousel {
--f-arrow-width: 30px;
--f-arrow-height: 30px;
--f-arrow-svg-width: 16px;
--f-arrow-svg-height: 16px;
--f-arrow-pos: 5px;
}
.stat-item {
flex-direction: column;
align-items: flex-start !important;
gap: 5px;
}
}
/* Extra Small Devices (< 400px) */
@media (max-width: 399px) {
h2.class_name {
font-size: 1.1rem;
}
.room-details-row:hover {
transform: none;
}
.f-carousel,
.pdp-image-gallery {
min-height: 200px;
}
.main-slider .slick-slide {
height: 200px;
}
}
/* Print Styles */
@media print {
.room-details-row {
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
.f-carousel__slide img {
max-height: 300px;
}
}
/* Thumbnail Slider Dynamic Width Fix */
.thumbnail-slider .slick-slide > div {
margin: 0 5px;
}
/* ===== FULL WIDTH FOR 1 IMAGE ===== */
.thumbnail-slider.slide-count-1 .slick-list {
margin: 0 !important;
padding: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.thumbnail-slider.slide-count-1 .slick-track {
display: flex !important;
width: 100% !important;
transform: none !important;
left: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
.thumbnail-slider.slide-count-1 .slick-slide {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
float: none !important;
}
.thumbnail-slider.slide-count-1 .slick-slide > div {
margin: 0 !important;
padding: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.thumbnail-slider.slide-count-1 .slick-slide img {
width: 100% !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ===== FULL WIDTH FOR 2 IMAGES ===== */
.thumbnail-slider.slide-count-2 .slick-list {
margin: 0 !important;
padding: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.thumbnail-slider.slide-count-2 .slick-track {
display: flex !important;
width: 100% !important;
transform: none !important;
left: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
.thumbnail-slider.slide-count-2 .slick-slide {
width: 50% !important;
max-width: 50% !important;
flex: 0 0 50% !important;
padding: 0 5px !important;
margin: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
float: none !important;
}
.thumbnail-slider.slide-count-2 .slick-slide:first-child {
padding-left: 0 !important;
}
.thumbnail-slider.slide-count-2 .slick-slide:last-child {
padding-right: 0 !important;
}
.thumbnail-slider.slide-count-2 .slick-slide img {
width: 100% !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ===== STANDARD 3+ IMAGES ===== */
.thumbnail-slider .slick-list {
margin: 0 -5px;
}
.thumbnail-slider.slide-count-3 .slick-slide,
.thumbnail-slider:not(.slide-count-1):not(.slide-count-2) .slick-slide {
width: 33.333% !important;
flex: 0 0 33.333% !important;
}
.thumbnail-slider-centered.slide-count-2 .slick-slide {
width:unset !important;
max-width:unset !important;
flex: unset !important;
}
.thumbnail-slider-centered.slide-count-1 .slick-slide {
width:unset !important;
max-width:unset !important;
flex: unset !important;
}
.pdp-image-gallery, .pdp-content {
box-shadow: unset !important;
}
/* ************************End Slider and Fancybox Functionality************************** */
/* ========header location dropdown ================ */
.mobile-header-controls {
display: flex;
align-items: center;
gap: 19px;
}
.mobile-location-dropdown {
position: relative;
display: block;
}
.location-btn {
background: transparent;
border: 2px solid var(--theme-color-highlight, #8e0006);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
color: var(--theme-color-highlight, #8e0006);
font-size: 18px;
position: relative;
z-index: 1001;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
}
.location-btn:hover {
background-color: var(--theme-color-highlight, #8e0006);
color: #fff;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(142, 0, 6, 0.3);
}
.location-btn:active {
transform: scale(0.95);
}
.location-btn i {
transition: transform 0.3s ease;
}
/* .location-btn.active i {
transform: rotate(180deg);
} */
.location-list {
position: absolute;
top: 50px;
right: 0;
background: #fff;
/* width: 180px; */
width: 140px;
list-style: none;
padding: 1px 0;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
z-index: 9999;
margin: 0;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
border: 1px solid rgba(142, 0, 6, 0.1);
visibility: hidden;
pointer-events: none;
}
.location-list.show {
display: block !important;
opacity: 1 !important;
transform: translateY(0) !important;
visibility: visible !important;
pointer-events: auto !important;
}
.location-list::before {
content: "";
position: absolute;
top: -8px;
right: 20px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
}
.location-list li {
padding: 0;
border-bottom: 1px solid rgba(142, 0, 6, 0.08);
margin: 0;
}
.location-list li:last-child {
border-bottom: none;
}
.location-list li a {
text-decoration: none;
color: #333;
font-size: 14px;
display: flex;
align-items: center;
padding: 5px 16px;
transition: all 0.3s ease;
font-weight: 500;
}
.location-list li a i {
margin-right: 10px;
color: var(--theme-color-highlight, #8e0006);
font-size: 14px;
transition: transform 0.3s ease;
}
.location-list li a span {
flex: 1;
}
.location-list li:hover {
background: var(--theme-color, #f7eeee);
}
.location-list li:hover a {
color: var(--theme-color-highlight, #8e0006);
padding-left: 20px;
}
.location-list li:hover a i {
transform: scale(1.2);
}
@media (max-width: 576px) {
.location-btn {
width: 36px;
height: 36px;
font-size: 16px;
}
.location-list {
/* width: 160px; */
width: 140px;
top: 46px;
}
.location-list li a {
font-size: 13px;
padding: 2px 14px;
}
}
@media (max-width: 480px) {
.mobile-header-controls {
gap: 15px;
}
.location-btn {
width: 34px;
height: 34px;
font-size: 15px;
}
.location-list {
/* width: 150px; */
width: 120px;
right: -5px;
}
}
/* Ensure mobile controls are properly aligned */
@media (max-width: 991.98px) {
.header-main6 .row {
align-items: center;
flex-wrap: nowrap;
}
.header-main6 .col-auto:first-child {
flex: 1;
min-width: 0;
overflow: hidden;
}
.header-main6 .header1-logo img {
max-height: 70px;
width: auto;
object-fit: contain;
}
.mobile-header-controls {
flex-shrink: 0;
display: flex;
align-items: center;
}
.vs-menu-toggle {
border: none;
background: transparent;
padding: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme-color-highlight, #8e0006);
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.vs-menu-toggle:hover {
color: var(--theme-color-highlight, #8e0006);
transform: scale(1.1);
}
.vs-menu-toggle i {
transition: transform 0.3s ease;
}
}
@media (max-width: 576px) {
.mobile-header-controls {
gap: 15px;
}
.vs-menu-toggle {
width: 36px;
height: 36px;
font-size: 18px;
}
}
@media (max-width: 480px) {
.vs-menu-toggle {
width: 34px;
height: 34px;
font-size: 16px;
}
.header-main6 .header1-logo img {
max-height: 55px;
width: auto;
object-fit: contain;
}
}
/* ==========Lab test ============ */
.like-btn {
font-size: 14px !important;
font-weight: 500 !important;
}
/* Lab Test Button in Header Top */
.header-top-info.v6 li.lab-test-btn-item {
display: inline-block;
margin-left: 0;
padding-left: 0;
animation: blink 1s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
.header-top-info.v6 li.lab-test-btn-item::before {
display: none !important;
}
.header-top-info.v6 li.lab-test-btn-item .like-btn {
display: inline-block;
white-space: nowrap;
margin-left: 8px;
vertical-align: middle;
padding: 5px 15px !important;
color: #fff;
}
.header-top-info.v6 li.lab-test-btn-item .like-btn:hover {
color: var(--theme-color-highlight);
}
/* Ensure button is visible on all screen sizes when header-top-info is visible */
@media (max-width: 767.98px) {
.header-top-info.v6 li.lab-test-btn-item {
display: inline-block !important;
}
.header-top-info.v6 li.lab-test-btn-item .like-btn {
font-size: 11px !important;
padding: 2px 8px !important;
margin-left: 6px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.header-top-info.v6 li.lab-test-btn-item .like-btn {
font-size: 11px !important;
padding: 2px 10px !important;
}
}