:root {
--color-text: var(--color-primary);
}
.bg-primary {
background-color: var(--color-primary) !important;
}
.bg-secondary {
background-color: var(--color-secondary) !important;
}
.bg-success {
background-color: var(--success) !important;
}
.bg-gray {
background-color: var(--gray) !important;
}
.text-primary {
color: var(--color-primary) !important;
}
.text-secondary {
color: var(--color-secondary) !important;
}
.text-success {
color: var(--success) !important;
}
.text-dark {
color: #000 !important;
}
.container {
max-width: 1440px;
}
.header .navbar-nav>.nav-item {
display: flex;
flex-wrap: wrap;
display: flex;
flex-direction: column;
align-items: start;
}
.slide-container {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: left;
}
.page-banner .banner-text {
position: absolute;
top: 50%;
left: 50%;
text-align: left;
width: 100%;
transform: translate(-50%, -50%) !important;
z-index: 1;
}
.cqc img {
/* width: 220px; */
object-fit: contain;
height: 100px;
}
.banner-text .container {
display: flex;
justify-content: end;
}
.banner-text .container #banner-text-edit {
color: #000;
background-color: #edededc9;
max-width: 800px;
text-align: left;
margin-right: 0;
padding: 15px;
border-radius: 10px;
box-shadow: 1px 2px 10px #ddd;
width: 100%;
}
/* ______________________ */
.page-banner {
background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
color: #fff;
min-height: 200px;
}
.page-banner h1 {
color: var(--color-primary);
font-size: clamp(30px, 3vw, 40px);
font-weight: 700;
letter-spacing: 1px;
transition: all 0.6s ease;
display: inline-block;
position: relative;
/* text-shadow: 1px 2px 1px #00033357; */
line-height: 40px;
}
/* .page-banner h1:hover {
transform: scale(1.05) translateY(-5px);
} */
/* ______________________ */
.slide img {
max-height: 700px;
min-height: 300px;
object-fit: cover;
}
.banner-subtitle {
font-size: clamp(30px, 4vw, 45px);
font-weight: 700;
}
.slide-text h1 {
font-size: clamp(35px, 4vw, 65px);
font-weight: 900;
text-shadow: 0px 3px 1px #000;
}
/* .header .navbar-nav .nav-item a {
border-bottom: 3px solid transparent;
} */
/* -------------------- */
.contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
}
.contact-icon {
margin-right: 15px;
line-height: 1.5;
}
.contact-info a {
color: #ffffff;
text-decoration: none;
}
.contact-info .address-line {
display: block;
}
/* -------------- */
.hero-section {
background-image: url('../img/home-bg1.jpg');
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: center;
text-align: center;
color: #ffffff;
}
.hero-content {
position: relative;
z-index: 2;
padding-top: 250px;
padding-bottom: 100px;
}
.hero-headline {
font-size: clamp(40px, 5.5vw, 45px);
font-weight: 900;
margin-bottom: 1.5rem;
}
/* -------------- */
.section-title {
font-size: clamp(35px, 4vw, 45px);
color: var(--color-text);
margin-bottom: 50px;
text-align: center;
}
h2 {
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
h2:hover {
transform: translateY(-5px);
}
.service-card {
border: none;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
/* padding: 25px; */
}
.box-cus {
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.service-card:hover,
.box-cus:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.service-card img {
min-height: 250px;
height: 250px;
object-fit: cover;
}
.service-card .card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
/* text-align: center; */
/* align-items: center; */
}
.service-card .card-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
color: var(--color-text);
}
.complex-care-section {
background-image: url('../img/complex-care.jpg');
background-size: cover;
background-position: center left;
position: relative;
color: #ffffff;
}
.fw-900 {
font-weight: 900;
}
.news-section {
background-color: #804080;
}
.bg-custom-dark {
background-color: #00000038 !important;
}
.recruitment-process .card {
background-color: #9d168f;
}
.recruitment-process .card h4 {
color: #fff;
}
.page-content img {
transform: scale(1);
transition: transform 0.4s ease-in-out;
}
.page-content img:hover {
transform: scale(1.02);
}
.btn {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover {
transform: scale(1.05);
}
/* .swiper {
width: 100%;
padding-bottom: 50px;
}
.swiper-slide img {
display: block;
width: 100%;
height: auto;
border-radius: 15px;
object-fit: cover;
} */
.associated .swiper-button-next,
.associated .swiper-button-prev {
width: 15px;
height: 15px;
}
.associated .swiper-button-next::after,
.associated .swiper-button-prev::after {
font-size: 16px;
}
/* ------------ */
.accordion-button::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23172a5a'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm-1-8V4h2v3h3v2H9v3H7V9H4V7h3z'/%3E%3C/svg%3E");
transform: rotate(0deg);
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23172a5a'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zM4 7h8v2H4V7z'/%3E%3C/svg%3E");
transform: rotate(0deg);
}
.accordion-button::before {
content: attr(data-number) ".";
margin-right: 10px;
color: #172a5a;
}
#faqAccordion .accordion-header .accordion-button {
font-size: 22px;
font-weight: 700;
background-color: #f8f9fa;
color: var(--color-text);
}
#faqAccordion .accordion-body {
background-color: #f8f9fa;
font-size: 18px;
font-weight: 600;
color: var(--color-text);
}
.page-banner {
position: relative;
}
.page-banner img {
min-height: 250px;
object-fit: cover;
}
.care-list i {
background-color: var(--color-primary);
color: #fff;
padding: 6px 5px;
border-radius: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-size: 14px;
}
.complex-type .bg-primary,
.complex-type .bg-primary h2 {
color: #fff;
}
.contact-page .form-control {
min-height: 50px;
background-color: #9d168f;
color: #fff;
}
.contact-page .form-control::placeholder {
color: #ddddddc9;
}
.our-values .icon-circle {
width: 150px;
height: 150px;
background: linear-gradient(135deg, #eaf4ff, #f6faff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.our-values .icon-circle img {
width: 100px;
height: 100px;
object-fit: contain;
transition: transform 0.3s ease;
}
.value-card {
transition: all 0.35s ease;
background-color: #fff;
}
.value-card:hover {
transform: translateY(-8px);
box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.08);
}
.value-card:hover .icon-circle {
background: linear-gradient(135deg, #007bff20, #0d6efd10);
transform: scale(1.1);
}
.value-card:hover img {
transform: scale(1.15);
}
.our-values h3 {
color: var(--color-secondary);
font-weight: 700;
}
/* <----------------> */
.training-hero {
background: #30318e;
color: #fff;
border-radius: 1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.training-card {
border: none;
border-radius: 0.75rem;
transition: all 0.3s ease;
}
.training-card:hover {
transform: translateY(-5px);
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
}
.training-card .card-body {
padding: 1.25rem;
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 25px !important;
}
.hover-card {
transition: all 0.4s ease;
}
.hover-card:hover {
transform: translateY(-8px) scale(1.05);
}
#training-list h3 {
font-weight: 700;
color: #063b58;
}
#training-list .card {
border: none;
border-radius: 0.75rem;
transition: all 0.3s ease;
}
#training-list .card:hover {
transform: translateY(-5px);
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
}
#training-list .card-title {
font-size: 20px;
font-weight: 700;
color: #9d168f;
}
/* -----kicumen-------- */
.feature-section {
position: relative;
}
.bg-shape {
position: absolute;
/* top: -80px; */
/* right: -100px; */
width: 380px;
height: 380px;
/* background: radial-gradient(circle, #dff0ff, #f4f8ff 70%); */
background: radial-gradient(circle, #dff0ff, #ff0aff21 70%);
border-radius: 50%;
z-index: -1;
opacity: 0.7;
}
.feature-card {
padding: 40px 30px;
border-radius: 20px;
background: #fff;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
transition: .3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.feature-card::before {
content: "";
width: 100%;
height: 6px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
position: absolute;
top: 0;
left: 0;
}
.feature-icon {
width: 85px;
height: 85px;
background: var(--color-primary);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
color: #fff;
margin: 0 auto 15px;
transition: .3s ease;
}
.feature-card:hover .feature-icon {
background: var(--color-primary);
color: white;
}
.what-offer {
background-color: #8b0115;
color: #fff;
}
/* ------------------- */
.cta-section {
background: linear-gradient(135deg, #9b23ea, #8b0115);
color: #fff;
padding: 90px 20px;
border-radius: 12px;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section .cta-icon {
font-size: 45px;
margin-bottom: 15px;
}
.phone-box {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.15);
padding: 14px 28px;
border-radius: 50px;
margin-top: 20px;
transition: .3s ease;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.phone-box:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-4px);
}
.phone-box a {
color: #fff;
font-size: 24px;
font-weight: 600;
text-decoration: none;
}
/* Decorative background circles */
.cta-section::before,
.cta-section::after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
z-index: 0;
}
.cta-section::before {
width: 220px;
height: 220px;
bottom: -40px;
right: -40px;
}
.cta-section::after {
width: 140px;
height: 140px;
top: -30px;
left: -30px;
}
.cta-content {
position: relative;
z-index: 2;
}
/* ------------------- */
.footer-top-sec {
font-size: 16px;
background-image: url('../img/kent-middle-bg.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-blend-mode: multiply;
background-color: rgba(0, 0, 0, 0.5);
}
@media (min-width: 992px) {
.training-hero {
padding: 3rem !important;
}
.w-lg-auto {
width: auto !important;
}
.page-banner img {
object-fit: cover;
height: 600px;
max-height: 600px;
}
}
/* <----------------> */
@media screen and (max-width: 991px) {
.page-banner .banner-text {
position: inherit;
width: 100%;
transform: translate(0%) !important;
text-align: center;
color: #fff;
background-color: transparent;
padding: 20px;
}
.banner-text .container #banner-text-edit {
max-width: 100%;
}
}
@media screen and (max-width: 1600px) {}
@media screen and (min-width: 1200px) {
/* .header .navbar-nav .nav-item a:hover,
.header-main .navbar-nav .nav-item.active a {
color: var(--color-primary);
background-color: #ffffff00;
border-bottom: 3px solid #fff;
} */
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
.header .navbar-nav .nav-item a {
font-size: 18px;
}
}
@media screen and (max-width: 767px) {
h1 {
font-size: 40px;
}
h2 {
font-size: 35px;
}
h3 {
font-size: 25px;
}
h4 {
font-size: 22px;
}
h5 {
font-size: 20px;
}
}