/* ============================================================
ELISTER – MERGED & DEDUPLICATED STYLESHEET
Font : Inter (Google Fonts)
Colors: preserved from original theme
============================================================ */
/* ── Required links (replace ALL old font/css link tags) ──
1. Inter font:
2. This merged stylesheet (only one CSS link needed):
Note: Font Awesome is loaded separately in the base template — no change needed there.
─────────────────────────────────────────────────────────────── */
/* ============================================================
1. CSS CUSTOM PROPERTIES (design tokens)
============================================================ */
:root {
/* Brand colours */
--primary: #008eb3;
--primary-dark: #006d8a;
--primary-light: #e6f7fb;
/* Aliases used by older files – kept so HTML classes still work */
--primary-color: #008eb3;
/* Neutrals */
--white: #ffffff;
--light-bg: #f6fbfd;
--light-gray: #f8f9fa;
--border-gray: #e0e0e0;
/* Text */
--text-dark: #1a2332;
--text-gray: #6b7280;
--text-muted: #666;
}
/* ============================================================
2. RESET / BASE
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Apply Inter globally but exclude Font Awesome icon elements */
body,
input, button, select, textarea,
h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, div {
font-family: 'Inter', sans-serif;
}
/* Explicitly protect Font Awesome from font-family overrides */
.fa, .fas, .far, .fal, .fat, .fad, .fab, .fa-solid, .fa-regular,
.fa-light, .fa-thin, .fa-duotone, .fa-brands {
font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}
html,
body {
max-width: 100%;
overflow-x: hidden;
position: relative;
}
body {
color: var(--text-dark);
background-color: #f8fafc;
}
/* ============================================================
3. TYPOGRAPHY HELPERS
============================================================ */
.text-blue-dark { color: #0a488b; }
.text-blue-light { color: #459fff; }
.text-blue { color: #6fa9e7; }
.text-blue-medium { color: #2a90b8; }
.text-primary-custom { color: var(--primary); }
/* ============================================================
4. NAVIGATION
============================================================ */
.navbar {
width: 100%;
overflow: hidden;
transition: background 0.3s ease;
}
.navbar-brand img {
height: 40px;
}
.nav-link {
color: white !important;
font-weight: 500;
margin: 0 10px;
}
.nav-link:hover {
color: #efefef !important;
font-weight: 500;
margin: 0 10px;
text-decoration: underline;
}
@media (max-width: 767.98px) {
.navbar-nav {
background-color: rgba(0, 142, 179, 0.95);
border-radius: 10px;
padding: 20px;
}
}
/* ============================================================
5. BUTTONS
============================================================ */
/* Primary filled button */
.btn-custom {
padding: 0.85rem 2rem;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s;
background: var(--primary);
color: white;
border: none;
}
.btn-custom:hover {
background: #0077a3;
color: white;
transform: translateY(-2px);
}
/* Outline "view more" button */
.btn-view-more {
padding: 0.85rem 2rem;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s;
border: 1px solid var(--primary);
color: var(--primary);
background: none;
}
.btn-view-more:hover {
background-color: var(--primary);
color: white;
}
/* White-outline button (used on dark backgrounds) */
.btn-line {
padding: 0.85rem 2rem;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s;
border: 1px solid #ffffff;
color: #ffffff;
background: none;
}
.btn-line:hover {
background-color: var(--primary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
color: white;
}
/* Appointment button */
.btn-appointment {
background-color: #126084;
color: white;
border: none;
padding: 15px 30px;
border-radius: 10px;
font-weight: 600;
font-size: 1.1rem;
transition: 0.3s ease;
}
.btn-appointment:hover {
background-color: #0b4561;
transform: scale(1.05);
}
/* Light CTA button (for dark-bg sections) */
.btn-light-custom {
background: white;
color: var(--primary-color);
padding: 15px 40px;
border-radius: 5px;
font-weight: 600;
border: none;
transition: all 0.3s;
text-decoration: none;
display: inline-block;
}
.btn-light-custom:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
color: var(--primary-color);
}
/* CTA pill buttons */
.btn-cta {
padding: 0.9rem 2.5rem;
border-radius: 30px;
border: none;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.btn-cta-light {
background: white;
color: var(--primary);
}
.btn-cta-light:hover {
background: #f0f0f0;
transform: translateY(-3px);
}
.btn-cta-outline {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-cta-outline:hover {
background: white;
color: var(--primary);
transform: translateY(-3px);
}
/* Primary action button (doctor detail page) */
.btn-action {
padding: 0.85rem 2rem;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary-action {
background: var(--primary);
color: white;
border: none;
}
.btn-primary-action:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 142, 179, 0.3);
}
.btn-secondary-action {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-secondary-action:hover {
background: var(--primary);
color: white;
}
/* Primary custom (doctor list) */
.btn-primary-custom {
background-color: var(--primary);
color: #fff;
border: none;
transition: all 0.3s ease;
}
.btn-primary-custom:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 142, 179, 0.3);
}
.btn-outline-primary-custom {
border: 2px solid var(--primary);
color: var(--primary);
background: transparent;
transition: all 0.3s ease;
}
.btn-outline-primary-custom:hover {
background: var(--primary);
color: white;
}
/* Read / details link button */
.read-btn {
display: inline-block;
padding: 8px 18px;
border: 1px solid #0E204D;
border-radius: 25px;
text-decoration: none;
color: #0E204D;
font-size: 14px;
transition: 0.3s;
}
.read-btn:hover {
background: #0E204D;
color: #fff;
}
.btn-details {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.btn-details:hover {
color: var(--primary-color);
text-decoration: none;
transform: translateX(5px);
}
/* Submit button (contact form) */
.btn-submit {
background: var(--primary-color);
color: #fff;
border: none;
padding: 12px;
border-radius: 6px;
font-weight: 500;
font-size: 14px;
transition: 0.2s ease;
cursor: pointer;
width: 100%;
}
.btn-submit:hover {
background: var(--primary-dark);
box-shadow: none;
}
/* Booking button */
.btn-book {
background: var(--primary);
color: white;
padding: 12px;
border-radius: 10px;
font-weight: 600;
border: none;
transition: 0.3s;
}
.btn-book:hover {
background: var(--primary-dark);
}
/* Filter buttons (doctor list) */
.filter-btn {
padding: 0.65rem 1.25rem;
border-radius: 8px;
border: 1px solid #e5e7eb;
background: white;
color: var(--text-gray);
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
font-weight: 500;
}
.filter-btn:hover,
.filter-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
/* Location buttons */
.location-btn {
padding: 0.65rem 1.5rem;
border-radius: 25px;
border: none;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
font-size: 0.95rem;
}
/* ============================================================
6. LAYOUT HELPERS
============================================================ */
.section-padding { padding: 80px 0; }
.rounded-corner { border-radius: 50px 0 50px 0; }
.img-grid img {
border-radius: 15px;
width: 100%;
object-fit: cover;
}
/* Responsive visibility helpers */
.desktop-hide-element { display: none; }
@media (max-width: 767px) {
.mobile-hide-bg {
background-image: none !important;
min-height: auto !important;
}
.mobile-hide-element { display: none; }
.desktop-hide-element { display: block !important; }
}
/* ============================================================
7. SCROLL / REVEAL ANIMATIONS
============================================================ */
.reveal {
opacity: 0;
filter: blur(5px);
transition: all 0.8s ease-out;
}
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal.active {
opacity: 1;
filter: blur(0);
transform: translateX(0) translateY(0);
}
.rock-item { transition: all 0.8s ease; }
@keyframes rock-shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.rock-item.active {
animation: rock-shake 0.5s ease-in-out 1;
}
@keyframes fadeInUp {
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
8. HERO / BANNER SECTIONS
============================================================ */
/* Home carousel hero */
.hero {
background: url('../images/siteimages/Background\ image.jpg') center / cover;
height: 90vh;
display: flex;
align-items: center;
color: white;
position: relative;
}
#heroCarousel h1 {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
}
#heroCarousel .carousel-item {
min-height: 90vh;
position: relative;
}
#heroCarousel .carousel-item .container {
z-index: 2;
position: relative;
}
.hero-banner-img {
object-fit: cover;
object-position: center center;
}
@media (max-width: 767px) {
.hero-banner-img {
object-position: 70% center;
}
#heroCarousel h1 {
font-size: 1.8rem;
}
#heroCarousel .lead {
font-size: 0.9rem;
}
}
/* Shared "banner with overlay image" - img-pop */
.img-pop-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
z-index: 2;
}
@media (max-width: 768px) {
.img-pop-content {
background: linear-gradient(to bottom, #08c5d7, #a6edf2);
}
.img-pop-content h1 {
font-size: 1.5rem;
text-align: center;
margin-bottom: 20px;
}
.img-pop-content .text-md-end {
text-align: center !important;
}
}
/* Specialisation listing hero */
.hero-section {
background: linear-gradient(#008eb359, #008eb378), url('../images/specialisation/department.jpg') no-repeat;
color: var(--white);
padding: 169px 0 100px;
position: relative;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
}
.hero-content h1 {
font-size: 3.5rem;
font-weight: bold;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.hero-content p {
font-size: 1.25rem;
opacity: 0.9;
margin: 0;
}
/* Dept / specialisation-detail hero */
.dept-hero {
background: linear-gradient(#008eb359, #008eb378), url('../images/specialisation/dermatology-banner.png') no-repeat;
background-size: cover;
background-position: center;
height: 400px;
display: flex;
align-items: center;
color: white;
}
/* About page hero */
.about-hero {
background: linear-gradient(rgba(0, 143, 179, 0.644), rgba(0, 108, 138, 0.578));
background-size: cover;
background-position: center;
padding: 150px 0 100px;
color: white;
}
.about-hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
}
/* Contact page hero */
.contact-hero {
background: linear-gradient(rgba(0, 143, 179, 0.525), rgba(0, 108, 138, 0.284)), url('../images/contact-banner.jpg');
background-size: cover;
background-position: center;
padding: 150px 0 100px;
color: white;
}
.contact-hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
}
/* Blog listing page header */
.page-header {
background: linear-gradient(rgb(0 142 179 / 59%), rgb(0 109 138 / 75%)), url('../images/blog/banner.png') center / cover;
padding: 178px 0 80px;
color: white;
text-align: center;
}
.page-header h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
}
.page-header p {
font-size: 1.2rem;
opacity: 0.95;
max-width: 600px;
margin: 0 auto;
}
/* Doctor list page header */
.page-header.doctor-list {
background: linear-gradient(135deg, #008eb3 0%, #006d8a 100%);
padding: 141px 0 111px;
position: relative;
overflow: hidden;
}
.page-header.doctor-list::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 40%;
height: 100%;
background: url('https://images.pexels.com/photos/4021775/pexels-photo-4021775.jpeg?auto=compress&cs=tinysrgb&w=1200') center/cover;
opacity: 0.15;
}
/* Blog detail hero */
.blog-hero {
position: relative;
height: 450px;
background: linear-gradient(rgba(0, 0, 0, 0.79), rgba(0, 0, 0, 0.823)),
url("https://images.pexels.com/photos/7088530/pexels-photo-7088530.jpeg") center / cover;
display: flex;
align-items: center;
color: white;
margin-bottom: 3rem;
}
.blog-hero-content {
position: relative;
z-index: 1;
}
.blog-hero-content h1 { font-weight: 700; }
.blog-hero h1 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 1rem;
line-height: 1.3;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Appointment header */
.appointment-header {
background-size: contain;
padding: 60px 0 40px;
margin-top: 80px;
}
.appointment-header .doctor-img {
width: 100%;
max-width: 320px;
height: 320px;
object-fit: cover;
border-radius: 16px;
}
.appoinment-header-content:before {
background-image: url('../assets/images/specialisation/icon-bg-1.png');
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
}
@media (max-width: 768px) {
.hero-section { padding: 100px 0 50px; }
.hero-content h1 { font-size: 2.5rem; }
.hero-content p { font-size: 1rem; }
}
@media (max-width: 991.98px) {
.hero {
height: auto;
padding: 120px 0 60px;
text-align: center;
}
#heroCarousel h1 { font-size: 2.2rem; }
}
@media (max-width: 767.98px) {
.about-hero h1 { font-size: 2rem; }
.contact-hero h1 { font-size: 2rem; }
.img-pop-content {
position: relative !important;
top: 0 !important;
left: 0 !important;
transform: none !important;
background: #126084;
padding: 30px 0;
}
.img-pop-content .row { padding-top: 0 !important; }
.img-pop {
height: 200px;
object-fit: cover;
}
.btn-appointment {
margin-top: 20px;
width: 100%;
}
}
@media (max-width: 992px) {
.page-header h1 { font-size: 2.2rem; }
.blog-hero-content h1 { text-align: center; }
.blog-meta { justify-content: center; }
}
@media (max-width: 768px) {
.page-header h1 { font-size: 1.8rem; }
.page-header p { font-size: 1rem; }
}
/* ============================================================
9. BREADCRUMB
============================================================ */
.breadcrumb-custom {
background: transparent;
padding: 0;
margin: 0;
}
.breadcrumb-custom a {
color: white;
text-decoration: none;
}
.breadcrumb-custom .active {
color: rgba(255, 255, 255, 0.8);
}
.breadcrumb-section {
background: var(--white);
padding: 1.5rem 0;
border-bottom: 1px solid var(--border-gray);
}
/* Blog detail breadcrumb sits below fixed navbar */
.breadcrumb-section.blog-detail {
border-bottom: none;
margin-top: 5.5rem;
}
.breadcrumb { margin: 0; }
.breadcrumb-item a {
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
}
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: #0c447c; }
/* ============================================================
10. SECTION TITLES
─────────────────────────────────────────────────────────────
Two supported usage patterns:
A) h2 used directly as .section-title → eyebrow/label style
Our Doctors
B) div wrapper containing an h2 → large centred heading
Our Specialisations
============================================================ */
/* ── A: eyebrow label (h2.section-title or any tag) ───────── */
h2.section-title,
h3.section-title,
h4.section-title,
p.section-title,
span.section-title {
display: inline-block;
font-size: 2.3rem;
font-weight: 600;
text-transform: capitalize;
color: var(--primary-color);
border-radius: 30px;
line-height: 1.4;
}
/* ── B: div/section wrapper ──────────────────────────────── */
div.section-title,
section.section-title {
text-align: center;
margin-top: 2rem;
margin-bottom: 2rem;
position: relative;
}
/* The h2 inside a wrapper div gets the large heading style */
div.section-title h2,
section.section-title h2 {
font-size: 2.4rem;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 0.5rem;
line-height: 1.25;
}
/* Decorative underline bar beneath wrapper heading */
div.section-title::after,
section.section-title::after {
content: '';
display: block;
width: 52px;
height: 4px;
background: var(--primary-color);
border-radius: 2px;
margin: 12px auto 0;
}
/* ── Shared sibling subtitle ──────────────────────────────── */
.section-subtitle {
color: var(--text-gray);
font-size: 1.05rem;
line-height: 1.7;
max-width: 560px;
margin: 0 auto 2.5rem;
text-align: center;
}
/* ── section-heading (standalone large title, no wrapper) ─── */
.section-heading {
font-size: 2.4rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1rem;
line-height: 1.25;
}
/* ── subsection-title ─────────────────────────────────────── */
.subsection-title {
font-size: 1.35rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1.5rem;
}
@media (max-width: 767.98px) {
div.section-title h2,
section.section-title h2,
.section-heading { font-size: 1.8rem; }
.section-subtitle { font-size: 0.95rem; }
}
@media (max-width: 767.98px) {
.section-heading { font-size: 1.8rem; }
}
/* ============================================================
11. SERVICE CARDS
============================================================ */
/* Home overlap strip */
.services-overlap {
margin-top: -80px;
position: relative;
z-index: 10;
}
@media (max-width: 767.98px) {
.services-overlap { margin-top: -30px; }
}
/* Generic service card (home + specialisation detail) */
.service-card {
background: white;
border-radius: 15px;
overflow: hidden;
width: 100%;
max-width: 280px;
height: 100%;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
font-size: 16px;
}
.service-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.service-card h5 {
font-weight: 600;
margin-bottom: 10px;
}
.service-card p {
font-size: 14px;
color: #6c757d;
}
.service-card .card-body { padding: 20px; }
.service-card .service-icon i {
font-size: 22px;
color: var(--primary-color);
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.4s ease;
}
.service-card:hover .card-img { transform: scale(1.05); }
/* Service icon circle */
.service-icon {
width: 60px;
height: 60px;
background: rgba(0, 142, 179, 0.1);
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 22px;
margin: auto;
margin-bottom: 15px;
}
/* Home-page large icon variant */
.service-card i {
font-size: 3rem;
color: #007bff;
margin-bottom: 15px;
}
/* Dark-overlay services section (specialisation page) */
.services-section {
position: relative;
padding: 80px 0;
background: url('/static/assets/images/bg.jpg') center/cover no-repeat;
}
.services-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 90, 120, 0.9), rgba(0, 120, 160, 0.9));
}
.services-section .container {
position: relative;
z-index: 1;
}
@media (max-width: 767.98px) {
.service-card {
margin-bottom: 15px;
padding: 20px;
max-width: 100%;
}
.service-card h5 { font-size: 1rem; }
}
/* ============================================================
12. DOCTOR CAROUSEL (home page)
============================================================ */
.doctor-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
height: 100%;
}
.doctor-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
/* Home carousel large card variant */
.doctor-card.carousel-card {
border-radius: 40px;
max-width: 900px;
border: none;
}
.doctor-img-container {
position: relative;
display: inline-block;
background: linear-gradient(135deg, #00bcd4 50%, #0097a7 50%);
border-radius: 100px 0 0 100px;
padding-left: 50px;
}
.doctor-img {
width: 100%;
height: 260px;
object-fit: cover;
}
.carousel-control-icon {
background-color: #87b8cf;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.carousel-control-prev,
.carousel-control-next {
width: 5%;
opacity: 1;
}
@media (max-width: 768px) {
.doctor-img-container {
border-radius: 0;
padding-left: 0;
width: 100%;
text-align: center;
}
.doctor-img { height: 250px; }
}
@media (max-width: 767.98px) {
.doctor-card.carousel-card { border-radius: 20px !important; }
.doctor-card .row.g-0 { flex-direction: column-reverse; }
.doctor-card .col-md-6 { width: 100%; }
.doctor-card .text-end { text-align: center !important; }
.doctor-card .text-end div {
border-radius: 20px 20px 0 0 !important;
padding-left: 0 !important;
width: 100%;
}
.doctor-img { height: 250px !important; }
.carousel-control-prev,
.carousel-control-next { width: 10%; }
}
/* ============================================================
13. DOCTOR LIST PAGE
============================================================ */
.search-filter-section {
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding: 2rem;
margin-top: -40px;
position: relative;
z-index: 10;
}
.doctor-image-wrapper {
position: relative;
overflow: hidden;
height: 320px;
background: var(--primary-light);
}
.doctor-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.doctor-card:hover .doctor-image { transform: scale(1.05); }
.doctor-badge {
position: absolute;
top: 16px;
right: 16px;
background: rgba(255, 255, 255, 0.95);
padding: 6px 16px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
color: var(--primary);
backdrop-filter: blur(10px);
}
.doctor-info {
padding: 1.75rem;
}
.doctor-info a {
text-decoration: none;
cursor: pointer;
}
.doctor-name {
font-size: 1.35rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.doctor-specialty,
.doctor-speciality {
color: var(--primary);
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 0.75rem;
}
.doctor-credentials {
font-size: 0.875rem;
color: var(--text-gray);
margin-bottom: 1rem;
line-height: 1.6;
}
.doctor-stats {
display: flex;
gap: 1.5rem;
margin: 1.25rem 0;
padding: 1rem 0;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
.stat-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--text-gray);
}
.stat-item i {
color: var(--primary);
font-size: 1.1rem;
}
.expertise-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.tag {
background: var(--primary-light);
color: var(--primary);
padding: 0.35rem 0.875rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease;
}
.tag:hover {
background: var(--primary-color);
color: white;
}
.action-buttons {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.action-buttons button a {
text-decoration: none;
color: inherit;
}
/* Stats banner strip */
.stats-banner {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 16px;
padding: 3rem;
margin: 4rem 0;
}
.bg-primary-custom {
background: linear-gradient(135deg, #008eb3 0%, #006d8a 100%);
}
/* ============================================================
14. DOCTOR DETAIL PAGE
============================================================ */
.doctor-hero-image {
border-radius: 20px;
object-fit: cover;
height: 500px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.doctor-hero-content h1 {
font-size: 2.8rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.info-badges {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}
.info-badge {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--primary-light);
padding: 0.75rem 1.25rem;
border-radius: 30px;
font-weight: 500;
color: var(--primary);
font-size: 0.95rem;
}
.info-badge i { font-size: 1.1rem; }
.doctor-bio {
font-size: 1rem;
line-height: 1.8;
color: var(--text-gray);
margin-bottom: 2rem;
}
/* Qualification / education */
.content-section { padding: 60px 0; }
.section-bg-light { background: white; }
.section-bg-gradient { background: var(--light-bg); }
.qualification-item {
padding: 1.5rem;
background: white;
border-left: 4px solid var(--primary);
border-radius: 8px;
margin-bottom: 1.5rem;
transition: all 0.3s;
}
.qualification-item:hover {
transform: translateX(8px);
box-shadow: 0 4px 16px rgba(0, 142, 179, 0.15);
}
.qualification-label {
font-size: 0.85rem;
color: var(--primary);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.5rem;
}
.qualification-text {
font-size: 1rem;
color: var(--text-dark);
font-weight: 600;
}
.qualification-detail {
font-size: 0.9rem;
color: var(--text-gray);
margin-top: 0.5rem;
}
/* Expertise tags (detail page) */
.expertise-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}
.expertise-tag {
background: white;
color: var(--primary);
border: 2px solid var(--primary);
padding: 0.6rem 1.25rem;
border-radius: 25px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s;
cursor: default;
}
.expertise-tag:hover {
background: var(--primary);
color: white;
transform: translateY(-3px);
}
/* Stats grid (detail page) */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.stat-card {
text-align: center;
padding: 2rem;
background: white;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
}
.stat-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 32px rgba(0, 142, 179, 0.15);
}
/* Location card */
.location-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.location-image {
width: 100%;
height: 300px;
object-fit: cover;
}
.location-details { padding: 2rem; }
.location-name {
font-size: 1.35rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.location-address {
color: var(--text-gray);
margin-bottom: 1.5rem;
line-height: 1.8;
}
.location-info { margin-bottom: 1.5rem; }
.location-info-item {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
color: var(--text-gray);
}
.location-info-item i {
color: var(--primary);
font-size: 1.2rem;
min-width: 25px;
}
.location-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Testimonials (doctor detail) */
.testimonial-section {
background-image: url('../assets/images/specialisation/icon-bg-1.png');
background-repeat: no-repeat;
background-position: top right;
background-size: 420px;
}
.testimonial-card {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
}
.testimonial-card:hover {
box-shadow: 0 8px 24px rgba(0, 142, 179, 0.15);
}
.testimonial-rating {
color: #ffc107;
font-size: 1rem;
margin-bottom: 1rem;
letter-spacing: 2px;
}
.testimonial-text {
font-size: 0.95rem;
color: var(--text-gray);
line-height: 1.8;
margin-bottom: 1.5rem;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}
.testimonial-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--primary-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-weight: 700;
font-size: 0.9rem;
}
.testimonial-author-info { flex: 1; }
.testimonial-author-name {
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.25rem;
}
.testimonial-author-role {
font-size: 0.85rem;
color: var(--text-gray);
}
@media (max-width: 992px) {
.doctor-hero-image { width: 100%; }
}
/* ============================================================
15. APPOINTMENT PAGE
============================================================ */
.booking-card {
background: white;
border-radius: 16px;
padding: 35px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}
/* Date buttons */
.date-btn {
border: 1px solid #e5e7eb;
padding: 12px 20px;
border-radius: 12px;
background: white;
color: var(--text-dark);
transition: 0.3s;
}
.date-btn:hover {
background: var(--primary-light);
border-color: var(--primary);
color: var(--primary);
}
.date-btn.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
/* Time slots */
.time-slot {
padding: 10px 18px;
border: 1px solid #e5e7eb;
border-radius: 10px;
cursor: pointer;
transition: 0.3s;
margin: 6px;
display: inline-block;
color: var(--text-dark);
}
.time-slot:hover {
background: var(--primary-light);
border-color: var(--primary);
color: var(--primary);
}
.time-slot.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
/* Form controls */
.form-select {
border-radius: 10px;
border: 1px solid #e5e7eb;
}
.form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-light);
}
.form-control {
border-radius: 10px;
padding: 12px;
border: 1px solid #e5e7eb;
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-light);
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
/* Instruction box */
.instruction-box {
background: var(--primary-light);
border-radius: 14px;
padding: 18px 20px;
border-left: 5px solid var(--primary);
}
.instruction-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.instruction-header i {
color: var(--primary);
font-size: 18px;
}
.instruction-header h6 {
font-weight: 600;
color: var(--text-dark);
margin: 0;
}
.instruction-box ul {
padding-left: 20px;
margin: 0;
}
.instruction-box li {
color: var(--text-gray);
font-size: 14px;
margin-bottom: 6px;
}
.text-muted { color: var(--text-gray) !important; }
/* ============================================================
16. STATS NUMBERS (shared)
============================================================ */
.stat-box {
text-align: center;
padding: 30px;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.5rem;
line-height: 1;
}
.stat-label {
font-size: 0.95rem;
color: var(--text-gray);
font-weight: 500;
opacity: 0.9;
}
@media (max-width: 767.98px) {
.stat-number { font-size: 2rem; }
}
/* ============================================================
17. BLUE INFO SECTION (home)
============================================================ */
.blue-section {
background-color: #0056b3;
color: white;
padding: 100px 0;
}
.feature-icon-box {
border-radius: 10px;
padding: 20px 5px;
margin-bottom: 20px;
transition: 0.3s;
}
.feature-icon-box:hover {
border: 1px solid rgb(255, 255, 255);
}
@media (max-width: 991.98px) {
.blue-section {
padding: 40px 0;
text-align: center !important;
}
.blue-section .col.text-start {
text-align: center !important;
margin-bottom: 20px;
}
}
/* ============================================================
18. WHY CHOOSE US SECTION
============================================================ */
.why-choose-section {
min-height: 600px;
background: linear-gradient(135deg, #00acc1 0%, #0097a7 100%) !important;
}
.why-choose-section-img {
position: absolute;
top: 100px;
left: 960px;
width: 200px;
height: auto;
transform: rotate(20deg);
transition: transform 0.4s ease-in-out;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.bg-shape-overlay {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
z-index: 1;
}
.feature-rows .row { transition: background 0.3s ease; }
.feature-rows .row:hover { background: rgba(255, 255, 255, 0.05); }
.feature-rows i {
width: 60px;
text-align: center;
}
.rotate-img {
transform: rotate(-5deg);
border: 8px solid rgba(255, 255, 255, 0.2);
transition: transform 0.5s ease;
}
.rotate-img:hover { transform: rotate(0deg) scale(1.05); }
.doctor-highlight-box {
position: relative;
display: inline-block;
}
@media (max-width: 991px) {
.bg-shape-overlay { display: none; }
}
@media (max-width: 991.98px) {
.why-choose-section { text-align: center; }
.why-choose-section-img { display: none; }
.feature-rows .row { text-align: center; }
.feature-rows i {
margin-bottom: 10px;
display: block;
width: 100%;
}
.feature-rows .col-4,
.feature-rows .col-1,
.feature-rows .col-3 {
width: 100% !important;
margin-bottom: 15px;
}
.feature-rows .text-start,
.feature-rows .text-end { text-align: center !important; }
}
/* ============================================================
19. FEATURE BOX (about / why-choose shared)
============================================================ */
.feature-box {
display: flex;
align-items: start;
margin-bottom: 30px;
}
.feature-icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
flex-shrink: 0;
}
.feature-icon i {
font-size: 1.5rem;
color: white;
}
.feature-text h5 {
font-weight: 700;
margin-bottom: 10px;
color: var(--text-dark);
}
.feature-text p {
color: var(--text-muted);
margin: 0;
}
/* ============================================================
20. CTA SECTION (shared across pages)
============================================================ */
.cta-section {
background: var(--primary-color);
background: linear-gradient(135deg, #008eb3 0%, #006d8a 100%), url('../images/siteimages/Section\ 2\ Background.jpg') no-repeat;
color: white;
padding: 60px 40px;
text-align: center;
background-size: 100% 100%;
}
.cta-section h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
}
.cta-section p {
font-size: 1.1rem;
margin-bottom: 30px;
opacity: 0.95;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* Doctor-detail CTA is a floating card */
.cta-section.card-style {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-radius: 20px;
margin: 80px 0;
padding: 80px 0;
}
.cta-title {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 1rem;
}
.cta-text {
font-size: 1.1rem;
margin-bottom: 2rem;
opacity: 0.95;
}
.cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 991.98px) {
.cta-section {
background: var(--primary-color);
background: linear-gradient(#008fb3a6, #008fb3be);
background-size: cover;
}
}
/* ============================================================
21. SPECIALISATION CARDS
============================================================ */
.special-card {
background: var(--white);
border: none;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
height: 100%;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease forwards;
}
.special-card:nth-child(1) { animation-delay: 0.1s; }
.special-card:nth-child(2) { animation-delay: 0.2s; }
.special-card:nth-child(3) { animation-delay: 0.3s; }
.special-card:nth-child(4) { animation-delay: 0.4s; }
.special-card:nth-child(5) { animation-delay: 0.5s; }
.special-card:nth-child(6) { animation-delay: 0.6s; }
.special-card:nth-child(7) { animation-delay: 0.7s; }
.special-card:nth-child(8) { animation-delay: 0.8s; }
.special-card:hover {
transform: translateY(-15px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.card-image-wrapper {
position: relative;
height: 220px;
overflow: hidden;
background: #f0f0f0;
}
.card-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.special-card:hover .card-image-wrapper img { transform: scale(1.1); }
.card-icon {
position: absolute;
top: 15px;
right: 15px;
width: 50px;
height: 50px;
background: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
color: var(--primary-color);
font-size: 1.5rem;
z-index: 2;
transition: all 0.3s ease;
}
.special-card:hover .card-icon { transform: scale(1.15); }
.card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 142, 179, 0.9), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.special-card:hover .card-overlay { opacity: 1; }
.card-body { padding: 1.5rem; }
.card-body h5 {
font-size: 1.25rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0.75rem;
transition: all 0.3s ease;
}
.card-body p {
font-size: 0.9rem;
color: #666;
line-height: 1.6;
margin-bottom: 1rem;
}
/* ============================================================
22. SPECIALISATION DETAIL – ABOUT & INFO BOX
============================================================ */
.about-section {
background: linear-gradient(#008fb31b, #008fb324), url('../images/siteimages/Section\ 2\ Background.jpg') no-repeat;
}
.about-section .section-title { color: #000000; }
@media (max-width: 991.98px) {
.about-section {
background: linear-gradient(#008fb31b, #008fb324);
background-size: cover;
}
}
.section-img {
width: 100%;
height: 380px;
object-fit: cover;
border-radius: 15px;
}
.info-box {
background: #f8f9fa;
border-radius: 15px;
padding: 30px;
}
.design-shape-section {
background: #f5f5f5;
overflow: hidden;
}
.design-shape-img {
max-height: 200px;
object-fit: cover;
}
/* ============================================================
23. ABOUT PAGE
============================================================ */
.about-content {
/* background: white;*/
border-radius: 20px;
padding: 40px;
/*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);*/
}
.about-content h6,
.mission-content h6 {
color: var(--primary-color);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.about-content h2,
.mission-content h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 30px;
}
.about-content p { margin-bottom: 30px; }
.about-image {
border-radius: 20px;
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* Stats bar */
.stats-section {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white;
}
/* Mission / Vision / Values cards */
.mvv-card {
background: white;
border-radius: 20px;
padding: 40px;
height: 100%;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
border-top: 4px solid var(--primary-color);
}
.mvv-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 15px;
}
.mvv-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.mvv-icon {
width: 70px;
height: 70px;
background: var(--light-bg);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.mvv-icon i {
font-size: 2rem;
color: var(--primary-color);
}
.mvv-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 15px;
}
/* Timeline */
.timeline-section { background: var(--light-bg); }
.timeline-item {
position: relative;
padding-left: 50px;
padding-bottom: 40px;
}
.timeline-item:before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: var(--primary-color);
}
.timeline-item:last-child:before { display: none; }
.timeline-dot {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
}
.timeline-year {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 10px;
}
/* Team cards */
.team-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
}
.team-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.team-img {
width: 100%;
height: 300px;
object-fit: cover;
}
.team-content {
padding: 25px;
text-align: center;
}
.team-name {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 5px;
}
.team-position {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 15px;
}
/* ============================================================
24. CONTACT PAGE
============================================================ */
.contact-info-card {
background: white;
border-radius: 20px;
padding: 40px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
height: 100%;
}
.contact-info-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.contact-icon {
width: 80px;
height: 80px;
background: var(--light-bg);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.contact-icon i {
font-size: 2.5rem;
color: var(--primary-color);
}
.contact-info-card h4 {
font-weight: 700;
margin-bottom: 15px;
color: var(--text-dark);
}
.contact-info-card p {
color: var(--text-muted);
margin: 0;
}
.form-section {
background: #f8f9fa;
padding: 80px 0;
}
.contact-form-wrapper {
background: #ffffff;
border-radius: 8px;
padding: 35px;
border: 1px solid #eee;
}
.form-label {
font-weight: 500;
color: #333;
margin-bottom: 6px;
font-size: 14px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.success-message,
.error-message {
padding: 12px;
border-radius: 6px;
margin-bottom: 15px;
display: none;
font-size: 14px;
}
.map-section {
border-radius: 8px;
overflow: hidden;
height: 450px;
}
.map-container {
width: 100%;
height: 100%;
}
.hours-section { background: var(--light-bg); }
.hours-card {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.hours-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 30px;
display: flex;
align-items: center;
}
.hours-title i {
color: var(--primary-color);
margin-right: 15px;
font-size: 2rem;
}
.hours-item {
display: flex;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid var(--border-gray);
}
.hours-item:last-child { border-bottom: none; }
.hours-day {
font-weight: 600;
color: var(--text-dark);
}
.hours-time {
color: var(--primary-color);
font-weight: 600;
}
@media (max-width: 767.98px) {
.contact-form-wrapper { padding: 30px; }
.form-row { grid-template-columns: 1fr; }
.map-section { height: 300px; }
.ps-lg-5 { padding-left: 0 !important; }
}
@media (max-width: 991px) {
.footer-section { text-align: center; }
.contact-info p { justify-content: center; }
.ps-lg-5 { padding-left: 0 !important; }
}
/* ============================================================
25. BLOG LIST PAGE
============================================================ */
.blog-section { padding: 60px 0; }
.blog-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
cursor: pointer;
}
.blog-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0, 142, 179, 0.2);
}
.blog-card-image {
position: relative;
overflow: hidden;
height: 250px;
}
.blog-card-image img,
.blog-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-image img,
.blog-card:hover .blog-img-wrapper img { transform: scale(1.1); }
/* Old home-page blog card image wrapper (kept for compat.) */
.blog-img-wrapper {
overflow: hidden;
height: 250px;
}
.blog-category {
position: absolute;
top: 15px;
left: 15px;
background: var(--primary-color);
color: white;
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.blog-card-body {
padding: 1.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.blog-meta {
display: flex;
gap: 1.5rem;
margin-bottom: 1rem;
font-size: 0.85rem;
color: var(--text-muted);
flex-wrap: wrap;
}
.blog-meta-item {
display: flex;
align-items: center;
gap: 0.4rem;
}
.blog-meta-item i { color: var(--primary-color); }
.blog-card-title,
.blog-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1rem;
line-height: 1.4;
transition: color 0.3s ease;
}
.blog-card-title a { color: var(--primary-color); text-decoration: none; }
.blog-card-title:hover,
.blog-card-title a:hover { color: var(--primary-color); }
.blog-card-excerpt {
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 1.5rem;
flex-grow: 1;
}
.blog-read-more {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: gap 0.3s ease;
}
.blog-read-more:hover {
gap: 0.8rem;
color: var(--primary-dark);
}
/* Home-page blog date helper */
.blog-date {
font-size: 0.85rem;
color: #999;
font-weight: 500;
}
/* Sidebar */
.blog-sidebar {
position: sticky;
top: 100px;
}
.sidebar-widget {
background: white;
padding: 1.5rem;
border-radius: 12px;
margin-bottom: 2rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.sidebar-widget h5 {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--primary-color);
}
.search-form { position: relative; }
.search-form input {
width: 100%;
padding: 0.75rem 3rem 0.75rem 1rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
transition: all 0.3s ease;
}
.search-form input:focus {
outline: none;
border-color: var(--primary-color);
}
.search-form button {
position: absolute;
right: 0;
top: 0;
height: 100%;
padding: 0 1rem;
background: transparent;
border: none;
color: var(--primary-color);
cursor: pointer;
}
.category-item {
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-gray);
display: flex;
justify-content: space-between;
align-items: center;
}
.category-item:last-child { border-bottom: none; }
.category-item a {
color: var(--text-dark);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.category-item a:hover { color: var(--primary-color); }
.category-count {
background: var(--light-bg);
color: var(--primary-color);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 600;
}
.recent-post {
display: flex;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--border-gray);
}
.recent-post:last-child { border-bottom: none; }
.recent-post-image {
width: 80px;
height: 80px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.recent-post-content h6 {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.recent-post-content h6 a {
color: var(--text-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.recent-post-content h6 a:hover { color: var(--primary-color); }
.recent-post-date {
font-size: 0.8rem;
color: var(--text-muted);
}
.newsletter-widget {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: white;
}
.newsletter-widget h5 {
color: white;
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.newsletter-widget p {
font-size: 0.95rem;
margin-bottom: 1.5rem;
opacity: 0.9;
}
.newsletter-widget input {
width: 100%;
padding: 0.75rem;
border: none;
border-radius: 6px;
margin-bottom: 1rem;
font-size: 0.95rem;
}
.newsletter-widget button {
width: 100%;
padding: 0.75rem;
background: white;
color: var(--primary-color);
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-widget button:hover {
background: #f0f0f0;
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.tags-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.pagination-wrapper {
display: flex;
justify-content: center;
margin-top: 3rem;
}
.pagination { gap: 0.5rem; }
.pagination .page-link {
color: var(--primary-color);
border: 2px solid var(--border-gray);
padding: 0.75rem 1.25rem;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
}
.pagination .page-link:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.pagination .page-item.active .page-link {
background: var(--primary-color);
border-color: var(--primary-color);
}
@media (max-width: 992px) {
.blog-sidebar { position: static; margin-top: 3rem; }
}
/* ============================================================
26. BLOG DETAIL PAGE
============================================================ */
.blog-content-section {
background: white;
padding: 1rem 0;
margin-bottom: 3rem;
}
.blog-main {
max-width: 800px;
margin: 0 auto;
}
.blog-post-image {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 2rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.blog-post h2 {
font-size: 1.8rem;
font-weight: bold;
color: var(--text-dark);
margin-top: 2rem;
margin-bottom: 1rem;
padding-top: 1rem;
border-top: 3px solid var(--primary-color);
}
.blog-post h3 {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-dark);
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.blog-post p {
font-size: 1rem;
line-height: 1.8;
color: var(--text-muted);
margin-bottom: 1.25rem;
}
.blog-post ul,
.blog-post ol {
margin-left: 2rem;
margin-bottom: 1.25rem;
}
.blog-post li {
margin-bottom: 0.75rem;
line-height: 1.8;
color: var(--text-muted);
}
.blog-post strong {
color: var(--text-dark);
font-weight: 600;
}
.blog-post a {
color: var(--primary-color);
text-decoration: none;
border-bottom: 1px solid var(--primary-color);
transition: all 0.3s ease;
}
.blog-post a:hover {
color: var(--primary-dark);
border-bottom-color: var(--primary-dark);
}
.blog-highlight {
background: var(--light-bg);
border-left: 4px solid var(--primary-color);
padding: 1.5rem;
margin: 2rem 0;
border-radius: 4px;
}
.blog-share-section {
background: var(--light-bg);
padding: 2rem;
border-radius: 12px;
margin: 3rem 0;
text-align: center;
}
.share-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--text-dark);
}
.share-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
color: white;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.share-btn-facebook { background: #3b5998; }
.share-btn-facebook:hover { background: #2d4373; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(59,89,152,.3); }
.share-btn-twitter { background: #1DA1F2; }
.share-btn-twitter:hover { background: #1a8cd8; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(29,161,242,.3); }
.share-btn-linkedin { background: #0077b5; }
.share-btn-linkedin:hover { background: #005885; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,119,181,.3); }
.share-btn-whatsapp { background: #25d366; }
.share-btn-whatsapp:hover { background: #1ecc5a; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(37,211,102,.3); }
.share-btn-email { background: #ea4335; }
.share-btn-email:hover { background: #c5221f; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(234,67,53,.3); }
.blog-nav {
display: flex;
justify-content: space-between;
gap: 2rem;
margin: 3rem 0;
padding-top: 2rem;
border-top: 1px solid var(--border-gray);
flex-wrap: wrap;
}
.blog-nav-link {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.blog-nav-link:hover { color: var(--primary-dark); gap: 1.25rem; }
.blog-nav-link-prev { justify-content: flex-start; }
.blog-nav-link-next { justify-content: flex-end; }
.related-post {
padding: 1rem 0;
border-bottom: 1px solid var(--border-gray);
}
.related-post:last-child { border-bottom: none; }
.related-post a {
color: var(--text-dark);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
display: block;
line-height: 1.6;
}
.related-post a:hover { color: var(--primary-color); }
.related-post-meta {
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 0.5rem;
}
@media (max-width: 550px) { .blog-post { text-align: center; } }
/* ============================================================
27. FOOTER (shared)
============================================================ */
.footer-section {
background: white;
padding: 60px 0 30px;
border-top: 1px solid var(--border-gray);
}
.footer-links li { margin-bottom: 12px; }
.footer-links li a,
.footer-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 0.92rem;
transition: all 0.3s ease;
}
.footer-links li a:hover,
.footer-links a:hover {
color: var(--primary-color);
padding-left: 5px;
}
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--light-bg);
border-radius: 50%;
color: var(--primary-color);
margin-left: 10px;
transition: all 0.3s ease;
text-decoration: none;
}
.social-icon:hover {
background: var(--primary-color);
color: white;
transform: translateY(-3px);
}
.bottom-legal-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
}
.bottom-legal-links a:hover { color: var(--primary-color); }
/* ============================================================
28. MISC UTILITIES
============================================================ */
.display-5 { font-size: 1.8rem; }
@media (max-width: 767.98px) {
.display-5 { font-size: 1.8rem; }
.section-padding { padding: 40px 0; }
}