html{margin: 0;padding: 0;}
body {background:var(--white); margin: 0; padding: 0; font-family: var(--mainFont); line-height: 1.6; color:var(--fontColor) ; font-size: 14px;}

*{box-sizing: border-box;}
:root{
  --brand-color:#f59e0b;
  --fontColor:#0f1a2b;
  --darkGreybg:#0f1a2b;
  --lightGreybg:#f9fafb;
  --white:#FFF;
  --mainFont:'Poppins', Arial, sans-serif;
  --titleFont:"Playfair Display",serif;
}

a{text-decoration: none; color: var(--brand-color);}
img{max-width: 100%;}
.wrap{
    max-width:1350px;
    margin:0 auto;
    padding:0 24px; /* safe mobile breathing space */
}

.darkGreybg{background: var(--darkGreybg);}
.lightGreybg{background: var(--lightGreybg);}

.frame{padding: 120px 10px;}

h1, h2,h3,h4,h5,h6{font-weight: 400; font-family: var(--titleFont); margin-top: 0;}


/* Scroll reveal base */
.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:opacity .9s ease, transform .9s ease;
}

/* When visible */
.reveal.active{
    opacity:1;
    transform:translateY(0);
}

.section-title{
  text-align:center;
  font-size:48px;
  line-height: 56px;
  margin-bottom:30px;
  font-family:var(--titleFont);
}


.entry-title{
  color:var(--brand-color);
  font-size:48px;
  line-height: 56px;
  margin-bottom:30px;
  font-family:var(--titleFont);
}

.section-head{
  margin-bottom:30px;}

.section-head h2,.section-head h3,.section-head h4,.section-head h5,.section-head h6{
  /* color:var(--brand-color); */
  margin: 0 0 16px;
  padding: 0;
}

#pageContent h2,#pageContent h3,#pageContent h4,#pageContent h5,#pageContent h6{
  color:var(--brand-color);
  margin: 0 0 16px;
  padding: 0;
  font-weight: 400;
  font-size: 25px;
  line-height: 32px;
}


.section-sub{
  margin-top:10px;
  font-style:italic;
}

.section-desc{
  max-width:750px;
  margin:12px auto 50px;
}


.section-highlight{
  text-align:center;
  color:var(--brand-color);
  margin:20px 0 60px;
}


/* HEADER */

.site-header {
    position: fixed;
    top:0;
    width:100%;
    z-index:1000;
    transition:.3s ease;
    background: transparent;
}

.site-header.scrolled {
    background: rgba(20,20,20,.9);
    backdrop-filter: blur(6px);
}

.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
}

.logo-box {
    background:var(--brand-color);
    padding:10px 12px;
    font-weight:bold;
}

.logo-text {
    color:white;
    margin-left:10px;
}

