/* ===================================
UNIVERSAL GOLDEN BORDER CLASS
=================================== */
/* Simple golden border class for all images - TRANSITIONS DISABLED */
.golden-border {
border: 3px solid var(--accent-color) !important;
/* transition: all 0.3s ease; */
}
/* Golden hover effect - DISABLED */
.golden-border:hover {
/* All hover effects disabled for services section */
/* border-color: var(--hover-color) !important; */
/* box-shadow: 0 0 15px rgba(197, 160, 89, 0.6), 0 0 25px rgba(197, 160, 89, 0.4) !important; */
/* transform: scale(1.02); */
}
/* Override golden border hover for portfolio cards to prevent conflicts */
.portfolio-card .golden-border:hover {
transform: none !important;
}
.quality-certifications-wrapper .portfolio-card .golden-border:hover {
transform: none !important;
}
/* ===================================
NAVBAR GOLDEN EDGE LINE
=================================== */
/* Enhanced golden decorative line below navbar */
.navbar::after {
/* content: '';
position: absolute;*/
/* bottom: -3px;*/
/* left: 0;
right: 0;
height: 3px;
background: var(--accent-color);*/
/* background: linear-gradient(90deg,
var(--accent-color) 0%,
#E2B679 25%,
#F4D03F 50%,
#E2B679 75%,
var(--accent-color) 100%);*/
/* box-shadow: 0 3px 12px rgba(179, 149, 30, 0.7);
*/
/* z-index: 1000;
animation: shimmer 3s ease-in-out infinite;*/
}
/* Note: Golden edge is now handled globally in _Layout.cshtml and site.css */
/* Optional shimmer animation for the golden line */
@keyframes shimmer {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
/* Ensure navbar has proper positioning */
.navbar {
position: relative;
margin-bottom: 0 !important;
}
/* ===================================
HOME PAGE STYLES - homeCss.css
=================================== */
/* Banner Width Container - Matches banner width */
.banner-width-container {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* Remove Bootstrap container constraints for banner-width sections */
.container-fluid.px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Universal Banner Class - Use for all sections */
/* .universal-banner {
position: relative;
height: 500px;
width: 100%;
overflow: hidden;
margin-bottom: 3rem;
border-radius: 8px;
} */
/* .universal-banner img {
width: 100%;
height: 500px;
object-fit: cover;
object-position: center;
border-radius: 8px;
transition: all 0.3s ease;
} */
/* .universal-banner:hover img {
box-shadow: 0 0 15px rgba(197, 160, 89, 0.6), 0 0 25px rgba(197, 160, 89, 0.4);
transform: scale(1.02);
} */
/*
.universal-banner-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
z-index: 2;
} */
.universal-banner-content {
max-width: 800px;
color: white;
}
.universal-banner-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.universal-banner-subtitle {
font-size: 1.2rem;
opacity: 0.9;
margin: 0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.universal-banner-placeholder {
width: 100%;
height: 500px;
background: var(--footer-gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
/* Responsive Design for Universal Banner */
@media (max-width: 768px) {
/* .universal-banner {
height: 350px;
margin-bottom: 2rem;
}
.universal-banner img,
.universal-banner-placeholder {
height: 350px;
width: 100%;
object-fit: cover;
object-position: center;
} */
.universal-banner-title {
font-size: 2rem;
}
.universal-banner-subtitle {
font-size: 1rem;
}
.universal-banner-overlay {
padding: 1rem;
}
}
@media (max-width: 576px) {
/* .universal-banner {
height: 280px;
margin-bottom: 1.5rem;
border-radius: 8px;
overflow: hidden;
} */
/* .universal-banner img,
.universal-banner-placeholder {
height: 280px;
width: 100%;
object-fit: cover;
object-position: center;
border-radius: 8px;
} */
.universal-banner-title {
font-size: 1.5rem;
}
}
/* Additional mobile fixes for experience section specifically */
@media (max-width: 480px) {
.universal-banner:hover img {
transform: none !important; /* Disable hover effects on mobile */
}
}
/* Common Section Styles */
.home-section {
padding: 2.5rem 0;
margin-bottom: 1.5rem;
}
.home-section-light {
background-color: #fff;
}
.home-section-gray {
background-color: #f8f9fa;
}
.home-section-white {
background-color: #fff;
}
/* Mobile responsive adjustments for home sections */
@media (max-width: 768px) {
.home-section {
padding: 2rem 0;
margin-bottom: 1rem;
}
}
@media (max-width: 576px) {
.home-section {
padding: 1.5rem 0;
margin-bottom: 1rem;
}
/* Ensure container has proper padding on mobile */
.home-section .container {
padding-left: 15px;
padding-right: 15px;
}
}
/* Common Title and Subtitle Styles */
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--section-title-color, #2c3e50);
margin-bottom: 0.75rem;
text-align: center;
font-family: var(--title-font) !important;
}
.section-subtitle {
/* font-size: 1.2rem;*/
color: var(--section-subtitle-color, #6c757d);
margin-bottom: 3rem;
line-height: 1.6;
text-align: center;
max-width: 600px;
margin-left: auto;
margin-right: auto;
display: block;
font-family: var(--title-font) !important;
}
/* ===================================
UNIVERSAL CAROUSEL WRAPPER SPACING
=================================== */
/* Consistent spacing for all carousel wrappers */
.services-wrapper,
.quality-certifications-wrapper,
.brand-partners-wrapper,
.video-testimonials-wrapper {
/* margin-top: 3rem;*/
}
/* Carousel indicators consistent spacing */
.services-indicators,
.quality-certifications-indicators,
.brand-partners-indicators,
.video-testimonials-indicators {
bottom: -50px;
margin-bottom: 0;
margin-top: 2rem;
}
.services-indicators button,
.quality-certifications-indicators button,
.brand-partners-indicators button,
.video-testimonials-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: rgba(102, 126, 234, 0.3);
border: none;
}
.services-indicators button.active,
.quality-certifications-indicators button.active,
.brand-partners-indicators button.active,
.video-testimonials-indicators button.active {
background-color: #B3951E;
}
/* Introductory Message Section */
.intro-message-section {
background-color: #f8f9fa;
border-bottom: 1px solid #eee;
padding: 2rem 0;
}
.intro-message {
padding: 2rem 1rem;
}
.intro-text {
font-size: 2rem;
font-weight: 400;
line-height: 1.6;
color: #2c3e50;
margin: 0;
position: relative;
font-family: var(--title-font) !important;
}
.intro-text::before,
.intro-text::after {
/* content: '"'; */
font-size: 2rem;
color: var(--accent-color);
font-weight: bold;
}
.intro-text::before {
margin-right: 0.25rem;
}
.intro-text::after {
margin-left: 0.25rem;
}
/* Welcome Section */
.welcome-section {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 15px;
margin: 2rem 0;
text-align: center;
padding: 4rem 0;
}
.about-preview {
max-width: 800px;
margin: 0 auto;
}
/* Factory Section */
.factory-section {
background-color: #fff;
padding: 4rem 0;
border-top: 1px solid #e9ecef;
}
.factory-banner-container {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.factory-banner-container:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.factory-banner-image {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
}
.factory-banner-image[onclick] {
cursor: pointer;
transition: filter 0.3s ease;
}
.factory-banner-image[onclick]:hover {
filter: brightness(0.9);
}
.factory-banner-placeholder {
width: 100%;
height: 400px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #6c757d;
border: 2px dashed #dee2e6;
}
.factory-icon {
font-size: 4rem;
margin-bottom: 1rem;
color: #adb5bd;
}
.factory-banner-placeholder p {
margin: 0;
font-size: 1.2rem;
font-weight: 500;
}
.factory-video-label {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 16px;
border-radius: 20px;
backdrop-filter: blur(10px);
}
.video-text {
margin: 0;
font-size: 0.9rem;
font-weight: 500;
}
/* Quality Certifications Section */
.quality-certifications-section {
background-color: #f8f9fa;
padding: 4rem 0;
border-top: 1px solid #e9ecef;
}
/* Quality Certifications Specific Styles */
.quality-certifications-wrapper .portfolio-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 250px;
position: relative;
}
.quality-certifications-wrapper .portfolio-card:hover {
/* transform: translateY(-5px);*/
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.quality-certifications-wrapper .portfolio-image-container {
height: 100%;
overflow: hidden;
position: relative;
}
.quality-certifications-wrapper .portfolio-image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform 0.3s ease;
padding: 10px;
}
.quality-certifications-wrapper .portfolio-card:hover .portfolio-image {
/* transform: scale(1.02);*/
}
.certification-card {
background: white;
/* border-radius: 12px;*/
padding: 2rem 1.5rem;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
border: 1px solid #e9ecef;
}
.certification-card:hover {
/* transform: translateY(-5px);*/
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
border-color: var(--hover-color);
}
.certification-image-container {
margin-bottom: 1.5rem;
}
/* Apply golden border class to all home page images */
.home-section img,
.universal-banner img {
/* border: 3px solid var(--accent-color) !important; */
/* transition: all 0.3s ease; */
border-radius: 5px;
}
/* Exclude small icons and logos from border */
.google-icon,
.google-logo {
border: none !important;
}
.google-icon:hover,
.google-logo:hover {
border: none !important;
box-shadow: none !important;
transform: none !important;
}
/* Product showcase images */
.product-showcase-image {
width: 100%;
height: 100%;
object-fit: cover;
/* border: 3px solid var(--accent-color);*/
}
.certification-image {
width: 100%;
max-width: 150px;
height: 150px;
object-fit: contain;
border-radius: 8px;
}
.certification-placeholder {
width: 100%;
height: 150px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
margin-bottom: 1.5rem;
border: 2px dashed #dee2e6;
}
.certification-icon {
font-size: 3rem;
color: var(--accent-color);
}
.certification-content {
margin-top: auto;
}
.certification-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
line-height: 1.4;
}
/* Brand Partners Section */
.brand-partner-card {
background: white;
/* border-radius: 12px;*/
padding: 2rem 1.5rem;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
border: 1px solid #e9ecef;
}
.brand-partner-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
border-color: var(--accent-color);
}
.brand-partner-image-container {
margin-bottom: 1.5rem;
}
.brand-partner-image {
width: 100%;
max-width: 150px;
height: 120px;
object-fit: contain;
border-radius: 8px;
}
.brand-partner-placeholder {
width: 100%;
height: 120px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
margin-bottom: 1.5rem;
border: 2px dashed #dee2e6;
}
.brand-partner-icon {
font-size: 2.5rem;
color: #B3951E;
}
.brand-partner-content {
margin-top: auto;
}
.brand-partner-title {
font-size: 1rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
line-height: 1.4;
}
.brand-partner-description {
font-size: 0.9rem;
color: #6c757d;
margin-top: 0.5rem;
line-height: 1.4;
}
/* Our Services Section */
.our-services-section {
background-color: #fff;
padding: 4rem 0;
}
.services-content {
padding-right: 2rem;
}
.services-list {
list-style: none;
padding: 0;
margin: 0;
}
.service-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid #e9ecef;
/* transition: all 0.3s ease; */
}
.service-item:hover {
background-color: #f8f9fa;
padding-left: 1rem;
border-radius: 8px;
border-bottom: 1px solid transparent;
}
.service-text {
font-size: 1.1rem;
color: #2c3e50;
font-weight: 500;
}
.service-arrow {
font-size: 1.5rem;
color: var(--accent-color);
font-weight: bold;
/* transition: transform 0.3s ease; */
}
.service-item:hover .service-arrow {
/* transform: translate(5px, -5px); */
}
/* Room Categories Grid */
.room-categories-grid {
height: 400px;
}
.room-category {
height: 190px;
border-radius: 12px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.room-category:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.kitchen-category {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('data:image/svg+xml,');
}
.dining-category {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('data:image/svg+xml,');
}
.bedroom-category {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('data:image/svg+xml,');
}
.living-category {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('data:image/svg+xml,');
}
.room-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}
.room-category:hover .room-overlay {
background: rgba(0, 0, 0, 0.5);
}
.room-title {
color: white;
font-size: 1.5rem;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
margin: 0;
letter-spacing: 1px;
}
/* Bootstrap-based Products Featured Grid */
.product-feature-item {
position: relative;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
margin-bottom: 0;
}
.product-feature-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.product-feature-item:hover img {
transform: scale(1.05);
}
.product-feature-item.large {
height: 400px;
}
.product-feature-item.square {
height: 200px;
}
.product-feature-item.tall {
height: 615px;
/* 400 (large) + 200 (square) + 15 (gap) */
}
@media (max-width: 991px) {
.product-feature-item.large {
height: 350px;
}
.product-feature-item.square {
height: 180px;
}
.product-feature-item.tall {
height: 545px;
}
}
@media (max-width: 767px) {
.product-feature-item.large,
.product-feature-item.square,
.product-feature-item.tall {
height: 250px;
}
}
.product-feature-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
padding: 20px;
text-align: center;
}
.product-feature-item:hover .product-feature-overlay {
background: rgba(0, 0, 0, 0.5);
}
.product-feature-title {
color: white;
font-size: 1.8rem;
font-weight: 800;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
margin: 0;
letter-spacing: 2px;
text-transform: uppercase;
}
@media (max-width: 767px) {
.product-feature-title {
font-size: 1.4rem;
}
}
/* Contact Section */
.contact-preview {
margin: 2rem 0;
padding: 2rem;
background-color: #f8f9fa;
border-radius: 15px;
}
/* Common Button Styles */
.btn-primary {
background: var(--btn-gradient);
border: none;
border-radius: 25px;
padding: 10px 30px;
font-weight: 500;
transition: all 0.3s ease;
font-family: var(--btn-font);
}
.btn-primary:hover {
background: var(--btn-gradient-hover);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(32, 27, 77, 0.3);
}
.text-primary {
color: #201B4D !important;
}
/* Video Modal Styles */
.video-modal {
display: flex;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
}
.video-modal-content {
position: relative;
background-color: #000;
padding: 20px;
border-radius: 8px;
max-width: 90%;
max-height: 90%;
width: 800px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.video-modal-content video {
border-radius: 4px;
max-height: 70vh;
}
.video-modal-content iframe {
border-radius: 4px;
min-height: 400px;
}
.video-modal-close {
position: absolute;
top: -10px;
right: 10px;
color: white;
font-size: 35px;
font-weight: bold;
cursor: pointer;
z-index: 10000;
transition: color 0.3s ease;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.video-modal-close:hover {
color: #ccc;
transform: scale(1.1);
}
/* ===================================
RESPONSIVE DESIGN
=================================== */
/* Large screens (992px and up) */
@media (max-width: 992px) {
.services-content {
padding-right: 0;
margin-bottom: 2rem;
}
.section-title {
font-size: 2rem;
}
.room-categories-grid {
height: auto;
}
.room-category {
height: 150px;
}
.factory-banner-image,
.factory-banner-placeholder {
height: 300px;
}
.certification-image {
max-width: 120px;
height: 120px;
}
.certification-placeholder {
height: 120px;
}
.certification-icon {
font-size: 2.5rem;
}
.brand-partner-image {
max-width: 120px;
height: 100px;
}
.brand-partner-placeholder {
height: 100px;
}
.brand-partner-icon {
font-size: 2rem;
}
}
/* Medium screens (768px and up) */
@media (max-width: 768px) {
.intro-text {
font-size: 1.25rem;
}
.intro-message {
padding: 1.5rem 0.5rem;
}
.section-title {
font-size: 1.8rem;
}
.room-title {
font-size: 1.2rem;
}
.factory-banner-image,
.factory-banner-placeholder {
height: 250px;
}
.factory-icon {
font-size: 3rem;
}
.factory-video-label {
bottom: 15px;
left: 15px;
padding: 6px 12px;
}
.video-text {
font-size: 0.8rem;
}
.certification-card {
padding: 1.5rem 1rem;
}
.certification-image {
max-width: 100px;
height: 100px;
}
.certification-placeholder {
height: 100px;
}
.certification-icon {
font-size: 2rem;
}
.certification-title {
font-size: 1rem;
}
.brand-partner-card {
padding: 1.5rem 1rem;
}
.brand-partner-image {
max-width: 100px;
height: 80px;
}
.brand-partner-placeholder {
height: 80px;
}
.brand-partner-icon {
font-size: 1.5rem;
}
.brand-partner-title {
font-size: 0.9rem;
}
.video-modal-content {
width: 95%;
padding: 10px;
max-height: 85vh;
}
.video-modal-content iframe {
height: 250px !important;
min-height: 250px;
}
.video-modal-content video {
max-height: 60vh;
}
.video-modal-close {
font-size: 28px;
top: -5px;
right: 5px;
}
}
/* Small screens (576px and up) */
@media (max-width: 576px) {
.intro-text {
font-size: 16px;
}
.intro-text::before,
.intro-text::after {
font-size: 1.5rem;
}
.section-title {
font-size: 1.6rem;
}
.room-category {
height: 120px;
}
.room-title {
font-size: 1rem;
}
.factory-banner-image,
.factory-banner-placeholder {
height: 200px;
}
.factory-icon {
font-size: 2.5rem;
}
.factory-video-label {
bottom: 10px;
left: 10px;
padding: 4px 8px;
}
.video-text {
font-size: 0.75rem;
}
.certification-card {
padding: 1rem 0.75rem;
}
.certification-image {
max-width: 80px;
height: 80px;
}
.certification-placeholder {
height: 80px;
}
.certification-icon {
font-size: 1.5rem;
}
.certification-title {
font-size: 0.9rem;
}
.brand-partner-card {
padding: 1rem 0.75rem;
}
.brand-partner-image {
max-width: 80px;
height: 60px;
}
.brand-partner-placeholder {
height: 60px;
}
.brand-partner-icon {
font-size: 1.2rem;
}
.brand-partner-title {
font-size: 0.8rem;
}
}
/* ===================================
SERVICES SECTION STYLES
=================================== */
/* Service Name Overlay */
.service-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
padding: 30px 20px 20px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.service-name {
color: white;
font-size: 1.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
font-family: var(--title-font) !important;
}
/* Responsive Service Name */
@media (max-width: 992px) {
.service-name {
font-size: 1.5rem;
letter-spacing: 1.5px;
}
}
@media (max-width: 768px) {
.service-name {
font-size: 1.3rem;
letter-spacing: 1px;
}
.service-overlay {
padding: 20px 15px 15px;
}
}
@media (max-width: 576px) {
.service-name {
font-size: 1.1rem;
letter-spacing: 0.5px;
}
.service-overlay {
padding: 15px 10px 10px;
}
}
.services-content {
padding-right: 2rem;
}
.services-intro-title {
font-size: 2rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
}
.services-intro-text {
font-size: 1.1rem;
line-height: 1.6;
color: #6c757d;
margin-bottom: 2rem;
}
.services-list {
list-style: none;
padding: 0;
margin: 0;
}
.service-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid #e9ecef;
/* transition: all 0.3s ease; */
cursor: pointer;
}
.service-item:hover {
/* All hover effects disabled */
/* background-color: #f8f9fa; */
/* padding-left: 1rem; */
/* border-radius: 8px; */
/* border-bottom: 1px solid transparent; */
}
.service-text {
font-size: 1.1rem;
color: #2c3e50;
font-weight: 500;
}
.service-arrow {
font-size: 1.5rem;
color: #B3951E;
font-weight: bold;
/* transition: transform 0.3s ease; */
}
.service-item:hover .service-arrow {
/* transform: translate(5px, -5px); */
}
.services-cta .btn {
background: linear-gradient(135deg, #201B4D 0%, #2D2DAD 50%, #B3951E 100%);
border: none;
border-radius: 25px;
padding: 12px 30px;
font-weight: 600;
transition: all 0.3s ease;
}
.services-cta .btn:hover {
background: linear-gradient(135deg, #2D2DAD 0%, #B3951E 50%, #201B4D 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(32, 27, 77, 0.3);
}
/* Room Categories Grid */
.room-categories-grid {
height: 400px;
}
.room-category {
height: 190px;
border-radius: 12px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.room-category:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.kitchen-category {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('data:image/svg+xml,');
}
.dining-category {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('data:image/svg+xml,');
}
.bedroom-category {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('data:image/svg+xml,');
}
.living-category {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('data:image/svg+xml,');
}
.room-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}
.room-category:hover .room-overlay {
background: rgba(0, 0, 0, 0.5);
}
.room-title {
color: white;
font-size: 1.2rem;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
margin: 0;
letter-spacing: 1px;
}
/* Responsive Design for Services Section */
@media (max-width: 992px) {
.services-content {
padding-right: 0;
margin-bottom: 2rem;
}
.services-intro-title {
font-size: 1.8rem;
}
.room-categories-grid {
height: auto;
}
.room-category {
height: 150px;
}
/* Match services card with Why Choose Us image style on tablet */
.services-wrapper .portfolio-card,
#servicesCarousel .portfolio-card {
height: auto !important;
min-height: 300px;
}
.services-wrapper .portfolio-image-container,
#servicesCarousel .portfolio-image-container {
height: auto;
}
.services-wrapper .portfolio-image,
#servicesCarousel .portfolio-image {
width: 100%;
height: auto;
object-fit: contain;
}
}
@media (max-width: 768px) {
.services-intro-title {
font-size: 1.6rem;
}
.services-intro-text {
font-size: 1rem;
}
.room-title {
font-size: 1rem;
}
.room-category {
height: 120px;
}
.service-item {
padding: 0.75rem 0;
}
.service-text {
font-size: 1rem;
}
.service-arrow {
font-size: 1.3rem;
}
/* Match services card with Why Choose Us image style on mobile */
.services-wrapper .portfolio-card,
#servicesMobileCarousel .portfolio-card {
height: auto !important;
min-height: 250px;
}
.services-wrapper .portfolio-image-container,
#servicesMobileCarousel .portfolio-image-container {
height: auto;
}
.services-wrapper .portfolio-image,
#servicesMobileCarousel .portfolio-image {
width: 100%;
height: auto;
object-fit: contain;
}
}
@media (max-width: 576px) {
.services-intro-title {
font-size: 1.4rem;
}
.room-category {
height: 100px;
}
.room-title {
font-size: 0.9rem;
}
}
/* ===================================
EXPERIENCE CENTRE SECTION STYLES
=================================== */
.experience-banner-container {
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.experience-banner-image {
width: 100%;
height: 500px;
/* min-height: 400px;*/
object-fit: cover;
transition: transform 0.3s ease;
}
.experience-banner-image:hover {
transform: scale(1.02);
}
.experience-banner-placeholder {
background: #f8f9fa;
padding: 4rem 2rem;
text-align: center;
border-radius: 15px;
border: 2px dashed #dee2e6;
min-height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.experience-icon {
font-size: 4rem;
color: #6c757d;
margin-bottom: 1rem;
}
/* Responsive Design for Experience Centre */
@media (max-width: 768px) {
.experience-banner-image {
min-height: 250px;
height: 350px;
}
.experience-banner-placeholder {
min-height: 250px;
padding: 2rem 1rem;
}
.experience-icon {
font-size: 3rem;
}
}
/* Mobile specific fixes for experience section */
@media (max-width: 576px) {
.experience-banner-container {
border-radius: 8px;
margin: 0 -15px; /* Extend to container edges */
}
.experience-banner-image {
height: 280px;
min-height: 280px;
border-radius: 8px;
}
.experience-banner-placeholder {
min-height: 280px;
border-radius: 8px;
}
}
@media (max-width: 480px) {
.experience-banner-container {
border-radius: 0;
margin: 0 -15px;
}
.experience-banner-image {
height: 250px;
min-height: 250px;
border-radius: 0;
transform: none !important; /* Remove scale transform on very small screens */
}
.experience-banner-image:hover {
transform: none !important; /* Disable hover effects on mobile */
}
.experience-banner-placeholder {
min-height: 250px;
border-radius: 0;
}
}
/* ===================================
HOME FAQ SECTION STYLES
=================================== */
.home-faq-item {
margin-bottom: 1rem;
border: none;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.home-faq-item .accordion-button {
background: white;
border: none;
padding: 1.25rem 1.5rem;
font-weight: 600;
font-size: 1rem;
color: #2c3e50;
border-radius: 10px;
transition: all 0.3s ease;
}
.home-faq-item .accordion-button:not(.collapsed) {
background: linear-gradient(135deg, #201B4D 0%, #2D2DAD 50%, #B3951E 100%);
color: white;
box-shadow: none;
}
.home-faq-item .accordion-button:focus {
box-shadow: none;
border: none;
}
.home-faq-item .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D3D3D3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transition: transform 0.3s ease;
width: 0.8rem;
height: 0.8rem;
background-size: 0.8rem;
}
.home-faq-item .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(180deg);
width: 0.8rem;
height: 0.8rem;
background-size: 0.8rem;
}
.home-faq-answer {
padding: 1.25rem 1.5rem;
background: white;
font-size: 0.95rem;
line-height: 1.6;
color: #6c757d;
border-top: 1px solid #e9ecef;
}
.home-faq-question {
flex: 1;
text-align: left;
font-family: var(--header-font) !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
color: #2c3e50 !important;
display: block !important;
width: 100% !important;
line-height: 1.4 !important;
}
/* Ensure FAQ question text is always visible */
.home-faq-item .accordion-button .home-faq-question {
color: #2c3e50 !important;
font-family: var(--header-font) !important;
}
.home-faq-item .accordion-button:not(.collapsed) .home-faq-question {
color: white !important;
}
/* Override any conflicting styles to ensure FAQ titles are always readable */
.home-faq-item .accordion-button {
background: white !important;
border: none !important;
padding: 1.5rem !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
color: #2c3e50 !important;
border-radius: 10px !important;
text-align: left !important;
line-height: 1.4 !important;
font-family: var(--header-font) !important;
}
.home-faq-placeholder {
padding: 2rem;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.faq-icon {
font-size: 3rem;
color: #6c757d;
margin-bottom: 1rem;
}
/* Hover effects */
.home-faq-item .accordion-button:hover {
background: #f8f9fa;
}
.home-faq-item .accordion-button:not(.collapsed):hover {
background: linear-gradient(135deg, #2D2DAD 0%, #B3951E 50%, #201B4D 100%);
}
/* Responsive Design for Home FAQ */
@media (max-width: 768px) {
.home-faq-item .accordion-button {
padding: 1rem;
font-size: 0.9rem;
}
.home-faq-answer {
padding: 1rem;
font-size: 0.9rem;
}
.faq-icon {
font-size: 2.5rem;
}
}
/* TalkTown Section Styles */
.talktown-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
border: 1px solid #f0f0f0;
cursor: pointer;
}
.talktown-card:hover {
/* transform: translateY(-5px);*/
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.talktown-card-image {
position: relative;
overflow: hidden;
height: 180px;
background: #f8f9fa;
}
.talktown-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.talktown-card:hover .talktown-card-image img {
transform: scale(1.05);
}
.talktown-card-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
height: calc(100% - 180px);
}
.talktown-card-title {
font-size: 1.1rem;
font-weight: 600;
color: #333;
margin-bottom: 0.75rem;
line-height: 1.4;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.talktown-card-description {
font-size: 19.2px;
color: #666;
line-height: 1.5;
margin-bottom: 1rem;
flex-grow: 1;
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.talktown-view-link {
color: #007bff;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
margin-top: auto;
transition: color 0.3s ease;
}
.talktown-view-link:hover {
color: #0056b3;
text-decoration: none;
}
.talktown-placeholder {
text-align: center;
padding: 4rem 2rem;
background: #f8f9fa;
border-radius: 15px;
border: 2px dashed #dee2e6;
}
.talktown-icon {
font-size: 4rem;
color: #6c757d;
margin-bottom: 1rem;
}
.talktown-placeholder h3 {
color: #495057;
margin-bottom: 0.5rem;
}
.talktown-placeholder p {
color: #6c757d;
margin-bottom: 0;
}
/* Responsive Design for TalkTown Cards */
@media (max-width: 992px) {
.talktown-card-image {
height: 160px;
}
.talktown-card-content {
padding: 1.25rem;
height: calc(100% - 160px);
}
}
@media (max-width: 768px) {
.talktown-card {
margin-bottom: 1.5rem;
}
.talktown-card-image {
height: 200px;
}
.talktown-card-content {
padding: 1.5rem;
height: calc(100% - 200px);
}
.talktown-card-title {
font-size: 1.2rem;
}
.talktown-card-description {
font-size: 1rem;
}
.talktown-placeholder {
padding: 3rem 1.5rem;
}
.talktown-icon {
font-size: 3rem;
}
}
/* ===================================
PORTFOLIO SECTION STYLES
=================================== */
.portfolio-carousel {
position: relative;
/* margin-top: 2rem;*/
/* padding: 0 60px;*/
/* Add padding for navigation buttons */
}
.portfolio-grid {
padding: 0 15px;
}
.portfolio-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 281px;
position: relative;
}
.portfolio-card:hover {
/* transform: translateY(-5px);*/
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.portfolio-image-container {
height: 100%;
overflow: hidden;
position: relative;
}
.portfolio-image {
width: 100%;
height: 100%;
/*height:281.7px;*/
object-fit: cover;
/* transition: transform 0.3s ease; */
}
.portfolio-card:hover .portfolio-image {
/* transform: scale(1.05);*/
}
.portfolio-placeholder {
height: 100%;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
}
.portfolio-icon {
font-size: 3rem;
color: #6c757d;
}
/* Portfolio Carousel Controls - Using Global Styles from site.css */
/* Portfolio Carousel Indicators */
.portfolio-indicators {
/* bottom: -50px;*/
margin-bottom: 0;
}
.portfolio-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: rgba(102, 126, 234, 0.3);
border: none;
}
.portfolio-indicators button.active {
background-color: #B3951E;
}
/* Portfolio Placeholder Section */
.portfolio-placeholder-section {
text-align: center;
padding: 4rem 2rem;
background: #f8f9fa;
border-radius: 12px;
margin: 2rem 0;
}
.portfolio-section-icon {
font-size: 4rem;
color: #6c757d;
margin-bottom: 1.5rem;
}
.portfolio-placeholder-section h3 {
color: #495057;
margin-bottom: 1rem;
}
.portfolio-placeholder-section p {
font-size: 1.1rem;
margin: 0;
}
/* Responsive Design for Portfolio */
@media (max-width: 992px) {
.portfolio-card {
height: 220px;
}
}
@media (max-width: 768px) {
.portfolio-card {
height: 200px;
margin-bottom: 1rem;
}
/* Portfolio Carousel Mobile - Using Global Styles from site.css */
.portfolio-indicators {
bottom: -30px;
}
.portfolio-grid {
padding: 0 5px;
}
/* Mobile carousel - show one card at a time for all portfolio-carousel instances */
.portfolio-carousel.d-md-none .portfolio-grid .row .col-12 {
flex: 0 0 100%;
max-width: 100%;
display: block !important;
}
/* Specific fix for Portfolio mobile carousel */
#portfolioMobileCarousel .portfolio-grid .row .col-12 {
flex: 0 0 100% !important;
max-width: 100% !important;
display: block !important;
}
/* Ensure Portfolio mobile carousel shows only one card */
#portfolioMobileCarousel .carousel-item {
display: block !important;
}
#portfolioMobileCarousel .portfolio-card {
width: 100% !important;
margin: 0 auto !important;
}
/* Mobile spacing fixes for portfolio section titles */
.section-title {
font-size: 2rem !important;
margin-bottom: 1.5rem !important;
padding: 0 15px !important;
line-height: 1.3 !important;
}
.section-subtitle {
font-size: 1.1rem !important;
margin-bottom: 2.5rem !important;
padding: 0 20px !important;
line-height: 1.5 !important;
}
}
@media (max-width: 576px) {
.portfolio-card {
height: 180px;
}
.portfolio-icon {
font-size: 2rem;
}
/* Enhanced mobile spacing for very small screens */
.section-title {
font-size: 1.75rem !important;
margin-bottom: 1.25rem !important;
padding: 0 10px !important;
line-height: 1.2 !important;
}
.section-subtitle {
font-size: 1rem !important;
margin-bottom: 2rem !important;
padding: 0 15px !important;
line-height: 1.4 !important;
}
/* Add extra spacing for portfolio section on mobile */
.home-section {
padding: 1rem 0 !important;
}
.home-section .container {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
/* Brand Partners Specific Styles */
.brand-partners-wrapper .portfolio-card {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
}
.brand-partners-wrapper .portfolio-card:hover {
/* transform: translateY(-3px);
*/
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.brand-partners-wrapper .portfolio-image-container {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.brand-partners-wrapper .portfolio-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
transition: transform 0.3s ease;
}
.brand-partners-wrapper .portfolio-card:hover .portfolio-image {
/* transform: scale(1.05);*/
}
.brand-partners-wrapper .portfolio-placeholder {
height: 100%;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
}
.brand-partners-wrapper .portfolio-icon {
font-size: 2rem;
color: #6c757d;
}
/* Brand Partners Mobile Responsive */
@media (max-width: 992px) {
.brand-partners-wrapper .portfolio-card {
height: 100px;
padding: 12px;
}
}
@media (max-width: 768px) {
.brand-partners-wrapper .portfolio-card {
height: 140px;
padding: 20px;
margin-bottom: 1rem;
}
.brand-partners-wrapper .portfolio-image {
max-width: 90%;
max-height: 90%;
}
/* Mobile carousel specific adjustments for brand partners */
#brandMobileCarousel .portfolio-card {
height: 160px !important;
padding: 25px !important;
margin: 0 auto;
max-width: 300px;
}
#brandMobileCarousel .portfolio-image {
max-width: 85% !important;
max-height: 85% !important;
}
}
@media (max-width: 576px) {
.brand-partners-wrapper .portfolio-card {
height: 120px;
padding: 15px;
}
.brand-partners-wrapper .portfolio-icon {
font-size: 1.8rem;
}
/* Small mobile specific adjustments */
#brandMobileCarousel .portfolio-card {
height: 140px !important;
padding: 20px !important;
max-width: 280px;
}
#brandMobileCarousel .portfolio-image {
max-width: 80% !important;
max-height: 80% !important;
}
}
/* ===================================
TALKTOWN CAROUSEL STYLES
=================================== */
.talktown-carousel {
position: relative;
/* margin-top: 2rem;*/
/* padding: 0 60px;*/
/* Add padding for navigation buttons */
}
.talktown-grid {
padding: 0 15px;
}
/* TalkTown Carousel Controls - Using Global Styles from site.css */
/* TalkTown Carousel Indicators */
.talktown-indicators {
/* bottom: -50px;*/
margin-bottom: 0;
}
.talktown-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: rgba(102, 126, 234, 0.3);
border: none;
}
.talktown-indicators button.active {
background-color: #B3951E;
}
/* Responsive Design for TalkTown Carousel */
@media (max-width: 992px) {
/* No specific changes needed */
}
@media (max-width: 768px) {
/* TalkTown Carousel Mobile - Using Global Styles from site.css */
.talktown-indicators {
bottom: -30px;
}
.talktown-grid {
padding: 0 5px;
}
/* Mobile carousel - show one card at a time */
.talktown-carousel.d-md-none .talktown-grid .row .col-12 {
flex: 0 0 100%;
max-width: 100%;
display: block !important;
}
.talktown-card {
margin-bottom: 1rem;
}
}
/* ===================================
GUARANTEE SECTION STYLES
=================================== */
/* Guarantee Wrapper - Consistent Spacing */
.guarantee-wrapper {
/* margin-top: 3rem;*/
}
.guarantee-carousel {
position: relative;
}
.guarantee-card {
background: #fff;
/* border-radius: 12px;*/
padding: 2rem;
/* text-align: center;*/
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.guarantee-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.guarantee-icon-container {
/* margin-bottom: 1.5rem;*/
text-align: center;
}
.guarantee-icon {
width: 292px;
height: 282px;
object-fit: contain;
margin-bottom: 0.5rem;
}
.guarantee-placeholder-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #201B4D 0%, #2D2DAD 50%, #B3951E 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.5rem;
}
.guarantee-placeholder-icon i {
font-size: 2rem;
color: white;
}
.guarantee-fontawesome-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #201B4D 0%, #2D2DAD 50%, #B3951E 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.5rem;
}
.guarantee-fontawesome-icon i {
font-size: 2rem;
color: white;
}
.guarantee-icon-label {
display: block;
font-size: 0.9rem;
color: #6c757d;
font-style: italic;
}
/* Guarantee Carousel Indicators */
.guarantee-indicators {
bottom: -50px;
margin-bottom: 0;
margin-top: 2rem;
}
.guarantee-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: rgba(102, 126, 234, 0.3);
border: none;
}
.guarantee-indicators button.active {
background-color: #B3951E;
}
.guarantee-content {
margin-top: 1rem;
}
.guarantee-description {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
line-height: 1.6;
margin: 0;
}
/* Responsive Design for Guarantee */
@media (max-width: 768px) {
.guarantee-card {
padding: 1.5rem;
}
.guarantee-icon {
width: 179px;
height: 173px;
}
.guarantee-placeholder-icon {
width: 60px;
height: 60px;
}
.guarantee-fontawesome-icon {
width: 60px;
height: 60px;
}
.guarantee-placeholder-icon i {
font-size: 1.5rem;
}
.guarantee-fontawesome-icon i {
font-size: 1.5rem;
}
.guarantee-description {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.guarantee-card {
padding: 1rem;
}
.guarantee-description {
font-size: 0.95rem;
}
}
/* ===================================
PROCESS SECTION STYLES
=================================== */
.process-card {
background: white;
padding: 2rem 1.5rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #e9ecef;
}
.process-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.process-image img {
max-width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
border: 3px solid #f8f9fa;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.process-title {
color: #2c3e50;
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.process-subtitle {
font-size: 1rem;
margin-bottom: 1rem;
color: #6c757d;
font-weight: 500;
}
.process-description {
color: #495057;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 0;
}
/* Process Section Responsive */
@media (max-width: 768px) {
.process-card {
margin-bottom: 2rem;
padding: 2rem 1rem;
}
.process-image img {
max-width: 80px;
height: 80px;
}
.process-title {
font-size: 1.2rem;
}
}
@media (max-width: 576px) {
.process-card {
margin-bottom: 2.5rem;
}
}
/* ===================================
AWARDS & RECOGNITION SECTION STYLES
=================================== */
/* Awards Wrapper - Consistent Spacing */
.awards-wrapper {
/* margin-top: 3rem;*/
}
.awards-carousel {
position: relative;
}
/* Awards Carousel Indicators */
.awards-indicators {
bottom: -50px;
margin-bottom: 0;
margin-top: 2rem;
}
.awards-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: rgba(102, 126, 234, 0.3);
border: none;
}
.awards-indicators button.active {
background-color: #B3951E;
}
.award-card {
background: white;
padding: 2rem 1.5rem;
/* border-radius: 15px;*/
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: center;
border: 1px solid #f0f0f0;
position: relative;
overflow: hidden;
}
.award-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.award-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
/* background: linear-gradient(90deg, #FFD700, #FFA500, #FF8C00);*/
}
.award-image-container {
margin-bottom: 1rem;
display: flex;
justify-content: center;
align-items: center;
min-height: 120px;
}
.award-image {
max-width: 100%;
max-height: 328px;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
transition: transform 0.3s ease;
}
.award-card:hover .award-image {
transform: scale(1.05);
}
.award-placeholder {
display: flex;
justify-content: center;
align-items: center;
min-height: 120px;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 10px;
margin-bottom: 1.5rem;
}
.award-icon {
font-size: 3rem;
color: #FFD700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.award-content {
text-align: center;
}
.award-title {
color: #2c3e50;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.award-year {
color: #FFD700;
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.award-organization {
color: #6c757d;
font-size: 0.9rem;
font-style: italic;
margin-bottom: 0;
line-height: 1.4;
}
/* Awards Section Responsive */
@media (max-width: 768px) {
.award-card {
padding: 1.5rem 1rem;
margin-bottom: 2rem;
}
.award-image {
max-width: 200px;
max-height: 250px;
}
.award-icon {
font-size: 2.5rem;
}
.award-title {
font-size: 1.1rem;
}
}
@media (max-width: 576px) {
.award-card {
margin-bottom: 1.5rem;
}
.award-image-container {
min-height: 100px;
}
}
/* ===================================
WHY CHOOSE US SECTION STYLES
=================================== */
/* Why Choose Us - Grey Card Wrapper */
.why-choose-us-card-wrapper {
background-color: #f8f9fa;
padding: 3rem;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
margin: 0 2rem;
}
/* Responsive padding for card wrapper */
@media (max-width: 768px) {
.why-choose-us-card-wrapper {
padding: 2rem 1.5rem;
margin: 0 1rem;
}
}
@media (max-width: 576px) {
.why-choose-us-card-wrapper {
padding: 1.5rem 1rem;
margin: 0 0.5rem;
}
}
/* Why Choose Us - Full Width Layout like Banner */
.home-section-gray .banner-width-container,
.home-section-white .banner-width-container {
width: 100%;
padding: 0;
}
.home-section-gray .banner-width-container>.row,
.home-section-white .banner-width-container>.row {
margin: 0;
width: 100%;
}
/* Keep standard Bootstrap column gutters */
.home-section-gray .banner-width-container>.row>[class*="col-"],
.home-section-white .banner-width-container>.row>[class*="col-"] {
padding-left: 15px;
padding-right: 15px;
}
/* Why Choose Us Image Wrapper */
.why-choose-us-image-wrapper {
padding: 0 2rem;
}
.why-choose-us-image-wrapper img {
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
width: 100%;
height: auto;
}
.why-choose-us-image-wrapper img:hover {
transform: translateY(-5px);
}
.why-choose-us-image img {
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.why-choose-us-image img:hover {
transform: translateY(-5px);
}
.why-choose-us-content {
padding: 2rem 0;
}
.why-choose-us-item {
position: relative;
padding: 1rem 0;
border-bottom: 1px solid #e9ecef;
}
.why-choose-us-item:last-child {
border-bottom: none;
}
.why-choose-us-number {
flex-shrink: 0;
}
.number-badge {
display: inline-block;
font-size: 1.5rem;
font-weight: 700;
color: #d4a574;
min-width: 50px;
}
.why-choose-us-title {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.why-choose-us-description {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 0;
color: #6c757d;
}
.why-choose-us-text {
flex: 1;
}
/* Responsive Design */
@media (max-width: 991.98px) {
.why-choose-us-content {
padding: 1rem 0;
margin-top: 2rem;
}
.section-title.text-start {
text-align: center !important;
}
.why-choose-us-item {
padding: 1.5rem 0;
}
.number-badge {
font-size: 1.3rem;
}
.why-choose-us-title {
font-size: 1.1rem;
}
}
@media (max-width: 575.98px) {
.why-choose-us-item {
padding: 1rem 0;
}
.number-badge {
font-size: 1.2rem;
min-width: 40px;
}
.why-choose-us-title {
font-size: 1rem;
}
.why-choose-us-description {
font-size: 0.9rem;
}
}
/* Why Choose Us Placeholder Styles */
.why-choose-us-placeholder {
background-color: #f8f9fa;
border: 2px dashed #dee2e6;
border-radius: 15px;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.placeholder-content {
color: #6c757d;
}
.placeholder-content i {
opacity: 0.5;
}
/* Why Choose Us Accordion Styles */
.why-choose-us-item {
/* margin-bottom: 1rem;*/
border: none;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.why-choose-us-item .accordion-button {
background: white;
border: none;
padding: 1.5rem;
font-weight: 600;
font-size: 1.1rem;
color: #2c3e50;
border-radius: 10px;
display: flex;
align-items: center;
}
.why-choose-us-item .accordion-button:not(.collapsed) {
background: linear-gradient(135deg, #201B4D 0%, #2D2DAD 50%, #B3951E 100%);
color: white;
box-shadow: none;
}
.why-choose-us-item .accordion-button:focus {
box-shadow: none;
border: none;
}
.why-choose-us-item .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.why-choose-us-item .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.why-choose-us-answer {
padding: 1.5rem;
background: white;
font-size: 1rem;
line-height: 1.7;
color: #6c757d;
border-top: 1px solid #e9ecef;
}
.why-choose-us-number {
font-weight: 700;
color: #B3951E;
font-size: 1.1rem;
min-width: 40px;
}
.why-choose-us-item .accordion-button:not(.collapsed) .why-choose-us-number {
color: white;
}
.why-choose-us-question {
flex: 1;
text-align: left;
}
/* Process Banner Styles */
.process-banner-image {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
margin-bottom: 3rem;
}
.process-banner-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
z-index: 1;
}
.process-banner-image img {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.3s ease;
}
.process-banner-image:hover img {
transform: scale(1.02);
}
/* Process Cards Enhancement */
.process-card {
background: white;
border-radius: 12px;
padding: 2rem 1.5rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
border: 1px solid #f0f0f0;
}
.process-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
border-color: #B3951E;
}
.process-title {
color: #2c3e50;
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.process-subtitle {
color: #B3951E;
font-weight: 500;
margin-bottom: 1rem;
font-size: 1rem;
}
.process-description {
color: #6c757d;
line-height: 1.6;
font-size: 0.95rem;
}
/* Responsive Design for Why Choose Us */
@media (max-width: 768px) {
.why-choose-us-item .accordion-button {
padding: 1rem;
font-size: 1rem;
}
.why-choose-us-answer {
padding: 1rem;
}
.why-choose-us-number {
font-size: 1rem;
min-width: 35px;
}
}
/* ===================================
PRODUCT SECTION STYLES
=================================== */
/* Category Header Styles */
.category-header {
text-align: center;
margin-bottom: 2rem;
padding: 2rem 0;
border-bottom: 2px solid #f8f9fa;
}
.category-title {
font-size: 1rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
/* text-transform: uppercase;*/
letter-spacing: 1px;
}
.category-image-container {
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.category-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Product Card Styles */
.product-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
border: 1px solid #f0f0f0;
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.product-image-container {
position: relative;
height: 250px;
overflow: hidden;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-card:hover .product-image {
transform: scale(1.05);
}
.product-placeholder {
height: 250px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
display: flex;
align-items: center;
justify-content: center;
color: #6c757d;
}
.product-icon {
font-size: 3rem;
opacity: 0.5;
}
.product-content {
padding: 1.5rem;
}
.product-title {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.product-description {
color: #6c757d;
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
/* Responsive Design for Products */
@media (max-width: 768px) {
.category-title {
font-size: 1.5rem;
}
.product-image-container,
.product-placeholder {
height: 200px;
}
.product-content {
padding: 1rem;
}
.product-title {
font-size: 1.1rem;
}
.product-description {
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
.category-header {
padding: 1rem 0;
}
.category-title {
font-size: 1.3rem;
}
.category-image-container {
width: 60px;
height: 60px;
}
.product-image-container,
.product-placeholder {
height: 180px;
}
.product-content {
padding: 0.75rem;
}
.product-title {
font-size: 1rem;
}
.product-description {
font-size: 0.85rem;
}
}
/* Set As Apart - Grey Card Wrapper */
.set-as-apart-card-wrapper {
background-color: #f8f9fa;
padding: 3rem;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
margin: 0 2rem;
}
/* Responsive padding for Set As Apart card wrapper */
@media (max-width: 768px) {
.set-as-apart-card-wrapper {
padding: 2rem 1.5rem;
margin: 0 1rem;
}
}
@media (max-width: 576px) {
.set-as-apart-card-wrapper {
padding: 1.5rem 1rem;
margin: 0 0.5rem;
}
}
/* Set As Apart Section - Table Responsive Styles */
.set-as-apart-item .table-responsive {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
margin: 1rem auto;
display: block;
}
.set-as-apart-item .table-responsive::-webkit-scrollbar {
height: 8px;
}
.set-as-apart-item .table-responsive::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.set-as-apart-item .table-responsive::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.set-as-apart-item .table-responsive::-webkit-scrollbar-thumb:hover {
background: #555;
}
.set-as-apart-item table {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto;
table-layout: auto;
}
.set-as-apart-item table th,
.set-as-apart-item table td {
/* padding: 12px 15px;*/
vertical-align: top;
white-space: normal;
word-wrap: break-word;
}
.set-as-apart-item table th {
background-color: #f8f9fa;
font-weight: 600;
border-bottom: 2px solid #dee2e6;
}
/* Desktop - ensure table displays full width */
@media (min-width: 769px) {
.set-as-apart-item .table-responsive {
overflow-x: visible;
}
.set-as-apart-item table {
width: 100% !important;
max-width: 100% !important;
}
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.set-as-apart-item .table-responsive {
font-size: 0.9rem;
margin: 1rem 0;
overflow-x: auto;
}
.set-as-apart-item table {
min-width: 600px;
width: auto !important;
}
.set-as-apart-item table th,
.set-as-apart-item table td {
padding: 8px 10px;
white-space: normal;
word-wrap: break-word;
}
}
/* Extra small mobile devices */
@media (max-width: 576px) {
.set-as-apart-item .table-responsive {
font-size: 0.8rem;
margin: 0.5rem 0;
}
.set-as-apart-item table {
min-width: 500px;
}
.set-as-apart-item table th,
.set-as-apart-item table td {
padding: 6px 8px;
font-size: 0.8rem;
}
}
/* ===================================
TESTIMONIALS SECTION STYLES
=================================== */
/* Google Rating Summary */
.google-rating-summary {
margin-bottom: 3rem;
}
.rating-badge {
display: inline-flex;
align-items: center;
gap: 15px;
background: white;
padding: 1rem 2rem;
border-radius: 50px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
}
.rating-text {
font-weight: 700;
font-size: 1.1rem;
color: #2c3e50;
letter-spacing: 1px;
}
.rating-stars {
display: flex;
gap: 2px;
}
.rating-stars .star {
font-size: 1.2rem;
}
.rating-count {
font-size: 0.9rem;
color: #6c757d;
font-weight: 500;
}
.google-logo {
height: 20px;
width: auto;
}
/* New Left-Side Google Rating Summary */
.testimonials-main-layout {
margin-top: 0;
align-items: center;
}
.google-rating-summary-left {
position: sticky;
top: 100px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rating-badge-left {
display: flex;
flex-direction: column;
align-items: center;
margin-top:101px;
justify-content: center;
text-align: center;
/* background: white;*/
/* padding: 2rem 1.5rem;*/
border-radius: 15px;
/* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 2px solid #B3951E;*/
}
.rating-text-left {
font-weight: 800;
font-size: 1.5rem;
color: #B3951E;
letter-spacing: 1.5px;
/* margin-bottom: 8px;*/
}
.rating-stars-left {
display: flex;
gap: 3px;
/* margin-bottom: 1rem;*/
justify-content: center;
}
.rating-stars-left .star {
font-size: 1.5rem;
}
.rating-count-left {
font-size: 0.95rem;
color: #6c757d;
font-weight: 500;
/* margin-bottom: 1.5rem;*/
display: block;
}
.google-logo-left {
height: 30px;
width: auto;
}
/* Testimonials Carousel */
.testimonials-carousel {
position: relative;
margin-top: 0;
padding: 0 60px;
}
.testimonials-grid {
padding: 0 15px;
}
.testimonials-grid .row {
display: flex;
align-items: stretch;
}
.testimonials-grid .row > div {
display: flex;
}
/* Testimonial Card Styles - New Layout */
.testimonial-card {
background: white;
/* border-radius: 15px;*/
padding: 3px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
border: 1px solid #f0f0f0;
}
/* New Testimonial Card - Vertical Layout */
.testimonial-card-new {
background: white;
border-radius: 15px;
padding: 1.5rem 1.25rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
min-height: 280px;
max-height: 320px;
border: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* New Horizontal Testimonial Card - Matching Image Design */
.testimonial-card-horizontal {
background: white;
border-radius: 12px;
padding: 1.25rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
min-height: 360px;
border: 1px solid #e9ecef;
}
.testimonial-card-horizontal:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
transform: translateY(-3px);
}
.testimonial-layout-horizontal {
display: flex;
flex-direction: column;
gap: 0.75rem;
height: 100%;
}
/* Left: Profile Image */
.testimonial-profile-left {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 2.75rem;
}
.profile-image-horizontal {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #f0f0f0;
}
.profile-image-placeholder-horizontal {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #B3951E 0%, #d4af37 100%);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #f0f0f0;
}
.profile-initial-horizontal {
font-size: 1.3rem;
font-weight: 700;
color: white;
}
/* Center: Content */
.testimonial-content-horizontal {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.customer-name-horizontal {
font-size: 0.95rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
line-height: 1.2;
}
.testimonial-date-horizontal {
font-size: 0.75rem;
color: #adb5bd;
margin: 0;
}
.testimonial-rating-horizontal {
display: flex;
align-items: center;
gap: 3px;
margin: 0.3rem 0;
}
.testimonial-rating-horizontal .star {
font-size: 0.9rem;
color: #ffc107;
}
.testimonial-rating-horizontal .star.filled {
color: #ffc107;
}
.testimonial-rating-horizontal .star.empty {
color: #e9ecef;
}
.google-icon-inline {
width: 16px;
height: 16px;
object-fit: contain;
margin-left: 5px;
}
.testimonial-text-horizontal {
font-size: 19.2px;
line-height: 1.5;
color: #6c757d;
margin: 0.5rem 0 0.3rem 0;
}
.testimonial-content-horizontal p {
color: black !important;
margin: 0;
font-size: inherit;
line-height: inherit;
}
.read-more-link {
font-size: 0.8rem;
color: #6c757d;
text-decoration: none;
font-weight: 500;
}
.read-more-link:hover {
color: #B3951E;
text-decoration: underline;
}
/* Right: Google Icon */
.testimonial-source-right {
flex-shrink: 0;
display: flex;
align-items: flex-start;
padding-top: 0.25rem;
}
.google-icon-right {
width: 24px;
height: 24px;
object-fit: contain;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.testimonial-card-horizontal:hover .google-icon-right {
opacity: 1;
}
.testimonial-card-new:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
/* Top: Profile Image with Google Icon */
.testimonial-profile-top {
position: relative;
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
justify-content: center;
flex-shrink: 0;
}
.profile-image-top {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #f0f0f0;
}
.profile-image-placeholder-top {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #B3951E 0%, #d4af37 100%);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #f0f0f0;
}
.profile-initial-top {
font-size: 1.5rem;
font-weight: 700;
color: white;
}
.google-icon-top {
position: absolute;
top: -5px;
right: -10px;
width: 24px;
height: 24px;
object-fit: contain;
background: white;
border-radius: 50%;
padding: 3px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Content Section */
.testimonial-content-new {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-between;
}
.customer-name-new {
font-size: 1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.4rem;
}
.testimonial-rating-new {
display: flex;
justify-content: center;
gap: 2px;
margin-bottom: 0.75rem;
}
.testimonial-rating-new .star {
font-size: 1rem;
color: #ffc107;
}
.testimonial-rating-new .star.filled {
color: #ffc107;
}
.testimonial-rating-new .star.empty {
color: #e9ecef;
}
.testimonial-text-new {
font-size: 0.875rem;
line-height: 1.5;
color: #6c757d;
margin-bottom: 0.75rem;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.testimonial-date-new {
font-size: 0.8rem;
color: #adb5bd;
margin-bottom: 0;
font-style: italic;
}
/* Bottom: Google Icon */
.testimonial-footer-new {
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.75rem;
flex-shrink: 0;
}
.google-icon-bottom {
width: 28px;
height: 28px;
object-fit: contain;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.testimonial-card-new:hover .google-icon-bottom {
opacity: 1;
}
margin-bottom: 1rem;
}
.testimonial-card:hover {
/* transform: translateY(-5px);*/
/* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border-color: #B3951E;*/
box-shadow: 0 0 15px rgba(197, 160, 89, 0.6), 0 0 25px rgba(197, 160, 89, 0.4) !important;
}
/* New Layout Structure */
.testimonial-layout {
display: flex;
align-items: flex-start;
gap: 1rem;
height: 100%;
}
/* Left Side: Profile Image */
.testimonial-profile {
flex-shrink: 0;
}
.profile-image {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #f8f9fa;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.profile-image-placeholder {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #201B4D 0%, #2D2DAD 50%, #B3951E 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Center: Main Content */
.testimonial-main {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.testimonial-header {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.customer-name {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
line-height: 1.2;
}
.testimonial-rating {
/* display: flex;*/
align-items: center;
gap: 2px;
}
.testimonial-rating .star {
font-size: 1.1rem;
color: #ffc107;
}
.testimonial-rating .star.filled {
color: #ffc107;
}
.testimonial-rating .star.empty {
color: #e9ecef;
}
.testimonial-content {
flex: 1;
}
.testimonial-text {
font-size: 0.95rem;
line-height: 1.6;
color: #495057;
margin-bottom: 0.5rem;
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.testimonial-date {
font-size: 0.8rem;
color: #6c757d;
margin: 0;
font-style: italic;
}
/* Right Side: Google Icon */
.testimonial-source {
flex-shrink: 0;
display: flex;
align-items: flex-start;
padding-top: 0.25rem;
}
.google-icon {
width: 32px;
height: 32px;
object-fit: contain;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.testimonial-card:hover .google-icon {
opacity: 1;
}
/* Testimonials Carousel Controls - Using Global Styles from site.css */
/* Testimonials Carousel Indicators */
.testimonial-indicators {
bottom: -50px;
margin-bottom: 0;
}
.testimonial-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: rgba(102, 126, 234, 0.3);
border: none;
}
.testimonial-indicators button.active {
background-color: #B3951E;
}
/* Responsive Design for Testimonials */
@media (max-width: 992px) {
.testimonials-carousel {
padding: 0 40px;
}
/* Left-side rating box responsive - 4 rows for tablet */
.google-rating-summary-left {
position: relative;
top: 0;
/* margin-bottom: 2rem;*/
}
.rating-badge-left {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.75rem !important;
/* padding: 1.5rem !important;*/
text-align: center !important;
margin-top: 0 !important;
}
.rating-text-left {
font-size: 1.2rem;
margin-bottom: 0;
order: 1;
}
.rating-stars-left {
margin-bottom: 0;
order: 2;
}
.rating-count-left {
margin-bottom: 0;
order: 3;
}
.google-logo-left {
order: 4;
}
.rating-badge {
padding: 0.75rem 1.5rem;
gap: 10px;
}
/* Horizontal card responsive */
.testimonial-card-horizontal {
min-height: 180px;
}
.profile-image-horizontal {
width: 45px;
height: 45px;
}
.profile-image-placeholder-horizontal {
width: 45px;
height: 45px;
}
.profile-initial-horizontal {
font-size: 1.1rem;
}
}
.rating-text {
font-size: 1rem;
}
.profile-image,
.profile-image-placeholder {
width: 50px;
height: 50px;
}
.profile-image-placeholder {
font-size: 1.2rem;
}
.google-icon {
width: 28px;
height: 28px;
}
}
@media (max-width: 768px) {
.testimonials-carousel {
padding: 0 20px;
}
/* Left-side rating box mobile - Display in row (1, 2, 3, 4) */
.google-rating-summary-left {
margin-bottom: 2rem;
display: block;
}
.rating-badge-left {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 1.25rem 1rem !important;
gap: 0.75rem !important;
max-width: 100% !important;
text-align: center !important;
margin-top: 0 !important;
}
/* Row 1: EXCELLENT */
.rating-text-left {
font-size: 1.1rem;
font-weight: 800;
margin-bottom: 0;
order: 1;
}
/* Row 2: Stars */
.rating-stars-left {
margin-bottom: 0;
display: flex;
gap: 3px;
order: 2;
}
.rating-stars-left .star {
font-size: 1.3rem;
}
/* Row 3: Based on X reviews */
.rating-count-left {
margin-bottom: 0;
font-size: 0.9rem;
text-align: center;
order: 3;
}
/* Row 4: Google logo */
.google-logo-left {
height: 28px;
margin: 0;
order: 4;
}
/* Horizontal card mobile */
.testimonial-card-horizontal {
min-height: 160px;
padding: 1rem;
}
.testimonial-layout-horizontal {
gap: 0.75rem;
}
.profile-image-horizontal {
width: 40px;
height: 40px;
}
.profile-image-placeholder-horizontal {
width: 40px;
height: 40px;
}
.profile-initial-horizontal {
font-size: 1rem;
}
.customer-name-horizontal {
font-size: 0.9rem;
}
.testimonial-date-horizontal {
font-size: 0.7rem;
}
.testimonial-rating-horizontal .star {
font-size: 0.85rem;
}
.google-icon-inline {
width: 14px;
height: 14px;
}
.testimonial-text-horizontal {
font-size: 0.8rem;
}
.read-more-link {
font-size: 0.75rem;
}
.google-icon-right {
width: 20px;
height: 20px;
}
.testimonials-carousel .carousel-control-prev,
.testimonials-carousel .carousel-control-next {
display: flex;
width: 40px;
height: 40px;
left: 5px;
}
.testimonials-carousel .carousel-control-next {
right: 5px;
left: auto;
}
.testimonial-indicators {
/* bottom: -30px;*/
}
.testimonials-grid {
padding: 0 5px;
}
/* Mobile carousel - show one card at a time */
.testimonials-carousel.d-md-none .testimonials-grid .row .col-12 {
flex: 0 0 100%;
max-width: 100%;
display: block !important;
}
.testimonial-card {
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.testimonial-layout {
gap: 0.75rem;
}
.profile-image,
.profile-image-placeholder {
width: 45px;
height: 45px;
}
.profile-image-placeholder {
font-size: 1.1rem;
}
.customer-name {
font-size: 1rem;
}
.testimonial-rating .star {
font-size: 1rem;
}
.google-icon {
width: 24px;
height: 24px;
}
.rating-badge {
padding: 0.5rem 1rem;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.rating-text {
font-size: 0.9rem;
}
.rating-stars .star {
font-size: 1rem;
}
.rating-count {
font-size: 0.8rem;
}
.google-logo {
height: 16px;
}
}
@media (max-width: 576px) {
.testimonial-card {
padding: 1rem;
}
.testimonial-card-new {
padding: 1.5rem 1rem;
}
/* Left-side rating box - Extra small mobile - 4 separate rows */
.rating-badge-left {
display: flex !important;
flex-direction: column !important;
/* padding: 1rem !important;*/
padding-bottom:23px;
gap: 0.5rem !important;
align-items: center !important;
text-align: center !important;
}
/* Row 1: EXCELLENT */
.rating-text-left {
font-size: 1rem;
font-weight: 800;
order: 1;
}
/* Row 2: Stars */
.rating-stars-left {
gap: 2px;
order: 2;
}
.rating-stars-left .star {
font-size: 1.1rem;
}
/* Row 3: Based on reviews */
.rating-count-left {
font-size: 0.8rem;
text-align: center;
order: 3;
}
/* Row 4: Google logo */
.google-logo-left {
height: 22px;
order: 4;
}
/* Horizontal card - Extra small mobile */
.testimonial-card-horizontal {
min-height: 140px;
padding: 0.75rem;
}
.testimonial-layout-horizontal {
gap: 0.5rem;
}
.profile-image-horizontal {
width: 35px;
height: 35px;
}
.profile-image-placeholder-horizontal {
width: 35px;
height: 35px;
}
.profile-initial-horizontal {
font-size: 0.9rem;
}
.customer-name-horizontal {
font-size: 0.85rem;
}
.testimonial-date-horizontal {
font-size: 0.65rem;
}
.testimonial-rating-horizontal .star {
font-size: 0.75rem;
}
.google-icon-inline {
width: 12px;
height: 12px;
}
.testimonial-text-horizontal {
font-size: 1rem;
}
.read-more-link {
font-size: 0.7rem;
}
.google-icon-right {
width: 18px;
height: 18px;
}
.profile-image-top,
.profile-image-placeholder-top {
width: 70px;
height: 70px;
}
.profile-initial-top {
font-size: 1.8rem;
}
.google-icon-top {
width: 24px;
height: 24px;
top: -3px;
right: -8px;
}
.customer-name-new {
font-size: 1rem;
}
.testimonial-rating-new .star {
font-size: 1rem;
}
.testimonial-text-new {
font-size: 0.9rem;
-webkit-line-clamp: 3;
}
.testimonial-date-new {
font-size: 0.8rem;
}
.google-icon-bottom {
width: 28px;
height: 28px;
}
.testimonial-layout {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.testimonial-profile {
align-self: center;
}
.testimonial-source {
align-self: center;
}
.profile-image,
.profile-image-placeholder {
width: 50px;
height: 50px;
}
.profile-image-placeholder {
font-size: 1.2rem;
}
.testimonial-text {
font-size: 0.9rem;
line-clamp: 4;
-webkit-line-clamp: 4;
}
.google-icon {
width: 28px;
height: 28px;
}
.rating-badge {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
.rating-text {
font-size: 0.8rem;
}
.rating-stars .star {
font-size: 0.9rem;
}
.rating-count {
font-size: 0.75rem;
}
}
/* Home Section White Background for Testimonials */
.home-section-white {
background-color: #ffffff;
/* padding: 4rem 0;*/
}
/* ===================================
MOBILE CAROUSEL ENHANCEMENTS
=================================== */
/* Ensure mobile carousels auto-scroll smoothly */
@media (max-width: 768px) {
/* All mobile carousels */
.carousel.d-md-none {
overflow: hidden;
}
.carousel.d-md-none .carousel-inner {
overflow: visible;
}
.carousel.d-md-none .carousel-item {
transition: transform 0.6s ease-in-out;
}
/* Mobile carousel controls positioning */
.carousel.d-md-none .carousel-control-prev,
.carousel.d-md-none .carousel-control-next {
opacity: 0.8;
transition: opacity 0.3s ease;
}
.carousel.d-md-none .carousel-control-prev:hover,
.carousel.d-md-none .carousel-control-next:hover {
opacity: 1;
}
/* Mobile carousel indicators */
.carousel.d-md-none .carousel-indicators {
margin-bottom: 0;
padding-bottom: 1rem;
}
.carousel.d-md-none .carousel-indicators button {
width: 8px;
height: 8px;
margin: 0 3px;
}
/* Specific Portfolio Mobile Carousel Fix */
#portfolioMobileCarousel {
display: block !important;
}
#portfolioCarousel {
display: none !important;
}
/* Force Portfolio mobile to show one card */
#portfolioMobileCarousel .carousel-item .row {
justify-content: center !important;
}
#portfolioMobileCarousel .col-12 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* Touch-friendly carousel controls on mobile */
@media (max-width: 576px) {
.carousel.d-md-none .carousel-control-prev,
.carousel.d-md-none .carousel-control-next {
width: 35px;
height: 35px;
}
.carousel.d-md-none .carousel-control-prev-icon,
.carousel.d-md-none .carousel-control-next-icon {
width: 16px;
height: 16px;
background-size: 16px 16px;
}
}
/* ===================================
VIDEO TESTIMONIALS SECTION STYLES
=================================== */
/* Video Testimonials Carousel */
.video-testimonials-carousel {
position: relative;
/* margin-top: 2rem;*/
padding: 0 60px;
}
.video-testimonials-grid {
padding: 0 15px;
}
/* Video Testimonial Card Styles */
.video-testimonial-card {
background: white;
/* border-radius: 15px;*/
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
border: 1px solid #f0f0f0;
}
.video-testimonial-card:hover {
/* transform: translateY(-8px);*/
/* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
border-color: #B3951E;*/
box-shadow: 0 0 15px rgba(197, 160, 89, 0.6), 0 0 25px rgba(197, 160, 89, 0.4) !important;
}
/* Video Container */
.video-container {
position: relative;
width: 100%;
height: 300px;
background: #000;
overflow: hidden;
}
.video-iframe {
width: 100%;
height: 100%;
border: none;
}
.video-player {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #201B4D 0%, #2D2DAD 50%, #B3951E 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.video-placeholder-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.8;
}
.video-placeholder p {
font-size: 1.1rem;
margin: 0;
opacity: 0.9;
}
/* Video Testimonial Content */
.video-testimonial-content {
padding: 2rem;
}
.video-testimonial-title {
font-size: 1.4rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 1rem;
line-height: 1.3;
}
.video-testimonial-rating {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 1rem;
}
.video-testimonial-rating .star {
font-size: 1.2rem;
color: #ffc107;
}
.video-testimonial-rating .star.filled {
color: #ffc107;
}
.video-testimonial-review {
font-size: 19.2px;
line-height: 1.6;
color: #495057;
margin: 0;
display: -webkit-box;
line-clamp: 4;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Video Testimonials Carousel Controls - Using Global Styles from site.css */
/* Video Testimonials Carousel Indicators */
.video-testimonial-indicators {
bottom: -50px;
margin-bottom: 0;
}
.video-testimonial-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: rgba(102, 126, 234, 0.3);
border: none;
}
.video-testimonial-indicators button.active {
background-color: #B3951E;
}
/* Play Button Overlay for Videos */
.video-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
z-index: 1;
pointer-events: none;
transition: background-color 0.3s ease;
}
.video-testimonial-card:hover .video-container::before {
background: rgba(0, 0, 0, 0.05);
}
/* Responsive Design for Video Testimonials */
@media (max-width: 992px) {
.video-testimonials-carousel {
padding: 0 40px;
}
.video-container {
height: 250px;
}
.video-testimonial-content {
padding: 1.5rem;
}
.video-testimonial-title {
font-size: 1.2rem;
}
}
@media (max-width: 768px) {
.video-testimonials-carousel {
padding: 0 20px;
}
.video-testimonials-carousel .carousel-control-prev,
.video-testimonials-carousel .carousel-control-next {
display: flex;
width: 40px;
height: 40px;
left: 5px;
}
.video-testimonials-carousel .carousel-control-next {
right: 5px;
left: auto;
}
.video-testimonial-indicators {
bottom: -30px;
}
.video-testimonials-grid {
padding: 0 5px;
}
/* Mobile carousel - show one card at a time */
.video-testimonials-carousel.d-md-none .video-testimonials-grid .row .col-12 {
flex: 0 0 100%;
max-width: 100%;
display: block !important;
}
.video-container {
height: 220px;
}
.video-testimonial-content {
padding: 1.25rem;
}
.video-testimonial-title {
font-size: 1.1rem;
}
.video-testimonial-rating .star {
font-size: 1rem;
}
.video-testimonial-review {
font-size: 0.95rem;
line-clamp: 3;
-webkit-line-clamp: 3;
}
.video-placeholder-icon {
font-size: 3rem;
}
.video-placeholder p {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.video-container {
height: 200px;
}
.video-testimonial-content {
padding: 1rem;
}
.video-testimonial-title {
font-size: 1rem;
margin-bottom: 0.75rem;
}
.video-testimonial-rating {
margin-bottom: 0.75rem;
}
.video-testimonial-rating .star {
font-size: 0.9rem;
}
.video-testimonial-review {
font-size: 0.9rem;
line-clamp: 3;
-webkit-line-clamp: 3;
}
.video-placeholder-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.video-placeholder p {
font-size: 0.9rem;
}
}
/* Video Loading States */
.video-container.loading {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Video Testimonial Card Hover Effects */
.video-testimonial-card:hover .video-testimonial-title {
color: #B3951E;
}
.video-testimonial-card:hover .video-testimonial-rating .star {
transform: scale(1.1);
transition: transform 0.2s ease;
}
/* Custom Scrollbar for Video Reviews */
.video-testimonial-review::-webkit-scrollbar {
width: 4px;
}
.video-testimonial-review::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.video-testimonial-review::-webkit-scrollbar-thumb {
background: #B3951E;
border-radius: 2px;
}
.video-testimonial-review::-webkit-scrollbar-thumb:hover {
background: #5a6fd8;
}
/* ===================================
ABOUT US SECTION STYLES
=================================== */
.about-us-image-container {
position: relative;
height: 100%;
}
.about-us-banner {
position: relative;
height: 400px;
width: 100%;
overflow: hidden;
/* border-radius: 15px;*/
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.about-us-banner img {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.3s ease;
}
.about-us-banner:hover img {
transform: scale(1.02);
}
.about-us-placeholder {
height: 400px;
width: 100%;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 15px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
}
.about-us-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
z-index: 2;
border-radius: 15px;
}
.about-us-overlay-content {
color: white;
}
.about-us-overlay-title {
font-size: 3rem;
font-weight: 900;
letter-spacing: 3px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
margin: 0;
color: #fff;
}
.about-us-content {
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.about-us-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1.5rem;
position: relative;
}
.about-us-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(135deg, #201B4D 0%, #2D2DAD 50%, #B3951E 100%);
border-radius: 2px;
}
.about-us-description {
font-size: 1.1rem;
line-height: 1.8;
color: #555;
margin-bottom: 2rem;
}
.about-us-description p {
margin-bottom: 1rem;
}
.about-us-actions .btn {
padding: 12px 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 50px;
transition: all 0.3s ease;
}
.about-us-actions .btn-primary {
background: linear-gradient(135deg, #201B4D 0%, #2D2DAD 50%, #B3951E 100%);
border: none;
box-shadow: 0 8px 25px rgba(32, 27, 77, 0.3);
}
.about-us-actions .btn-primary:hover {
background: linear-gradient(135deg, #2D2DAD 0%, #B3951E 50%, #201B4D 100%);
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(32, 27, 77, 0.4);
}
/* Responsive Design for About Us */
@media (max-width: 768px) {
.about-us-overlay-title {
font-size: 2rem;
letter-spacing: 2px;
}
.about-us-title {
font-size: 2rem;
}
.about-us-content {
padding: 1.5rem;
text-align: center;
}
.about-us-banner,
.about-us-placeholder {
height: 300px;
margin-bottom: 2rem;
}
.about-us-banner img {
height: 300px;
}
}
@media (max-width: 576px) {
.about-us-overlay-title {
font-size: 1.5rem;
letter-spacing: 1px;
}
.about-us-title {
font-size: 1.8rem;
}
.about-us-description {
font-size: 1rem;
}
}
/* ===================================
ABOUT US CAROUSEL STYLES
=================================== */
.about-us-carousel {
position: relative;
}
/* About Us Carousel Controls - Using Global Styles from site.css */
.about-us-carousel .carousel-control-prev {
left: -25px;
}
.about-us-carousel .carousel-control-next {
right: -25px;
}
.about-us-carousel .carousel-control-prev-icon,
.about-us-carousel .carousel-control-next-icon {
width: 20px;
height: 20px;
}
.about-us-indicators {
bottom: -50px;
margin-bottom: 0;
}
.about-us-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(102, 126, 234, 0.3);
border: none;
margin: 0 5px;
transition: all 0.3s ease;
}
.about-us-indicators button.active {
background: rgba(102, 126, 234, 1);
transform: scale(1.2);
}
.about-us-indicators button:hover {
background: rgba(102, 126, 234, 0.7);
transform: scale(1.1);
}
/* Responsive adjustments for About Us carousel */
@media (max-width: 768px) {
/* About Us Carousel Mobile - Using Global Styles from site.css */
}
@media (max-width: 576px) {
.about-us-carousel .carousel-control-prev,
.about-us-carousel .carousel-control-next {
display: none;
}
.about-us-indicators {
bottom: -30px;
}
}
/* ===================================
PRODUCT SHOWCASE STYLES - IMAGE OVERLAY DESIGN
=================================== */
.category-section {
margin-bottom: 5rem;
}
.category-title {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
/* text-transform: uppercase;*/
letter-spacing: 2px;
}
.product-showcase-card {
position: relative;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
height: 500px;
/* Reduced height since no separate content area */
display: flex;
flex-direction: column;
}
.product-number {
position: absolute;
top: 20px;
left: 20px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #201B4D 0%, #2D2DAD 50%, #B3951E 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
z-index: 4;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.product-image-wrapper {
position: relative;
height: 100%;
/* Full height of card */
overflow: hidden;
flex: 1;
}
.product-showcase-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-placeholder-showcase {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
align-items: center;
justify-content: center;
color: #95a5a6;
}
.product-placeholder-showcase i {
font-size: 4rem;
}
/* Image Overlay Styles */
.product-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
padding: 2rem 1.5rem 1.5rem;
z-index: 3;
}
.product-overlay-content {
text-align: center;
}
.product-overlay-title {
font-size: 1.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 0.5rem;
letter-spacing: 1px;
line-height: 1.2;
text-transform: uppercase;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.product-overlay-description {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.4;
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Remove old content styles */
.product-showcase-content {
display: none;
}
/* Ensure equal height columns */
.row.g-4 {
display: flex;
flex-wrap: wrap;
}
.row.g-4>[class*="col-"] {
display: flex;
flex-direction: column;
}
/* Responsive Design */
@media (max-width: 992px) {
.product-showcase-card {
height: 320px;
}
.category-title {
font-size: 2.2rem;
}
.product-overlay-title {
font-size: 1.3rem;
}
}
@media (max-width: 768px) {
.category-title {
font-size: 2rem;
}
.product-showcase-card {
height: 300px;
margin-bottom: 2rem;
}
.product-image-overlay {
padding: 1.5rem 1rem 1rem;
}
.product-overlay-title {
font-size: 1.2rem;
}
.product-overlay-description {
font-size: 0.8rem;
}
.product-number {
width: 50px;
height: 50px;
font-size: 1.5rem;
top: 15px;
left: 15px;
}
}
@media (max-width: 576px) {
.product-showcase-card {
height: 280px;
}
.product-image-overlay {
padding: 1.2rem 0.8rem 0.8rem;
}
.product-overlay-title {
font-size: 1.1rem;
}
.product-overlay-description {
font-size: 0.75rem;
}
.product-number {
width: 45px;
height: 45px;
font-size: 1.3rem;
}
}
/* ===================================
SIMPLE VERTICAL SCROLLABLE PRODUCTS LAYOUT
=================================== */
/* Products Vertical Scroll Container - Simple Design */
.products-vertical-scroll-container {
position: relative;
max-height: 600px; /* Fixed height to enable scrolling */
overflow: hidden;
border-radius: 10px;
background: #fff;
padding: 20px;
border: 1px solid #e9ecef;
}
.products-vertical-scroll-wrapper {
max-height: 560px; /* Slightly less than container to account for padding */
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
padding-right: 10px;
scrollbar-width: thin;
scrollbar-color: var(--accent-color) #f1f1f1;
}
/* Simple scrollbar styling for vertical scroll */
.products-vertical-scroll-wrapper::-webkit-scrollbar {
width: 8px;
}
.products-vertical-scroll-wrapper::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.products-vertical-scroll-wrapper::-webkit-scrollbar-thumb {
background: var(--accent-color);
border-radius: 10px;
transition: background 0.3s ease;
}
.products-vertical-scroll-wrapper::-webkit-scrollbar-thumb:hover {
background: var(--hover-color);
}
/* Ensure proper spacing in vertical scroll layout */
.products-vertical-scroll-wrapper .row {
margin: 0;
}
.products-vertical-scroll-wrapper .col-lg-4,
.products-vertical-scroll-wrapper .col-md-6,
.products-vertical-scroll-wrapper .col-sm-12 {
padding: 0 15px;
margin-bottom: 30px;
}
/* Adjust card height for vertical scroll */
.products-vertical-scroll-wrapper .product-showcase-card {
height: 400px;
}
/* Responsive adjustments for vertical scroll layout */
@media (max-width: 992px) {
.products-vertical-scroll-container {
max-height: 550px;
padding: 15px;
}
.products-vertical-scroll-wrapper {
max-height: 520px;
}
.products-vertical-scroll-wrapper .product-showcase-card {
height: 350px;
}
}
@media (max-width: 768px) {
.products-vertical-scroll-container {
max-height: 500px;
padding: 10px;
}
.products-vertical-scroll-wrapper {
max-height: 480px;
}
.products-vertical-scroll-wrapper .product-showcase-card {
height: 320px;
}
.products-vertical-scroll-wrapper .col-lg-4,
.products-vertical-scroll-wrapper .col-md-6,
.products-vertical-scroll-wrapper .col-sm-12 {
margin-bottom: 20px;
}
}
@media (max-width: 576px) {
.products-vertical-scroll-container {
max-height: 450px;
padding: 8px;
}
.products-vertical-scroll-wrapper {
max-height: 434px;
}
.products-vertical-scroll-wrapper .product-showcase-card {
height: 280px;
}
.products-vertical-scroll-wrapper .col-lg-4,
.products-vertical-scroll-wrapper .col-md-6,
.products-vertical-scroll-wrapper .col-sm-12 {
padding: 0 8px;
margin-bottom: 15px;
}
}
/* ===================================
ADDITIONAL UNIFORM CARD ENHANCEMENTS
=================================== */
/* Ensure all cards in a row have equal height */
.category-section .row {
align-items: stretch;
}
.category-section .col-lg-4,
.category-section .col-md-6,
.category-section .col-sm-12 {
display: flex;
margin-bottom: 2rem;
}
/* Add subtle animation to numbers */
.product-number {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
50% {
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
100% {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
}
/* Improve text readability */
.product-showcase-title {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Add subtle border to cards */
.product-showcase-card {
border: 1px solid rgba(0, 0, 0, 0.05);
}
/* Add loading state for images */
.product-showcase-image {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
/* Ensure consistent spacing */
.category-section:last-child {
margin-bottom: 3rem;
}
/* ===================================
MISSION & VALUES SECTIONS STYLES
=================================== */
/* Mission Section Specific Styles */
.home-section-light .about-us-overlay-title {
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.home-section-white .about-us-overlay-title {
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
/* Ensure consistent spacing between sections */
.home-section {
padding: 1.5rem 0;
}
.home-section-gray {
background-color: #f8f9fa;
}
.home-section-light {
background-color: #ffffff;
}
.home-section-white {
background-color: #fafafa;
}
/* Section titles consistency */
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--section-title-color, #333);
margin-bottom: 1rem;
position: relative;
}
.section-subtitle {
/* font-size: 1.2rem;*/
color: #666;
margin-bottom: 2rem;
}
/* Responsive adjustments for new sections */
@media (max-width: 768px) {
.home-section {
padding: 3rem 0;
}
.section-title {
font-size: 2rem;
}
.section-subtitle {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.home-section {
padding: 2rem 0;
}
.section-title {
font-size: 1.8rem;
}
.section-subtitle {
font-size: 0.9rem;
}
}
/* ===================================
DYNAMIC ABOUT US SECTIONS STYLES
=================================== */
/* Border styling for Mission and Values subsections */
.border-top {
border-top: 2px solid #e9ecef !important;
}
/* Alternating section backgrounds */
.home-section-gray {
background-color: #f8f9fa;
}
.home-section-light {
background-color: #ffffff;
}
.home-section-white {
background-color: #fafafa;
}
/* Subsection titles styling */
.about-us-content h3.section-title,
.about-us-content h4.about-us-title {
color: #333;
font-weight: 700;
}
/* Ensure proper spacing for dynamic sections */
.home-section+.home-section {
margin-top: 0;
}
/* Mission and Values subsection styling */
.about-us-content h4.about-us-title {
position: relative;
margin-bottom: 1.5rem;
}
.about-us-content h4.about-us-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(135deg, #201B4D 0%, #2D2DAD 50%, #B3951E 100%);
border-radius: 2px;
}
/* Responsive adjustments for dynamic sections */
@media (max-width: 768px) {
.about-us-content h4.about-us-title {
font-size: 1.5rem !important;
text-align: center;
}
.about-us-content h4.about-us-title::after {
left: 50%;
transform: translateX(-50%);
}
.border-top {
margin-top: 3rem !important;
padding-top: 3rem !important;
}
}
@media (max-width: 576px) {
.about-us-content h4.about-us-title {
font-size: 1.3rem !important;
}
.border-top {
margin-top: 2rem !important;
padding-top: 2rem !important;
}
}
/* Ensure paragraphs and content use serif */
p,
span,
div,
li,
td,
th,
.section-description,
.section-subtitle {
font-family: serif !important;
}
/* ===================================
CONSISTENT FONT STYLING FOR ALL TITLES AND SUBTITLES
=================================== */
/* Apply consistent title font to all section titles */
.section-title,
.gradient-title-h2,
h1, h2, h3, h4, h5, h6,
.services-intro-title,
.universal-banner-title,
.certification-title,
.brand-partner-title,
.award-title,
.talktown-card-title,
.customer-name,
.video-testimonial-title,
.guarantee-title,
.category-title,
.product-overlay-title,
.room-title,
.factory-title,
.experience-title,
.portfolio-title,
.process-title,
.faq-title,
.testimonial-title,
.team-title,
.why-choose-us-question,
.home-faq-question,
.accordion-button {
font-family: var(--title-font) !important;
}
/* Apply consistent subtitle font to all section subtitles */
.section-subtitle,
.intro-text,
.services-intro-text,
.universal-banner-subtitle,
.certification-description,
.brand-partner-description,
.award-description,
.talktown-card-description,
.testimonial-text,
.video-testimonial-review,
.guarantee-description,
.product-description,
.factory-description,
.experience-description,
.portfolio-description,
.process-description,
.faq-answer,
.home-faq-answer,
.team-description,
.why-choose-us-answer,
.accordion-body {
font-family: var(--title-font) !important;
}
/* Ensure gradient titles also use the title font */
.gradient-title-h2 {
font-family: var(--title-font) !important;
font-weight: 700 !important;
}
/* Override any existing font families for consistency */
.home-section h1,
.home-section h2,
.home-section h3,
.home-section h4,
.home-section h5,
.home-section h6,
.home-section p,
.home-section span,
.home-section div {
font-family: var(--title-font) !important;
}
/* Specific overrides for important elements */
.navbar-brand,
.navbar-brand span {
font-family: var(--header-font) !important;
}
.btn,
.btn-primary,
.btn-luxury,
.custom-btn,
.consultation-btn {
font-family: var(--btn-font) !important;
}
.modern-footer,
.modern-footer h1,
.modern-footer h2,
.modern-footer h3,
.modern-footer h4,
.modern-footer h5,
.modern-footer h6,
.modern-footer p,
.modern-footer a,
.modern-footer span,
.modern-footer li,
.modern-footer div {
font-family: var(--footer-font) !important;
}
/* ===================================
SIMPLE ACCORDION STYLES (NO COLORS/GRADIENTS)
=================================== */
/* Simple Accordion - Clean and minimal design */
.simple-accordion {
max-width: 100%;
margin-left: 6px;
}
.simple-accordion-item {
margin-bottom: 0px;
border-radius: 1px;
background: white;
border-left: none !important;
border-right: none !important;
border-top: 1px solid var(--accent-color);
border-bottom: none;
}
.simple-accordion-item:first-child {
border-top: none;
}
.simple-accordion-item:last-child {
border-bottom: none;
}
.simple-accordion-header {
margin: 0;
border: none;
}
.simple-accordion-button {
background: white !important;
border: none !important;
padding: 12px;
font-weight: 200;
font-size: 22.4px;
color: #333 !important;
border-radius: 8px !important;
width: 100%;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: none !important;
transition: background-color 0.2s ease;
}
.simple-accordion-button:hover {
background: #f8f9fa !important;
color: #333 !important;
}
.simple-accordion-button:focus {
box-shadow: none !important;
border: none !important;
}
.simple-accordion-button:not(.collapsed) {
background: #f8f9fa !important;
color: #333 !important;
box-shadow: none !important;
}
.simple-accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A9A9A9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
transition: transform 0.2s ease;
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
background-repeat: no-repeat;
background-size: 1.25rem;
}
.simple-accordion-button:not(.collapsed)::after {
transform: rotate(180deg);
}
.simple-accordion-body {
padding: 10px 10px 10px calc(47px + 0.75rem);
background: white;
font-size: 1.2rem;
line-height: 1.6;
color: #666;
border: none;
}
/* FAQ specific - no number offset, align with title */
[id^="homeFaqCollapse"] .simple-accordion-body {
padding: 10px;
}
.simple-number {
font-weight: 600;
color: var(--hover-color, #C5A059);
margin-right: 0.75rem;
min-width: 35px;
}
.simple-question {
flex: 1;
}
/* Simple Button Styles */
.btn-simple {
background: var(--btn-gradient) !important;
border: none !important;
/* color: var(--btn-text-color) !important;
*/
padding: 0.75rem 2rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
letter-spacing: 0.5px;
font-family: var(--btn-font) !important;
outline: none !important;
}
.btn-simple:hover {
background: var(--btn-gradient-hover) !important;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
/* color: var(--btn-text-color) !important;
*/
text-decoration: none;
outline: none !important;
}
.btn-simple:focus,
.btn-simple:active {
background: var(--btn-gradient) !important;
color: var(--btn-text-color) !important;
outline: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
border: none !important;
}
/* Simple Placeholder */
.simple-placeholder {
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 2rem;
text-align: center;
color: #666;
}
.simple-placeholder i {
opacity: 0.6;
}
/* Remove gradient from section titles */
.section-title {
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: unset !important;
background-clip: unset !important;
color: var(--section-title-color, #333) !important;
}
/* Hidden items for show more/less functionality */
.simple-hidden {
display: none;
}
/* Responsive Design for Simple Accordion */
@media (max-width: 768px) {
.simple-accordion-button {
padding: 0.875rem 1rem;
font-size: 0.95rem;
}
.simple-accordion-body {
padding: 0.875rem 1rem;
font-size: 0.9rem;
}
.simple-number {
margin-right: 0.5rem;
min-width: 30px;
font-size: 0.9rem;
}
}
@media (max-width: 576px) {
.simple-accordion-button {
padding: 0.75rem;
font-size: 16px;
}
.simple-accordion-body {
padding: 0.75rem;
font-size: 16px;
}
.simple-number {
margin-right: 0.4rem;
min-width: 25px;
font-size: 0.85rem;
}
}
/* ===================================
OVERRIDE OLD ACCORDION STYLES - FORCE SIMPLE DESIGN
=================================== */
/* Override any existing accordion button styles with higher specificity */
.simple-accordion .simple-accordion-button,
.simple-accordion .simple-accordion-button:hover,
.simple-accordion .simple-accordion-button:focus,
.simple-accordion .simple-accordion-button:not(.collapsed),
.simple-accordion .simple-accordion-button:not(.collapsed):hover,
.simple-accordion .simple-accordion-button:not(.collapsed):focus {
background: white !important;
background-color: white !important;
background-image: none !important;
color: #333 !important;
border: none !important;
box-shadow: none !important;
}
.simple-accordion .simple-accordion-button:hover {
background: #f8f9fa !important;
background-color: #f8f9fa !important;
}
.simple-accordion .simple-accordion-button:not(.collapsed) {
background: #f8f9fa !important;
background-color: #f8f9fa !important;
}
/* Ensure the arrow icons are visible */
.simple-accordion .simple-accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A9A9A9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
transition: transform 0.2s ease !important;
flex-shrink: 0 !important;
width: 1.25rem !important;
height: 1.25rem !important;
margin-left: auto !important;
background-repeat: no-repeat !important;
background-size: 1.25rem !important;
content: "" !important;
display: block !important;
}
.simple-accordion .simple-accordion-button:not(.collapsed)::after {
transform: rotate(180deg) !important;
}
/* Force remove any gradients or complex backgrounds */
.simple-accordion-item .accordion-button,
.simple-accordion-item .accordion-button:hover,
.simple-accordion-item .accordion-button:focus,
.simple-accordion-item .accordion-button:not(.collapsed),
.simple-accordion-item .accordion-button:not(.collapsed):hover {
background: white !important;
background-color: white !important;
background-image: none !important;
color: #333 !important;
border: none !important;
box-shadow: none !important;
}
.simple-accordion-item .accordion-button:hover {
background: #f8f9fa !important;
background-color: #f8f9fa !important;
}
.simple-accordion-item .accordion-button:not(.collapsed) {
background: #f8f9fa !important;
background-color: #f8f9fa !important;
}
/* Ensure arrow icons are visible for all simple accordion buttons */
.simple-accordion-item .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A9A9A9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
transition: transform 0.2s ease !important;
flex-shrink: 0 !important;
width: 1.25rem !important;
height: 1.25rem !important;
margin-left: auto !important;
background-repeat: no-repeat !important;
background-size: 1.25rem !important;
content: "" !important;
display: block !important;
}
.simple-accordion-item .accordion-button:not(.collapsed)::after {
transform: rotate(180deg) !important;
}
/* Override Bootstrap accordion variables if they exist */
.simple-accordion {
--bs-accordion-btn-bg: white;
--bs-accordion-btn-color: #333;
--bs-accordion-active-bg: #f8f9fa;
--bs-accordion-active-color: #333;
}
/* ===================================
TESTIMONIALS CAROUSEL STYLES (Using TalkTown Design)
=================================== */
/* Reviews & Testimonials Section */
.testimonials-wrapper {
position: relative;
/* margin-top: 3rem;*/
padding: 0 15px;
}
.testimonials-carousel {
position: relative;
/* margin-top: 3rem;*/
padding: 0 15px;
}
.testimonials-grid {
padding: 0 15px;
}
/* Google Rating Summary */
.google-rating-summary {
margin-bottom: 3rem;
}
.rating-badge {
display: inline-flex;
align-items: center;
gap: 15px;
background: #fff;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 2px solid #B3951E;
}
.rating-text {
font-weight: 700;
color: #B3951E;
font-size: 1.1rem;
}
.rating-stars .star {
color: #FFD700;
font-size: 1.2rem;
margin-right: 2px;
}
.rating-count {
color: #666;
font-size: 0.9rem;
}
.google-logo {
height: 20px;
}
/* Testimonial Cards */
.testimonial-card {
background: #fff;
border-radius: 10px;
padding: 1.5rem;
height: 100%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
}
.testimonial-card:hover {
/* transform: translateY(-5px);*/
/* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
*/
box-shadow: 0 0 15px rgba(197, 160, 89, 0.6), 0 0 25px rgba(197, 160, 89, 0.4) !important;
}
.testimonial-layout {
display: flex;
flex-direction: column;
gap: 15px;
height: 100%;
text-align: left;
}
.testimonial-profile {
flex-shrink: 0;
align-self: center;
margin-bottom: 10px;
}
.profile-image {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.golden-border {
border: 3px solid var(--accent-color) !important;
border-radius: 5px;
}
.profile-image-placeholder {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #B3951E, #D4AF37);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 1.5rem;
}
.testimonial-main {
flex: 1;
display: flex;
flex-direction: column;
}
.testimonial-header {
margin-bottom: 10px;
text-align: center;
}
.customer-name {
font-size: 1.1rem;
font-weight: 600;
color: #333;
margin-bottom: 5px;
text-align: center;
}
.testimonial-rating {
text-align: center;
}
.testimonial-rating .star.filled {
color: #FFD700;
}
.testimonial-rating .star.empty {
color: #ddd;
}
.testimonial-content {
flex: 1;
text-align: center;
}
.testimonial-text {
font-size: 0.9rem;
color: #666;
line-height: 1.5;
margin-bottom: 10px;
text-align: center;
}
.testimonial-text p {
color: #666 !important;
margin: 0;
font-size: inherit;
line-height: inherit;
text-align: inherit;
}
.testimonial-date {
font-size: 0.8rem;
color: #999;
margin-bottom: 0;
text-align: center;
}
.testimonial-source {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.google-icon {
width: 30px;
height: auto;
}
/* Testimonials Carousel Controls (Same as TalkTown) */
.testimonials-carousel .carousel-control-prev,
.testimonials-carousel .carousel-control-next {
width: 50px;
height: 50px;
/* background: rgba(0, 0, 0, 0.5);*/
border-radius: 50%;
top: 50%;
/* transform: translateY(-50%);*/
}
.testimonials-carousel .carousel-control-prev {
left: -3px;
}
.testimonials-carousel .carousel-control-next {
right: -3px;
}
.testimonials-carousel .carousel-control-prev-icon,
.testimonials-carousel .carousel-control-next-icon {
background-size: 20px 20px;
width: 20px;
height: 20px;
}
.testimonials-carousel .carousel-control-prev:hover,
.testimonials-carousel .carousel-control-next:hover {
/* background: rgba(0, 0, 0, 0.7);*/
}
/* Testimonials Carousel Indicators (Same as TalkTown) */
.testimonial-indicators {
bottom: -50px;
margin-bottom: 0;
}
.testimonial-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: #ccc;
}
.testimonial-indicators button.active {
background-color: #B3951E;
}
/* ===================================
VIDEO TESTIMONIALS CAROUSEL STYLES
=================================== */
.video-testimonials-carousel {
position: relative;
/* margin-top: 2rem;*/
padding: 0 15px;
}
.video-testimonials-grid {
padding: 0 15px;
}
/* Video Testimonial Cards */
.video-testimonial-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
height: 100%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
}
.video-testimonial-card:hover {
/* transform: translateY(-5px);*/
/* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);*/
box-shadow: 0 0 15px rgba(197, 160, 89, 0.6), 0 0 25px rgba(197, 160, 89, 0.4) !important;
}
.video-container {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.video-iframe,
.video-player {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f8f9fa;
color: #6c757d;
}
.video-placeholder-icon {
font-size: 3rem;
margin-bottom: 10px;
color: #B3951E;
}
.video-testimonial-content {
padding: 1.5rem;
}
.video-testimonial-title {
font-size: 1.2rem;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}
.video-testimonial-rating {
margin-bottom: 15px;
}
.video-testimonial-rating .star {
font-size: 1.1rem;
margin-right: 2px;
}
.video-testimonial-review {
font-size: 0.9rem;
color: #666;
line-height: 1.5;
margin-bottom: 0;
}
/* Video Testimonials Carousel Controls (Same as TalkTown) */
.video-testimonials-carousel .carousel-control-prev,
.video-testimonials-carousel .carousel-control-next {
width: 50px;
height: 50px;
/* background: rgba(0, 0, 0, 0.5);*/
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.video-testimonials-carousel .carousel-control-prev {
left: -3px;
}
.video-testimonials-carousel .carousel-control-next {
right: -3px;
}
.video-testimonials-carousel .carousel-control-prev-icon,
.video-testimonials-carousel .carousel-control-next-icon {
background-size: 20px 20px;
width: 20px;
height: 20px;
}
.video-testimonials-carousel .carousel-control-prev:hover,
.video-testimonials-carousel .carousel-control-next:hover {
/* background: rgba(0, 0, 0, 0.7);*/
}
/* Video Testimonials Carousel Indicators (Same as TalkTown) */
.video-testimonial-indicators {
bottom: -50px;
margin-bottom: 0;
}
.video-testimonial-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: #ccc;
}
.video-testimonial-indicators button.active {
background-color: #B3951E;
}
/* ===================================
RESPONSIVE DESIGN FOR TESTIMONIALS
=================================== */
@media (max-width: 992px) {
.testimonial-layout {
flex-direction: column;
gap: 10px;
}
.testimonial-profile {
align-self: flex-start;
}
.video-container {
height: 180px;
}
}
@media (max-width: 768px) {
/* Testimonials Carousel Mobile - Using Global Styles from site.css */
.testimonial-indicators,
.video-testimonial-indicators {
bottom: -30px;
}
.testimonials-grid,
.video-testimonials-grid {
padding: 0 5px;
}
.rating-badge {
flex-direction: column;
gap: 10px;
text-align: center;
}
.video-container {
height: 160px;
}
.testimonial-card {
margin-bottom: 1.5rem;
}
}
@media (max-width: 576px) {
.testimonial-layout {
gap: 15px;
}
.profile-image,
.profile-image-placeholder {
width: 50px;
height: 50px;
}
.profile-initial {
font-size: 1.2rem;
}
.video-container {
height: 140px;
}
.video-testimonial-content {
padding: 1rem;
}
.video-testimonial-title {
font-size: 1rem;
}
.video-testimonial-review {
font-size: 0.85rem;
}
}
/* ===================================
OUR TEAM CAROUSEL STYLES (Using TalkTown Design)
=================================== */
/* Our Team Section */
.team-wrapper {
position: relative;
margin-top: 2rem;
padding: 0 15px;
}
.team-carousel {
position: relative;
margin-top: 2rem;
padding: 0 15px;
}
.team-grid {
padding: 0 15px;
}
/* Team Cards */
.team-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
height: 100%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
text-align: center;
}
.team-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.team-card-image {
position: relative;
height: 250px;
overflow: hidden;
background: #f8f9fa;
}
.team-card-image img {
width: 100%;
height: 100%;
object-fit: fill;
transition: transform 0.3s ease;
}
.team-card:hover .team-card-image img {
transform: scale(1.05);
}
/* Team Placeholder for missing images */
.team-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #B3951E, #D4AF37);
}
.team-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
border: 3px solid rgba(255, 255, 255, 0.3);
}
.team-initial {
font-size: 2rem;
font-weight: bold;
color: white;
}
.team-card-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 120px;
}
.team-card-title {
font-size: 1.2rem;
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.team-card-position {
font-size: 1rem;
color: #B3951E;
font-weight: 500;
margin-bottom: 0.5rem;
}
.team-card-subtitle {
font-size: 0.85rem;
color: #888;
margin-bottom: 0;
line-height: 1.4;
}
/* Team Carousel Controls - Using Global Styles from site.css */
.team-carousel .carousel-control-next:hover {
/* background: rgba(0, 0, 0, 0.7);*/
}
/* Team Carousel Indicators (Same as TalkTown) */
.team-indicators {
bottom: -50px;
margin-bottom: 0;
}
.team-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 5px;
background-color: #ccc;
}
.team-indicators button.active {
background-color: #B3951E;
}
/* ===================================
RESPONSIVE DESIGN FOR TEAM CAROUSEL
=================================== */
@media (max-width: 992px) {
.team-card-image {
height: 200px;
}
.team-card-content {
padding: 1.25rem;
min-height: 100px;
}
.team-avatar {
width: 60px;
height: 60px;
}
.team-initial {
font-size: 1.5rem;
}
}
@media (max-width: 768px) {
/* Team Carousel Mobile - Using Global Styles from site.css */
.team-indicators {
bottom: -30px;
}
.team-grid {
padding: 0 5px;
}
/* Mobile carousel - show one card at a time */
.team-carousel.d-md-none .team-grid .row .col-12 {
flex: 0 0 100%;
max-width: 100%;
display: block !important;
}
.team-card-image {
height: 180px;
}
.team-card-content {
padding: 1rem;
min-height: 90px;
}
.team-card-title {
font-size: 1.1rem;
}
.team-card-position {
font-size: 0.9rem;
}
.team-card-subtitle {
font-size: 0.8rem;
}
}
@media (max-width: 576px) {
.team-card-image {
height: 160px;
}
.team-avatar {
width: 50px;
height: 50px;
}
.team-initial {
font-size: 1.2rem;
}
.team-card-content {
padding: 0.75rem;
min-height: 80px;
}
}
/* ===================================
PORTFOLIO MOBILE CAROUSEL DEBUG FIX
=================================== */
@media (max-width: 768px) {
/* Force Portfolio mobile carousel to work */
.portfolio-wrapper .d-none.d-md-block {
display: none !important;
}
.portfolio-wrapper .d-md-none {
display: block !important;
}
/* Ensure Portfolio mobile shows one card per slide */
#portfolioMobileCarousel .carousel-item {
width: 100% !important;
}
#portfolioMobileCarousel .portfolio-grid .row {
display: flex !important;
justify-content: center !important;
flex-wrap: nowrap !important;
}
#portfolioMobileCarousel .portfolio-grid .col-12 {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
/* Hide any extra cards that might be showing */
#portfolioMobileCarousel .carousel-item:not(.active) {
display: none !important;
}
#portfolioMobileCarousel .carousel-item.active {
display: block !important;
}
}
/* ===================================
AWARDS & GUARANTEE MOBILE CAROUSEL FIX
=================================== */
@media (max-width: 768px) {
/* Awards Mobile Carousel - show one card at a time */
.awards-carousel.d-md-none .awards-grid .row .col-12 {
flex: 0 0 100%;
max-width: 100%;
}
/* Specific fix for Awards mobile carousel */
#awardsMobileCarousel .awards-grid .row .col-12 {
flex: 0 0 100% !important;
max-width: 100% !important;
display: block !important;
}
/* Ensure Awards mobile carousel shows only one card */
#awardsMobileCarousel .carousel-item {
width: 100% !important;
display: block !important;
}
#awardsMobileCarousel .award-card {
width: 100% !important;
margin: 0 auto !important;
display: block !important;
}
/* Guarantee Mobile Carousel - show one card at a time */
.guarantee-carousel.d-md-none .guarantee-grid .row .col-12 {
flex: 0 0 100%;
max-width: 100%;
}
/* Specific fix for Guarantee mobile carousel */
#guaranteeMobileCarousel .guarantee-grid .row .col-12 {
flex: 0 0 100% !important;
max-width: 100% !important;
display: block !important;
}
/* Ensure Guarantee mobile carousel shows only one card */
#guaranteeMobileCarousel .carousel-item {
width: 100% !important;
display: block !important;
}
#guaranteeMobileCarousel .guarantee-card {
width: 100% !important;
margin: 0 auto !important;
display: block !important;
}
/* Force Awards mobile carousel to work */
.awards-wrapper .d-none.d-md-block {
display: none !important;
}
.awards-wrapper .d-md-none {
display: block !important;
}
/* Force Guarantee mobile carousel to work */
.guarantee-wrapper .d-none.d-md-block {
display: none !important;
}
.guarantee-wrapper .d-md-none {
display: block !important;
}
/* Ensure Awards mobile shows one card per slide */
#awardsMobileCarousel .carousel-item {
width: 100% !important;
}
#awardsMobileCarousel .awards-grid .row {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
#awardsMobileCarousel .awards-grid .col-12 {
flex: 0 0 100% !important;
max-width: 100% !important;
text-align: center !important;
}
/* Hide any extra cards that might be showing in Awards */
#awardsMobileCarousel .carousel-item:not(.active) {
display: none !important;
}
#awardsMobileCarousel .carousel-item.active {
display: block !important;
}
/* Ensure Guarantee mobile shows one card per slide */
#guaranteeMobileCarousel .carousel-item {
width: 100% !important;
}
#guaranteeMobileCarousel .guarantee-grid .row {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
#guaranteeMobileCarousel .guarantee-grid .col-12 {
flex: 0 0 100% !important;
max-width: 100% !important;
text-align: center !important;
}
/* Hide any extra cards that might be showing in Guarantee */
#guaranteeMobileCarousel .carousel-item:not(.active) {
display: none !important;
}
#guaranteeMobileCarousel .carousel-item.active {
display: block !important;
}
}
/* Additional responsive breakpoints for better device coverage */
/* Large tablets and small laptops (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
/* Desktop carousels work fine at this size */
.awards-carousel.d-none.d-md-block,
.guarantee-carousel.d-none.d-md-block {
display: block !important;
}
.awards-carousel.d-md-none,
.guarantee-carousel.d-md-none {
display: none !important;
}
}
/* Small tablets (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
/* Use mobile carousel for better UX on small tablets */
.awards-wrapper .d-none.d-md-block,
.guarantee-wrapper .d-none.d-md-block {
display: none !important;
}
.awards-wrapper .d-md-none,
.guarantee-wrapper .d-md-none {
display: block !important;
}
/* Ensure single card display */
#awardsMobileCarousel .award-card,
#guaranteeMobileCarousel .guarantee-card {
max-width: 400px !important;
margin: 0 auto !important;
}
}
/* Extra small devices (below 576px) */
@media (max-width: 575px) {
/* Mobile carousel with smaller cards */
#awardsMobileCarousel .award-card {
padding: 1rem !important;
margin: 0 auto !important;
max-width: 100% !important;
}
#guaranteeMobileCarousel .guarantee-card {
padding: 1rem !important;
margin: 0 auto !important;
max-width: 100% !important;
}
/* Smaller carousel controls for touch devices */
#awardsMobileCarousel .carousel-control-prev,
#awardsMobileCarousel .carousel-control-next,
#guaranteeMobileCarousel .carousel-control-prev,
#guaranteeMobileCarousel .carousel-control-next {
width: 35px !important;
height: 35px !important;
}
/* Smaller carousel indicators */
#awardsMobileCarousel .carousel-indicators button,
#guaranteeMobileCarousel .carousel-indicators button {
width: 8px !important;
height: 8px !important;
margin: 0 3px !important;
}
}
/* Extra large devices (1400px and above) */
@media (min-width: 1400px) {
/* Desktop carousels with better spacing */
.awards-carousel .award-card,
.guarantee-carousel .guarantee-card {
margin-bottom: 2rem;
}
/* Larger carousel controls for desktop */
.awards-carousel .carousel-control-prev,
.awards-carousel .carousel-control-next,
.guarantee-carousel .carousel-control-prev,
.guarantee-carousel .carousel-control-next {
width: 50px;
height: 50px;
}
}
/* Factory and Experience Video Display Styles */
.factory-video-section,
.experience-video-section {
position: relative;
height: 500px;
}
.factory-video-wrapper,
.experience-video-wrapper {
height: 100%;
border-radius: 8px;
overflow: hidden;
border: 3px solid var(--accent-color);
}
.factory-video-placeholder,
.experience-video-placeholder {
height: 100%;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.factory-video-play-icon,
.experience-video-play-icon {
width: 120px;
height: 120px;
background: rgba(197, 160, 89, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(197, 160, 89, 0.3);
cursor: pointer;
}
.factory-video-play-icon i,
.experience-video-play-icon i {
font-size: 40px;
color: white;
margin-left: 8px;
}
.factory-video-play-icon:hover,
.experience-video-play-icon:hover {
transform: scale(1.1);
background: var(--accent-color);
box-shadow: 0 15px 40px rgba(197, 160, 89, 0.4);
}
.factory-video-player-container,
.experience-video-player-container {
display: none;
height: 100%;
}
.factory-video-wrapper:hover .factory-video-placeholder,
.experience-video-wrapper:hover .experience-video-placeholder {
background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
}
/* Responsive adjustments for video sections */
@media (max-width: 768px) {
.factory-video-section,
.experience-video-section {
height: 350px;
}
.factory-video-play-icon,
.experience-video-play-icon {
width: 80px;
height: 80px;
}
.factory-video-play-icon i,
.experience-video-play-icon i {
font-size: 28px;
}
}
@media (max-width: 576px) {
.factory-video-section,
.experience-video-section {
height: 280px;
}
.factory-video-play-icon,
.experience-video-play-icon {
width: 60px;
height: 60px;
}
.factory-video-play-icon i,
.experience-video-play-icon i {
font-size: 20px;
}
}
@media (max-width: 414px) {
.factory-video-section,
.experience-video-section {
height: 240px;
}
.factory-video-play-icon,
.experience-video-play-icon {
width: 50px;
height: 50px;
}
.factory-video-play-icon i,
.experience-video-play-icon i {
font-size: 18px;
}
}
@media (max-width: 375px) {
.factory-video-section,
.experience-video-section {
height: 220px;
}
}
@media (max-width: 320px) {
.factory-video-section,
.experience-video-section {
height: 200px;
}
}
/* ===================================
MOBILE SPECIFIC FIXES FOR EXPERIENCE SECTION
=================================== */
/* Samsung Galaxy S20 Ultra and similar devices (412px width) */
@media (max-width: 414px) {
/* .universal-banner {
height: 240px !important;
margin: 0 0px 1rem 0px;
border-radius: 8px !important;
overflow: hidden;
} */
.universal-banner:hover img {
transform: none !important; /* Disable hover effects */
box-shadow: 0 0 15px rgba(197, 160, 89, 0.6), 0 0 25px rgba(197, 160, 89, 0.4) !important;
}
/* Experience section specific mobile fixes */
.home-section.home-section-gray,
.home-section.home-section-white {
padding: 1.5rem 0;
}
.home-section .container {
padding-left: 15px;
padding-right: 15px;
}
/* Section titles mobile optimization */
.section-title.gradient-title-h2 {
font-size: 1.5rem !important;
margin-bottom: 0.5rem;
}
.section-subtitle {
font-size: 1rem !important;
margin-bottom: 1rem;
}
}
/* Extra small devices (phones, less than 376px) */
@media (max-width: 375px) {
}
/* Very small devices (phones, less than 321px) */
@media (max-width: 320px) {
.section-title.gradient-title-h2 {
font-size: 1.25rem !important;
}
}
/* ===================================
UNIVERSAL PORTFOLIO/CARD MOBILE RESPONSIVE SYSTEM
Use these classes for: Portfolio, Awards, Quality Certifications, Our Team, Brand Partners, etc.
=================================== */
/* ===================================
UNIVERSAL PORTFOLIO/CARD MOBILE RESPONSIVE SYSTEM
Use these classes for: Portfolio, Awards, Quality Certifications, Our Team, Brand Partners, etc.
=================================== */
/* Universal Mobile Responsive Classes - Apply to any section wrapper */
@media (max-width: 768px) {
/* Universal card styling for all portfolio-style sections */
.portfolio-card,
.quality-certifications-wrapper .portfolio-card,
.awards-wrapper .portfolio-card,
.portfolio-wrapper .portfolio-card,
.team-wrapper .portfolio-card,
.brand-partners-wrapper .portfolio-card,
.guarantees-wrapper .portfolio-card {
height: 200px !important;
margin-bottom: 1rem;
padding: 10px;
}
/* Universal image container styling */
.portfolio-image-container,
.quality-certifications-wrapper .portfolio-image-container,
.awards-wrapper .portfolio-image-container,
.portfolio-wrapper .portfolio-image-container,
.team-wrapper .portfolio-image-container,
.brand-partners-wrapper .portfolio-image-container,
.guarantees-wrapper .portfolio-image-container {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #f8f9fa;
}
/* Universal image styling */
.portfolio-image,
.quality-certifications-wrapper .portfolio-image,
.awards-wrapper .portfolio-image,
.portfolio-wrapper .portfolio-image,
.team-wrapper .portfolio-image,
.brand-partners-wrapper .portfolio-image,
.guarantees-wrapper .portfolio-image {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
max-width: 100%;
max-height: 100%;
}
/* Universal mobile carousel styling */
[id*="MobileCarousel"] .portfolio-card,
#qualityMobileCarousel .portfolio-card,
#awardsMobileCarousel .portfolio-card,
#portfolioMobileCarousel .portfolio-card,
#teamMobileCarousel .portfolio-card,
#brandMobileCarousel .portfolio-card,
#guaranteeMobileCarousel .portfolio-card {
height: 250px !important;
padding: 15px !important;
margin: 0 auto;
}
[id*="MobileCarousel"] .portfolio-image,
#qualityMobileCarousel .portfolio-image,
#awardsMobileCarousel .portfolio-image,
#portfolioMobileCarousel .portfolio-image,
#teamMobileCarousel .portfolio-image,
#brandMobileCarousel .portfolio-image,
#guaranteeMobileCarousel .portfolio-image {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
}
}
@media (max-width: 576px) {
/* Universal small mobile card styling */
.portfolio-card,
.quality-certifications-wrapper .portfolio-card,
.awards-wrapper .portfolio-card,
.portfolio-wrapper .portfolio-card,
.team-wrapper .portfolio-card,
.brand-partners-wrapper .portfolio-card,
.guarantees-wrapper .portfolio-card {
height: 180px !important;
padding: 8px;
}
/* Universal small mobile carousel styling */
[id*="MobileCarousel"] .portfolio-card,
#qualityMobileCarousel .portfolio-card,
#awardsMobileCarousel .portfolio-card,
#portfolioMobileCarousel .portfolio-card,
#teamMobileCarousel .portfolio-card,
#brandMobileCarousel .portfolio-card,
#guaranteeMobileCarousel .portfolio-card {
height: 220px !important;
padding: 12px !important;
}
}
/* Samsung Galaxy S20 Ultra and similar devices (412px width) */
@media (max-width: 414px) {
/* Universal very small mobile card styling */
.portfolio-card,
.quality-certifications-wrapper .portfolio-card,
.awards-wrapper .portfolio-card,
.portfolio-wrapper .portfolio-card,
.team-wrapper .portfolio-card,
.brand-partners-wrapper .portfolio-card,
.guarantees-wrapper .portfolio-card {
/* height: 160px !important; */
padding: 8px;
margin-bottom: 0.5rem;
}
/* Universal very small mobile image styling */
.portfolio-image,
.quality-certifications-wrapper .portfolio-image,
.awards-wrapper .portfolio-image,
.portfolio-wrapper .portfolio-image,
.team-wrapper .portfolio-image,
.brand-partners-wrapper .portfolio-image,
.guarantees-wrapper .portfolio-image {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
}
/* Universal very small mobile carousel styling */
[id*="MobileCarousel"] .portfolio-card,
#qualityMobileCarousel .portfolio-card,
#awardsMobileCarousel .portfolio-card,
#portfolioMobileCarousel .portfolio-card,
#teamMobileCarousel .portfolio-card,
#brandMobileCarousel .portfolio-card,
#guaranteeMobileCarousel .portfolio-card {
height: 200px !important;
padding: 10px !important;
margin: 0 10px;
}
[id*="MobileCarousel"] .portfolio-image,
#qualityMobileCarousel .portfolio-image,
#awardsMobileCarousel .portfolio-image,
#portfolioMobileCarousel .portfolio-image,
#teamMobileCarousel .portfolio-image,
#brandMobileCarousel .portfolio-image,
#guaranteeMobileCarousel .portfolio-image {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
}
/* Universal disable hover effects on mobile */
.portfolio-card:hover,
.quality-certifications-wrapper .portfolio-card:hover,
.awards-wrapper .portfolio-card:hover,
.portfolio-wrapper .portfolio-card:hover,
.team-wrapper .portfolio-card:hover,
.brand-partners-wrapper .portfolio-card:hover,
.guarantees-wrapper .portfolio-card:hover {
transform: none !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.portfolio-card:hover .portfolio-image,
.quality-certifications-wrapper .portfolio-card:hover .portfolio-image,
.awards-wrapper .portfolio-card:hover .portfolio-image,
.portfolio-wrapper .portfolio-card:hover .portfolio-image,
.team-wrapper .portfolio-card:hover .portfolio-image,
.brand-partners-wrapper .portfolio-card:hover .portfolio-image,
.guarantees-wrapper .portfolio-card:hover .portfolio-image {
transform: none !important;
}
}
/* Extra small devices (phones, less than 376px) */
@media (max-width: 375px) {
.portfolio-card,
.quality-certifications-wrapper .portfolio-card,
.awards-wrapper .portfolio-card,
.portfolio-wrapper .portfolio-card,
.team-wrapper .portfolio-card,
.brand-partners-wrapper .portfolio-card,
.guarantees-wrapper .portfolio-card {
height: 150px !important;
}
[id*="MobileCarousel"] .portfolio-card,
#qualityMobileCarousel .portfolio-card,
#awardsMobileCarousel .portfolio-card,
#portfolioMobileCarousel .portfolio-card,
#teamMobileCarousel .portfolio-card,
#brandMobileCarousel .portfolio-card,
#guaranteeMobileCarousel .portfolio-card {
height: 180px !important;
}
}
/* Very small devices (phones, less than 321px) */
@media (max-width: 320px) {
.portfolio-card,
.quality-certifications-wrapper .portfolio-card,
.awards-wrapper .portfolio-card,
.portfolio-wrapper .portfolio-card,
.team-wrapper .portfolio-card,
.brand-partners-wrapper .portfolio-card,
.guarantees-wrapper .portfolio-card {
height: 140px !important;
padding: 5px;
}
[id*="MobileCarousel"] .portfolio-card,
#qualityMobileCarousel .portfolio-card,
#awardsMobileCarousel .portfolio-card,
#portfolioMobileCarousel .portfolio-card,
#teamMobileCarousel .portfolio-card,
#brandMobileCarousel .portfolio-card,
#guaranteeMobileCarousel .portfolio-card {
height: 160px !important;
padding: 8px !important;
}
}
/* ===================================
UNIVERSAL CAROUSEL AND SECTION IMPROVEMENTS
=================================== */
/* Universal carousel improvements for all sections */
@media (max-width: 767px) {
.carousel-inner {
overflow: hidden;
}
.carousel-item {
/* padding: 0 10px;*/
}
.portfolio-grid .row {
margin: 0;
}
.portfolio-grid .col-12 {
padding: 0 5px;
}
}
/* Universal section improvements for very small screens */
@media (max-width: 414px) {
.home-section,
.home-section-gray,
.home-section-light,
.home-section-white {
padding: 1.5rem 0;
}
.home-section .container,
.home-section-gray .container,
.home-section-light .container,
.home-section-white .container {
padding-left: 10px;
padding-right: 10px;
}
.section-title.gradient-title-h2 {
font-size: 1.4rem !important;
margin-bottom: 0.5rem;
}
.section-subtitle {
font-size: 0.95rem !important;
margin-bottom: 1rem;
}
}
/* ===================================
HOW TO USE THIS UNIVERSAL SYSTEM:
1. For Quality Certifications: Add class "quality-certifications-wrapper" to your section
2. For Awards: Add class "awards-wrapper" to your section
3. For Portfolio: Add class "portfolio-wrapper" to your section
4. For Our Team: Add class "team-wrapper" to your section
5. For Brand Partners: Add class "brand-partners-wrapper" to your section
6. For Guarantees: Add class "guarantees-wrapper" to your section
Example HTML structure:
Mobile carousels should use IDs like:
- #qualityMobileCarousel
- #awardsMobileCarousel
- #portfolioMobileCarousel
- #teamMobileCarousel
- #brandMobileCarousel
- #guaranteeMobileCarousel
=================================== */
/* ===================================
GUARANTEE SECTION DESKTOP REDESIGN
=================================== */
/* Desktop-specific styling for guarantee section */
@media (min-width: 768px) {
.guarantees-wrapper {
position: relative;
padding: 2rem 0;
}
.guarantees-wrapper .portfolio-card {
height: 280px !important;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: 2px solid transparent;
position: relative;
overflow: hidden;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.guarantees-wrapper .portfolio-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.guarantees-wrapper .portfolio-card:hover::before {
opacity: 0.05;
}
.guarantees-wrapper .portfolio-card:hover {
/* transform: translateY(-8px) scale(1.02);*/
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
border-color: var(--accent-color);
}
.guarantees-wrapper .portfolio-image-container {
height: 120px !important;
width: 120px !important;
margin-bottom: 20px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
padding: 3px;
position: relative;
z-index: 2;
}
.guarantees-wrapper .portfolio-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 50%;
background: white;
padding: 15px;
box-sizing: border-box;
}
.guarantees-wrapper .guarantee-placeholder-icon {
width: 100%;
height: 100%;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--accent-color);
}
.guarantees-wrapper .guarantee-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 2;
}
.guarantees-wrapper .guarantee-description {
font-size: 1rem;
line-height: 1.6;
color: #2c3e50;
margin: 0;
font-weight: 500;
text-align: center;
}
.guarantees-wrapper .guarantee-description h3,
.guarantees-wrapper .guarantee-description h4 {
color: var(--primary-color);
font-size: 1.2rem;
margin-bottom: 10px;
font-weight: 700;
}
.guarantees-wrapper .guarantee-description p {
margin-bottom: 8px;
color: #6c757d;
font-size: 0.95rem;
}
/* Desktop carousel improvements */
.guarantees-wrapper .portfolio-carousel {
padding: 20px 0;
}
.guarantees-wrapper .carousel-control-prev,
.guarantees-wrapper .carousel-control-next {
width: 50px;
height: 50px;
background: var(--accent-color);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 0.8;
transition: all 0.3s ease;
}
.guarantees-wrapper .carousel-control-prev {
left: -25px;
}
.guarantees-wrapper .carousel-control-next {
right: -25px;
}
.guarantees-wrapper .carousel-control-prev:hover,
.guarantees-wrapper .carousel-control-next:hover {
opacity: 1;
background: var(--primary-color);
transform: translateY(-50%) scale(1.1);
}
.guarantees-wrapper .carousel-indicators {
bottom: -40px;
}
.guarantees-wrapper .carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent-color);
border: none;
margin: 0 5px;
opacity: 0.5;
transition: all 0.3s ease;
}
.guarantees-wrapper .carousel-indicators button.active {
opacity: 1;
background: var(--primary-color);
transform: scale(1.2);
}
}
/* Large desktop enhancements */
@media (min-width: 1200px) {
.guarantees-wrapper .portfolio-card {
height: 320px !important;
padding: 25px;
}
.guarantees-wrapper .portfolio-image-container {
height: 140px !important;
width: 140px !important;
margin-bottom: 25px;
}
.guarantees-wrapper .guarantee-description {
font-size: 1.1rem;
}
.guarantees-wrapper .guarantee-description h3,
.guarantees-wrapper .guarantee-description h4 {
font-size: 1.3rem;
}
}
/* Extra large desktop */
@media (min-width: 1400px) {
.guarantees-wrapper .portfolio-card {
height: 350px !important;
padding: 30px;
}
.guarantees-wrapper .portfolio-image-container {
height: 160px !important;
width: 160px !important;
margin-bottom: 30px;
}
.guarantees-wrapper .guarantee-placeholder-icon {
font-size: 3rem;
}
}
/* ===================================
GUARANTEE SECTION SPECIAL EFFECTS
=================================== */
/* Add decorative elements to guarantee section */
@media (min-width: 768px) {
.guarantees-wrapper::before {
content: '';
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--accent-color) 0%, var(--primary-color) 100%);
border-radius: 2px;
}
/* Guarantee section title enhancements */
.guarantees-wrapper + .container .section-title {
position: relative;
margin-bottom: 3rem;
}
/* Add floating animation to guarantee cards */
.guarantees-wrapper .portfolio-card {
animation: guaranteeFloat 6s ease-in-out infinite;
}
.guarantees-wrapper .portfolio-card:nth-child(2n) {
animation-delay: -3s;
}
@keyframes guaranteeFloat {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
}
.guarantees-wrapper .portfolio-card:hover {
animation-play-state: paused;
}
/* Add subtle glow effect */
.guarantees-wrapper .portfolio-image-container::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
border-radius: 50%;
z-index: -1;
opacity: 0;
/* transition: opacity 0.4s ease; */
}
.guarantees-wrapper .portfolio-card:hover .portfolio-image-container::after {
opacity: 0.3;
}
}
/* Guarantee section background pattern */
.guarantees-wrapper {
position: relative;
background:
radial-gradient(circle at 20% 80%, rgba(197, 160, 89, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(32, 27, 77, 0.03) 0%, transparent 50%);
}
/* Special styling for guarantee content typography */
@media (min-width: 768px) {
.guarantees-wrapper .guarantee-description strong {
color: var(--primary-color);
font-weight: 700;
}
.guarantees-wrapper .guarantee-description em {
color: var(--accent-color);
font-style: normal;
font-weight: 600;
}
/* Add icon styling for list items in guarantee descriptions */
.guarantees-wrapper .guarantee-description ul {
list-style: none;
padding-left: 0;
}
.guarantees-wrapper .guarantee-description li {
position: relative;
padding-left: 25px;
margin-bottom: 8px;
}
.guarantees-wrapper .guarantee-description li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: var(--accent-color);
font-weight: bold;
font-size: 1.1rem;
}
}
/* Additional Quality Certifications Fixes */
.quality-certifications-wrapper .portfolio-card {
border: 1px solid #e9ecef;
}
.quality-certifications-wrapper .portfolio-card .golden-border {
border: 3px solid var(--accent-color) !important;
border-radius: 5px;
margin: 15px;
max-width: calc(100% - 30px);
max-height: calc(100% - 30px);
}
.quality-certifications-wrapper .portfolio-card:hover .golden-border {
border-color: var(--hover-color) !important;
box-shadow: 0 0 15px rgba(197, 160, 89, 0.6), 0 0 25px rgba(197, 160, 89, 0.4) !important;
transform: none !important;
}
/* Ensure images stay within bounds */
.quality-certifications-wrapper .portfolio-image-container {
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.quality-certifications-wrapper .portfolio-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
padding: 0;
}
/* Video Testimonials Premium Styles */
.video-testimonial-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
height: 100%;
border: 1px solid #eee;
}
.video-testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.video-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
background: #000;
overflow: hidden;
}
.video-iframe, .video-player, .video-placeholder, .video-cover-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.video-cover-wrapper {
cursor: pointer;
z-index: 5;
transition: all 0.3s ease;
}
.video-cover-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.video-cover-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
pointer-events: none;
}
.play-icon-wrapper {
width: 70px;
height: 70px;
/* background: #C5A059;
*/
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(197, 160, 89, 0.4);
z-index: 6;
}
.play-icon-wrapper i {
margin-left: 5px;
}
.video-cover-wrapper:hover .video-cover-overlay {
background: rgba(0, 0, 0, 0.4);
}
.video-cover-wrapper:hover .play-icon-wrapper {
transform: scale(1.1);
/* background: #D4AF6A;*/
box-shadow: 0 0 30px rgba(197, 160, 89, 0.6);
}
.video-cover-wrapper:hover .video-cover-image {
transform: scale(1.05);
}
.video-testimonial-content {
padding: 1.5rem;
}
.video-testimonial-title {
font-size: 19.2px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 0.5rem;
}
.video-testimonial-rating {
margin-bottom: 0.75rem;
color: #ffc107;
}
.video-testimonial-review {
font-size: 19.2px;
color: #6c757d;
line-height: 1.5;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ===================================
FOOTER CONTACT ICONS - PNG IMAGES UNIFORM SIZE WITH DYNAMIC COLOR
=================================== */
/* Footer icon images - uniform size for all contact icons */
.modern-footer .footer-icon {
width: 20px !important;
height: 20px !important;
display: inline-block !important;
margin-right: 0.75rem !important;
vertical-align: middle !important;
object-fit: contain !important;
/* Apply accent color filter - converts black/dark images to accent color */
filter: brightness(0) saturate(100%) invert(58%) sepia(48%) saturate(456%) hue-rotate(8deg) brightness(92%) contrast(87%);
transition: filter 0.3s ease !important;
}
/* Hover effect for footer icons */
.modern-footer .contact-item:hover .footer-icon {
filter: brightness(0) saturate(100%) invert(58%) sepia(48%) saturate(456%) hue-rotate(8deg) brightness(102%) contrast(97%);
}
/* Contact item layout */
.modern-footer .contact-item {
display: flex !important;
align-items: center !important;
margin-bottom: 0.75rem !important;
}
.modern-footer .contact-details {
flex: 1 !important;
}
/* ===================================
PORTFOLIO FULL IMAGE MOBILE STYLES
=================================== */
/* Portfolio full image display for mobile */
.portfolio-full-image {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 8px;
margin: 0 15px;
}
.portfolio-full-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 8px;
}
.portfolio-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
padding: 20px;
border-radius: 0 0 8px 8px;
}
.portfolio-title {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin: 0;
text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.portfolio-placeholder-full {
width: 100%;
height: 400px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 8px;
margin: 0 15px;
color: #6c757d;
}
.portfolio-placeholder-full .portfolio-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.portfolio-placeholder-full p {
font-size: 1.2rem;
font-weight: 500;
margin: 0;
}
/* Responsive adjustments */
@media (max-width: 576px) {
.portfolio-full-image,
.portfolio-placeholder-full {
margin: 0 10px;
height: 350px;
}
.portfolio-title {
font-size: 1.3rem;
}
}
/* ===================================
SERVICES MOBILE CAROUSEL - OVERRIDE UNIVERSAL RULES
Services cards should use cover (full-bleed) not contain like portfolio cards
=================================== */
@media (max-width: 768px) {
#servicesMobileCarousel .portfolio-card {
height: 400px !important;
padding: 0 !important;
margin: 0 auto;
}
#servicesMobileCarousel .portfolio-image-container {
height: 100% !important;
background-color: transparent !important;
}
#servicesMobileCarousel .portfolio-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
}
@media (max-width: 576px) {
#servicesMobileCarousel .portfolio-card {
height: 350px !important;
padding: 0 !important;
}
#servicesMobileCarousel .portfolio-image-container {
height: 100% !important;
background-color: transparent !important;
}
#servicesMobileCarousel .portfolio-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
}
@media (max-width: 414px) {
#servicesMobileCarousel .portfolio-card {
height: 300px !important;
padding: 0 !important;
}
#servicesMobileCarousel .portfolio-image-container {
height: 100% !important;
background-color: transparent !important;
}
#servicesMobileCarousel .portfolio-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
}
/* ===================================
PORTFOLIO MOBILE CAROUSEL - OVERRIDE UNIVERSAL RULES
Match services card style: full-bleed cover image, no padding
=================================== */
@media (max-width: 768px) {
#portfolioMobileCarousel .portfolio-card {
height: 400px !important;
padding: 0 !important;
margin: 0 auto;
}
#portfolioMobileCarousel .portfolio-image-container {
height: 100% !important;
background-color: transparent !important;
}
#portfolioMobileCarousel .portfolio-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
}
@media (max-width: 576px) {
#portfolioMobileCarousel .portfolio-card {
height: 350px !important;
padding: 0 !important;
}
#portfolioMobileCarousel .portfolio-image-container {
height: 100% !important;
background-color: transparent !important;
}
#portfolioMobileCarousel .portfolio-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
}
@media (max-width: 414px) {
#portfolioMobileCarousel .portfolio-card {
height: 300px !important;
padding: 0 !important;
}
#portfolioMobileCarousel .portfolio-image-container {
height: 100% !important;
background-color: transparent !important;
}
#portfolioMobileCarousel .portfolio-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
}