/* ========================================
AVC MANPOWER CENTER - COMPLETE STYLESHEET
All CSS Combined in One File
======================================== */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
:root {
--primary-color: #e51c22;
--secondary-color: #284389;
--dark-color: #1a1a1a;
--light-color: #f8f9fa;
--border-color: #e0e0e0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
color: #333;
overflow-x: hidden;
line-height: 1.6;
}
html {
scroll-behavior: smooth;
}
img {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
transition: all 0.3s ease;
}
/* ========================================
TOP BAR
======================================== */
.top-bar {
background: var(--secondary-color);
color: white;
padding: 10px 0;
font-size: 0.85rem;
}
.top-bar a {
color: white;
text-decoration: none;
margin-right: 20px;
transition: opacity 0.3s;
display: inline-block;
}
.top-bar a:hover {
opacity: 0.8;
}
.top-bar i {
margin-right: 5px;
color: #fff;
}
/* Hide timing on mobile */
.top-bar-timing {
display: inline-block;
}
/* ========================================
NAVIGATION
======================================== */
.navbar {
background: white;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
padding: 8px 0;
transition: all 0.3s;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: 800;
color: var(--primary-color) !important;
letter-spacing: 0.5px;
width: 230px;
padding: 0;
}
.navbar-brand span {
color: var(--secondary-color);
display: block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 2px;
}
.navbar-nav .nav-link {
color: var(--dark-color);
font-weight: 500;
padding: 8px 18px !important;
transition: color 0.3s;
font-size: 0.95rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--primary-color);
}
.dropdown-menu {
border: none;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
border-radius: 0;
max-height: 400px;
overflow: auto;
margin: 0!important;
}
.dropdown-item {
padding: 10px 20px;
font-weight: 500;
transition: all 0.3s;
}
.dropdown-item:hover {
background: var(--primary-color);
color: white;
}
.btn-inquire {
background: var(--primary-color);
color: white !important;
padding: 10px 19px;
border-radius: 5px;
font-weight: 600;
border: 2px solid var(--primary-color);
transition: all 0.3s;
text-transform: uppercase;
font-size: 0.85rem;
/*! letter-spacing: 0.5px; */
}
.btn-inquire:hover {
background: #284389;
color: #fff !important;
}
/* ========================================
ANIMATED NAVBAR TOGGLE BUTTON
======================================== */
.navbar-toggler {
width: 50px;
height: 50px;
position: relative;
border: 2px solid var(--primary-color) !important;
border-radius: 8px;
padding: 0;
transition: all 0.3s;
background: transparent;
}
.navbar-toggler:focus {
box-shadow: none;
outline: none;
}
.navbar-toggler:hover {
background: rgba(229, 28, 34, 0.05);
}
/* Hide default icon */
.navbar-toggler-icon {
display: none;
}
/* Custom animated hamburger */
.navbar-toggler::before,
.navbar-toggler::after,
.navbar-toggler span {
content: '';
display: block;
width: 26px;
height: 2px;
background: var(--primary-color);
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: all 0.3s ease;
}
.navbar-toggler::before {
top: 14px;
}
.navbar-toggler span {
position: relative;
}
.navbar-toggler::after {
bottom: 14px;
}
/* Animated state when clicked */
.navbar-toggler[aria-expanded="true"]::before {
top: 24px;
transform: translateX(-50%) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] span {
opacity: 0;
transform: translateX(-50%) scale(0);
}
.navbar-toggler[aria-expanded="true"]::after {
bottom: 24px;
transform: translateX(-50%) rotate(-45deg);
}
/* Add span element via JavaScript if not exists */
.navbar-toggler.has-icon::before,
.navbar-toggler.has-icon::after {
display: none;
}
/* ========================================
HERO SLIDER
======================================== */
.hero-slider {
position: relative;
overflow: hidden;
}
.carousel-item {
height: 90vh;
min-height: 600px;
position: relative;
}
.carousel-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.carousel-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(11, 25, 60, 0.9), rgba(0, 0, 0, 0.37));
}
.carousel-caption-custom {
position: absolute;
top: 44%;
transform: translateY(-50%);
left: 0;
right: 0;
text-align: left;
color: white;
z-index: 10;
}
.carousel-caption-custom h1 {
font-size: clamp(2rem, 4vw, 4rem);
font-weight: 600;
margin-bottom: 20px;
line-height: 55px;
color: white;
}
.carousel-caption-custom p {
font-size: clamp(1rem, 2vw, 1.3rem);
margin-bottom: 30px;
color: rgba(255,255,255,0.95);
font-weight: 400;
}
.btn-hero-slider {
background: var(--primary-color);
color: white;
padding: 15px 40px;
border-radius: 5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid var(--primary-color);
transition: all 0.3s;
display: inline-block;
text-decoration: none;
font-size: 0.95rem;
}
.btn-hero-slider:hover {
background: white;
color: var(--primary-color);
border-color: white;
}
/* Slider Controls */
.carousel-control-prev,
.carousel-control-next {
width: 60px;
height: 60px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 1;
}
.carousel-control-prev {
left: 30px;
}
.carousel-control-next {
right: 30px;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
background: var(--primary-color);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 25px;
height: 25px;
}
/* Animations */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.carousel-item.active .animate-slide-up {
animation: slideUp 0.8s ease forwards;
opacity: 0;
}
.carousel-item.active .animate-slide-up.delay-1 {
animation-delay: 0.2s;
}
.carousel-item.active .animate-slide-up.delay-2 {
animation-delay: 0.4s;
}
/* ========================================
USP SECTION
======================================== */
.usp-section {
margin-top: -80px;
position: relative;
z-index: 100;
}
.usp-box {
background: white;
padding: 40px 30px;
text-align: center;
border-right: 1px solid var(--border-color);
transition: all 0.3s;
}
.usp-box:last-child {
border-right: none;
}
.usp-box:hover {
background: var(--primary-color);
color: white;
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.usp-box i {
font-size: 3.5rem;
color: var(--primary-color);
margin-bottom: 20px;
transition: all 0.3s;
}
.usp-box:hover i {
color: white;
transform: scale(1.1);
}
.usp-box h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px;
color: var(--secondary-color);
transition: color 0.3s;
}
.usp-box:hover h3 {
color: white;
}
.usp-box p {
margin: 0;
font-size: 0.95rem;
color: #666;
transition: color 0.3s;
}
.usp-box:hover p {
color: rgba(255,255,255,0.9);
}
/* ========================================
PAGE HEADER
======================================== */
.page-header {
background: linear-gradient(rgba(21, 59, 157, 0.45), rgba(51, 51, 51, 0.85)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
padding: 40px 0 40px;
color: white;
text-align: center;
}
.page-header h1 {
font-size: clamp(2rem, 5vw, 2.3rem);
font-weight: 600;
margin-bottom: 0px;
}
.breadcrumb {
background: transparent;
justify-content: center;
margin: 0;
padding: 0;
}
.breadcrumb-item {
font-size: 0.95rem;
}
.breadcrumb-item a {
color: white;
text-decoration: none;
}
.breadcrumb-item a:hover {
text-decoration: underline;
}
.breadcrumb-item.active {
color: rgba(255,255,255,0.8);
}
.breadcrumb-item + .breadcrumb-item::before {
color: white;
}
/* ========================================
SECTION STYLES
======================================== */
.section {
padding: 50px 0;
}
.section-title {
text-align: center;
margin-bottom: 20px;
}
.section-tag {
display: inline-block;
color: var(--primary-color);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
}
.section-title h2 {
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 800;
color: var(--secondary-color);
margin-bottom: 15px;
position: relative;
}
.section-title h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: var(--primary-color);
}
.section-title p {
font-size: 1.1rem;
color: #666;
margin-top: 20px;
}
/* ========================================
ABOUT HOME SECTION
======================================== */
.about-home-section {
background: var(--light-color);
}
.about-image-wrapper {
position: relative;
}
.about-img-home {
border-radius: 10px;
box-shadow: 0 15px 50px rgba(0,0,0,0.15);
width: 100%;
}
.experience-badge {
position: absolute;
top: 30px;
right: 30px;
background: var(--primary-color);
color: white;
padding: 25px;
border-radius: 10px;
text-align: center;
box-shadow: 0 10px 30px rgba(229, 28, 34, 0.3);
}
.experience-badge h3 {
font-size: 2.5rem;
font-weight: 800;
margin: 0;
line-height: 1;
}
.experience-badge p {
margin: 5px 0 0 0;
font-size: 0.9rem;
font-weight: 600;
}
.about-content-home h2 {
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 800;
color: var(--secondary-color);
margin-bottom: 20px;
}
.about-content-home p {
font-size: 1rem;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
.about-contact-box {
background: var(--light-color);
padding: 25px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 20px;
margin: 30px 0;
border-left: 4px solid var(--primary-color);
}
.about-contact-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.about-contact-icon i {
font-size: 1.5rem;
color: white;
}
.about-contact-info span {
display: block;
font-size: 0.85rem;
color: #666;
margin-bottom: 5px;
font-weight: 500;
}
.phone-number-big {
font-size: 1.8rem;
font-weight: 800;
color: var(--secondary-color);
text-decoration: none;
display: block;
line-height: 1;
}
.phone-number-big:hover {
color: var(--primary-color);
}
.about-features-home {
list-style: none;
padding: 0;
margin: 25px 0;
}
.about-features-home li {
padding: 10px 0;
font-size: 1rem;
color: #333;
font-weight: 500;
}
.about-features-home li i {
color: var(--primary-color);
margin-right: 10px;
font-size: 1.2rem;
}
.btn-primary-custom {
background: var(--primary-color);
color: white;
padding: 12px 35px;
border-radius: 5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid var(--primary-color);
transition: all 0.3s;
display: inline-block;
text-decoration: none;
font-size: 0.9rem;
}
.btn-primary-custom:hover {
background: var(--secondary-color);
border-color: var(--secondary-color);
color: white;
}
/* ========================================
SERVICES HOME SECTION
======================================== */
.services-home-section {
background: white;
}
.service-card-home {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
transition: all 0.3s;
height: 100%;
border: 2px solid #fff;
}
.service-card-home:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
border-color: var(--primary-color);
}
.service-image {
position: relative;
overflow: hidden;
height: 250px;
}
.service-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.service-card-home:hover .service-image img {
transform: scale(1.1);
}
.service-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(40, 67, 137, 0.36), rgba(229, 28, 34, 0));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
display: none;
}
.service-card-home:hover .service-overlay {
opacity: 1;
}
.service-overlay i {
font-size: 4rem;
color: white;
transform: scale(0);
transition: transform 0.3s 0.1s;
}
.service-card-home:hover .service-overlay i {
transform: scale(1);
}
.service-content {
padding: 30px 25px;
}
.service-content h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.service-content p {
font-size: 0.95rem;
color: #666;
line-height: 1.7;
margin-bottom: 20px;
}
.btn-know-more {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
font-size: 0.95rem;
}
.btn-know-more:hover {
color: var(--secondary-color);
gap: 12px;
}
.btn-know-more i {
transition: transform 0.3s;
}
.btn-know-more:hover i {
transform: translateX(5px);
}
/* ========================================
CLIENTS SECTION
======================================== */
.clients-section {
background: var(--light-color);
}
.clients-slider {
padding: 20px 0;
}
.client-item {
background: white;
padding: 0;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
height: 117px;
transition: all 0.3s;
border: 1px solid var(--border-color);
}
.client-item img {
max-width: 100%;
max-height: 80px;
/*! filter: grayscale(100%); */
/*! opacity: 0.6; */
transition: all 0.3s;
}
.client-item:hover {
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transform: translateY(-5px);
}
.client-item:hover img {
filter: grayscale(0%);
opacity: 1;
}
/* ========================================
GALLERY SECTION
======================================== */
.gallery-section {
background: white;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 10px;
height: 280px;
cursor: pointer;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(40, 67, 137, 0.9), rgba(229, 28, 34, 0));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay i {
font-size: 3rem;
color: white;
transform: scale(0);
transition: transform 0.3s 0.1s;
}
.gallery-item:hover .gallery-overlay i {
transform: scale(1);
}
/* ========================================
CTA HOME SECTION
======================================== */
.cta-home-section {
background: linear-gradient(135deg, var(--secondary-color), #324b8e);
padding: 40px 0;
color: white;
}
.cta-home-section h2 {
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 800;
margin-bottom: 10px;
}
.cta-home-section p {
font-size: 1.1rem;
margin: 0;
opacity: 0.95;
}
.cta-phone {
border-radius: 10px;
display: flex;
align-items: center;
gap: 20px;
}
.cta-phone i {
width: 60px;
height: 60px;
/*! background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: white;
flex-shrink: 0;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.cta-phone span {
display: block;
font-size: 0.9rem;
color: #cecece;
font-weight: 600;
margin-bottom: 5px;
text-align: left;
}
.cta-phone-number {
font-size: 1.8rem;
font-weight: 800;
color: #fff;
text-decoration: none;
display: block;
line-height: 1;
}
.cta-phone-number:hover {
color: #ffb6b8;
text-decoration: underline;
}
/* ========================================
CONTACT PAGE - PAGE HEADER
======================================== */
.page-header-contact {
background: linear-gradient(135deg, rgba(40, 67, 137, 0.95), rgba(229, 28, 34, 0.9)),
url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
padding: 80px 0 60px;
color: white;
}
.page-header-contact h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 15px;
}
.page-header-contact p {
font-size: 1.2rem;
opacity: 0.95;
}
/* ========================================
QUICK CONTACT CARDS
======================================== */
.quick-contact-section {
padding: 60px 0;
background: var(--light-color);
margin-top: -40px;
position: relative;
z-index: 10;
}
.quick-contact-card {
background: white;
padding: 40px 30px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
transition: all 0.4s;
height: 100%;
border: 2px solid transparent;
}
.quick-contact-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
border-color: var(--primary-color);
}
.icon-wrapper {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 2rem;
color: white;
transition: all 0.4s;
}
.quick-contact-card:hover .icon-wrapper {
transform: scale(1.1) rotate(360deg);
}
.quick-contact-card h4 {
font-size: 1.4rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 10px;
}
.quick-contact-card p {
font-size: 0.95rem;
color: #666;
margin-bottom: 20px;
}
.contact-link {
display: block;
color: var(--primary-color);
font-weight: 600;
font-size: 1.05rem;
text-decoration: none;
margin-bottom: 8px;
transition: all 0.3s;
}
.contact-link:hover {
color: var(--secondary-color);
padding-left: 5px;
}
/* ========================================
MAIN CONTACT SECTION
======================================== */
.main-contact-section {
padding: 80px 0;
background: white;
}
/* CONTACT INFO WRAPPER */
.contact-info-wrapper {
background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
padding: 60px 40px;
height: 100%;
position: relative;
overflow: hidden;
color: white;
}
.contact-info-header h2 {
font-size: 2rem;
font-weight: 800;
margin-bottom: 15px;
color: white;
}
.contact-info-header p {
font-size: 1rem;
opacity: 0.9;
margin-bottom: 40px;
}
.contact-detail-item {
display: flex;
gap: 20px;
margin-bottom: 35px;
position: relative;
z-index: 10;
}
.detail-icon {
width: 50px;
height: 50px;
background: rgba(255,255,255,0.15);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
backdrop-filter: blur(10px);
transition: all 0.3s;
}
.contact-detail-item:hover .detail-icon {
background: rgba(255,255,255,0.25);
transform: scale(1.1);
}
.detail-icon i {
font-size: 1.3rem;
color: white;
}
.detail-content h5 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 8px;
color: white;
}
.detail-content p {
font-size: 0.95rem;
margin: 0;
opacity: 0.9;
line-height: 1.7;
}
.detail-content a {
color: white;
text-decoration: none;
transition: opacity 0.3s;
}
.detail-content a:hover {
opacity: 0.8;
}
/* CONTACT SOCIAL */
.contact-social {
margin-top: 40px;
position: relative;
z-index: 10;
}
.contact-social h5 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 20px;
color: white;
}
.social-links-contact {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.social-links-contact a {
width: 45px;
height: 45px;
background: rgba(255,255,255,0.15);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
text-decoration: none;
transition: all 0.3s;
backdrop-filter: blur(10px);
}
.social-links-contact a:hover {
background: white;
color: var(--primary-color);
transform: translateY(-5px);
}
/* DECORATIVE CIRCLES */
.decorative-circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.circle {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,0.05);
animation: float 20s infinite;
}
.circle-1 {
width: 300px;
height: 300px;
top: -100px;
right: -100px;
}
.circle-2 {
width: 200px;
height: 200px;
bottom: 50px;
left: -50px;
animation-delay: 5s;
}
.circle-3 {
width: 150px;
height: 150px;
bottom: 200px;
right: 100px;
animation-delay: 10s;
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
/* INQUIRY FORM WRAPPER */
.inquiry-form-wrapper {
background: white;
padding: 60px 50px;
}
.form-header {
margin-bottom: 40px;
}
.form-header h3 {
font-size: 2rem;
font-weight: 800;
color: var(--secondary-color);
margin-bottom: 10px;
}
.form-header p {
font-size: 1rem;
color: #666;
}
/* CUSTOM FORM STYLES */
.form-group-custom {
position: relative;
margin-bottom: 25px;
}
.form-group-custom i {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 1.1rem;
z-index: 2;
transition: color 0.3s;
}
.form-group-custom textarea + i {
top: 25px;
transform: none;
}
.form-control-custom {
width: 100%;
padding: 15px 20px 15px 55px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 0.95rem;
transition: all 0.3s;
background: white;
font-family: 'Inter', sans-serif;
}
.form-control-custom:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(229, 28, 34, 0.1);
}
.form-control-custom:focus + label,
.form-control-custom:not(:placeholder-shown) + label {
top: -10px;
left: 15px;
font-size: 0.75rem;
background: white;
padding: 0 5px;
color: var(--primary-color);
}
.form-group-custom:focus-within i {
color: var(--primary-color);
}
.form-group-custom label {
position: absolute;
left: 55px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 0.95rem;
pointer-events: none;
transition: all 0.3s;
background: transparent;
}
textarea.form-control-custom {
resize: vertical;
min-height: 120px;
padding-top: 20px;
}
select.form-control-custom {
cursor: pointer;
}
/* CHECKBOX */
.form-check-custom {
margin-bottom: 25px;
}
.form-check-custom .form-check-input {
width: 20px;
height: 20px;
border: 2px solid #e0e0e0;
border-radius: 5px;
cursor: pointer;
}
.form-check-custom .form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.form-check-custom .form-check-label {
margin-left: 10px;
font-size: 0.9rem;
color: #666;
cursor: pointer;
}
.form-check-custom a {
color: var(--primary-color);
text-decoration: none;
}
.form-check-custom a:hover {
text-decoration: underline;
}
/* SUBMIT BUTTON */
.btn-submit-custom {
width: 100%;
padding: 18px 30px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
border-radius: 10px;
font-size: 1.05rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 10px 30px rgba(229, 28, 34, 0.3);
}
.btn-submit-custom:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(229, 28, 34, 0.4);
}
.btn-submit-custom i {
transition: transform 0.3s;
}
.btn-submit-custom:hover i {
transform: translateX(5px);
}
/* SUCCESS MESSAGE */
.alert-success-custom {
display: none;
background: #d4edda;
border: 2px solid #28a745;
border-radius: 10px;
padding: 20px;
margin-top: 25px;
align-items: center;
gap: 15px;
}
.alert-success-custom.show {
display: flex;
}
.alert-success-custom i {
font-size: 2.5rem;
color: #28a745;
}
.alert-success-custom h5 {
font-size: 1.2rem;
font-weight: 700;
color: #155724;
margin-bottom: 5px;
}
.alert-success-custom p {
margin: 0;
color: #155724;
font-size: 0.95rem;
}
/* ========================================
MAP SECTION
======================================== */
.map-section {
position: relative;
background: var(--light-color);
}
.map-wrapper {
position: relative;
}
.map-wrapper iframe {
width: 100%;
filter: grayscale(0.3);
}
.map-overlay-cards {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
z-index: 100;
}
.map-location-card {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 15px 50px rgba(0,0,0,0.15);
display: flex;
gap: 20px;
align-items: center;
transition: all 0.3s;
}
.map-location-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.location-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.location-icon i {
font-size: 1.8rem;
color: white;
}
.location-details h5 {
font-size: 1.2rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 8px;
}
.location-details p {
font-size: 0.9rem;
color: #666;
margin-bottom: 12px;
line-height: 1.6;
}
.btn-direction {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.3s;
}
.btn-direction:hover {
color: var(--secondary-color);
gap: 12px;
}
/* CONTACT CTA SECTION */
.contact-cta-section {
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
padding: 50px 0;
color: white;
}
.contact-cta-section h2 {
font-size: clamp(1.8rem, 4vw, 2.2rem);
font-weight: 800;
margin-bottom: 10px;
}
.contact-cta-section p {
font-size: 1.1rem;
margin: 0;
opacity: 0.95;
}
.btn-call-now {
display: inline-flex;
align-items: center;
gap: 15px;
background: white;
color: var(--primary-color);
padding: 18px 35px;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.btn-call-now:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
color: var(--secondary-color);
}
.btn-call-now i {
font-size: 1.5rem;
animation: ring 2s infinite;
}
@keyframes ring {
0%, 100% {
transform: rotate(0deg);
}
10%, 30% {
transform: rotate(-15deg);
}
20%, 40% {
transform: rotate(15deg);
}
}
/* ========================================
FOOTER
======================================== */
.footer {
background: var(--dark-color);
color: white;
padding: 60px 0 0;
}
.footer-about h5,
.footer-links h5,
.footer-contact h5 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 25px;
color: white;
}
.footer-about p {
font-size: 0.95rem;
line-height: 1.8;
color: #bbb;
}
.footer-links ul,
.footer-contact ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links ul li,
.footer-contact ul li {
margin-bottom: 12px;
}
.footer-links ul li a,
.footer-contact ul li a {
color: #bbb;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s;
display: inline-block;
}
.footer-links ul li a:hover,
.footer-contact ul li a:hover {
color: var(--primary-color);
padding-left: 5px;
}
.footer-contact ul li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.95rem;
color: #bbb;
}
.footer-contact ul li i {
color: var(--primary-color);
margin-top: 3px;
flex-shrink: 0;
}
.social-links a {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.1);
color: white;
border-radius: 5px;
margin-right: 10px;
transition: all 0.3s;
text-decoration: none;
font-size: 1.1rem;
}
.social-links a:hover {
background: var(--primary-color);
transform: translateY(-3px);
}
.footer-bottom {
margin-top: 50px;
padding: 25px 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-bottom p {
margin: 0;
color: #888;
font-size: 0.9rem;
}
/* ========================================
SCROLL TO TOP
======================================== */
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--primary-color);
color: white;
border-radius: 5px;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
z-index: 999;
border: none;
font-size: 1.3rem;
}
.scroll-top:hover {
background: var(--secondary-color);
transform: translateY(-5px);
}
.scroll-top.show {
display: flex;
}
/* ========================================
RESPONSIVE DESIGN
======================================== */
/* Tablets (992px and below) */
@media (max-width: 991px) {
.navbar-nav {
padding: 20px 0;
}
.navbar-nav .nav-link {
padding: 10px 0 !important;
font-size: 1rem;
}
.btn-inquire {
margin-top: 15px;
font-size: 0.9rem;
}
.carousel-item {
height: 70vh;
min-height: 500px;
}
.carousel-control-prev,
.carousel-control-next {
width: 50px;
height: 50px;
}
.carousel-control-prev {
left: 15px;
}
.carousel-control-next {
right: 15px;
}
.usp-section {
margin-top: 0;
}
.usp-box {
border-right: none;
border-bottom: 1px solid var(--border-color);
padding: 35px 25px;
}
.usp-box:last-child {
border-bottom: none;
}
.usp-box i {
font-size: 3rem;
}
.usp-box h3 {
font-size: 1.3rem;
}
.about-contact-box {
margin: 20px 0;
}
.phone-number-big {
font-size: 1.5rem;
}
.experience-badge {
bottom: 15px;
right: 15px;
padding: 20px;
}
.experience-badge h3 {
font-size: 2rem;
}
.service-image {
height: 220px;
}
.service-content {
padding: 25px 20px;
}
.service-content h4 {
font-size: 1.2rem;
}
.service-content p {
font-size: 0.9rem;
}
.cta-phone {
margin-top: 20px;
}
.gallery-item {
height: 240px;
margin-bottom: 15px;
}
.section {
padding: 60px 0;
}
.section-title h2 {
font-size: 2rem;
}
.section-title p {
font-size: 1rem;
}
.contact-info-wrapper,
.inquiry-form-wrapper {
padding: 50px 30px;
}
.map-overlay-cards {
position: static;
padding: 30px 0;
}
.map-location-card {
margin-bottom: 15px;
}
.contact-cta-section {
text-align: center;
}
.btn-call-now {
margin-top: 20px;
}
}
/* Mobile Landscape & Tablets (768px and below) */
@media (max-width: 768px) {
/* Top Bar - Hide timing on mobile */
.top-bar-timing {
display: none;
}
.top-bar {
text-align: center;
padding: 12px 0;
}
.top-bar a {
display: block;
margin: 5px 0;
font-size: 0.85rem;
}
/* Navbar */
.navbar {
padding: 12px 0;
}
.navbar-brand {
font-size: 1.3rem;
}
.navbar-brand span {
font-size: 0.65rem;
}
/* Carousel */
.carousel-item {
height: 60vh;
min-height: 450px;
}
.carousel-caption-custom {
text-align: center;
padding: 0 15px;
}
.carousel-caption-custom h1 {
font-size: 1.8rem;
margin-bottom: 15px;
}
.carousel-caption-custom p {
font-size: 0.95rem;
margin-bottom: 20px;
}
.btn-hero-slider {
padding: 12px 30px;
font-size: 0.85rem;
}
/* USP Section */
.usp-box {
padding: 30px 20px;
}
.usp-box i {
font-size: 2.5rem;
}
.usp-box h3 {
font-size: 1.2rem;
}
.usp-box p {
font-size: 0.9rem;
}
/* About Section */
.about-content-home {
margin-top: 30px;
}
.about-content-home h2 {
font-size: 1.8rem;
}
.about-content-home p {
font-size: 0.95rem;
}
.about-contact-box {
padding: 20px;
gap: 15px;
}
.about-contact-icon {
width: 50px;
height: 50px;
}
.about-contact-icon i {
font-size: 1.3rem;
}
.phone-number-big {
font-size: 1.4rem;
}
.about-features-home li {
font-size: 0.95rem;
padding: 8px 0;
}
.btn-primary-custom {
padding: 12px 30px;
font-size: 0.85rem;
}
/* Services */
.service-image {
height: 200px;
}
.service-content {
padding: 20px;
}
.service-content h4 {
font-size: 1.15rem;
}
.service-content p {
font-size: 0.9rem;
margin-bottom: 15px;
}
/* Gallery */
.gallery-item {
height: 220px;
}
/* CTA Section */
.cta-home-section {
padding: 50px 0;
text-align: center;
}
.cta-home-section h2 {
font-size: 1.8rem;
}
.cta-home-section p {
font-size: 1rem;
}
.cta-phone {
padding: 15px 20px;
margin-top: 25px;
}
.cta-phone i {
width: 50px;
height: 50px;
font-size: 1.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.cta-phone-number {
font-size: 1.5rem;
}
/* Contact Page */
.page-header-contact {
padding: 60px 0 40px;
text-align: center;
}
.page-header-contact h1 {
font-size: 2rem;
}
.page-header-contact p {
font-size: 1rem;
}
.page-header-contact .breadcrumb {
justify-content: center;
}
.quick-contact-section {
padding: 50px 0;
margin-top: -30px;
}
.quick-contact-card {
margin-bottom: 20px;
padding: 35px 25px;
}
.icon-wrapper {
width: 70px;
height: 70px;
font-size: 1.8rem;
}
.quick-contact-card h4 {
font-size: 1.3rem;
}
.contact-info-wrapper,
.inquiry-form-wrapper {
padding: 40px 25px;
}
.contact-info-header h2 {
font-size: 1.8rem;
}
.form-header h3 {
font-size: 1.8rem;
}
.decorative-circles {
display: none;
}
.contact-cta-section h2 {
font-size: 1.6rem;
}
.contact-cta-section p {
font-size: 1rem;
}
.btn-call-now {
padding: 15px 25px;
font-size: 0.95rem;
}
/* Footer */
.footer {
padding: 50px 0 0;
}
.footer-about,
.footer-links,
.footer-contact {
margin-bottom: 35px;
}
.footer-about h5,
.footer-links h5,
.footer-contact h5 {
font-size: 1.2rem;
margin-bottom: 20px;
}
.footer-bottom {
margin-top: 40px;
padding: 20px 0;
}
.footer-bottom p {
font-size: 0.85rem;
}
/* Scroll to top */
.scroll-top {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
font-size: 1.2rem;
}
/* Section spacing */
.section {
padding: 50px 0;
}
.section-title {
margin-bottom: 40px;
}
.section-title h2 {
font-size: 1.8rem;
}
.section-title p {
font-size: 0.95rem;
}
}
/* Small Mobile (576px and below) */
@media (max-width: 576px) {
/* Top Bar */
.top-bar {
padding: 10px 0;
}
.top-bar a {
font-size: 0.8rem;
margin: 4px 0;
}
/* Navbar */
.navbar-brand {
font-size: 1.2rem;
}
.navbar-brand span {
font-size: 0.6rem;
}
/* Carousel */
.carousel-item {
min-height: 400px;
}
.carousel-caption-custom h1 {
font-size: 1.5rem;
}
.carousel-caption-custom p {
font-size: 0.9rem;
}
.btn-hero-slider {
padding: 10px 25px;
font-size: 0.8rem;
}
.carousel-control-prev,
.carousel-control-next {
width: 40px;
height: 40px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 20px;
height: 20px;
}
/* USP */
.usp-box {
padding: 25px 15px;
}
.usp-box i {
font-size: 2.2rem;
margin-bottom: 15px;
}
.usp-box h3 {
font-size: 1.1rem;
}
.usp-box p {
font-size: 0.85rem;
}
/* About */
.experience-badge {
position: static;
margin-top: 20px;
display: inline-block;
padding: 15px;
}
.experience-badge h3 {
font-size: 1.8rem;
}
.experience-badge p {
font-size: 0.85rem;
}
.about-contact-box {
flex-direction: column;
text-align: center;
padding: 20px 15px;
}
.phone-number-big {
font-size: 1.3rem;
}
/* Services */
.service-image {
height: 180px;
}
.service-content {
padding: 20px 15px;
}
.service-content h4 {
font-size: 1.1rem;
}
.service-content p {
font-size: 0.85rem;
}
/* Gallery */
.gallery-item {
height: 200px;
}
/* CTA */
.cta-phone {
/*! flex-direction: column; */
padding: 20px;
text-align: center;
margin: 0;
background: #3c5393;
}
.cta-phone-number {
font-size: 1.3rem;
}
/* Contact */
.quick-contact-section {
padding: 40px 0;
}
.quick-contact-card {
padding: 30px 20px;
}
.icon-wrapper {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.quick-contact-card h4 {
font-size: 1.2rem;
}
.contact-info-wrapper,
.inquiry-form-wrapper {
padding: 35px 20px;
}
.contact-info-header h2,
.form-header h3 {
font-size: 1.6rem;
}
.contact-detail-item {
gap: 15px;
margin-bottom: 30px;
}
.detail-icon {
width: 45px;
height: 45px;
}
.detail-icon i {
font-size: 1.2rem;
}
.detail-content h5 {
font-size: 1rem;
}
.detail-content p {
font-size: 0.9rem;
}
.form-control-custom {
padding: 14px 20px 14px 50px;
font-size: 0.9rem;
}
.form-group-custom i {
left: 18px;
font-size: 1rem;
}
.btn-submit-custom {
padding: 16px 25px;
font-size: 1rem;
}
.map-location-card {
flex-direction: column;
text-align: center;
padding: 20px;
}
.contact-cta-section {
padding: 40px 0;
}
.contact-cta-section h2 {
font-size: 1.5rem;
}
.btn-call-now {
padding: 14px 20px;
font-size: 0.9rem;
gap: 10px;
}
.btn-call-now i {
font-size: 1.3rem;
}
/* Section */
.section {
padding: 40px 0;
}
.section-title h2 {
font-size: 1.6rem;
}
.section-title p {
font-size: 0.9rem;
}
/* Footer */
.footer {
padding: 40px 0 0;
}
.footer-about h5,
.footer-links h5,
.footer-contact h5 {
font-size: 1.1rem;
}
.social-links a {
width: 36px;
height: 36px;
font-size: 1rem;
}
.footer-bottom {
padding: 18px 0;
}
.footer-bottom p {
font-size: 0.8rem;
}
}
/* Extra Small Mobile (400px and below) */
@media (max-width: 400px) {
.carousel-caption-custom h1 {
font-size: 29px;
line-height: normal;
letter-spacing: 0;
}
.carousel-caption-custom p {
font-size: 0.85rem;
}
.btn-hero-slider {
padding: 10px 20px;
font-size: 0.75rem;
}
.usp-box h3 {
font-size: 1rem;
}
.section-title h2 {
font-size: 1.4rem;
}
.phone-number-big {
font-size: 1.2rem;
}
.cta-phone-number {
font-size: 1.2rem;
}
}
/* Print Styles */
@media print {
.navbar,
.scroll-top,
.carousel-control-prev,
.carousel-control-next,
.footer {
display: none;
}
body {
color: #000;
}
a {
text-decoration: underline;
}
}
/* ========================================
ABOUT PAGE SPECIFIC STYLES
======================================== */
/* ========================================
ABOUT SECTION
======================================== */
.about-section {
background: var(--light-color);
}
.about-content h2,
.about-content h3 {
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 20px;
}
.about-content p {
font-size: 1rem;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
.about-features {
list-style: none;
padding: 0;
margin-top: 30px;
}
.about-features li {
padding: 12px 0;
font-size: 1rem;
color: #333;
font-weight: 500;
}
.about-features li i {
color: var(--primary-color);
margin-right: 10px;
font-size: 1.2rem;
}
.about-img {
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
width: 100%;
height: 100%;
object-fit: cover;
}
/* ========================================
MISSION & VISION SECTION
======================================== */
.mission-vision-section {
background: var(--light-color);
}
.mission-box,
.vision-box {
background: white;
padding: 40px;
border-radius: 15px;
border-left: 5px solid var(--primary-color);
height: 100%;
transition: all 0.3s;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.mission-box:hover,
.vision-box:hover {
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
transform: translateY(-5px);
}
.mission-box i,
.vision-box i {
font-size: 3.5rem;
color: var(--primary-color);
margin-bottom: 25px;
display: block;
}
.mission-box h3,
.vision-box h3 {
font-size: 1.8rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 20px;
}
.mission-box p,
.vision-box p {
font-size: 1rem;
line-height: 1.8;
color: #555;
margin: 0;
}
/* ========================================
STATISTICS / COUNTER SECTION
======================================== */
.stats-section {
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
color: white;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.stats-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.stat-box {
position: relative;
z-index: 2;
}
.stat-box i {
font-size: 3.5rem;
margin-bottom: 20px;
opacity: 0.9;
display: block;
}
.stat-box h3 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 10px;
line-height: 1;
}
.stat-box p {
font-size: 1.1rem;
margin: 0;
opacity: 0.9;
font-weight: 500;
}
/* Counter animation */
.counter {
display: inline-block;
}
/* ========================================
WHY CHOOSE US SECTION
======================================== */
.why-choose-section {
background: white;
}
.why-choose-box {
background: var(--light-color);
padding: 40px 30px;
border-radius: 15px;
text-align: center;
transition: all 0.3s;
height: 100%;
border: 2px solid transparent;
}
.why-choose-box:hover {
background: white;
border-color: var(--primary-color);
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.why-choose-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 2rem;
color: white;
transition: all 0.3s;
}
.why-choose-box:hover .why-choose-icon {
transform: scale(1.1) rotate(360deg);
}
.why-choose-box h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.why-choose-box p {
font-size: 0.95rem;
color: #666;
line-height: 1.7;
margin: 0;
}
/* ========================================
CORE VALUES SECTION
======================================== */
.core-values-section {
background: var(--light-color);
}
.value-card {
background: white;
padding: 35px 30px;
border-radius: 15px;
border-top: 4px solid var(--primary-color);
transition: all 0.3s;
height: 100%;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.value-icon {
width: 70px;
height: 70px;
background: rgba(229, 28, 34, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.3s;
}
.value-card:hover .value-icon {
background: var(--primary-color);
}
.value-icon i {
font-size: 2rem;
color: var(--primary-color);
transition: all 0.3s;
}
.value-card:hover .value-icon i {
color: white;
}
.value-card h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.value-card p {
font-size: 0.95rem;
color: #666;
line-height: 1.7;
margin: 0;
}
/* ========================================
TIMELINE SECTION
======================================== */
.timeline-section {
background: white;
padding: 80px 0;
}
.timeline {
position: relative;
padding: 20px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: var(--primary-color);
}
.timeline-item {
position: relative;
margin-bottom: 50px;
display: flex;
align-items: center;
}
.timeline-item:nth-child(odd) {
flex-direction: row-reverse;
}
.timeline-content {
width: calc(50% - 40px);
background: var(--light-color);
padding: 30px;
border-radius: 15px;
position: relative;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: all 0.3s;
}
.timeline-content:hover {
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transform: translateY(-5px);
}
.timeline-item:nth-child(odd) .timeline-content {
margin-right: auto;
}
.timeline-item:nth-child(even) .timeline-content {
margin-left: auto;
}
.timeline-year {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.3rem;
font-weight: 800;
border: 5px solid white;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.timeline-content h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 10px;
}
.timeline-content p {
font-size: 0.95rem;
color: #666;
line-height: 1.7;
margin: 0;
}
/* ========================================
TEAM SECTION
======================================== */
.team-section {
background: var(--light-color);
}
.team-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s;
height: 100%;
}
.team-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.team-image {
position: relative;
overflow: hidden;
height: 300px;
}
.team-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.team-card:hover .team-image img {
transform: scale(1.1);
}
.team-social {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 10px;
padding: 15px;
background: rgba(255,255,255,0.95);
transition: all 0.3s;
}
.team-card:hover .team-social {
bottom: 0;
}
.team-social a {
width: 40px;
height: 40px;
background: var(--light-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary-color);
text-decoration: none;
transition: all 0.3s;
}
.team-social a:hover {
background: var(--primary-color);
color: white;
transform: translateY(-3px);
}
.team-info {
padding: 25px;
text-align: center;
}
.team-info h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 8px;
}
.team-info .position {
font-size: 0.9rem;
color: var(--primary-color);
font-weight: 600;
margin-bottom: 10px;
}
.team-info p {
font-size: 0.9rem;
color: #666;
line-height: 1.6;
margin: 0;
}
/* ========================================
TESTIMONIALS SECTION
======================================== */
.testimonials-about-section {
background: white;
}
.testimonial-card-about {
background: var(--light-color);
padding: 35px 30px;
border-radius: 15px;
border-left: 4px solid var(--primary-color);
transition: all 0.3s;
height: 100%;
}
.testimonial-card-about:hover {
background: white;
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
transform: translateY(-5px);
}
.testimonial-rating {
color: #ffc107;
margin-bottom: 20px;
font-size: 1.1rem;
}
.testimonial-text {
font-size: 1rem;
line-height: 1.8;
color: #555;
font-style: italic;
margin-bottom: 25px;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info h5 {
font-size: 1.1rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 5px;
}
.author-info span {
font-size: 0.85rem;
color: #999;
}
/* ========================================
CERTIFICATIONS SECTION
======================================== */
.certifications-section {
background: var(--light-color);
}
.certification-card {
background: white;
padding: 30px;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: all 0.3s;
height: 100%;
}
.certification-card:hover {
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
transform: translateY(-5px);
}
.certification-badge {
width: 120px;
height: 120px;
margin: 0 auto 20px;
background: var(--light-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--primary-color);
}
.certification-badge i {
font-size: 3rem;
color: var(--primary-color);
}
.certification-card h4 {
font-size: 1.2rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 10px;
}
.certification-card p {
font-size: 0.9rem;
color: #666;
margin: 0;
}
/* ========================================
RESPONSIVE - ABOUT PAGE
======================================== */
/* Tablets */
@media (max-width: 991px) {
.mission-box,
.vision-box {
padding: 35px 30px;
margin-bottom: 30px;
}
.stat-box i {
font-size: 3rem;
}
.stat-box h3 {
font-size: 3rem;
}
.stat-box p {
font-size: 1rem;
}
.timeline::before {
left: 30px;
}
.timeline-item {
flex-direction: row !important;
padding-left: 70px;
}
.timeline-content {
width: 100%;
margin: 0 !important;
}
.timeline-year {
left: 30px;
transform: none;
width: 60px;
height: 60px;
font-size: 1.1rem;
}
.team-image {
height: 280px;
}
}
/* Mobile */
@media (max-width: 768px) {
.about-content {
margin-top: 30px;
}
.about-content h2,
.about-content h3 {
font-size: 1.8rem;
}
.about-content p {
font-size: 0.95rem;
}
.about-features li {
font-size: 0.95rem;
padding: 10px 0;
}
.mission-box,
.vision-box {
padding: 30px 25px;
}
.mission-box i,
.vision-box i {
font-size: 3rem;
margin-bottom: 20px;
}
.mission-box h3,
.vision-box h3 {
font-size: 1.6rem;
}
.mission-box p,
.vision-box p {
font-size: 0.95rem;
}
.stats-section {
padding: 60px 0;
}
.stat-box {
margin-bottom: 30px;
}
.stat-box i {
font-size: 2.5rem;
margin-bottom: 15px;
}
.stat-box h3 {
font-size: 2.5rem;
}
.stat-box p {
font-size: 0.95rem;
}
.why-choose-box {
padding: 35px 25px;
margin-bottom: 20px;
}
.why-choose-icon {
width: 70px;
height: 70px;
font-size: 1.8rem;
}
.why-choose-box h4 {
font-size: 1.2rem;
}
.why-choose-box p {
font-size: 0.9rem;
}
.value-card {
padding: 30px 25px;
margin-bottom: 20px;
}
.value-icon {
width: 60px;
height: 60px;
}
.value-icon i {
font-size: 1.8rem;
}
.value-card h4 {
font-size: 1.2rem;
}
.value-card p {
font-size: 0.9rem;
}
.timeline-section {
padding: 60px 0;
}
.timeline::before {
left: 20px;
}
.timeline-item {
padding-left: 60px;
}
.timeline-year {
left: 20px;
width: 50px;
height: 50px;
font-size: 1rem;
border-width: 3px;
}
.timeline-content {
padding: 25px 20px;
}
.timeline-content h4 {
font-size: 1.2rem;
}
.timeline-content p {
font-size: 0.9rem;
}
.team-image {
height: 260px;
}
.team-info {
padding: 20px;
}
.team-info h4 {
font-size: 1.2rem;
}
.testimonial-card-about {
padding: 30px 25px;
margin-bottom: 20px;
}
.testimonial-text {
font-size: 0.95rem;
}
.author-avatar {
width: 50px;
height: 50px;
}
.author-info h5 {
font-size: 1rem;
}
.certification-card {
padding: 25px 20px;
margin-bottom: 20px;
}
.certification-badge {
width: 100px;
height: 100px;
}
.certification-badge i {
font-size: 2.5rem;
}
.certification-card h4 {
font-size: 1.1rem;
}
}
/* Small Mobile */
@media (max-width: 576px) {
.mission-box,
.vision-box {
padding: 25px 20px;
}
.mission-box i,
.vision-box i {
font-size: 2.5rem;
}
.mission-box h3,
.vision-box h3 {
font-size: 1.4rem;
}
.stat-box i {
font-size: 2rem;
}
.stat-box h3 {
font-size: 2rem;
}
.stat-box p {
font-size: 0.9rem;
}
.why-choose-box {
padding: 30px 20px;
}
.why-choose-icon {
width: 60px;
height: 60px;
font-size: 1.6rem;
}
.why-choose-box h4 {
font-size: 1.1rem;
}
.value-card {
padding: 25px 20px;
}
.value-icon {
width: 55px;
height: 55px;
}
.value-icon i {
font-size: 1.6rem;
}
.value-card h4 {
font-size: 1.1rem;
}
.timeline::before {
left: 15px;
}
.timeline-item {
padding-left: 50px;
}
.timeline-year {
left: 15px;
width: 45px;
height: 45px;
font-size: 0.9rem;
}
.timeline-content {
padding: 20px 15px;
}
.timeline-content h4 {
font-size: 1.1rem;
}
.team-image {
height: 240px;
}
.team-social {
gap: 8px;
padding: 12px;
}
.team-social a {
width: 36px;
height: 36px;
font-size: 0.9rem;
}
.team-info {
padding: 20px 15px;
}
.team-info h4 {
font-size: 1.1rem;
}
.testimonial-card-about {
padding: 25px 20px;
}
.testimonial-rating {
font-size: 1rem;
}
.testimonial-text {
font-size: 0.9rem;
}
.author-avatar {
width: 45px;
height: 45px;
}
.author-info h5 {
font-size: 0.95rem;
}
.author-info span {
font-size: 0.8rem;
}
.certification-card {
padding: 20px 15px;
}
.certification-badge {
width: 90px;
height: 90px;
border-width: 2px;
}
.certification-badge i {
font-size: 2.2rem;
}
.certification-card h4 {
font-size: 1rem;
}
.certification-card p {
font-size: 0.85rem;
}
}
/* Extra Small Mobile */
@media (max-width: 400px) {
.about-content h2,
.about-content h3 {
font-size: 1.6rem;
}
.mission-box h3,
.vision-box h3 {
font-size: 1.3rem;
}
.stat-box h3 {
font-size: 1.8rem;
}
.timeline-year {
width: 40px;
height: 40px;
font-size: 0.85rem;
}
.team-info h4 {
font-size: 1rem;
}
}
/* ========================================
SERVICES PAGE SPECIFIC STYLES
======================================== */
/* Services Grid */
.services-grid-section {
background: white;
}
.service-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
transition: all 0.3s;
height: 100%;
border: 1px solid var(--border-color);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
border-color: var(--primary-color);
}
.service-card .service-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 2rem;
color: white;
}
.service-card h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.service-card p {
font-size: 0.95rem;
color: #666;
line-height: 1.7;
margin-bottom: 20px;
}
.service-link {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
}
.service-link:hover {
color: var(--secondary-color);
}
.service-link i {
transition: transform 0.3s;
}
.service-link:hover i {
transform: translateX(5px);
}
/* Process Section */
.process-section {
background: var(--light-color);
}
.process-box {
background: white;
padding: 35px 25px;
text-align: center;
border-radius: 15px;
position: relative;
height: 100%;
border: 2px solid var(--border-color);
transition: all 0.3s;
}
.process-box:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
border-color: var(--primary-color);
}
.process-number {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 800;
margin: 0 auto 20px;
border: 5px solid white;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.process-box h5 {
font-size: 1.2rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.process-box p {
font-size: 0.95rem;
color: #666;
line-height: 1.7;
margin: 0;
}
/* Service Features */
.service-features-section {
background: white;
}
.feature-item {
display: flex;
gap: 20px;
margin-bottom: 30px;
padding: 25px;
background: var(--light-color);
border-radius: 10px;
border-left: 4px solid var(--primary-color);
transition: all 0.3s;
}
.feature-item:hover {
background: white;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transform: translateX(10px);
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.feature-icon i {
font-size: 1.8rem;
color: white;
}
.feature-content h4 {
font-size: 1.2rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 10px;
}
.feature-content p {
font-size: 0.95rem;
color: #666;
line-height: 1.7;
margin: 0;
}
/* Pricing Section */
.pricing-section {
background: var(--light-color);
}
.pricing-card {
background: white;
border-radius: 15px;
padding: 40px 30px;
text-align: center;
border: 2px solid var(--border-color);
transition: all 0.3s;
height: 100%;
}
.pricing-card:hover,
.pricing-card.featured {
border-color: var(--primary-color);
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.pricing-card.featured {
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
color: white;
}
.pricing-badge {
display: inline-block;
background: var(--primary-color);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 20px;
}
.pricing-card.featured .pricing-badge {
background: white;
color: var(--primary-color);
}
.pricing-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 20px;
color: var(--secondary-color);
}
.pricing-card.featured h3 {
color: white;
}
.pricing-amount {
font-size: 3rem;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 10px;
}
.pricing-card.featured .pricing-amount {
color: white;
}
.pricing-amount sup {
font-size: 1.5rem;
font-weight: 600;
}
.pricing-period {
font-size: 0.9rem;
color: #999;
margin-bottom: 30px;
}
.pricing-card.featured .pricing-period {
color: rgba(255,255,255,0.8);
}
.pricing-features {
list-style: none;
padding: 0;
margin: 30px 0;
text-align: left;
}
.pricing-features li {
padding: 12px 0;
font-size: 0.95rem;
color: #555;
border-bottom: 1px solid var(--border-color);
}
.pricing-card.featured .pricing-features li {
color: rgba(255,255,255,0.9);
border-bottom-color: rgba(255,255,255,0.2);
}
.pricing-features li i {
color: var(--primary-color);
margin-right: 10px;
}
.pricing-card.featured .pricing-features li i {
color: white;
}
.btn-pricing {
width: 100%;
padding: 14px 30px;
background: var(--primary-color);
color: white;
border: 2px solid var(--primary-color);
border-radius: 8px;
font-weight: 600;
text-transform: uppercase;
transition: all 0.3s;
cursor: pointer;
}
.btn-pricing:hover {
background: transparent;
color: var(--primary-color);
}
.pricing-card.featured .btn-pricing {
background: white;
color: var(--primary-color);
border-color: white;
}
.pricing-card.featured .btn-pricing:hover {
background: transparent;
color: white;
border-color: white;
}
/* ========================================
FAQ PAGE SPECIFIC STYLES
======================================== */
.faq-page-section {
background: white;
}
/* FAQ Categories */
.faq-categories {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.faq-category-btn {
padding: 12px 30px;
background: var(--light-color);
border: 2px solid var(--border-color);
border-radius: 8px;
color: var(--secondary-color);
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.faq-category-btn:hover,
.faq-category-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* FAQ Accordion Enhanced */
/* FAQ Search */
.faq-search {
max-width: 600px;
margin: 0 auto 50px;
}
.faq-search-input {
width: 100%;
padding: 18px 60px 18px 25px;
border: 2px solid var(--border-color);
border-radius: 50px;
font-size: 1rem;
transition: all 0.3s;
}
.faq-search-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(229, 28, 34, 0.1);
}
.faq-search-btn {
position: absolute;
right: 5px;
top: 5px;
width: 50px;
height: 50px;
background: var(--primary-color);
border: none;
border-radius: 50%;
color: white;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s;
}
.faq-search-btn:hover {
background: var(--secondary-color);
transform: scale(1.05);
}
/* FAQ CTA */
.faq-cta {
background: var(--light-color);
padding: 50px 40px;
border-radius: 15px;
text-align: center;
margin-top: 60px;
border: 2px solid var(--border-color);
}
.faq-cta h3 {
font-size: 2rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.faq-cta p {
font-size: 1.1rem;
color: #666;
margin-bottom: 30px;
}
.faq-cta .btn-inquire {
display: inline-block;
padding: 15px 40px;
}
/* FAQ Stats */
.faq-stats {
display: flex;
justify-content: space-around;
gap: 30px;
margin-top: 60px;
flex-wrap: wrap;
}
.faq-stat-item {
text-align: center;
}
.faq-stat-number {
font-size: 3rem;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 10px;
}
.faq-stat-label {
font-size: 1rem;
color: #666;
font-weight: 500;
}
/* ========================================
SERVICE DETAILS PAGE
======================================== */
.service-details-section {
background: white;
padding: 80px 0;
}
/* Service Header */
.service-detail-header {
background: linear-gradient(135deg, rgba(40, 67, 137, 0.95), rgba(229, 28, 34, 0.9)),
url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
padding: 100px 0 80px;
color: white;
text-align: center;
position: relative;
}
.service-detail-header h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 20px;
}
.service-detail-header p {
font-size: 1.3rem;
max-width: 700px;
margin: 0 auto;
opacity: 0.95;
}
/* Service Content */
.service-content-wrapper {
display: flex;
gap: 40px;
}
.service-main-content {
flex: 1;
}
.service-sidebar {
width: 350px;
flex-shrink: 0;
}
.content-section {
margin-bottom: 50px;
}
.content-section h2 {
font-size: 2rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 20px;
border-left: 5px solid var(--primary-color);
padding-left: 20px;
}
.content-section h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.content-section p {
font-size: 1rem;
line-height: 1.9;
color: #555;
margin-bottom: 20px;
}
.content-section ul,
.content-section ol {
padding-left: 25px;
margin-bottom: 20px;
}
.content-section li {
font-size: 1rem;
line-height: 1.8;
color: #555;
margin-bottom: 12px;
}
.content-section ul li::marker {
color: var(--primary-color);
}
/* Service Image */
.service-detail-image {
width: 100%;
border-radius: 15px;
margin: 30px 0;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
/* Service Benefits */
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-top: 30px;
}
.benefit-item {
background: var(--light-color);
padding: 25px 20px;
border-radius: 10px;
border-left: 4px solid var(--primary-color);
transition: all 0.3s;
}
.benefit-item:hover {
background: white;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transform: translateY(-5px);
}
.benefit-item i {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 15px;
display: block;
}
.benefit-item h4 {
font-size: 1.2rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 10px;
}
.benefit-item p {
font-size: 0.95rem;
color: #666;
line-height: 1.6;
margin: 0;
}
/* Sidebar Widgets */
.sidebar-widget {
background: var(--light-color);
padding: 30px 25px;
border-radius: 15px;
margin-bottom: 30px;
border: 2px solid var(--border-color);
}
.sidebar-widget h3 {
font-size: 1.3rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--border-color);
}
/* Service List Widget */
.service-list {
list-style: none;
padding: 0;
margin: 0;
}
.service-list li {
margin-bottom: 12px;
}
.service-list a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
background: white;
border-radius: 8px;
color: var(--secondary-color);
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
}
.service-list a:hover,
.service-list a.active {
background: var(--primary-color);
color: white;
transform: translateX(5px);
}
.service-list a i {
font-size: 1.1rem;
transition: transform 0.3s;
}
.service-list a:hover i {
transform: translateX(5px);
}
/* Contact Widget */
.contact-widget-box {
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
color: white;
padding: 35px 30px;
border-radius: 15px;
text-align: center;
}
.contact-widget-box i {
font-size: 3rem;
margin-bottom: 20px;
display: block;
}
.contact-widget-box h4 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 15px;
}
.contact-widget-box p {
margin-bottom: 20px;
opacity: 0.95;
}
.contact-widget-box .phone-number {
font-size: 1.8rem;
font-weight: 800;
color: white;
text-decoration: none;
display: block;
margin-bottom: 20px;
}
.contact-widget-box .btn {
background: white;
color: var(--primary-color);
padding: 12px 30px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s;
}
.contact-widget-box .btn:hover {
background: var(--light-color);
transform: translateY(-3px);
}
/* Download Brochure Widget */
.download-widget {
background: white;
}
.download-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: var(--light-color);
border-radius: 8px;
margin-bottom: 12px;
transition: all 0.3s;
cursor: pointer;
}
.download-item:hover {
background: var(--primary-color);
color: white;
}
.download-icon {
width: 50px;
height: 50px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.download-item:hover .download-icon {
background: white;
}
.download-icon i {
font-size: 1.5rem;
color: white;
}
.download-item:hover .download-icon i {
color: var(--primary-color);
}
.download-info h5 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 3px;
}
.download-info span {
font-size: 0.85rem;
opacity: 0.8;
}
/* ========================================
OUR CLIENTS PAGE
======================================== */
.clients-page-section {
background: white;
}
/* Client Logo Grid */
.clients-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.client-logo-box {
background: white;
padding: 40px 30px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
height: 180px;
transition: all 0.3s;
border: 2px solid var(--border-color);
cursor: pointer;
}
.client-logo-box:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
border-color: var(--primary-color);
}
.client-logo-box img {
max-width: 100%;
max-height: 100px;
filter: grayscale(100%);
opacity: 0.7;
transition: all 0.3s;
}
.client-logo-box:hover img {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.05);
}
/* Client Categories */
.client-categories {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.client-category-btn {
padding: 12px 30px;
background: var(--light-color);
border: 2px solid var(--border-color);
border-radius: 8px;
color: var(--secondary-color);
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.client-category-btn:hover,
.client-category-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* Testimonials Section */
.testimonials-section {
background: var(--light-color);
}
.testimonial-card {
background: white;
padding: 35px 30px;
border-radius: 15px;
border-left: 4px solid var(--primary-color);
transition: all 0.3s;
height: 100%;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.stars {
color: #ffc107;
margin-bottom: 20px;
font-size: 1.1rem;
}
.stars i {
margin-right: 3px;
}
.testimonial-card p {
font-size: 1rem;
line-height: 1.8;
color: #666;
font-style: italic;
margin-bottom: 25px;
}
.client-info {
display: flex;
align-items: center;
gap: 15px;
}
.client-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 3px solid var(--primary-color);
}
.client-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.client-details h5 {
font-size: 1.1rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 5px;
}
.client-details span {
font-size: 0.85rem;
color: #999;
}
/* Case Studies Section */
.case-studies-section {
background: white;
}
.case-study-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
transition: all 0.3s;
height: 100%;
}
.case-study-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.case-study-image {
position: relative;
height: 250px;
overflow: hidden;
}
.case-study-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.case-study-card:hover .case-study-image img {
transform: scale(1.1);
}
.case-study-badge {
position: absolute;
top: 20px;
right: 20px;
background: var(--primary-color);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.case-study-content {
padding: 30px 25px;
}
.case-study-meta {
display: flex;
gap: 20px;
margin-bottom: 15px;
font-size: 0.85rem;
color: #999;
}
.case-study-meta span i {
color: var(--primary-color);
margin-right: 5px;
}
.case-study-content h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.case-study-content p {
font-size: 0.95rem;
color: #666;
line-height: 1.7;
margin-bottom: 20px;
}
.case-study-link {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.case-study-link:hover {
color: var(--secondary-color);
}
.case-study-link i {
transition: transform 0.3s;
}
.case-study-link:hover i {
transform: translateX(5px);
}
/* Client Stats */
.client-stats-section {
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
color: white;
padding: 80px 0;
}
.client-stat-box {
text-align: center;
}
.client-stat-icon {
font-size: 3.5rem;
margin-bottom: 20px;
opacity: 0.9;
}
.client-stat-number {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 10px;
}
.client-stat-label {
font-size: 1.1rem;
opacity: 0.9;
font-weight: 500;
}
/* ========================================
RESPONSIVE - SERVICES, FAQ, CLIENTS
======================================== */
/* Tablets */
@media (max-width: 991px) {
.service-content-wrapper {
flex-direction: column;
}
.service-sidebar {
width: 100%;
}
.process-box {
padding: 30px 20px;
margin-bottom: 20px;
}
.pricing-card {
margin-bottom: 30px;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.clients-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
}
.client-logo-box {
height: 150px;
padding: 30px 20px;
}
}
/* Mobile */
@media (max-width: 768px) {
.service-card {
margin-bottom: 20px;
}
.process-number {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.process-box h5 {
font-size: 1.1rem;
}
.process-box p {
font-size: 0.9rem;
}
.feature-item {
flex-direction: column;
padding: 20px;
}
.feature-icon {
width: 55px;
height: 55px;
}
.feature-icon i {
font-size: 1.6rem;
}
.feature-content h4 {
font-size: 1.1rem;
}
.pricing-card {
padding: 35px 25px;
}
.pricing-amount {
font-size: 2.5rem;
}
.faq-categories,
.client-categories {
gap: 10px;
}
.faq-category-btn,
.client-category-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.accordion-button {
font-size: 1rem;
padding: 20px 25px;
}
.accordion-body {
padding: 20px 25px;
font-size: 0.95rem;
}
.faq-cta {
padding: 40px 30px;
}
.faq-cta h3 {
font-size: 1.8rem;
}
.faq-stat-number {
font-size: 2.5rem;
}
.service-detail-header {
padding: 80px 0 60px;
}
.service-detail-header h1 {
font-size: 2rem;
}
.service-detail-header p {
font-size: 1.1rem;
}
.content-section h2 {
font-size: 1.8rem;
}
.content-section h3 {
font-size: 1.3rem;
}
.sidebar-widget {
padding: 25px 20px;
}
.contact-widget-box {
padding: 30px 25px;
}
.contact-widget-box .phone-number {
font-size: 1.5rem;
}
.clients-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
}
.client-logo-box {
height: 130px;
padding: 25px 15px;
}
.testimonial-card {
padding: 30px 25px;
margin-bottom: 20px;
}
.client-info {
flex-direction: column;
text-align: center;
}
.case-study-image {
height: 220px;
}
.case-study-content {
padding: 25px 20px;
}
.case-study-content h4 {
font-size: 1.2rem;
}
.client-stat-icon {
font-size: 3rem;
}
.client-stat-number {
font-size: 3rem;
}
.client-stat-label {
font-size: 1rem;
}
}
/* Small Mobile */
@media (max-width: 576px) {
.process-box {
padding: 25px 15px;
}
.process-number {
width: 55px;
height: 55px;
font-size: 1.3rem;
border-width: 3px;
}
.process-box h5 {
font-size: 1rem;
}
.pricing-card {
padding: 30px 20px;
}
.pricing-amount {
font-size: 2.2rem;
}
.faq-search-input {
padding: 16px 55px 16px 20px;
font-size: 0.95rem;
}
.faq-search-btn {
width: 45px;
height: 45px;
}
.faq-cta {
padding: 35px 25px;
}
.faq-cta h3 {
font-size: 1.6rem;
}
.faq-cta p {
font-size: 1rem;
}
.faq-stat-number {
font-size: 2.2rem;
}
.faq-stat-label {
font-size: 0.9rem;
}
.content-section h2 {
font-size: 1.6rem;
padding-left: 15px;
}
.sidebar-widget {
padding: 20px 15px;
}
.sidebar-widget h3 {
font-size: 1.2rem;
}
.service-list a {
padding: 12px;
font-size: 0.95rem;
}
.contact-widget-box {
padding: 25px 20px;
}
.contact-widget-box i {
font-size: 2.5rem;
}
.contact-widget-box h4 {
font-size: 1.3rem;
}
.contact-widget-box .phone-number {
font-size: 1.3rem;
}
.download-item {
padding: 12px;
}
.download-icon {
width: 45px;
height: 45px;
}
.download-icon i {
font-size: 1.3rem;
}
.clients-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.client-logo-box {
height: 120px;
padding: 20px 15px;
}
.client-logo-box img {
max-height: 80px;
}
.testimonial-card {
padding: 25px 20px;
}
.stars {
font-size: 1rem;
}
.client-avatar {
width: 50px;
height: 50px;
}
.client-details h5 {
font-size: 1rem;
}
.case-study-image {
height: 200px;
}
.case-study-badge {
padding: 6px 12px;
font-size: 0.8rem;
}
.case-study-content {
padding: 20px 15px;
}
.case-study-content h4 {
font-size: 1.1rem;
}
.case-study-meta {
flex-direction: column;
gap: 8px;
}
.client-stat-icon {
font-size: 2.5rem;
}
.client-stat-number {
font-size: 2.5rem;
}
.client-stat-label {
font-size: 0.95rem;
}
}
/* ========================================
FAQ PAGE - MINIMAL DESIGN
======================================== */
.faq-page-section {
background: white;
}
/* FAQ Search - Minimal */
.faq-search {
max-width: 600px;
margin: 0 auto 50px;
}
.faq-search-input {
width: 100%;
padding: 15px 60px 15px 20px;
border: none;
border-bottom: 2px solid var(--border-color);
border-radius: 0;
font-size: 1rem;
transition: all 0.3s;
background: transparent;
}
.faq-search-input:focus {
outline: none;
border-bottom-color: var(--secondary-color);
background: transparent;
}
.faq-search-btn {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: transparent;
border: none;
color: var(--secondary-color);
font-size: 1.3rem;
cursor: pointer;
transition: all 0.3s;
}
.faq-search-btn:hover {
color: var(--primary-color);
}
/* FAQ Categories - Minimal */
.faq-categories {
display: flex;
justify-content: center;
gap: 0;
margin-bottom: 50px;
flex-wrap: wrap;
border-bottom: 2px solid var(--border-color);
}
.faq-category-btn {
padding: 15px 30px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
color: #666;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
margin-bottom: -2px;
}
.faq-category-btn:hover {
color: var(--secondary-color);
border-bottom-color: var(--secondary-color);
}
.faq-category-btn.active {
color: var(--secondary-color);
font-weight: 700;
border-bottom-color: var(--secondary-color);
}
/* FAQ Accordion - Minimal */
.accordion-item {
border: none;
border-bottom: 1px solid var(--border-color);
margin-bottom: 0;
border-radius: 0;
overflow: visible;
box-shadow: none;
}
.accordion-item:last-child {
border-bottom: 2px solid var(--border-color);
}
.accordion-button {
background: white;
color: var(--secondary-color);
font-weight: 600;
font-size: 1.1rem;
padding: 25px 0;
border: none;
border-radius: 0;
position: relative;
box-shadow: none;
}
.accordion-button:not(.collapsed) {
background: white;
color: var(--secondary-color);
box-shadow: none;
border: none;
}
.accordion-button:focus {
box-shadow: none;
border: none;
outline: none;
}
.accordion-button::after {
/*! width: auto; */
/*! height: auto; */
/*! background: transparent; */
border-radius: 0;
font-size: 1.2rem;
color: var(--secondary-color);
right: 10px;
margin: 0 17px 0 auto;
}
.accordion-button:not(.collapsed)::after {
/*! background: transparent; */
transform: rotate(180deg);
color: var(--secondary-color);
}
.accordion-body {
padding: 20px 0 30px 0;
font-size: 1rem;
line-height: 1.9;
color: #666;
background: white;
border: none;
}
/* FAQ CTA - Minimal */
.faq-cta {
background: white;
padding: 60px 40px;
border-radius: 0;
text-align: center;
margin-top: 60px;
border: none;
border-top: 2px solid var(--border-color);
border-bottom: 2px solid var(--border-color);
}
.faq-cta h3 {
font-size: 2rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.faq-cta p {
font-size: 1.1rem;
color: #666;
margin-bottom: 30px;
}
.faq-cta .btn-inquire {
display: inline-block;
padding: 15px 40px;
border-radius: 0;
}
/* FAQ Stats - Minimal */
.faq-stats {
display: flex;
justify-content: space-around;
gap: 30px;
margin-top: 60px;
padding-top: 60px;
border-top: 2px solid var(--border-color);
flex-wrap: wrap;
}
.faq-stat-item {
text-align: center;
padding: 20px;
flex: 1;
min-width: 200px;
}
.faq-stat-number {
font-size: 3rem;
font-weight: 800;
color: var(--secondary-color);
margin-bottom: 10px;
}
.faq-stat-label {
font-size: 1rem;
color: #666;
font-weight: 500;
}
/* Still Have Questions - Minimal */
.faq-help-section {
background: white;
padding: 60px 40px;
text-align: center;
border-top: 1px solid var(--border-color);
}
.faq-help-section h3 {
font-size: 1.8rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.faq-help-section p {
font-size: 1.1rem;
color: #666;
margin-bottom: 30px;
}
.faq-help-section .btn-inquire {
border-radius: 0;
}
/* ========================================
RESPONSIVE - FAQ MINIMAL
======================================== */
/* Tablets */
@media (max-width: 991px) {
.faq-categories {
gap: 0;
}
.faq-category-btn {
padding: 12px 20px;
font-size: 0.95rem;
}
.accordion-button {
font-size: 1.05rem;
padding: 22px 0;
}
.accordion-body {
padding: 18px 0 28px 0;
font-size: 0.95rem;
}
.faq-stats {
gap: 20px;
padding-top: 50px;
}
.faq-stat-item {
min-width: 150px;
}
.faq-stat-number {
font-size: 2.5rem;
}
}
/* Mobile */
@media (max-width: 768px) {
.faq-categories {
flex-direction: column;
border-bottom: none;
}
.faq-category-btn {
padding: 12px 20px;
font-size: 0.95rem;
border-bottom: 1px solid var(--border-color);
margin-bottom: 0;
text-align: left;
}
.faq-category-btn.active {
border-bottom-color: var(--secondary-color);
border-left: 3px solid var(--secondary-color);
}
.accordion-button {
font-size: 1rem;
padding: 20px 0;
}
.accordion-body {
padding: 15px 0 25px 0;
font-size: 0.95rem;
}
.faq-cta {
padding: 50px 30px;
}
.faq-cta h3 {
font-size: 1.8rem;
}
.faq-cta p {
font-size: 1rem;
}
.faq-stats {
flex-direction: column;
gap: 30px;
padding-top: 40px;
}
.faq-stat-item {
min-width: auto;
border-bottom: 1px solid var(--border-color);
padding-bottom: 30px;
}
.faq-stat-item:last-child {
border-bottom: none;
}
.faq-stat-number {
font-size: 2.5rem;
}
.faq-stat-label {
font-size: 0.95rem;
}
.faq-help-section {
padding: 50px 30px;
}
.faq-help-section h3 {
font-size: 1.6rem;
}
.faq-help-section p {
font-size: 1rem;
}
}
/* Small Mobile */
@media (max-width: 576px) {
.faq-search-input {
padding: 14px 55px 14px 15px;
font-size: 0.95rem;
}
.faq-search-btn {
width: 45px;
height: 45px;
font-size: 1.2rem;
}
.faq-category-btn {
padding: 12px 15px;
font-size: 0.9rem;
}
.accordion-button {
font-size: 0.95rem;
padding: 18px 0;
}
.accordion-body {
padding: 15px 0 22px 0;
font-size: 0.9rem;
}
.faq-cta {
padding: 40px 25px;
}
.faq-cta h3 {
font-size: 1.6rem;
}
.faq-cta p {
font-size: 0.95rem;
}
.faq-stats {
padding-top: 30px;
gap: 25px;
}
.faq-stat-item {
padding: 15px;
padding-bottom: 25px;
}
.faq-stat-number {
font-size: 2.2rem;
}
.faq-stat-label {
font-size: 0.9rem;
}
.faq-help-section {
padding: 40px 25px;
}
.faq-help-section h3 {
font-size: 1.5rem;
}
.faq-help-section p {
font-size: 0.95rem;
}
}
/* Extra Small Mobile */
@media (max-width: 400px) {
.faq-search-input {
padding: 12px 50px 12px 12px;
font-size: 0.9rem;
}
.accordion-button {
font-size: 0.9rem;
padding: 16px 0;
}
.accordion-body {
font-size: 0.85rem;
}
.faq-cta h3 {
font-size: 1.4rem;
}
.faq-stat-number {
font-size: 2rem;
}
.faq-help-section h3 {
font-size: 1.4rem;
}
}
/* ========================================
WHY CHOOSE US SECTION
======================================== */
.why-choose-us-section {
background: white;
position: relative;
overflow: hidden;
padding: 0;
}
.why-choose-us-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.why-choose-card {
background: white;
border-radius: 15px;
/*! overflow: hidden; */
/*! box-shadow: 0 5px 25px rgba(0,0,0,0.08); */
transition: all 0.4s;
height: 100%;
border: 2px solid transparent;
position: relative;
text-align: left;
}
.why-choose-card:hover {
transform: translateY(-15px);
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
border-color: var(--primary-color);
}
.why-choose-image {
position: relative;
height: 220px;
overflow: hidden;
}
.why-choose-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.why-choose-card:hover .why-choose-image img {
transform: scale(1.15);
}
.why-choose-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(40, 67, 137, 0.9), rgba(229, 28, 34, 0.85));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s;
}
.why-choose-card:hover .why-choose-overlay {
opacity: 1;
}
.why-choose-overlay i {
font-size: 4rem;
color: white;
transform: scale(0);
transition: transform 0.4s 0.1s;
}
.why-choose-card:hover .why-choose-overlay i {
transform: scale(1);
}
.why-choose-content {
padding: 30px 25px;
position: relative;
}
.why-choose-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: -50px 0 20px;
font-size: 2rem;
color: white;
box-shadow: 0 10px 30px rgba(229, 28, 34, 0.3);
transition: all 0.4s;
position: relative;
z-index: 2;
}
.why-choose-card:hover .why-choose-icon {
transform: rotate(360deg) scale(1.1);
}
.why-choose-content h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
/*! text-align: center; */
}
.why-choose-content p {
font-size: 0.95rem;
color: #666;
line-height: 1.7;
/*! text-align: center; */
margin: 0;
}
/* Statistics Bar */
.why-choose-stats {
margin-top: 60px;
padding: 40px 30px;
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
.stat-item {
padding: 15px;
}
.stat-item h3 {
font-size: 3rem;
font-weight: 800;
color: white;
margin-bottom: 10px;
line-height: 1;
}
.stat-item h3::after {
content: '+';
font-size: 2rem;
margin-left: 5px;
}
.stat-item p {
font-size: 1rem;
color: rgba(255,255,255,0.9);
margin: 0;
font-weight: 500;
}
/* Responsive */
@media (max-width: 991px) {
.why-choose-card {
margin-bottom: 25px;
}
.why-choose-image {
height: 200px;
}
.why-choose-icon {
width: 60px;
height: 60px;
font-size: 1.8rem;
/*! margin: -45px auto 18px; */
}
.why-choose-content {
padding: 25px 20px;
}
.why-choose-content h4 {
font-size: 1.2rem;
}
.why-choose-content p {
font-size: 0.9rem;
}
.why-choose-stats {
padding: 35px 25px;
}
.stat-item h3 {
font-size: 2.5rem;
}
.stat-item p {
font-size: 0.95rem;
}
}
@media (max-width: 768px) {
.why-choose-image {
height: 180px;
}
.why-choose-icon {
width: 55px;
height: 55px;
font-size: 1.6rem;
/*! margin: -40px auto 15px; */
}
.why-choose-content {
padding: 22px 18px;
}
.why-choose-content h4 {
font-size: 1.15rem;
}
.why-choose-stats {
margin-top: 50px;
padding: 30px 20px;
}
.stat-item {
padding: 12px;
margin-bottom: 15px;
}
.stat-item h3 {
font-size: 2.2rem;
}
.stat-item h3::after {
font-size: 1.8rem;
}
.stat-item p {
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
.why-choose-image {
height: 160px;
}
.why-choose-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
/*! margin: -35px auto 12px; */
}
.why-choose-content {
padding: 20px 15px;
}
.why-choose-content h4 {
font-size: 1.1rem;
}
.why-choose-content p {
font-size: 0.85rem;
}
.why-choose-stats {
padding: 25px 15px;
}
.stat-item {
padding: 10px;
}
.stat-item h3 {
font-size: 2rem;
}
.stat-item h3::after {
font-size: 1.6rem;
}
.stat-item p {
font-size: 0.85rem;
}
}
@media (max-width: 400px) {
.why-choose-image {
height: 140px;
}
.stat-item h3 {
font-size: 1.8rem;
}
}
img.img-fluid.imgbiglftsd {
height: 120vh;
object-fit: cover;
}
.masmelogo{
margin: 20px 0 0 0;
}
.masmelogo img{
width: 260px;
}
/* WhatsApp with Status */
.whatsapp-status {
position: fixed;
bottom: 30px;
right: 30px;
background: white;
border-radius: 50px;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 20px 8px 8px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
z-index: 9999;
transition: all 0.3s ease;
text-decoration: none;
border: 2px solid #25D366;
}
.whatsapp-status:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0,0,0,0.25);
}
.whatsapp-avatar {
position: relative;
width: 50px;
height: 50px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.whatsapp-avatar i {
font-size: 2rem;
color: white;
}
.online-dot {
position: absolute;
bottom: 2px;
right: 2px;
width: 14px;
height: 14px;
background: #00ff00;
border-radius: 50%;
border: 2px solid white;
animation: online-pulse 2s infinite;
}
@keyframes online-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
}
50% {
box-shadow: 0 0 0 8px rgba(0, 255, 0, 0);
}
}
.whatsapp-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.whatsapp-name {
font-weight: 700;
font-size: 1rem;
color: #333;
line-height: 1;
}
.whatsapp-online {
font-size: 0.8rem;
color: #25D366;
line-height: 1;
}
@media (max-width: 768px) {
.whatsapp-content {
display: none;
}
.whatsapp-status {
padding: 8px;
border-radius: 50%;
}
}
/* ========================================
SERVICE PAGE STYLES
======================================== */
.service-card-page {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
transition: all 0.4s;
height: 100%;
border: 2px solid transparent;
}
.service-card-page:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
border-color: var(--primary-color);
}
.service-img-wrapper {
position: relative;
height: 250px;
overflow: hidden;
}
.service-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.service-card-page:hover .service-img-wrapper img {
transform: scale(1.15);
}
.service-overlay-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(40, 67, 137, 0.9), rgba(229, 28, 34, 0.85));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s;
}
.service-card-page:hover .service-overlay-img {
opacity: 1;
}
.service-overlay-img i {
font-size: 4rem;
color: white;
transform: scale(0);
transition: transform 0.4s 0.1s;
}
.service-card-page:hover .service-overlay-img i {
transform: scale(1);
}
.service-card-content {
padding: 30px 25px;
}
.service-card-content h4 {
font-size: 1.4rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.service-card-content p {
font-size: 0.95rem;
color: #666;
line-height: 1.8;
margin-bottom: 20px;
}
.btn-read-more {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 12px 30px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
font-size: 0.95rem;
}
.btn-read-more:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(229, 28, 34, 0.4);
color: white;
}
.btn-read-more i {
transition: transform 0.3s;
}
.btn-read-more:hover i {
transform: translateX(5px);
}
/* ========================================
SERVICE DETAIL PAGE STYLES
======================================== */
.service-detail-section {
background: var(--light-color);
}
.service-detail-content {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}
.service-detail-img {
width: 100%;
height: 400px;
object-fit: cover;
}
.service-detail-text {
padding: 40px 35px;
}
.service-detail-text h2 {
font-size: 2rem;
font-weight: 800;
color: var(--secondary-color);
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 3px solid var(--primary-color);
}
.service-detail-text h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--secondary-color);
margin: 30px 0 15px;
}
.service-detail-text p {
font-size: 1rem;
line-height: 1.9;
color: #555;
margin-bottom: 20px;
}
.service-detail-text ul {
padding-left: 25px;
margin-bottom: 25px;
}
.service-detail-text ul li {
font-size: 1rem;
line-height: 1.8;
color: #555;
margin-bottom: 12px;
}
.industry-item {
background: var(--light-color);
padding: 15px 20px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 12px;
border-left: 3px solid var(--primary-color);
transition: all 0.3s;
}
.industry-item:hover {
background: white;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transform: translateX(5px);
}
.industry-item i {
font-size: 1.5rem;
color: var(--primary-color);
}
.industry-item span {
font-weight: 600;
color: #333;
}
.service-benefits {
margin-top: 30px;
}
.benefit-box {
display: flex;
gap: 15px;
padding: 20px;
background: var(--light-color);
border-radius: 10px;
margin-bottom: 15px;
transition: all 0.3s;
}
.benefit-box:hover {
background: white;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.benefit-box i {
font-size: 2rem;
color: var(--primary-color);
flex-shrink: 0;
}
.benefit-box h5 {
font-size: 1.1rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 5px;
}
.benefit-box p {
margin: 0;
font-size: 0.9rem;
color: #666;
}
/* ========================================
SIDEBAR WIDGETS
======================================== */
.sidebar-widget {
background: white;
border-radius: 15px;
padding: 30px 25px;
margin-bottom: 30px;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}
.sidebar-widget h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid var(--border-color);
}
/* Contact Widget */
.contact-widget {
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
color: white;
}
.contact-widget h4 {
color: white;
border-bottom-color: rgba(255,255,255,0.2);
}
.contact-widget-item {
display: flex;
gap: 15px;
padding: 20px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.contact-widget-item:last-child {
border-bottom: none;
}
.contact-widget-item i {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.15);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.contact-widget-item span {
display: block;
font-size: 0.85rem;
opacity: 0.9;
margin-bottom: 5px;
}
.contact-widget-item a {
display: block;
color: white;
text-decoration: none;
font-weight: 600;
margin-bottom: 3px;
}
.contact-widget-item a:hover {
opacity: 0.8;
}
.contact-widget-item p {
margin: 0;
font-size: 0.95rem;
opacity: 0.9;
line-height: 1.6;
}
/* Inquiry Widget */
.form-group-sidebar {
margin-bottom: 20px;
}
.form-control-sidebar {
width: 100%;
padding: 12px 15px;
border: 2px solid var(--border-color);
border-radius: 8px;
font-size: 0.95rem;
transition: all 0.3s;
font-family: 'Inter', sans-serif;
}
.form-control-sidebar:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(229, 28, 34, 0.1);
}
textarea.form-control-sidebar {
resize: vertical;
}
.btn-sidebar-submit {
width: 100%;
padding: 14px 25px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s;
}
.btn-sidebar-submit:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(229, 28, 34, 0.4);
}
/* Services List Widget */
.services-list {
list-style: none;
padding: 0;
margin: 0;
}
.services-list li {
margin-bottom: 12px;
}
.services-list a {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: var(--light-color);
border-radius: 8px;
color: #333;
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
border-left: 3px solid transparent;
}
.services-list a:hover {
background: var(--primary-color);
color: white;
border-left-color: var(--secondary-color);
transform: translateX(5px);
}
.services-list a i:first-child {
font-size: 1.3rem;
}
.services-list a span {
flex: 1;
}
.services-list a i:last-child {
font-size: 1rem;
transition: transform 0.3s;
}
.services-list a:hover i:last-child {
transform: translateX(5px);
}
/* ========================================
MOBILE INQUIRY BUTTON & POPUP
======================================== */
.mobile-inquiry-btn {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 15px 20px;
text-align: center;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
z-index: 998;
box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
animation: mobile-btn-pulse 2s infinite;
}
.mobile-inquiry-btn i {
margin-right: 10px;
font-size: 1.3rem;
}
@keyframes mobile-btn-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
.mobile-inquiry-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 9999;
animation: fadeIn 0.3s;
}
.mobile-inquiry-popup.show {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.popup-content {
background: white;
border-radius: 20px;
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
animation: slideUp 0.3s;
}
@keyframes slideUp {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.popup-header {
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
color: white;
padding: 20px 25px;
border-radius: 20px 20px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.popup-header h5 {
margin: 0;
font-size: 1.3rem;
font-weight: 700;
}
.popup-close {
background: rgba(255,255,255,0.2);
border: none;
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.5rem;
transition: all 0.3s;
}
.popup-close:hover {
background: rgba(255,255,255,0.3);
transform: rotate(90deg);
}
.popup-body {
padding: 30px 25px;
}
.form-group-popup {
margin-bottom: 20px;
}
.form-control-popup {
width: 100%;
padding: 14px 18px;
border: 2px solid var(--border-color);
border-radius: 10px;
font-size: 0.95rem;
transition: all 0.3s;
font-family: 'Inter', sans-serif;
}
.form-control-popup:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(229, 28, 34, 0.1);
}
textarea.form-control-popup {
resize: vertical;
}
.btn-popup-submit {
width: 100%;
padding: 16px 25px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
border-radius: 10px;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s;
}
.btn-popup-submit:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(229, 28, 34, 0.4);
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 991px) {
.service-detail-img {
height: 350px;
}
.service-detail-text {
padding: 35px 30px;
}
.sidebar-widget {
margin-bottom: 25px;
}
}
@media (max-width: 768px) {
.mobile-inquiry-btn {
display: flex;
align-items: center;
justify-content: center;
}
.service-img-wrapper {
height: 220px;
}
.service-card-content {
padding: 25px 20px;
}
.service-card-content h4 {
font-size: 1.3rem;
}
.service-detail-img {
height: 280px;
}
.service-detail-text {
padding: 30px 25px;
}
.service-detail-text h2 {
font-size: 1.8rem;
}
.service-detail-text h3 {
font-size: 1.3rem;
}
.sidebar-widget {
padding: 25px 20px;
}
.scroll-top {
bottom: 80px;
}
.whatsapp-float {
bottom: 80px;
}
}
@media (max-width: 576px) {
.service-img-wrapper {
height: 200px;
}
.service-card-content {
padding: 20px 15px;
}
.service-detail-img {
height: 240px;
}
.service-detail-text {
padding: 25px 20px;
}
.service-detail-text h2 {
font-size: 1.6rem;
}
.benefit-box {
flex-direction: column;
padding: 15px;
}
.industry-item {
padding: 12px 15px;
}
.popup-body {
padding: 25px 20px;
}
}
/* ========================================
CEO & DIRECTOR MESSAGE PAGE STYLES
======================================== */
.message-section {
background: var(--light-color);
position: relative;
overflow: hidden;
}
/* Image Wrapper */
.message-image-wrapper {
position: relative;
z-index: 2;
}
.message-image-frame {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
border: 5px solid white;
}
.message-image {
width: 100%;
height: 550px;
object-fit: cover;
display: block;
transition: transform 0.5s;
}
.message-image-frame:hover .message-image {
transform: scale(1.05);
}
/* Badge */
.message-badge {
position: absolute;
bottom: 30px;
left: 30px;
right: 30px;
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
color: white;
padding: 20px 25px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
backdrop-filter: blur(10px);
}
.director-badge {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.message-badge i {
width: 50px;
height: 50px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.message-badge span {
display: block;
font-size: 0.85rem;
opacity: 0.9;
margin-bottom: 3px;
}
.message-badge strong {
display: block;
font-size: 1.1rem;
font-weight: 700;
}
/* Decorative Elements */
.message-decorative {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.circle-1,
.circle-2 {
position: absolute;
border-radius: 50%;
background: rgba(229, 28, 34, 0.1);
animation: float 15s infinite ease-in-out;
}
.circle-1 {
width: 200px;
height: 200px;
top: -50px;
right: -50px;
}
.circle-2 {
width: 150px;
height: 150px;
bottom: 100px;
left: -30px;
animation-delay: 3s;
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
/* Message Content */
.message-content {
padding-left: 30px;
}
.message-header {
margin-bottom: 30px;
}
.message-tag {
display: inline-block;
background: rgba(229, 28, 34, 0.1);
color: var(--primary-color);
padding: 8px 20px;
border-radius: 30px;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
}
.message-tag i {
margin-right: 5px;
}
.message-header h2 {
font-size: 2.5rem;
font-weight: 800;
color: var(--secondary-color);
margin: 0;
}
.quote-icon {
display: none;
}
.lead-paragraph {
font-size: 1.15rem;
line-height: 1.9;
color: #333;
font-weight: 500;
margin-bottom: 20px;
margin-top: 20px;
}
.message-text p {
font-size: 1rem;
line-height: 1.9;
color: #555;
margin-bottom: 20px;
}
.message-text strong {
color: var(--secondary-color);
font-weight: 700;
}
/* Core Values/Principles */
.message-values {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 30px 0;
padding: 30px 0;
border-top: 2px solid var(--border-color);
border-bottom: 2px solid var(--border-color);
}
.value-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
background: var(--light-color);
border-radius: 30px;
transition: all 0.3s;
}
.value-item:hover {
background: var(--primary-color);
color: white;
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(229, 28, 34, 0.3);
}
.value-item i {
font-size: 1.3rem;
color: var(--primary-color);
transition: color 0.3s;
}
.value-item:hover i {
color: white;
}
.value-item span {
font-weight: 600;
font-size: 0.95rem;
}
/* Signature */
.message-signature {
margin-top: 40px;
padding-top: 30px;
border-top: 2px solid var(--border-color);
}
.signature-line {
margin-bottom: 15px;
}
.signature-img {
height: 60px;
filter: opacity(0.8);
}
.message-signature h5 {
font-size: 1.5rem;
font-weight: 800;
color: var(--secondary-color);
margin-bottom: 5px;
}
.message-signature span {
display: block;
font-size: 1rem;
color: var(--primary-color);
font-weight: 600;
margin-bottom: 5px;
}
.message-signature p {
font-size: 0.9rem;
color: #666;
margin: 0;
}
/* Additional Info Stats */
.message-additional {
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.info-stat-box {
text-align: center;
padding: 30px 20px;
border-radius: 10px;
background: var(--light-color);
transition: all 0.3s;
}
.info-stat-box:hover {
background: white;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transform: translateY(-5px);
}
.info-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 2rem;
color: white;
}
.info-stat-box h3 {
font-size: 2.5rem;
font-weight: 800;
color: var(--secondary-color);
margin-bottom: 10px;
}
.info-stat-box p {
font-size: 1rem;
color: #666;
margin: 0;
}
/* Vision & Mission Cards */
.vision-mission-card {
background: white;
padding: 40px 35px;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
border-left: 5px solid var(--primary-color);
height: 100%;
transition: all 0.3s;
}
.vision-mission-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.vm-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
font-size: 2rem;
color: white;
}
.vision-mission-card h3 {
font-size: 1.6rem;
font-weight: 700;
color: var(--secondary-color);
margin-bottom: 15px;
}
.vision-mission-card p {
font-size: 1rem;
line-height: 1.8;
color: #555;
margin: 0;
}
/* Message Navigation */
.message-navigation {
text-align: center;
padding: 30px 0;
}
.btn-message-nav {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 15px 40px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.05rem;
transition: all 0.3s;
box-shadow: 0 10px 30px rgba(229, 28, 34, 0.3);
}
.btn-message-nav:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(229, 28, 34, 0.4);
color: white;
}
.btn-message-nav i {
font-size: 1.2rem;
transition: transform 0.3s;
}
.btn-message-nav:hover i {
transform: translateX(5px);
}
.btn-message-nav:hover i.bi-arrow-left {
transform: translateX(-5px);
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 991px) {
.message-content {
padding-left: 0;
margin-top: 30px;
}
.message-image {
height: 450px;
}
.message-badge {
bottom: 20px;
left: 20px;
right: 20px;
padding: 18px 20px;
}
.message-header h2 {
font-size: 2.2rem;
}
.message-text {
padding: 35px 30px;
}
.circle-1,
.circle-2 {
display: none;
}
}
@media (max-width: 768px) {
.message-image {
height: 400px;
}
.message-badge {
flex-direction: column;
text-align: center;
gap: 10px;
}
.message-header h2 {
font-size: 2rem;
}
.message-text {
padding:0!important;
}
.lead-paragraph {
font-size: 1.05rem;
}
.message-values {
gap: 10px;
}
.value-item {
padding: 10px 15px;
font-size: 0.9rem;
}
.info-stat-box {
margin-bottom: 20px;
}
.vision-mission-card {
padding: 30px 25px;
margin-bottom: 20px;
}
.message-additional {
padding: 30px 20px;
}
}
@media (max-width: 576px) {
.message-image {
height: 350px;
}
.message-badge {
padding: 15px;
}
.message-badge i {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.message-badge strong {
font-size: 1rem;
}
.message-header h2 {
font-size: 1.8rem;
}
.message-text {
padding: 25px 20px;
}
.quote-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
left: 20px;
}
.message-values {
flex-direction: column;
gap: 8px;
}
.value-item {
width: 100%;
justify-content: center;
}
.info-icon {
width: 60px;
height: 60px;
font-size: 1.8rem;
}
.info-stat-box h3 {
font-size: 2rem;
}
.vm-icon {
width: 60px;
height: 60px;
font-size: 1.8rem;
}
.vision-mission-card h3 {
font-size: 1.4rem;
}
.btn-message-nav {
padding: 12px 30px;
font-size: 0.95rem;
}
.top-bar .col-md-6.text-center.text-md-start {
display: flex;
justify-content: space-around;
}
}