/* NAV */

    .main-nav ul {
        display:flex;
        gap:2rem;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .main-nav a {
        color:#ddd;
        text-decoration:none;
        font-size: .875rem;
        line-height: 1.25rem;
        display: block;
    }
    .main-nav a:hover{color: var(--brand-color);}

    .nav-cta a,.main-nav li.nav-cta a {
        background:var(--brand-color);
        color:#000;
        padding:10px 18px;
        border-radius:6px;
    }

/* MOBILE MENU */

.menu-toggle,
.menu-close {
    display:none;
    font-size:28px;
    background:none;
    border:none;
    color:white;
    cursor:pointer;
}




/* HERO */

.hero {
    min-height:100vh;
    position:relative;
    /* overflow:hidden; */
    padding:200px 20px;
}

.hero-video {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: center;
    position: absolute;
    inset: 0;
}

.hero-overlay {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.hero-content {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:white;
    text-align:center;
    z-index: 1;
}

.hero h1 {
    font-size:6rem;
    font-family:var(--titleFont);
    letter-spacing: 1px;
    font-weight: 500;
    margin: 0 0 1.5rem;
    line-height: 1;
}

.hero em {
    color:var(--brand-color);
}

.hero-badges span {
    display:inline-block;
    background:#111;
    padding:10px 16px;
    border-radius:30px;
    margin:6px;
    font-size:14px;
}

.hero-btn {
    margin-top:25px;
    background:var(--brand-color);
    color:#000;
    padding:16px 26px;
    border-radius:8px;
    text-decoration:none;
}


.scroll-down {
  position: absolute;
  z-index: 1;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  color:var(--brand-color);
  /* animation: bounce 1s infinite; */
  animation: bounce 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  cursor:pointer;
  pointer-events: all;
}

/* Smooth continuous motion */
@keyframes bounce {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 10px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}

.hero-label {
    letter-spacing:3px;
    color:var(--brand-color);
    font-size:13px;
    margin-bottom:20px;
}

.hero-sub {
    color:var(--brand-color);
    font-style:italic;
    font-size:1.875rem;
    margin:15px 0;
    font-family:var(--titleFont);
    line-height: 2.25rem;
}

.hero-desc {
    max-width:720px;
    opacity:.85;
    margin-bottom:35px;
}



/* FOOTER BASE */
.site-footer {
  background: radial-gradient(circle at top, #1c1c1c, #0e0e0e);
  color: #b5b5b5;
  padding: 30px 20px;
}

/* GRID */
.footer-grid{
    display:grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap:60px;
}

/* BRAND */
.footer-brand h3 {
  font-size: 22px;
  color: #d4af6a;
  margin-bottom: 6px;
}

.footer-tagline {
  font-style: italic;
  font-size: 14px;
  color: #9f9f9f;

  /* smooth continuous floating animation */
  animation: floatSoft 4s ease-in-out infinite;
}

/* NAV */
/* .footer-nav ul{
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
} */

.footer-nav li a {
  font-size: 14px;
  color: #bdbdbd;
  text-decoration: none;
  position: relative;
}

.footer-nav a:hover {
  color: #d4af6a;
}

/* DIVIDER */
.footer-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #333, transparent);
  margin: 40px 0 20px;
}

/* COPYRIGHT */
.footer-copy {
  text-align: center;
  font-size: 13px;
  color: #8d8d8d;
}

/* columns */
.footer-column{
}

.footer-heading{
    color:#d4af6a;
    font-size:15px;
    margin-bottom:14px;
    font-weight:500;
}

/* menu */
.footer-menu{
    list-style:none;
    padding:0;
    margin:0;

    display:flex;
    flex-direction:column;
    gap:2px;
}

.footer-menu a{
    color:#bdbdbd;
    text-decoration:none;
    font-size:14px;
    transition:.25s;
}
.footer-menu ul{list-style: none; padding: 0; margin: 0;}

.footer-menu a:hover{
    color:#d4af6a;
    transform:translateX(3px);
}

/* brand title */
.footer-title{
    font-size:22px;
    color:#d4af6a;
}

/* Base social menu */
.social-navigation ul{
    display:flex;
    gap:14px;
    list-style:none;
    padding:0;
    margin-top:18px;
}

.social-navigation a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:#1a1a1a;
    color:#d4af6a;
    text-decoration:none;
    transition:.3s;
    font-size:0; /* hide text */
}

/* icon base */
.social-navigation a::before{
    font-family:"Font Awesome 6 Brands";
    font-size:18px;
    font-weight:400;
}

/* hover */
.social-navigation a:hover{
    background:#d4af6a;
    color:#000;
    transform:translateY(-3px);
}

.social-navigation a[href*="facebook.com"]::before {
    content:"\f39e";
}

.social-navigation a[href*="instagram.com"]::before {
    content:"\f16d";
}

.social-navigation a[href*="linkedin.com"]::before {
    content:"\f0e1";
}

.social-navigation a[href*="twitter.com"]::before,
.social-navigation a[href*="x.com"]::before {
    content:"\e61b";
}

.social-navigation a[href*="youtube.com"]::before {
    content:"\f167";
}

.social-navigation a[href*="wa.me"]::before {
    content:"\f232";
}

.social-navigation a[href^="mailto:"]::before {
    font-family:"Font Awesome 6 Free";
    content:"\f0e0";
    font-weight:900;
}

.social-navigation a[href*="github.com"]::before {
    content:"\f09b";
}



/* FLOAT ANIMATION (smooth – no jump) */
@keyframes floatSoft {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* MOBILE */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-nav ul{
    flex-direction: column;
    gap: 12px;
  }
}


/* WHATSAPP BUTTON */
.whatsapp-float {
  --float-offset: 0px;
  position: fixed;
  right: -37px;
  top: 50%;
  transform: translateY(calc(-50% + var(--float-offset))) rotate(-90deg);
  transform-origin: center;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 
    0 10px 30px rgba(37, 211, 102, 0.35),
    0 0 0 rgba(37, 211, 102, 0.0);
  animation: 
    whatsapp-float 2.8s ease-in-out infinite,
    whatsapp-glow 2.8s ease-in-out infinite;
}

@keyframes whatsapp-float {
  0%   { transform: translateY(-50%) rotate(-90deg); }
  50%  { transform: translateY(calc(-50% - 8px)) rotate(-90deg); }
  100% { transform: translateY(-50%) rotate(-90deg); }
}


@keyframes whatsapp-glow {
  0% {box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35), 0 0 0 rgba(37, 211, 102, 0.0);}
  50% {box-shadow: 0 14px 40px rgba(37, 211, 102, 0.85), 0 0 22px rgba(37, 211, 102, 0.85); }
  100% {box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35), 0 0 0 rgba(37, 211, 102, 0.0); }
}

