/* Google Fonts loaded non-blocking from HTML */
/*
* =============================================================================
* LA REGINA — Main Stylesheet
* =============================================================================
* Clean structure: each section has START / END comments for easy navigation.
*
* TABLE OF CONTENTS (Ctrl+F / Cmd+F: "SECTION NAME START"):
* 1. Global & Variables 10. Projects
* 2. Base & RTL 11. Process
* 3. Header & Navigation 12. Testimonials
* 4. Buttons 13. CTA Banner
* 5. Hero 14. Footer
* 6. Section Headers 15. Modal
* 7. Categories 16. Scroll & Animations
* 8. About & Stats 17. Inner Pages
* 9. Materials 18. Contact
* =============================================================================
*/
/* ========== 1. GLOBAL & VARIABLES START ========== */
:root {
--primary-color: #67605A;
/* Brand dark warm taupe/brown from logo */
--primary-hover: #554e49;
--accent-teal: #3190a1;
/* Brand vibrant teal from logo */
--accent-teal-hover: #007684;
--brand-gold: #c5a880;
/* Elegant champagne gold */
--dark-bg: #111111;
/* Rich Dark Charcoal */
--dark-card: #1c1c1c;
--light-bg: #faf9f6;
/* Warm alabaster/off-white */
--text-dark: #222222;
--text-muted: #666666;
--text-light: #ffffff;
--ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
--transition-smooth: all 0.55s var(--ease-smooth);
--transition-hover: color 0.45s var(--ease-smooth), background-color 0.45s var(--ease-smooth), border-color 0.45s var(--ease-smooth), box-shadow 0.55s var(--ease-smooth), transform 0.55s var(--ease-smooth), opacity 0.45s var(--ease-smooth), filter 0.45s var(--ease-smooth), width 0.55s var(--ease-smooth);
--font-serif: 'Cormorant Garamond', serif;
--font-sans: 'Montserrat', sans-serif;
}
/* ========== 1. GLOBAL & VARIABLES END ========== */
/* ========== 2. BASE & RTL START ========== */
a,
button,
.btn,
.nav-link,
.category-card,
.material-card,
.project-card,
.category-btn,
.play-btn-circle,
.testimonial-dot,
.scroll-top-btn,
.footer-links-list a,
.footer-social a {
transition: var(--transition-hover);
}
body {
font-family: var(--font-sans);
color: var(--text-dark);
overflow-x: hidden;
scroll-behavior: smooth;
transition: var(--transition-smooth);
}
h1,
h2,
h3,
h4,
h5,
h6,
.font-serif {
font-family: var(--font-serif);
font-weight: 500;
letter-spacing: 0.5px;
color: var(--primary-color);
/* Use brand dark warm taupe by default */
}
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white .font-serif,
.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6,
.text-light .font-serif,
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3,
.cta-banner-content h1,
.cta-banner-content h2,
.cta-banner-content h3 {
color: #ffffff !important;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-smooth);
}
/* ========== 2. BASE & RTL END ========== */
/* ========== 4. SOCIAL ICONS START ========== */
.social-icon {
inset-inline-start: 0 !important;
margin-inline-start: 16px;
margin-bottom: 50px;
width: fit-content;
height: fit-content;
z-index: 1020 !important;
a {
background: var(--accent-teal) !important;
color: var(--text-light);
border: 2px solid var(--accent-teal);
padding: 0.8rem;
border-radius: 50px;
margin: 0.2rem;
text-decoration: none;
width: 50px;
height: 50px;
font-size: 20px;
transition: transform 0.45s var(--ease-smooth), background-color 0.45s var(--ease-smooth), filter 0.45s var(--ease-smooth);
&:hover {
background: var(--accent-teal-hover) !important;
color: var(--white);
transform: translateY(-5px) scale(1.05);
filter: brightness(1.1);
}
}
}
/* ========== 4. SOCIAL ICONS END ========== */
/* ========== 17. SCROLL TO TOP START ========== */
.scroll-top-btn {
position: fixed;
bottom: 80px;
inset-inline-end: 1.5rem;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--accent-teal);
border: 2px solid var(--accent-teal) !important;
color: var(--text-light);
border: none;
font-size: 1.5rem;
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity var(--transition), visibility var(--transition), transform var(--transition), background var(--transition);
z-index: 1020;
cursor: pointer;
&.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
&:hover {
background: var(--accent-teal-hover);
}
}
/* ========== 17. SCROLL TO TOP END ========== */
/* ========== 3. HEADER & NAVIGATION START ========== */
.fixed {
.header-inner {
background-color: transparent !important;
}
.navbar-custom {
background-color: #fff !important;
box-shadow: -8px 8px 24px rgba(0, 0, 0, 0.06);
.nav-link,
.header-search-icon,
.btn-lang-nav {
color: #333;
}
.navbar-toggler {
color: #333;
padding: 4px;
i {
font-size: 1.6rem;
color: #333;
}
}
}
}
.header {
position: relative;
z-index: 1050;
}
.navbar-custom {
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
padding: 0;
z-index: 1050;
transition: var(--transition-smooth);
&.navbar-scrolled {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
/* max-width: 1600px; */
margin: 0 auto;
padding: 14px 40px;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
}
.header-logo {
flex-shrink: 0;
img {
height: 80px;
width: auto;
display: block;
object-fit: contain;
transition: var(--transition-smooth);
/* filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); */
}
}
.navbar-custom.navbar-scrolled .header-logo img,
.fixed .header-logo img {
height: 80px;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}
.desktop-nav {
flex: 1;
justify-content: center;
flex-wrap: nowrap;
gap: 4px;
.nav-item {
position: relative;
}
.nav-link {
font-family: var(--font-sans);
font-size: 12px;
color: #fff;
font-weight: 600;
letter-spacing: 0.8px;
/* color: #2a2a2a !important; */
text-transform: uppercase;
padding: 8px 10px !important;
white-space: nowrap;
line-height: 1.2;
transition: color 0.45s var(--ease-smooth);
&:hover,
&.nav-link-active,
&.active {
color: var(--accent-teal) !important;
}
}
}
.header-tools {
flex-shrink: 0;
}
.header-search-icon {
width: 36px;
height: 36px;
padding: 0;
border: none;
background: transparent;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: color 0.45s var(--ease-smooth);
&:hover {
color: var(--accent-teal);
}
}
.btn-lang-nav {
width: fit-content;
min-width: 48px;
padding: 10px 16px !important;
}
.header-lang .dropdown-menu {
min-width: 120px;
border-radius: 0;
padding: 6px 0;
.dropdown-item {
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
transition: color 0.4s var(--ease-smooth), background-color 0.4s var(--ease-smooth);
&:hover {
background: rgba(0, 144, 161, 0.08);
color: var(--accent-teal);
}
}
}
.navbar-toggler {
color: #fff;
padding: 4px;
line-height: 1;
background: transparent;
border: 0;
i {
font-size: 1.75rem;
color: inherit;
display: block;
line-height: 1;
}
&:focus {
box-shadow: none;
outline: none;
}
}
.text-accent {
color: var(--accent-teal) !important;
}
.offcanvas {
.offcanvas-header .navbar-brand img {
height: 52px;
width: auto;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}
.offcanvas-body {
.nav-link {
color: #2a2a2a !important;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 0.7rem 0.15rem;
&:hover,
&.nav-link-active {
color: var(--accent-teal) !important;
}
}
}
.list-contact a {
color: var(--text-muted);
&:hover {
color: var(--accent-teal);
}
}
}
@media (max-width: 1399.98px) {
.header-inner {
padding: 12px 24px;
}
.desktop-nav .nav-link {
font-size: 11px;
padding: 8px 7px !important;
}
}
@media (max-width: 1199.98px) {
.header-logo img {
height: 52px;
}
}
/* ========== 3. HEADER & NAVIGATION END ========== */
/* ========== 4. BUTTONS START ========== */
.btn-gold-outline,
.btn-teal-solid,
.hero-btn {
position: relative;
width: fit-content;
min-width: 0;
height: 46px;
cursor: pointer;
display: inline-flex;
align-items: center;
overflow: hidden;
padding: 0 !important;
margin: 0;
border-radius: 0 !important;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
text-decoration: none;
line-height: 1;
box-shadow: none !important;
transition: var(--transition-hover);
.button__text,
.button__icon {
transition: color 0.45s var(--ease-smooth), background-color 0.45s var(--ease-smooth), width 0.55s var(--ease-smooth), transform 0.55s var(--ease-smooth);
}
.button__text {
display: inline-flex;
align-items: center;
height: 100%;
padding-inline: 22px 64px;
white-space: nowrap;
font-weight: 600;
line-height: 1;
}
.button__icon {
position: absolute;
inset-inline-end: 0;
top: 0;
height: 100%;
width: 42px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
i {
font-size: 12px;
color: #fff;
line-height: 1;
}
}
&:hover .button__text {
color: transparent;
}
&:hover .button__icon {
width: 100%;
}
}
/* Solid teal — all main CTAs */
.btn-teal-solid,
.btn-gold-outline,
.hero-btn {
border: 1px solid var(--accent-teal-hover);
background-color: var(--accent-teal);
color: #fff;
.button__text {
color: #fff;
}
.button__icon {
background-color: var(--accent-teal-hover);
}
&:hover {
background: var(--accent-teal-hover);
border-color: var(--accent-teal-hover);
color: #fff;
}
&:active {
border-color: var(--accent-teal-hover);
.button__icon {
background-color: var(--accent-teal-hover);
}
}
}
/* Header consultation button — compact, original style */
.btn-consult-nav {
background-color: var(--accent-teal);
color: #ffffff !important;
border: 1px solid var(--accent-teal);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
padding: 12px 20px !important;
text-transform: uppercase;
border-radius: 3px;
text-decoration: none;
white-space: nowrap;
line-height: 1.2;
height: auto;
min-width: 0;
width: auto;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: visible;
box-shadow: none !important;
transition: color 0.35s var(--ease-smooth), background-color 0.35s var(--ease-smooth), border-color 0.35s var(--ease-smooth);
&:hover {
background-color: var(--accent-teal-hover);
border-color: var(--accent-teal-hover);
color: #ffffff !important;
}
}
.btn-consult-nav.w-100 {
width: 100%;
}
.btn-teal-solid.w-100,
.btn-gold-outline.w-100 {
width: 100%;
.button__text {
width: 100%;
justify-content: center;
padding-inline: 22px 52px;
}
}
[dir="rtl"] .btn-gold-outline,
[dir="rtl"] .btn-teal-solid,
[dir="rtl"] .hero-btn {
.button__icon i {
transform: scaleX(-1);
}
}
/* ========== 4. BUTTONS END ========== */
/* ========== 5. HERO START ========== */
@keyframes heroZoomIn {
from {
transform: scale(1);
}
to {
transform: scale(1.14);
}
}
@keyframes heroZoomOut {
from {
transform: scale(1.14);
}
to {
transform: scale(1);
}
}
.hero-slider-section {
position: relative;
height: 100vh;
overflow: hidden;
background: #111;
.heroSwiper,
.swiper,
.swiper-slide {
height: 100%;
width: 100%;
}
.swiper-wrapper {
height: 100%;
}
.swiper-slide {
overflow: hidden;
}
}
.hero-slide {
height: 100%;
position: relative;
overflow: hidden;
.container {
position: relative;
z-index: 2;
}
}
.hero-slide-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transform: scale(1);
transform-origin: center center;
will-change: transform;
transition: none;
&.is-zoom-in {
animation: heroZoomIn 5.5s ease-out forwards;
}
&.is-zoom-out {
animation: heroZoomOut 5.5s ease-out forwards;
}
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to right,
rgba(0, 0, 0, 0.62) 0%,
rgba(0, 0, 0, 0.28) 42%,
rgba(0, 0, 0, 0.18) 70%,
rgba(0, 0, 0, 0.35) 100%);
}
.hero-content {
position: relative;
z-index: 10;
color: #fff;
}
.hero-subtitle {
display: block;
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 4.5px;
color: #ffffff;
text-transform: uppercase;
margin-bottom: 18px;
font-weight: 500;
}
.hero-title {
font-family: var(--font-serif);
font-size: clamp(48px, 6.5vw, 78px);
line-height: 1.05;
margin-bottom: 22px;
font-weight: 400;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-desc {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 300;
line-height: 1.75;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 32px;
max-width: 480px;
}
.hero-pagination {
position: absolute;
bottom: 50px;
right: 70px;
z-index: 20;
display: flex;
align-items: center;
gap: 14px;
color: rgba(255, 255, 255, 0.92);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
letter-spacing: 2px;
pointer-events: none;
.hero-pag-current,
.hero-pag-total {
color: var(--accent-teal);
min-width: 1.5em;
}
.hero-pag-sep {
display: block;
width: 56px;
height: 1px;
background: var(--accent-teal);
}
}
[dir="rtl"] .hero-pagination {
right: auto;
left: 70px;
}
.hero-wave-divider {
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
z-index: 15;
pointer-events: none;
line-height: 0;
.hero-wave-svg {
display: block;
width: 100%;
height: 100px;
}
}
/* ========== 5. HERO END ========== */
/* ========== 6. SECTION HEADERS (CROWN) START ========== */
.section-header-crown {
text-align: center;
margin-bottom: 60px;
position: relative;
padding-bottom: 25px;
i.crown-icon {
color: var(--primary-color);
font-size: 18px;
margin-bottom: 8px;
display: inline-block;
}
&.section-header-crown--no-icon {
padding-top: 10px;
i.crown-icon {
display: none;
}
}
h2 {
font-size: 32px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400;
color: var(--primary-color);
margin-bottom: 15px;
}
&::after {
content: '♦';
display: block;
color: var(--primary-color);
font-size: 12px;
position: absolute;
bottom: -6px;
left: 0;
right: 0;
margin: 0 auto;
width: 20px;
height: 12px;
line-height: 12px;
background-color: transparent;
z-index: 5;
}
&::before {
content: '';
position: absolute;
bottom: 0;
left: calc(50% - 60px);
width: 120px;
height: 1px;
background: linear-gradient(to right, transparent, rgba(197, 168, 128, 0.5) 20%, var(--primary-color) 50%, rgba(197, 168, 128, 0.5) 80%, transparent);
z-index: 1;
}
}
/* ========== 6. SECTION HEADERS (CROWN) END ========== */
/* ========== CARD BACKGROUND IMAGE (shared) ========== */
.card-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* ========== 7. CATEGORIES START ========== */
.category-card {
height: 520px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 40px 30px;
color: var(--text-light);
border-right: 1px solid rgba(255, 255, 255, 0.1);
transition: var(--transition-smooth);
will-change: transform;
&:last-child {
border-right: none;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.1) 100%);
transition: background 0.6s var(--ease-smooth);
z-index: 1;
}
&:hover {
transform: scale(1.015);
z-index: 5;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
&::before {
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.3) 100%);
}
.category-btn {
background-color: var(--accent-teal);
border-color: var(--accent-teal);
transform: rotate(-45deg);
}
}
}
.category-content {
position: relative;
z-index: 10;
}
.category-title {
font-size: 24px;
margin-bottom: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
}
.category-desc {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 25px;
line-height: 1.5;
height: 40px;
opacity: 0.9;
}
.category-btn {
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
transition: background-color 0.5s var(--ease-smooth), border-color 0.5s var(--ease-smooth), transform 0.55s var(--ease-smooth), color 0.45s var(--ease-smooth);
background: transparent;
}
[dir="rtl"] .category-card:hover .category-btn {
transform: rotate(45deg);
}
/* ========== 7. CATEGORIES END ========== */
/* ========== 8. ABOUT & STATS START ========== */
.about-section {
background-color: var(--light-bg);
}
.about-subtitle {
font-size: 12px;
letter-spacing: 3px;
color: var(--primary-color);
text-transform: uppercase;
font-weight: 600;
margin-bottom: 15px;
}
.about-title {
font-size: 38px;
line-height: 1.2;
margin-bottom: 25px;
font-weight: 400;
text-transform: uppercase;
}
.about-desc {
font-size: 15px;
line-height: 1.8;
color: var(--text-muted);
margin-bottom: 30px;
}
/* Homepage "Our Story" layout (matches design reference) */
.about-section--story {
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(247, 247, 245, 0.5);
}
.about-content {
position: relative;
z-index: 2;
}
.about-subtitle {
display: inline-flex;
align-items: center;
gap: 14px;
letter-spacing: 2.5px;
color: var(--text-dark);
margin-bottom: 18px;
}
.about-subtitle-line {
display: inline-block;
width: 42px;
height: 2px;
background: var(--accent-teal);
flex-shrink: 0;
}
.about-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 3.2vw, 3.15rem);
line-height: 1.15;
margin-bottom: 22px;
font-weight: 500;
text-transform: none;
color: var(--text-dark);
letter-spacing: -0.02em;
em {
display: block;
font-style: italic;
font-weight: 400;
margin-top: 0.08em;
}
}
.about-desc {
font-size: 15px;
line-height: 1.85;
color: #6b6b6b;
margin-bottom: 28px;
max-width: 38ch;
}
.about-cta {
border-radius: 999px !important;
.button__text {
padding-inline: 26px 58px;
}
}
}
.about-visual {
position: relative;
width: 100%;
margin-inline-start: auto;
aspect-ratio: 1/1;
height: 350px;
}
.about-visual__accent {
position: absolute;
inset-inline-start: -8%;
bottom: -8%;
width: 180px;
aspect-ratio: 1;
background: var(--accent-teal);
z-index: 1;
}
.about-visual__main {
position: absolute;
inset: 0 14% 0 0;
width: 86%;
height: 100%;
object-fit: cover;
box-shadow: 0 18px 48px rgba(17, 17, 17, 0.14);
z-index: 2;
transition: transform 0.55s var(--ease-smooth);
}
.about-visual__detail {
position: absolute;
inset-inline-end: 0;
top: 12%;
width: clamp(140px, 32%, 230px);
height: 72%;
object-fit: cover;
border: 5px solid #ffffff;
box-shadow: 0 16px 40px rgba(17, 17, 17, 0.18);
z-index: 3;
transition: transform 0.55s var(--ease-smooth);
}
.about-visual:hover {
.about-visual__main {
transform: scale(1.015);
}
.about-visual__detail {
transform: translateY(-6px);
}
}
.about-img-wrapper {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
&:hover {
.about-img-clip {
transform: scale(1.02);
}
}
}
.about-stats-section {
/* padding: 80px 0; */
background: linear-gradient(135deg, #1a4a4f 0%, #3190a1 100%);
.section-header-crown h2,
.crown-icon {
color: #ffffff;
}
.stat-icon {
color: rgba(255, 255, 255, 0.85);
}
.stat-number {
color: #ffffff;
}
.stat-label {
color: rgba(255, 255, 255, 0.75);
}
}
.home-stats-section {
/* padding: 56px 0; */
}
.stats-row {
width: 100%;
}
.stat-item {
text-align: center;
padding: 0 8px;
}
.stat-divider {
display: none;
}
.stat-icon {
font-size: 30px;
color: var(--primary-color);
margin-bottom: 12px;
}
.stat-number {
font-family: var(--font-serif) !important;
font-weight: 300;
font-size: 50px;
color: var(--text-dark);
margin-bottom: 8px;
}
.stat-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-muted);
line-height: 1.4;
}
/* ========== 8. ABOUT & STATS END ========== */
/* ========== 9. MATERIALS START ========== */
.materials-section {
background-color: #f5f3ef;
}
.material-card {
position: relative;
height: 300px;
background-size: cover;
background-position: center;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: var(--transition-smooth);
border: none;
text-align: left;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.1) 100%);
transition: var(--transition-smooth);
z-index: 1;
}
&:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
&::before {
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.2) 100%);
}
.material-desc {
color: var(--text-light) !important;
}
}
}
[dir="rtl"] .material-card {
text-align: right;
}
.material-card-content {
position: relative;
z-index: 5;
color: var(--text-light);
}
.material-title {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
color: var(--text-light) !important;
position: relative;
display: inline-block;
&::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 25px;
height: 1px;
background-color: rgba(255, 255, 255, 0.6);
}
}
[dir="rtl"] .material-title::after {
left: auto;
right: 0;
}
.material-desc {
font-size: 11px;
color: rgba(255, 255, 255, 0.85) !important;
line-height: 1.4;
margin: 0;
transition: var(--transition-smooth);
}
/* ========== 9. MATERIALS END ========== */
/* ========== 10. PROJECTS START ========== */
.projects-section {
background-color: var(--light-bg);
}
.project-card {
height: 320px;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
color: var(--text-light);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: var(--transition-smooth);
text-decoration: none;
cursor: pointer;
&.project-large {
height: 100% !important;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
transition: var(--transition-smooth);
z-index: 1;
}
&:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
&::before {
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.2) 100%);
}
}
}
.project-content {
position: relative;
z-index: 5;
}
.project-title {
font-size: 20px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
color: white;
}
.project-location {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
font-weight: 300;
}
.project-category-badge {
display: inline-block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
background: rgba(0, 144, 161, 0.85);
color: #fff;
padding: 4px 10px;
border-radius: 3px;
margin-bottom: 8px;
}
.projects-grid-section .project-card {
height: 300px;
}
/* ========== 10. PROJECTS END ========== */
/* ========== 11. PROCESS START ========== */
.process-section {
padding: 100px 0;
background-color: #f5f3ef;
}
.process-timeline-wrapper {
position: relative;
width: 100%;
margin: 50px 0;
padding: 20px 0;
}
.process-timeline-line {
position: absolute;
top: 55px;
/* Alignment with circle centers */
left: 40px;
right: 40px;
height: 1px;
background-color: rgba(197, 168, 128, 0.4);
z-index: 1;
}
.timeline-dot {
position: absolute;
top: -3px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--primary-color);
transform: translateX(-50%);
z-index: 2;
}
.process-steps-row {
position: relative;
z-index: 5;
width: 100%;
}
.process-step-item {
text-align: center;
position: relative;
height: 100%;
&:hover .process-step-circle {
transform: scale(1.1);
background-color: var(--accent-teal);
box-shadow: 0 0 0 3px var(--primary-color);
}
}
.process-step-circle {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #55443d;
/* Rich brown matching wood accent */
border: 3px solid #ffffff;
box-shadow: 0 0 0 1px var(--primary-color);
/* Elegant outer gold ring */
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
position: relative;
z-index: 10;
color: #ffffff;
font-size: 20px;
transition: var(--transition-smooth);
}
.process-step-content {
margin-top: 15px;
}
.step-num {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 2px;
}
.step-title {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-dark);
margin-bottom: 8px;
font-family: var(--font-sans) !important;
}
.step-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
padding: 0 12px;
margin: 0;
}
.process-video-card {
height: 100%;
min-height: 380px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.1) 100%);
z-index: 1;
}
}
[dir="rtl"] .process-video-card::before {
background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.1) 100%);
}
.process-video-content {
position: relative;
z-index: 5;
width: 100%;
height: 100%;
}
.play-btn-circle {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: var(--text-light);
color: var(--text-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin: 0 auto 20px;
cursor: pointer;
transition: var(--transition-smooth);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
&:hover {
background-color: var(--accent-teal);
color: var(--text-light);
transform: scale(1.1);
}
}
/* ========== 11. PROCESS END ========== */
/* ========== 12. TESTIMONIALS START ========== */
.testimonial-section {
position: relative;
z-index: 1;
.row {
background-color: var(--light-bg) !important;
}
}
.testimonial-quote-icon {
font-size: 38px;
color: var(--accent-teal);
/* Accent teal from screenshot */
line-height: 1;
margin-bottom: 25px;
text-align: left;
}
[dir="rtl"] .testimonial-quote-icon {
text-align: right;
i {
transform: scaleX(-1);
}
}
.testimonial-text {
font-family: var(--font-serif);
font-size: 24px;
line-height: 1.6;
color: var(--text-dark);
font-weight: 300;
margin-bottom: 25px;
text-align: left;
}
.testimonial-author {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
color: var(--text-muted);
text-transform: uppercase;
text-align: left;
display: block;
}
.testimonial-dots-container {
display: flex;
gap: 8px;
position: static;
margin-top: 28px;
width: auto;
}
[dir="rtl"] .testimonial-dots-container {
justify-content: flex-end;
}
.testimonialSwiper {
width: 100%;
overflow: hidden;
}
.testimonial-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.4);
cursor: pointer;
transition: var(--transition-smooth);
padding: 0;
display: block;
opacity: 1;
margin: 0 !important;
&.active {
background-color: var(--accent-teal);
border-color: var(--accent-teal);
transform: scale(1.1);
}
}
.testimonial-side-img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.02);
}
[dir="rtl"] .testimonial-side-img {
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.02);
}
/* ========== 12. TESTIMONIALS END ========== */
/* ========== 13. CTA BANNER START ========== */
.cta-section {
background-color: var(--light-bg);
/* padding: 60px 0; */
}
.cta-banner-card {
position: relative;
width: 100%;
height: 240px;
background-size: cover;
background-position: center;
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
padding: 40px 60px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
z-index: 1;
}
}
[dir="rtl"] .cta-banner-card::before {
background: linear-gradient(to left, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
}
.cta-banner-content {
position: relative;
z-index: 5;
color: var(--text-light);
text-align: left;
}
[dir="rtl"] .cta-banner-content {
text-align: right;
}
.cta-title {
font-family: var(--font-serif);
font-size: 28px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
font-weight: 400;
}
.cta-subtitle {
font-size: 13px;
font-weight: 300;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 25px;
}
/* ========== 13. CTA BANNER END ========== */
/* ========== 14. FOOTER START ========== */
.footer-section {
background-color: #f5f3ef;
border-top: 1px solid rgba(197, 168, 128, 0.2);
color: var(--text-dark);
font-size: 13px;
overflow: hidden;
h5 {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-dark);
margin-bottom: 22px;
position: relative;
padding-bottom: 0;
font-family: var(--font-sans) !important;
}
p {
font-size: 13px;
line-height: 1.65;
color: var(--text-muted);
}
}
.footer-main-row {
padding-bottom: 48px;
}
@media (min-width: 1200px) {
.footer-main-row {
display: grid;
grid-template-columns: 1.15fr 1.25fr 0.9fr 1.05fr 1.15fr;
gap: 1.5rem 1.75rem;
}
.footer-main-row>[class*="col-"] {
width: 100%;
max-width: none;
flex: none;
padding-right: 0;
padding-left: 0;
}
}
.footer-about-logo {
max-height: 90px;
margin-bottom: 18px;
}
.footer-bio {
max-width: 280px;
margin-bottom: 16px;
}
.footer-brand-line {
display: block;
width: 42px;
height: 2px;
background-color: var(--accent-teal);
margin-bottom: 18px;
}
.footer-socials {
display: flex;
gap: 10px;
.social-icon {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.18);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dark);
font-size: 13px;
transition: var(--transition-smooth);
&:hover {
background-color: var(--accent-teal);
border-color: var(--accent-teal);
color: #ffffff;
transform: translateY(-2px);
}
}
}
.footer-collections-grid {
min-width: 0;
}
.footer-links-list {
list-style: none;
padding: 0;
margin: 0;
li {
margin-bottom: 12px;
i {
margin-right: 5px;
}
}
a {
position: relative;
display: inline-block;
color: var(--text-muted);
font-size: 13px;
text-decoration: none;
/* padding-left: 14px; */
transition: var(--transition-smooth);
&:hover {
color: var(--accent-teal);
&::before {
color: var(--accent-teal);
}
}
&.active {
color: var(--accent-teal);
font-weight: 600;
}
}
}
[dir="rtl"] .footer-links-list a {
padding-left: 0;
padding-right: 14px;
&::before {
left: auto;
right: 0;
}
}
.footer-contact-block {
max-width: 220px;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 0;
font-size: 13px;
color: var(--text-muted);
strong {
display: block;
color: var(--text-dark);
font-weight: 700;
font-size: 13px;
margin-bottom: 2px;
}
a {
color: var(--text-muted);
text-decoration: none;
transition: var(--transition-smooth);
&:hover {
color: var(--accent-teal);
}
}
&+.footer-contact-item {
margin-top: 12px;
}
}
.footer-contact-icon {
color: var(--accent-teal);
font-size: 14px;
margin-top: 3px;
width: 14px;
text-align: center;
flex-shrink: 0;
}
.footer-contact-divider {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin: 14px 0;
opacity: 1;
}
.footer-showroom-card {
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
transition: var(--transition-smooth);
&:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
.footer-showroom-img {
transform: scale(1.04);
}
}
}
.footer-showroom-img {
width: 100%;
height: 118px;
object-fit: cover;
display: block;
transition: var(--transition-smooth);
}
.footer-showroom-body {
padding: 14px 14px 16px;
p {
font-size: 12px;
line-height: 1.55;
color: var(--text-muted);
margin-bottom: 14px;
}
}
.footer-showroom-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: 13px;
font-weight: 700;
color: var(--text-dark);
i {
color: var(--accent-teal);
font-size: 13px;
}
}
.footer-directions-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 9px 14px;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 2px;
color: var(--text-dark);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
transition: var(--transition-smooth);
i {
font-size: 10px;
color: var(--text-muted);
transition: var(--transition-smooth);
}
&:hover {
border-color: var(--accent-teal);
color: var(--accent-teal);
i {
color: var(--accent-teal);
transform: translateX(3px);
}
}
}
[dir="rtl"] .footer-directions-btn:hover i {
transform: translateX(-3px);
}
.footer-bottom {
position: relative;
background-color: #262220;
border-top: 2px solid var(--accent-teal);
margin-top: 0;
padding: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.72);
overflow: hidden;
}
.footer-bottom-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
min-height: 100px;
padding: 14px 0;
}
.footer-copy {
color: rgba(255, 255, 255, 0.78);
white-space: nowrap;
justify-self: start;
}
.footer-legal {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
a {
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
transition: var(--transition-smooth);
&:hover {
color: #ffffff;
}
}
}
.footer-legal-sep {
display: inline-block;
width: 1px;
height: 12px;
background-color: rgba(255, 255, 255, 0.35);
}
.footer-leaf {
position: absolute;
right: 12px;
bottom: -6px;
width: 150px;
height: 86px;
color: rgba(197, 168, 128, 0.45);
pointer-events: none;
z-index: 0;
svg {
width: 100%;
height: 100%;
display: block;
}
}
[dir="rtl"] .footer-leaf {
right: auto;
left: 12px;
transform: scaleX(-1);
}
[dir="rtl"] .footer-copy {
justify-self: end;
}
@media (max-width: 991.98px) {
.footer-collections-grid {
gap: 8px 20px;
}
.footer-bottom-inner {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.footer-copy {
white-space: normal;
justify-self: center;
}
.footer-leaf {
opacity: 0.35;
}
}
@media (max-width: 575.98px) {
.footer-collections-grid {
grid-template-columns: 1fr;
}
.footer-showroom-img {
height: 150px;
}
}
/* ========== 14. FOOTER END ========== */
/* ========== 15. MODAL START ========== */
.modal-content-custom {
background-color: var(--light-bg);
border: 1px solid var(--primary-color);
border-radius: 0;
padding: 20px;
}
.modal-header-custom {
border-bottom: 1px solid rgba(197, 168, 128, 0.15);
padding-bottom: 15px;
}
.modal-title-custom {
font-family: var(--font-serif);
color: var(--text-dark);
font-size: 28px;
text-transform: uppercase;
}
.form-control-custom {
border-radius: 0;
border: 1px solid #dddddd;
padding: 12px 15px;
font-size: 14px;
transition: var(--transition-smooth);
background-color: #ffffff;
&:focus {
border-color: var(--primary-color);
box-shadow: none;
}
}
.form-label-custom {
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-dark);
margin-bottom: 8px;
}
/* ========== 15. MODAL END ========== */
/* ========== 17. INNER PAGES START ========== */
.inner-hero-section {
position: relative;
height: 50vh;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-light);
/* Offset for sticky navbar */
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(18, 18, 18, 0.7) 0%, rgba(18, 18, 18, 0.4) 100%);
z-index: 1;
}
.breadcrumb {
}
.breadcrumb-item,
.breadcrumb-item a {
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
transition: var(--transition-smooth);
}
.breadcrumb-item {
a:hover {
color: var(--accent-teal);
}
&.active {
color: var(--text-light) !important;
font-weight: 600;
}
+.breadcrumb-item::before {
color: rgba(255, 255, 255, 0.4);
content: "|";
padding: 0 10px;
}
}
}
.inner-hero-container {
position: relative;
z-index: 5;
}
.inner-hero-title {
font-family: var(--font-serif);
font-size: 46px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top:100px;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
color: white;
}
.inner-feature-card {
background-color: #ffffff;
border-radius: 8px;
padding: 40px 30px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
transition: var(--transition-smooth);
border: 1px solid rgba(0, 0, 0, 0.02);
height: 100%;
&:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
border-color: rgba(0, 144, 161, 0.15);
.inner-feature-icon {
background-color: var(--accent-teal);
color: #ffffff;
}
}
}
.inner-feature-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(0, 144, 161, 0.08);
color: var(--accent-teal);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin: 0 auto 25px;
transition: var(--transition-smooth);
}
.inner-feature-title {
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
color: var(--text-dark);
}
.inner-feature-desc {
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.inner-intro-img-wrapper {
position: relative;
padding: 15px;
}
.inner-intro-img-outline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid var(--brand-gold);
border-radius: 8px;
transform: rotate(2deg);
z-index: 1;
}
.inner-intro-img-outline-reverse {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid var(--brand-gold);
border-radius: 8px;
transform: rotate(-2deg);
z-index: 1;
}
.inner-intro-img {
position: relative;
z-index: 5;
width: 100%;
height: 480px;
object-fit: cover;
border-radius: 6px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.inner-gallery-card {
position: relative;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 4/3;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
&:hover {
.inner-gallery-img {
transform: scale(1.06);
}
.inner-gallery-overlay {
opacity: 1;
i {
transform: scale(1);
}
}
}
}
.inner-gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-smooth);
}
.inner-gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition-smooth);
i {
font-size: 28px;
color: #ffffff;
transform: scale(0.8);
transition: var(--transition-smooth);
}
}
.inner-related-section {
background-color: #faf9f6;
padding: 70px 0 50px;
.category-card {
min-height: 280px;
}
}
/* ========== 17. INNER PAGES END ========== */
/* ========== 18. CONTACT START ========== */
.contact-page-section {
padding: 80px 0 40px;
background-color: var(--light-bg);
}
.contact-details-list {
list-style: none;
padding: 0;
margin: 36px 0 0;
li {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
&:last-child {
border-bottom: 0;
}
}
a,
p {
margin: 0;
font-size: 15px;
color: var(--text-dark);
text-decoration: none;
line-height: 1.5;
}
a:hover {
color: var(--accent-teal);
}
}
.contact-details-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: rgba(49, 144, 161, 0.1);
color: var(--accent-teal);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.contact-details-label {
display: block;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
font-weight: 600;
}
.contact-form-card {
background: #ffffff;
border-radius: 8px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.03);
}
.contact-form-heading {
font-family: var(--font-serif);
font-size: 26px;
color: var(--primary-color);
margin: 0 0 28px;
}
.contact-map-section {
padding: 20px 0 90px;
background-color: var(--light-bg);
}
.contact-map-card {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
background: #fff;
h5 {
background: var(--accent-teal);
color: #fff;
padding: 14px 20px;
margin: 0;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
}
}
.contact-map-frame {
position: relative;
width: 100%;
height: 340px;
min-height: 340px;
background: #e8eef0;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
}
.ratio>iframe,
#tourModal iframe {
border: 0 !important;
width: 100%;
height: 100%;
display: block;
}
#tourModal {
.modal-body,
.ratio {
background: #111;
}
}
#storyModal {
.modal-dialog {
max-width: 560px;
}
.modal-body {
padding: 0 12px 16px;
}
iframe {
width: 100% !important;
max-width: 100%;
height: min(70vh, 520px);
border: 0 !important;
border-radius: 4px;
display: block;
margin: 0 auto;
overflow: hidden;
background: #000;
}
}
.contact-info-card {
background: #ffffff;
border-radius: 8px;
padding: 35px 30px;
height: 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.03);
transition: var(--transition-smooth);
&:hover {
transform: translateY(-4px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.07);
}
h4 {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
p,
a {
font-size: 14px;
color: var(--text-muted);
line-height: 1.7;
margin: 0;
text-decoration: none;
}
a:hover {
color: var(--accent-teal);
}
}
.contact-info-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background-color: rgba(0, 144, 161, 0.08);
color: var(--accent-teal);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 20px;
}
/* ========== 18. CONTACT END ========== */
/* ========== 19. PRODUCTS GRID START ========== */
.products-section {
background-color: var(--light-bg);
}
.product-card {
position: relative;
display: block;
height: 340px;
overflow: hidden;
color: var(--text-light);
text-decoration: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
transition: var(--transition-smooth);
&::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.2) 55%, transparent 100%);
z-index: 1;
transition: var(--transition-smooth);
}
&:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
&::before {
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.15) 100%);
}
.product-card-img {
transform: scale(1.06);
}
}
& img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease-smooth);
z-index: 0;
}
.project-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 24px 22px;
}
}
/* ========== 19. PRODUCTS GRID END ========== */
/* ========== 20. PROJECT DETAILS START ========== */
.project-detail-section,
.product-detail-section {
padding: 70px 0 40px;
background-color: var(--light-bg);
}
.project-album {
.projectAlbumMain {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
margin-bottom: 14px;
.swiper-slide a {
display: block;
position: relative;
overflow: hidden;
cursor: zoom-in;
}
img {
width: 100%;
height: 520px;
object-fit: cover;
display: block;
transition: transform 0.7s var(--ease-smooth);
}
.swiper-slide-active a:hover img {
transform: scale(1.03);
}
}
.project-album-hint {
position: absolute;
inset-inline-end: 18px;
bottom: 18px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(17, 17, 17, 0.72);
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
pointer-events: none;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth);
}
.projectAlbumMain .swiper-slide-active a:hover .project-album-hint {
opacity: 1;
transform: translateY(0);
}
.project-album-nav {
position: absolute;
top: 50%;
z-index: 5;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
cursor: pointer;
transition: background-color 0.35s var(--ease-smooth), color 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth);
&:hover {
background: var(--accent-teal);
color: #fff;
}
&.project-album-prev {
inset-inline-start: 16px;
}
&.project-album-next {
inset-inline-end: 16px;
}
}
.projectAlbumThumbs {
.swiper-slide {
height: 88px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
opacity: 0.55;
border: 2px solid transparent;
transition: opacity 0.35s var(--ease-smooth), border-color 0.35s var(--ease-smooth);
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
&:hover {
opacity: 0.85;
}
&-thumb-active {
opacity: 1;
border-color: var(--accent-teal);
}
}
}
}
[dir="rtl"] .project-album-nav i {
transform: scaleX(-1);
}
.project-detail-title,
.product-detail-title {
margin-bottom: 12px;
}
.project-detail-short,
.product-detail-short {
font-size: 15px;
color: var(--text-dark);
font-weight: 500;
}
.project-detail-features-title,
.product-detail-features-title {
font-family: var(--font-serif);
font-size: 22px;
margin: 28px 0 16px;
color: var(--primary-color);
}
.project-detail-features,
.product-detail-features {
list-style: none;
padding: 0;
margin: 0 0 10px;
li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
i {
color: var(--accent-teal);
margin-top: 3px;
flex-shrink: 0;
}
}
}
.project-info-list {
list-style: none;
padding: 0;
margin: 0;
li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
&:last-child {
border-bottom: 0;
padding-bottom: 0;
}
span {
color: var(--text-muted);
font-size: 13px;
}
strong {
color: var(--text-dark);
font-size: 13px;
font-weight: 600;
}
}
}
.project-sidebar,
.product-sidebar {
position: sticky;
top: 110px;
display: flex;
flex-direction: column;
gap: 20px;
}
.project-sidebar-block,
.product-sidebar-block {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 8px;
padding: 24px 22px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
}
.project-sidebar-title,
.product-sidebar-title {
font-family: var(--font-serif);
font-size: 20px;
margin: 0 0 16px;
color: var(--primary-color);
letter-spacing: 0.5px;
}
.project-sidebar-related,
.product-sidebar-related {
display: flex;
flex-direction: column;
>a {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
color: inherit;
text-decoration: none;
&:first-child {
padding-top: 4px;
}
&:last-child {
border-bottom: 0;
padding-bottom: 0;
}
&:hover {
strong {
color: var(--accent-teal);
}
img {
transform: scale(1.04);
}
}
img {
width: 72px !important;
height: 72px !important;
max-width: 72px !important;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
border: 1px solid rgba(0, 0, 0, 0.06);
transition: transform 0.45s var(--ease-smooth);
}
>span {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
flex: 1;
}
>span>span {
font-size: 10px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--accent-teal);
font-weight: 600;
line-height: 1;
}
strong {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 600;
color: var(--primary-color);
line-height: 1.25;
letter-spacing: 0.3px;
transition: color 0.35s var(--ease-smooth);
}
em {
font-family: var(--font-sans);
font-style: normal;
font-size: 12px;
font-weight: 400;
color: var(--text-muted);
line-height: 1.3;
}
}
}
.project-sidebar-cta,
.product-sidebar-cta {
background: linear-gradient(135deg, #1a4a4f 0%, #3190a1 100%);
border-radius: 8px;
padding: 28px 22px;
color: #fff;
h3 {
font-family: var(--font-serif);
font-size: 22px;
color: #fff !important;
margin: 0 0 10px;
}
p {
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
margin: 0 0 18px;
line-height: 1.6;
}
}
/* ========== 20. PROJECT DETAILS END ========== */