@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700;800&family=Noto+Sans+Arabic:wght@400;500;700;800&display=swap");
:root {
--primary: #0E5A46;
--primary-light: #0B6B53;
--accent: #C7A25A;
--accent-dark: #9A7634;
--accent-glow: rgba(199,162,90,0.28);
--text: #F7F5EF;
--text-dark: #1E2A32;
--text-muted: #667782;
--bg: #F7F5EF;
--white: #ffffff;
--card-bg: #ffffff;
--green: #25D366;
--radius: 16px;
--shadow: 0 4px 24px rgba(0,0,0,0.08);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
--transition: 0.35s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans Arabic','Tajawal',sans-serif;background:var(--bg);color:var(--text-dark);line-height:1.7;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none} .navbar{position:fixed;top:0;width:100%;z-index:999;padding:12px 5%;display:flex;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.06);transition:var(--transition)}
.navbar.scrolled{box-shadow:var(--shadow);padding:8px 5%}
.nav-container{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1300px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.5rem;color:var(--primary)}
.logo-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));border-radius:12px;display:grid;place-items:center;color:#fff;font-size:1.2rem}
.logo-text span{display:block;font-size:.75rem;font-weight:500;color:var(--accent);letter-spacing:1px}
.nav-links{display:flex;gap:28px}
.nav-link{font-weight:500;font-size:1.05rem;color:var(--text-dark);position:relative;padding:4px 0;transition:var(--transition)}
.nav-link::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2.5px;background:var(--accent);border-radius:2px;transition:var(--transition)}
.nav-link:hover,.nav-link.active{color:var(--accent)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:10px 22px;border-radius:50px;font-weight:700;font-size:.95rem;transition:var(--transition)}
.nav-cta:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 6px 20px var(--accent-glow)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hamburger span{width:26px;height:3px;background:var(--primary);border-radius:3px;transition:var(--transition)}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,6px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)} .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 5% 60px;position:relative;background:linear-gradient(160deg,#073D32 0%,#0E5A46 50%,#1E2A32 100%);overflow:hidden}
.hero-overlay{position:absolute;inset:0;background:url(https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1920&q=80) center/cover;opacity:.12;mix-blend-mode:luminosity}
.hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.particle{position:absolute;width:4px;height:4px;background:var(--accent);border-radius:50%;opacity:.4;animation:floatUp linear infinite}
@keyframes floatUp{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:.6}90%{opacity:.3}100%{transform:translateY(-10vh) scale(1.2);opacity:0}}
.hero-content{position:relative;z-index:2;max-width:850px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(199,162,90,.18);border:1px solid rgba(199,162,90,.35);color:var(--accent);padding:8px 20px;border-radius:50px;font-size:.95rem;font-weight:600;margin-bottom:24px;animation:fadeInDown .8s ease}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);color:var(--text);line-height:1.35;margin-bottom:20px;animation:fadeInUp .9s ease}
.gradient-text{background:linear-gradient(135deg,var(--accent),#E7D3A1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:clamp(1rem,2vw,1.2rem);color:var(--text-muted);max-width:680px;margin:0 auto 32px;animation:fadeInUp 1.1s ease}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:48px;animation:fadeInUp 1.3s ease}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border-radius:50px;font-weight:700;font-size:1.05rem;font-family:inherit;border:none;cursor:pointer;transition:var(--transition)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;box-shadow:0 4px 20px var(--accent-glow)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px var(--accent-glow)}
.btn-outline{background:transparent;color:var(--text);border:2px solid rgba(255,255,255,.3)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
.btn-whatsapp{background:var(--green);color:#fff}
.btn-whatsapp:hover{background:#1ebe57;transform:translateY(-3px)}
.btn-lg{padding:16px 36px;font-size:1.15rem}
.hero-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;animation:fadeInUp 1.5s ease}
.hero-stat{text-align:center;color:var(--text)}
.stat-number{font-size:2.5rem;font-weight:900;color:var(--accent);display:block}
.stat-label{font-size:.9rem;color:var(--text-muted)}
.hero-stat-divider{width:1px;background:rgba(255,255,255,.15);align-self:stretch}
.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2}
.hero-scroll a{color:rgba(255,255,255,.4);font-size:1.5rem;animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}} .section-header{text-align:center;margin-bottom:56px}
.section-badge{display:inline-block;background:rgba(199,162,90,.14);color:var(--accent);padding:6px 18px;border-radius:50px;font-size:.9rem;font-weight:600;margin-bottom:12px}
.section-badge.light{background:rgba(199,162,90,.22)}
.section-title{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--primary);margin-bottom:12px;position:relative}
.section-title.light{color:#fff}
.section-subtitle{font-size:1.1rem;color:var(--text-muted);max-width:600px;margin:0 auto}
.section-subtitle.light{color:rgba(255,255,255,.7)} .services{padding:100px 0;background:var(--bg)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.service-card{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);border:1px solid rgba(0,0,0,.05)}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.service-img-wrapper{position:relative;overflow:hidden;height:220px}
.service-img{width:100%;height:100%;object-fit:cover;transition:var(--transition)}
.service-card:hover .service-img{transform:scale(1.08)}
.service-img-overlay{position:absolute;inset:0;background:rgba(10,22,40,.7);display:grid;place-items:center;opacity:0;transition:var(--transition)}
.service-card:hover .service-img-overlay{opacity:1}
.service-overlay-btn{padding:10px 28px;background:var(--accent);color:#fff;border-radius:50px;font-weight:700;transition:var(--transition)}
.service-overlay-btn:hover{background:var(--accent-dark)}
.service-content{padding:24px}
.service-icon-wrap{width:52px;height:52px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));border-radius:14px;display:grid;place-items:center;color:#fff;font-size:1.3rem;margin-bottom:16px}
.service-title{font-size:1.3rem;color:var(--primary);margin-bottom:8px;font-weight:700}
.service-desc{color:var(--text-muted);font-size:.95rem;margin-bottom:16px;line-height:1.7}
.service-features{display:flex;flex-direction:column;gap:6px}
.service-features li{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-dark)}
.service-features li i{color:var(--accent);font-size:.75rem} .why-us{padding:100px 0;background:linear-gradient(160deg,var(--primary) 0%,var(--primary-light) 100%);position:relative}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.feature-card{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:32px 28px;text-align:center;transition:var(--transition)}
.feature-card:hover{background:rgba(255,255,255,.12);transform:translateY(-6px);border-color:var(--accent)}
.feature-icon{width:64px;height:64px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));border-radius:18px;display:grid;place-items:center;color:#fff;font-size:1.5rem;margin:0 auto 18px}
.feature-card h3{color:#fff;font-size:1.2rem;margin-bottom:10px}
.feature-card p{color:rgba(255,255,255,.65);font-size:.95rem} .testimonials{padding:100px 0;background:var(--white)}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.testimonial-card{background:var(--bg);border-radius:var(--radius);padding:28px;position:relative;transition:var(--transition);border:1px solid transparent}
.testimonial-card:hover{box-shadow:var(--shadow-lg);border-color:var(--accent);transform:translateY(-4px)}
.testimonial-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.client-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.2rem;flex-shrink:0}
.client-info h4{font-size:1.05rem;color:var(--primary)}
.client-info p{font-size:.85rem;color:var(--text-muted)}
.stars{color:#fbbf24;font-size:1rem;margin-bottom:12px}
.testimonial-text{font-size:.95rem;color:var(--text-dark);line-height:1.8;font-style:italic}
.quote-icon{position:absolute;bottom:16px;left:20px;font-size:2.5rem;color:var(--accent);opacity:.1} .cta-section{padding:80px 0;background:linear-gradient(135deg,var(--accent),var(--accent-dark));text-align:center}
.cta-content h2{font-size:clamp(1.6rem,3.5vw,2.4rem);color:#fff;margin-bottom:14px}
.cta-content p{color:rgba(255,255,255,.85);font-size:1.1rem;max-width:600px;margin:0 auto 28px}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta-actions .btn-primary{background:#fff;color:var(--accent-dark)}
.cta-actions .btn-primary:hover{background:var(--primary);color:#fff} footer{background:var(--primary);color:var(--text);padding:80px 0 0}
.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-logo{display:flex;align-items:center;gap:10px;font-size:1.4rem;font-weight:800;color:#fff;margin-bottom:16px}
.footer-logo i{color:var(--accent);font-size:1.6rem}
.footer-about p{color:rgba(255,255,255,.6);font-size:.95rem;line-height:1.8;margin-bottom:20px}
.footer-social{display:flex;gap:12px}
.footer-social a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:rgba(255,255,255,.7);font-size:1.1rem;transition:var(--transition)}
.footer-social a:hover{background:var(--accent);color:#fff;transform:translateY(-3px)}
.footer-col h3{color:var(--accent);font-size:1.2rem;margin-bottom:20px;font-weight:700}
.footer-links li{margin-bottom:10px}
.footer-links a{color:rgba(255,255,255,.6);font-size:.95rem;display:flex;align-items:center;gap:8px;transition:var(--transition)}
.footer-links a:hover{color:var(--accent);padding-right:6px}
.footer-contact li{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:rgba(255,255,255,.6);font-size:.95rem}
.footer-contact li i{color:var(--accent);font-size:1rem;width:20px;text-align:center}
.footer-contact a{color:rgba(255,255,255,.6);transition:var(--transition)}
.footer-contact a:hover{color:var(--accent)}
.footer-bottom{text-align:center;padding:24px 0;color:rgba(255,255,255,.4);font-size:.9rem} .floating-actions{position:fixed;bottom:28px;right:28px;display:flex;flex-direction:column;gap:14px;z-index:998}
.float-btn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:26px;box-shadow:0 4px 20px rgba(0,0,0,.2);transition:var(--transition);position:relative}
.float-whatsapp{background:linear-gradient(135deg,#25D366,#128C7E)}
.float-call{background:linear-gradient(135deg,var(--accent),var(--accent-dark))}
.float-btn:hover{transform:scale(1.12)}
.float-btn::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid;opacity:0;animation:pulse 2s infinite}
.float-whatsapp::after{border-color:#25D366}
.float-call::after{border-color:var(--accent);animation-delay:1s}
.float-tooltip{position:absolute;right:68px;background:var(--primary);color:#fff;padding:6px 14px;border-radius:8px;font-size:.8rem;white-space:nowrap;opacity:0;transform:translateX(10px);transition:var(--transition);pointer-events:none}
.float-btn:hover .float-tooltip{opacity:1;transform:translateX(0)} .back-to-top{position:fixed;bottom:28px;left:28px;width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:1.1rem;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(20px);transition:var(--transition);z-index:998;box-shadow:var(--shadow)}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--accent);transform:translateY(-3px)} @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.4);opacity:0}}
.reveal-card{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
.reveal-card.revealed{opacity:1;transform:translateY(0)} .gallery{padding:100px 0;background:var(--white)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;grid-auto-flow:dense}
.gallery-item{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;height:280px;box-shadow:var(--shadow)}
.gallery-item:nth-child(2),.gallery-item:nth-child(5){grid-row:span 2;height:580px}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.gallery-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(10,22,40,0.95), rgba(10,22,40,0.1));display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:30px;opacity:0;transition:var(--transition);color:#fff}
.gallery-overlay i{font-size:2.5rem;color:var(--accent);margin-bottom:15px;transform:translateY(-20px);transition:var(--transition)}
.gallery-overlay span{font-size:1.2rem;font-weight:700;transform:translateY(20px);transition:var(--transition);text-align:center}
.gallery-item:hover img{transform:scale(1.12)}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-item:hover .gallery-overlay i,.gallery-item:hover .gallery-overlay span{transform:translateY(0)} .lightbox{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:rgba(10,22,40,0.98);backdrop-filter:blur(10px);opacity:0;transition:opacity 0.4s ease}
.lightbox.show{display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:1}
.lightbox-content{margin:auto;display:block;max-width:90%;max-height:80vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.6);transform:scale(0.9);transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.lightbox.show .lightbox-content{transform:scale(1)}
.lightbox-close{position:absolute;top:30px;right:40px;color:rgba(255,255,255,0.7);font-size:45px;font-weight:bold;cursor:pointer;transition:var(--transition);z-index:10000;line-height:1}
.lightbox-close:hover{color:var(--accent);transform:rotate(90deg)}
#lightbox-caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#fff;padding:20px 0;font-size:1.3rem;font-weight:600;letter-spacing:1px} @media(max-width:992px){
.footer-content{grid-template-columns:1fr 1fr}
.footer-about{grid-column:1/-1}
}
@media(max-width:768px){
.nav-links,.nav-cta{display:none}
.hamburger{display:flex}
.nav-links.open{display:flex;flex-direction:column;position:absolute;top:100%;right:0;width:100%;background:var(--white);padding:20px 5%;box-shadow:var(--shadow-lg);gap:0}
.nav-links.open .nav-link{padding:14px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.hero{padding:120px 5% 60px}
.hero-stats{gap:24px}
.stat-number{font-size:2rem}
.services,.why-us,.testimonials{padding:60px 0}
.footer-content{grid-template-columns:1fr}
.cta-section{padding:50px 0}
.floating-actions{bottom:20px;right:16px}
.float-btn{width:52px;height:52px;font-size:22px}
.back-to-top{left:16px;bottom:20px;width:42px;height:42px}
.gallery-item:nth-child(2),.gallery-item:nth-child(5){grid-row:auto;height:280px}
}
.articles-page { padding: 140px 0 80px; background: var(--bg); }
.articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: stretch; }
.article-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; min-height: 100%; }
.article-body { padding: 18px; text-align: center; }
.article-title { font-size: 1.2rem; color: var(--primary); margin-bottom: 8px; }
.article-excerpt { color: var(--text-muted); }
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { max-height: 54px; width: auto; }
.page-numbers { display: inline-flex; gap: 8px; list-style: none; padding: 0; }
.page-numbers li a, .page-numbers li span {
display: inline-flex; min-width: 38px; height: 38px; align-items: center; justify-content: center;
border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; color: var(--primary); padding: 0 10px;
}
.page-numbers .current { background: var(--accent); color: #fff; border-color: var(--accent); }
.single-article { max-width: 950px; margin: 0 auto; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.single-cover img { width: 100%; max-height: 460px; object-fit: cover; }
.single-body { padding: 30px; }
.single-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--text-muted); font-size: .95rem; margin-bottom: 14px; }
.single-title { font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--primary); margin-bottom: 16px; line-height: 1.4; }
.single-content { color: #334155; line-height: 2; font-size: 1.05rem; }
.single-content p, .single-content ul, .single-content ol, .single-content h2, .single-content h3 { margin-bottom: 14px; }
.single-content img { border-radius: 12px; margin: 18px auto; }
.single-tags { margin-top: 20px; color: var(--text-muted); }
.single-share { margin-top: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.single-nav { max-width: 950px; margin: 16px auto 0; display: flex; justify-content: space-between; gap: 12px; }
.single-nav a { display: inline-flex; padding: 10px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; color: var(--primary); }
.single-related { max-width: 950px; margin: 30px auto 0; }
.single-related h3 { margin-bottom: 16px; color: var(--primary); }
.reading-progress {
position: fixed; top: 0; right: 0; width: 0; height: 4px;
background: linear-gradient(90deg,var(--accent),var(--accent-dark)); z-index: 2000;
} .service-card,
.gallery-item,
.article-card,
.testimonial-card {
border-radius: 14px !important;
overflow: hidden !important;
border: 1px solid #e7edf5 !important;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
}
.service-card:hover,
.gallery-item:hover,
.article-card:hover,
.testimonial-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14) !important;
}
.services-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 20px !important;
}
.service-img-wrapper {
height: 210px !important;
background: #f1f5f9 !important;
}
.service-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
.service-content {
padding: 14px 16px !important;
}
.service-title {
font-size: 20px !important;
line-height: 1.35 !important;
margin-bottom: 8px !important;
}
.service-desc {
font-size: 13px !important;
line-height: 1.65 !important;
margin-bottom: 0 !important;
}
.gallery-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
grid-auto-flow: row !important;
}
.gallery-item {
height: 280px !important;
}
.gallery-item:nth-child(2),
.gallery-item:nth-child(5) {
grid-row: auto !important;
height: 280px !important;
}
.gallery-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
.article-card img {
width: 100%;
height: 210px;
object-fit: cover;
}
@media (max-width: 992px) {
.services-grid,
.gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 768px) {
.services-grid,
.gallery-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.service-img-wrapper {
height: 190px !important;
}
.gallery-item {
height: 240px !important;
}
.service-title {
font-size: 18px !important;
}
} .article-card img,
.article-image-link img {
width: 100%;
height: 210px;
object-fit: cover;
display: block;
}
.article-image-link { display: block; }
.article-meta { color: var(--text-muted); font-size: .9rem; margin-bottom: 8px; }
.article-readmore {
display: inline-flex;
margin-top: 12px;
color: var(--accent);
font-weight: 700;
}
.article-title a,
.service-title a { color: inherit; }
.pagination-wrap { text-align: center; margin-top: 32px; }
.nav-links .menu-item { list-style: none; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: inherit; }
.motrafic-breadcrumbs { margin-bottom: 20px; font-size: .95rem; color: var(--text-muted); }
.search-page-form,
.not-found-actions { margin: 24px auto; max-width: 760px; text-align: center; }
.not-found-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.search-page-form form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.search-page-form input[type="search"],
.search-page-form input[type="text"] {
min-width: min(420px, 100%);
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 12px 14px;
}
.search-page-form input[type="submit"],
.search-page-form button[type="submit"] {
border: 0;
border-radius: 10px;
padding: 12px 18px;
background: var(--accent);
color: #fff;
cursor: pointer;
} .service-detail-page,
.service-archive-page,
.project-detail-page,
.project-archive-page {
padding: 110px 0 70px;
background: #f8fafc;
}
.service-detail,
.project-detail {
display: block;
}
.service-detail-hero {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
gap: 28px;
align-items: center;
background: #fff;
border: 1px solid #e7edf5;
border-radius: 20px;
padding: 28px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
margin-bottom: 28px;
}
.service-detail-copy .single-title {
margin: 12px 0 14px;
}
.service-lead {
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1.9;
margin-bottom: 22px;
}
.service-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.service-actions-center {
justify-content: center;
}
.btn-whatsapp {
background: #25d366;
color: #fff !important;
border: 1px solid #25d366;
}
.service-detail-image img,
.project-hero img {
width: 100%;
height: 360px;
object-fit: cover;
border-radius: 16px;
display: block;
}
.service-content-main,
.project-content-main {
background: #fff;
border: 1px solid #e7edf5;
border-radius: 18px;
padding: 28px;
margin-bottom: 28px;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.service-feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-bottom: 28px;
}
.service-feature-card,
.service-steps,
.service-cta-box {
background: #fff;
border: 1px solid #e7edf5;
border-radius: 18px;
padding: 24px;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.service-feature-card i {
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(0, 100, 80, .08);
color: var(--accent);
font-size: 1.25rem;
margin-bottom: 12px;
}
.service-feature-card h2,
.service-steps h2,
.service-cta-box h2,
.service-related h2 {
font-size: 1.35rem;
margin-bottom: 10px;
}
.service-feature-card p,
.service-cta-box p,
.service-steps li {
color: var(--text-muted);
line-height: 1.8;
}
.service-steps {
margin-bottom: 28px;
}
.service-steps ol {
margin: 0;
padding-right: 22px;
}
.service-cta-box {
text-align: center;
margin-bottom: 34px;
}
.archive-cta-box {
margin-top: 36px;
}
.service-img-wrapper {
display: block;
}
.project-hero {
position: relative;
background: #fff;
border: 1px solid #e7edf5;
border-radius: 20px;
overflow: hidden;
margin-bottom: 28px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}
.project-hero img {
border-radius: 0;
height: 430px;
}
.project-hero-title {
position: absolute;
right: 24px;
left: 24px;
bottom: 24px;
background: rgba(255, 255, 255, .94);
border-radius: 16px;
padding: 20px;
}
.project-archive-grid .gallery-item {
height: 310px !important;
}
@media (max-width: 992px) {
.service-detail-hero,
.service-feature-grid {
grid-template-columns: 1fr;
}
.service-detail-image img,
.project-hero img {
height: 280px;
}
}
@media (max-width: 768px) {
.service-detail-page,
.service-archive-page,
.project-detail-page,
.project-archive-page {
padding-top: 90px;
}
.service-detail-hero,
.service-content-main,
.project-content-main,
.service-feature-card,
.service-steps,
.service-cta-box {
padding: 18px;
}
.project-hero-title {
position: static;
margin: 0;
border-radius: 0;
}
} body { font-family: 'Noto Sans Arabic','Tajawal',sans-serif; }
.logo-text, .section-title, .hero h1, .service-title, .feature-card h3 { font-family: 'Noto Kufi Arabic','Noto Sans Arabic',sans-serif; }
.logo { font-size: 1.18rem; }
.logo-text span { letter-spacing: 0; }
.logo-icon { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.hero { background: linear-gradient(160deg,#073D32 0%,#0E5A46 52%,#1E2A32 100%); }
.hero-overlay { opacity: .10; mix-blend-mode: soft-light; }
.static-service-card .service-content { min-height: 210px; display: flex; flex-direction: column; align-items: flex-start; text-align: right; }
.static-service-card .service-icon-wrap { margin-bottom: 14px; }
.areas-section { padding: 90px 0; background: #fff; }
.areas-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; }
.area-pill { display:flex; align-items:center; justify-content:center; gap:8px; padding: 15px 18px; border-radius: 16px; background: #F7F5EF; border: 1px solid rgba(14,90,70,.12); color: var(--primary); font-weight: 800; box-shadow: 0 8px 22px rgba(14,90,70,.08); }
.area-pill i { color: var(--accent); }
.blog-preview-section { background: #F7F5EF; }
.cta-section { background: linear-gradient(135deg,var(--primary),#0B6B53); }
.footer-logo { font-size: 1.15rem; }
@media(max-width:768px){ .logo{font-size:1rem}.services-grid{grid-template-columns:1fr!important}.areas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.static-service-card .service-content{min-height:auto} } .logo .custom-logo-link,
.logo img.custom-logo { display: none !important; }
.navbar .nav-links,
.navbar .nav-links ul,
.footer-links { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.navbar .nav-links .sub-menu,
.navbar .nav-links .children { display: none !important; }
.navbar .nav-links > li { display: inline-flex !important; align-items: center !important; }
.article-card img,
.service-img,
.single-cover img,
.service-detail-image img,
.project-hero img {
background: linear-gradient(135deg, #0E5A46 0%, #1E2A32 62%, #C7A25A 100%);
}
.article-card img.is-fallback-image,
.service-img.is-fallback-image,
.single-cover img.is-fallback-image,
.service-detail-image img.is-fallback-image,
.project-hero img.is-fallback-image {
object-fit: cover !important;
}
@media (max-width: 992px) {
.nav-container { gap: 10px; }
.nav-links { gap: 16px; }
.nav-link { font-size: .95rem; }
} .logo { gap: 12px !important; align-items: center !important; min-width: 260px; }
.logo-emblem { width: 56px; height: 56px; display: inline-grid; place-items: center; flex: 0 0 56px; filter: drop-shadow(0 10px 18px rgba(7,61,50,.18)); }
.logo-emblem img { width: 100%; height: 100%; display: block; }
.logo-text { line-height: 1.25 !important; color: var(--primary) !important; font-weight: 900 !important; }
.logo-text span { margin-top: 4px; color: var(--accent) !important; font-size: .72rem !important; font-weight: 700 !important; }
.footer-logo { align-items: center !important; gap: 12px !important; }
.footer-logo .footer-logo-emblem { width: 42px; height: 42px; display: inline-grid; place-items: center; }
.footer-logo .footer-logo-emblem img { width: 100%; height: 100%; display: block; }
.footer-logo i { display: none !important; }
.services .section-header { margin-bottom: 42px !important; }
.services-grid-static { align-items: stretch !important; }
.static-service-card { position: relative !important; overflow: hidden !important; background: linear-gradient(180deg,#ffffff 0%,#fbfcfa 100%) !important; border: 1px solid rgba(14,90,70,.12) !important; min-height: 225px !important; }
.static-service-card::before { content: ''; position: absolute; inset-inline: 28px; top: 0; height: 4px; border-radius: 0 0 16px 16px; background: linear-gradient(90deg,var(--primary),var(--accent)); opacity: 0; transform: scaleX(.35); transition: .35s ease; }
.static-service-card:hover::before { opacity: 1; transform: scaleX(1); }
.static-service-card .service-content,
.service-card .service-content { min-height: 225px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 30px 24px !important; }
.static-service-card .service-icon-wrap,
.service-card .service-icon-wrap { width: 72px !important; height: 72px !important; margin: 0 auto 18px !important; border-radius: 22px !important; color: #fff !important; font-size: 1.55rem !important; background: linear-gradient(145deg,#0E5A46 0%,#073D32 56%,#C7A25A 100%) !important; box-shadow: 0 16px 34px rgba(14,90,70,.18), inset 0 1px 0 rgba(255,255,255,.24) !important; position: relative !important; }
.static-service-card .service-icon-wrap::after,
.service-card .service-icon-wrap::after { content:''; position:absolute; inset: 8px; border:1px solid rgba(255,255,255,.24); border-radius: 17px; pointer-events:none; }
.static-service-card .service-icon-wrap i,
.service-card .service-icon-wrap i { transform: translateY(0); filter: drop-shadow(0 4px 5px rgba(0,0,0,.18)); }
.static-service-card .service-title,
.service-card .service-title { width: 100%; margin: 0 0 10px !important; color: #075443 !important; font-size: 22px !important; font-weight: 900 !important; text-align: center !important; }
.static-service-card .service-desc,
.service-card .service-desc { max-width: 315px; margin: 0 auto !important; color: #667085 !important; font-size: 14px !important; line-height: 1.9 !important; text-align: center !important; }
.static-service-card:hover .service-icon-wrap { transform: translateY(-4px) scale(1.04); }
.customer-reviews { padding: 96px 0; background: radial-gradient(circle at 12% 8%,rgba(199,162,90,.18),transparent 28%), linear-gradient(180deg,#F7F5EF 0%,#fff 100%); position: relative; overflow: hidden; }
.customer-reviews::before { content:''; position:absolute; width:420px; height:420px; border-radius:50%; background:rgba(14,90,70,.06); right:-180px; top:40px; }
.reviews-summary { display:grid; grid-template-columns: 1.05fr 2fr; gap: 26px; align-items: stretch; position: relative; z-index: 1; }
.rating-panel { background: linear-gradient(145deg,#073D32,#0E5A46); color:#fff; border-radius: 28px; padding: 34px 28px; box-shadow: 0 20px 50px rgba(7,61,50,.18); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height: 280px; }
.rating-number { font-size: 4rem; line-height: 1; font-weight: 900; color:#fff; letter-spacing:-1px; }
.rating-stars { display:flex; gap:5px; justify-content:center; color:#F5C76A; font-size:1.25rem; margin: 16px 0 10px; }
.rating-panel h3 { color:#fff; font-size:1.35rem; margin:0 0 8px; }
.rating-panel p { color:rgba(255,255,255,.75); margin:0; line-height:1.8; }
.reviews-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.review-card { position:relative; background:#fff; border:1px solid rgba(14,90,70,.12); border-radius:24px; padding:26px 22px; box-shadow: 0 12px 30px rgba(15,23,42,.08); transition:.35s ease; overflow:hidden; }
.review-card::before { content:'\f10e'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; left:18px; top:16px; color:rgba(199,162,90,.12); font-size:3.4rem; line-height:1; }
.review-card:hover { transform: translateY(-7px); box-shadow:0 20px 44px rgba(14,90,70,.14); border-color:rgba(199,162,90,.45); }
.review-top { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.review-avatar { width:52px; height:52px; border-radius:18px; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; display:grid; place-items:center; font-weight:900; font-size:1.25rem; box-shadow:0 10px 22px rgba(14,90,70,.18); }
.review-client h4 { color:#073D32; font-size:1.05rem; margin:0 0 3px; }
.review-client span { color:#8A6A2D; font-size:.86rem; font-weight:700; }
.review-stars { color:#F2B94B; font-size:.92rem; margin-bottom:12px; }
.review-card p { color:#475467; line-height:1.9; font-size:.95rem; margin:0; }
.reviews-badges { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top: 24px; position:relative; z-index:1; }
.review-badge { display:inline-flex; align-items:center; gap:8px; border-radius:999px; background:#fff; color:#075443; border:1px solid rgba(14,90,70,.12); padding:10px 16px; font-weight:800; box-shadow:0 8px 22px rgba(15,23,42,.06); }
.review-badge i { color:var(--accent); }
@media (max-width: 992px) {
.reviews-summary { grid-template-columns: 1fr; }
.reviews-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.logo { min-width: auto; }
}
@media (max-width: 768px) {
.logo-emblem { width:46px; height:46px; flex-basis:46px; }
.reviews-grid { grid-template-columns: 1fr; }
.customer-reviews { padding:64px 0; }
.static-service-card .service-content, .service-card .service-content { min-height: auto !important; padding: 26px 20px !important; }
} .logo {
min-width: 310px !important;
padding: 7px 10px 7px 14px !important;
border-radius: 20px !important;
background: rgba(255,255,255,.72) !important;
border: 1px solid rgba(14,90,70,.10) !important;
box-shadow: 0 8px 26px rgba(7,61,50,.08) !important;
}
.logo:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(7,61,50,.13) !important; }
.logo-emblem { width: 62px !important; height: 62px !important; flex: 0 0 62px !important; filter: drop-shadow(0 12px 18px rgba(7,61,50,.20)) !important; }
.logo-text { font-size: 1.04rem !important; white-space: normal !important; max-width: 220px !important; }
.logo-text span { display:block !important; font-size: .70rem !important; color:#9A7129 !important; }
.footer-logo-emblem { filter: drop-shadow(0 8px 14px rgba(7,61,50,.22)); }
.motrafic-svg-icon,
.nav-cta-icon,
.footer-contact-icon,
.float-icon-svg,
.backtop-icon-svg {
width: 1.15em;
height: 1.15em;
display: inline-block;
vertical-align: -0.18em;
flex: 0 0 auto;
}
.nav-cta { gap: 8px !important; }
.nav-cta-icon { font-size: 18px; color: currentColor; }
.footer-contact-icon { color: var(--accent); font-size: 18px; margin-inline-end: 8px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 8px; }
.floating-actions {
right: 24px !important;
bottom: 28px !important;
gap: 16px !important;
z-index: 9999 !important;
}
.float-btn {
width: 66px !important;
height: 66px !important;
display: grid !important;
place-items: center !important;
border-radius: 50% !important;
color: #fff !important;
text-decoration: none !important;
font-size: 30px !important;
line-height: 1 !important;
isolation: isolate !important;
border: 5px solid rgba(255,255,255,.78) !important;
box-shadow: 0 18px 38px rgba(15,23,42,.18), 0 0 0 1px rgba(14,90,70,.08) !important;
overflow: visible !important;
}
.float-whatsapp { background: linear-gradient(145deg,#23D366 0%,#12A767 55%,#087D61 100%) !important; }
.float-call { background: linear-gradient(145deg,#D1AA58 0%,#B88732 55%,#8D641E 100%) !important; }
.float-icon-svg {
width: 31px !important;
height: 31px !important;
color: #fff !important;
display: block !important;
filter: drop-shadow(0 3px 5px rgba(0,0,0,.18));
}
.float-btn::before {
content: '';
position: absolute;
inset: -9px;
border-radius: inherit;
border: 2px solid currentColor;
opacity: .22;
pointer-events: none;
}
.float-btn::after { display: none !important; }
.float-btn:hover { transform: translateY(-4px) scale(1.06) !important; }
.float-tooltip {
right: 78px !important;
top: 50% !important;
transform: translateY(-50%) translateX(10px) !important;
background: #073D32 !important;
color: #fff !important;
box-shadow: 0 10px 26px rgba(7,61,50,.20);
}
.float-btn:hover .float-tooltip { transform: translateY(-50%) translateX(0) !important; }
.back-to-top { display: grid !important; place-items: center !important; }
.backtop-icon-svg { width: 24px !important; height: 24px !important; }
.review-card::before { content:'”' !important; font-family: Georgia, serif !important; font-weight: 900 !important; font-size: 5rem !important; line-height: .8 !important; color: rgba(199,162,90,.14) !important; }
@media (max-width: 768px) {
.logo { min-width: 0 !important; padding: 6px 8px !important; }
.logo-emblem { width: 50px !important; height: 50px !important; flex-basis: 50px !important; }
.logo-text { font-size: .88rem !important; max-width: 150px !important; }
.logo-text span { font-size: .62rem !important; }
.floating-actions { right: 14px !important; bottom: 18px !important; gap: 12px !important; }
.float-btn { width: 58px !important; height: 58px !important; font-size: 26px !important; border-width: 4px !important; }
.float-icon-svg { width: 27px !important; height: 27px !important; }
}
.btn-svg-icon { width: 1.05em; height: 1.05em; display:inline-block; vertical-align:-0.16em; margin-inline-end: 6px; flex:0 0 auto; }
[dir="rtl"] .btn-svg-icon { margin-inline-end: 0; margin-inline-start: 6px; }
.btn { gap: 8px; }
.service-icon-svg { width: 34px !important; height: 34px !important; color: #fff !important; display: block !important; filter: drop-shadow(0 4px 5px rgba(0,0,0,.18)); }
.static-service-card .service-icon-wrap, .service-card .service-icon-wrap { display: grid !important; place-items: center !important; } body { background:#F6F3EA; }
.navbar {
padding: 10px 4% !important;
background: rgba(255,255,255,.96) !important;
border-bottom: 1px solid rgba(14,90,70,.10) !important;
box-shadow: 0 10px 30px rgba(15,23,42,.06) !important;
}
.navbar.scrolled { padding: 7px 4% !important; }
.nav-container { max-width: 1220px !important; gap: 22px !important; }
.logo {
min-width: 260px !important;
max-width: 330px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
gap: 10px !important;
}
.logo:hover { transform:none !important; box-shadow:none !important; }
.logo-emblem { width: 54px !important; height: 54px !important; flex: 0 0 54px !important; filter: drop-shadow(0 12px 20px rgba(7,61,50,.18)) !important; }
.logo-text { color:#073D32 !important; font-size: .98rem !important; line-height:1.35 !important; font-weight: 900 !important; max-width: 250px !important; }
.logo-text span { color:#9A7129 !important; font-size:.70rem !important; font-weight:800 !important; }
.nav-links { display:flex !important; align-items:center !important; justify-content:center !important; gap: 4px !important; flex: 1 1 auto !important; }
.navbar .nav-links > li { display:flex !important; }
.nav-link {
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height: 42px !important;
padding: 9px 13px !important;
border-radius: 999px !important;
color:#1E2A32 !important;
font-size: .91rem !important;
font-weight: 800 !important;
transition: .25s ease !important;
white-space: nowrap !important;
}
.nav-link::after { display:none !important; }
.nav-link:hover, .nav-link.active { color:#073D32 !important; background:rgba(14,90,70,.08) !important; }
.nav-cta {
flex: 0 0 auto !important;
min-height: 44px !important;
padding: 10px 18px !important;
background: linear-gradient(135deg,#C7A25A,#A7792C) !important;
box-shadow: 0 10px 24px rgba(167,121,44,.22) !important;
}
.hamburger { border:1px solid rgba(14,90,70,.12) !important; border-radius:14px !important; background:#fff !important; }
.services { background: linear-gradient(180deg,#F7F5EF 0%,#FFFFFF 100%) !important; }
.service-image-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 26px !important; }
.image-service-card {
display:flex !important;
flex-direction:column !important;
min-height: 430px !important;
border-radius: 26px !important;
border: 1px solid rgba(14,90,70,.11) !important;
background:#fff !important;
box-shadow: 0 16px 44px rgba(15,23,42,.08) !important;
overflow: hidden !important;
}
.image-service-card::before { display:none !important; }
.image-service-card:hover { transform: translateY(-8px) !important; border-color: rgba(199,162,90,.55) !important; box-shadow:0 26px 60px rgba(14,90,70,.15) !important; }
.image-service-card .service-visual,
.image-service-card .service-img-wrapper {
height: 215px !important;
width: 100% !important;
background: #F7F5EF !important;
border-radius: 0 !important;
position: relative !important;
overflow: hidden !important;
}
.image-service-card .service-img { width:100% !important; height:100% !important; object-fit:cover !important; transform:none !important; }
.image-service-card:hover .service-img { transform: scale(1.035) !important; }
.image-service-card .service-content {
min-height: 0 !important;
flex: 1 1 auto !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
text-align:center !important;
padding: 26px 22px 28px !important;
position: relative !important;
}
.image-service-card .service-icon-wrap {
width: 64px !important;
height: 64px !important;
border-radius: 20px !important;
margin: -58px auto 18px !important;
background: linear-gradient(145deg,#0E5A46,#073D32) !important;
border: 5px solid #fff !important;
box-shadow: 0 16px 34px rgba(7,61,50,.22) !important;
z-index: 2 !important;
}
.image-service-card .service-icon-wrap::after { display:none !important; }
.image-service-card .service-title { color:#073D32 !important; font-size: 22px !important; margin-bottom: 8px !important; }
.image-service-card .service-desc { color:#667782 !important; font-size: 14px !important; line-height:1.9 !important; max-width:310px !important; }
.image-service-card .service-img-overlay { background: linear-gradient(180deg,rgba(7,61,50,0) 0%,rgba(7,61,50,.68) 100%) !important; opacity:0 !important; align-items:flex-end !important; padding-bottom: 22px !important; }
.image-service-card:hover .service-img-overlay { opacity:1 !important; }
.image-service-card .service-overlay-btn { background:#fff !important; color:#073D32 !important; font-size:.9rem !important; box-shadow:0 10px 22px rgba(7,61,50,.18) !important; }
.service-icon-svg, .feature-svg-icon, .hero-badge-icon, .review-badge-icon, .area-icon-svg { display:block !important; }
.hero-badge-icon { width:1.1em !important; height:1.1em !important; color:currentColor !important; }
.area-icon-svg { width:18px !important; height:18px !important; color:#C7A25A !important; }
.why-us-redesigned {
background: radial-gradient(circle at 10% 12%, rgba(199,162,90,.18), transparent 30%), linear-gradient(180deg,#FFFFFF 0%,#F7F5EF 100%) !important;
padding: 96px 0 !important;
}
.why-us-redesigned .section-title { color:#073D32 !important; }
.why-us-redesigned .section-subtitle { color:#667782 !important; }
.professional-features-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 22px !important; }
.professional-feature-card {
background:#fff !important;
border:1px solid rgba(14,90,70,.10) !important;
border-radius: 26px !important;
padding: 32px 28px !important;
text-align:center !important;
box-shadow:0 14px 40px rgba(15,23,42,.07) !important;
position:relative !important;
overflow:hidden !important;
}
.professional-feature-card::before { content:''; position:absolute; inset-inline:0; top:0; height:5px; background:linear-gradient(90deg,#0E5A46,#C7A25A); opacity:.9; }
.professional-feature-card:hover { transform:translateY(-7px) !important; border-color:rgba(199,162,90,.55) !important; box-shadow:0 24px 58px rgba(14,90,70,.14) !important; }
.professional-feature-card .feature-icon {
width:72px !important;
height:72px !important;
border-radius:24px !important;
margin:0 auto 18px !important;
background: linear-gradient(145deg,#0E5A46,#073D32) !important;
color:#fff !important;
display:grid !important;
place-items:center !important;
box-shadow:0 16px 34px rgba(7,61,50,.19) !important;
}
.feature-svg-icon { width:36px !important; height:36px !important; color:#fff !important; }
.professional-feature-card h3 { color:#073D32 !important; font-size:1.18rem !important; margin-bottom:9px !important; }
.professional-feature-card p { color:#667782 !important; line-height:1.9 !important; font-size:.94rem !important; }
.stars-text { letter-spacing: 1px; color:#F2B94B; font-size:1rem; font-weight:900; }
.review-badge-icon { width:20px !important; height:20px !important; color:#C7A25A !important; }
.review-stars, .rating-stars { display:flex; justify-content:flex-start; align-items:center; color:#F2B94B; }
.rating-stars { justify-content:center; }
.review-card::before { content:'”' !important; font-family: Georgia, serif !important; }
@media (max-width: 1120px) {
.nav-container { gap: 12px !important; }
.logo { min-width: 225px !important; max-width: 260px !important; }
.logo-text { font-size: .88rem !important; max-width: 195px !important; }
.nav-link { font-size: .82rem !important; padding: 8px 9px !important; }
.nav-cta { padding: 9px 13px !important; }
}
@media (max-width: 992px) {
.service-image-grid, .professional-features-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.nav-links, .nav-cta { display:none !important; }
.hamburger { display:flex !important; }
.nav-links.open { display:flex !important; flex-direction:column !important; position:absolute !important; top:100% !important; right:4% !important; left:4% !important; width:auto !important; background:#fff !important; border:1px solid rgba(14,90,70,.10) !important; border-radius:22px !important; padding:14px !important; box-shadow:0 24px 60px rgba(15,23,42,.14) !important; gap:6px !important; align-items:stretch !important; }
.nav-links.open > li { width:100% !important; display:block !important; }
.nav-links.open .nav-link { width:100% !important; justify-content:flex-start !important; padding:13px 16px !important; }
}
@media (max-width: 768px) {
.logo { min-width:0 !important; max-width: 240px !important; }
.logo-emblem { width:46px !important; height:46px !important; flex-basis:46px !important; }
.logo-text { font-size:.82rem !important; max-width: 170px !important; }
.service-image-grid, .professional-features-grid { grid-template-columns: 1fr !important; }
.image-service-card { min-height:auto !important; }
.image-service-card .service-visual, .image-service-card .service-img-wrapper { height: 210px !important; }
.why-us-redesigned { padding:64px 0 !important; }
} :root {
--brand-green: #073D32;
--brand-green-2: #0E5A46;
--brand-gold: #C7A25A;
--brand-gold-2: #A87525;
--brand-cream: #F8F5EC;
--brand-ink: #17242B;
} .navbar {
padding: 12px 4% !important;
background: rgba(255,255,255,.93) !important;
backdrop-filter: blur(18px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
border-bottom: 1px solid rgba(7,61,50,.08) !important;
box-shadow: 0 14px 42px rgba(15,23,42,.07) !important;
}
.nav-container { max-width: 1240px !important; gap: 18px !important; }
.logo { min-width: 285px !important; max-width: 355px !important; gap: 11px !important; }
.logo-emblem { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; }
.logo-emblem img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.logo-text { color: var(--brand-green) !important; font-weight: 900 !important; font-size: .96rem !important; letter-spacing: -.2px !important; }
.logo-text span { color: var(--brand-gold-2) !important; font-weight: 800 !important; font-size: .68rem !important; margin-top: 2px !important; }
.nav-links {
flex: 1 1 auto !important;
justify-content: center !important;
gap: 7px !important;
padding: 7px !important;
background: #F7F5EF !important;
border: 1px solid rgba(7,61,50,.08) !important;
border-radius: 999px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.navbar .nav-links,
.navbar .nav-links ul,
.navbar .nav-links li,
.navbar .nav-links .sub-menu,
.navbar .nav-links .children {
list-style: none !important;
}
.navbar .nav-links .sub-menu,
.navbar .nav-links .children { display: none !important; }
.nav-link {
min-height: 38px !important;
padding: 8px 14px !important;
border-radius: 999px !important;
color: #2B3A42 !important;
font-size: .86rem !important;
font-weight: 900 !important;
letter-spacing: -.1px !important;
}
.nav-link:hover,
.nav-link.active {
color: #fff !important;
background: linear-gradient(135deg,var(--brand-green-2),var(--brand-green)) !important;
box-shadow: 0 8px 18px rgba(7,61,50,.15) !important;
}
.nav-cta {
min-height: 48px !important;
border-radius: 999px !important;
padding: 11px 20px !important;
background: linear-gradient(135deg,#D7B771,var(--brand-gold-2)) !important;
color: #fff !important;
font-weight: 900 !important;
box-shadow: 0 14px 28px rgba(168,117,37,.25) !important;
}
.hamburger { width: 46px !important; height: 46px !important; justify-content: center !important; align-items: center !important; } .floating-actions {
right: 22px !important;
bottom: 96px !important;
gap: 10px !important;
z-index: 9997 !important;
}
.float-btn {
width: 118px !important;
height: 50px !important;
border-radius: 999px !important;
padding: 0 12px !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
border: 1px solid rgba(255,255,255,.68) !important;
box-shadow: 0 16px 34px rgba(15,23,42,.18) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
.float-whatsapp { background: linear-gradient(135deg,#21C365,#068B5C) !important; }
.float-call { background: linear-gradient(135deg,#D5B061,#A87525) !important; }
.float-btn::before { display: none !important; }
.float-btn::after { content:'' !important; position:absolute !important; inset:3px !important; border-radius:inherit !important; border:1px solid rgba(255,255,255,.26) !important; display:block !important; pointer-events:none !important; }
.float-icon-svg { width: 24px !important; height: 24px !important; filter:none !important; }
.float-tooltip {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: none !important;
transform: none !important;
background: transparent !important;
color: #fff !important;
box-shadow: none !important;
padding: 0 !important;
white-space: nowrap !important;
font-size: .86rem !important;
line-height: 1 !important;
font-weight: 900 !important;
}
.float-btn:hover { transform: translateY(-3px) !important; box-shadow:0 22px 42px rgba(15,23,42,.24) !important; }
.back-to-top {
left: 22px !important;
bottom: 28px !important;
width: 48px !important;
height: 48px !important;
background: linear-gradient(135deg,var(--brand-green-2),var(--brand-green)) !important;
box-shadow: 0 16px 30px rgba(7,61,50,.20) !important;
} .services { background: linear-gradient(180deg,#FAF8F2 0%,#FFFFFF 100%) !important; }
.service-image-grid { gap: 28px !important; }
.image-service-card {
border-radius: 30px !important;
border: 1px solid rgba(7,61,50,.09) !important;
box-shadow: 0 18px 48px rgba(15,23,42,.09) !important;
background: #fff !important;
}
.image-service-card .service-visual { height: 245px !important; background:#F1F4EF !important; }
.image-service-card .service-img { transition: transform .55s ease, filter .55s ease !important; }
.image-service-card:hover .service-img { transform: scale(1.055) !important; filter: saturate(1.06) contrast(1.02) !important; }
.service-brand-strip {
position:absolute !important;
left: 14px !important;
right: 14px !important;
bottom: 14px !important;
z-index: 2 !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap: 10px !important;
padding: 10px 12px !important;
border-radius: 18px !important;
background: rgba(7,61,50,.84) !important;
color: #fff !important;
box-shadow: 0 12px 26px rgba(7,61,50,.22) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
font-weight: 900 !important;
font-size: .82rem !important;
}
.service-brand-strip strong { color:#F1D48B !important; direction:ltr !important; unicode-bidi: plaintext !important; font-size:.9rem !important; }
.image-service-card .service-content { padding: 30px 24px 28px !important; }
.image-service-card .service-icon-wrap {
margin: -62px auto 20px !important;
width: 70px !important;
height: 70px !important;
border-radius: 23px !important;
background: linear-gradient(145deg,#073D32,#0E5A46) !important;
border: 6px solid #fff !important;
box-shadow: 0 18px 34px rgba(7,61,50,.24) !important;
}
.image-service-card .service-title { font-size: 1.32rem !important; font-weight: 900 !important; }
.image-service-card .service-desc { font-size: .92rem !important; line-height: 1.9 !important; }
.service-card-cta {
margin-top: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 42px !important;
padding: 9px 18px !important;
border-radius: 999px !important;
color: #fff !important;
background: linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2)) !important;
font-weight: 900 !important;
box-shadow: 0 12px 25px rgba(168,117,37,.18) !important;
}
.service-card-cta-icon { width: 18px !important; height: 18px !important; color: currentColor !important; } .why-us-redesigned {
background:
radial-gradient(circle at 12% 18%, rgba(199,162,90,.20), transparent 28%),
radial-gradient(circle at 88% 20%, rgba(14,90,70,.12), transparent 30%),
linear-gradient(180deg,#FFFFFF 0%,#F8F5EC 100%) !important;
padding: 100px 0 108px !important;
position: relative !important;
overflow: hidden !important;
}
.why-us-redesigned::before {
content: '' !important;
position: absolute !important;
width: 620px !important;
height: 620px !important;
border-radius: 50% !important;
right: -280px !important;
top: 70px !important;
background: conic-gradient(from 90deg, rgba(7,61,50,.13), rgba(199,162,90,.16), rgba(7,61,50,.04), rgba(7,61,50,.13)) !important;
opacity: .55 !important;
}
.why-us-redesigned .container { position: relative !important; z-index: 1 !important; }
.why-us-redesigned .section-header { margin-bottom: 44px !important; }
.why-us-redesigned .section-title { color: var(--brand-green) !important; }
.why-us-redesigned .section-subtitle { color: #64747B !important; max-width: 720px !important; }
.professional-features-grid {
display: grid !important;
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
gap: 22px !important;
}
.professional-feature-card {
min-height: 224px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 34px 28px 30px !important;
border-radius: 28px !important;
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(7,61,50,.10) !important;
box-shadow: 0 18px 46px rgba(15,23,42,.08) !important;
overflow: hidden !important;
}
.professional-feature-card::before {
height: 0 !important;
background: none !important;
}
.professional-feature-card::after {
content:'' !important;
position:absolute !important;
inset: 0 !important;
border-radius: inherit !important;
padding: 1px !important;
background: linear-gradient(135deg,rgba(14,90,70,.28),rgba(199,162,90,.44),rgba(14,90,70,.05)) !important;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events:none !important;
}
.feature-number {
position:absolute !important;
top: 18px !important;
inset-inline-start: 20px !important;
font-size: 2.2rem !important;
line-height: 1 !important;
font-weight: 900 !important;
color: rgba(7,61,50,.06) !important;
direction:ltr !important;
}
.professional-feature-card .feature-icon {
width: 76px !important;
height: 76px !important;
margin: 0 auto 18px !important;
border-radius: 28px !important;
background: linear-gradient(145deg,#073D32,#0E5A46) !important;
color: #fff !important;
box-shadow: 0 18px 34px rgba(7,61,50,.18) !important;
position: relative !important;
}
.professional-feature-card .feature-icon::after {
content:'' !important;
position:absolute !important;
inset: -8px !important;
border-radius: 32px !important;
background: rgba(199,162,90,.12) !important;
z-index: -1 !important;
}
.feature-svg-icon { width: 36px !important; height: 36px !important; color:#fff !important; }
.professional-feature-card h3 { color: var(--brand-green) !important; font-size: 1.12rem !important; font-weight: 900 !important; margin: 0 0 8px !important; }
.professional-feature-card p { color: #65767E !important; font-size: .88rem !important; line-height: 1.9 !important; max-width: 300px !important; margin: 0 auto !important; }
.professional-feature-card:hover {
transform: translateY(-8px) !important;
box-shadow: 0 28px 64px rgba(7,61,50,.14) !important;
border-color: rgba(199,162,90,.38) !important;
}
.professional-feature-card:hover .feature-icon { background: linear-gradient(145deg,#D7B771,#A87525) !important; }
@media (max-width: 1180px) {
.logo { min-width: 235px !important; max-width: 260px !important; }
.logo-text { font-size: .85rem !important; max-width: 185px !important; }
.nav-link { font-size: .80rem !important; padding: 8px 10px !important; }
.nav-links { gap: 4px !important; }
.nav-cta { padding: 10px 14px !important; font-size: .82rem !important; }
}
@media (max-width: 992px) {
.nav-links { border-radius: 24px !important; background:#fff !important; padding: 14px !important; }
.nav-links.open { gap: 8px !important; }
.nav-links.open .nav-link { justify-content: center !important; background:#F8F5EC !important; border-radius: 14px !important; color: var(--brand-green) !important; }
.nav-links.open .nav-link:hover { color:#fff !important; background:linear-gradient(135deg,var(--brand-green-2),var(--brand-green)) !important; }
.professional-features-grid,
.service-image-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.floating-actions { bottom: 82px !important; right: 14px !important; }
.float-btn { width: 52px !important; height: 52px !important; padding: 0 !important; }
.float-tooltip { display:none !important; }
.float-icon-svg { width: 25px !important; height: 25px !important; }
}
@media (max-width: 768px) {
.logo { min-width: 0 !important; max-width: 270px !important; }
.logo-emblem { width: 50px !important; height: 50px !important; flex-basis: 50px !important; }
.logo-text { max-width: 180px !important; }
.professional-features-grid,
.service-image-grid { grid-template-columns: 1fr !important; }
.image-service-card .service-visual { height: 230px !important; }
.service-brand-strip { font-size:.78rem !important; }
.why-us-redesigned { padding: 72px 0 !important; }
.professional-feature-card { min-height: 210px !important; }
} .floating-actions {
position: fixed !important;
right: 24px !important;
bottom: 104px !important;
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
z-index: 9999 !important;
}
.float-btn {
width: 62px !important;
height: 62px !important;
min-width: 62px !important;
min-height: 62px !important;
padding: 0 !important;
border-radius: 50% !important;
display: grid !important;
place-items: center !important;
overflow: visible !important;
border: 3px solid rgba(255,255,255,.96) !important;
box-shadow: 0 12px 26px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.32) !important;
isolation: isolate !important;
}
.float-whatsapp { background: linear-gradient(145deg,#24D36B 0%,#08A86C 65%,#057A59 100%) !important; }
.float-call { background: linear-gradient(145deg,#D3AA58 0%,#B8822D 100%) !important; }
.float-btn::before {
content: '' !important;
position: absolute !important;
inset: -11px !important;
border-radius: 50% !important;
display: block !important;
pointer-events: none !important;
border: 2px solid rgba(36,211,107,.48) !important;
background: rgba(36,211,107,.10) !important;
animation: motraficPulseRing 1.8s ease-out infinite !important;
z-index: -1 !important;
}
.float-call::before {
border-color: rgba(211,170,88,.46) !important;
background: rgba(211,170,88,.10) !important;
animation-delay: .35s !important;
}
.float-btn::after {
content: '' !important;
position: absolute !important;
inset: -5px !important;
border-radius: 50% !important;
display: block !important;
pointer-events: none !important;
border: 1px solid rgba(255,255,255,.78) !important;
box-shadow: 0 0 0 4px rgba(255,255,255,.13) !important;
z-index: -1 !important;
}
.float-icon-svg { width: 30px !important; height: 30px !important; color: #fff !important; display: block !important; }
.float-tooltip {
position: absolute !important;
right: 76px !important;
top: 50% !important;
transform: translateY(-50%) translateX(8px) !important;
opacity: 0 !important;
visibility: hidden !important;
background: #073D32 !important;
color: #fff !important;
border-radius: 999px !important;
padding: 8px 12px !important;
font-size: .82rem !important;
line-height: 1 !important;
white-space: nowrap !important;
box-shadow: 0 12px 24px rgba(7,61,50,.20) !important;
transition: .25s ease !important;
}
.float-btn:hover .float-tooltip { opacity: 1 !important; visibility: visible !important; transform: translateY(-50%) translateX(0) !important; }
.float-btn:hover { transform: translateY(-4px) scale(1.03) !important; }
@keyframes motraficPulseRing {
0% { transform: scale(.88); opacity: .95; }
70% { transform: scale(1.32); opacity: .10; }
100% { transform: scale(1.42); opacity: 0; }
}
.services .section-header { margin-bottom: 42px !important; }
.service-photo-grid {
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
gap: 30px !important;
}
.photo-service-card {
border-radius: 30px !important;
overflow: hidden !important;
background: #fff !important;
border: 1px solid rgba(7,61,50,.10) !important;
box-shadow: 0 16px 42px rgba(15,23,42,.08) !important;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
.photo-service-card:hover {
transform: translateY(-8px) !important;
box-shadow: 0 28px 70px rgba(7,61,50,.16) !important;
border-color: rgba(199,162,90,.45) !important;
}
.photo-service-card .service-visual {
height: 255px !important;
display: block !important;
position: relative !important;
overflow: hidden !important;
border-radius: 30px 30px 0 0 !important;
background: #e8ece6 !important;
}
.photo-service-card .service-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform .6s ease, filter .6s ease !important;
}
.photo-service-card:hover .service-img { transform: scale(1.065) !important; filter: saturate(1.08) contrast(1.04) !important; }
.service-photo-shade {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg,rgba(7,61,50,0) 40%,rgba(7,61,50,.65) 100%) !important;
pointer-events: none !important;
}
.service-phone-badge {
position: absolute !important;
left: 16px !important;
bottom: 16px !important;
z-index: 3 !important;
direction: ltr !important;
unicode-bidi: plaintext !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 38px !important;
padding: 8px 14px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.94) !important;
color: #073D32 !important;
font-weight: 900 !important;
box-shadow: 0 12px 26px rgba(7,61,50,.20) !important;
}
.photo-service-card .service-content {
padding: 24px 24px 28px !important;
min-height: 210px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
flex-direction: column !important;
}
.photo-service-card .service-icon-wrap { display: none !important; }
.photo-service-card .service-title,
.photo-service-card .service-title a {
color: #073D32 !important;
text-decoration: none !important;
font-size: 1.35rem !important;
font-weight: 900 !important;
line-height: 1.45 !important;
margin: 0 0 10px !important;
}
.photo-service-card .service-desc {
color: #64747B !important;
font-size: .95rem !important;
line-height: 1.9 !important;
max-width: 340px !important;
margin: 0 auto !important;
}
.photo-service-card .service-card-cta {
margin-top: 18px !important;
background: linear-gradient(135deg,#0E5A46,#073D32) !important;
box-shadow: 0 14px 28px rgba(7,61,50,.16) !important;
}
.photo-service-card .service-card-cta:hover { background: linear-gradient(135deg,#D3AA58,#B8822D) !important; }
.service-img-overlay,
.service-brand-strip { display: none !important; }
.logo-emblem img, .footer-logo-emblem img { transform: scale(1.06) !important; }
@media (max-width: 992px) {
.service-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.floating-actions { right: 16px !important; bottom: 90px !important; gap: 16px !important; }
.float-btn { width: 58px !important; height: 58px !important; min-width:58px !important; min-height:58px !important; }
.float-icon-svg { width: 28px !important; height: 28px !important; }
.float-tooltip { display:none !important; }
}
@media (max-width: 680px) {
.service-photo-grid { grid-template-columns: 1fr !important; }
.photo-service-card .service-visual { height: 235px !important; }
.photo-service-card .service-content { min-height: auto !important; }
.floating-actions { bottom: 82px !important; }
} .logo,
.navbar .logo {
min-width: auto !important;
max-width: none !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
gap: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.logo:hover,
.navbar .logo:hover {
transform: none !important;
box-shadow: none !important;
background: transparent !important;
}
.logo-text,
.logo .logo-text,
.logo .logo-text span {
display: none !important;
}
.logo-emblem {
width: 74px !important;
height: 74px !important;
flex: 0 0 74px !important;
display: inline-grid !important;
place-items: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter: none !important;
}
.logo-emblem img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block !important;
transform: none !important;
}
.footer-logo-only {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
color: transparent !important;
font-size: 0 !important;
}
.footer-logo-only .footer-logo-emblem {
width: 78px !important;
height: 78px !important;
flex: 0 0 78px !important;
filter: none !important;
}
.footer-logo-only .footer-logo-emblem img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
transform: none !important;
}
.service-phone-badge,
.photo-service-card .service-phone-badge {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
#services.services {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.floating-actions {
bottom: 44px !important;
right: 24px !important;
}
@media (max-width: 992px) {
.floating-actions { bottom: 40px !important; right: 14px !important; }
.logo-emblem { width: 64px !important; height: 64px !important; flex-basis: 64px !important; }
}
@media (max-width: 680px) {
.floating-actions { bottom: 34px !important; }
.logo-emblem { width: 58px !important; height: 58px !important; flex-basis: 58px !important; }
}
.projects-section {
padding: 94px 0 !important;
background: linear-gradient(180deg,#ffffff 0%,#F8F5EC 100%) !important;
position: relative !important;
overflow: hidden !important;
}
.projects-section::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient(circle at 85% 10%,rgba(199,162,90,.16),transparent 34%), radial-gradient(circle at 15% 90%,rgba(7,61,50,.08),transparent 32%) !important;
pointer-events: none !important;
}
.projects-section .container { position: relative !important; z-index: 1 !important; }
.projects-showcase-grid {
display: grid !important;
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
gap: 28px !important;
}
.project-card {
background: #fff !important;
border-radius: 30px !important;
overflow: hidden !important;
border: 1px solid rgba(7,61,50,.10) !important;
box-shadow: 0 18px 52px rgba(15,23,42,.09) !important;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
.project-card:hover {
transform: translateY(-8px) !important;
box-shadow: 0 30px 70px rgba(7,61,50,.16) !important;
border-color: rgba(199,162,90,.48) !important;
}
.project-image-wrap {
height: 250px !important;
display: block !important;
position: relative !important;
overflow: hidden !important;
background: #E9ECE6 !important;
}
.project-image-wrap::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg,rgba(7,61,50,0) 44%,rgba(7,61,50,.62) 100%) !important;
pointer-events: none !important;
}
.project-image-wrap img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform .65s ease, filter .65s ease !important;
}
.project-card:hover .project-image-wrap img {
transform: scale(1.07) !important;
filter: saturate(1.07) contrast(1.04) !important;
}
.project-card-body {
padding: 24px 24px 28px !important;
text-align: right !important;
}
.project-card-tag {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 7px 13px !important;
border-radius: 999px !important;
background: rgba(199,162,90,.16) !important;
color: #9A7634 !important;
font-weight: 900 !important;
font-size: .84rem !important;
margin-bottom: 12px !important;
}
.project-card h3 {
margin: 0 0 10px !important;
font-size: 1.18rem !important;
line-height: 1.55 !important;
font-weight: 900 !important;
color: #073D32 !important;
}
.project-card h3 a {
color: inherit !important;
text-decoration: none !important;
}
.project-card p {
margin: 0 !important;
color: #64747B !important;
line-height: 1.9 !important;
font-size: .94rem !important;
}
@media (max-width: 992px) {
.projects-showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 680px) {
.projects-showcase-grid { grid-template-columns: 1fr !important; }
.project-image-wrap { height: 235px !important; }
} .photo-service-card .service-visual {
height: 220px !important;
}
.photo-service-card .service-img {
object-position: center top !important;
}
@media (max-width: 680px) {
.photo-service-card .service-visual { height: 210px !important; }
}