/* =========================================================
DELHI WOOD - MAIN CSS (CLEANED HEADER)
Poppins use ho raha hai.
Layout me ye add karo:
========================================================= */
/* =========================================================
GLOBAL
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: "Poppins", sans-serif;
color: #111111;
background: #ffffff;
}
a {
text-decoration: none;
color: inherit;
}
button,
input,
select,
textarea {
font-family: "Poppins", sans-serif;
}
.container {
width: 100%;
max-width: 1420px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
/* =========================================================
HEADER
========================================================= */
.site-header {
position: relative;
width: 100%;
z-index: 9999;
background: #ffffff;
color: #111111;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* =========================================================
TOP BAR
========================================================= */
.top-bar {
height: 41px;
background: #07254a;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.top-bar-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
color: #13110f;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 400;
}
.top-left,
.top-right {
display: flex;
align-items: center;
gap: 28px;
}
.top-item {
display: flex;
align-items: center;
gap: 7px;
color: #ffffff;
white-space: nowrap;
}
.top-icon {
color: #ffffff;
font-size: 15px;
}
.rating {
display: flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.stars {
color: #ffffff;
font-size: 15px;
letter-spacing: 0.8px;
}
.rating strong {
color: #ffffff;
font-size: 15px;
}
.rating span:last-child {
color: #ffffff;
}
/* =========================================================
MAIN HEADER
========================================================= */
.main-header {
height: 82px;
/* background: linear-gradient(
90deg,
rgb(228 228 229),
rgba(255, 255, 255, 0.96)
); */
border-bottom: 1px solid #eee9e1;
box-shadow: 0 3px 14px rgba(31, 24, 18, 0.035);
}
.nav-container {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
/* =========================================================
LOGO
Fixed safe box so dynamic logo does not stretch
========================================================= */
.brand-logo {
flex: 0 0 auto;
width: 255px;
height: 62px;
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
border-radius: 4px;
background: #ffffff;
}
.header-logo-box {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
}
.header-dynamic-logo {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 4px 0 !important;
object-fit: contain !important;
object-position: left center !important;
transform: none !important;
}
/* =========================================================
FALLBACK TEXT LOGO
========================================================= */
.logo-mark {
flex: 0 0 42px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
border: 1px solid #a77935;
border-radius: 5px;
color: #d4a451;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 600;
}
.logo-content {
display: flex;
flex-direction: column;
line-height: 1;
}
.logo-title {
color: #13110f;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.2px;
}
.logo-subtitle {
margin-top: 5px;
color: #8e8982;
font-size: 8px;
letter-spacing: 1.4px;
}
.logo-year {
margin-top: 3px;
color: #8e8982;
font-size: 8px;
letter-spacing: 2px;
}
/* =========================================================
DESKTOP NAVIGATION
========================================================= */
.main-navigation {
height: 82px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 31px;
margin-left: auto;
}
.nav-link {
position: relative;
display: inline-flex;
align-items: center;
color: #000000;
font-size: 17px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
transition: color 0.25s ease;
font-family: 'Poppins', serif;
}
.nav-link:hover {
color: #07254a !important;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -8px;
width: 0;
height: 1px;
margin: auto;
background: #d5a653;
transition: width 0.25s ease;
}
.nav-link:hover::after {
width: 100%;
}
/* =========================================================
HEADER DROPDOWN
========================================================= */
:root {
--dd-bg: #ffffff;
--dd-text: #4b5563;
--dd-line: #e7e7e7;
--dd-hover-bg: #3a2410;
--dd-hover-text: #ffffff;
--dd-chev: #9aa0a6;
--dd-accent: #d5a653;
}
.hd-dd {
position: relative;
height: 82px;
display: flex;
align-items: center;
}
.hd-dd-trigger-row {
display: flex;
align-items: center;
}
.hd-dd-trigger {
display: inline-flex;
align-items: center;
gap: 7px;
}
.hd-dd-arrow {
transition: transform 0.25s ease;
}
.hd-dd:hover .hd-dd-arrow,
.hd-dd:focus-within .hd-dd-arrow {
transform: rotate(180deg);
}
.hd-dd:hover .hd-dd-trigger,
.hd-dd:focus-within .hd-dd-trigger {
color: var(--dd-accent);
}
.hd-dd-toggle {
display: none;
}
.hd-dd-menu {
position: absolute;
top: calc(100% - 1px);
left: -18px;
width: 300px;
max-height: 72vh;
overflow-y: auto;
background: var(--dd-bg);
border: 1px solid #eee9e2;
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity 0.22s ease,
transform 0.22s ease,
visibility 0.22s ease;
z-index: 99999;
}
.hd-dd:hover .hd-dd-menu,
.hd-dd:focus-within .hd-dd-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.hd-dd-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 48px;
padding: 12px 17px;
color: var(--dd-text);
font-size: 15px;
font-weight: 400;
line-height: 1.35;
border-bottom: 1px solid var(--dd-line);
transition:
background 0.2s ease,
color 0.2s ease;
}
.hd-dd-link:last-child {
border-bottom: 0;
}
.hd-dd-chev {
flex-shrink: 0;
color: var(--dd-chev);
transition:
transform 0.2s ease,
color 0.2s ease;
}
.hd-dd-link:hover {
background: #07254a;
color: var(--dd-hover-text);
}
.hd-dd-link:hover .hd-dd-chev {
color: var(--dd-hover-text);
transform: translateX(3px);
}
.hd-dd-viewall {
color: #9a6938;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.hd-dd-empty {
padding: 17px;
color: #777777;
font-size: 12px;
}
/* =========================================================
GET QUOTE BUTTON
========================================================= */
.quote-btn {
flex: 0 0 auto;
min-width: 108px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 28px;
background: #07254a;
color: white;
font-size: 9px;
letter-spacing: 1.3px;
line-height: 1.35;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.quote-btn strong {
font-size: 10px;
letter-spacing: 1.5px;
}
.quote-btn:hover {
background: #07254a;
color: white;
transform: translateY(-2px);
}
/* =========================================================
GET A QUOTE BUTTON FIX
========================================================= */
button.quote-btn {
font-family: "Poppins", sans-serif;
cursor: pointer;
}
/* =========================================================
QUOTE POPUP
========================================================= */
.dw-quote-popup {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
/* ACTIVE */
.dw-quote-popup.active {
opacity: 1;
visibility: visible;
}
/* =========================================================
OVERLAY
========================================================= */
.dw-quote-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: rgba(9, 7, 5, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* =========================================================
MODAL
========================================================= */
.dw-quote-modal {
position: relative;
z-index: 2;
width: 100%;
max-width: 520px;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 42px 42px 38px;
background: #f7f4ee;
border: 1px solid rgba(116, 76, 42, 0.15);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.32);
transform:
translateY(25px)
scale(0.97);
transition:
transform 0.35s ease;
scrollbar-width: thin;
}
/* OPEN ANIMATION */
.dw-quote-popup.active .dw-quote-modal {
transform:
translateY(0)
scale(1);
}
/* GOLD TOP LINE */
.dw-quote-modal::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #d4a451;
}
/* =========================================================
CLOSE BUTTON
========================================================= */
.dw-quote-close {
position: absolute;
top: 16px;
right: 18px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #d8d0c6;
border-radius: 50%;
background: transparent;
color: #33251c;
font-size: 25px;
font-weight: 300;
line-height: 1;
cursor: pointer;
transition: all 0.25s ease;
}
.dw-quote-close:hover {
background: #33251c;
border-color: #33251c;
color: #fff;
transform: rotate(90deg);
}
/* =========================================================
POPUP HEADER
========================================================= */
.dw-quote-header {
margin-bottom: 28px;
}
.dw-quote-label {
display: block;
margin-bottom: 12px;
color: #a26e2d;
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
}
.dw-quote-header h2 {
margin: 0;
max-width: 390px;
color: #292018;
font-family: "Poppins", sans-serif;
font-size: 38px;
font-weight: 400;
line-height: 1.05;
letter-spacing: -1.2px;
}
.dw-quote-header h2 em {
color: #aa7437;
font-style: italic;
font-weight: 400;
}
.dw-quote-header p {
margin: 14px 0 0;
max-width: 430px;
color: #746b63;
font-size: 13px;
line-height: 1.7;
}
/* =========================================================
FORM
========================================================= */
.dw-quote-form {
width: 100%;
}
.dw-form-group {
width: 100%;
margin-bottom: 17px;
}
.dw-form-group label {
display: block;
margin-bottom: 7px;
color: #41352c;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
}
.dw-form-group label span {
color: #aa7437;
}
.dw-form-group input,
.dw-form-group textarea {
width: 100%;
padding: 13px 15px;
border: 1px solid #d9d1c6;
border-radius: 0;
outline: none;
background: #fff;
color: #2c241e;
font-family: "Poppins", sans-serif;
font-size: 13px;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
.dw-form-group input {
height: 48px;
}
.dw-form-group textarea {
min-height: 105px;
resize: vertical;
line-height: 1.5;
}
.dw-form-group input::placeholder,
.dw-form-group textarea::placeholder {
color: #aaa198;
}
/* FOCUS */
.dw-form-group input:focus,
.dw-form-group textarea:focus {
border-color: #b57d3b;
box-shadow:
0 0 0 3px rgba(181, 125, 59, 0.08);
background: #fff;
}
/* =========================================================
SUBMIT BUTTON
========================================================= */
.dw-quote-submit {
width: 100%;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 7px;
padding: 0 20px;
border: 0;
background: #2a211a;
color: #fff;
cursor: pointer;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.dw-quote-submit span {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.dw-quote-submit strong {
color: #d9ab63;
font-size: 20px;
font-weight: 400;
transition: transform 0.25s ease;
}
.dw-quote-submit:hover {
background: #a86f31;
}
.dw-quote-submit:hover strong {
color: #fff;
transform: translateX(5px);
}
.dw-quote-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* =========================================================
FORM RESPONSE
========================================================= */
.dw-quote-response {
display: none;
margin-bottom: 14px;
padding: 11px 13px;
font-size: 12px;
line-height: 1.5;
}
.dw-quote-response.success {
display: block;
background: #edf7ed;
border: 1px solid #c4e3c4;
color: #27662c;
}
.dw-quote-response.error {
display: block;
background: #fff0ef;
border: 1px solid #efcac7;
color: #a6312b;
}
/* =========================================================
BODY LOCK
========================================================= */
body.dw-quote-open {
overflow: hidden;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.dw-quote-popup {
align-items: center;
padding: 14px;
}
.dw-quote-modal {
max-width: 100%;
max-height: calc(100vh - 28px);
padding:
37px
22px
25px;
}
.dw-quote-header {
margin-bottom: 22px;
}
.dw-quote-header h2 {
font-size: 31px;
letter-spacing: -0.8px;
}
.dw-quote-header p {
font-size: 12px;
}
.dw-quote-close {
top: 12px;
right: 12px;
width: 34px;
height: 34px;
font-size: 22px;
}
.dw-form-group {
margin-bottom: 14px;
}
.dw-form-group input {
height: 46px;
}
.dw-form-group textarea {
min-height: 90px;
}
}
/* =========================================================
MOBILE MENU BUTTON
========================================================= */
.mobile-menu-btn {
display: none;
width: 44px;
height: 42px;
padding: 9px;
border: 1px solid rgba(167, 121, 53, 0.35);
border-radius: 5px;
background: #ffffff;
cursor: pointer;
position: relative;
z-index: 100003;
}
.mobile-menu-btn span {
display: block;
width: 100%;
height: 2px;
margin: 5px 0;
background: #1b1712;
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
.mobile-menu-btn.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* =========================================================
MOBILE DRAWER BASE
========================================================= */
.mobile-nav-overlay {
display: none;
}
.mobile-nav-head {
display: none;
}
.mobile-nav-close {
display: none;
}
/* =========================================================
RESPONSIVE - MEDIUM DESKTOP
========================================================= */
@media (max-width: 1250px) {
.container {
max-width: 1180px;
}
.brand-logo {
width: 225px;
}
.main-navigation {
gap: 20px;
}
.nav-link {
font-size: 12px;
}
.quote-btn {
min-width: 96px;
}
.hd-dd-menu {
width: 270px;
}
}
/* =========================================================
TABLET + MOBILE
========================================================= */
@media (max-width: 991px) {
body.mobile-nav-open {
overflow: hidden;
}
.top-bar {
display: none;
}
.main-header {
height: 74px;
}
.nav-container {
gap: 15px;
}
/* logo */
.brand-logo {
width: 215px;
height: 54px;
}
.header-dynamic-logo {
padding: 4px 0 !important;
}
/* hamburger */
.mobile-menu-btn {
display: block;
margin-left: auto;
}
/* overlay */
.mobile-nav-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(8, 6, 4, 0.52);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
z-index: 100000;
}
.mobile-nav-overlay.active {
opacity: 1;
visibility: visible;
}
/* right side drawer */
.main-navigation {
position: fixed;
top: 0;
right: 0;
width: min(390px, 88vw);
height: 100vh;
margin: 0;
padding: 0 22px 30px;
display: flex;
align-items: stretch;
justify-content: flex-start;
flex-direction: column;
gap: 0;
overflow-y: auto;
background: #ffffff;
box-shadow: -15px 0 40px rgba(0, 0, 0, 0.17);
transform: translateX(105%);
transition: transform 0.32s ease;
z-index: 100002;
}
.main-navigation.active {
transform: translateX(0);
}
/* drawer head */
.mobile-nav-head {
min-height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -22px 9px;
padding: 0 22px;
border-bottom: 1px solid #ebe6de;
background: #faf8f4;
}
.mobile-nav-title {
color: #8c6734;
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
}
.mobile-nav-close {
width: 39px;
height: 39px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e1d9ce;
border-radius: 50%;
background: #ffffff;
color: #241d16;
font-size: 25px;
font-weight: 300;
line-height: 1;
cursor: pointer;
}
/* normal mobile menu links */
.main-navigation > .nav-link {
width: 100%;
min-height: 54px;
display: flex;
align-items: center;
padding: 0 4px;
border-bottom: 1px solid #eeeae4;
color: #201b16;
font-size: 14px;
font-weight: 500;
}
.main-navigation .nav-link::after {
display: none;
}
/* dropdown mobile */
.hd-dd {
width: 100%;
height: auto;
display: block;
border-bottom: 1px solid #eeeae4;
}
.hd-dd-trigger-row {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.hd-dd-trigger-row .nav-link {
flex: 1;
width: auto;
min-height: 54px;
display: flex;
align-items: center;
padding: 0 4px;
border: 0;
color: #201b16;
font-size: 14px;
}
.hd-dd-arrow {
display: none;
}
.hd-dd-toggle {
flex: 0 0 46px;
width: 46px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: #2a211a;
cursor: pointer;
}
.hd-dd-toggle svg {
transition: transform 0.25s ease;
}
.hd-dd.open .hd-dd-toggle svg {
transform: rotate(180deg);
}
.hd-dd.open .hd-dd-trigger {
color: #b68136;
}
.hd-dd-menu {
position: static;
width: 100%;
max-height: none;
display: none;
overflow: hidden;
border: 0;
box-shadow: none;
background: #f8f5ef;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}
.hd-dd.open .hd-dd-menu {
display: block;
}
.hd-dd:hover .hd-dd-menu {
opacity: 1;
visibility: visible;
transform: none;
}
.hd-dd-link {
min-height: 44px;
padding: 10px 14px 10px 17px;
border-bottom: 1px solid #ebe5dc;
color: #5d554d;
font-size: 12px;
}
.hd-dd-link:hover {
background: #3a2410;
color: #ffffff;
}
.hd-dd-viewall {
color: #a46d36;
}
/* quote mobile */
.quote-btn {
width: 100%;
min-width: 100%;
height: 48px;
margin-top: 24px;
border-radius: 5px;
flex-direction: row;
gap: 6px;
font-size: 11px;
}
.quote-btn strong {
font-size: 11px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575px) {
.container {
padding-left: 15px;
padding-right: 15px;
}
.main-header {
height: 68px;
}
.brand-logo {
width: 175px;
height: 48px;
}
.mobile-menu-btn {
width: 41px;
height: 39px;
padding: 8px;
}
.main-navigation {
width: 90vw;
padding-left: 18px;
padding-right: 18px;
}
.mobile-nav-head {
min-height: 68px;
margin-left: -18px;
margin-right: -18px;
padding-left: 18px;
padding-right: 18px;
}
.logo-title {
font-size: 17px;
}
.logo-subtitle {
font-size: 7px;
letter-spacing: 1.1px;
}
.logo-mark {
flex-basis: 35px;
width: 35px;
height: 37px;
}
.hd-dd-link {
padding: 11px 14px;
font-size: 12px;
}
}
/* =========================================================
FOOTER
========================================================= */
/* =========================================================
DELHI WOOD - PREMIUM 4 COLUMN FOOTER
========================================================= */
.site-footer {
position: relative;
width: 100%;
overflow: hidden;
background: #07254a;
color: #ffffff;
border-top: 1px solid rgba(213, 166, 83, 0.16);
}
/* subtle background */
.site-footer::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
circle at 12% 35%,
rgba(11, 85, 104, 0.14),
transparent 26%
);
opacity: 0.9;
}
.footer-container {
position: relative;
z-index: 2;
width: min(1320px, 92%);
margin: 0 auto;
}
/* =========================================================
MAIN 4 COLUMN LAYOUT
========================================================= */
.footer-main {
display: grid;
grid-template-columns:
minmax(280px, 1.35fr)
minmax(175px, 0.8fr)
minmax(175px, 0.8fr)
minmax(280px, 1.1fr);
gap: 55px;
padding: 70px 0 55px;
}
/* =========================================================
COMPANY CARD
========================================================= */
.footer-company-card {
position: relative;
max-width: 360px;
min-height: 295px;
padding: 32px;
overflow: hidden;
}
.footer-card-accent {
position: absolute;
top: 0;
left: 31px;
width: 65px;
height: 4px;
border-radius: 0 0 5px 5px;
}
/* =========================================================
COMPANY LOGO
========================================================= */
.footer-company-logo {
width: 100%;
display: block;
margin-bottom: 22px;
}
.footer-logo-image-box {
width: 100%;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
padding: 7px 15px;
overflow: hidden;
border-radius: 6px;
background: #ffffff;
}
.footer-dynamic-logo {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
/* fallback */
.footer-fallback-logo {
min-height: 62px;
display: flex;
align-items: center;
gap: 13px;
padding: 8px 14px;
border-radius: 6px;
background: #ffffff;
}
.footer-logo-mark {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: #d5a653;
color: #24160a;
font-size: 14px;
font-weight: 700;
}
.footer-logo-copy {
display: flex;
flex-direction: column;
}
.footer-logo-copy strong {
color: #12213a;
font-size: 17px;
font-weight: 600;
}
.footer-logo-copy small {
margin-top: 3px;
color: #8a7d70;
font-size: 7px;
letter-spacing: 1.3px;
}
/* description */
.footer-company-description {
margin: 0 0 23px;
color: #c5d8dd;
font-size: 15px;
font-weight: 400;
line-height: 1.8;
}
/* discover */
.footer-discover-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
transition:
color 0.25s ease,
gap 0.25s ease;
}
.footer-discover-link span {
font-size: 16px;
}
.footer-discover-link:hover {
gap: 14px;
color: #ffc34b;
}
/* =========================================================
FOOTER COLUMNS
========================================================= */
.footer-column {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.footer-column h3 {
margin: 6px 0 10px;
color: #ffffff;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
}
.footer-title-line {
display: block;
width: 38px;
height: 3px;
margin-bottom: 20px;
border-radius: 4px;
background: #ffffff;
}
/* =========================================================
FOOTER LINKS
========================================================= */
.footer-links {
width: 100%;
display: flex;
flex-direction: column;
gap: 0;
}
.footer-links a {
display: flex;
align-items: center;
gap: 9px;
min-height: 29px;
color: #d2e0e4;
font-size: 15px;
line-height: 1.45;
transition:
color 0.25s ease,
transform 0.25s ease;
}
.footer-link-arrow {
flex: 0 0 auto;
color: #ffffff;
font-size: 18px;
line-height: 1;
}
.footer-links a:hover {
color: white;
transform: translateX(3px);
}
.footer-view-all {
margin-top: 3px;
color: #ffffff !important;
}
/* =========================================================
QUICK CONTACT
========================================================= */
.footer-contact-column {
min-width: 0;
}
.footer-contact-row {
width: 100%;
display: grid;
grid-template-columns: 42px 1fr;
gap: 12px;
align-items: start;
margin-bottom: 18px;
}
.footer-contact-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(245, 167, 17, 0.25);
background: rgba(245, 167, 17, 0.08);
color: #ffffff;
font-size: 13px;
}
.footer-contact-detail {
min-width: 0;
}
.footer-contact-detail p {
margin: 1px 0 0;
color: #d1dfe3;
font-size: 15px;
line-height: 1.65;
}
.footer-contact-label {
display: block;
margin: 2px 0 4px;
color: #78949d;
font-size: 15px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.footer-contact-detail a {
display: inline-block;
max-width: 100%;
color: #ffffff;
font-size: 15px;
font-weight: 600;
line-height: 1.5;
overflow-wrap: anywhere;
transition: color 0.25s ease;
}
.footer-contact-detail a:hover {
color: #f5a711;
}
/* =========================================================
SOCIALS
========================================================= */
.footer-socials {
display: flex;
align-items: center;
gap: 9px;
margin-top: 7px;
}
.footer-socials a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
color: #ffffff;
font-size: 13px;
transition:
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.footer-socials a:hover {
border-color: #f5a711;
background: #f5a711;
color: #071f2a;
transform: translateY(-2px);
}
/* =========================================================
FOOTER BOTTOM
========================================================= */
.footer-bottom {
min-height: 76px;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-copyright {
width: 100%;
text-align: center;
color: #90a6ad;
font-size: 15px;
line-height: 1.6;
}
.footer-copyright a {
color: #f5a711;
font-weight: 600;
transition: color 0.25s ease;
}
.footer-copyright a:hover {
color: #ffc147;
}
.footer-credit-divider {
display: inline-block;
margin: 0 4px;
color: #49636b;
}
/* =========================================================
FLOATING GET QUOTE
========================================================= */
.floating-quote {
position: fixed;
right: 25px;
bottom: 96px;
z-index: 9997;
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 18px;
border: 1px solid #9a742f;
border-radius: 25px;
background: #102c36;
color: #f0cf8b;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.floating-quote:hover {
background: #d5a653;
color: #18120d;
transform: translateY(-2px);
}
.quote-plus {
font-size: 19px;
font-weight: 300;
line-height: 1;
}
/* =========================================================
FLOATING WHATSAPP
========================================================= */
.floating-whatsapp {
position: fixed;
right: 25px;
bottom: 27px;
z-index: 9998;
width: 58px;
height: 58px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #ffffff;
border-radius: 50%;
background: #25d366;
color: #ffffff;
font-size: 29px;
cursor: pointer;
box-shadow: 0 7px 24px rgba(0, 0, 0, 0.28);
transition:
transform 0.25s ease,
background 0.25s ease;
}
.floating-whatsapp:hover {
background: #1fbd5b;
transform: translateY(-3px);
}
/* =========================================================
WHATSAPP POPUP
========================================================= */
.dw-whatsapp-popup {
position: fixed;
right: 25px;
bottom: 100px;
width: 355px;
z-index: 99999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(20px) scale(0.96);
transform-origin: bottom right;
transition:
opacity 0.25s ease,
visibility 0.25s ease,
transform 0.25s ease;
}
.dw-whatsapp-popup.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.dw-whatsapp-box {
overflow: hidden;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
}
.dw-whatsapp-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 17px;
background: #159588;
color: #ffffff;
}
.dw-whatsapp-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.dw-wa-small-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
font-size: 21px;
}
.dw-wa-heading h4 {
margin: 0 0 4px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
}
.dw-wa-heading p {
margin: 0;
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
}
.dw-whatsapp-close {
padding: 0;
border: 0;
background: transparent;
color: #ffffff;
font-size: 25px;
line-height: 1;
cursor: pointer;
}
.dw-whatsapp-body {
padding: 19px 18px 18px;
}
.dw-support-text {
margin: 0 0 18px;
text-align: center;
color: #777d8d;
font-size: 12px;
line-height: 1.5;
}
.dw-whatsapp-body .dw-form-group {
margin-bottom: 17px;
}
.dw-whatsapp-body .dw-form-group label {
display: block;
margin-bottom: 7px;
color: #363636;
font-size: 12px;
font-weight: 600;
}
.dw-whatsapp-body .dw-form-group > input {
width: 100%;
height: 44px;
padding: 0 12px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
background: #fff;
color: #333;
font-size: 13px;
}
.dw-phone-wrap {
display: flex;
width: 100%;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
}
.dw-country-code {
height: 44px;
padding: 0 11px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
border-right: 1px solid #ddd;
color: #333;
font-size: 11px;
}
.dw-phone-wrap input {
flex: 1;
min-width: 0;
height: 44px;
padding: 0 12px;
border: 0;
outline: none;
color: #333;
font-size: 13px;
}
.dw-chat-button {
width: 100%;
min-height: 56px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 9px;
border: 0;
border-radius: 9px;
background: #159588;
color: #fff;
cursor: pointer;
transition: background 0.25s ease;
}
.dw-chat-button:hover {
background: #117f74;
}
.dw-chat-left-icon {
width: 34px;
flex: 0 0 34px;
font-size: 20px;
}
.dw-chat-button-text {
display: flex;
flex-direction: column;
text-align: left;
}
.dw-chat-button-text strong {
color: #fff;
font-size: 14px;
}
.dw-chat-button-text small {
margin-top: 2px;
color: rgba(255, 255, 255, 0.9);
font-size: 10px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.footer-main {
grid-template-columns: 1.2fr 1fr 1fr;
gap: 40px;
}
.footer-company-card {
grid-column: span 3;
max-width: none;
}
.footer-company-logo {
max-width: 340px;
}
.footer-company-description {
max-width: 650px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.footer-container {
width: calc(100% - 32px);
}
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 38px 25px;
padding: 50px 0 42px;
}
.footer-company-card {
grid-column: span 2;
width: 100%;
max-width: none;
min-height: auto;
padding: 25px;
}
.footer-column h3 {
font-size: 14px;
}
.footer-links a {
font-size: 11px;
}
.footer-bottom {
min-height: 90px;
padding: 15px 0;
}
.footer-copyright {
font-size: 9px;
}
.floating-quote {
right: 16px;
bottom: 84px;
min-height: 43px;
padding: 0 14px;
font-size: 9px;
}
.floating-whatsapp {
right: 16px;
bottom: 16px;
width: 55px;
height: 55px;
font-size: 27px;
}
.dw-whatsapp-popup {
left: 12px;
right: 12px;
bottom: 82px;
width: auto;
transform-origin: bottom center;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 500px) {
.footer-main {
grid-template-columns: 1fr;
gap: 35px;
}
.footer-company-card {
grid-column: auto;
padding: 22px;
}
.footer-logo-image-box {
height: 58px;
}
.footer-company-description {
font-size: 11px;
}
.footer-column {
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-contact-column {
border-bottom: 0;
}
.footer-socials a {
width: 36px;
height: 36px;
}
.footer-credit-divider {
display: none;
}
.footer-copyright a {
display: block;
margin-top: 3px;
}
}
/* =========================================================
DELHI WOOD - RESPONSIVE HOME HERO BANNER
Desktop source design: 1920 x 700
Mobile source design: 1430 x 1100
Supports very small screens down to 175px width.
========================================================= */
/* ---------- Main slider ---------- */
.hero-slider,
.dynamic-home-banner {
position: relative;
width: 100%;
overflow: hidden;
background: #0b0908;
margin: 0;
padding: 0;
line-height: 0;
isolation: isolate;
/*
* Desktop ratio: 1920 / 700.
* clamp prevents an oversized banner on very wide screens.
*/
height: clamp(280px, 36.458333vw, 700px);
min-height: 0;
max-height: 700px;
}
/* ---------- Slides ---------- */
.hero-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.7s ease,
visibility 0.7s ease;
z-index: 1;
}
.hero-slide.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
}
/* ---------- Picture ---------- */
.dynamic-banner-picture {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
/* ---------- Banner image ---------- */
.dynamic-banner-image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
object-fit: cover;
object-position: center center;
user-select: none;
-webkit-user-drag: none;
}
/* ---------- Optional old background support ---------- */
.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transform: scale(1.03);
transition: transform 6s ease;
}
.hero-slide.active .hero-bg {
transform: scale(1);
}
/* ---------- Optional overlay ---------- */
.hero-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(7, 6, 5, 0.96) 0%,
rgba(7, 6, 5, 0.82) 35%,
rgba(7, 6, 5, 0.48) 65%,
rgba(7, 6, 5, 0.60) 100%
);
z-index: 1;
}
/* ---------- Optional hero content ---------- */
.hero-container {
position: relative;
z-index: 3;
width: min(1320px, 92%);
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
line-height: normal;
}
.hero-content {
width: min(650px, 100%);
padding-top: 10px;
}
/* ---------- Badges ---------- */
.hero-badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 32px;
}
.hero-location,
.hero-rating {
display: inline-flex;
align-items: center;
min-height: 35px;
padding: 0 15px;
border: 1px solid rgba(212, 164, 81, 0.4);
border-radius: 30px;
color: #d7c8ae;
font-size: 11px;
letter-spacing: 1.5px;
}
.hero-rating {
gap: 7px;
border-color: rgba(255, 255, 255, 0.18);
letter-spacing: 0;
color: #ddd;
}
.badge-dot {
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 50%;
background: #d4a451;
}
.rating-stars {
color: #d4a451;
font-size: 13px;
letter-spacing: 2px;
}
/* ---------- Title ---------- */
.hero-title {
margin: 0;
color: #f6f3ee;
font-family: "Poppins", sans-serif;
font-size: clamp(38px, 5vw, 82px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.04em;
}
.hero-title em {
color: #e0bb79;
font-style: italic;
font-weight: 400;
}
/* ---------- Description ---------- */
.hero-description {
max-width: 650px;
margin-top: 32px;
color: #bdb4a8;
font-size: 16px;
line-height: 1.65;
}
/* ---------- Buttons ---------- */
.hero-buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 38px;
}
.hero-btn {
min-width: 270px;
min-height: 51px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding: 0 24px;
border-radius: 30px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.hero-btn strong {
font-size: 18px;
font-weight: 400;
}
.hero-btn-primary {
background: #d4a451;
color: #17120b;
box-shadow: 0 12px 30px rgba(212, 164, 81, 0.16);
}
.hero-btn-primary:hover {
background: #e5bd7a;
transform: translateY(-2px);
}
.hero-btn-secondary {
background: rgba(10, 9, 8, 0.3);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #f0ebe4;
}
.hero-btn-secondary:hover {
background: rgba(255, 255, 255, 0.08);
border-color: #d4a451;
transform: translateY(-2px);
}
/* ---------- Stats ---------- */
.hero-stats {
display: flex;
align-items: stretch;
flex-wrap: wrap;
max-width: 665px;
margin-top: 54px;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.hero-stat {
min-width: 150px;
padding-right: 30px;
margin-right: 25px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-stat:last-child {
margin-right: 0;
border-right: 0;
}
.hero-stat strong {
display: block;
color: #e0bb79;
font-family: "Poppins", sans-serif;
font-size: 30px;
font-weight: 400;
}
.hero-stat span {
display: block;
margin-top: 7px;
color: #8d8478;
font-size: 9px;
letter-spacing: 1.2px;
}
/* ---------- Dots ---------- */
.hero-dots {
position: absolute;
z-index: 20;
left: 50%;
bottom: clamp(8px, 1.25vw, 24px);
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
line-height: normal;
}
.hero-dot {
width: clamp(18px, 1.45vw, 28px);
height: 3px;
padding: 0;
border: 0;
background: rgba(255, 255, 255, 0.45);
cursor: pointer;
transition:
width 0.3s ease,
background 0.3s ease;
}
.hero-dot.active {
width: clamp(28px, 2.5vw, 48px);
background: #d4a451;
}
/* ---------- Slider arrows ---------- */
.hero-arrow {
position: absolute;
z-index: 20;
top: 50%;
width: clamp(32px, 2.35vw, 45px);
height: clamp(32px, 2.35vw, 45px);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
color: #fff;
font-size: clamp(14px, 1vw, 18px);
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
transition:
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease;
}
.hero-arrow:hover {
background: #d4a451;
border-color: #d4a451;
color: #111;
}
.hero-prev {
left: clamp(8px, 1.3vw, 25px);
}
.hero-next {
right: clamp(8px, 1.3vw, 25px);
}
/* =========================================================
TABLET
========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
.hero-slider,
.dynamic-home-banner {
/*
* Same desktop image ratio on tablet.
* No forced 520px height, so image will not look stretched.
*/
height: 36.458333vw;
min-height: 280px;
max-height: 437px;
}
.hero-title {
font-size: clamp(42px, 5vw, 58px);
}
.hero-content {
width: min(570px, 90%);
}
}
/* =========================================================
MOBILE
Mobile uploaded banner: 1430 x 1100
========================================================= */
@media (max-width: 767px) {
.hero-slider,
.dynamic-home-banner {
width: 100%;
/*
* Exact mobile banner proportion.
* 1430 / 1100 = 1.3
* At 175px screen width height becomes approx 135px.
*/
height: auto;
min-height: 0;
max-height: none;
aspect-ratio: 1430 / 1100;
margin: 0;
padding: 0;
}
.hero-slide,
.dynamic-banner-picture,
.dynamic-banner-image {
width: 100%;
height: 100%;
}
.dynamic-banner-image {
object-fit: cover;
object-position: center center;
}
.hero-arrow {
width: clamp(26px, 8vw, 36px);
height: clamp(26px, 8vw, 36px);
font-size: clamp(12px, 4vw, 15px);
}
.hero-prev {
left: clamp(4px, 2vw, 10px);
}
.hero-next {
right: clamp(4px, 2vw, 10px);
}
.hero-dots {
bottom: clamp(5px, 2.5vw, 12px);
gap: clamp(3px, 1.5vw, 7px);
}
.hero-dot {
width: clamp(12px, 5vw, 20px);
height: 2px;
}
.hero-dot.active {
width: clamp(20px, 8vw, 34px);
}
/*
* These optional content rules only matter
* if text/content is later placed over the banner.
*/
.hero-container {
width: 90%;
}
.hero-content {
width: 100%;
padding-top: 0;
}
.hero-title {
font-size: clamp(24px, 10vw, 42px);
letter-spacing: -0.03em;
}
.hero-description {
margin-top: 14px;
font-size: clamp(11px, 3.5vw, 15px);
}
.hero-badges {
gap: 6px;
margin-bottom: 14px;
}
.hero-location,
.hero-rating {
min-height: 28px;
padding: 0 10px;
font-size: 9px;
}
.hero-buttons {
gap: 8px;
margin-top: 18px;
}
.hero-btn {
min-width: 0;
width: 100%;
min-height: 42px;
padding: 0 16px;
}
.hero-stats {
margin-top: 20px;
padding-top: 12px;
}
.hero-stat {
min-width: 0;
flex: 1 1 30%;
padding-right: 8px;
margin-right: 8px;
}
.hero-stat strong {
font-size: 22px;
}
}
/* =========================================================
VERY SMALL MOBILE
175px - 320px
========================================================= */
@media (max-width: 320px) {
.hero-slider,
.dynamic-home-banner {
aspect-ratio: 1430 / 1100;
}
.hero-arrow {
width: 24px;
height: 24px;
font-size: 11px;
}
.hero-prev {
left: 3px;
}
.hero-next {
right: 3px;
}
.hero-dots {
bottom: 4px;
gap: 3px;
}
.hero-dot {
width: 10px;
height: 2px;
}
.hero-dot.active {
width: 16px;
}
}
/* =========================================================
ULTRA SMALL SCREEN
Requested support down to 175px
========================================================= */
@media (max-width: 240px) {
/*
* On ultra-small screens arrows cover too much of the artwork,
* therefore keep the banner clean and use dots only.
*/
.hero-arrow {
display: none;
}
.hero-dots {
bottom: 3px;
gap: 2px;
}
.hero-dot {
width: 8px;
height: 2px;
}
.hero-dot.active {
width: 13px;
}
}
/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
.hero-slide,
.hero-bg,
.hero-dot,
.hero-arrow {
transition: none !important;
}
}
/* =========================================================
BRAND MARQUEE
========================================================= */
.brand-marquee {
width: 100%;
padding: 20px 10px;
overflow: hidden;
position: relative;
background:#07254a;
border-top: 1px solid rgba(212, 164, 81, 0.08);
border-bottom: 1px solid rgba(212, 164, 81, 0.1);
display: flex;
align-items: center;
}
.brand-marquee::before,
.brand-marquee::after {
content: "";
position: absolute;
top: 0;
width: 120px;
/* height: 100%; */
z-index: 2;
pointer-events: none;
}
/* .brand-marquee::before {
left: 0;
background: linear-gradient(90deg, #d5a653 0%, rgba(213, 166, 83, 0) 100%);
}
.brand-marquee::after {
right: 0;
background: linear-gradient(270deg, #d5a653 0%, rgba(213, 166, 83, 0) 100%);
} */
.brand-marquee-track {
display: flex;
align-items: center;
width: max-content;
height: auto;
animation: brandMarquee 30s linear infinite;
}
.brand-marquee-item {
display: flex;
align-items: center;
gap: 65px;
flex-shrink: 0;
padding: 0 42px;
white-space: nowrap;
}
.brand-marquee-item span {
color: white;
font-family: "Poppins", sans-serif;
font-size: 23px;
font-weight: 600;
letter-spacing: -0.3px;
transition: color 0.25s ease;
}
.brand-marquee-item i {
color: white;
font-size: 17px;
font-style: normal;
line-height: 1;
}
.brand-marquee:hover .brand-marquee-track {
animation-play-state: paused;
}
.brand-marquee-item:hover span {
color: #ffffff;
}
@keyframes brandMarquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* =========================================================
ABOUT MATERIAL / WHO WE ARE (HOME)
========================================================= */
.about-material-section {
position: relative;
width: 100%;
background: transparent;
color: #ffffff;
overflow: hidden;
padding: 105px 0 115px;
}
.about-material-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.25;
background-image: repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.025) 0px,
rgba(255, 255, 255, 0.025) 1px,
transparent 1px,
transparent 14px
);
}
.about-material-container {
position: relative;
z-index: 2;
width: min(1320px, 92%);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 56px;
}
.about-material-images {
position: relative;
min-height: 570px;
display: flex;
align-items: center;
justify-content: center;
}
.about-main-image {
width: 87%;
height: 470px;
margin-left: 0;
overflow: hidden;
border-radius: 3px;
position: relative;
}
.about-main-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.7s ease;
}
.about-main-image:hover img {
transform: scale(1.03);
}
.about-main-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.03),
rgba(0, 0, 0, 0.12)
);
pointer-events: none;
}
.surface-count-badge {
position: absolute;
left: 0;
top: 108px;
z-index: 5;
width: 96px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 50%;
background: #100e0c;
border: 1px solid #9a6d2f;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.surface-count-badge strong {
color: #d9b56e;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 1px;
}
.surface-count-badge span {
margin-top: 4px;
color: #d9c6a6;
font-size: 8px;
letter-spacing: 1.4px;
}
.about-small-image {
position: absolute;
z-index: 6;
right: 2%;
bottom: 23px;
width: 225px;
height: 225px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 3px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.about-small-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.6s ease;
}
.about-small-image:hover img {
transform: scale(1.05);
}
.about-material-content {
padding-right: 5px;
}
.section-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 21px;
}
.section-eyebrow span {
width: 31px;
height: 1px;
background: #9b7134;
}
.section-eyebrow strong {
color: #07254a;
font-size: 15px;
letter-spacing: 2.4px;
font-weight: 600;
}
.about-material-title {
max-width: 620px;
margin: 0;
color: #000000;
font-family: "Poppins", sans-serif;
font-size: 42px;
line-height: 1.1;
font-weight: 400;
letter-spacing: -2px;
}
.about-material-title em {
color: #dcb675;
font-style: italic;
}
.about-material-description {
max-width: 650px;
color: #000000;
font-size: 15px;
line-height: 1.5;
margin: 16px 7px;
}
.about-feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 39px;
}
.about-feature-card {
min-height: 157px;
padding: 23px 20px;
border: 1px solid #07254a;
border-radius: 12px;
transition:
border-color 0.3s ease,
background 0.3s ease,
transform 0.3s ease;
}
.about-feature-card:hover {
border-color: #07254a;
background: rgba(212, 164, 81, 0.035);
transform: translateY(-3px);
}
.feature-icon {
height: 27px;
color: #07254a;
font-size: 22px;
line-height: 1;
margin-bottom: 14px;
}
.about-feature-card h3 {
margin: 0 0 11px;
color: #07254a;
font-family: "Poppins", sans-serif;
font-size: 18px;
line-height: 1.2;
font-weight: 500;
}
.about-feature-card p {
margin: 0;
color: #000000;
font-size: 15px;
line-height: 1.55;
}
.about-story-btn {
width: fit-content;
min-width: 265px;
height: auto;
padding: 10px 20px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 25px;
border: 1px solid rgb(0 0 0 / 35%);
border-radius: 25px;
color: white;
font-size: 15px;
font-weight: 600;
letter-spacing: 1.4px;
transition:
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease;
background: #07254a;
}
.about-story-btn strong {
font-size: 17px;
font-weight: 400;
}
.about-story-btn:hover {
background: #07254a;
border-color: #07254a;
color: white;
}
/* =========================================================
THE COLLECTION / CATEGORY SLIDER - COMPLETE CSS
========================================================= */
.collection-section,
.collection-section *,
.collection-section *::before,
.collection-section *::after {
box-sizing: border-box;
}
.collection-section {
position: relative;
width: 100%;
padding: 90px 0 85px;
background: #07254a;
overflow: hidden;
}
.collection-container {
position: relative;
width: min(1480px, 92%);
margin: 0 auto;
}
/* =========================================================
SECTION HEADER
========================================================= */
.collection-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: 45px;
}
.collection-heading-wrap {
width: 100%;
max-width: 820px;
}
.collection-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.collection-eyebrow > span {
display: block;
width: 38px;
height: 1px;
flex-shrink: 0;
background: #b57a35;
}
.collection-eyebrow strong {
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1;
letter-spacing: 2px;
}
.collection-title {
margin: 0;
color: white;
font-family: "Poppins", sans-serif;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -1.4px;
}
.collection-title em {
color: white;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: italic;
}
.collection-description {
max-width: 720px;
margin: 16px 0 0;
color: white;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.75;
}
.collection-header-actions {
flex-shrink: 0;
}
/* =========================================================
VIEW ALL PRODUCTS BUTTON
========================================================= */
.collection-view-btn {
min-width: 215px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 0 20px;
border: 1px solid white;
border-radius: 30px;
background: transparent;
color: white;
text-decoration: none;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1;
letter-spacing: 1.1px;
transition:
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.collection-view-btn strong {
font-size: 17px;
font-weight: 400;
line-height: 1;
}
.collection-view-btn:hover {
background: #ffffff;
border-color: #a86e2c;
color: #000000;
transform: translateY(-2px);
}
/* =========================================================
SLIDER WRAPPER
========================================================= */
.collection-slider-wrapper {
position: relative;
width: 100%;
}
.collection-slider {
position: relative;
width: 100%;
overflow: hidden;
}
.collection-track {
display: flex;
align-items: stretch;
gap: 18px;
width: 100%;
transition: transform 0.55s ease;
will-change: transform;
}
/* =========================================================
DESKTOP - 4 CARDS IN ONE ROW
========================================================= */
.collection-slide {
flex: 0 0 calc((100% - 54px) / 4);
min-width: 0;
height: auto;
display: flex;
}
/* =========================================================
CARD
========================================================= */
.collection-card {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
height: 100%;
overflow: hidden;
border: 1px solid #e2e2e2;
border-radius: 2px;
background: #ffffff;
color: #222222;
text-decoration: none;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.055);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.collection-card:hover {
transform: translateY(-5px);
border-color: #d8c2a5;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
/* =========================================================
CARD IMAGE
========================================================= */
.collection-card-image {
position: relative;
display: block;
width: 100%;
height: 260px;
flex-shrink: 0;
overflow: hidden;
background: #eeeeee;
text-decoration: none;
}
.collection-card-image::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 65%,
rgba(0, 0, 0, 0.08) 100%
);
}
.collection-card-image img {
display: block;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
object-position: center;
transition: transform 0.55s ease;
}
.collection-card:hover .collection-card-image img {
transform: scale(1.055);
}
/* =========================================================
CARD CONTENT
========================================================= */
.collection-card-content {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
min-height: 178px;
padding: 18px 14px 16px;
text-align: center;
}
.collection-card-content h3 {
margin: 0;
color: #222222;
font-family: "Poppins", sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 1.35;
}
.collection-card-content p {
margin: 8px 0 16px;
min-height: 38px;
color: #686868;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.55;
}
/* =========================================================
TWO BUTTONS IN ONE ROW
========================================================= */
.collection-card-buttons {
width: 100%;
margin-top: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 9px;
}
.collection-card-btn {
width: 100%;
min-width: 0;
min-height: 45px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 8px 8px;
border: 0;
border-radius: 5px;
text-decoration: none;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
text-transform: uppercase;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.collection-card-btn .btn-icon {
flex-shrink: 0;
font-size: 13px;
line-height: 1;
}
.collection-card-btn:hover {
transform: translateY(-2px);
}
/* =========================================================
VIEW MORE BUTTON
========================================================= */
.collection-view-more {
background: #173f6d;
color: #ffffff;
box-shadow: 0 5px 12px rgba(23, 63, 109, 0.14);
}
.collection-view-more:hover {
background: #0f3158;
color: #ffffff;
}
/* =========================================================
CHAT WITH US BUTTON
========================================================= */
.collection-chat-btn {
background: #25d366;
color: #ffffff;
box-shadow: 0 5px 12px rgba(168, 110, 44, 0.14);
}
.collection-chat-btn:hover {
background: #25d366;
color: #ffffff;
}
/* =========================================================
SLIDER ARROWS
========================================================= */
.collection-slider-arrow {
position: absolute;
top: 50%;
z-index: 20;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #e4e4e4;
border-radius: 50%;
outline: none;
background: #ffffff;
color: #262626;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
font-family: "Poppins", sans-serif;
font-size: 30px;
font-weight: 300;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.collection-slider-arrow:hover {
background: #a86e2c;
border-color: #a86e2c;
color: #ffffff;
}
.collection-prev {
left: -23px;
}
.collection-next {
right: -23px;
}
/* =========================================================
SLIDER DOTS
========================================================= */
.collection-dots {
min-height: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 28px;
}
.collection-dot {
width: 8px;
height: 8px;
flex: 0 0 auto;
padding: 0;
border: 0;
border-radius: 50%;
outline: none;
background: #c4c4c4;
cursor: pointer;
transition:
width 0.25s ease,
background 0.25s ease,
border-radius 0.25s ease;
}
.collection-dot.active {
width: 27px;
border-radius: 20px;
background: #a86e2c;
}
/* =========================================================
EMPTY STATE
========================================================= */
.collection-empty {
width: 100%;
padding: 45px 25px;
border: 1px solid #e4e4e4;
background: #ffffff;
color: #777777;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 14px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.collection-card-image {
height: 275px;
}
}
/* =========================================================
SMALL DESKTOP
========================================================= */
@media (max-width: 1199px) {
.collection-container {
width: 94%;
}
.collection-title {
font-size: 36px;
}
.collection-card-image {
height: 230px;
}
.collection-card-content {
padding: 16px 10px 14px;
}
.collection-card-content h3 {
font-size: 15px;
}
.collection-card-btn {
font-size: 9px;
gap: 5px;
padding-left: 5px;
padding-right: 5px;
}
.collection-prev {
left: 5px;
}
.collection-next {
right: 5px;
}
}
/* =========================================================
TABLET - 2 CARDS
========================================================= */
@media (max-width: 991px) {
.collection-section {
padding: 70px 0;
}
.collection-container {
width: 92%;
}
.collection-header {
align-items: flex-start;
flex-direction: column;
gap: 24px;
margin-bottom: 35px;
}
.collection-header-actions {
width: 100%;
}
.collection-title {
font-size: 34px;
}
.collection-description {
max-width: 100%;
}
.collection-slide {
flex: 0 0 calc((100% - 18px) / 2);
}
.collection-card-image {
height: 280px;
}
.collection-card-content {
min-height: 175px;
}
.collection-card-content h3 {
font-size: 17px;
}
.collection-card-btn {
font-size: 10px;
}
}
/* =========================================================
MOBILE - 1 CARD
========================================================= */
@media (max-width: 576px) {
.collection-section {
padding: 55px 0;
}
.collection-container {
width: 92%;
}
.collection-header {
gap: 20px;
margin-bottom: 28px;
}
.collection-eyebrow {
margin-bottom: 10px;
}
.collection-title {
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.7px;
}
.collection-description {
margin-top: 12px;
font-size: 13px;
line-height: 1.7;
}
.collection-view-btn {
min-width: 190px;
height: 43px;
}
.collection-track {
gap: 14px;
}
.collection-slide {
flex: 0 0 100%;
}
.collection-card-image {
height: auto;
aspect-ratio: 1 / 1;
}
.collection-card-content {
min-height: 170px;
padding: 16px 12px 14px;
}
.collection-card-content h3 {
font-size: 18px;
}
.collection-card-content p {
min-height: auto;
margin: 8px 0 15px;
font-size: 12px;
}
.collection-card-buttons {
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.collection-card-btn {
min-height: 43px;
padding: 7px 5px;
font-size: 9px;
gap: 5px;
}
.collection-card-btn .btn-icon {
font-size: 12px;
}
.collection-slider-arrow {
width: 38px;
height: 38px;
font-size: 24px;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.14);
}
.collection-prev {
left: 6px;
}
.collection-next {
right: 6px;
}
.collection-dots {
margin-top: 22px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.collection-title {
font-size: 25px;
}
.collection-card-buttons {
gap: 5px;
}
.collection-card-btn {
min-height: 41px;
font-size: 8px;
letter-spacing: 0;
}
}
/* =========================================================
APPLICATIONS SECTION (HOME SLIDER)
========================================================= */
.applications-section {
position: relative;
width: 100%;
padding: 20px 86px;
color: #ffffff;
overflow: hidden;
}
.applications-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.18;
background-image: repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.025) 0px,
rgba(255, 255, 255, 0.025) 1px,
transparent 1px,
transparent 14px
);
}
.applications-header {
position: relative;
z-index: 2;
width: min(1305px, 92%);
margin: 0 auto 58px;
}
.applications-heading-wrap {
max-width: 900px;
}
.applications-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color: #07254a;
font-size: 10px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.applications-eyebrow-line {
display: block;
width: 32px;
height: 1px;
background: #b88a43;
}
.applications-title {
margin: 0;
color: #040404;
font-family: "Poppins", sans-serif;
font-size: 40px;
font-weight: 400;
line-height: 1.05;
letter-spacing: -2px;
}
.applications-title em {
color: #07254a;
font-style: normal;
}
.applications-description {
max-width: 790px;
margin: 26px 0 0;
color: #a59b8e;
font-size: 14px;
line-height: 1.65;
}
.applications-slider-wrapper {
position: relative;
z-index: 2;
width: 100%;
}
.applications-slider {
width: 100%;
overflow: hidden;
}
.applications-track {
display: flex;
gap: 20px;
width: max-content;
transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.application-card {
position: relative;
flex: 0 0 calc((100vw - 80px) / 5);
width: calc((100vw - 80px) / 5);
height: 480px;
display: block;
overflow: hidden;
/* border: 1px solid rgba(255, 255, 255, 0.1); */
border-radius: 4px;
background: #171411;
color: #ffffff;
text-decoration: none;
isolation: isolate;
}
.application-image {
position: absolute;
inset: 0;
z-index: -3;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transform: scale(1.01);
transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.application-card:hover .application-image {
transform: scale(1.07);
}
.application-overlay {
position: absolute;
inset: 0;
z-index: -2;
background: linear-gradient(
180deg,
rgba(8, 7, 6, 0.03) 10%,
rgba(8, 7, 6, 0.1) 35%,
rgba(8, 7, 6, 0.35) 55%,
rgba(8, 7, 6, 0.95) 100%
);
}
.application-content {
position: absolute;
left: 24px;
right: 24px;
bottom: 25px;
}
.application-number {
display: block;
margin-bottom: 14px;
color: #c79b50;
font-size: 9px;
line-height: 1;
letter-spacing: 2px;
}
.application-content h3 {
margin: 0 0 10px;
color: #f4eee7;
font-family: "Poppins", sans-serif;
font-size: 26px;
font-weight: 500;
line-height: 1.1;
}
.application-content p {
max-width: 310px;
min-height: 38px;
margin: 0;
color: #b0a79b;
font-size: 12px;
line-height: 1.5;
}
.application-link {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 20px;
color: white;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.8px;
}
.application-link strong {
font-size: 16px;
font-weight: 400;
transition: transform 0.25s ease;
}
.application-card:hover .application-link strong {
transform: translateX(5px);
}
.applications-arrow {
position: absolute;
z-index: 20;
top: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(210, 164, 91, 0.45);
border-radius: 50%;
background: rgba(12, 10, 9, 0.88);
color: #d4a451;
font-size: 18px;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.applications-arrow:hover {
background: #d4a451;
border-color: #d4a451;
color: #111111;
}
.applications-prev {
left: 20px;
}
.applications-next {
right: 20px;
}
.applications-dots {
position: relative;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
gap: 7px;
margin-top: 28px;
}
.application-dot {
width: 22px;
height: 3px;
padding: 0;
border: 0;
border-radius: 10px;
background: rgba(0, 0, 0, 0.18);
cursor: pointer;
transition:
width 0.3s ease,
background 0.3s ease;
}
.application-dot.active {
width: 42px;
background: #d4a451;
}
/* =========================================================
WHY DELHI WOOD
========================================================= */
.why-delhi-wood-section {
position: relative;
width: 100%;
padding: 105px 0 100px;
background: #80808024;
color: #151311;
overflow: hidden;
}
.why-delhi-wood-container {
position: relative;
width: min(1090px, 90%);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 55px;
align-items: stretch;
}
.why-delhi-wood-content {
position: relative;
z-index: 2;
padding-top: 43px;
}
.why-delhi-wood-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 21px;
color: #665f56;
font-size: 10px;
font-weight: 600;
letter-spacing: 2.4px;
text-transform: uppercase;
}
.why-delhi-wood-line {
width: 32px;
height: 1px;
background: #81786d;
}
.why-delhi-wood-title {
margin: 0;
max-width: 590px;
color: #161412;
font-family: "Poppins", sans-serif;
font-size: clamp(45px, 4vw, 57px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -2.4px;
}
.why-delhi-wood-title em {
color: #07254a;
font-style: italic;
}
.why-delhi-wood-description {
max-width: 585px;
margin: 24px 0 40px;
color: #6b665e;
font-size: 14px;
line-height: 1.65;
}
.why-delhi-wood-features {
width: 100%;
border: 1px solid #c9c2b6;
background: rgba(246, 242, 234, 0.45);
}
.why-feature {
display: flex;
align-items: flex-start;
gap: 20px;
min-height: 112px;
padding: 24px;
border-bottom: 1px solid #d1c9bd;
}
.why-feature:last-child {
border-bottom: none;
}
.why-feature-icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d7cec0;
border-radius: 50%;
color: #07254a;
font-size: 21px;
line-height: 1;
}
.why-icon-sparkle {
font-size: 27px;
transform: translateY(-1px);
}
.why-icon-clock {
font-size: 27px;
}
.why-icon-check {
font-size: 20px;
font-weight: 500;
}
.why-icon-truck {
font-size: 22px;
}
.why-feature-content {
flex: 1;
}
.why-feature-content h3 {
margin: 0 0 7px;
color: #171411;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1.25;
}
.why-feature-content p {
max-width: 530px;
margin: 0;
color: #716b62;
font-size: 12px;
line-height: 1.55;
}
.why-delhi-wood-visual {
position: relative;
min-height: 700px;
overflow: visible;
}
.why-delhi-wood-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 3px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.why-delhi-wood-image-overlay {
position: absolute;
inset: 0;
border-radius: 3px;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.02) 45%,
rgba(0, 0, 0, 0.15) 100%
);
}
.why-delhi-wood-testimonial {
position: absolute;
right: 20px;
bottom: 20px;
width: 240px;
min-height: 185px;
padding: 24px 22px;
background: rgba(19, 16, 14, 0.96);
color: #ffffff;
border-radius: 3px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}
.testimonial-stars {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 17px;
color: #d5a653;
font-size: 14px;
}
.testimonial-quote {
margin: 0;
color: #f4eee7;
font-family: "Poppins", sans-serif;
font-size: 19px;
font-weight: 600;
line-height: 1.42;
}
.testimonial-author {
margin-top: 15px;
color: #9d958c;
font-size: 10px;
line-height: 1.4;
}
/* =========================================================
RECENT WORK - STATIC 4 COLUMN
========================================================= */
.recent-work-static-section {
position: relative;
width: 100%;
padding: 105px 0 90px;
background: #07254a;
color: #ffffff;
overflow: hidden;
}
.recent-work-static-container {
width: min(1305px, 92%);
margin: 0 auto;
}
.recent-work-static-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: 52px;
}
.recent-work-static-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color: #ffffff;
font-size: 10px;
font-weight: 600;
letter-spacing: 2.4px;
line-height: 1;
text-transform: uppercase;
}
.recent-work-static-line {
display: block;
width: 32px;
height: 1px;
background: #ffffff;
}
.recent-work-static-title {
margin: 0;
color: #f5f0e9;
font-family: "Poppins", sans-serif;
font-size: clamp(48px, 4vw, 58px);
font-weight: 400;
line-height: 1;
letter-spacing: -2.5px;
}
.recent-work-static-title em {
color: #ffffff;
font-style: italic;
}
.recent-work-static-button {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 220px;
height: 44px;
padding: 0 22px;
border: 1px solid #ffffff;
border-radius: 25px;
color: #eee7dd;
background: transparent;
text-decoration: none;
font-size: 15px;
font-weight: 600;
letter-spacing: 1.5px;
transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
.recent-work-static-button:hover {
background: #ffffff;
border-color: #07254a;
color: #111;
}
.recent-work-static-arrow {
font-size: 15px;
font-weight: 400;
line-height: 1;
}
.recent-work-static-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
width: 100%;
}
.recent-work-static-item {
min-width: 0;
width: 100%;
}
.recent-work-static-card {
position: relative;
display: block;
width: 100%;
height: 416px;
overflow: hidden;
border-radius: 3px;
background: #151210;
color: #ffffff;
text-decoration: none;
isolation: isolate;
}
.recent-work-static-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transform: scale(1.01);
transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.recent-work-static-card:hover .recent-work-static-image {
transform: scale(1.06);
}
.recent-work-static-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(8, 7, 6, 0) 25%,
rgba(8, 7, 6, 0.05) 42%,
rgba(8, 7, 6, 0.38) 65%,
rgba(8, 7, 6, 0.95) 100%
);
}
.recent-work-static-card-content {
position: absolute;
z-index: 2;
left: 20px;
right: 18px;
bottom: 20px;
}
.recent-work-static-location {
margin-bottom: 10px;
color: #ffffff;
font-size: 8px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 2px;
text-transform: uppercase;
}
.recent-work-static-card-content h3 {
margin: 0;
color: #f7f1e9;
font-family: "Poppins", sans-serif;
font-size: 19px;
font-weight: 500;
line-height: 1.2;
}
.recent-work-static-material {
width: 100%;
margin-top: 12px;
color: white;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
.recent-work-static-empty {
grid-column: 1 / -1;
color: #ffffff;
font-size: 14px;
}
/* =========================================================
MOBILE RESPONSIVE - ONE CARD AT A TIME SLIDER
========================================================= */
@media (max-width: 767px) {
.recent-work-static-section {
padding: 60px 0 50px;
}
.recent-work-static-container {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
/* Header stacked */
.recent-work-static-header {
flex-direction: column;
align-items: flex-start;
gap: 24px;
margin-bottom: 30px;
}
.recent-work-static-eyebrow {
margin-bottom: 14px;
}
.recent-work-static-title {
font-size: 38px;
letter-spacing: -1.5px;
}
.recent-work-static-button {
min-width: 0;
width: 100%;
max-width: 260px;
}
/* Horizontal slider: 1 card per view */
.recent-work-static-grid {
display: grid;
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.recent-work-static-grid::-webkit-scrollbar {
display: none;
}
.recent-work-static-item {
scroll-snap-align: start;
scroll-snap-stop: always;
}
.recent-work-static-card {
height: 420px;
}
.recent-work-static-card-content {
left: 18px;
right: 18px;
bottom: 18px;
}
.recent-work-static-location {
font-size: 9px;
}
.recent-work-static-card-content h3 {
font-size: 21px;
}
.recent-work-static-material {
font-size: 12px;
margin-top: 14px;
}
}
/* Small phones */
@media (max-width: 480px) {
.recent-work-static-title {
font-size: 34px;
}
.recent-work-static-card {
height: 380px;
}
}
/* =========================================================
CLIENT TESTIMONIAL SECTION
========================================================= */
.client-words-section,
.client-words-section *,
.client-words-section *::before,
.client-words-section *::after {
box-sizing: border-box;
}
.client-words-section {
position: relative;
width: 100%;
padding: 80px 0;
background: #f4f6f9;
overflow: hidden;
}
.client-words-container {
width: min(1500px, 90%);
margin: 0 auto;
display: grid;
grid-template-columns: 36% 64%;
align-items: center;
gap: 55px;
}
/* =========================================================
LEFT SIDE
========================================================= */
.client-words-left {
width: 100%;
padding-right: 15px;
}
.client-words-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
color: #07254a;
font-family: "Poppins", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.client-words-line {
width: 34px;
height: 2px;
display: block;
background: linear-gradient(
90deg,
#193f73,
#ef6a25
);
}
.client-words-title {
max-width: 500px;
margin: 0;
color: #172036;
font-family: "Poppins", sans-serif;
font-size: 44px;
font-weight: 700;
line-height: 1.12;
letter-spacing: -1.6px;
}
.client-words-title em {
display: block;
color: #07254a;
font-style: normal;
font-weight: 700;
}
.client-words-description {
max-width: 510px;
margin: 25px 0 0;
color: #65758e;
font-family: "Poppins", sans-serif;
font-size: 15px;
line-height: 1.85;
}
.client-words-small-line {
width: 80px;
height: 3px;
margin-top: 32px;
background: linear-gradient(
90deg,
#203e73 0%,
#f06a28 100%
);
border-radius: 5px;
}
.client-words-trust {
display: flex;
align-items: center;
gap: 14px;
margin-top: 30px;
}
.client-words-trust-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #07254a;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 24px;
font-weight: 700;
}
.client-words-trust strong {
color: #31405a;
font-family: "Poppins", sans-serif;
font-size: 12px;
font-weight: 700;
}
/* =========================================================
RIGHT SIDE
========================================================= */
.client-words-right {
width: 100%;
min-width: 0;
}
.client-words-slider {
width: 100%;
overflow: hidden;
}
.client-words-track {
display: flex;
align-items: stretch;
gap: 24px;
transition: transform 0.6s ease;
will-change: transform;
}
/* =========================================================
2 CARDS VISIBLE
========================================================= */
.client-words-card {
position: relative;
flex: 0 0 calc((100% - 24px) / 2);
min-width: 0;
min-height: 365px;
display: flex;
flex-direction: column;
padding: 38px 32px 30px;
border: 1px solid #e2e7ef;
border-radius: 20px;
background: #ffffff;
box-shadow:
0 8px 30px rgba(27, 42, 70, 0.06);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.client-words-card:hover {
transform: translateY(-5px);
border-color: #d6dce6;
box-shadow:
0 18px 40px rgba(27, 42, 70, 0.10);
}
/* =========================================================
BIG QUOTE MARK
========================================================= */
.client-words-big-quote {
position: absolute;
top: 23px;
right: 28px;
color: #e9edf4;
font-family: "Poppins", sans-serif;
font-size: 60px;
font-weight: 700;
line-height: 1;
}
/* =========================================================
CARD TITLE
========================================================= */
.client-words-card h3 {
position: relative;
z-index: 2;
max-width: 320px;
margin: 0 0 22px;
color: #182136;
font-family: "Poppins", sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.35;
}
/* =========================================================
QUOTE
========================================================= */
.client-words-quote {
margin: 0;
color: #667791;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.75;
}
/* =========================================================
FOOTER
========================================================= */
.client-words-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: auto;
padding-top: 25px;
}
/* =========================================================
USER INFO
========================================================= */
.client-words-user {
display: flex;
align-items: center;
gap: 12px;
}
.client-words-avatar {
width: 46px;
height: 46px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(
145deg,
#d4d4d4,
#eeeeee
);
color: #777;
font-family: "Poppins", sans-serif;
font-size: 12px;
font-weight: 700;
}
.client-words-user-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.client-words-user-info strong {
color: #182136;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.client-words-user-info span {
color: #7b889c;
font-family: "Poppins", sans-serif;
font-size: 10px;
line-height: 1.3;
}
/* =========================================================
GOOGLE
========================================================= */
.client-words-google {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
}
.google-text {
font-family: "Poppins", sans-serif;
font-size: 24px;
font-weight: 500;
letter-spacing: -1px;
color: #4285f4;
}
.client-words-google small {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-top: -2px;
color: #777;
font-size: 8px;
line-height: 1.2;
}
.client-words-google small span {
color: #f4b400;
font-size: 8px;
letter-spacing: 0.5px;
}
/* =========================================================
CONTROLS
========================================================= */
.client-words-controls {
display: grid;
grid-template-columns: 46px 1fr 46px;
align-items: center;
gap: 16px;
margin-top: 26px;
}
/* =========================================================
ARROWS
========================================================= */
.client-words-arrow {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: #07254a;
color: #ffffff;
font-size: 22px;
line-height: 1;
cursor: pointer;
box-shadow:
0 5px 14px rgba(200, 59, 59, 0.2);
transition:
transform 0.25s ease,
background 0.25s ease;
}
.client-words-arrow:hover {
background: #a92f2f;
transform: translateY(-2px);
}
/* =========================================================
PROGRESS LINE
========================================================= */
.client-words-progress {
position: relative;
width: 100%;
height: 3px;
overflow: hidden;
background: #dce2eb;
}
.client-words-progress-bar {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: linear-gradient(
90deg,
#203e73 0%,
#ef6c28 100%
);
transition: width 0.45s ease;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.client-words-container {
grid-template-columns: 34% 66%;
gap: 35px;
}
.client-words-title {
font-size: 36px;
}
.client-words-description {
font-size: 13px;
}
.client-words-card {
flex: 0 0 100%;
}
}
/* =========================================================
MOBILE / TABLET STACK
========================================================= */
@media (max-width: 850px) {
.client-words-section {
padding: 65px 0;
}
.client-words-container {
width: 92%;
grid-template-columns: 1fr;
gap: 40px;
}
.client-words-left {
padding-right: 0;
}
.client-words-title {
max-width: 100%;
font-size: 34px;
}
.client-words-title em {
display: inline;
}
.client-words-description {
max-width: 100%;
}
.client-words-card {
min-height: 330px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 576px) {
.client-words-section {
padding: 55px 0;
}
.client-words-title {
font-size: 29px;
line-height: 1.2;
}
.client-words-description {
margin-top: 18px;
font-size: 13px;
line-height: 1.75;
}
.client-words-trust {
align-items: flex-start;
}
.client-words-card {
flex: 0 0 100%;
min-height: 350px;
padding: 30px 22px 24px;
border-radius: 15px;
}
.client-words-card h3 {
padding-right: 35px;
font-size: 18px;
}
.client-words-quote {
font-size: 13px;
}
.client-words-big-quote {
top: 18px;
right: 18px;
font-size: 50px;
}
.client-words-card-footer {
gap: 12px;
}
.client-words-avatar {
width: 40px;
height: 40px;
}
.client-words-user-info strong {
font-size: 12px;
}
.client-words-user-info span {
font-size: 9px;
}
.google-text {
font-size: 19px;
}
.client-words-controls {
grid-template-columns: 40px 1fr 40px;
gap: 12px;
}
.client-words-arrow {
width: 40px;
height: 40px;
font-size: 18px;
}
}
/* =========================================================
MATERIAL JOURNAL
========================================================= */
.material-journal-section {
position: relative;
width: 100%;
padding: 105px 0 90px;
background: #80808033;
color: #ffffff;
overflow: hidden;
}
.material-journal-container {
width: min(1305px, 92%);
margin: 0 auto;
}
.material-journal-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 45px;
margin-bottom: 55px;
}
.material-journal-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 21px;
color: #07254a;
font-size: 10px;
font-weight: 600;
line-height: 1;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.material-journal-line {
width: 32px;
height: 1px;
background: white;
display: block;
}
.material-journal-title {
margin: 0;
color: #07254a;
font-family: "Poppins", sans-serif;
font-size: clamp(48px, 4vw, 58px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -2.5px;
}
.material-journal-title em {
color: #07254a;
font-style: normal;
}
.material-journal-subtitle {
max-width: 700px;
margin: 19px 0 0;
color: #938a80;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
}
.material-journal-button {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;
min-width: 175px;
height: 44px;
padding: 0 20px;
background: #07254a;
border-color: #07254a;
border-radius: 25px;
color: #eee7dd;
text-decoration: none;
font-size: 15px;
font-weight: 600;
letter-spacing: 1.5px;
transition: 0.3s ease;
}
.material-journal-button:hover {
background: #07254a;
border-color: #07254a;
color: white;
}
.material-journal-button-arrow {
font-size: 15px;
line-height: 1;
}
.material-journal-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
width: 100%;
}
.material-journal-card {
min-width: 0;
width: 100%;
}
.material-journal-image-wrap {
position: relative;
display: block;
width: 100%;
height: 262px;
overflow: hidden;
border-radius: 3px;
background: #151210;
text-decoration: none;
}
.material-journal-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.material-journal-card:hover .material-journal-image {
transform: scale(1.05);
}
.material-journal-category {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 0 12px;
border-radius: 20px;
background: rgba(12, 10, 9, 0.9);
color: #d3aa6c;
font-size: 8px;
font-weight: 600;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.material-journal-content {
padding-top: 20px;
}
.material-journal-card-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
color: #f4eee6;
text-decoration: none;
}
.material-journal-card-title h3 {
margin: 0;
color: #07254a;
font-family: "Poppins", sans-serif;
font-size: 19px;
font-weight: 600;
line-height: 1.32;
}
.material-journal-card-arrow {
flex: 0 0 auto;
margin-top: 3px;
color: #07254a;
font-size: 19px;
line-height: 1;
transition:
transform 0.3s ease,
color 0.3s ease;
}
.material-journal-card:hover .material-journal-card-arrow {
color: #e0b66e;
transform: translateX(4px);
}
.material-journal-description {
margin: 14px 0 0;
color: #91877d;
font-family: "Poppins", sans-serif;
font-size: 15px;
line-height: 1.65;
}
.material-journal-meta {
display: flex;
align-items: center;
gap: 7px;
margin-top: 18px;
color: #756c62;
font-family: "Poppins", sans-serif;
font-size: 9px;
font-weight: 500;
letter-spacing: 1.2px;
}
.material-journal-meta-dot {
color: #a47d42;
}
/* =========================================================
ABOUT US PAGE - HERO
========================================================= */
/* =========================================================
ABOUT US PAGE (ab-*)
Main CSS me ye purane About-page blocks hata do:
1) ABOUT US PAGE - HERO
2) WHO WE ARE (ABOUT PAGE)
3) OUR JOURNEY
4) HOW WE OPERATE
5) VISIT US
6) FEATURED TESTIMONIAL
Aur unki jagah ye poora block paste karo.
(MATERIAL SPECIALIST CTA wala block mat hatana, wo home page ka hai.)
Colors badalne ho to sirf neeche ke variables badlo.
========================================================= */
.ab-page {
/* --ab-bg: #fdf8ef; */
--ab-band: #f3ecdd;
--ab-card: #ffffff;
--ab-cream: #fff7ea;
--ab-border: #e6dfd0;
--ab-brown: #5c1f0b;
--ab-brown-dark: #451507;
--ab-brown-light: #7a2d12;
--ab-orange: #e08a2c;
--ab-text: #1f2937;
--ab-muted: #6b7280;
background: var(--ab-bg);
color: var(--ab-text);
font-family: "Poppins", sans-serif;
padding-top: 22px;
width: 100%;
overflow-x: hidden;
}
.ab-container {
width: min(1280px, 92%);
margin: 0 auto;
}
.ab-label {
display: inline-block;
margin-bottom: 16px;
padding: 6px 16px;
/* background: #07254a38; */
border: 1px solid #07254a;
border-radius: 30px;
font-size: 11px;
font-weight: 600;
letter-spacing: 2.2px;
color: #07254a;
}
/* ---------------- BREADCRUMB ---------------- */
.ab-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 16px 20px;
background: #ffffff;
border: 1px solid var(--ab-border);
font-size: 14px;
color: var(--ab-muted);
}
.ab-breadcrumb a {
color: var(--ab-brown);
font-weight: 500;
transition: color 0.2s ease;
}
.ab-breadcrumb a:hover {
color: var(--ab-orange);
}
.ab-bc-sep {
color: #9ca3af;
}
.ab-breadcrumb strong {
font-weight: 400;
color: var(--ab-text);
}
/* ---------------- BUTTONS ---------------- */
.ab-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 190px;
padding: 14px 26px;
border-radius: 5px;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.ab-btn:hover {
transform: translateY(-2px);
}
.ab-btn-solid {
background: #07254a;
border: 1px solid #07254a;
color: #ffffff;
}
.ab-btn-solid:hover {
background: #07254a;
border-color: #07254a;
}
.ab-btn-outline {
background: #ffffff;
border: 1px solid #102c36;
color: #07254a;
}
.ab-btn-outline:hover {
background: #07254a;
color: #ffffff;
}
.ab-btn-light {
background: #ffffff;
border: 1px solid #ffffff;
color: var(--ab-brown);
}
.ab-btn-light:hover {
background: var(--ab-orange);
border-color: var(--ab-orange);
color: #ffffff;
}
.ab-btn-ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.45);
color: #ffffff;
}
.ab-btn-ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #ffffff;
}
/* ---------------- WHO WE ARE ---------------- */
.ab-who {
padding: 64px 0 84px;
}
.ab-who-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 64px;
align-items: center;
}
.ab-who-content {
min-width: 0;
}
.ab-who-title {
margin: 0;
max-width: 640px;
font-size: 42px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.5px;
color: var(--ab-text);
}
.ab-who-title em {
font-style: normal;
color: var(--ab-orange);
}
.ab-who-text {
max-width: 640px;
margin: 20px 0 0;
font-size: 15px;
line-height: 1.9;
color: #4b5563;
}
.ab-checks {
list-style: none;
margin: 26px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.ab-checks li {
position: relative;
padding-left: 32px;
font-size: 14.5px;
font-weight: 500;
color: var(--ab-text);
}
.ab-checks li::before {
content: "✓";
position: absolute;
left: 0;
top: -1px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: #07254a;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
color: #ffffff;
}
.ab-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 34px;
}
.ab-stat {
padding: 20px 14px 18px;
background: #ffffff;
border: 1px solid var(--ab-border);
border-bottom: 3px solid #07254a;
border-radius: 6px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.ab-stat:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(92, 31, 11, 0.1);
}
.ab-stat-number {
display: flex;
align-items: baseline;
justify-content: center;
font-size: 32px;
font-weight: 700;
line-height: 1;
color: #07254a;
}
.ab-stat-suffix {
margin-left: 2px;
font-size: 22px;
color: #07254a;
}
.ab-stat-label {
margin-top: 10px;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
color: var(--ab-muted);
}
.ab-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 34px;
}
/* ---------------- WHO WE ARE : IMAGES ---------------- */
.ab-who-visual {
position: relative;
min-height: 640px;
padding: 0 0 40px 40px;
}
.ab-who-visual::before {
content: "";
position: absolute;
top: 26px;
right: -18px;
width: 78%;
height: 540px;
border: 2px solid var(--ab-orange);
border-radius: 8px;
pointer-events: none;
z-index: 0;
}
.ab-main-image {
position: relative;
z-index: 1;
height: 580px;
overflow: hidden;
border-radius: 8px;
background: #e9e2d3;
box-shadow: 0 22px 50px rgba(92, 31, 11, 0.18);
}
.ab-main-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.ab-rating {
position: absolute;
z-index: 3;
top: 26px;
right: 26px;
padding: 14px 18px;
background: #ffffff;
border-radius: 6px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}
.ab-rating-stars {
font-size: 15px;
letter-spacing: 2px;
line-height: 1;
color: var(--ab-orange);
}
.ab-rating-text {
margin-top: 6px;
font-size: 12px;
font-weight: 600;
color: var(--ab-brown);
}
.ab-small-image {
position: absolute;
z-index: 4;
left: 0;
bottom: 0;
width: 220px;
height: 200px;
overflow: hidden;
border: 6px solid var(--ab-bg);
border-radius: 8px;
background: #e9e2d3;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}
.ab-small-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------------- NEW : WHY DELHI WOOD ---------------- */
.ab-why {
padding: 80px 0 90px;
background: #ebebeb;
}
.ab-why-heading {
max-width: 720px;
margin: 0 auto 46px;
text-align: center;
}
.ab-why-title {
margin: 0;
font-size: 36px;
font-weight: 600;
line-height: 1.25;
color: var(--ab-text);
}
.ab-why-title span {
color: #102c36;
}
.ab-why-desc {
margin: 16px 0 0;
font-size: 15px;
line-height: 1.8;
color: var(--ab-muted);
}
.ab-why-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.ab-why-card {
padding: 30px 26px 28px;
background: #ffffff;
border: 1px solid #102c36ed;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.ab-why-card:hover {
transform: translateY(-4px);
border-color: #102c36ed;
box-shadow: 0 14px 30px rgba(92, 31, 11, 0.12);
}
.ab-why-icon {
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
background: #102c36;
border: 1px solid #102c36;
border-radius: 50%;
color: #ffffff;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ab-why-card h3 {
margin: 0 0 10px;
font-size: 19px;
font-weight: 600;
line-height: 1.35;
color: var(--ab-text);
}
.ab-why-card p {
margin: 0;
font-size: 14px;
line-height: 1.75;
color: var(--ab-muted);
}
/* ---------------- CTA STRIP ---------------- */
.ab-cta {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
margin-top: 46px;
padding: 42px 46px;
background: linear-gradient(135deg, #07254a 0%, #0c2547 100%);
border-radius: 8px;
overflow: hidden;
}
.ab-cta::after {
content: "";
position: absolute;
right: -70px;
top: -70px;
width: 240px;
height: 240px;
border-radius: 50%;
background: rgba(224, 138, 44, 0.16);
pointer-events: none;
}
.ab-cta-text {
position: relative;
z-index: 1;
min-width: 0;
}
.ab-cta-label {
display: block;
margin-bottom: 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 2.2px;
color: #ffffff;
}
.ab-cta-text h3 {
margin: 0;
max-width: 560px;
font-size: 30px;
font-weight: 600;
line-height: 1.3;
color: #ffffff;
}
.ab-cta-actions {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 12px;
flex-shrink: 0;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.ab-who-grid {
gap: 44px;
}
.ab-who-title {
font-size: 36px;
}
.ab-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ab-why-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.ab-who {
padding: 44px 0 60px;
}
.ab-who-grid {
grid-template-columns: 1fr;
}
.ab-who-visual {
min-height: 0;
padding: 0 0 40px 24px;
max-width: 620px;
}
.ab-main-image {
height: 460px;
}
.ab-cta {
flex-direction: column;
align-items: flex-start;
padding: 34px 28px;
}
}
@media (max-width: 560px) {
.ab-page {
padding-top: 14px;
}
.ab-container {
width: calc(100% - 24px);
}
.ab-breadcrumb {
padding: 13px 14px;
font-size: 13px;
}
.ab-who {
padding: 34px 0 48px;
}
.ab-who-title {
font-size: 28px;
}
.ab-who-text {
font-size: 14px;
}
.ab-stat-number {
font-size: 27px;
}
.ab-actions {
flex-direction: column;
}
.ab-btn {
width: 100%;
min-width: 0;
}
.ab-who-visual {
padding: 0 0 30px 14px;
}
.ab-who-visual::before {
right: -6px;
height: 380px;
}
.ab-main-image {
height: 340px;
}
.ab-small-image {
width: 150px;
height: 135px;
border-width: 4px;
}
.ab-rating {
top: 16px;
right: 14px;
padding: 10px 12px;
}
.ab-why {
padding: 52px 0 58px;
}
.ab-why-title {
font-size: 26px;
}
.ab-why-grid {
grid-template-columns: 1fr;
}
.ab-cta {
margin-top: 34px;
padding: 28px 20px;
}
.ab-cta-text h3 {
font-size: 23px;
}
.ab-cta-actions {
width: 100%;
flex-direction: column;
}
}
/* =========================================================
WHO WE ARE (ABOUT PAGE)
========================================================= */
.who-we-are-section {
position: relative;
width: 100%;
padding: 105px 0 100px;
background: #ffffff;
color: #ffffff;
overflow: hidden;
}
.who-we-are-container {
width: min(1305px, 92%);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
gap: 55px;
align-items: center;
}
.who-we-are-content {
min-width: 0;
}
.who-we-are-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: #c99d55;
font-family: "Poppins", sans-serif;
font-size: 10px;
font-weight: 600;
line-height: 1;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.who-we-are-line {
display: block;
width: 32px;
height: 1px;
background: #aa8245;
}
.who-we-are-title {
margin: 0;
max-width: 700px;
color: #000000;
font-family: "Poppins", sans-serif;
font-size: 55px;
font-weight: 400;
line-height: 1.08;
letter-spacing: -2.5px;
}
.who-we-are-title em {
color: #d4aa67;
font-style: italic;
}
.who-we-are-text {
max-width: 690px;
margin: 30px 0 0;
color: #a79d92;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.72;
}
.who-we-are-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 25px;
margin-top: 42px;
padding-top: 27px;
border-top: 1px solid rgba(180, 143, 90, 0.2);
}
.who-we-are-stat {
min-width: 0;
}
.who-we-are-stat-number {
display: flex;
align-items: baseline;
color: #d5aa66;
font-family: "Poppins", sans-serif;
font-size: 34px;
font-weight: 400;
line-height: 1;
letter-spacing: -1.5px;
}
.who-we-are-stat-number > span:last-child {
font-size: 22px;
margin-left: 1px;
}
.who-we-are-stat-label {
margin-top: 10px;
color: #756b60;
font-family: "Poppins", sans-serif;
font-size: 8px;
font-weight: 500;
line-height: 1.45;
letter-spacing: 1.15px;
text-transform: uppercase;
}
.who-we-are-visual {
position: relative;
width: 100%;
min-height: 720px;
}
.who-we-are-main-image {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 720px;
overflow: hidden;
border-radius: 3px;
background: #151210;
}
.who-we-are-main-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.who-we-are-main-image::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(8, 6, 5, 0.1) 0%,
rgba(8, 6, 5, 0) 45%,
rgba(8, 6, 5, 0.18) 100%
);
}
.who-we-are-rating {
position: absolute;
z-index: 3;
top: 25px;
right: 25px;
min-width: 135px;
padding: 17px 18px;
background: rgba(12, 9, 8, 0.9);
border-radius: 3px;
}
.who-we-are-rating-stars {
margin-bottom: 9px;
color: #d4a45b;
font-size: 14px;
letter-spacing: 2px;
line-height: 1;
}
.who-we-are-rating-text {
color: #c5a36e;
font-family: "Poppins", sans-serif;
font-size: 9px;
font-weight: 500;
letter-spacing: 1px;
}
.who-we-are-small-image {
position: absolute;
z-index: 5;
left: -24px;
bottom: 10px;
width: 210px;
height: 205px;
overflow: hidden;
border: 1px solid rgba(207, 170, 104, 0.18);
border-radius: 3px;
background: #151210;
}
.who-we-are-small-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.who-we-are-small-image::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0.18) 100%
);
}
/* =========================================================
OUR JOURNEY
========================================================= */
.our-journey-section {
position: relative;
width: 100%;
padding: 105px 0 95px;
background: #0c0a09;
color: #ffffff;
overflow: hidden;
}
.our-journey-container {
width: min(1305px, 92%);
margin: 0 auto;
}
.our-journey-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: #c59a54;
font-family: "Poppins", sans-serif;
font-size: 10px;
font-weight: 600;
line-height: 1;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.our-journey-line {
display: block;
width: 32px;
height: 1px;
background: #a77e40;
}
.our-journey-title {
margin: 0 0 56px;
color: #f5f1eb;
font-family: "Poppins", sans-serif;
font-size: clamp(48px, 4.2vw, 60px);
font-weight: 400;
line-height: 1;
letter-spacing: -2.5px;
}
.our-journey-title em {
color: #d3aa69;
font-style: italic;
}
.our-journey-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
width: 100%;
border: 1px solid rgba(188, 151, 96, 0.25);
border-radius: 3px;
overflow: hidden;
}
.our-journey-card {
min-height: 230px;
padding: 25px 24px 28px;
background: rgba(15, 12, 10, 0.65);
border-right: 1px solid rgba(188, 151, 96, 0.2);
transition: background 0.3s ease;
}
.our-journey-card:last-child {
border-right: none;
}
.our-journey-card:hover {
background: rgba(28, 22, 17, 0.85);
}
.our-journey-year {
margin-bottom: 22px;
color: #805f2d;
font-family: "Poppins", sans-serif;
font-size: 35px;
font-weight: 400;
line-height: 1;
letter-spacing: -1px;
transition: color 0.3s ease;
}
.our-journey-card:hover .our-journey-year {
color: #c99b50;
}
.our-journey-card-title {
margin: 0 0 14px;
color: #f1ece5;
font-family: "Poppins", sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.3px;
}
.our-journey-card-text {
margin: 0;
color: #8f857a;
font-family: "Poppins", sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 1.65;
}
/* =========================================================
HOW WE OPERATE
========================================================= */
.how-we-operate-section {
position: relative;
width: 100%;
padding: 110px 0 105px;
background: #0c0a09;
color: #ffffff;
overflow: hidden;
}
.how-we-operate-container {
width: min(1305px, 92%);
margin: 0 auto;
}
.how-we-operate-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 22px;
color: #c69b55;
font-family: "Poppins", sans-serif;
font-size: 10px;
font-weight: 600;
line-height: 1;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.how-we-operate-line {
display: block;
width: 32px;
height: 1px;
background: #a47b3e;
}
.how-we-operate-title {
margin: 0 0 58px;
text-align: center;
color: #f5f0e9;
font-family: "Poppins", sans-serif;
font-size: clamp(48px, 4vw, 59px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -2.5px;
}
.how-we-operate-title em {
color: #d4aa68;
font-style: italic;
}
.how-we-operate-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
border: 1px solid rgba(188, 151, 96, 0.25);
border-radius: 3px;
overflow: hidden;
}
.how-we-operate-card {
position: relative;
min-height: 205px;
padding: 28px 28px 30px;
background: rgba(14, 11, 10, 0.75);
border-right: 1px solid rgba(188, 151, 96, 0.2);
border-bottom: 1px solid rgba(188, 151, 96, 0.2);
transition: background 0.3s ease;
}
.how-we-operate-card:nth-child(3n) {
border-right: none;
}
.how-we-operate-card:nth-child(n + 4) {
border-bottom: none;
}
.how-we-operate-card:hover {
background: rgba(29, 23, 18, 0.9);
}
.how-we-operate-icon {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
margin-bottom: 27px;
border: 1px solid rgba(181, 137, 67, 0.55);
border-radius: 50%;
color: #c99a4e;
font-family: "Poppins", sans-serif;
font-size: 22px;
line-height: 1;
transition: all 0.3s ease;
}
.how-we-operate-card:hover .how-we-operate-icon {
background: rgba(198, 153, 80, 0.1);
border-color: #c99a4e;
transform: translateY(-2px);
}
.how-we-operate-card h3 {
margin: 0 0 13px;
color: #eee8e0;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.3px;
}
.how-we-operate-card p {
max-width: 390px;
margin: 0;
color: #92887d;
font-family: "Poppins", sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 1.65;
}
/* =========================================================
VISIT US
========================================================= */
.visit-us-section {
position: relative;
width: 100%;
background: #f3eee4;
color: #171310;
overflow: hidden;
}
.visit-us-container {
width: min(1305px, 92%);
min-height: 620px;
margin: 0 auto;
padding: 90px 0 100px;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(500px, 0.95fr);
column-gap: 70px;
align-items: center;
}
.visit-us-content {
max-width: 650px;
}
.visit-us-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
color: #6c6259;
font-family: "Poppins", sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.visit-us-line {
width: 32px;
height: 1px;
background: #9d958d;
}
.visit-us-title {
margin: 0 0 24px;
color: #171310;
font-family: "Poppins", sans-serif;
font-size: clamp(48px, 4vw, 60px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -2.5px;
}
.visit-us-title em {
color: #b37d35;
font-style: italic;
}
.visit-us-description {
max-width: 650px;
margin: 0 0 32px;
color: #716961;
font-family: "Poppins", sans-serif;
font-size: 14px;
line-height: 1.65;
}
.visit-us-details {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 34px;
}
.visit-us-detail {
display: flex;
align-items: flex-start;
gap: 12px;
}
.visit-us-bullet {
flex: 0 0 6px;
width: 6px;
height: 6px;
margin-top: 6px;
border-radius: 50%;
background: #bb8134;
}
.visit-us-detail strong {
display: block;
margin-bottom: 4px;
color: #1d1814;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 600;
}
.visit-us-detail p {
margin: 0;
color: #746b63;
font-family: "Poppins", sans-serif;
font-size: 12px;
line-height: 1.5;
}
.visit-us-buttons {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.visit-us-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
min-height: 46px;
padding: 0 23px;
border-radius: 30px;
text-decoration: none;
font-family: "Poppins", sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.8px;
transition: all 0.3s ease;
}
.visit-us-btn-primary {
background: #171310;
color: #ffffff;
border: 1px solid #171310;
}
.visit-us-btn-primary:hover {
background: #b9813b;
border-color: #b9813b;
color: #ffffff;
}
.visit-us-btn-secondary {
background: transparent;
color: #171310;
border: 1px solid #bbb2a7;
}
.visit-us-btn-secondary:hover {
background: #171310;
border-color: #171310;
color: #ffffff;
}
.visit-us-visual {
position: relative;
min-height: 510px;
width: 100%;
}
.visit-us-image {
position: absolute;
overflow: hidden;
border-radius: 3px;
}
.visit-us-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.visit-us-image:hover img {
transform: scale(1.03);
}
.visit-us-image-main {
top: 0;
left: 0;
width: 68%;
height: 410px;
z-index: 1;
}
.visit-us-image-small {
right: 0;
bottom: 0;
width: 52%;
height: 410px;
z-index: 2;
}
/* =========================================================
FEATURED TESTIMONIAL
========================================================= */
.featured-testimonial-section {
position: relative;
width: 100%;
min-height: 570px;
display: flex;
align-items: center;
justify-content: center;
background: #0b0908;
color: #f4eee7;
overflow: hidden;
}
.featured-testimonial-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(196, 158, 99, 0.18);
}
.featured-testimonial-container {
width: min(950px, 90%);
margin: 0 auto;
padding: 85px 0;
text-align: center;
}
.featured-testimonial-stars {
margin-bottom: 30px;
color: #d0a45d;
font-family: "Poppins", sans-serif;
font-size: 17px;
line-height: 1;
letter-spacing: 2px;
}
.featured-testimonial-quote {
max-width: 850px;
margin: 0 auto 32px;
padding: 0;
color: #f3eee8;
font-family: "Poppins", sans-serif;
font-size: clamp(32px, 3vw, 43px);
font-weight: 400;
font-style: italic;
line-height: 1.13;
letter-spacing: -1.1px;
}
.featured-testimonial-client {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 48px;
color: #c79b57;
font-family: "Poppins", sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
line-height: 1.5;
text-transform: uppercase;
}
.featured-testimonial-separator {
color: #8f6d3e;
font-size: 13px;
}
.featured-testimonial-links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 35px;
}
.featured-testimonial-links a {
position: relative;
color: #84796e;
font-family: "Poppins", sans-serif;
font-size: 11px;
font-weight: 400;
text-decoration: none;
transition: color 0.3s ease;
}
.featured-testimonial-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 1px;
background: #c79b57;
transition: width 0.3s ease;
}
.featured-testimonial-links a:hover {
color: #d0a45d;
}
.featured-testimonial-links a:hover::after {
width: 100%;
}
/* =========================================================
PRODUCTS HERO
========================================================= */
.products-hero-section {
position: relative;
width: 100%;
min-height: 520px;
display: flex;
align-items: center;
overflow: hidden;
background-color: #0d0a09;
background-image: url("/images/products/products-hero.jpg");
background-size: cover;
background-position: center;
}
.products-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
90deg,
rgba(8, 6, 5, 0.95) 0%,
rgba(8, 6, 5, 0.84) 38%,
rgba(8, 6, 5, 0.6) 70%,
rgba(8, 6, 5, 0.82) 100%
);
}
.products-hero-container {
position: relative;
z-index: 2;
width: min(1300px, 92%);
margin: 0 auto;
padding: 75px 0;
}
.products-hero-content {
max-width: 780px;
}
.products-hero-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 25px;
color: #c99b58;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.products-hero-line {
width: 40px;
height: 1px;
background: #c99b58;
}
.products-hero-title {
margin: 0;
color: #f5f0e9;
font-family: "Poppins", sans-serif;
font-size: clamp(55px, 5.2vw, 78px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -2.8px;
}
.products-hero-description {
max-width: 730px;
margin: 30px 0 0;
color: #bdb2a5;
font-family: "Poppins", sans-serif;
font-size: 15px;
line-height: 1.65;
}
.products-hero-buttons {
display: flex;
align-items: center;
gap: 12px;
margin-top: 35px;
}
.products-hero-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 22px;
border-radius: 30px;
text-decoration: none;
font-family: "Poppins", sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
transition: 0.3s ease;
}
.products-hero-btn-primary {
color: #16110c;
background: #d2a052;
border: 1px solid #d2a052;
}
.products-hero-btn-primary:hover {
color: #16110c;
background: #dfb16a;
border-color: #dfb16a;
transform: translateY(-2px);
}
.products-hero-btn-secondary {
color: #eee7df;
background: transparent;
border: 1px solid rgba(216, 193, 157, 0.35);
}
.products-hero-btn-secondary:hover {
color: #d6a65c;
border-color: #d6a65c;
transform: translateY(-2px);
}
.products-hero-arrow {
font-size: 15px;
transition: 0.3s ease;
}
.products-hero-btn:hover .products-hero-arrow {
transform: translate(3px, -2px);
}
/* =========================================================
PRODUCTS LISTING PAGE (pl-*)
Main CSS me ye 4 purane blocks hata do:
1) PRODUCTS HERO
2) PRODUCTS FILTER
3) PRODUCT CATEGORY CARDS (DWPC)
4) QUICK SURFACE SELECTOR (DWQS) (uske andar ka @media bhi)
Aur unki jagah ye poora block paste karo.
Colors badalne ho to sirf neeche ke variables badlo.
========================================================= */
.pl-page {
/* --pl-bg: #fdf8ef; */
--pl-band: #65676b1c;
--pl-card: #ffffff;
--pl-cream: #fff7ea;
--pl-border: #e6dfd0;
--pl-brown: #5c1f0b;
--pl-brown-dark: #451507;
--pl-orange: #e08a2c;
--pl-green: #22b455;
--pl-green-dark: #1a9446;
--pl-text: #1f2937;
--pl-muted: #6b7280;
background: var(--pl-bg);
color: var(--pl-text);
font-family: "Poppins", sans-serif;
padding-top: 22px;
}
.pl-container {
width: min(1280px, 92%);
margin: 0 auto;
}
/* ---------------- BREADCRUMB ---------------- */
.pl-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 18px 26px;
background: #ffffff;
border: 1px solid #cdcdcd;
font-size: 14px;
color: var(--pl-muted);
margin-top: 20px;
}
.pl-breadcrumb a {
color: #07254a;
font-weight: 500;
transition: color 0.2s ease;
}
.pl-breadcrumb a:hover {
color: var(--pl-orange);
}
.pl-bc-sep {
color: #9ca3af;
}
.pl-breadcrumb strong {
font-weight: 400;
color: var(--pl-text);
}
/* ---------------- PRODUCTS BAND ---------------- */
.pl-band {
margin-top: 22px;
padding: 60px 0 70px;
background: var(--pl-band);
}
.pl-heading-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 38px;
}
.pl-title {
margin: 0;
font-size: 32px;
font-weight: 600;
line-height: 1.2;
color: var(--pl-text);
}
.pl-title::after {
content: "";
display: block;
width: 54px;
height: 3px;
margin-top: 10px;
border-radius: 3px;
background: #07254a;
}
.pl-search-box {
width: 340px;
max-width: 100%;
height: 46px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
background: #ffffff;
border: 1px solid #07254a;
border-radius: 30px;
color: var(--pl-muted);
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.pl-search-box:focus-within {
border-color: var(--pl-orange);
box-shadow: 0 0 0 3px rgba(224, 138, 44, 0.14);
}
.pl-search-box input {
width: 100%;
height: 100%;
border: 0;
outline: 0;
background: transparent;
font-family: "Poppins", sans-serif;
font-size: 14px;
color: var(--pl-text);
}
.pl-search-box input::placeholder {
color: #a3a8b0;
opacity: 1;
}
/* ---------------- GRID : 4 COLUMNS ---------------- */
.pl-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.pl-card {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--pl-card);
border: 1px solid var(--pl-border);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.pl-card:hover {
transform: translateY(-4px);
border-color: #ffffff;
box-shadow: 0 14px 30px rgba(92, 31, 11, 0.12);
}
.pl-card-image {
display: block;
height: 260px;
overflow: hidden;
background: #f1eee8;
}
.pl-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.pl-card:hover .pl-card-image img {
transform: scale(1.06);
}
.pl-card-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
text-align: center;
font-size: 15px;
color: var(--pl-muted);
}
.pl-card-title {
margin: 0;
padding: 16px 14px 14px;
text-align: center;
font-size: 17px;
font-weight: 600;
line-height: 1.35;
color: var(--pl-text);
}
.pl-card-title a {
color: inherit;
transition: color 0.2s ease;
}
.pl-card-title a:hover {
color: #07254a;
}
.pl-card-actions {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 0 12px 14px;
}
.pl-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 44px;
padding: 0 8px;
border-radius: 5px;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.1;
color: #ffffff;
white-space: nowrap;
text-decoration: none;
transition:
background 0.2s ease,
transform 0.2s ease;
}
.pl-btn svg {
flex-shrink: 0;
}
.pl-btn:hover {
transform: translateY(-1px);
}
.pl-btn-wa {
background: var(--pl-green);
}
.pl-btn-wa:hover {
background: var(--pl-green-dark);
}
.pl-btn-quote {
background: #07254a;
}
.pl-btn-quote:hover {
background: #07254a;
}
.pl-no-result,
.pl-empty {
padding: 60px 20px;
text-align: center;
background: #ffffff;
border: 1px solid var(--pl-border);
color: var(--pl-muted);
font-size: 15px;
}
.pl-empty h3 {
margin: 0 0 8px;
font-size: 22px;
color: var(--pl-text);
}
.pl-empty p {
margin: 0;
}
.pl-no-result {
margin-top: 10px;
}
/* ---------------- QUICK SURFACE SELECTOR ---------------- */
.pl-selector {
padding: 80px 0 90px;
background: var(--pl-bg);
}
.pl-selector-heading {
text-align: center;
margin-bottom: 40px;
}
.pl-selector-label {
display: inline-block;
margin-bottom: 14px;
padding: 6px 16px;
background: #ffffff;
border: 1px solid #102c36;
border-radius: 30px;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
color: #102c36;
}
.pl-selector-heading h2 {
margin: 0;
font-size: 38px;
font-weight: 600;
line-height: 1.2;
color: var(--pl-text);
}
.pl-selector-heading h2 span {
color: #102c36;
}
.pl-selector-heading p {
margin: 14px 0 0;
font-size: 15px;
color: var(--pl-muted);
}
.pl-table-wrapper {
width: 100%;
overflow-x: auto;
background: #ffffff;
border: 1px solid var(--pl-border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.pl-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.pl-table thead th {
padding: 18px 20px;
background: #102c36;
text-align: left;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
color: #ffffff;
}
.pl-table tbody td {
padding: 18px 20px;
border-bottom: 1px solid #102c36;
font-size: 14px;
line-height: 1.5;
color: #4b5563;
}
.pl-table tbody tr:last-child td {
border-bottom: 0;
}
.pl-table tbody tr:nth-child(even) {
background: #fdfaf3;
}
.pl-table tbody tr:hover {
background: var(--pl-cream);
}
.pl-table tbody td strong {
font-size: 15px;
font-weight: 600;
color: var(--pl-text);
}
.pl-table .pl-rate {
font-weight: 600;
color: #102c36;
white-space: nowrap;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.pl-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pl-card-image {
height: 240px;
}
}
@media (max-width: 820px) {
.pl-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.pl-selector-heading h2 {
font-size: 30px;
}
}
@media (max-width: 560px) {
.pl-page {
padding-top: 14px;
}
.pl-container {
width: calc(100% - 24px);
}
.pl-breadcrumb {
padding: 13px 14px;
font-size: 13px;
}
.pl-band {
padding: 40px 0 50px;
}
.pl-title {
font-size: 26px;
}
.pl-search-box {
width: 100%;
}
.pl-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.pl-card-image {
height: 250px;
}
.pl-selector {
padding: 55px 0 60px;
}
.pl-selector-heading h2 {
font-size: 25px;
}
}
/* =========================================================
ARCHITECTS & DESIGNERS - HERO
========================================================= */
/* =========================================================
DELHI WOOD
ARCHITECTS & DESIGNERS PAGE - PREMIUM UI
========================================================= */
.ad-premium-container {
width: min(1320px, calc(100% - 48px));
margin: 0 auto;
}
/* =========================================================
HERO
========================================================= */
/* HERO FACTS */
.ad-premium-hero-facts {
display: flex;
gap: 45px;
margin-top: 45px;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ad-premium-hero-facts div {
display: flex;
flex-direction: column;
gap: 5px;
}
.ad-premium-hero-facts strong {
color: #d5a653;
font-size: 22px;
font-weight: 500;
}
.ad-premium-hero-facts span {
color: #82776d;
font-size: 8px;
letter-spacing: 0.8px;
text-transform: uppercase;
}
/* HERO RIGHT */
.ad-premium-hero-visual {
position: relative;
min-height: 510px;
}
.ad-premium-visual-main {
position: absolute;
top: 0;
right: 0;
width: 92%;
height: 100%;
overflow: hidden;
border-radius: 5px;
background: #29221c;
}
.ad-premium-visual-main img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.ad-premium-visual-main::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(15, 10, 7, 0.25));
}
.ad-premium-rating {
position: absolute;
top: 24px;
right: 24px;
z-index: 3;
padding: 15px 18px;
background: #fff;
border-radius: 5px;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.14);
}
.ad-premium-rating span {
display: block;
margin-bottom: 5px;
color: #d27719;
font-size: 10px;
letter-spacing: 1.3px;
}
.ad-premium-rating strong {
color: #682404;
font-size: 9px;
}
/* FLOATING CARD */
.ad-premium-floating-card {
position: absolute;
left: 0;
bottom: 25px;
z-index: 5;
width: 190px;
padding: 25px;
background: #fbf6ed;
border-bottom: 3px solid #d48b32;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.ad-premium-floating-label {
display: block;
margin-bottom: 15px;
color: #bf7f2e;
font-size: 8px;
letter-spacing: 1.7px;
}
.ad-premium-floating-card strong {
display: block;
color: #172139;
font-size: 20px;
font-weight: 500;
line-height: 1.25;
}
.ad-premium-floating-card a {
display: inline-block;
margin-top: 18px;
color: #702806;
font-size: 10px;
font-weight: 600;
}
/* =========================================================
INTRO STRIP
========================================================= */
.ad-intro-strip {
background: #d5a653;
}
.ad-intro-strip-inner {
min-height: 82px;
display: grid;
grid-template-columns: 220px 1fr;
align-items: center;
gap: 35px;
}
.ad-intro-strip-inner > span {
color: #4e2e13;
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
}
.ad-intro-strip-inner p {
max-width: 850px;
margin: 0;
color: #483421;
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
COMMON SECTION LABEL
========================================================= */
.ad-premium-section-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color: #102c36;
font-size: 9px;
font-weight: 600;
letter-spacing: 2.4px;
text-transform: uppercase;
}
.ad-premium-section-label span {
width: 32px;
height: 1px;
background: #c58d46;
}
/* =========================================================
BENEFITS
========================================================= */
.ad-new-benefits {
padding: 105px 0 120px;
/* background: #fbf7ef; */
}
.ad-new-section-heading {
display: grid;
grid-template-columns: 1fr 0.55fr;
align-items: end;
gap: 60px;
margin-bottom: 55px;
}
.ad-new-section-heading h2 {
margin: 0;
color: #142139;
font-size: clamp(39px, 3.6vw, 57px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -2px;
}
.ad-new-section-heading h2 em {
color: #102c36;
font-style: normal;
}
.ad-new-section-heading > p {
margin: 0;
color: #8b7d6d;
font-size: 12px;
line-height: 1.7;
}
.ad-new-benefits-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid #979797;
border-left: 1px solid #b5b5b5;
}
.ad-new-benefit-card {
position: relative;
min-height: 285px;
padding: 28px;
background: rgba(255, 255, 255, 0.45);
border-right: 1px solid #979797;
border-bottom: 1px solid #979797;
transition: 0.3s ease;
}
.ad-new-benefit-card:hover {
z-index: 2;
background: #fff;
transform: translateY(-5px);
box-shadow: 0 18px 40px rgba(64, 44, 25, 0.09);
}
.ad-new-card-number {
position: absolute;
top: 22px;
right: 23px;
color: #c4ae93;
font-size: 9px;
letter-spacing: 1px;
}
.ad-new-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 45px;
border: 1px solid #102c36;
color: #102c36;
font-size: 17px;
}
.ad-new-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.ad-new-benefit-card h3 {
margin: 0 0 12px;
color: #18233a;
font-size: 16px;
font-weight: 500;
}
.ad-new-benefit-card p {
margin: 0;
color: #897b6c;
font-size: 11px;
line-height: 1.75;
}
/* =========================================================
PRICING
========================================================= */
.ad-new-pricing {
padding: 105px 0 120px;
background: #cfcfcf;
color: #fff;
}
.ad-new-pricing-head {
display: grid;
grid-template-columns: 1fr 0.55fr;
align-items: end;
gap: 60px;
margin-bottom: 55px;
}
.ad-new-pricing .ad-premium-section-label {
color: #07254a;
}
.ad-new-pricing-copy h2 {
margin: 0;
color: #07254a;
font-size: clamp(40px, 3.7vw, 58px);
font-weight: 300;
line-height: 1.1;
letter-spacing: -2.2px;
}
.ad-new-pricing-copy h2 em {
color: #07254a;
font-style: normal;
}
.ad-new-pricing-head > p {
margin: 0;
color: #9c9186;
font-size: 12px;
line-height: 1.75;
}
.ad-new-pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.ad-new-price-card {
position: relative;
min-height: 490px;
display: flex;
flex-direction: column;
padding: 32px;
border: 1px solid #3d342d;
background: #07254a;
}
.ad-new-price-card-featured {
background: #ffffff;
border-color: #757575;
color: #15110e;
transform: translateY(-12px);
}
.ad-price-popular {
position: absolute;
top: 0;
right: 0;
padding: 9px 15px;
background: #07254a;
color: #ffffff;
font-size: 7px;
font-weight: 700;
letter-spacing: 1.2px;
}
.ad-price-index {
margin-bottom: 42px;
color: #b99560;
font-size: 9px;
}
.ad-new-price-card h3 {
margin: 0;
color: #f7f1e9;
font-size: 26px;
font-weight: 400;
}
.ad-new-price-card-featured h3 {
color: #1d2536;
}
.ad-price-subtitle {
min-height: 42px;
margin: 8px 0 22px;
color: #887d73;
font-size: 11px;
line-height: 1.6;
}
.ad-price-value {
display: flex;
align-items: baseline;
margin-bottom: 25px;
color: #d5a653;
font-size: 37px;
font-weight: 500;
}
.ad-price-value small {
margin-right: 4px;
font-size: 17px;
}
.ad-price-value span {
margin-left: 7px;
color: #85796f;
font-size: 9px;
font-weight: 400;
}
.ad-new-price-card ul {
flex: 1;
margin: 0;
padding: 0;
list-style: none;
}
.ad-new-price-card li {
position: relative;
padding: 12px 0 12px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: #aca097;
font-size: 11px;
}
.ad-new-price-card-featured li {
border-color: #dfd1be;
color: #5d534a;
}
.ad-new-price-card li::before {
content: "✓";
position: absolute;
left: 0;
color: #d5a653;
}
.ad-new-price-card > a {
min-height: 45px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 25px;
padding: 0 18px;
border: 1px solid #625549;
color: #eee7df;
font-size: 9px;
font-weight: 600;
letter-spacing: 1.2px;
}
.ad-new-price-card-featured > a {
background: #07254a;
border-color: #07254a;
color: #fff;
}
/* =========================================================
TECH LIBRARY
========================================================= */
.ad-new-tech {
padding: 115px 0;
/* background: #f9f5ed; */
}
.ad-new-tech-grid {
display: grid;
grid-template-columns:
minmax(0, 0.9fr)
minmax(450px, 1.1fr);
gap: 90px;
align-items: start;
}
.ad-new-tech-left h2 {
margin: 0;
color: #15223a;
font-size: clamp(40px, 3.8vw, 57px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -2px;
}
.ad-new-tech-left h2 em {
color: #07254a;
font-style: normal;
}
.ad-new-tech-intro {
max-width: 550px;
margin: 22px 0 35px;
color: #8c7f71;
font-size: 12px;
line-height: 1.7;
}
.ad-new-library {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid #102c36;
border-left: 1px solid #102c36;
}
.ad-new-library-item {
min-height: 130px;
display: flex;
gap: 16px;
padding: 23px;
border-right: 1px solid #102c36;
border-bottom: 1px solid #102c36;
}
.ad-new-library-icon {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #102c36;
color: #07254a;
}
.ad-new-library-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
}
.ad-new-library-item h3 {
margin: 2px 0 6px;
color: #1e293b;
font-size: 13px;
font-weight: 500;
}
.ad-new-library-item p {
margin: 0;
color: #8a7d70;
font-size: 9px;
line-height: 1.6;
}
/* MOCKUP */
.ad-new-mockup {
margin-top: 25px;
padding: 25px;
border-left: 3px solid #07254a;
background: #ededed;
}
.ad-new-mockup > span {
color: #07254a;
font-size: 8px;
font-weight: 600;
letter-spacing: 1.5px;
}
.ad-new-mockup h3 {
margin: 9px 0;
color: #172239;
font-size: 18px;
font-weight: 500;
}
.ad-new-mockup p {
margin: 0;
color: #726456;
font-size: 10px;
line-height: 1.7;
}
/* =========================================================
REGISTRATION
========================================================= */
.ad-new-registration {
padding: 42px;
background: #fff;
border: 1px solid #07254a;
box-shadow: 0 22px 50px rgba(61, 42, 25, 0.08);
}
.ad-new-registration-label {
margin-bottom: 17px;
color: #102c36;
font-size: 8px;
font-weight: 700;
letter-spacing: 2px;
}
.ad-new-registration h2 {
max-width: 500px;
margin: 0;
color: #15223a;
font-size: 34px;
font-weight: 500;
line-height: 1.18;
letter-spacing: -1.2px;
}
.ad-new-registration-intro {
margin: 16px 0 28px;
color: #8a7c6e;
font-size: 10px;
line-height: 1.7;
}
.ad-new-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.ad-new-form-group {
margin-bottom: 17px;
}
.ad-new-form-group label {
display: block;
margin-bottom: 7px;
color: #594d43;
font-size: 9px;
font-weight: 500;
}
.ad-new-form-group input,
.ad-new-form-group select,
.ad-new-form-group textarea {
width: 100%;
border: 1px solid #ddd4c9;
border-radius: 3px;
background: #fbfaf8;
color: #25211d;
font-family: "Poppins", sans-serif;
font-size: 11px;
outline: none;
}
.ad-new-form-group input,
.ad-new-form-group select {
height: 44px;
padding: 0 13px;
}
.ad-new-form-group textarea {
min-height: 105px;
padding: 12px 13px;
resize: vertical;
}
.ad-new-form-group input:focus,
.ad-new-form-group select:focus,
.ad-new-form-group textarea:focus {
border-color: #c9964e;
background: #fff;
}
.ad-new-registration-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 5px;
}
.ad-new-registration-footer p {
max-width: 260px;
margin: 0;
color: #9a8c7f;
font-size: 8px;
line-height: 1.6;
}
.ad-new-registration-footer button {
min-height: 46px;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 0 22px;
border: 0;
border-radius: 23px;
background: #07254a;
color: #fff;
font-size: 8px;
font-weight: 600;
letter-spacing: 1.1px;
cursor: pointer;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.ad-premium-hero-grid {
gap: 45px;
}
.ad-new-tech-grid {
gap: 45px;
}
}
@media (max-width: 900px) {
.ad-premium-hero-grid {
grid-template-columns: 1fr;
padding: 65px 0 85px;
}
.ad-premium-hero-visual {
min-height: 520px;
}
.ad-premium-hero-facts {
max-width: 600px;
}
.ad-new-section-heading,
.ad-new-pricing-head {
grid-template-columns: 1fr;
gap: 20px;
}
.ad-new-benefits-grid {
grid-template-columns: 1fr 1fr;
}
.ad-new-pricing-grid {
grid-template-columns: 1fr;
}
.ad-new-price-card-featured {
transform: none;
}
.ad-new-tech-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.ad-premium-container {
width: calc(100% - 30px);
}
.ad-premium-hero {
min-height: auto;
}
.ad-premium-hero-grid {
min-height: auto;
padding: 55px 0 75px;
}
.ad-premium-hero-content h1 {
font-size: 40px;
letter-spacing: -1.5px;
}
.ad-premium-actions {
align-items: stretch;
flex-direction: column;
}
.ad-premium-btn {
width: 100%;
}
.ad-premium-hero-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.ad-premium-hero-facts strong {
font-size: 18px;
}
.ad-premium-hero-facts span {
font-size: 7px;
}
.ad-premium-hero-visual {
min-height: 400px;
}
.ad-premium-visual-main {
width: 100%;
}
.ad-premium-floating-card {
width: 155px;
padding: 18px;
}
.ad-premium-floating-card strong {
font-size: 17px;
}
/* strip */
.ad-intro-strip-inner {
grid-template-columns: 1fr;
gap: 7px;
padding: 20px 0;
}
/* benefits */
.ad-new-benefits {
padding: 70px 0;
}
.ad-new-benefits-grid {
grid-template-columns: 1fr;
}
.ad-new-benefit-card {
min-height: 230px;
}
/* pricing */
.ad-new-pricing {
padding: 70px 0;
}
/* technical */
.ad-new-tech {
padding: 70px 0;
}
.ad-new-library {
grid-template-columns: 1fr;
}
/* form */
.ad-new-registration {
padding: 25px 18px;
}
.ad-new-registration h2 {
font-size: 29px;
}
.ad-new-form-grid {
grid-template-columns: 1fr;
}
.ad-new-registration-footer {
align-items: stretch;
flex-direction: column;
}
.ad-new-registration-footer button {
width: 100%;
justify-content: center;
}
}
/* PARTNER BENEFITS */
.ad-benefits-section {
width: 100%;
background: #0d0a08;
padding: 105px 20px 110px;
color: #f5f0e8;
}
.ad-benefits-container {
width: 100%;
max-width: 1305px;
margin: 0 auto;
}
.ad-benefits-heading {
margin-bottom: 58px;
}
.ad-benefits-eyebrow {
display: flex;
align-items: center;
gap: 13px;
color: #c99a4d;
font-size: 12px;
font-weight: 600;
letter-spacing: 2.3px;
text-transform: uppercase;
margin-bottom: 24px;
}
.ad-benefits-line {
display: block;
width: 32px;
height: 1px;
background: #9c7131;
}
.ad-benefits-title {
margin: 0;
max-width: 760px;
font-family: "Poppins", sans-serif;
font-size: 56px;
line-height: 1.03;
font-weight: 400;
letter-spacing: -1.5px;
color: #f7f3ed;
}
.ad-benefits-title em {
color: #d3a75d;
font-weight: 400;
}
.ad-benefits-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid #393029;
border-radius: 3px;
overflow: hidden;
}
.ad-benefit-card {
position: relative;
min-height: 207px;
padding: 28px 28px 30px;
background: #0f0c0a;
border-right: 1px solid #332b25;
border-bottom: 1px solid #332b25;
transition:
background-color 0.3s ease,
transform 0.3s ease;
}
.ad-benefit-card:nth-child(3n) {
border-right: none;
}
.ad-benefit-card:nth-child(n + 4) {
border-bottom: none;
}
.ad-benefit-icon {
width: 45px;
height: 45px;
border: 1px solid #5b4121;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 26px;
color: #d2a04d;
font-size: 21px;
font-weight: 500;
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
.ad-benefit-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.ad-benefit-icon-active {
background: #d2a04d;
border-color: #d2a04d;
color: #17100a;
}
.ad-benefit-card-title {
margin: 0 0 13px;
font-family: "Poppins", sans-serif;
font-size: 21px;
line-height: 1.3;
font-weight: 600;
color: #f3eee7;
}
.ad-benefit-card-text {
margin: 0;
max-width: 360px;
font-size: 14px;
line-height: 1.65;
font-weight: 400;
color: #9d9186;
}
.ad-benefit-card:hover {
background: #15100c;
}
.ad-benefit-card:hover .ad-benefit-icon {
background: #d2a04d;
border-color: #d2a04d;
color: #17100a;
}
/* PRICING STRUCTURE */
.ad-pricing-section {
width: 100%;
background: #0b0908;
color: #f4efe7;
padding: 100px 20px 105px;
}
.ad-pricing-container {
width: 100%;
max-width: 1305px;
margin: 0 auto;
}
.ad-pricing-header {
width: 100%;
text-align: center;
margin-bottom: 58px;
}
.ad-pricing-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
color: #c89a4c;
font-size: 11px;
font-weight: 600;
letter-spacing: 2.4px;
text-transform: uppercase;
margin-bottom: 23px;
}
.ad-pricing-line {
width: 32px;
height: 1px;
background: #906c35;
}
.ad-pricing-title {
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 57px;
line-height: 1;
font-weight: 400;
letter-spacing: -1.5px;
color: #f6f1ea;
}
.ad-pricing-title em {
color: #d4aa67;
font-weight: 400;
}
.ad-pricing-description {
margin: 27px auto 0;
max-width: 800px;
color: #a99c90;
font-size: 15px;
line-height: 1.6;
font-weight: 400;
}
.ad-pricing-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}
.ad-pricing-card {
min-width: 0;
min-height: 418px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: #0e0b09;
border: 1px solid #342c26;
border-radius: 3px;
padding: 29px 28px 28px;
transition:
border-color 0.3s ease,
background-color 0.3s ease,
transform 0.3s ease;
}
.ad-pricing-card:hover {
background: #120e0b;
border-color: #6b522c;
}
.ad-pricing-card-featured {
background: linear-gradient(180deg, #17110c 0%, #100c09 100%);
border-color: #9b7132;
}
.ad-pricing-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 7px 15px;
margin-bottom: 20px;
background: #d2a354;
color: #17110a;
border-radius: 50px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
}
.ad-pricing-card-title {
margin: 0 0 7px;
font-family: "Poppins", sans-serif;
font-size: 26px;
line-height: 1.2;
font-weight: 600;
color: #f4efe8;
}
.ad-pricing-card-subtitle {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: #968a80;
}
.ad-pricing-price {
display: flex;
align-items: center;
gap: 9px;
margin-top: 22px;
margin-bottom: 24px;
font-family: "Poppins", sans-serif;
font-size: 30px;
line-height: 1;
color: #d8b272;
}
.ad-pricing-rupee {
font-family: "Poppins", sans-serif;
font-size: 19px;
font-weight: 400;
}
.ad-pricing-features {
list-style: none;
padding: 0;
margin: 0;
}
.ad-pricing-features li {
position: relative;
padding-left: 17px;
margin-bottom: 13px;
color: #aaa096;
font-size: 13px;
line-height: 1.45;
}
.ad-pricing-features li:last-child {
margin-bottom: 0;
}
.ad-pricing-features li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #d0a154;
}
.ad-pricing-btn {
width: 100%;
height: 45px;
margin-top: 30px;
padding: 0 27px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 1px solid #514338;
border-radius: 50px;
color: #eee8e1;
text-decoration: none;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
transition: all 0.3s ease;
}
.ad-pricing-btn-arrow {
position: absolute;
right: 24px;
font-size: 15px;
}
.ad-pricing-btn:hover {
background: #f0e7db;
border-color: #f0e7db;
color: #16100b;
}
.ad-pricing-btn-gold {
background: #d0a053;
border-color: #d0a053;
color: #17110b;
box-shadow: 0 10px 25px rgba(208, 160, 83, 0.15);
}
.ad-pricing-btn-gold:hover {
background: #dfb66d;
border-color: #dfb66d;
color: #17110b;
}
/* TECHNICAL LIBRARY + PARTNER REGISTRATION */
.ad-tech-section {
width: 100%;
padding: 90px 20px 100px;
background: #0d0a08;
color: #f4efe7;
}
.ad-tech-container {
width: 100%;
max-width: 1305px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
align-items: start;
}
.ad-tech-left {
min-width: 0;
}
.ad-tech-eyebrow {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 22px;
color: #c89a4c;
font-size: 11px;
font-weight: 600;
letter-spacing: 2.3px;
}
.ad-tech-line {
width: 32px;
height: 1px;
flex-shrink: 0;
background: #946e34;
}
.ad-tech-title {
margin: 0;
max-width: 650px;
font-family: "Poppins", sans-serif;
font-size: 55px;
line-height: 1.03;
font-weight: 400;
letter-spacing: -1.5px;
color: #f6f1ea;
}
.ad-tech-title em {
color: #d4aa68;
font-weight: 400;
}
.ad-tech-description {
margin: 25px 0 34px;
color: #a99d92;
font-size: 15px;
line-height: 1.65;
}
.ad-tech-library {
width: 100%;
border: 1px solid #3d332b;
border-radius: 3px;
overflow: hidden;
background: #0f0c0a;
}
.ad-tech-library-item {
display: flex;
align-items: center;
gap: 22px;
min-height: 85px;
padding: 20px 25px;
border-bottom: 1px solid #332b25;
transition: background-color 0.25s ease;
}
.ad-tech-library-item:last-child {
border-bottom: none;
}
.ad-tech-library-item:hover {
background: #15100c;
}
.ad-tech-library-icon {
width: 25px;
min-width: 25px;
display: flex;
align-items: center;
justify-content: center;
color: #d4a44f;
}
.ad-tech-library-icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.ad-tech-library-content h3 {
margin: 0 0 5px;
font-family: "Poppins", sans-serif;
font-size: 18px;
line-height: 1.25;
font-weight: 600;
color: #f1ece5;
}
.ad-tech-library-content p {
margin: 0;
color: #8f8277;
font-size: 15px;
line-height: 1.5;
}
.ad-tech-mockup {
margin-top: 31px;
padding: 26px 25px;
border: 1px solid #5a4120;
border-radius: 3px;
background: linear-gradient(120deg, #171109 0%, #18130d 100%);
}
.ad-tech-mockup h3 {
margin: 0 0 11px;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 600;
color: #f4eee6;
}
.ad-tech-mockup p {
margin: 0;
max-width: 550px;
color: #c6a971;
font-size: 13px;
line-height: 1.65;
}
.ad-registration-box {
width: 100%;
padding: 30px 28px 28px;
border: 1px solid #332b25;
border-radius: 3px;
background: #0d0a08;
}
.ad-registration-eyebrow {
margin-bottom: 13px;
color: #c89a4c;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
}
.ad-registration-title {
margin: 0 0 29px;
font-family: "Poppins", sans-serif;
font-size: 25px;
line-height: 1.25;
font-weight: 600;
color: #f4efe8;
}
.ad-registration-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ad-form-group {
width: 100%;
min-width: 0;
}
.ad-form-group input,
.ad-form-group select,
.ad-form-group textarea {
display: block;
width: 100%;
box-sizing: border-box;
border: 1px solid #40362f;
border-radius: 7px;
outline: none;
background: #120e0c;
color: #eee7df;
font-family: "Poppins", sans-serif;
font-size: 14px;
transition:
border-color 0.25s ease,
background-color 0.25s ease;
}
.ad-form-group input,
.ad-form-group select {
height: 47px;
padding: 0 16px;
}
.ad-form-group textarea {
min-height: 86px;
padding: 14px 16px;
resize: vertical;
}
.ad-form-group input::placeholder,
.ad-form-group textarea::placeholder {
color: #665b51;
opacity: 1;
}
.ad-form-group select {
cursor: pointer;
color: #e8e1d9;
}
.ad-form-group select option {
background: #120e0c;
color: #eee7df;
}
.ad-form-group input:focus,
.ad-form-group select:focus,
.ad-form-group textarea:focus {
border-color: #a67b3d;
background: #15100d;
}
.ad-form-full {
margin-top: 12px;
}
.ad-registration-footer {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.ad-registration-footer p {
margin: 0;
color: #786b5e;
font-size: 11px;
line-height: 1.5;
}
.ad-registration-btn {
min-width: 240px;
height: 44px;
padding: 0 25px;
border: none;
border-radius: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 17px;
cursor: pointer;
background: #d1a052;
color: #18110a;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.7px;
box-shadow: 0 10px 25px rgba(209, 160, 82, 0.16);
transition:
transform 0.25s ease,
background-color 0.25s ease;
}
.ad-registration-btn:hover {
background: #dfb66e;
transform: translateY(-2px);
}
.ad-registration-arrow {
font-size: 15px;
}
/* =========================================================
PROJECTS / GALLERY PAGE
========================================================= */
/* =========================================================
PROJECTS / GALLERY PAGE (pj-*)
Main CSS me ye 2 purane blocks hata do:
1) PROJECTS / GALLERY PAGE (.projects-gallery-* wale)
2) GALLERY SHOWCASE (.pg-* wale)
Aur unki jagah ye poora block paste karo.
Colors badalne ho to sirf neeche ke variables badlo.
========================================================= */
.pj-page {
/* --pj-bg: #fdf8ef; */
--pj-band: #f3ecdd;
--pj-cream: #fff7ea;
--pj-border: #e6dfd0;
--pj-brown: #5c1f0b;
--pj-brown-dark: #451507;
--pj-brown-light: #7a2d12;
--pj-orange: #e08a2c;
--pj-text: #1f2937;
--pj-muted: #6b7280;
background: var(--pj-bg);
color: var(--pj-text);
font-family: "Poppins", sans-serif;
padding-top: 22px;
width: 100%;
overflow-x: hidden;
}
.pj-container {
width: min(1280px, 92%);
margin: 0 auto;
}
.pj-label {
display: inline-block;
margin-bottom: 16px;
padding: 6px 16px;
/* background: var(--pj-cream); */
border: 1px solid #07254a;
border-radius: 30px;
font-size: 11px;
font-weight: 600;
letter-spacing: 2.2px;
color: #07254a;
}
/* ---------------- BREADCRUMB ---------------- */
.pj-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 16px 20px;
background: #ffffff;
border: 1px solid var(--pj-border);
font-size: 14px;
color: var(--pj-muted);
}
.pj-breadcrumb a {
color: #07254a;
font-weight: 500;
transition: color 0.2s ease;
}
.pj-breadcrumb a:hover {
color: var(--pj-orange);
}
.pj-bc-sep {
color: #9ca3af;
}
.pj-breadcrumb strong {
font-weight: 400;
color: var(--pj-text);
}
/* ---------------- BUTTONS ---------------- */
.pj-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 190px;
padding: 14px 26px;
border-radius: 5px;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.pj-btn:hover {
transform: translateY(-2px);
}
.pj-btn-solid {
background: #07254a;
border: 1px solid #07254a;
color: #ffffff;
}
.pj-btn-solid:hover {
background: var(--pj-brown-dark);
border-color: var(--pj-brown-dark);
}
.pj-btn-light {
background: #ffffff;
border: 1px solid #ffffff;
color: var(--pj-brown);
}
.pj-btn-light:hover {
background: #ffffff;
border-color: #ffffff;
color: #000000;
}
.pj-btn-ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.45);
color: #ffffff;
}
.pj-btn-ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #ffffff;
}
/* ---------------- BAND ---------------- */
.pj-band {
margin-top: 22px;
padding: 60px 0 84px;
/* background: var(--pj-band); */
}
.pj-heading-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 36px;
margin-bottom: 40px;
}
.pj-heading-text {
max-width: 760px;
}
.pj-title {
margin: 0;
font-size: 40px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.4px;
color: var(--pj-text);
}
.pj-title span {
color: #07254a;
}
.pj-desc {
margin: 16px 0 0;
font-size: 15px;
line-height: 1.85;
color: #4b5563;
}
/* ---------------- FILTER BAR ---------------- */
.pj-filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding-bottom: 22px;
margin-bottom: 30px;
border-bottom: 1px solid var(--pj-border);
}
.pj-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pj-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: #ffffff;
border: 1px solid var(--pj-border);
border-radius: 30px;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 500;
color: #4b5563;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.pj-chip span {
min-width: 22px;
padding: 2px 6px;
background: var(--pj-cream);
border-radius: 20px;
font-size: 11px;
font-weight: 600;
text-align: center;
color: #07254a;
transition:
background 0.2s ease,
color 0.2s ease;
}
.pj-chip:hover {
border-color: #102c36;
color: #07254a;
}
.pj-chip.active {
background: #07254a;
border-color: #07254a;
color: #ffffff;
}
.pj-chip.active span {
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
}
.pj-count {
font-size: 13px;
color: var(--pj-muted);
}
.pj-count strong {
font-size: 18px;
font-weight: 700;
color: var(--pj-brown);
}
/* ---------------- GRID ---------------- */
.pj-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.pj-card {
position: relative;
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 8px;
background: #e9e2d3;
color: #ffffff;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
.pj-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(92, 31, 11, 0.22);
}
.pj-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pj-card:hover img {
transform: scale(1.07);
}
.pj-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(30, 12, 5, 0) 38%,
rgba(30, 12, 5, 0.5) 66%,
rgba(30, 12, 5, 0.92) 100%
);
transition: background 0.35s ease;
}
.pj-card:hover .pj-card-overlay {
background: linear-gradient(
180deg,
rgba(92, 31, 11, 0.08) 20%,
rgba(30, 12, 5, 0.6) 60%,
rgba(30, 12, 5, 0.95) 100%
);
}
.pj-card-badge {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
padding: 6px 14px;
background: #07254a;
border-radius: 30px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.6px;
line-height: 1.2;
color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.pj-card-zoom {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.92);
border-radius: 50%;
color: var(--pj-brown);
opacity: 0;
transform: scale(0.8);
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
.pj-card:hover .pj-card-zoom {
opacity: 1;
transform: scale(1);
}
.pj-card-content {
position: absolute;
left: 22px;
right: 22px;
bottom: 22px;
z-index: 2;
}
.pj-card-meta {
margin-bottom: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.3px;
text-transform: uppercase;
color: #ffffff;
}
.pj-card-title {
margin: 0 0 8px;
font-size: 21px;
font-weight: 600;
line-height: 1.3;
color: #ffffff;
}
.pj-card-location {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: rgba(255, 255, 255, 0.82);
}
.pj-card-location svg {
flex-shrink: 0;
color: #ffffff;
}
.pj-card-material {
display: inline-block;
margin-top: 12px;
padding: 5px 11px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 30px;
font-size: 11px;
color: rgba(255, 255, 255, 0.88);
}
.pj-no-result {
margin-top: 10px;
padding: 60px 20px;
text-align: center;
background: #ffffff;
border: 1px solid var(--pj-border);
font-size: 15px;
color: var(--pj-muted);
}
/* ---------------- CTA STRIP ---------------- */
.pj-cta {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
margin-top: 56px;
padding: 44px 48px;
background: linear-gradient(135deg, #07254a 0%, #07254a 100%);
border-radius: 8px;
overflow: hidden;
}
.pj-cta::after {
content: "";
position: absolute;
right: -70px;
top: -70px;
width: 250px;
height: 250px;
border-radius: 50%;
background: rgba(224, 138, 44, 0.16);
pointer-events: none;
}
.pj-cta-text {
position: relative;
z-index: 1;
min-width: 0;
}
.pj-cta-label {
display: block;
margin-bottom: 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 2.2px;
color: #f6c98b;
}
.pj-cta-text h2 {
margin: 0;
max-width: 560px;
font-size: 30px;
font-weight: 600;
line-height: 1.3;
color: #ffffff;
}
.pj-cta-actions {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 12px;
flex-shrink: 0;
}
/* ---------------- LIGHTBOX ---------------- */
.pj-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 40px 70px;
background: rgba(20, 8, 3, 0.92);
}
.pj-lightbox.open {
display: flex;
}
.pj-lb-figure {
margin: 0;
max-width: 1100px;
max-height: 100%;
text-align: center;
}
.pj-lb-figure img {
display: block;
max-width: 100%;
max-height: calc(100vh - 140px);
margin: 0 auto;
border-radius: 6px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.pj-lb-figure figcaption {
margin-top: 16px;
font-size: 15px;
font-weight: 500;
color: #ffffff;
}
.pj-lb-close,
.pj-lb-nav {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease;
}
.pj-lb-close:hover,
.pj-lb-nav:hover {
background: var(--pj-orange);
}
.pj-lb-close {
top: 22px;
right: 26px;
width: 46px;
height: 46px;
font-size: 30px;
}
.pj-lb-nav {
top: 50%;
width: 48px;
height: 48px;
font-size: 32px;
transform: translateY(-50%);
}
.pj-lb-prev {
left: 20px;
}
.pj-lb-next {
right: 20px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.pj-title {
font-size: 34px;
}
.pj-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.pj-heading-row {
flex-direction: column;
align-items: flex-start;
gap: 22px;
}
.pj-cta {
flex-direction: column;
align-items: flex-start;
padding: 34px 28px;
}
}
@media (max-width: 560px) {
.pj-page {
padding-top: 14px;
}
.pj-container {
width: calc(100% - 24px);
}
.pj-breadcrumb {
padding: 13px 14px;
font-size: 13px;
}
.pj-band {
padding: 40px 0 56px;
}
.pj-title {
font-size: 27px;
}
.pj-desc {
font-size: 14px;
}
.pj-btn {
width: 100%;
min-width: 0;
}
.pj-filter-bar {
flex-direction: column;
align-items: flex-start;
}
.pj-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.pj-card {
aspect-ratio: 4 / 4.6;
}
.pj-card-zoom {
opacity: 1;
transform: scale(1);
}
.pj-cta {
margin-top: 40px;
padding: 28px 20px;
}
.pj-cta-text h2 {
font-size: 23px;
}
.pj-cta-actions {
width: 100%;
flex-direction: column;
}
.pj-lightbox {
padding: 70px 14px 30px;
}
.pj-lb-nav {
top: auto;
bottom: 16px;
transform: none;
}
.pj-lb-prev {
left: calc(50% - 60px);
}
.pj-lb-next {
right: calc(50% - 60px);
}
}
/* GALLERY SHOWCASE */
.pg-showcase-section {
width: 100%;
padding: 30px 0 90px;
background: #0d0b09;
color: #f5efe7;
}
.pg-showcase-container {
width: calc(100% - 40px);
max-width: 1305px;
margin: 0 auto;
}
.pg-filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.pg-filter-scroll {
min-width: 0;
}
.pg-filter-buttons {
display: flex;
align-items: center;
gap: 9px;
}
.pg-filter-btn {
min-height: 42px;
padding: 0 22px;
border: 1px solid #3c332b;
border-radius: 30px;
background: transparent;
color: #b8a99b;
font-family: "Poppins", sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 1.1px;
cursor: pointer;
transition: all 0.3s ease;
}
.pg-filter-btn:hover {
color: #f2e9de;
border-color: #806641;
}
.pg-filter-btn.active {
background: #d2a151;
border-color: #d2a151;
color: #17100a;
}
.pg-project-count {
flex-shrink: 0;
color: #9d7b46;
font-size: 10px;
font-weight: 500;
letter-spacing: 1.4px;
}
.pg-filter-divider {
width: 100%;
height: 1px;
margin: 30px 0 40px;
background: #28211c;
}
.pg-gallery-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.pg-gallery-column {
display: flex;
flex-direction: column;
gap: 20px;
}
.pg-project-card {
position: relative;
display: block;
width: 100%;
border-radius: 3px;
overflow: hidden;
background: #17120e;
text-decoration: none;
color: #fff;
}
.pg-project-card-small {
height: 318px;
}
.pg-project-card-medium {
height: 400px;
}
.pg-project-card-tall {
height: 562px;
}
.pg-project-card img {
position: absolute;
width: 100%;
height: 100%;
inset: 0;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pg-project-card:hover img {
transform: scale(1.045);
}
.pg-project-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(8, 6, 5, 0.04) 25%,
rgba(8, 6, 5, 0.2) 50%,
rgba(8, 6, 5, 0.9) 100%
);
transition: background 0.35s ease;
}
.pg-project-card:hover .pg-project-overlay {
background: linear-gradient(
180deg,
rgba(8, 6, 5, 0.02) 20%,
rgba(8, 6, 5, 0.15) 48%,
rgba(8, 6, 5, 0.94) 100%
);
}
.pg-project-content {
position: absolute;
left: 20px;
right: 20px;
bottom: 26px;
z-index: 2;
}
.pg-project-meta {
margin-bottom: 13px;
color: #c99a4d;
font-size: 10px;
line-height: 1.3;
font-weight: 500;
letter-spacing: 1.7px;
}
.pg-project-title {
margin: 0 0 8px;
color: #f8f2ea;
font-family: "Poppins", sans-serif;
font-size: 19px;
line-height: 1.2;
font-weight: 600;
}
.pg-project-location,
.pg-project-material {
color: #a99a8d;
font-size: 11px;
line-height: 1.5;
}
.pg-project-material {
margin-top: 13px;
}
.pg-project-card.pg-project-hidden {
display: none;
}
/* =========================================================
BLOG PAGE
========================================================= */
.dw-blog-hero {
position: relative;
min-height: 540px;
background: url("/frontend/assets/img/blog-hero.jpg") center center / cover
no-repeat;
display: flex;
align-items: center;
color: #fff;
}
.dw-blog-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(15, 11, 8, 0.94),
rgba(18, 14, 10, 0.8),
rgba(10, 8, 6, 0.92)
);
}
.dw-blog-container {
position: relative;
z-index: 2;
width: 92%;
max-width: 1300px;
margin: 0 auto;
}
.dw-blog-label {
display: flex;
align-items: center;
gap: 12px;
color: #d7aa57;
font-size: 12px;
letter-spacing: 3px;
margin-bottom: 25px;
}
.dw-blog-label span {
width: 40px;
height: 1px;
background: #d7aa57;
}
.dw-blog-hero h1 {
margin: 0;
max-width: 900px;
font-family: "Poppins", sans-serif;
font-size: 72px;
line-height: 1.07;
font-weight: 400;
color: #f6f1ec;
}
.dw-blog-hero p {
max-width: 700px;
margin-top: 28px;
font-size: 16px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.65);
}
.dw-blog-buttons {
display: flex;
gap: 15px;
margin-top: 35px;
}
.dw-blog-btn-primary,
.dw-blog-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 25px;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.3px;
text-decoration: none;
}
.dw-blog-btn-primary {
background: #d4a54d;
color: #15100b;
}
.dw-blog-btn-outline {
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
}
.dw-blog-filter {
background: #0d0a08;
padding: 35px 0 20px;
}
.dw-blog-breadcrumb {
display: flex;
gap: 10px;
margin-bottom: 35px;
font-size: 11px;
}
.dw-blog-breadcrumb a {
color: #b18b46;
text-decoration: none;
}
.dw-blog-breadcrumb span {
color: #777;
}
.dw-blog-breadcrumb strong {
color: #fff;
}
.dw-blog-categories {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dw-blog-categories button {
padding: 10px 18px;
border-radius: 30px;
border: 1px solid rgba(212, 165, 77, 0.3);
background: transparent;
color: #caaa67;
font-size: 11px;
letter-spacing: 1px;
cursor: pointer;
}
.dw-blog-categories button.active {
background: #d4a54d;
color: #15100b;
}
.dw-blog-posts-section {
background: #0b0907;
padding: 32px 0 90px;
}
.dw-blog-posts-container {
width: 92%;
max-width: 1300px;
margin: 0 auto;
}
.dw-featured-post {
display: grid;
grid-template-columns: 1.05fr 1fr;
border: 1px solid rgba(212, 165, 77, 0.18);
background: #100c09;
overflow: hidden;
}
.dw-featured-image {
position: relative;
min-height: 435px;
overflow: hidden;
}
.dw-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.dw-featured-post:hover .dw-featured-image img {
transform: scale(1.025);
}
.dw-post-tag {
position: absolute;
top: 17px;
left: 17px;
z-index: 2;
background: #211b16;
color: #d2ad69;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.2px;
padding: 8px 13px;
border-radius: 25px;
}
.dw-featured-tag {
background: rgba(10, 8, 6, 0.9);
}
.dw-featured-content {
padding: 55px 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
.dw-featured-content h2 {
margin: 0;
max-width: 540px;
color: #f5efe8;
font-family: "Poppins", sans-serif;
font-size: 42px;
line-height: 1.18;
font-weight: 400;
}
.dw-featured-content > p {
margin: 24px 0 0;
max-width: 540px;
color: #aaa095;
font-size: 14px;
line-height: 1.7;
}
.dw-featured-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 23px;
margin-top: 28px;
color: #8b765b;
font-size: 11px;
}
.dw-featured-meta span {
display: flex;
align-items: center;
gap: 7px;
}
.dw-featured-meta i {
color: #c79537;
}
.dw-read-article {
display: inline-flex;
align-items: center;
gap: 12px;
width: fit-content;
margin-top: 32px;
color: #d6ae67;
text-decoration: none;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
transition: 0.3s;
}
.dw-read-article span {
font-size: 18px;
transition: transform 0.3s ease;
}
.dw-read-article:hover {
color: #f0ca80;
}
.dw-read-article:hover span {
transform: translateX(5px);
}
.dw-blog-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.dw-blog-card {
border: 1px solid rgba(212, 165, 77, 0.18);
background: #100c09;
overflow: hidden;
transition:
transform 0.3s ease,
border-color 0.3s ease;
}
.dw-blog-card:hover {
transform: translateY(-4px);
border-color: rgba(212, 165, 77, 0.4);
}
.dw-blog-card-image {
position: relative;
height: 290px;
overflow: hidden;
background: #17120e;
}
.dw-blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.dw-blog-card:hover .dw-blog-card-image img {
transform: scale(1.04);
}
.dw-blog-card-content {
padding: 24px 24px 22px;
}
.dw-blog-card-content h3 {
margin: 0;
min-height: 58px;
color: #f1ece5;
font-family: "Poppins", sans-serif;
font-size: 20px;
line-height: 1.35;
font-weight: 600;
}
.dw-blog-card-content p {
margin: 14px 0 0;
min-height: 66px;
color: #aaa095;
font-size: 13px;
line-height: 1.65;
}
.dw-blog-card-footer {
margin-top: 22px;
padding-top: 17px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
color: #776651;
font-size: 10px;
font-weight: 500;
letter-spacing: 1.4px;
}
/* =========================================================
DELHI WOOD - CONTACT PAGE
Cream / White / Gold / Brown Theme
========================================================= */
/* =========================================================
BREADCRUMB
HEADER NAVIGATION KE JUST NICHE
========================================================= */
.contact-breadcrumb-section {
width: 100%;
padding: 22px 0;
/* background: #fbf7ef; */
border-top: 1px solid #f0e8dd;
}
.contact-breadcrumb-box {
width: 100%;
min-height: 54px;
display: flex;
align-items: center;
gap: 12px;
padding: 0 20px;
background: #ffffff;
border: 1px solid #e6ded3;
color: #182237;
font-size: 13px;
font-weight: 400;
}
.contact-breadcrumb-box a {
color: #07254a;
font-weight: 500;
transition: color 0.25s ease;
}
.contact-breadcrumb-box a:hover {
color: #d49a45;
}
.contact-breadcrumb-box > span {
color: #b8ab9a;
}
.contact-breadcrumb-box strong {
color: #182237;
font-weight: 400;
}
/* =========================================================
MAIN CONTACT SECTION
========================================================= */
.contact-page-section {
width: 100%;
padding: 0 0 90px;
/* background: #fbf7ef; */
}
.contact-page-card {
display: grid;
grid-template-columns: minmax(350px, 0.92fr) minmax(500px, 1.08fr);
min-height: 670px;
overflow: hidden;
border: 1px solid #07254a59;
background: #ffffff;
box-shadow: 0 20px 55px rgba(70, 48, 27, 0.06);
}
/* =========================================================
LEFT CONTACT INFORMATION
========================================================= */
.contact-info-panel {
padding: 45px 42px;
/* background: #f4ead9; */
border-right: 1px solid #07254a;
}
.contact-info-heading {
margin-bottom: 25px;
}
.contact-small-title {
display: block;
margin-bottom: 9px;
color: #07254a;
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.contact-info-heading h1 {
margin: 0;
color: #162137;
font-size: 30px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.8px;
}
.contact-heading-line {
display: block;
width: 65px;
height: 2px;
margin: 17px 0 18px;
background: #07254a;
}
.contact-info-heading p {
max-width: 470px;
margin: 0;
color: #786a5b;
font-size: 12px;
line-height: 1.75;
}
/* =========================================================
CONTACT INFO ROW
========================================================= */
.contact-info-item {
display: grid;
grid-template-columns: 46px 1fr;
gap: 15px;
padding: 18px 0;
border-bottom: 1px dashed #d8cab7;
}
.contact-info-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #07254a;
color: #ffffff;
font-size: 15px;
}
.contact-info-content {
min-width: 0;
}
.contact-info-content h3 {
margin: 1px 0 5px;
color: #172239;
font-size: 14px;
font-weight: 500;
}
.contact-info-content p,
.contact-info-content a {
display: inline-block;
margin: 0;
color: #77685a;
font-size: 11px;
line-height: 1.65;
overflow-wrap: anywhere;
}
.contact-info-content a {
color: #a55f20;
transition: color 0.25s ease;
}
.contact-info-content a:hover {
color: #702605;
}
/* =========================================================
GOOGLE RATING
========================================================= */
.contact-rating-box {
display: flex;
align-items: center;
gap: 17px;
margin-top: 27px;
padding: 18px 20px;
background: #ffffff;
border: 1px solid #e0d4c4;
border-left: 3px solid #d5a653;
}
.contact-rating-stars {
color: #d47c22;
font-size: 12px;
letter-spacing: 1px;
white-space: nowrap;
}
.contact-rating-box strong {
display: block;
margin-bottom: 3px;
color: #702605;
font-size: 11px;
}
.contact-rating-box span {
display: block;
color: #8c7c6b;
font-size: 9px;
}
/* =========================================================
RIGHT FORM PANEL
========================================================= */
.contact-form-panel {
padding: 45px 55px 50px;
background: #ffffff;
}
.contact-form-heading {
margin-bottom: 30px;
}
.contact-form-heading > span {
display: block;
margin-bottom: 9px;
color: #07254a;
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.contact-form-heading h2 {
max-width: 570px;
margin: 0;
color: #152138;
font-size: 30px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -1px;
}
.contact-form-heading p {
max-width: 590px;
margin: 12px 0 0;
color: #897b6c;
font-size: 11px;
line-height: 1.7;
}
/* =========================================================
FORM
========================================================= */
.contact-enquiry-form {
width: 100%;
}
.contact-form-group {
margin-bottom: 18px;
}
.contact-form-group label {
display: block;
margin-bottom: 7px;
color: #2b2926;
font-size: 11px;
font-weight: 500;
}
.contact-form-group label span {
color: #d24434;
}
.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #cfc8c0;
border-radius: 4px;
outline: none;
background: #ffffff;
color: #292725;
font-family: "Poppins", sans-serif;
font-size: 12px;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
.contact-form-group input,
.contact-form-group select {
height: 46px;
padding: 0 14px;
}
.contact-form-group textarea {
min-height: 115px;
padding: 13px 14px;
line-height: 1.6;
resize: vertical;
}
.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
color: #b0a7a0;
}
.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
border-color: #c8934d;
background: #fffdf9;
box-shadow: 0 0 0 3px rgba(213, 166, 83, 0.08);
}
/* =========================================================
MOBILE FIELD
========================================================= */
.contact-mobile-field {
display: grid;
grid-template-columns: 72px 1fr;
gap: 6px;
}
.contact-country-code {
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #cfc8c0;
border-radius: 4px;
background: #faf7f2;
color: #302b27;
font-size: 12px;
}
/* =========================================================
SUBMIT
========================================================= */
.contact-form-submit {
display: flex;
align-items: center;
gap: 20px;
margin-top: 26px;
}
.contact-submit-btn {
min-width: 175px;
min-height: 47px;
padding: 0 23px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
border: 0;
border-radius: 4px;
background: #07254a;
color: #ffffff;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.contact-submit-btn span {
font-size: 15px;
}
.contact-submit-btn:hover {
background: #8b3511;
transform: translateY(-2px);
}
.contact-form-submit p {
max-width: 260px;
margin: 0;
color: #a09589;
font-size: 9px;
line-height: 1.6;
}
/* =========================================================
ALERTS
========================================================= */
.contact-alert {
margin-bottom: 22px;
padding: 13px 16px;
border-radius: 4px;
font-size: 11px;
line-height: 1.6;
}
.contact-alert-success {
background: #edf8ef;
border: 1px solid #c4dfc9;
color: #276b38;
}
.contact-alert-error {
background: #fff2f0;
border: 1px solid #e9c2bd;
color: #983b31;
}
.contact-alert-error ul {
margin: 8px 0 0;
padding-left: 18px;
}
/* =========================================================
BOTTOM CTA
========================================================= */
.contact-bottom-strip {
padding: 55px 0;
background: #07254a;
}
.contact-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.contact-bottom-inner > div > span {
display: block;
margin-bottom: 9px;
color: #ffffff;
font-size: 8px;
font-weight: 600;
letter-spacing: 2px;
}
.contact-bottom-inner h2 {
margin: 0;
color: #f5efe7;
font-size: 28px;
font-weight: 400;
letter-spacing: -0.8px;
}
.contact-bottom-inner > a {
min-height: 44px;
min-width: 145px;
padding: 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
border-radius: 23px;
background: #ffffff;
color: #17120e;
font-size: 9px;
font-weight: 600;
letter-spacing: 1.2px;
transition: 0.25s ease;
}
.contact-bottom-inner > a:hover {
background: #e2b86c;
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.contact-page-card {
grid-template-columns: 1fr;
}
.contact-info-panel {
border-right: 0;
border-bottom: 1px solid #e6dac8;
}
.contact-form-panel {
padding: 40px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575px) {
.contact-breadcrumb-section {
padding: 14px 0;
}
.contact-breadcrumb-box {
min-height: 48px;
padding: 0 15px;
font-size: 12px;
}
.contact-page-section {
padding-bottom: 55px;
}
.contact-info-panel {
padding: 30px 20px;
}
.contact-info-heading h1 {
font-size: 25px;
}
.contact-info-item {
grid-template-columns: 40px 1fr;
gap: 12px;
}
.contact-info-icon {
width: 40px;
height: 40px;
font-size: 13px;
}
.contact-form-panel {
padding: 30px 20px 35px;
}
.contact-form-heading h2 {
font-size: 25px;
}
.contact-mobile-field {
grid-template-columns: 64px 1fr;
}
.contact-form-submit {
align-items: stretch;
flex-direction: column;
}
.contact-submit-btn {
width: 100%;
}
.contact-form-submit p {
max-width: none;
}
.contact-bottom-inner {
align-items: flex-start;
flex-direction: column;
}
.contact-bottom-inner h2 {
font-size: 24px;
}
.contact-bottom-inner > a {
width: 100%;
}
}
/* WHAT HAPPENS NEXT */
.dw-next-steps-section {
background: #0b0907;
padding: 85px 0 95px;
}
.dw-next-steps-container {
width: 92%;
max-width: 1300px;
margin: 0 auto;
}
.dw-next-steps-heading {
text-align: center;
margin-bottom: 52px;
}
.dw-next-kicker {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 22px;
color: #c89d52;
font-size: 10px;
font-weight: 600;
letter-spacing: 2.6px;
}
.dw-next-kicker-line {
width: 34px;
height: 1px;
display: inline-block;
background: #c89d52;
}
.dw-next-steps-heading h2 {
margin: 0;
color: #f5efe8;
font-family: "Poppins", sans-serif;
font-size: 52px;
line-height: 1.15;
font-weight: 400;
}
.dw-next-steps-heading h2 em {
color: #d1aa67;
font-weight: 400;
font-style: italic;
}
.dw-next-steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid rgba(212, 165, 77, 0.2);
background: #100c09;
}
.dw-next-step-item {
min-height: 195px;
padding: 30px 28px;
border-right: 1px solid rgba(212, 165, 77, 0.16);
display: flex;
flex-direction: column;
justify-content: center;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.dw-next-step-item:last-child {
border-right: 0;
}
.dw-next-step-item:hover {
background: #15100c;
}
.dw-next-step-number {
margin-bottom: 20px;
color: #5f431d;
font-family: "Poppins", sans-serif;
font-size: 40px;
line-height: 1;
font-weight: 400;
}
.dw-next-step-item h3 {
margin: 0 0 13px;
color: #f2ece5;
font-family: "Poppins", sans-serif;
font-size: 18px;
line-height: 1.3;
font-weight: 600;
}
.dw-next-step-item p {
margin: 0;
max-width: 240px;
color: #908170;
font-size: 12px;
line-height: 1.65;
}
/* =========================================================
CATEGORY DETAIL PAGE (cp-*)
Ye poora block main CSS me purane "CATEGORY DETAIL PAGE"
(dw-category-*) block ki jagah paste karo.
Colors badalne ho to sirf neeche ke variables badlo.
========================================================= */
.cp-page {
/* --cp-bg: #fdf8ef;
--cp-card: #fdfaf3; */
--cp-border: #e6dfd0;
--cp-brown: #5c1f0b;
--cp-brown-dark: #451507;
--cp-orange: #e08a2c;
--cp-text: #1f2937;
--cp-muted: #6b7280;
background: var(--cp-bg);
color: var(--cp-text);
font-family: "Poppins", sans-serif;
padding: 22px 0 70px;
}
.cp-container {
width: min(1280px, 92%);
margin: 0 auto;
}
.cp-section {
margin-top: 30px;
}
.cp-section-title {
margin: 0 0 18px;
font-size: 28px;
font-weight: 700;
color: #111827;
line-height: 1.2;
}
/* ---------------- BREADCRUMB ---------------- */
.cp-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 12px 10px;
margin-bottom: 16px;
/* background: #f0ebdf; */
border-radius: 3px;
font-size: 13px;
color: #8a919b;
border: 1px solid #b1b1b18c;
}
.cp-breadcrumb a {
color: #8a919b;
transition: color 0.2s ease;
}
.cp-breadcrumb a:hover {
color: var(--cp-orange);
}
.cp-bc-sep {
color: #111827;
font-size: 12px;
}
.cp-breadcrumb strong {
color: #1f2937;
font-weight: 500;
}
/* ---------------- BUTTONS ---------------- */
.cp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 26px;
border-radius: 4px;
border: 1px solid #07254a;
font-family: "Poppins", sans-serif;
font-size: 17px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.cp-btn-solid {
background: #07254a;
color: #ffffff;
}
.cp-btn-solid:hover {
background: #07254a;
transform: translateY(-1px);
}
.cp-btn-outline {
background: #ffffff;
color: #07254a;
}
.cp-btn-outline:hover {
background: #07254a;
color: #ffffff;
}
.cp-btn-small {
padding: 9px 16px;
font-size: 14px;
}
/* ---------------- TOP PRODUCT CARD ---------------- */
.cp-product-card {
display: grid;
grid-template-columns: 455px minmax(0, 1fr);
gap: 30px;
padding: 16px;
background: var(--cp-card);
border: 1px solid #b1b1b18c;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.cp-gallery {
min-width: 0;
}
.cp-gallery-main {
display: flex;
align-items: center;
justify-content: center;
height: 420px;
background: #f1eee8;
overflow: hidden;
}
.cp-gallery-main img {
max-width: 100%;
max-height: 100%;
width: auto;
height: 100%;
object-fit: contain;
display: block;
}
.cp-no-image {
padding: 20px;
text-align: center;
color: var(--cp-muted);
font-size: 15px;
}
.cp-thumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.cp-thumb {
width: 66px;
height: 66px;
padding: 2px;
background: #f1eee8;
border: 2px solid transparent;
border-radius: 3px;
cursor: pointer;
overflow: hidden;
transition: border-color 0.2s ease;
}
.cp-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cp-thumb:hover,
.cp-thumb.active {
border-color: var(--cp-brown);
}
.cp-summary {
position: relative;
min-width: 0;
padding: 8px 56px 8px 0;
}
.cp-title {
margin: 0;
font-size: 32px;
font-weight: 500;
line-height: 1.25;
color: #1f2937;
}
.cp-short-description {
margin-top: 20px;
font-size: 15px;
line-height: 1.85;
color: #374151;
}
.cp-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}
.cp-share-btn {
position: absolute;
top: 6px;
right: 6px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid var(--cp-border);
border-radius: 50%;
color: #111827;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
transition:
background 0.2s ease,
color 0.2s ease;
}
.cp-share-btn:hover {
background: var(--cp-brown);
color: #ffffff;
}
/* ---------------- PRODUCT INFORMATION (TABS) ---------------- */
.cp-info-card {
padding: 24px;
background: #ffffff;
border: 1px solid var(--cp-border);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.cp-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.cp-tab-btn {
padding: 13px 22px;
background: #ffffff;
border: 1px solid var(--cp-border);
border-radius: 6px;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 600;
color: #111827;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.cp-tab-btn:hover {
border-color: var(--cp-brown);
}
.cp-tab-btn.active {
background: var(--cp-brown);
border-color: var(--cp-brown);
color: #ffffff;
}
.cp-tab-panel {
display: none;
padding: 20px 22px;
border: 1px solid #ece7dc;
border-radius: 8px;
}
.cp-tab-panel.active {
display: block;
}
.cp-prose {
font-size: 15px;
line-height: 1.95;
color: #4b5563;
}
.cp-prose p {
margin: 0 0 14px;
}
.cp-prose strong,
.cp-prose b {
color: #111827;
font-weight: 600;
}
.cp-prose h2,
.cp-prose h3,
.cp-prose h4 {
margin: 22px 0 10px;
color: #111827;
font-weight: 700;
line-height: 1.25;
}
.cp-prose h2 {
font-size: 30px;
}
.cp-prose h3 {
font-size: 22px;
}
.cp-prose h4 {
font-size: 18px;
}
.cp-prose ul,
.cp-prose ol {
margin: 0 0 14px;
padding-left: 26px;
}
.cp-prose li {
margin-bottom: 6px;
}
.cp-prose a {
color: var(--cp-orange);
text-decoration: underline;
}
.cp-prose img {
max-width: 100%;
height: auto;
}
.cp-prose table {
width: 100%;
border-collapse: collapse;
margin-bottom: 14px;
}
.cp-prose table td,
.cp-prose table th {
padding: 10px;
border: 1px solid #ece7dc;
font-size: 14px;
}
.cp-spec-table {
display: flex;
flex-direction: column;
}
.cp-spec-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
gap: 20px;
padding: 14px 4px;
border-bottom: 1px solid #ece7dc;
font-size: 15px;
}
.cp-spec-row:last-child {
border-bottom: 0;
}
.cp-spec-row span {
color: var(--cp-muted);
}
.cp-spec-row strong {
color: #111827;
font-weight: 600;
}
/* ---------------- FAQ ---------------- */
.cp-faq-layout {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
gap: 24px;
align-items: start;
}
.cp-faq-intro {
padding: 24px;
background: #ffffff;
border: 1px solid var(--cp-border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.cp-faq-intro h2 {
margin: 0 0 12px;
font-size: 34px;
font-weight: 700;
line-height: 1.15;
color: #111827;
}
.cp-faq-intro p {
margin: 0 0 20px;
font-size: 15px;
line-height: 1.85;
color: #4b5563;
}
.cp-faq-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.cp-faq-item {
border-radius: 4px;
overflow: hidden;
}
.cp-faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 19px 20px;
background: linear-gradient(135deg, #5c1f0b, #7a2d12);
color: #ffffff;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
list-style: none;
}
.cp-faq-item summary::-webkit-details-marker {
display: none;
}
.cp-faq-chevron {
flex-shrink: 0;
transition: transform 0.25s ease;
}
.cp-faq-item[open] .cp-faq-chevron {
transform: rotate(180deg);
}
.cp-faq-answer {
padding: 16px 20px;
background: #ffffff;
border: 1px solid var(--cp-border);
border-top: 0;
font-size: 14px;
line-height: 1.85;
color: #4b5563;
}
/* ---------------- ENQUIRY FORM ---------------- */
.cp-enquiry-card {
padding: 26px 22px 30px;
background: #ffffff;
border: 1px solid #c7c7c7c7;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.cp-enquiry-title {
margin: 0 0 22px;
text-align: center;
font-size: 34px;
font-weight: 400;
line-height: 1.25;
color: #1f2937;
}
.cp-enquiry-title span {
color: #102c36;
font-weight: 500;
}
.cp-enquiry-form {
max-width: 1070px;
margin: 0 auto;
}
.cp-alert {
max-width: 1070px;
margin: 0 auto 18px;
padding: 12px 16px;
background: #e8f5e9;
border: 1px solid #b7dfba;
border-radius: 6px;
color: #256029;
font-size: 14px;
}
.cp-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 28px;
margin-bottom: 18px;
}
.cp-form-group {
min-width: 0;
margin-bottom: 0;
}
.cp-form-group > label {
display: block;
margin-bottom: 7px;
font-size: 13px;
font-weight: 600;
color: #4b5563;
}
.cp-form-group input[type="text"],
.cp-form-group input[type="email"],
.cp-form-group input[type="tel"],
.cp-form-group textarea {
width: 100%;
height: 42px;
padding: 0 15px;
/* background: #fffaf1; */
border: 1px solid #d7d7d7;
border-radius: 8px;
outline: none;
font-family: "Poppins", sans-serif;
font-size: 14px;
color: #1f2937;
transition: border-color 0.2s ease, background 0.2s ease;
}
.cp-form-group textarea {
height: auto;
min-height: 62px;
padding: 12px 15px;
resize: vertical;
line-height: 1.6;
}
.cp-form-group input::placeholder,
.cp-form-group textarea::placeholder {
color: #a3a8b0;
opacity: 1;
}
.cp-form-group input:focus,
.cp-form-group textarea:focus {
border-color: var(--cp-orange);
background: #ffffff;
}
.cp-mobile-field {
display: flex;
align-items: stretch;
background: #fffaf1;
border: 1px solid #e5ddd0;
border-radius: 8px;
overflow: hidden;
}
.cp-mobile-field:focus-within {
border-color: var(--cp-orange);
background: #ffffff;
}
.cp-mobile-prefix {
display: flex;
align-items: center;
padding: 0 16px;
background: #f3f1ee;
border-right: 1px solid #e5ddd0;
font-size: 14px;
color: #1f2937;
}
.cp-mobile-field input[type="tel"] {
border: 0;
border-radius: 0;
background: transparent;
}
.cp-mobile-field input[type="tel"]:focus {
background: transparent;
}
.cp-qty-field {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 8px;
}
.cp-purpose {
margin-bottom: 18px;
}
.cp-purpose-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
max-width: 540px;
}
.cp-radio {
display: flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 12px;
background: #fffaf1;
border: 1px solid #e5ddd0;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #4b5563;
cursor: pointer;
}
.cp-radio input {
accent-color: var(--cp-brown);
}
.cp-form-group > label.cp-radio {
margin-bottom: 0;
}
.cp-form-submit {
display: flex;
justify-content: center;
margin-top: 22px;
}
.cp-form-submit .cp-btn {
min-width: 180px;
}
/* ---------------- EXPLORE MORE (CAROUSEL) ---------------- */
.cp-explore-card {
padding: 16px 12px 24px;
background: var(--cp-card);
border: 1px solid #7070705e;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.cp-explore-title {
margin: 6px 0 16px;
text-align: center;
font-size: 26px;
font-weight: 500;
color: #1f2937;
}
.cp-carousel {
position: relative;
padding: 0 10px;
}
.cp-carousel-track {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.cp-carousel-track::-webkit-scrollbar {
display: none;
}
.cp-related-card {
flex: 0 0 calc((100% - 36px) / 4);
min-height: 330px;
padding: 10px 10px 22px;
background: #fffdf8;
border: 1px solid #9f9f9f8c;
text-align: center;
scroll-snap-align: start;
}
.cp-related-image {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
background: #f6f4f0;
overflow: hidden;
}
.cp-related-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
transition: transform 0.4s ease;
}
.cp-related-image span {
padding: 12px;
font-size: 14px;
color: var(--cp-muted);
}
.cp-related-card:hover .cp-related-image img {
transform: scale(1.04);
}
.cp-related-card h3 {
margin: 14px 0 14px;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
}
.cp-related-card h3 a {
color: #07254a;
}
.cp-carousel-arrow {
position: absolute;
top: 42%;
z-index: 5;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: #ffffff;
border: 1px solid var(--cp-border);
border-radius: 50%;
color: #111827;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition:
background 0.2s ease,
color 0.2s ease;
}
.cp-carousel-arrow:hover {
background: var(--cp-brown);
color: #ffffff;
}
.cp-carousel-prev {
left: 0;
}
.cp-carousel-next {
right: 0;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.cp-product-card {
grid-template-columns: 380px minmax(0, 1fr);
}
.cp-gallery-main {
height: 360px;
}
.cp-title {
font-size: 28px;
}
.cp-related-card {
flex: 0 0 calc((100% - 24px) / 3);
}
}
@media (max-width: 991px) {
.cp-product-card {
grid-template-columns: 1fr;
}
.cp-gallery-main {
height: 380px;
}
.cp-summary {
padding: 8px 0 4px;
}
.cp-title {
padding-right: 50px;
}
.cp-faq-layout {
grid-template-columns: 1fr;
}
.cp-related-card {
flex: 0 0 calc((100% - 12px) / 2);
}
}
@media (max-width: 767px) {
.cp-page {
padding: 14px 0 50px;
}
.cp-container {
width: calc(100% - 24px);
}
.cp-section {
margin-top: 22px;
}
.cp-section-title {
font-size: 23px;
}
.cp-breadcrumb {
font-size: 12px;
}
.cp-product-card {
padding: 12px;
gap: 18px;
}
.cp-gallery-main {
height: 300px;
}
.cp-title {
font-size: 24px;
}
.cp-short-description {
font-size: 14px;
}
.cp-actions {
flex-direction: column;
}
.cp-actions .cp-btn {
width: 100%;
}
.cp-btn {
font-size: 15px;
padding: 13px 20px;
}
.cp-info-card {
padding: 14px;
}
.cp-tab-panel {
padding: 14px;
}
.cp-prose {
font-size: 14px;
}
.cp-prose h2 {
font-size: 24px;
}
.cp-spec-row {
grid-template-columns: 1fr;
gap: 4px;
}
.cp-faq-intro h2 {
font-size: 26px;
}
.cp-faq-item summary {
padding: 16px;
font-size: 14px;
}
.cp-enquiry-card {
padding: 20px 14px 24px;
}
.cp-enquiry-title {
font-size: 24px;
}
.cp-form-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.cp-purpose-options {
grid-template-columns: 1fr;
}
.cp-form-submit .cp-btn {
width: 100%;
}
.cp-explore-title {
font-size: 21px;
}
.cp-related-card {
flex: 0 0 78%;
}
.cp-carousel {
padding: 0;
}
.cp-carousel-arrow {
width: 34px;
height: 34px;
}
.cp-carousel-prev {
left: 4px;
}
.cp-carousel-next {
right: 4px;
}
}
/* =========================================================
APPLICATIONS PAGE
========================================================= */
/* =========================================================
APPLICATIONS LISTING PAGE (al-*)
Main CSS me purana poora "APPLICATIONS PAGE" block hata do
(.applications-page se lekar last @media (max-width:360px){...}
tak) aur uski jagah ye poora block paste karo.
Colors badalne ho to sirf neeche ke variables badlo.
========================================================= */
.al-page {
/* --al-bg: #fdf8ef; */
--al-band: #f3ecdd;
--al-card: #ffffff;
--al-cream: #fff7ea;
--al-border: #e6dfd0;
--al-brown: #5c1f0b;
--al-brown-dark: #451507;
--al-brown-light: #7a2d12;
--al-orange: #e08a2c;
--al-green: #22b455;
--al-green-dark: #1a9446;
--al-text: #1f2937;
--al-muted: #6b7280;
background: var(--al-bg);
color: var(--al-text);
font-family: "Poppins", sans-serif;
padding-top: 22px;
width: 100%;
overflow-x: hidden;
}
.al-container {
width: min(1280px, 92%);
margin: 0 auto;
}
/* ---------------- BREADCRUMB ---------------- */
.al-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 16px 20px;
background: #ffffff;
border: 1px solid #07254a4f;
font-size: 14px;
color: var(--al-muted);
}
.al-breadcrumb a {
color: #07254a;
font-weight: 500;
transition: color 0.2s ease;
}
.al-breadcrumb a:hover {
color: var(--al-orange);
}
.al-bc-sep {
color: #9ca3af;
}
.al-breadcrumb strong {
font-weight: 400;
color: var(--al-text);
}
/* ---------------- INTRO BAND ---------------- */
.al-intro {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
margin-top: 22px;
padding: 46px 48px;
background: linear-gradient(135deg, #07254a 0%, #07254a 100%);
border-radius: 6px;
overflow: hidden;
}
.al-intro::after {
content: "";
position: absolute;
right: -70px;
top: -70px;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(224, 138, 44, 0.16);
pointer-events: none;
}
.al-intro-text {
position: relative;
z-index: 1;
max-width: 700px;
}
.al-intro-label {
display: inline-block;
margin-bottom: 14px;
padding: 5px 14px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 30px;
font-size: 11px;
font-weight: 600;
letter-spacing: 2.2px;
color: #ffffff;
}
.al-intro-title {
margin: 0;
font-size: 40px;
font-weight: 600;
line-height: 1.2;
color: #ffffff;
}
.al-intro-title span {
color: #ffffff;
}
.al-intro-desc {
margin: 16px 0 0;
font-size: 14.5px;
line-height: 1.85;
color: rgba(255, 255, 255, 0.82);
}
.al-intro-actions {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
}
/* ---------------- BUTTONS ---------------- */
.al-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
padding: 14px 24px;
border-radius: 5px;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease;
}
.al-btn-light {
background: #ffffff;
border: 1px solid #ffffff;
color: var(--al-brown);
}
.al-btn-light:hover {
background: #ffffff;
border-color: #ffffff;
color: #000000;
transform: translateY(-2px);
}
.al-btn-ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.45);
color: #ffffff;
}
.al-btn-ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #ffffff;
transform: translateY(-2px);
}
/* ---------------- LISTING BAND ---------------- */
.al-band {
margin-top: 30px;
padding: 56px 0 76px;
background: #e5e5e5;
}
.al-heading-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 26px;
}
.al-title {
margin: 0;
font-size: 30px;
font-weight: 600;
line-height: 1.2;
color: var(--al-text);
}
.al-title::after {
content: "";
display: block;
width: 54px;
height: 3px;
margin-top: 10px;
border-radius: 3px;
background: var(--al-orange);
}
.al-title small {
margin-left: 10px;
font-size: 13px;
font-weight: 500;
color: var(--al-muted);
}
.al-search-box {
width: 340px;
max-width: 100%;
height: 46px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
background: #ffffff;
border: 1px solid var(--al-border);
border-radius: 30px;
color: var(--al-muted);
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.al-search-box:focus-within {
border-color: var(--al-orange);
box-shadow: 0 0 0 3px rgba(224, 138, 44, 0.14);
}
.al-search-box input {
width: 100%;
height: 100%;
border: 0;
outline: 0;
background: transparent;
font-family: "Poppins", sans-serif;
font-size: 14px;
color: var(--al-text);
}
.al-search-box input::placeholder {
color: #a3a8b0;
opacity: 1;
}
/* ---------------- FILTER CHIPS ---------------- */
.al-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 32px;
}
.al-chip {
padding: 9px 20px;
background: #ffffff;
border: 1px solid var(--al-border);
border-radius: 30px;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 500;
color: #4b5563;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.al-chip:hover {
border-color: var(--al-brown);
color: var(--al-brown);
}
.al-chip.active {
background: var(--al-brown);
border-color: var(--al-brown);
color: #ffffff;
}
/* ---------------- GRID : 4 COLUMNS ---------------- */
.al-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.al-card {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--al-card);
border: 1px solid var(--al-border);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.al-card:hover {
transform: translateY(-4px);
/* border-color: var(--al-orange); */
box-shadow: 0 14px 30px rgba(92, 31, 11, 0.12);
}
.al-card-image {
position: relative;
display: block;
height: 250px;
overflow: hidden;
background: #f1eee8;
}
.al-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.al-card:hover .al-card-image img {
transform: scale(1.06);
}
.al-card-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
text-align: center;
font-size: 14px;
color: var(--al-muted);
}
.al-card-badge {
position: absolute;
top: 14px;
left: 14px;
max-width: calc(100% - 28px);
padding: 6px 13px;
background: #102c36;
border-radius: 30px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.6px;
line-height: 1.2;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.al-card-body {
flex: 1;
padding: 18px 16px 6px;
}
.al-card-title {
margin: 0 0 8px;
font-size: 18px;
font-weight: 600;
line-height: 1.35;
color: var(--al-text);
}
.al-card-title a {
color: inherit;
transition: color 0.2s ease;
}
.al-card-title a:hover {
color: #07254a;
}
.al-card-desc {
margin: 0;
font-size: 13px;
line-height: 1.7;
color: var(--al-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.al-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 14px;
}
.al-tag {
padding: 5px 10px;
background: var(--al-cream);
border: 1px solid var(--al-border);
border-radius: 30px;
font-size: 11px;
line-height: 1.2;
color: #6b4a2b;
}
.al-card-actions {
display: flex;
gap: 8px;
padding: 14px 12px 14px;
}
.al-card-btn {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
border-radius: 5px;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.1;
color: #ffffff;
text-decoration: none;
transition:
background 0.2s ease,
transform 0.2s ease;
}
.al-card-btn:hover {
transform: translateY(-1px);
}
.al-card-btn-main {
flex: 1;
padding: 0 10px;
background: #07254a;
}
.al-card-btn-main:hover {
background: #07254a;
}
.al-card-btn-wa {
flex: 0 0 48px;
background: var(--al-green);
}
.al-card-btn-wa:hover {
background: var(--al-green-dark);
}
.al-no-result,
.al-empty {
grid-column: 1 / -1;
padding: 60px 20px;
text-align: center;
background: #ffffff;
border: 1px solid var(--al-border);
font-size: 15px;
color: var(--al-muted);
}
.al-no-result {
margin-top: 10px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.al-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.al-intro {
padding: 38px 32px;
gap: 28px;
}
.al-intro-title {
font-size: 34px;
}
}
@media (max-width: 900px) {
.al-intro {
flex-direction: column;
align-items: flex-start;
}
.al-intro-actions {
flex-direction: row;
flex-wrap: wrap;
}
}
@media (max-width: 820px) {
.al-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
}
@media (max-width: 560px) {
.al-page {
padding-top: 14px;
}
.al-container {
width: calc(100% - 24px);
}
.al-breadcrumb {
padding: 13px 14px;
font-size: 13px;
}
.al-intro {
margin-top: 16px;
padding: 28px 20px;
}
.al-intro-title {
font-size: 27px;
}
.al-intro-desc {
font-size: 13.5px;
}
.al-intro-actions {
width: 100%;
flex-direction: column;
}
.al-btn {
width: 100%;
min-width: 0;
}
.al-band {
padding: 40px 0 52px;
}
.al-title {
font-size: 24px;
}
.al-search-box {
width: 100%;
}
.al-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.al-card-image {
height: 240px;
}
}
/* =========================================================
APPLICATION DETAIL PAGE (adp-*)
Main CSS me purane "APPLICATION DETAIL PAGE" block
(.application-detail-page se lekar .app-project-image{height:235px}
wale last media query tak) ko hata kar ye poora block paste karo.
Colors badalne ho to sirf neeche ke variables badlo.
========================================================= */
.application-detail-page {
/* --adp-bg: #fdf8ef; */
--adp-card: #fdfaf3;
--adp-cream: #fff7ea;
--adp-border: #e6dfd0;
--adp-brown: #5c1f0b;
--adp-brown-dark: #451507;
--adp-orange: #e08a2c;
--adp-text: #1f2937;
--adp-muted: #6b7280;
background: var(--adp-bg);
color: var(--adp-text);
font-family: "Poppins", sans-serif;
padding: 22px 0 70px;
}
.adp-container {
width: min(1280px, 92%);
margin: 0 auto;
}
.adp-section {
margin-top: 30px;
}
.adp-section-title {
margin: 0 0 18px;
font-size: 28px;
font-weight: 700;
color: #111827;
line-height: 1.2;
}
.adp-heading-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
/* ---------------- BREADCRUMB ---------------- */
.adp-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 12px 10px;
margin-bottom: 16px;
/* background: #f0ebdf; */
border-radius: 3px;
font-size: 13px;
color: #8a919b;
border: 1px solid #b7b7b78c;
}
.adp-breadcrumb a {
color: #8a919b;
transition: color 0.2s ease;
}
.adp-breadcrumb a:hover {
color: var(--adp-orange);
}
.adp-bc-sep {
color: #111827;
font-size: 12px;
}
.adp-breadcrumb strong {
color: #1f2937;
font-weight: 500;
}
/* ---------------- BUTTONS ---------------- */
.adp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 26px;
border-radius: 4px;
border: 1px solid #07254a;
font-family: "Poppins", sans-serif;
font-size: 17px;
font-weight: 500;
line-height: 1;
cursor: pointer;
text-decoration: none;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.adp-btn-solid {
background: #07254a;
color: #ffffff;
}
.adp-btn-solid:hover {
background: #07254a;
transform: translateY(-1px);
}
.adp-btn-outline {
background: #ffffff;
color: #07254a;
}
.adp-btn-outline:hover {
background: #07254a;
color: #ffffff;
}
.adp-btn-small {
padding: 10px 18px;
font-size: 14px;
}
/* ---------------- TOP PRODUCT CARD ---------------- */
.adp-product-card {
display: grid;
grid-template-columns: 455px minmax(0, 1fr);
gap: 30px;
padding: 16px;
/* background: var(--adp-card); */
border: 1px solid #96a2b15e;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.adp-gallery {
min-width: 0;
}
.adp-gallery-main {
display: flex;
align-items: center;
justify-content: center;
height: auto;
background: #f1eee8;
overflow: hidden;
}
.adp-gallery-main img {
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.adp-no-image {
padding: 20px;
text-align: center;
color: var(--adp-muted);
font-size: 15px;
}
.adp-thumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.adp-thumb {
width: 66px;
height: 66px;
padding: 2px;
background: #f1eee8;
border: 2px solid transparent;
border-radius: 3px;
cursor: pointer;
overflow: hidden;
transition: border-color 0.2s ease;
}
.adp-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.adp-thumb:hover,
.adp-thumb.active {
border-color: var(--adp-brown);
}
.adp-summary {
position: relative;
min-width: 0;
padding: 8px 56px 8px 0;
}
.adp-title {
margin: 0;
font-size: 32px;
font-weight: 500;
line-height: 1.25;
color: #1f2937;
}
.adp-short-description {
margin: 16px 0 0;
font-size: 15px;
line-height: 1.85;
color: #374151;
}
.adp-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}
.adp-share-btn {
position: absolute;
top: 6px;
right: 6px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid var(--adp-border);
border-radius: 50%;
color: #111827;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
transition:
background 0.2s ease,
color 0.2s ease;
}
.adp-share-btn:hover {
background: var(--adp-brown);
color: #ffffff;
}
/* ---------------- SPECIFICATION ROWS (admin se) ---------------- */
.adp-spec-list {
display: flex;
flex-direction: column;
margin-top: 22px;
}
.adp-spec-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
gap: 20px;
padding: 12px 4px;
border-bottom: 1px solid #ece7dc;
font-size: 15px;
}
.adp-spec-row:first-child {
border-top: 1px solid #ece7dc;
}
.adp-spec-row span {
color: var(--adp-muted);
}
.adp-spec-row strong {
color: #111827;
font-weight: 600;
}
.adp-spec-row-single {
grid-template-columns: 1fr;
}
.adp-spec-list-full {
margin-top: 0;
}
.adp-spec-list-full .adp-spec-row:first-child {
border-top: 0;
}
.adp-spec-list-full .adp-spec-row:last-child {
border-bottom: 0;
}
.adp-view-more {
display: inline-block;
margin-top: 12px;
font-size: 14px;
color: var(--adp-orange);
text-decoration: underline;
}
.adp-view-more:hover {
color: var(--adp-brown);
}
/* ---------------- INFORMATION TABS ---------------- */
.adp-info-card {
padding: 24px;
background: #ffffff;
border: 1px solid #adadad7d;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.adp-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.adp-tab-btn {
padding: 13px 22px;
background: #ffffff;
border: 1px solid #07254a;
border-radius: 6px;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 600;
color: #111827;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.adp-tab-btn:hover {
border-color:#07254a;
}
.adp-tab-btn.active {
background: #07254a;
border-color: #07254a;
color: #ffffff;
}
.adp-tab-panel {
display: none;
padding: 20px 22px;
border: 1px solid #d7d7d7;
border-radius: 8px;
}
.adp-tab-panel.active {
display: block;
}
.adp-prose {
font-size: 15px;
line-height: 1.95;
color: #4b5563;
}
.adp-prose p {
margin: 0 0 14px;
}
.adp-prose strong,
.adp-prose b {
color: #111827;
font-weight: 600;
}
.adp-prose h2,
.adp-prose h3,
.adp-prose h4 {
margin: 22px 0 10px;
color: #111827;
font-weight: 700;
line-height: 1.25;
}
.adp-prose h2 {
font-size: 30px;
}
.adp-prose h3 {
font-size: 22px;
}
.adp-prose h4 {
font-size: 18px;
}
.adp-prose ul,
.adp-prose ol {
margin: 0 0 14px;
padding-left: 26px;
}
.adp-prose li {
margin-bottom: 6px;
}
.adp-prose a {
color: var(--adp-orange);
text-decoration: underline;
}
.adp-prose img {
max-width: 100%;
height: auto;
}
.adp-prose table {
width: 100%;
border-collapse: collapse;
margin-bottom: 14px;
}
.adp-prose table td,
.adp-prose table th {
padding: 10px;
border: 1px solid #ece7dc;
font-size: 14px;
}
/* ---------------- SITE NOTES ---------------- */
.adp-notes-card {
padding: 24px 26px;
background: #092649;
border: 1px solid #092649;
border-left: 4px solid #092649;
border-radius: 4px;
}
.adp-notes-card h3 {
margin: 0 0 14px;
font-size: 20px;
font-weight: 600;
color: #ffffff;
}
.adp-notes-card ul {
margin: 0 0 16px;
padding-left: 22px;
}
.adp-notes-card li {
margin-bottom: 8px;
font-size: 14px;
line-height: 1.7;
color: #ffffff;
}
.adp-notes-card li::marker {
color: #ffffff;
}
.adp-notes-card p {
margin: 0;
padding-top: 14px;
border-top: 1px solid #ffffff;
font-size: 14px;
line-height: 1.7;
color: #ffffff;
}
/* ---------------- REFERENCE WORK ---------------- */
.adp-project-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.adp-project-card {
padding: 10px 10px 18px;
/* background: var(--adp-card); */
/* border: 1px solid #313336; */
}
.adp-project-image {
height: 260px;
overflow: hidden;
background: #f1eee8;
}
.adp-project-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.4s ease;
}
.adp-project-card:hover .adp-project-image img {
transform: scale(1.04);
}
.adp-project-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
text-align: center;
color: var(--adp-muted);
font-size: 14px;
}
.adp-project-meta {
margin-top: 14px;
color: #092649;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
}
.adp-project-card h3 {
margin: 8px 0 4px;
font-size: 18px;
font-weight: 600;
color: #1f2937;
}
.adp-project-card p {
margin: 0;
font-size: 13px;
color: var(--adp-muted);
}
/* ---------------- EXPLORE MORE (CAROUSEL) ---------------- */
.adp-explore-card {
padding: 16px 12px 24px;
/* background: var(--adp-card); */
/* border: 1px solid #0c1a286e; */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.adp-explore-title {
margin: 6px 0 16px;
text-align: center;
font-size: 26px;
font-weight: 500;
color: #1f2937;
}
.adp-carousel {
position: relative;
padding: 0 10px;
}
.adp-carousel-track {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.adp-carousel-track::-webkit-scrollbar {
display: none;
}
.adp-related-card {
flex: 0 0 calc((100% - 36px) / 4);
padding: 10px 10px 12px;
background: #ffffff;
border: 1px solid #a3a3a373;
border-radius: 6px;
text-align: center;
scroll-snap-align: start;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.adp-related-image {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
background: #f6f4f0;
overflow: hidden;
}
.adp-related-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.adp-related-image span {
padding: 12px;
font-size: 14px;
color: var(--adp-muted);
}
.adp-related-card:hover .adp-related-image img {
transform: scale(1.04);
}
.adp-related-card h3 {
margin: 12px 0 12px;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
color: #1f2937;
}
.adp-related-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.adp-mini-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 11px 6px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
color: #ffffff;
text-decoration: none;
transition: background 0.2s ease;
}
.adp-mini-quote {
background: #092649;
}
.adp-mini-quote:hover {
background: #092649;
}
.adp-mini-wa {
background: #22b455;
}
.adp-mini-wa:hover {
background: #1a9446;
}
.adp-carousel-arrow {
position: absolute;
top: 40%;
z-index: 5;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: #ffffff;
border: 1px solid var(--adp-border);
border-radius: 50%;
color: #111827;
font-size: 24px;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition:
background 0.2s ease,
color 0.2s ease;
}
.adp-carousel-arrow:hover {
background: var(--adp-brown);
color: #ffffff;
}
.adp-carousel-prev {
left: 0;
}
.adp-carousel-next {
right: 0;
}
/* ---------------- RELATED CATEGORIES ---------------- */
.adp-related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.adp-category-card {
min-height: 190px;
display: flex;
flex-direction: column;
padding: 24px;
/* background: var(--adp-card); */
border: 1px solid #7b7c7c57;
text-decoration: none;
transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.adp-category-card:hover {
border-color: #bababbad;
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}
.adp-category-card h3 {
margin: 0 0 10px;
font-size: 20px;
font-weight: 600;
color: #092649;
}
.adp-category-card p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: var(--adp-muted);
}
.adp-category-bottom {
margin-top: auto;
padding-top: 16px;
display: flex;
justify-content: space-between;
border-top: 1px solid var(--adp-border);
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
color: #092649;
}
.adp-view-all {
display: inline-block;
margin-top: 24px;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
color: #092649;
text-decoration: none;
}
.adp-view-all:hover {
color: var(--adp-brown);
}
/* ---------------- ENQUIRY FORM ---------------- */
.adp-enquiry-card {
padding: 26px 22px 30px;
/* background: var(--adp-cream); */
border: 1px solid #a1a1a18c;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.adp-enquiry-title {
margin: 0 0 22px;
text-align: center;
font-size: 34px;
font-weight: 400;
line-height: 1.25;
color: #1f2937;
}
.adp-enquiry-title span {
color: #102c36;
font-weight: 500;
}
.adp-enquiry-form {
max-width: 1070px;
margin: 0 auto;
}
.adp-alert {
max-width: 1070px;
margin: 0 auto 18px;
padding: 12px 16px;
background: #e8f5e9;
border: 1px solid #b7dfba;
border-radius: 6px;
color: #256029;
font-size: 14px;
}
.adp-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 28px;
margin-bottom: 18px;
}
.adp-form-group {
min-width: 0;
}
.adp-form-group > label,
.adp-label {
display: block;
margin-bottom: 7px;
font-size: 13px;
font-weight: 600;
color: #4b5563;
}
.adp-form-group input[type="text"],
.adp-form-group input[type="email"],
.adp-form-group input[type="tel"],
.adp-form-group textarea {
width: 100%;
height: 42px;
padding: 0 15px;
/* background: #fffaf1; */
border: 1px solid #95959599;
border-radius: 8px;
outline: none;
font-family: "Poppins", sans-serif;
font-size: 14px;
color: #1f2937;
transition: border-color 0.2s ease, background 0.2s ease;
}
.adp-form-group textarea {
height: auto;
min-height: 62px;
padding: 12px 15px;
resize: vertical;
line-height: 1.6;
}
.adp-form-group input::placeholder,
.adp-form-group textarea::placeholder {
color: #a3a8b0;
opacity: 1;
}
.adp-form-group input:focus,
.adp-form-group textarea:focus {
border-color: var(--adp-orange);
background: #ffffff;
}
.adp-mobile-field {
display: flex;
align-items: stretch;
background: #fffaf1;
border: 1px solid #e5ddd0;
border-radius: 8px;
overflow: hidden;
}
.adp-mobile-field:focus-within {
border-color: var(--adp-orange);
background: #ffffff;
}
.adp-mobile-prefix {
display: flex;
align-items: center;
padding: 0 16px;
background: #f3f1ee;
border-right: 1px solid #e5ddd0;
font-size: 14px;
color: #1f2937;
white-space: nowrap;
}
.adp-mobile-field input[type="tel"] {
border: 0;
border-radius: 0;
background: transparent;
}
.adp-mobile-field input[type="tel"]:focus {
background: transparent;
}
.adp-qty-field {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 8px;
}
.adp-purpose {
margin-bottom: 18px;
}
.adp-purpose-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
max-width: 540px;
}
.adp-radio {
display: flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 12px;
background: #fffaf1;
border: 1px solid #e5ddd0;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #4b5563;
cursor: pointer;
}
.adp-radio input {
accent-color: var(--adp-brown);
}
.adp-form-submit {
display: flex;
justify-content: center;
margin-top: 22px;
}
.adp-form-submit .adp-btn {
min-width: 180px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.adp-product-card {
grid-template-columns: 380px minmax(0, 1fr);
}
.adp-gallery-main {
height: 360px;
}
.adp-title {
font-size: 28px;
}
.adp-related-card {
flex: 0 0 calc((100% - 24px) / 3);
}
}
@media (max-width: 991px) {
.adp-product-card {
grid-template-columns: 1fr;
}
.adp-gallery-main {
height: 380px;
}
.adp-summary {
padding: 8px 0 4px;
}
.adp-title {
padding-right: 50px;
}
.adp-related-card {
flex: 0 0 calc((100% - 12px) / 2);
}
.adp-project-grid,
.adp-related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.application-detail-page {
padding: 14px 0 50px;
}
.adp-container {
width: calc(100% - 24px);
}
.adp-section {
margin-top: 22px;
}
.adp-section-title {
font-size: 23px;
}
.adp-breadcrumb {
font-size: 12px;
}
.adp-product-card {
padding: 12px;
gap: 18px;
}
.adp-gallery-main {
height: 300px;
}
.adp-title {
font-size: 24px;
}
.adp-short-description {
font-size: 14px;
}
.adp-actions {
flex-direction: column;
}
.adp-actions .adp-btn {
width: 100%;
}
.adp-btn {
font-size: 15px;
padding: 13px 20px;
}
.adp-info-card {
padding: 14px;
}
.adp-tab-panel {
padding: 14px;
}
.adp-prose {
font-size: 14px;
}
.adp-prose h2 {
font-size: 24px;
}
.adp-spec-row {
grid-template-columns: 1fr;
gap: 4px;
}
.adp-project-grid,
.adp-related-grid {
grid-template-columns: 1fr;
}
.adp-project-image {
height: 240px;
}
.adp-enquiry-card {
padding: 20px 14px 24px;
}
.adp-enquiry-title {
font-size: 24px;
}
.adp-form-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.adp-purpose-options {
grid-template-columns: 1fr;
}
.adp-form-submit .adp-btn {
width: 100%;
}
.adp-explore-title {
font-size: 21px;
}
.adp-related-card {
flex: 0 0 78%;
}
.adp-carousel {
padding: 0;
}
.adp-carousel-arrow {
width: 34px;
height: 34px;
}
.adp-carousel-prev {
left: 4px;
}
.adp-carousel-next {
right: 4px;
}
}
/* =========================================================
ADMIN ACTION BUTTONS
========================================================= */
.wk-action-group {
display: flex;
align-items: center;
gap: 8px;
}
.wk-edit-btn {
display: inline-block;
padding: 8px 14px;
border-radius: 8px;
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: 0.2s ease;
}
.wk-edit-btn:hover {
background: #1d4ed8;
color: #ffffff;
border-color: #1d4ed8;
}
/* =========================================================
MARKET AREA PAGE
========================================================= */
.market-area-section {
padding: 80px 0;
background: #f8f7f4;
}
.market-heading {
max-width: 750px;
margin: 0 auto 45px;
text-align: center;
}
.market-small-title {
color: #a46d36;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
.market-heading h1 {
font-size: 42px;
color: #202020;
margin: 10px 0 15px;
}
.market-heading p {
color: #666;
font-size: 16px;
line-height: 1.7;
}
.market-state-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.market-state-card {
background: #fff;
padding: 28px;
border: 1px solid #ece8e2;
transition: 0.3s ease;
}
.market-state-card:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.market-state-head {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 15px;
}
.market-state-head h2 {
font-size: 24px;
margin: 0;
color: #242424;
}
.market-state-head span {
font-size: 12px;
color: #a46d36;
font-weight: 600;
}
.state-description {
font-size: 14px;
line-height: 1.6;
color: #777;
}
.market-city-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin: 20px 0;
}
.market-city {
padding: 10px 12px;
background: #f8f7f4;
color: #333;
text-decoration: none;
display: flex;
justify-content: space-between;
font-size: 14px;
transition: 0.2s;
}
.market-city:hover {
background: #a46d36;
color: #fff;
}
.view-state {
display: inline-block;
margin-top: 5px;
color: #a46d36;
font-weight: 600;
text-decoration: none;
}
@media (max-width: 991px) {
.market-state-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.market-area-section {
padding: 50px 0;
}
.market-heading h1 {
font-size: 30px;
}
.market-state-grid {
grid-template-columns: 1fr;
}
}
.client-words-google {
display: flex;
align-items: center;
justify-content: center;
}
.google-review-img {
max-width: 110px;
height: auto;
object-fit: contain;
display: block;
}