@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:wght@500;600&display=swap');

:root{--navy:#061628;--navy2:#0a2138;--gold:#d6a83d;--cream:#f4f0e7;--ink:#101820;--muted:#66707a}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:#fff;line-height:1.7}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,90%);margin:auto}

/* ==========================================
   HEADER / NAV
========================================== */

.site-header{position:absolute;z-index:20;width:100%;border-bottom:1px solid #ffffff24}
.nav{height:96px;display:flex;align-items:center;justify-content:space-between}
.brand img{width:210px;height:66px;object-fit:cover;object-position:center}
.nav nav{display:flex;gap:30px;align-items:center;color:#fff;font-size:14px}
.main-menu{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav nav a{opacity:.8}
.nav nav a:hover,.nav nav .active{opacity:1;color:#f0c762}
.nav-cta{border:1px solid #d6a83d;padding:10px 20px}
.menu-btn{display:none}

.nav nav li{list-style:none;position:relative}
.dropdown>a{display:flex;align-items:center;gap:6px}

.dropdown-menu,
.submenu{
    position:absolute;
    top:100%;
    left:0;
    width:max-content;
    min-width:180px;
    background:#061628;
    border-top:2px solid #d6a83d;
    display:none;
    padding:10px 0;
    z-index:9999;
    box-shadow:0 15px 35px rgba(0,0,0,.2);
}

.dropdown:hover>.dropdown-menu{display:block}
.dropdown-menu li{position:relative}

.dropdown-menu a,
.submenu a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 20px;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
}

.nav nav .dropdown-menu a:hover,
.nav nav .submenu a:hover{background:#d6a83d;color:#fff}

.submenu{top:0;left:100%}
.dropdown-submenu:hover>.submenu{display:block}
.dropdown i{font-size:11px}

@media(max-width:992px){
    .dropdown-menu,
    .submenu{
        position:static;
        display:none;
        width:100%;
        background:#0b2038;
        box-shadow:none;
        border:none;
        margin-left:15px;
    }
    .dropdown.open>.dropdown-menu{display:block}
    .dropdown-submenu.open>.submenu{display:block}
    .dropdown>a{justify-content:space-between}
}


/* ==========================================
   PAGE HERO (used on inner pages — about,
   projects, contact, service pages, etc.)
   Homepage uses .hero-slider instead — see below.
========================================== */

.hero,.page-hero{background:radial-gradient(circle at 80% 30%,#153b5d 0,transparent 35%),linear-gradient(135deg,#061628,#020b14);color:#fff}
.hero{min-height:800px;display:flex;align-items:center}
.hero-content{padding-top:80px}
.hero h1,.page-hero h1{font:500 clamp(55px,8vw,108px)/.95 'Playfair Display',serif;letter-spacing:-3px;margin:18px 0 30px;max-width:1000px}
.hero h1 span{color:#e4bd5d}
.lead{font-size:20px;max-width:650px;color:#c9d1d8}
.eyebrow{font-size:12px;letter-spacing:3px;color:var(--gold);font-weight:600}
.actions{display:flex;align-items:center;gap:30px;margin-top:40px}
.btn{display:inline-block;background:var(--gold);color:#071525;padding:15px 25px;border:0;font-weight:600;cursor:pointer}
.text-link{font-weight:600;border-bottom:1px solid var(--gold);padding-bottom:4px}
.page-hero{padding:210px 0 100px}


/* ==========================================
   GENERAL SECTIONS
========================================== */

.section{padding:110px 0}
.section h2,.cta h2{font:500 clamp(38px,5vw,68px)/1.08 'Playfair Display',serif;margin:10px 0 30px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:90px}
.split p{font-size:18px;color:var(--muted)}
.dark{background:var(--navy);color:#fff}
.cards{display:grid;grid-template-columns:repeat(4,1fr);margin:55px 0;border-top:1px solid #ffffff26}
.cards article{padding:35px 25px;border-right:1px solid #ffffff26}
.cards span,.service-list>article>span,.portfolio span{color:var(--gold);font-size:12px}
.cards h3{font:500 26px 'Playfair Display',serif}
.cards p{color:#aeb9c4}
.outline{background:transparent;color:#fff;border:1px solid var(--gold)}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin:50px 0 30px}
.project{min-height:240px;background:linear-gradient(135deg,#102d49,#061628);color:#fff;padding:35px;display:flex;flex-direction:column;justify-content:flex-end}
.project b{font:500 25px 'Playfair Display',serif}
.project small{color:#d8b456;margin-top:8px}
.cta{padding:100px 0;background:var(--cream);text-align:center}
.two-cards{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.two-cards p{color:#bac4ce}
.values{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px}
.values span{padding:25px;border:1px solid #ddd;font-weight:600}
.service-list article{display:grid;grid-template-columns:80px 1fr;padding:45px 0;border-bottom:1px solid #ddd}
.service-list h2{font-size:40px;margin:0 0 12px}
.service-list p{color:var(--muted);margin:0}
.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ddd}
.portfolio article{background:#fff;padding:35px;min-height:190px}
.portfolio h3{font:500 24px 'Playfair Display',serif;margin:25px 0 5px}
.portfolio p{color:var(--muted);margin:0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.contact-details{margin-top:45px}
.contact-details small{display:block;color:var(--gold);letter-spacing:2px}
.contact-details p{margin:25px 0}
.contact-form{display:grid;gap:14px}
.contact-form input,.contact-form textarea{width:100%;padding:18px;border:0;border-bottom:1px solid #bbb;font:inherit;background:#f8f8f6}
.contact-form textarea{min-height:150px;resize:vertical}


/* ==========================================
   FOOTER
========================================== */

/* ==========================================
   FOOTER
========================================== */
footer{background:#020b14;color:#b5c0ca;padding:25px 0 2px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:60px}
.footer-grid img{width:230px}
.footer-grid h4{color:#d6a83d;letter-spacing:2px;font-size:12px}
.footer-grid a{display:block;margin:8px 0}
/* Logo + tagline column — centers whichever way it's marked up:
   either the first child of .footer-grid, or an element you've
   explicitly classed .footer-brand. Both are supported. */
.footer-grid > div:first-child,
.footer-brand{
    text-align:center;
}
.footer-grid > div:first-child img,
.footer-brand img{
    display:block;
    margin:0 auto;
}
.footer-brand p{margin-top:10px}
.copyright{
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:30px;
    padding-top:7px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-size:13px;
}
.copyright a{color:#d6a83d;text-decoration:none;margin-left:4px}
.copyright a:hover{color:#fff}

@media(max-width:800px){
    footer{padding:35px 0 15px}
    .footer-grid{gap:5px}
    .copyright{margin-top:20px;padding-top:14px}
}
/* ==========================================
   BASE RESPONSIVE (nav, hero, general grids)
========================================== */

@media(max-width:800px){
    .menu-btn{display:block;background:none;border:0;color:#fff;font-size:25px}
    .nav nav{display:none;position:absolute;top:96px;left:0;width:100%;background:#061628;padding:25px 5%;flex-direction:column;align-items:flex-start}
    .nav nav.open{display:flex}
    .main-menu{flex-direction:column;align-items:flex-start;width:100%;gap:15px}
    .brand img{width:170px;height:55px}
    .hero{min-height:700px}
    .hero h1,.page-hero h1{letter-spacing:-1px}
    .split,.two-cards,.contact-grid{grid-template-columns:1fr;gap:35px}
    .cards,.values{grid-template-columns:1fr 1fr}
    .portfolio{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr}
    .section{padding:75px 0}
}

@media(max-width:520px){
    .cards,.values,.portfolio,.project-grid{grid-template-columns:1fr}
    .service-list article{grid-template-columns:45px 1fr}
    .service-list h2{font-size:30px}
    .actions{align-items:flex-start;flex-direction:column}
}


/* ==========================================
   FEATURED PROJECTS WITH IMAGES — HOME
========================================== */

.featured-project-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin:50px 0 35px;
}

.featured-project{
    position:relative;
    min-height:420px;
    overflow:hidden;
    background:#061628;
}

/* Plain single-image cards (e.g. My Town Adventure Park) */
.featured-project > img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.featured-project::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(2,11,20,.9) 0%,rgba(2,11,20,.15) 65%);
    z-index:1;
}

.featured-project:hover > img{transform:scale(1.06)}

.featured-project-overlay{
    position:absolute;
    z-index:2;
    left:35px;
    right:35px;
    bottom:35px;
    color:#fff;
}

.featured-project-overlay b{
    display:block;
    font-family:'Playfair Display',serif;
    font-size:27px;
    font-weight:500;
}

.featured-project-overlay small{
    display:block;
    color:#e4bd5d;
    margin-top:8px;
    font-size:14px;
}


/* ---------- Multi-image slider variant ---------- */
/* Applies only inside cards that wrap their images in
   .project-slider (Xtreme Z, HuQQa, ASSAF). Plain single-image
   cards above are untouched by this block. */

.featured-project .project-slider{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.featured-project .project-slider img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 1s ease-in-out, transform 0.7s ease;
}

.featured-project .project-slider img.active{
    opacity:1;
}

.featured-project:hover .project-slider img.active{
    transform:scale(1.06);
}


/* ==========================================
   PROJECTS PAGE WITH IMAGES
========================================== */

.portfolio.portfolio-images {
    background: transparent;
    gap: 25px;
}

.portfolio-images article {
    padding: 0;
    min-height: auto;
    background: #fff;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    transition: transform 0.35s ease,
                box-shadow 0.35s ease;
}

.portfolio-images article:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(6, 22, 40, 0.12);
}

.portfolio-image {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: #061628;
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.portfolio-images article:hover .portfolio-image img {
    transform: scale(1.06);
}

.portfolio-content {
    padding: 28px;
}

.portfolio-content h3 {
    margin: 15px 0 5px;
}


/* ---------- Multi-image slider variant ---------- */
/* Only applies inside cards that have a .project-slider
   wrapper (Xtreme Z, HuQQa, ASSAF, Barn's). Plain single-image
   cards are untouched by this block. */

.portfolio-image .project-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.portfolio-image .project-slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.portfolio-image .project-slider img.active {
    opacity: 1;
}

@keyframes projectCarousel {
  0% {
    transform: translateX(0);
  }

  18% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-20%);
  }

  38% {
    transform: translateX(-20%);
  }

  40% {
    transform: translateX(-40%);
  }

  58% {
    transform: translateX(-40%);
  }

  60% {
    transform: translateX(-60%);
  }

  78% {
    transform: translateX(-60%);
  }

  80% {
    transform: translateX(-80%);
  }

  98% {
    transform: translateX(-80%);
  }

  100% {
    transform: translateX(0);
  }
}

@media(max-width:800px){
    .featured-project-grid{grid-template-columns:1fr}
    .featured-project{min-height:360px}
}

@media(max-width:520px){
    .featured-project{min-height:300px}
    .featured-project-overlay{left:22px;right:22px;bottom:22px}
    .portfolio-image{height:240px}
}


/* ==========================================
   FLOATING ACTION BUTTONS (WhatsApp / Back to top)
========================================== */

.floating-actions{
    position:fixed !important;
    top:auto !important;
    left:auto !important;
    right:30px !important;
    bottom:30px !important;
    width:auto !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:18px !important;
    z-index:99999999 !important;
    transform:none !important;
    margin:0 !important;
    padding:0 !important;
}

.floating-btn{
    width:60px !important;
    height:60px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    text-decoration:none !important;
    transition:.3s ease;
    box-shadow:0 10px 25px rgba(0,0,0,.22);
}

.floating-btn i{font-size:28px !important}

.whatsapp-btn{background:#25D366 !important;color:#fff !important}

.back-to-top-btn{
    background:#061628 !important;
    color:#d6a83d !important;
    border:2px solid #d6a83d !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.back-to-top-btn.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.back-to-top-btn:hover,
.whatsapp-btn:hover{transform:translateY(-4px)}

@media(max-width:768px){
    .floating-actions{right:18px !important;bottom:18px !important}
    .floating-btn{width:52px !important;height:52px !important}
    .floating-btn i{font-size:24px !important}
}


/* ==========================================
   PARTNERS SECTION — TITLE
========================================== */

.section-title{
    text-align:center;
    margin-bottom:40px;
}


/* ==========================================
   SERVICE DETAIL PAGES (text left / image right)
========================================== */

.service-detail{align-items:center}
.service-detail-text .eyebrow{display:block;margin-bottom:14px}
.service-detail-text h2{font:500 clamp(30px,3.4vw,44px)/1.15 'Playfair Display',serif;margin:0 0 22px;color:var(--ink)}
.service-detail-text > p{font-size:17px;color:var(--muted);margin:0 0 18px}

.service-points{list-style:none;margin:28px 0 34px;padding:0;display:grid;gap:14px}
.service-points li{position:relative;padding-left:30px;color:var(--ink);font-size:15px}
.service-points li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border:2px solid var(--gold)}

/* Single-image variant (image with gold outline offset) */

@media(max-width:800px){
    .service-detail-image{margin-top:10px}
    .service-detail-image::before{display:none}
    .service-detail-image img{min-height:280px}
}

/* Dual-image variant (main photo + overlapping accent photo) */
.service-detail-image-duo{position:relative}
.service-detail-image-duo .img-main{width:100%;display:block;border-radius:6px}
.service-detail-image-duo .img-accent{
    position:absolute;
    width:45%;
    bottom:-30px;
    right:-30px;
    border:6px solid #fff;
    border-radius:6px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

@media(max-width:768px){
    .service-detail-image-duo .img-accent{
        width:55%;
        bottom:-20px;
        right:-15px;
        border-width:4px;
    }
}


/* ==========================================
   HOMEPAGE HERO SLIDER
========================================== */

.hero-slider{
    position:relative;
    min-height:90vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
}

.hero-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1.5s ease-in-out;
    z-index:1;
}

.hero-slide.active{opacity:1}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.65) 100%);
    z-index:2;
}

.hero-slider .hero-content{
    position:relative;
    z-index:3;
    padding:0 20px 0 12px;
}

@media(max-width:768px){
    .hero-slider{min-height:70vh}
    .hero-slider .hero-content{padding-left:10px}
    .hero-slider .hero-content .lead{max-width:100%}
}}

.hero-slider .hero-content .eyebrow{
    letter-spacing:2px;
    font-size:13px;
    opacity:.85;
    margin-bottom:16px;
}

.hero-slider .hero-content h1{
    font-size:clamp(28px,5vw,56px);
    line-height:1.15;
    margin-bottom:20px;
    word-wrap:break-word;
}

.hero-slider .hero-content .lead{
    max-width:560px;
    font-size:clamp(15px,2vw,17px);
    opacity:.9;
    margin-bottom:32px;
}

.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}

.hero-buttons .btn{
    padding:14px 28px;
    font-size:15px;
    white-space:nowrap;
    text-align:center;
}

.hero-buttons .btn-primary{background:#d6a83d;color:#ffffff; border-radius: 50px;}
.hero-buttons .btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.hero-buttons .btn-outline:hover{background:rgba(255,255,255,.1)}

@media(max-width:1024px){
    .hero-slider{min-height:80vh}
}

@media(max-width:768px){
    .hero-slider{min-height:70vh}
    .hero-slider .hero-content .lead{max-width:100%}
}

@media(max-width:480px){
    .hero-slider{min-height:100vh}
    .hero-buttons{flex-direction:column;gap:12px}
    .hero-buttons .btn{width:100%}
}

@media(max-height:500px) and (orientation:landscape){
    .hero-slider{min-height:100vh;padding:40px 0}
}

@media(prefers-reduced-motion:reduce){
    .hero-slide{transition:none}
}

.who-we-are-video{
    position:relative;
    border-radius:6px;
    overflow:hidden;
}

.who-we-are-video video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

@media(max-width:800px){
    .who-we-are-video{
        margin-top:20px;
    }
    .who-we-are-video video{
        min-height:280px;
    }
}
/* ==========================================
   TRUSTED PARTNERS — AUTO-SCROLLING CAROUSEL
   (single source of truth — old grid/column
   versions removed)
========================================== */

.partners-carousel{
    overflow:hidden;
    position:relative;
    width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.partners-carousel .partners-track{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center;
    width:max-content;
    animation:partners-scroll 35s linear infinite;
}

.partners-carousel .partners-track:hover{animation-play-state:paused}

.partners-carousel .partner-card{
    flex:0 0 auto !important;he
    width:160px;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 20px;
}

.partners-carousel .partner-card img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

@keyframes partners-scroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

@media(max-width:768px){
    .partners-carousel .partners-track{
        display:flex !important;
        flex-direction:row !important;
        animation-duration:22s;
    }
    .partners-carousel .partner-card{
        width:110px !important;
        height:70px !important;
        margin:0 12px;
    }
}