:root {
--cprimary: #2a9e2a;
--cprimary-light: #82d22a;
--cprimary-dark: #124a5e;
/* --accent: #e8b86d; */
/* --accent-light: #f0d4a0; */
--text-dark: #2c3e50;
--text-muted: #5a6c7d;
--bg-light: #f8f9fa;
--bg-warm: #fdfcfa;
--border-light: #e9ecef;
--accent: #e8b86d;
--accent-light: #f0d4a0;
--text-dark: #2c3e50;
--text-muted: #5a6c7d;
--bg-light: #f8f9fa;
--bg-warm: #fdfcfa;
--border-light: #e9ecef;
--primary: #667eea;
--primary-dark: #5a67d8;
--secondary: #764ba2;
--success: #38ef7d;
--warning: #f7b733;
--danger: #fc4a1a;
--dark: #1a1a2e;
--light: #f8f9fa;
--gray: #6c757d;
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
--gradient-warm: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
--shadow-md: 0 8px 24px rgba(0,0,0,0.12);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.15);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
}
/*** Button Start ***/
.return-to-top {
position: fixed;
right: 30px;
bottom: 30px;
display: flex;
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
transition: 0.5s;
z-index: 99;
}
.btn {
font-weight: 600;
transition: .5s;
}
.btn-square {
width: 32px;
height: 32px;
}
.btn-sm-square {
width: 34px;
height: 34px;
}
.btn-md-square {
width: 44px;
height: 44px;
}
.btn-lg-square {
width: 56px;
height: 56px;
}
.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
border-radius: 50%;
}
/* .btn-primary {
color: #000;
background-color: #15b9d9;
border-color: #fd8209;
} */
.btn.btn-primary {
box-shadow: inset 0 0 0 0 #fd8209;
}
.btn.btn-primary:hover {
box-shadow: inset 300px 0 0 0 #fd8209 !important;
color: #ffff !important;
}
.btn.btn-light {
box-shadow: inset 0 0 0 0 #fd8209;
}
.btn.btn-light:hover {
box-shadow: inset 300px 0 0 0 #fd8209;
color: #fd8209 !important;
}
.btn-hover {
transition: 0.5s;
}
.btn-hover:hover {
color: #fd8209 !important;
}
/*** Section Title Start ***/
.section-title {
max-width: 900px;
text-align: center;
margin: 0 auto;
}
.section-title .sub-style {
position: relative;
display: inline-block;
text-transform: uppercase;
color: var(--bs-primary);
}
.section-title .sub-style::before {
content: "";
width: 100px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
margin-top: 8px;
margin-left: -100px;
border: 1px solid var(--bs-primary) !important;
}
.section-title .sub-style::after {
content: "";
width: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
margin-bottom: 5px;
margin-left: -50px;
border: 1px solid var(--bs-primary) !important;
}
.sub-title {
position: relative;
display: inline-block;
text-transform: uppercase;
color: var(--bs-primary);
}
.sub-title::before {
content: "";
width: 100px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
margin-top: 8px;
margin-right: -100px;
border: 1px solid var(--bs-primary) !important;
}
.sub-title::after {
content: "";
width: 50px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
margin-bottom: 8px;
margin-right: -50px;
border: 1px solid var(--bs-primary) !important;
}
/*** Topbar Start ***/
.fixed-top .container {
transition: 0.5s;
}
.topbar {
padding: 2px 10px 2px 20px;
background: var(--bs-primary) !important;
}
.topbar a,
.topbar a i {
transition: 0.5s;
}
.topbar a:hover,
.topbar a i:hover {
color: var(--bs-secondary) !important;
}
@media (max-width: 576px) {
.topbar {
display: none;
}
.navbar-light .navbar-nav .nav-link {
font-size: 14px !important;
}
}
/*** Topbar End ***/
/*** Navbar ***/
.navbar-light .navbar-nav .nav-link {
font-family: 'Open Sans', sans-serif;
position: relative;
margin-right: 25px;
padding: 35px 0;
color: var(--bs-dark) !important;
font-size: 15px;
font-weight: 400;
outline: none;
transition: .5s;
}
.sticky-top.navbar-light .navbar-nav .nav-link {
padding: 20px 0;
color: var(--dark) !important;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #fd8209 !important;
}
.navbar-light .navbar-brand img {
max-height: 90px;
transition: .5s;
}
.sticky-top.navbar-light .navbar-brand img {
max-height: 61px;
}
.navbar .dropdown-toggle::after {
border: none;
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 600;
vertical-align: middle;
margin-left: 8px;
}
@media (min-width: 1200px) {
.navbar .nav-item .dropdown-menu {
display: block;
visibility: hidden;
top: 100%;
transform: rotateX(-75deg);
transform-origin: 0% 0%;
border: 0;
border-radius: 10px;
transition: .5s;
opacity: 0;
}
}
.dropdown .dropdown-menu a:hover {
background: var(--bs-primary);
color: var(--bs-white);
}
.navbar .nav-item:hover .dropdown-menu {
transform: rotateX(0deg);
visibility: visible;
background: var(--bs-light) !important;
transition: .5s;
opacity: 1;
}
@media (max-width: 991.98px) {
.sticky-top.navbar-light {
position: relative;
background: var(--bs-white);
}
.navbar.navbar-expand-lg .navbar-toggler {
padding: 10px 20px;
border: 1px solid var(--bs-primary);
color: var(--bs-primary);
}
.navbar-light .navbar-collapse {
margin-top: 15px;
border-top: 1px solid #DDDDDD;
}
.navbar-light .navbar-nav .nav-link,
.sticky-top.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
margin-left: 0;
color: var(--bs-dark) !important;
}
.navbar-light .navbar-brand img {
max-height: 53px;
}
}
@media (min-width: 992px) {
.navbar-light {
position: absolute;
width: 100%;
top: 0;
left: 0;
border-bottom: 1px solid rgba(255, 255, 255, .1);
z-index: 999;
}
.sticky-top.navbar-light {
position: fixed;
background: var(--bs-light) !important;
}
.navbar-light .navbar-nav .nav-link::before {
position: absolute;
content: "";
width: 0;
height: 2px;
bottom: -1px;
left: 50%;
background: #fd8209;
transition: .5s;
}
.navbar-light .navbar-nav .nav-link:hover::before,
.navbar-light .navbar-nav .nav-link.active::before {
width: calc(100% - 2px);
left: 1px;
}
.navbar-light .navbar-nav .nav-link.nav-contact::before {
display: none;
}
}
/*** Carousel Hero Header Start ***/
.header-carousel {
position: relative;
}
.header-carousel .owl-nav .owl-prev {
position: absolute;
width: 70px;
height: 70px;
top: 50%;
left: 20px;
transform: translateY(-50%);
border-radius: 50%;
background: var(--bs-primary);
color: var(--bs-white);
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.header-carousel .owl-nav .owl-next {
position: absolute;
width: 70px;
height: 70px;
top: 50%;
right: 20px;
transform: translateY(-50%);
border-radius: 50%;
background: var(--bs-primary);
color: var(--bs-white);
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
transition: 0.5s;
}
.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
box-shadow: inset 150px 0 0 0 var(--bs-light) !important;
color: var(--bs-primary) !important;
}
@media (max-width: 576px) {
.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
top: 630px;
transition: 0.5s;
}
.header-carousel .header-carousel-item .carousel-caption .carousel-caption-content {
width: 95% !important;
}
}
.header-carousel .header-carousel-item,
.header-carousel .header-carousel-item img {
position: relative;
width: 100%;
height: 700px;
margin-top: 95px;
display: block;
object-fit: cover;
transition: 0.5s;
}
@media (max-width: 992px) {
.header-carousel .header-carousel-item,
.header-carousel .header-carousel-item img {
margin-top: 0;
transition: 0.5s;
}
}
@media (min-width: 992px) {
.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
margin-top: 50px;
}
}
.header-carousel .header-carousel-item .carousel-caption {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 100px 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .5);
}
.header-carousel .header-carousel-item .carousel-caption .carousel-caption-content {
position: relative;
width: 75%;
}
/*** Carousel Hero Header End ***/
/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-04.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 160px 0 60px 0;
}
.bg-breadcrumb .breadcrumb-item a {
color: var(--bs-white) !important;
}
/*** Contact Start ***/
.contact {
background: linear-gradient(rgba(21, 185, 217, 0.9), rgba(21, 185, 217, 0.9)), url(../img/carousel-1.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.contact .contact-form .btn.btn-light {
box-shadow: inset 0 0 0 0 var(--bs-primary);
}
.contact .contact-form .btn.btn-light:hover {
box-shadow: inset 600px 0 0 0 var(--bs-primary) !important;
color: var(--bs-white) !important;
}
.contact .contact-form .form-floating input,
.contact .contact-form .form-floating textarea,
.contact .contact-form .form-floating label {
color: var(--bs-light);
}
/* Testimonial Section Title Start */
.contact .section-title {
max-width: 900px;
text-align: center;
margin: 0 auto;
}
.contact .section-title .sub-style {
position: relative;
display: inline-block;
text-transform: uppercase;
color: var(--bs-primary);
}
.contact .section-title .sub-style::before {
content: "";
width: 100px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
margin-top: 8px;
margin-left: -100px;
border: 1px solid var(--bs-white) !important;
}
.contact .section-title .sub-style::after {
content: "";
width: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
margin-bottom: 5px;
margin-left: -50px;
border: 1px solid var(--bs-white) !important;
}
.contact .section-title .sub-title {
position: relative;
display: inline-block;
text-transform: uppercase;
color: var(--bs-primary);
}
.contact .section-title .sub-title::before {
content: "";
width: 100px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
margin-top: 8px;
margin-right: -100px;
border: 1px solid var(--bs-white) !important;
}
.contact .section-title .sub-title::after {
content: "";
width: 50px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
margin-bottom: 8px;
margin-right: -50px;
border: 1px solid var(--bs-white) !important;
}
/*** Contact End ***/
/*** Footer Start ***/
.footer {
background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url(../img/bg-05.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.footer .footer-item a {
line-height: 35px;
color: var(--bs-body);
transition: 0.5s;
}
.footer .footer-item p {
line-height: 35px;
}
.footer .footer-item a:hover {
letter-spacing: 2px;
color: var(--bs-primary);
}
/*** Footer End ***/
/*** alaid-copy-right Start ***/
.alaid-copy-right {
background: var(--bs-dark) !important;
font-size: 14px;
}
/*** alaid-copy-right end ***/
/* ============================================
WHY CHOOSE US SECTION
============================================ */
.why-choose-us {
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
padding: 80px 20px;
}
.parallax-bg {
position: absolute;
top: -20%;
left: 0;
width: 100%;
height: 140%;
z-index: 0;
will-change: transform;
}
.parallax-bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Dark overlay for readability */
.parallax-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(15, 23, 42, 0.75) 0%,
rgba(15, 23, 42, 0.6) 40%,
rgba(15, 23, 42, 0.75) 100%
);
z-index: 1;
}
/* Subtle vignette */
.parallax-overlay::after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.6);
pointer-events: none;
}
.why-choose-us .content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
}
/* Section Header */
.section-header {
text-align: center;
margin-bottom: 60px;
animation: fadeInDown 0.8s ease-out forwards;
}
.section-header h2 {
font-size: 3rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 16px;
letter-spacing: -0.02em;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.section-header h2 span {
background: linear-gradient(90deg, #2dd4bf, #22d3ee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-header .underline {
width: 80px;
height: 4px;
background: linear-gradient(90deg, #2dd4bf, #22d3ee);
border-radius: 2px;
margin: 0 auto 24px;
}
.section-header p {
color: #fff;
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
/* text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); */
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.why-card {
position: relative;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 32px;
overflow: hidden;
transition:
transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1),
border-color 0.5s ease,
background 0.5s ease;
transform-style: preserve-3d;
perspective: 1000px;
cursor: pointer;
animation: fadeInUp 0.8s ease-out forwards;
opacity: 0;
}
/* Staggered Entrance Delays */
.why-card:nth-child(1) { animation-delay: 0.1s; }
.why-card:nth-child(2) { animation-delay: 0.2s; }
.why-card:nth-child(3) { animation-delay: 0.3s; }
.why-card:nth-child(4) { animation-delay: 0.4s; }
.why-card:nth-child(5) { animation-delay: 0.5s; }
.why-card:nth-child(6) { animation-delay: 0.6s; }
.why-card:nth-child(7) { animation-delay: 0.7s; }
.why-card:nth-child(8) { animation-delay: 0.8s; }
/* Card Glow Effect (follows mouse via JS) */
.why-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
opacity: 0;
transition: opacity 0.5s ease;
background: radial-gradient(
600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(45, 212, 191, 0.15),
transparent 40%
);
pointer-events: none;
z-index: 1;
}
/* Card Border Glow on Hover */
.why-card::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 20px;
padding: 1px;
background: linear-gradient(
135deg,
rgba(45, 212, 191, 0) 0%,
rgba(45, 212, 191, 0) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 2;
}
/* Card Hover States */
.why-card:hover {
transform: translateY(-12px) rotateX(4deg) rotateY(-2deg);
background: rgba(15, 23, 42, 0.7);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(45, 212, 191, 0.25),
inset 0 0 30px rgba(45, 212, 191, 0.03);
border-color: rgba(45, 212, 191, 0.3);
}
.why-card:hover::before {
opacity: 1;
}
.why-card:hover::after {
opacity: 1;
background: linear-gradient(
135deg,
rgba(45, 212, 191, 0.4) 0%,
rgba(99, 102, 241, 0.2) 50%,
rgba(45, 212, 191, 0) 100%
);
}
/* Card Icon */
.card-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(99, 102, 241, 0.2));
display: flex;
align-items: center;
justify-content: center;
color: #2dd4bf;
margin-bottom: 20px;
transition:
transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.5s ease,
background 0.5s ease;
box-shadow: 0 4px 15px rgba(45, 212, 191, 0.1);
position: relative;
z-index: 3;
}
.why-card:hover .card-icon {
transform: scale(1.1) translateY(-4px);
background: linear-gradient(135deg, rgba(45, 212, 191, 0.3), rgba(99, 102, 241, 0.3));
box-shadow: 0 8px 30px rgba(45, 212, 191, 0.25);
}
.why-card-icon svg {
width: 28px;
height: 28px;
stroke-width: 2;
}
/* Card Title */
.card-title {
font-size: 1.2rem;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 12px;
transition:
color 0.4s ease,
transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
z-index: 3;
}
.why-card:hover .card-title {
color: #2dd4bf;
transform: translateY(-2px);
}
/* Card Description */
.card-description {
font-size: 0.95rem;
color: #94a3b8;
line-height: 1.7;
transition:
color 0.4s ease,
transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
z-index: 3;
}
.why-card:hover .card-description {
color: #e2e8f0;
transform: translateY(-2px);
}
/* ============================================
ANIMATIONS
============================================ */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 768px) {
.section-header h2 {
font-size: 2.2rem;
}
.why-card {
padding: 24px;
}
.cards-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.why-choose-us {
padding: 60px 16px;
}
.section-header h2 {
font-size: 1.8rem;
}
}
/* ============================================
SERVICES SECTION — LIGHT & AIRY
============================================ */
.services-section {
position: relative;
padding: 120px 0;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
overflow: hidden;
}
/* Decorative background blobs */
.services-section::before {
content: '';
position: absolute;
top: -200px;
right: -100px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(45, 212, 191, 0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.services-section::after {
content: '';
position: absolute;
bottom: -150px;
left: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
/* Section Header */
.section-header {
text-align: center;
margin-bottom: 70px;
position: relative;
z-index: 1;
}
.section-header .badge-label {
display: inline-block;
padding: 8px 20px;
background: rgba(45, 212, 191, 0.1);
border: 1px solid rgba(45, 212, 191, 0.2);
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #0d9488;
margin-bottom: 20px;
}
.section-header h2 {
font-size: 3rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 18px;
letter-spacing: -0.03em;
line-height: 1.2;
}
.section-header h2 span {
color: #0d9488;
position: relative;
}
.section-header h2 span::after {
content: '';
position: absolute;
bottom: 4px;
left: 0;
right: 0;
height: 8px;
background: rgba(45, 212, 191, 0.2);
border-radius: 4px;
z-index: -1;
}
.section-header p {
color: #64748b;
font-size: 1.125rem;
max-width: 520px;
margin: 0 auto;
line-height: 1.8;
}
/* ============================================
SERVICE CARDS
============================================ */
.service-card {
position: relative;
background: #ffffff;
border-radius: 24px;
padding: 48px 32px 40px;
height: 100%;
border: 1px solid rgba(226, 232, 240, 0.8);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
overflow: hidden;
cursor: pointer;
z-index: 1;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 4px 12px rgba(0, 0, 0, 0.03);
}
/* Soft gradient blob behind icon on hover */
.service-card .blob {
position: absolute;
top: -60px;
right: -60px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, var(--blob-color, rgba(45, 212, 191, 0.1)) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
/* Bottom accent bar */
.service-card .accent-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: linear-gradient(90deg, #2dd4bf, #0d9488);
border-radius: 0 0 24px 24px;
transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Card Hover */
.service-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(45, 212, 191, 0.15);
border-color: rgba(45, 212, 191, 0.3);
}
.service-card:hover .blob {
opacity: 1;
}
.service-card:hover .accent-bar {
height: 4px;
}
/* Service Icon */
.service-icon {
width: 72px;
height: 72px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 28px;
position: relative;
z-index: 2;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(-3deg);
}
/* Icon color variations */
.icon-psychiatry {
background: linear-gradient(135deg, #ecfdf5, #d1fae5);
color: #059669;
--blob-color: rgba(5, 150, 105, 0.12);
}
.icon-counseling {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
color: #2563eb;
--blob-color: rgba(37, 99, 235, 0.12);
}
.icon-telehealth {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #d97706;
--blob-color: rgba(217, 119, 6, 0.12);
}
.icon-medication {
background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
color: #7c3aed;
--blob-color: rgba(124, 58, 237, 0.12);
}
/* Service Title */
.service-title {
font-size: 1.4rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 14px;
transition: color 0.4s ease;
position: relative;
z-index: 2;
}
.service-card:hover .service-title {
color: #ca8f13;
}
/* Service Description */
.service-description {
font-size: 0.95rem;
color: #64748b;
line-height: 1.75;
margin-bottom: 28px;
position: relative;
z-index: 2;
transition: color 0.4s ease;
}
.service-card:hover .service-description {
color: #475569;
}
/* Service Link */
.service-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 24px;
background: #f1f5f9;
border-radius: 12px;
color: #475569;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
z-index: 2;
}
.service-link i {
transition: transform 0.4s ease;
font-size: 0.85rem;
}
.service-card:hover .service-link {
background: linear-gradient(135deg, #0d9488, #14b8a6);
color: #ffffff;
box-shadow: 0 4px 15px rgba(13, 148, 136, 0.3);
}
.service-card:hover .service-link i {
transform: translateX(4px);
}
/* Number indicator */
.service-number {
position: absolute;
top: 24px;
right: 28px;
font-size: 3.5rem;
font-weight: 800;
color: rgba(226, 232, 240, 0.5);
line-height: 1;
transition: all 0.5s ease;
z-index: 0;
user-select: none;
}
.service-card:hover .service-number {
color: rgba(45, 212, 191, 0.15);
transform: scale(1.1);
}
/* ============================================
ANIMATIONS
============================================ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.section-header {
animation: fadeInDown 0.9s ease-out forwards;
}
.service-card {
animation: fadeInUp 0.8s ease-out forwards;
opacity: 0;
}
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 768px) {
.services-section {
padding: 70px 0;
}
.section-header h2 {
font-size: 2.2rem;
}
.service-card {
padding: 36px 24px 32px;
}
}
@media (max-width: 480px) {
.section-header h2 {
font-size: 1.8rem;
}
.service-number {
font-size: 2.5rem;
}
}
/* Blog Cards */
.blog-card {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 100%;
border: none;
}
.blog-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.blog-card .card-img-wrapper {
position: relative;
overflow: hidden;
height: 220px;
}
.blog-card .card-img-top {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-card:hover .card-img-top {
transform: scale(1.08);
}
.blog-card .card-img-overlay {
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
display: flex;
align-items: flex-end;
padding: 1.25rem;
}
.blog-card .category-badge {
background: var(--gradient-success);
color: white;
font-size: 0.75rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.blog-card .card-body {
padding: 1.5rem;
}
.blog-card .card-title {
font-weight: 700;
font-size: 1.15rem;
color: var(--dark);
margin-bottom: 0.75rem;
line-height: 1.4;
}
.blog-card .card-text {
color: var(--gray);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.blog-card .card-footer-custom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
border-top: 1px solid #f0f0f0;
}
.blog-card .date {
font-size: 0.8rem;
color: var(--gray);
}
.blog-card .read-more {
color: var(--primary);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
transition: gap 0.3s ease;
}
.blog-card .read-more:hover {
gap: 8px;
color: var(--primary-dark);
}
/* Single Blog Post */
.blog-single {
background: white;
/* border-radius: var(--radius-xl); */
box-shadow: var(--shadow-md);
overflow: hidden;
}
.blog-single .post-header {
padding: 1rem;
/* background: var(--gradient-success); */
color: white;
}
.blog-single .post-header h1 {
font-weight: 800;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.blog-single .post-meta {
display: flex;
gap: 1.5rem;
font-size: 0.9rem;
opacity: 0.9;
}
.blog-single .post-content {
padding: 2rem;
font-size: 1.1rem;
line-height: 1.8;
color: #333;
}
.blog-single .post-content h2,
.blog-single .post-content h3 {
color: var(--dark);
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
}
.blog-single .post-content p {
margin-bottom: 1.25rem;
}
.blog-single .post-content ul,
.blog-single .post-content ol {
margin-bottom: 1.25rem;
padding-left: 1.5rem;
}
@media (min-width: 550px) {
.blog-single .post-content {
padding: 0.7rem !important;
}
}
/**********************
alaid-quote
**********************/
.alaid-quote {
color: #fff;
text-align: center;
padding: 0;
/* margin-bottom: 30pt; */
}
.alaid-quote-bg {
background-color: #253250;
padding: 60px 0;
}
.alaid-quote h1 {
text-transform: uppercase;
}
.alaid-quote-btn {
margin-top: 20px;
display: inline-block;
font-size: 30px;
padding: 10px 30px;
border: 3px solid #fff;
}
.alaid-quote-btn a {
color: #fff;
text-decoration: none;
}
/**********************
alaid-quote2
**********************/
.alaid-quote2 {
color: #0f0c1d;
text-align: center;
padding: 0;
/* margin-bottom: 30pt; */
}
.alaid-quote2-bg {
background-color: #c0c6a7;
padding: 60px 0;
}
.alaid-quote2 h1 {
text-transform: uppercase;
}
.alaid-quote2-btn {
margin-top: 20px;
display: inline-block;
font-size: 30px;
padding: 10px 30px;
border: 3px solid #f07777;
}
.alaid-quote2-btn a {
color: #5470d2;
text-decoration: none;
}
/* new about page */
.hero-section {
background: linear-gradient(135deg, var(--cprimary-dark) 0%, var(--cprimary) 50%, var(--cprimary-light) 100%);
color: white;
padding: 120px 0 100px;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: 200px 200px;
}
.hero-section .container {
position: relative;
z-index: 1;
}
.hero-label {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: 1.5rem;
display: inline-block;
position: relative;
padding-left: 40px;
}
.hero-label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 2px;
background: var(--accent);
}
.hero-title {
font-size: 3.2rem;
font-weight: 600;
line-height: 1.15;
margin-bottom: 1.5rem;
color: #fff;
}
.hero-subtitle {
font-size: 1.15rem;
font-weight: 300;
opacity: 0.9;
max-width: 600px;
line-height: 1.8;
}
.hero-wave {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
line-height: 0;
}
.hero-wave svg {
display: block;
width: 100%;
height: 80px;
}
/* Mission Statement */
.mission-section {
padding: 80px 0;
background: var(--bg-warm);
}
.mission-card {
background: white;
border-radius: 20px;
padding: 50px 40px;
box-shadow: 0 10px 40px rgba(26, 95, 122, 0.08);
border: 1px solid var(--border-light);
position: relative;
}
.mission-card::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--accent);
border-radius: 0 0 4px 4px;
}
.mission-quote {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: var(--cprimary);
font-style: italic;
line-height: 1.6;
text-align: center;
margin: 0;
}
.mission-quote i {
color: var(--accent);
font-size: 1.2rem;
}
/* Pillars Section */
.pillars-section {
padding: 80px 0;
background: white;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-label {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
display: inline-block;
}
/* .section-title {
font-size: 2.5rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
} */
.section-desc {
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
font-size: 1.05rem;
}
.pillar-card {
background: var(--bg-warm);
border-radius: 16px;
padding: 40px 30px;
text-align: center;
transition: all 0.4s ease;
border: 1px solid transparent;
height: 100%;
}
.pillar-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(26, 95, 122, 0.1);
border-color: var(--border-light);
}
.pillar-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--cprimary), var(--cprimary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
color: white;
font-size: 1.8rem;
box-shadow: 0 8px 20px rgba(26, 95, 122, 0.25);
}
.pillar-title {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 12px;
font-family: 'Playfair Display', serif;
}
.pillar-text {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.7;
}
/* Why Choose Us */
.why-section {
padding: 80px 0;
background: linear-gradient(180deg, var(--bg-light) 0%, white 100%);
}
.why-image-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}
.why-image-wrapper img {
width: 100%;
height: 500px;
object-fit: cover;
}
.why-image-badge {
position: absolute;
bottom: 30px;
left: 30px;
background: white;
padding: 20px 25px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.why-image-badge .number {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 700;
color: var(--cprimary);
line-height: 1;
}
.why-image-badge .label {
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 500;
}
.why-list {
list-style: none;
padding: 0;
margin: 0;
}
.why-list li {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 18px 0;
border-bottom: 1px solid var(--border-light);
}
.why-list li:last-child {
border-bottom: none;
}
.why-check {
width: 36px;
height: 36px;
min-width: 36px;
background: var(--cprimary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
margin-top: 2px;
}
.why-item-title {
font-weight: 600;
color: var(--text-dark);
margin-bottom: 4px;
font-size: 1.05rem;
}
.why-item-desc {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.6;
}
/* Vision Section */
.vision-section {
padding: 80px 0;
background: var(--cprimary);
color: white;
position: relative;
overflow: hidden;
}
.vision-section::before {
content: '';
position: absolute;
top: -30%;
left: -10%;
width: 500px;
height: 500px;
background: rgba(255,255,255,0.04);
border-radius: 50%;
}
.vision-section::after {
content: '';
position: absolute;
bottom: -40%;
right: -15%;
width: 400px;
height: 400px;
background: rgba(232, 184, 109, 0.08);
border-radius: 50%;
}
.vision-section .container {
position: relative;
z-index: 1;
}
.vision-label {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
display: inline-block;
}
.vision-title {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: white;
}
.vision-text {
font-size: 1.15rem;
line-height: 1.8;
color: rgba(255,255,255,0.9);
max-width: 700px;
}
.vision-icon-large {
width: 100px;
height: 100px;
background: rgba(255,255,255,0.1);
border: 2px solid rgba(232, 184, 109, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
font-size: 2.5rem;
margin-bottom: 30px;
}
/* Core Values List Section */
.core-values-section {
padding: 80px 0;
background: var(--bg-warm);
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 50px;
}
.value-item {
background: white;
border-radius: 14px;
padding: 28px 30px;
display: flex;
align-items: center;
gap: 18px;
transition: all 0.3s ease;
border: 1px solid var(--border-light);
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.value-item:hover {
transform: translateX(8px);
box-shadow: 0 8px 25px rgba(26, 95, 122, 0.08);
border-color: var(--cprimary-light);
}
.value-item-icon {
width: 48px;
height: 48px;
min-width: 48px;
background: linear-gradient(135deg, var(--cprimary), var(--cprimary-light));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.3rem;
}
.value-item-title {
font-weight: 600;
color: var(--text-dark);
font-size: 1.05rem;
margin: 0;
}
/* Approach Section */
.approach-section {
padding: 100px 0;
background: white;
position: relative;
}
.approach-section {
/* background-image: url(../images/New/1.jpg); */
background: linear-gradient(3deg, rgba(6, 6, 6, 0.371), rgba(9, 10, 11, 0.207)), url('../img/bg-02.jpg') no-repeat center;
background-attachment: fixed;
background-size: cover;
text-align: center;
color: #fff;
}
.approach-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--cprimary), var(--accent), var(--cprimary-light));
}
.approach-card {
background: linear-gradient(135deg, var(--bg-warm) 0%, white 100%);
border-radius: 24px;
padding: 60px 50px;
border: 1px solid var(--border-light);
box-shadow: 0 20px 60px rgba(26, 95, 122, 0.06);
position: relative;
overflow: hidden;
}
.approach-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(232, 184, 109, 0.1) 0%, transparent 70%);
}
.approach-label {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
display: inline-block;
}
.approach-title {
font-size: 2.5rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1.5rem;
}
.approach-statement {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
color: var(--cprimary);
line-height: 1.5;
margin-bottom: 1.5rem;
font-style: italic;
}
.approach-divider {
width: 60px;
height: 3px;
background: var(--accent);
border-radius: 3px;
margin: 25px 0;
}
.approach-text {
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1.8;
max-width: 600px;
}
.approach-image-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
.approach-image-wrapper img {
width: 100%;
height: 100%;
min-height: 400px;
object-fit: cover;
}
/* Values Section (Original) */
.values-section {
padding: 80px 0;
background: var(--cprimary-dark);
color: white;
position: relative;
overflow: hidden;
}
.values-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: rgba(255,255,255,0.03);
border-radius: 50%;
}
.values-section::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
background: rgba(232, 184, 109, 0.05);
border-radius: 50%;
}
.values-section .section-label {
color: var(--accent);
}
.values-section .section-title {
color: white;
}
.values-section .section-desc {
color: rgba(255,255,255,0.7);
}
.value-card {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 40px 30px;
transition: all 0.4s ease;
height: 100%;
}
.value-card:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-5px);
}
.value-icon {
width: 55px;
height: 55px;
background: var(--accent);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--cprimary-dark);
font-size: 1.5rem;
margin-bottom: 20px;
}
.value-title {
color: #ffffff;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 12px;
font-family: 'Playfair Display', serif;
}
.value-text {
color: rgba(255,255,255,0.75);
font-size: 0.95rem;
line-height: 1.7;
}
/* CTA Section */
.cta-section {
padding: 100px 0;
background: var(--bg-warm);
text-align: center;
}
.cta-box {
background: white;
border-radius: 24px;
padding: 60px 40px;
box-shadow: 0 20px 60px rgba(26, 95, 122, 0.08);
max-width: 800px;
margin: 0 auto;
border: 1px solid var(--border-light);
}
.cta-title {
font-size: 2.2rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
}
.cta-text {
color: var(--text-muted);
font-size: 1.1rem;
margin-bottom: 2rem;
line-height: 1.7;
}
.btn-primary-custom {
background: linear-gradient(135deg, var(--cprimary), var(--cprimary-light));
color: white;
padding: 14px 40px;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
border: none;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(26, 95, 122, 0.3);
text-decoration: none;
display: inline-block;
}
.btn-primary-custom:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(26, 95, 122, 0.4);
color: white;
}
.btn-outline-custom {
background: transparent;
color: var(--cprimary);
padding: 14px 40px;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
border: 2px solid var(--cprimary);
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
margin-left: 15px;
}
.btn-outline-custom:hover {
background: var(--cprimary);
color: white;
}
/* Responsive */
@media (max-width: 991px) {
.hero-title { font-size: 2.4rem; }
.section-title { font-size: 2rem; }
.why-image-wrapper img { height: 350px; }
.btn-outline-custom { margin-left: 0; margin-top: 15px; }
.vision-title { font-size: 2rem; }
.approach-title { font-size: 2rem; }
.approach-statement { font-size: 1.3rem; }
}
@media (max-width: 767px) {
.hero-section { padding: 80px 0 70px; }
.hero-title { font-size: 1.9rem; }
.mission-quote { font-size: 1.2rem; }
.cta-title { font-size: 1.7rem; }
.approach-card { padding: 40px 30px; }
.values-grid { grid-template-columns: 1fr; }
}
/* Fade in animation */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Services Grid */
.services-section {
padding: 80px 0;
background: var(--bg-warm);
}
.service-card {
background: white;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border-light);
transition: all 0.4s ease;
height: 100%;
position: relative;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--cprimary), var(--accent));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
z-index: 2;
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(26, 95, 122, 0.12);
}
.service-card.active {
border-color: var(--cprimary);
box-shadow: 0 20px 50px rgba(26, 95, 122, 0.15);
}
.service-card.active::before {
transform: scaleX(1);
}
.service-image {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.5s ease;
}
.service-card:hover .service-image {
transform: scale(1.05);
}
.service-image-wrapper {
overflow: hidden;
position: relative;
}
.service-image-wrapper::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to top, white, transparent);
}
.service-body {
padding: 25px 30px 30px;
}
.service-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--cprimary), var(--cprimary-light));
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.4rem;
margin-bottom: 18px;
box-shadow: 0 6px 15px rgba(13, 148, 136, 0.2);
transition: all 0.3s ease;
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(-5deg);
}
.service-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 10px;
font-family: 'Playfair Display', serif;
}
.service-short {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 15px;
}
.service-arrow {
color: rgb(255, 128, 0);
font-size: 1.2rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
font-size: 0.85rem;
}
.service-card:hover .service-arrow {
gap: 12px;
}
/* Service Detail Panel */
.detail-section {
padding: 0 0 80px;
background: var(--bg-warm);
display: none;
}
.detail-section.active {
display: block;
animation: fadeInUp 0.6s ease;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.detail-card {
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(26, 95, 122, 0.08);
border: 1px solid var(--border-light);
position: relative;
}
.detail-image {
width: 100%;
height: 350px;
object-fit: cover;
}
.detail-content-wrapper {
padding: 50px;
position: relative;
}
.detail-content-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--cprimary), var(--accent));
border-radius: 0 0 4px 4px;
}
.detail-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}
.detail-icon {
width: 65px;
height: 65px;
background: linear-gradient(135deg, var(--cprimary), var(--cprimary-light));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.7rem;
box-shadow: 0 10px 25px rgba(13, 148, 136, 0.25);
}
.detail-title-area h3 {
font-size: 1.8rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 5px;
}
.detail-title-area span {
color: var(--text-muted);
font-size: 0.9rem;
}
.detail-content {
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1.8;
}
.detail-content p {
margin-bottom: 20px;
}
.detail-list {
list-style: none;
padding: 0;
margin: 25px 0;
}
.detail-list li {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--border-light);
}
.detail-list li:last-child {
border-bottom: none;
}
.detail-check {
width: 28px;
height: 28px;
min-width: 28px;
background: rgb(253 131 11);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.8rem;
margin-top: 2px;
}
.detail-list-text {
font-weight: 500;
color: var(--text-dark);
}
.detail-list-desc {
color: var(--text-muted);
font-size: 0.9rem;
margin-top: 2px;
}
.detail-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 25px;
}
.detail-tag {
background: var(--bg-warm);
border: 1px solid var(--border-light);
padding: 8px 18px;
border-radius: 50px;
font-size: 0.85rem;
color: var(--primary);
font-weight: 500;
}
.detail-cta {
margin-top: 35px;
padding-top: 30px;
border-top: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.detail-cta-text {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
color: var(--text-dark);
font-style: italic;
}
.btn-primary-custom {
background: linear-gradient(135deg, var(--cprimary), var(--cprimary-light));
color: white;
padding: 14px 35px;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
border: none;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(13, 148, 136, 0.3);
text-decoration: none;
display: inline-block;
}
.btn-primary-custom:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(13, 148, 136, 0.4);
color: white;
}
.btn-outline-custom {
background: transparent;
color: var(--primary);
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
border: 2px solid var(--cprimary);
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.btn-outline-custom:hover {
background: var(--cprimary);
color: white;
}
.close-detail {
position: absolute;
top: 25px;
right: 25px;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-light);
border: none;
color: var(--text-muted);
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.close-detail:hover {
background: var(--cprimary);
color: white;
}
/* CTA Section */
.cta-section {
padding: 100px 0;
background: linear-gradient(135deg, var(--cprimary-dark) 0%, var(--cprimary) 100%);
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 500px;
height: 500px;
background: rgba(255,255,255,0.03);
border-radius: 50%;
}
.cta-section .container {
position: relative;
z-index: 1;
}
.cta-title {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.cta-text {
opacity: 0.85;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto 2rem;
line-height: 1.7;
}
.btn-cta {
background: var(--accent);
color: var(--cprimary-dark);
padding: 16px 45px;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
border: none;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
text-decoration: none;
display: inline-block;
}
.btn-cta:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
background: var(--accent-light);
color: var(--primary-dark);
}
/* Responsive */
@media (max-width: 991px) {
.hero-title { font-size: 2.4rem; }
.section-title { font-size: 2rem; }
.detail-content-wrapper { padding: 35px; }
.detail-image { height: 250px; }
.cta-title { font-size: 2rem; }
}
@media (max-width: 767px) {
.hero-section { padding: 80px 0 70px; }
.hero-title { font-size: 1.9rem; }
.detail-content-wrapper { padding: 25px; }
.detail-image { height: 200px; }
.detail-header { flex-direction: column; align-items: flex-start; }
.detail-cta { flex-direction: column; align-items: flex-start; }
}
/* Fade in animation */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Forms */
.forms-hero {
background: linear-gradient(135deg, var(--cprimary-dark) 0%, var(--cprimary) 50%, var(--cprimary-light) 100%);
color: white;
padding: 120px 0 100px;
position: relative;
overflow: hidden;
}
.forms-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: 200px 200px;
}
.forms-hero .container {
position: relative;
z-index: 1;
}
.forms-hero-label {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: 1.5rem;
display: inline-block;
position: relative;
padding-left: 40px;
}
.forms-hero-label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 2px;
background: var(--accent);
}
.forms-hero-title {
font-family: 'Playfair Display', serif;
font-size: 3.2rem;
font-weight: 600;
line-height: 1.15;
margin-bottom: 1.5rem;
color: #FFF;
}
.forms-hero-subtitle {
font-size: 1.15rem;
font-weight: 300;
opacity: 0.9;
max-width: 600px;
line-height: 1.8;
margin: 0 auto;
}
.hero-wave {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
line-height: 0;
}
.hero-wave svg {
display: block;
width: 100%;
height: 80px;
}
.w-60{
width: 60%;
}
/* ===== FORMS GRID SECTION ===== */
.bg-forms-page{
background: linear-gradient(3deg, rgba(6, 6, 6, 0.371), rgba(9, 10, 11, 0.207)), url('../img/bg-02.jpg') no-repeat center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-color: #cccccc;
}
.forms-section {
padding: 80px 0;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-label {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
display: inline-block;
}
/* .section-title {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
} */
.section-desc {
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
font-size: 1.05rem;
}
/* ===== FORM CARD ===== */
.form-card {
background: white;
border-radius: 20px;
padding: 35px 30px;
border: 1px solid var(--border-light);
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
height: 100%;
position: relative;
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
overflow: hidden;
}
.form-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--cprimary), var(--accent));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
z-index: 2;
}
.form-card:hover::before {
transform: scaleX(1);
}
.form-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(26, 95, 122, 0.12);
border-color: rgba(26, 95, 122, 0.15);
}
.form-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--cprimary), var(--cprimary-light));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin-bottom: 22px;
box-shadow: 0 8px 20px rgba(26, 95, 122, 0.25);
transition: all 0.4s ease;
position: relative;
z-index: 2;
}
.form-card:hover .form-icon {
transform: scale(1.1) rotate(-3deg);
box-shadow: 0 12px 30px rgba(26, 95, 122, 0.35);
}
.form-title {
font-family: 'Playfair Display', serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 10px;
}
.form-desc {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.7;
margin-bottom: 22px;
}
/* ===== BUTTONS ===== */
.btn-pdf {
background: linear-gradient(135deg, var(--cprimary), var(--cprimary-light));
color: white;
padding: 10px 24px;
border-radius: 50px;
font-weight: 600;
font-size: 0.85rem;
border: none;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(26, 95, 122, 0.25);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-pdf:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(26, 95, 122, 0.35);
color: white;
}
.btn-online {
background: transparent;
color: var(--cprimary);
padding: 10px 24px;
border-radius: 50px;
font-weight: 600;
font-size: 0.85rem;
border: 2px solid var(--cprimary);
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: 10px;
}
.btn-online:hover {
background: var(--cprimary);
color: white;
}
.btn-group-forms {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* ===== INSTRUCTIONS SECTION ===== */
.instructions-section {
padding: 80px 0;
background: white;
}
.instruction-card {
background: var(--bg-warm);
border-radius: 16px;
padding: 35px 30px;
border: 1px solid var(--border-light);
height: 100%;
transition: all 0.4s ease;
}
.instruction-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.06);
border-color: var(--cprimary-light);
}
.instruction-number {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--cprimary), var(--cprimary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 18px;
box-shadow: 0 6px 15px rgba(26, 95, 122, 0.2);
}
.instruction-title {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 10px;
}
.instruction-text {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.7;
}
/* ===== CTA SECTION ===== */
.cta-section {
padding: 100px 0;
background: linear-gradient(135deg, var(--cprimary-dark) 0%, var(--cprimary) 100%);
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 500px;
height: 500px;
background: rgba(255,255,255,0.03);
border-radius: 50%;
}
.cta-section .container {
position: relative;
z-index: 1;
}
.cta-title {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.cta-text {
opacity: 0.85;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto 2rem;
line-height: 1.7;
}
.btn-cta {
background: var(--accent);
color: var(--cprimary-dark);
padding: 16px 45px;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
border: none;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
text-decoration: none;
display: inline-block;
}
.btn-cta:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
background: var(--accent-light);
color: var(--cprimary-dark);
}
/* ===== ANIMATIONS ===== */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered delays */
.fade-in:nth-child(1) { transition-delay: 0.05s; }
.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.15s; }
.fade-in:nth-child(4) { transition-delay: 0.2s; }
.fade-in:nth-child(5) { transition-delay: 0.25s; }
.fade-in:nth-child(6) { transition-delay: 0.3s; }
.fade-in:nth-child(7) { transition-delay: 0.35s; }
.fade-in:nth-child(8) { transition-delay: 0.4s; }
.fade-in:nth-child(9) { transition-delay: 0.45s; }
.fade-in:nth-child(10) { transition-delay: 0.5s; }
.fade-in:nth-child(11) { transition-delay: 0.55s; }
.fade-in:nth-child(12) { transition-delay: 0.6s; }
.fade-in:nth-child(13) { transition-delay: 0.65s; }
/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
.forms-hero-title { font-size: 2.4rem; }
.section-title { font-size: 2rem; }
.cta-title { font-size: 2rem; }
}
@media (max-width: 767px) {
.forms-hero { padding: 80px 0 70px; }
.forms-hero-title { font-size: 1.9rem; }
.forms-hero-subtitle { font-size: 1rem; }
.section-title { font-size: 1.8rem; }
.form-card { padding: 28px 24px; }
.btn-online { margin-left: 0; margin-top: 8px; }
.btn-group-forms { flex-direction: column; }
.cta-title { font-size: 1.7rem; }
.cta-section { padding: 70px 0; }
.instructions-section { padding: 60px 0; }
.forms-section { padding: 60px 0; }
}
@media (max-width: 575px) {
.forms-hero-title { font-size: 1.7rem; }
.section-title { font-size: 1.1rem !important; }
.form-icon { width: 48px; height: 48px; font-size: 1.3rem; }
.form-title { font-size: 1.1rem; }
}
/* ============================================
CONTACT PAGE STYLES
============================================ */
.contact-hero {
background: linear-gradient(135deg, var(--cprimary-dark) 0%, var(--cprimary) 50%, var(--cprimary-light) 100%);
color: white;
padding: 120px 0 100px;
position: relative;
overflow: hidden;
}
.contact-hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url('data:image/svg+xml,');
background-size: 200px 200px;
}
.contact-hero .container { position: relative; z-index: 1; }
.contact-hero-label {
font-size: 0.85rem; font-weight: 600; letter-spacing: 3px;
text-transform: uppercase; color: var(--accent-light);
margin-bottom: 1.5rem; display: inline-block;
position: relative; padding-left: 40px;
}
.contact-hero-label::before {
content: ''; position: absolute; left: 0; top: 50%;
transform: translateY(-50%); width: 30px; height: 2px;
background: var(--accent);
}
.contact-hero-title {
font-family: 'Playfair Display', serif;
font-size: 3.2rem; font-weight: 600; line-height: 1.15;
margin-bottom: 1.5rem;
color: #fff;
}
.contact-hero-subtitle {
font-size: 1.15rem; font-weight: 300; opacity: 0.9;
max-width: 600px; line-height: 1.8; margin: 0 auto;
}
.hero-wave {
position: absolute; bottom: -1px; left: 0;
width: 100%; line-height: 0;
}
.hero-wave svg { display: block; width: 100%; height: 80px; }
/* Contact Info Cards */
.contact-info-section { padding: 80px 0 40px; background: var(--bg-warm); }
.info-card {
background: white; border-radius: 20px; padding: 40px 30px;
text-align: center; border: 1px solid var(--border-light);
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
height: 100%; box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.info-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(26, 95, 122, 0.12);
border-color: rgba(26, 95, 122, 0.15);
}
.info-icon {
width: 64px; height: 64px;
background: linear-gradient(135deg, var(--cprimary), var(--cprimary-light));
border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: white; font-size: 1.5rem; margin: 0 auto 22px;
box-shadow: 0 8px 20px rgba(26, 95, 122, 0.25);
transition: all 0.4s ease;
}
.info-card:hover .info-icon { transform: scale(1.1) rotate(-5deg); }
.info-title {
font-family: 'Playfair Display', serif;
font-size: 1.2rem; font-weight: 600;
color: var(--text-dark); margin-bottom: 10px;
}
.info-text { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 0; }
.info-text a { color: var(--cprimary); text-decoration: none; transition: color 0.3s ease; }
.info-text a:hover { color: var(--cprimary-dark); text-decoration: underline; }
/* Form & Map Section */
.contact-main-section { padding: 40px 0 80px; background: var(--bg-warm); }
.section-header { text-align: center; margin-bottom: 50px; }
.section-label {
font-size: 0.8rem; font-weight: 600; letter-spacing: 3px;
text-transform: uppercase; color: var(--accent);
margin-bottom: 1rem; display: inline-block;
}
/* .section-title {
font-family: 'Playfair Display', serif;
font-size: 2.5rem; font-weight: 600;
color: var(--text-dark); margin-bottom: 1rem;
} */
.section-desc { color: var(--text-muted); max-width: 600px; margin: 0 auto; font-size: 1.05rem; }
/* Contact Form */
.contact-form-card {
background: white; border-radius: 24px; padding: 45px 40px;
border: 1px solid var(--border-light);
box-shadow: 0 10px 40px rgba(0,0,0,0.06); height: 100%;
}
.form-floating-custom { position: relative; margin-bottom: 20px; }
.form-floating-custom label {
font-weight: 500; color: var(--text-dark);
font-size: 0.9rem; margin-bottom: 8px; display: block;
}
.form-floating-custom label .required { color: #dc3545; margin-left: 2px; }
.form-control-custom {
width: 100%; border: 2px solid var(--border-light);
border-radius: 14px; padding: 14px 18px;
font-size: 0.95rem; color: var(--text-dark);
background: var(--bg-warm); transition: all 0.3s ease; outline: none;
}
.form-control-custom:focus {
border-color: var(--cprimary);
box-shadow: 0 0 0 4px rgba(26, 95, 122, 0.1);
background: white;
}
.form-control-custom::placeholder { color: #adb5bd; }
textarea.form-control-custom { resize: vertical; min-height: 140px; }
select.form-control-custom {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235a6c7d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
padding-right: 45px;
}
.btn-submit {
background: linear-gradient(135deg, var(--cprimary), var(--cprimary-light));
color: white; padding: 16px 45px; border-radius: 50px;
font-weight: 700; font-size: 1rem; border: none;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(26, 95, 122, 0.3);
text-decoration: none; display: inline-flex;
align-items: center; gap: 10px; cursor: pointer;
width: 100%; justify-content: center;
}
.btn-submit:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(26, 95, 122, 0.4);
color: white;
}
/* Map Card */
.map-card {
background: white; border-radius: 24px; overflow: hidden;
border: 1px solid var(--border-light);
box-shadow: 0 10px 40px rgba(0,0,0,0.06);
height: 100%; display: flex; flex-direction: column;
}
.map-container { flex: 1; min-height: 400px; position: relative; }
.map-container iframe {
width: 100%; height: 100%; min-height: 400px;
border: none; border-radius: 24px 24px 0 0;
}
.map-info { padding: 30px 35px; background: white; }
.map-info-title {
font-family: 'Playfair Display', serif;
font-size: 1.3rem; font-weight: 600;
color: var(--text-dark); margin-bottom: 12px;
}
.map-info-address { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 15px; }
.map-info-directions {
color: var(--cprimary); font-weight: 600; text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
transition: all 0.3s ease;
}
.map-info-directions:hover { color: var(--cprimary-dark); gap: 12px; }
/* Alert Messages */
.alert-custom {
border-radius: 14px; padding: 18px 24px;
margin-bottom: 25px; display: flex;
align-items: center; gap: 12px; font-size: 0.95rem;
}
.alert-success-custom { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.alert-error-custom { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
/* Hours Section */
.hours-section { padding: 80px 0; background: rgb(20, 19, 19); }
.hours-card {
background: var(--bg-warm); border-radius: 20px;
padding: 40px 35px; border: 1px solid var(--border-light); height: 100%;
}
.hours-title {
font-family: 'Playfair Display', serif;
font-size: 1.3rem; font-weight: 600;
color: var(--text-dark); margin-bottom: 25px;
display: flex; align-items: center; gap: 12px;
}
.hours-title i { color: var(--cprimary); font-size: 1.2rem; }
.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li {
display: flex; justify-content: space-between;
padding: 12px 0; border-bottom: 1px solid var(--border-light);
font-size: 0.95rem;
}
.hours-list li:last-child { border-bottom: none; }
.hours-day { font-weight: 600; color: var(--text-dark); }
.hours-time { color: var(--text-muted); }
.hours-note {
margin-top: 20px; padding-top: 20px;
border-top: 2px solid var(--border-light);
color: var(--text-muted); font-size: 0.9rem; font-style: italic;
}
/* CTA Section */
.cta-section {
padding: 100px 0;
background: var(--dark);
color: white; text-align: center;
position: relative; overflow: hidden;
}
.cta-section::before {
content: ''; position: absolute;
top: -50%; right: -20%;
width: 500px; height: 500px;
background: rgba(255,255,255,0.03); border-radius: 50%;
}
.cta-section .container { position: relative; z-index: 1; }
.cta-title {
font-family: 'Playfair Display', serif;
font-size: 2.5rem; font-weight: 600; margin-bottom: 1rem;
}
.cta-text { opacity: 0.85; font-size: 1.1rem; max-width: 600px; margin: 0 auto 2rem; line-height: 1.7; }
.btn-cta {
background: var(--accent); color: var(--cprimary-dark);
padding: 16px 45px; border-radius: 50px;
font-weight: 700; font-size: 1rem; border: none;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
text-decoration: none; display: inline-block;
}
.btn-cta:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
background: var(--accent-light); color: var(--cprimary-dark);
}
/* Responsive */
@media (max-width: 991px) {
.contact-hero-title { font-size: 2.4rem; }
.section-title { font-size: 2rem; }
.cta-title { font-size: 2rem; }
.contact-form-card { padding: 35px 30px; }
.map-container { min-height: 350px; }
}
@media (max-width: 767px) {
.contact-hero { padding: 80px 0 70px; }
.contact-hero-title { font-size: 1.9rem; }
.contact-hero-subtitle { font-size: 1rem; }
.section-title { font-size: 1.8rem; }
.contact-form-card { padding: 28px 24px; }
.map-container { min-height: 300px; }
.map-container iframe { min-height: 300px; }
.map-info { padding: 25px 24px; }
.cta-title { font-size: 1.7rem; }
.cta-section { padding: 70px 0; }
.hours-section { padding: 60px 0; }
.contact-info-section { padding: 60px 0 30px; }
.contact-main-section { padding: 30px 0 60px; }
}
@media (max-width: 575px) {
.contact-hero-title { font-size: 1.7rem; }
.section-title { font-size: 1.0rem !important; }
.info-card { padding: 30px 24px; }
.info-icon { width: 56px; height: 56px; font-size: 1.3rem; }
.btn-submit { padding: 14px 30px; }
}
/* Career Section */
.career-hero {
background: var(--gradient-success);
padding: 100px 0 80px;
position: relative;
overflow: hidden;
}
.career-hero::before {
content: '';
position: absolute;
top: -30%;
right: -15%;
width: 500px;
height: 500px;
background: rgba(255,255,255,0.08);
border-radius: 50%;
}
.career-card {
background: white;
border-radius: var(--radius-lg);
padding: 2.5rem;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
border: 2px solid transparent;
height: 100%;
}
.career-card:hover {
border-color: var(--success);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.career-card .icon-box {
width: 64px;
height: 64px;
background: var(--gradient-success);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.career-card .icon-box i {
font-size: 1.75rem;
color: white;
}
.career-card h4 {
font-weight: 700;
margin-bottom: 0.75rem;
}
/* Application Form */
.application-form {
background: white;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
padding: 3rem;
}
.form-floating > .form-control,
.form-floating > .form-select {
border-radius: var(--radius-md);
border: 2px solid #e9ecef;
padding: 1rem 1rem;
height: calc(3.5rem + 2px);
}
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}
.form-floating > textarea.form-control {
height: auto;
min-height: 120px;
}
.form-floating > label {
padding: 1rem 1rem;
}
.btn-submit {
background: var(--gradient-primary);
color: white;
font-weight: 700;
padding: 14px 40px;
border-radius: 50px;
border: none;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
width: 100%;
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: white;
}
/* File Upload */
.file-upload-wrapperr {
position: relative;
border: 2px dashed #d1d5db;
border-radius: var(--radius-md);
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
background: #fafafa;
}
.file-upload-wrapperr:hover {
border-color: var(--primary);
background: #f0f4ff;
}
.file-upload-wrapperr input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.file-upload-wrapperr .upload-icon {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 0.75rem;
}
.file-upload-wrapperr .upload-text {
font-weight: 600;
color: #111;
margin-bottom: 0.25rem;
word-break: break-all; /* prevents long filenames from overflowing */
}
.file-upload-wrapperr .upload-hint {
font-size: 0.8rem;
color: var(--gray);
}
/* Appointment Modal */
/* ---- Modal Base ---- */
.ba-modal {
border: none;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 25px 80px rgba(0,0,0,0.25);
}
.ba-modal .modal-dialog {
max-width: 800px;
}
.ba-modal .modal-content {
border: none;
border-radius: 24px;
}
/* ---- Header ---- */
.ba-modal-header {
background: linear-gradient(135deg, #124a5e 0%, #1a5f7a 50%, #2a7d9e 100%);
color: white;
padding: 30px 35px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.ba-modal-header::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 300px;
height: 300px;
background: rgba(255,255,255,0.05);
border-radius: 50%;
}
.ba-modal-header-content {
display: flex;
align-items: center;
gap: 18px;
position: relative;
z-index: 1;
}
.ba-modal-icon {
width: 56px;
height: 56px;
background: rgba(255,255,255,0.15);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
backdrop-filter: blur(10px);
flex-shrink: 0;
}
.ba-modal-title {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 4px;
}
.ba-modal-subtitle {
font-size: 0.85rem;
opacity: 0.85;
margin-bottom: 0;
}
.ba-modal-close {
background: rgba(255,255,255,0.15);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.ba-modal-close:hover {
background: rgba(255,255,255,0.25);
transform: rotate(90deg);
}
/* ---- Body ---- */
.ba-modal-body {
padding: 35px;
background: #fdfcfa;
max-height: 70vh;
overflow-y: auto;
}
/* ---- Alerts ---- */
.ba-alert {
border-radius: 14px;
padding: 16px 20px;
margin-bottom: 25px;
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.9rem;
line-height: 1.5;
}
.ba-alert i {
font-size: 1.2rem;
margin-top: 2px;
flex-shrink: 0;
}
.ba-alert-success {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.ba-alert-error {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
/* ---- Section ---- */
.ba-section {
margin-bottom: 30px;
}
.ba-section-title {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.ba-section-number {
width: 32px;
height: 32px;
background: linear-gradient(135deg, #1a5f7a, #2a7d9e);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 700;
flex-shrink: 0;
}
/* ---- Form Groups ---- */
.ba-form-group {
margin-bottom: 5px;
}
.ba-form-group label {
font-weight: 500;
color: #2c3e50;
font-size: 0.85rem;
margin-bottom: 6px;
display: block;
}
.ba-required {
color: #dc3545;
}
.ba-optional {
color: #adb5bd;
font-weight: 400;
font-size: 0.8rem;
}
.ba-input-wrap {
position: relative;
}
.ba-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #1a5f7a;
font-size: 0.9rem;
opacity: 0.7;
z-index: 2;
}
.ba-form-control {
width: 100%;
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 12px 14px 12px 42px;
font-size: 0.9rem;
color: #2c3e50;
background: white;
transition: all 0.25s ease;
outline: none;
}
.ba-form-control:focus {
border-color: #1a5f7a;
box-shadow: 0 0 0 4px rgba(26, 95, 122, 0.1);
}
.ba-form-control::placeholder {
color: #adb5bd;
}
.ba-textarea {
padding-top: 12px;
resize: vertical;
min-height: 70px;
}
.ba-textarea + .ba-input-icon {
top: 22px;
transform: none;
}
/* ---- Upload Zone ---- */
.ba-upload-zone {
position: relative;
border: 2px dashed #ced4da;
border-radius: 14px;
padding: 30px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: white;
overflow: hidden;
min-height: 160px;
display: flex;
align-items: center;
justify-content: center;
}
.ba-upload-zone:hover {
border-color: #1a5f7a;
background: rgba(26, 95, 122, 0.02);
}
.ba-upload-zone.dragover {
border-color: #1a5f7a;
background: rgba(26, 95, 122, 0.06);
transform: scale(1.02);
}
.ba-upload-zone.has-file {
border-style: solid;
border-color: #28a745;
background: rgba(40, 167, 69, 0.05);
}
.ba-file-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 10;
}
.ba-upload-content {
pointer-events: none;
}
.ba-upload-icon {
font-size: 2rem;
color: #1a5f7a;
margin-bottom: 10px;
opacity: 0.6;
}
.ba-upload-text {
font-weight: 600;
color: #2c3e50;
margin-bottom: 4px;
font-size: 0.9rem;
}
.ba-upload-hint {
color: #adb5bd;
font-size: 0.75rem;
margin-bottom: 0;
}
.ba-upload-preview {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
background: white;
z-index: 5;
padding: 15px;
}
.ba-upload-preview.active {
display: flex;
}
.ba-upload-preview img {
max-width: 100%;
max-height: 130px;
border-radius: 8px;
object-fit: contain;
}
.ba-upload-preview .ba-file-name {
font-size: 0.85rem;
color: #2c3e50;
word-break: break-all;
display: flex;
align-items: center;
gap: 8px;
}
.ba-upload-preview .ba-file-name i {
color: #28a745;
font-size: 1.5rem;
}
.ba-upload-remove {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
background: #dc3545;
color: white;
border: none;
border-radius: 50%;
font-size: 0.8rem;
cursor: pointer;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.ba-upload-remove:hover {
transform: scale(1.1);
background: #c82333;
}
/* ---- Submit ---- */
.ba-submit-wrap {
text-align: center;
padding-top: 10px;
}
.ba-btn-submit {
background: linear-gradient(135deg, #1a5f7a, #2a7d9e);
color: white;
padding: 16px 45px;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
border: none;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(26, 95, 122, 0.3);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
width: 100%;
justify-content: center;
}
.ba-btn-submit:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(26, 95, 122, 0.4);
color: white;
}
.ba-btn-submit:active {
transform: translateY(-1px);
}
.ba-submit-note {
color: #adb5bd;
font-size: 0.8rem;
margin-top: 15px;
margin-bottom: 0;
}
.ba-submit-note i {
color: #28a745;
margin-right: 5px;
}
/* ---- Scrollbar ---- */
.ba-modal-body::-webkit-scrollbar {
width: 8px;
}
.ba-modal-body::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.ba-modal-body::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.ba-modal-body::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* ---- Responsive ---- */
@media (max-width: 767px) {
.ba-modal .modal-dialog {
margin: 10px;
max-width: 100%;
}
.ba-modal-header {
padding: 20px 22px;
}
.ba-modal-icon {
width: 44px;
height: 44px;
font-size: 1.2rem;
}
.ba-modal-title {
font-size: 1.2rem;
}
.ba-modal-body {
padding: 22px;
max-height: 75vh;
}
.ba-upload-zone {
min-height: 130px;
padding: 20px 15px;
}
.ba-btn-submit {
padding: 14px 30px;
font-size: 0.9rem;
}
}
@media (max-width: 575px) {
.ba-modal-header-content {
gap: 12px;
}
.ba-modal-subtitle {
font-size: 0.75rem;
}
.ba-section-title {
font-size: 1rem;
}
}
/* Button animation */
.btn-3d {
padding: 12px 24px;
font-size: 16px;
font-weight: bold;
color: #ffffff;
background-color: #ff007f;
border: none;
border-radius: 6px;
cursor: pointer;
/* Thick solid bottom shadow to act as the 3D base */
box-shadow: 0 6px 0 #b30059;
transition: all 0.1s ease;
}
/* Hover slightly lifts the button */
.btn-3d:hover {
background-color: #ff1a8c;
}
/* Simulated compression on click */
.btn-3d:active {
transform: translateY(4px); /* Moves button down */
box-shadow: 0 2px 0 #b30059; /* Shrinks shadow to match displacement */
}
.btn-pulse {
padding: 12px 24px;
font-size: 16px;
color: #ffffff;
background-color: #7928ca;
border: none;
border-radius: 6px;
cursor: pointer;
/* Bind the pulse keyframes below */
animation: pulse-glow 2s infinite;
}
@keyframes pulse-glow {
0% {
box-shadow: 0 0 0 0 rgba(121, 40, 202, 0.7);
}
70% {
/* Expand the outer shadow ring while fading opacity */
box-shadow: 0 0 0 12px rgba(121, 40, 202, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(121, 40, 202, 0);
}
}
/* Interactive click feedback */
.btn-pulse:active {
transform: scale(0.98);
}
/* consultation form page */
.alert {
border-radius: 12px;
border: none;
}
.spinner-border {
width: 1.2rem;
height: 1.2rem;
margin-right: 0.5rem;
}
.file-upload-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
width: 100%;
}
.file-upload-wrapper input[type=file] {
position: absolute;
left: -9999px;
}
.file-upload-label {
display: block;
padding: 0.75rem 1rem;
border: 2px dashed #d1d5db;
border-radius: 12px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
color: #6b7280;
}
.file-upload-label:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: #f0f4ff;
}
.file-upload-label.has-file {
border-color: #10b981;
color: #10b981;
background: #ecfdf5;
}
.booking-card {
border: none;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
background: white;
overflow: hidden;
}
.booking-header {
background: #e09145;
color: white;
padding: 2.5rem 2rem;
text-align: center;
}
.booking-header h2 {
font-weight: 700;
margin-bottom: 0.5rem;
}
.booking-header p {
opacity: 0.9;
margin: 0;
}
.form-control, .form-select {
border-radius: 12px;
border: 2px solid #e5e7eb;
padding: 0.75rem 1rem;
transition: all 0.3s ease;
}
.form-control:focus, .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
.form-label {
font-weight: 600;
color: #374151;
margin-bottom: 0.5rem;
}
.required::after {
content: " *";
color: #dc2626;
}
.btn-submit {
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
border: none;
border-radius: 12px;
padding: 1rem 2rem;
font-weight: 600;
font-size: 1.1rem;
width: 100%;
transition: all 0.3s ease;
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
}
.btn-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
/* Application Form */
.application-form {
background: white;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
padding: 3rem;
}
.form-floating > .form-control,
.form-floating > .form-select {
border-radius: var(--radius-md);
border: 2px solid #e9ecef;
padding: 1rem 1rem;
height: calc(3.5rem + 2px);
}
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
}
.form-floating > textarea.form-control {
height: auto;
min-height: 120px;
}
.form-floating > label {
padding: 1rem 1rem;
}
.btn-submit {
background: var(--gradient-primary);
/* color: white; */
font-weight: 700;
padding: 14px 40px;
border-radius: 50px;
border: none;
box-shadow: #fff;
transition: all 0.3s ease;
width: 100%;
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: white;
}