* {
font-family: 'Outfit', sans-serif;
}
.img-section {
position: relative;
background-size: cover;
background-position: center;
border-radius: 8px;
overflow: hidden;
color: white;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 15px;
width: 325px !important;
height: 402px !important;
}
.img-content {
position: absolute;
z-index: 2;
background: hsla(0, 0%, 100%, 0.7);
backdrop-filter: blur(1px);
color: black;
padding: 10px;
border-radius: 8px;
transition: all 0.5s ease-in-out;
overflow: hidden;
height: 90px !important;
width: 310px !important;
bottom: 0;
left: 0;
margin: 20px;
display: none;
transition: opacity 0.3s ease;
}
.img-section:hover .img-content {
height: 400px !important;
background: hsla(0, 0%, 100%, 0.9);
backdrop-filter: blur(3px);
display: flex;
flex-direction: column;
justify-content: top;
transition: all 0.5s ease;
overflow: hidden;
}
.img-section:hover .slider-arrow {
visibility: hidden;
display: none;
}
.slider-arrow {
margin-left: 252px;
margin-bottom: 35px !important;
}
.img-content-text {
visibility: hidden;
}
.img-section:hover .img-content-text {
visibility: visible;
}
.img-section:hover .btn-custom-0 {
padding: 13px 15px;
}
.btn-custom-0 {
background: linear-gradient(to right, #1e9ba7 0%, #1e9ba7 49%, #005e67 100%);
color: #066d77;
border: none;
max-width: 180px;
padding: 13px 25px;
border-radius: 18px;
font-weight: bold;
font-size: small;
margin-top: auto;
display: block;
margin-left: auto;
}
.btn-custom-0:hover {
background-color: #6af06a;
}
.img-content h4 {
font-size: 16px;
margin-top: 5px;
line-height: 1.3;
}
.img-section .category-1 {
position: absolute;
top: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.2);
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
.img-section .category {
position: absolute;
top: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.2);
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
.img-content .article-date {
font-size: 12px;
opacity: 0.8;
}
#img_01 {
width: 230px;
height: 300px;
margin: 10px;
}
.custom-tab {
display: flex;
flex-wrap: wrap;
justify-content: center;
background: white;
padding: 10px 20px;
border-radius: 25px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
gap: 10px;
}
.tab-item {
font-size: 14px;
font-weight: bold;
padding: 10px 15px;
cursor: pointer;
white-space: nowrap;
text-decoration: underline;
}
@media (max-width: 768px) {
.custom-tab {
flex-direction: column;
align-items: center;
}
.tab-item {
display: block;
text-align: center;
width: 100%;
}
}
.custom-section {
background: #dcf9e3;
padding: 50px 0;
}
.custom-text {
font-size: 40px;
font-weight: bold;
}
.custom-select {
width: 200px;
margin-right: 10px;
}
.image-container img {
width: 100%;
border-radius: 10px;
}
#section-2 {
}
.dropdown-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 768px) {
.dropdown-container {
flex-direction: row;
}
}
.custom-dropdown {
position: relative;
width: 320px;
}
.custom-select {
width: 100%;
background-color: #e6f7e6;
border: 1px solid #696969;
border-radius: 15px;
padding: 8px 32px 8px 12px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
text-align: center;
font-size: 16px;
font-weight: 500;
color: whitesmoke;
background: transparent;
cursor: pointer;
}
.custom-select:focus {
outline: none;
box-shadow: none;
border-color: #696969;
}
.custom-select option {
background-color: #fff;
color: #333;
}
.custom-arrow {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: 14px;
color: #333;
}
.swiper {
width: 80%;
padding-top: 30px;
padding-left: 0px !important;
padding-right: 50px;
padding-bottom: 50px;
}
.swiper-slide {
width: 350px !important;
height: 450px !important;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.5s, opacity 0.5s;
}
.swiper-slide img {
width: 100% !important;
height: auto;
border-radius: 10px;
}
.swiper-slide .card {
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}
.text-uppercase {
text-transform: uppercase;
}
.py-5 {
padding: 3rem 0;
}
h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
}
h6 {
font-size: 0.875rem;
color: #666;
margin-bottom: 0.5rem;
}
.card {
border: none;
color: white;
padding: 20px;
border-radius: 10px;
}
.big-card {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 561px;
color: white;
}
.top-right {
background-color: #ece5db;
color: black;
height: 264px;
}
.bottom-right {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
min-height: 281px;
}
.btn-custom {
background: linear-gradient(to right, #1e9ba7 0%, #1e9ba7 49%, #005e67 100%);
color: white;
border: none;
padding: 13px 5px;
border-radius: 18px;
font-weight: bold;
width: 100%;
max-width: 230px;
margin: 0 0 50px auto;
display: block;
}
.btn-custom:hover {
background: linear-gradient(to right, #1e9ba7 0%, #1e9ba7 49%, #005e67 100%);
padding: 13px 5px;
}
.right-section {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
.custom-section {
background: #f8f5f1;
padding: 2rem;
}
.btn-white {
background-color: whitesmoke;
border: 2px solid;
padding: 13px 5px;
border-radius: 18px;
font-weight: bold;
width: 100%;
max-width: 230px;
}
.btn-custom-2 {
background: linear-gradient(to right, rgb(30, 155, 167) 0%, rgb(30, 155, 167) 49%, rgb(0, 94, 103) 100%);
color: rgb(255, 255, 255);
box-shadow: 1px 15px 25px 0px rgba(6, 109, 119, 0.32);
border: none;
max-width: 230px;
padding: 15px 30px;
border-radius: 10px;
font-weight: bold;
display: block;
}
.btn-white:hover {
background: linear-gradient(to right, #1e9ba7 0%, #1e9ba7 49%, #005e67 100%);
box-shadow: 1px 15px 25px 0px rgba(6, 109, 119, 0.32);
}
.image-frame {
display: block;
width: 100%;
max-width: 100%;
height: 100%;
}
.insights-section {
background-color: #066d77;
color: white;
padding: 60px 0;
}
.insights-content {
max-width: 600px;
}
.subscribe-box {
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding: 15px;
display: flex;
align-items: center;
}
.subscribe-box {
display: flex;
align-items: center;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
max-width: 400px;
margin: auto;
}
.subscribe-container {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to right, #b3c1b3, rgba(255, 255, 255, 0.7));
padding: 15px;
border-radius: 20px;
width: 100%;
max-width: 1400px;
left: 50%;
transform: translateX(-50%);
height: 100px;
position: absolute;
bottom: 100px;
}
@media (max-width: 768px) {
.subscribe-container {
flex-direction: column;
height: auto;
padding: 10px;
}
}
.subscribe-text {
flex: 1;
font-size: 18px;
color: #333;
}
.subscribe-box {
display: flex;
align-items: center;
background: white;
border: 1px solid black;
border-radius: 15px;
padding: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 550px;
}
.subscribe-box input {
border: none;
padding: 10px;
flex-grow: 1;
border-radius: 15px;
outline: none;
font-size: 16px;
}
.subscribe-box button {
background: linear-gradient(to right, #1e9ba7 0%, #1e9ba7 49%, #005e67 100%);
border: none;
color: white;
padding: 10px 10px;
border-radius: 15px;
cursor: pointer;
transition: background-color 0.3s ease;
font-size: 16px;
}
.subscribe-box button:hover {
background: linear-gradient(to right, #1e9ba7 0%, #1e9ba7 49%, #005e67 100%);
}
.image-section {
background: url("images/section-5-img-1.jpg") no-repeat center center;
background-size: cover;
min-height: 300px;
overflow: hidden;
}
.position-static {
height: 650px;
position: static;
}
.view-more-button {
background: linear-gradient(135deg, #1ea7a1, #00787b);
color: white;
border-radius: 50px;
padding: 10px 25px;
font-size: 1rem;
font-weight: 500;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
display: inline-flex;
align-items: center;
gap: 10px;
border: none;
}
.view-more-button:hover {
background: linear-gradient(135deg, #1fc1bd, #005e67);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 94, 103, 0.3);
}
.logo-slider-wrapper {
overflow: hidden;
position: relative;
width: 100%;
}
.logo-slider {
display: flex;
animation: scroll-logos 15s linear infinite;
}
.logo-slider:hover {
animation-play-state: paused;
}
@keyframes scroll-logos {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
.logo-slider .logo-slide {
flex: 0 0 auto;
padding: 0 20px;
}
.modal-backdrop.show {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.8);
}
.modal-content {
border-radius: 10px;
padding: 20px !important;
padding-bottom: 60px !important;
}
.modal-content h1 {
font-size: 16px;
color: #212427;
}
.btn-signin {
background: linear-gradient(to right, #1e9ba7 0%, #1e9ba7 49%, #005e67 100%);
border: none;
font-weight: bold;
border-radius: 15px;
}
.btn-signin::after {
content: "\2192";
font-weight: bold;
display: inline-block;
transform: translateX(0);
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 1;
}
.btn-signin:hover::after {
transform: translateX(80px);
opacity: 0;
}
.form-control {
border-radius: 15px;
}
.btn-outline-dark {
border-radius: 15px;
font-weight: bold;
border: none;
outline: 1px solid #212427;
}
.category-1 {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.img-content.show,
.category-1.show {
display: block;
opacity: 1;
}
@media (max-width: 576px) {
.ja {
margin-left: 330px !important;
margin-top: 35px !important;
}
.footer-heading {
font-size: 25px !important;
}
.myLogo {
height: 50px !important;
}
.fs-55 {
font-size: 35px !important;
}
.dropdown-container {
align-items: center;
margin-top: 5px;
}
.swiper {
width: 100%;
}
.swiper-slide {
width: 300px;
height: auto;
}
}
.blog_section_1 {}
.PageLead_title {
font-size: 86px;
}
.subtext {
font-size: 26px;
}
.company-image {
border-radius: 20px;
}
.blog_section_2 {
background-color: rgb(229, 3, 3);
}
.blog-hidden {
display: none;
}
.ModuleHeader-title {
font-size: 44px;
}
.blog-cart-list {
width: 75%;
display: flex;
flex-wrap: wrap;
}
.blog-cart-list .card {
border-radius: 25px;
background-color: #f1eeea;
color: #212427;
width: 365.594px !important;
max-width: 365.594px !important;
height: 365.594px;
}
.blog-card-img-top {
border-radius: 25px 25px 0 0;
width: 100%;
height: 250px;
}
.card-subtitle a {
font-size: 25px;
align-items: center;
color: #212427;
text-decoration: none;
}
#main {
display: flex;
flex-wrap: wrap;
gap: 10px;
height: 200px;
}
#main div {
width: 100%;
flex-basis: 30%;
}
.section_3_mainHeading {
font-size: 55px;
}
.section_3_paragraph {
font-size: 20px;
}
.section_4_paragraph {
font-size: 20px;
}
.section_4_mainHeading {
font-size: 55px;
}
.section_5_mainHeading {
font-size: 55px;
}
.business-card {
width: 450px;
border: 1px solid #dfd7cd !important;
border-radius: 25px;
margin: 20px;
font-family: Arial, sans-serif;
padding: 20px;
box-shadow: none;
}
.doctor-card-image img {
width: 114px;
border-radius: 30px;
}
.business-card-title {
font-size: 22px;
width: 185px;
border-bottom: 1px solid;
margin-bottom: 5px;
}
.business-card-subtitle {
line-height: 1.1;
font-size: 11px;
color: #333;
margin-bottom: 5px;
}
.business-card-location {
font-size: 11px;
color: #696969;
margin-bottom: 0px;
}
.business-card-container {
display: flex;
flex-wrap: wrap;
}
.client-list ul li {
width: 100% !important;
border-bottom: 1px solid #a41f20;
}
.client-list ul li a {
padding: 10px;
color: white;
}
.client-list ul li:hover {
background-color: #be3144;
color: white !important;
}
.client-list ul li:hover a,
.client-list ul li:hover span,
.client-list ul li:hover i {
color: white !important;
}
.client-list ul li:hover i {
color: white !important;
}
.tab-services.active {
background-color: #be3144;
color: white !important;
}
.tab-services.active .service-link,
.tab-services.active .tab-arrow,
.tab-services.active.faq-link .tab-arrow,
.tab-services.active.faq-link span {
color: white !important;
}
.tab-services.active i {
color: white !important;
}
.service-banner {
background: url("../images/sevice-home.jpg");
background-size: cover;
background-position: center;
position: relative;
margin-top: -180px;
height: 100%;
padding-top: 130px
}
@media (max-width: 576px) {
.service-banner {
height: 100%;
margin-top: -80px;
padding-top: 100px;
}
.service-nav {
margin-top: 0px !important;
}
.banner-h1 {
width: 100%;
text-align: center;
}
}
.hospital-card {
width: 390px;
max-width: 450px;
border: none;
border-radius: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.hospital-card .card-img-top {
height: 200px;
object-fit: cover;
background-color: #eee;
}
.hospital-card .card-header {
color: black
}
.hospital-name {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 1rem;
}
.hospital-description {
color: black;
}
.single-service-cart {
border-bottom: 2px solid #a41f20;
background-color: #f4f2f3;
width: 390px !important;
}
.about-modern {
background: linear-gradient(180deg, #f9fbfc 0%, #ffffff 100%);
padding: 110px 0;
}
.about-card {
max-width: 1200px;
margin: auto;
background: #ffffff;
padding: 80px;
position: relative;
border-radius: 28px;
box-shadow: 0 30px 90px rgba(0, 120, 123, 0.15);
overflow: hidden;
}
.about-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: linear-gradient(135deg, #1ea7a1, #00787b);
z-index: 1;
}
.image-col,
.text-col {
position: relative;
z-index: 2;
}
.image-col {
display: flex;
justify-content: center;
}
.image-stack {
position: relative;
width: 420px;
max-width: 100%;
}
.shape {
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px;
z-index: 0;
}
.shape.orange {
background: linear-gradient(135deg, #1ea7a1, #00787b);
top: -18px;
left: 18px;
opacity: 0.85;
}
.shape.blue {
background: linear-gradient(135deg, #e6f7f7, #ffffff);
bottom: -22px;
left: -22px;
}
.image-box {
position: relative;
z-index: 2;
padding: 16px;
background: #ffffff;
border-radius: 22px;
box-shadow:
0 25px 60px rgba(0, 120, 123, 0.35),
inset 0 0 0 2px rgba(30, 167, 161, 0.2);
}
.right-image {
width: 100%;
display: block;
border-radius: 16px;
}
.about-tag {
display: inline-block;
background: linear-gradient(135deg, #1ea7a1, #00787b);
color: #ffffff;
padding: 7px 18px;
font-size: 13px;
letter-spacing: 1px;
border-radius: 20px;
margin-bottom: 22px;
}
.text-col h2 {
font-size: 42px;
font-weight: 800;
color: #0c2f2f;
margin-bottom: 22px;
}
.description {
font-size: 19px;
line-height: 1.75;
color: #5f6f73;
max-width: 520px;
margin-bottom: 38px;
font-family: 'Roboto', sans-serif;
}
.btn-group-custom {
display: flex;
gap: 20px;
}
.btn-white {
padding: 14px 36px;
border-radius: 40px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.6px;
border: 2px solid #1ea7a1;
color: #1ea7a1;
background: transparent;
transition: all 0.35s ease;
}
.btn-white:hover {
background: linear-gradient(135deg, #1ea7a1, #00787b);
color: #ffffff;
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(30, 167, 161, 0.35);
}
.btn-custom-2 {
padding: 14px 36px;
border-radius: 40px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.6px;
color: #ffffff;
background: linear-gradient(135deg, #1ea7a1, #00787b);
border: none;
box-shadow: 0 18px 40px rgba(0, 120, 123, 0.45);
transition: all 0.35s ease;
}
.btn-custom-2:hover {
transform: translateY(-3px);
box-shadow: 0 25px 55px rgba(0, 120, 123, 0.6);
}
.image-stack,
.text-col {
opacity: 0;
transform: translateY(40px);
animation: fadeUp 1s ease forwards;
}
.text-col {
animation-delay: 0.2s;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 991px) {
.about-card {
padding: 45px 28px;
border-radius: 22px;
}
.image-stack {
margin-bottom: 55px;
}
.btn-group-custom {
flex-direction: column;
align-items: flex-start;
}
.text-col h2 {
font-size: 34px;
}
}