/* Icon */
.whatsapp-float i {
  font-size: 20px;
}

/* Hover (desktop) */
.whatsapp-float:hover {
  box-shadow: 0 18px 40px rgba(37, 211, 102, 0.55);
}

.social-linkedin {
  margin-top: 18px;
}

.social-linkedin a {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  text-decoration: none;
  color: #e6e6e6;

  padding: 12px 16px;
  border-radius: 10px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.01)
  );

  border: 1px solid rgba(200,170,100,0.25);
  transition: all .3s ease;
}

/* LinkedIn icon */
.social-linkedin i {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: rgba(200,170,100,0.15);
  color: #c8aa64;
  font-size: 16px;
}

/* Text */
.social-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.social-text strong {
  font-weight: 600;
  font-size: 14px;
}

.social-text small {
  font-size: 12px;
  opacity: .75;
}

/* Hover */
.social-linkedin a:hover {
  background: rgba(200,170,100,0.08);
  border-color: rgba(200,170,100,0.45);
  transform: translateY(-1px);
}




/* Light Box */

/* Clickable image hint */
.click-zoom{
  cursor: zoom-in;
  transition: transform .3s ease, box-shadow .3s ease;
}

.click-zoom:hover{
  transform: scale(1.04);
}

/* Lightbox */
.image-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:99999;
}

.image-lightbox.active{
  opacity:1;
  pointer-events:auto;
}

.image-lightbox img{
  max-width:90vw;
  max-height:90vh;
  border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.92);
  transition:transform .35s ease;
}

.image-lightbox.active img{
  transform:scale(1);
}

/* Close button */
.lightbox-close{
  position:absolute;
  top:24px;
  right:32px;
  font-size:38px;
  color:#fff;
  cursor:pointer;
  line-height:1;
  opacity:.85;
}

.lightbox-close:hover{
  opacity:1;
}

.screen-reader-text {
  position:absolute;
  left:-9999px;
}

/* Banner */
.page-banner{
    position:relative;
    height:400px;
    overflow:hidden;
}

/* Background image */
.page-banner-bg{
    position:absolute;
    inset:0;
}

.page-banner-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Overlay */
.page-banner-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
    z-index:1;
}

/* Content center */
.page-banner-content{
    position:relative;
    z-index:2;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

/* Title */
.page-banner-title{
    color:#fff;
    font-family:'Playfair Display', serif;
    font-size:42px;
    font-weight:500;
    letter-spacing:.5px;
}

/* Mobile */
@media(max-width:768px){

    .page-banner{
        height:280px;
    }

    .page-banner-title{
        font-size:28px;
    }

}


.brands{text-align:center}
.brands-label{color:var(--brand-color);font-size:12px;letter-spacing:3px;margin-bottom:14px}
.brands-grid{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.brand-card{text-decoration:none;color:#444;padding:20px;border-radius:14px;transition:.3s}
.brand-card:hover{transform:translateY(-6px)}
.brand-icon{
width:72px;height:72px;margin:0 auto 20px;border-radius:16px;
background:var(--darkGreybg);display:flex;align-items:center;justify-content:center;
font-size:26px;color:var(--brand-color);transition:.3s
}
.brand-card:hover .brand-icon{background:var(--brand-color);color:#000}

.brand-card h3{font-size:20px;margin-bottom:6px;color:#444}
.brand-card p{font-size:14px;opacity:.7}
@media(max-width:992px){
.brands-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:576px){
.brands-grid{grid-template-columns:1fr}
}



.realestate-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.realestate-desc{margin:20px 0;max-width:520px}
.realestate-list{list-style:none;padding:0;margin:0 0 30px}
.realestate-list li{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.realestate-list i{color:var(--brand-color);font-size:8px}
.realestate-btn{display:inline-flex;align-items:center;gap:10px;background:#0f1a2b;color:#fff;padding:14px 22px;border-radius:8px;transition:.3s}
.realestate-btn:hover{background:var(--brand-color);color:#000}
.realestate-image{position:relative;}
.realestate-image img{width:100%;display:block;transition:transform .6s;border-radius:16px}
.realestate-image:hover img{transform:scale(1.04)}
.realestate-badge{position:absolute;left:-30px;bottom:-30px;background:var(--brand-color);color:#000;padding:20px 24px;border-radius:14px;}
.realestate-badge strong{display:block;font-size:28px;line-height:1;font-weight:500}
.realestate-badge span{font-size:13px}
@media(max-width:992px){
.realestate-grid{grid-template-columns:1fr}
.realestate-right{order:-1}
.realestate-badge{left:20px;bottom:-20px}
}