:root{

  --gold:#d4a85d;
  --gold-light:#f2d39a;

  --white:rgba(255,255,255,.95);
  --white-soft:rgba(255,255,255,.72);

  --glass:rgba(255,255,255,.08);
  --glass-border:rgba(255,255,255,.14);

}

/* =========================================================
   RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{

  scroll-behavior:smooth;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{

  font-family:'Vazirmatn',sans-serif;

  background:#000;

  overflow-x:hidden;

  min-height:100vh;

  position:relative;

  color:#fff;
}

/* =========================================================
   VIDEO BACKGROUND
========================================================= */

.home-video{

  position:fixed;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:-2;

  pointer-events:none;

  backface-visibility:hidden;

  transform:translate3d(0,0,0);
}

@media(min-width:769px){

  .home-video{

    animation:
    zoomBg 20s ease-in-out infinite alternate;
  }

}

@keyframes zoomBg{

  from{
    transform:scale(1);
  }

  to{
    transform:scale(1.08);
  }

}

/* =========================================================
   OVERLAY
========================================================= */

.home-overlay{

  position:fixed;
  inset:0;

  z-index:-1;

  pointer-events:none;

  background:
  linear-gradient(
    180deg,
    rgba(0,0,0,.15),
    rgba(0,0,0,.72)
  );
}

/* =========================================================
   FLOATING BOXES
========================================================= */

.floating-box{

  position:fixed;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(212,168,93,.12),
    transparent 70%
  );

  filter:blur(10px);

  pointer-events:none;

  z-index:-1;

  animation:
  floatingMove 14s ease-in-out infinite;
}

.box1{

  width:240px;
  height:240px;

  top:10%;
  right:5%;
}

.box2{

  width:180px;
  height:180px;

  bottom:10%;
  left:8%;

  animation-delay:2s;
}

.box3{

  width:140px;
  height:140px;

  top:45%;
  left:15%;

  animation-delay:4s;
}

.box4{

  width:220px;
  height:220px;

  bottom:20%;
  right:10%;

  animation-delay:6s;
}

@keyframes floatingMove{

  0%,100%{

    transform:
    translateY(0px)
    scale(1);
  }

  50%{

    transform:
    translateY(-20px)
    scale(1.05);
  }

}


/* =========================================================
   STORY SCROLL
========================================================= */

.story-scroll{

  position:relative;

  z-index:5;
}

/* =========================================================
   INTRO
========================================================= */



.scroll-intro h1{

  font-size:76px;

  letter-spacing:8px;

  margin-bottom:26px;

  text-shadow:
  0 10px 50px rgba(0,0,0,.45);
}

/* =========================================================
   HERO SERVICES
========================================================= */

.hero-services{

  position:relative;

  z-index:20;

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

  gap:16px;

  margin-top:10px;
  margin-bottom:20px;

  padding:0 20px;
}

/* =========================================================
   GLASS BUTTON
========================================================= */

.hero-link{

  position:relative;

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

  min-width:170px;
  min-height:58px;

  padding:14px 24px;

  border-radius:100px;

  text-decoration:none;

  overflow:hidden;

  color:#fff;

  font-size:14px;
  font-weight:700;

  letter-spacing:.3px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.14),
    rgba(255,255,255,.06)
  );

  backdrop-filter:
  blur(18px);

  -webkit-backdrop-filter:
  blur(18px);

  border:
  1px solid rgba(255,255,255,.16);

  box-shadow:

  0 10px 30px rgba(0,0,0,.22),
  inset 0 1px 0 rgba(255,255,255,.12);

  transition:

  transform .45s cubic-bezier(.16,1,.3,1),
  background .45s ease,
  border-color .45s ease,
  box-shadow .45s ease;
}

/* glossy reflection */

.hero-link::before{

  content:'';

  position:absolute;

  top:0;
  left:-120%;

  width:70%;
  height:100%;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.22),
    transparent
  );

  transform:
  skewX(-25deg);

  transition:
  .8s ease;
}

/* hover */

.hero-link:hover{

  transform:
  translateY(-4px);

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.08)
  );

  border-color:
  rgba(255,255,255,.28);

  box-shadow:

  0 18px 45px rgba(0,0,0,.28),
  0 0 25px rgba(255,255,255,.06);
}

.hero-link:hover::before{

  left:140%;
}

/* =========================================================
   COLORS
========================================================= */

.hero-link.residence{

  color:#f2d39a;
}

.hero-link.tours{

  color:#ffffff;
}

.hero-link.wedding{

  color:#ffd9eb;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  .hero-services{

    gap:10px;

    margin-top:10px;
    margin-bottom:10px;

    padding:0 14px;
  }

  .hero-link{

    min-width:auto;

    width:100%;

    max-width:200px;

    min-height:54px;

    padding:14px 18px;

    font-size:14px;

    border-radius:20px;
  }

}


/* =========================================================
   STORY ITEM
========================================================= */

.story-item{

  min-height:100vh;

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

  text-align:center;

  padding:0 20px;

  text-decoration:none;

  opacity:.12;

  transform:
  scale(.78)
  translateY(30px);

  filter:
  blur(12px);

  transition:

  opacity .55s ease,
  transform .9s cubic-bezier(.16,1,.3,1),
  filter .55s ease;
}

.story-item.active{

  opacity:1;

  transform:
  scale(1)
  translateY(0);

  filter:
  blur(0);
}

.story-item span{

  color:var(--gold-light);

  letter-spacing:5px;

  font-size:12px;

  margin-bottom:24px;

  text-shadow:
  0 0 18px rgba(212,168,93,.22);
}

.story-item h2{

  font-size:76px;

  line-height:1.05;

  margin-bottom:26px;

  color:#fff;

  text-shadow:
  0 10px 40px rgba(0,0,0,.45);

  transition:
  .45s ease;
}

.story-item:hover h2{

  transform:
  scale(1.03);
}

.story-item p{

  max-width:760px;

  font-size:24px;

  line-height:2;

  color:
  rgba(255,255,255,.76);

  text-shadow:
  0 4px 20px rgba(0,0,0,.35);
}

/* =========================================================
   END SECTION
========================================================= */

.end-section{

  min-height:100vh;

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

  text-align:center;
}

.end-section h2{

  font-size:90px;

  margin-bottom:20px;
}

.end-section p{

  color:
  rgba(255,255,255,.68);

  margin-bottom:40px;
}

/* =========================================================
   BUTTON
========================================================= */

.back-top{

  border:none;

  padding:18px 38px;

  border-radius:100px;

  cursor:pointer;

  color:#fff;

  background:
  rgba(255,255,255,.10);

  border:
  1px solid rgba(255,255,255,.14);

  backdrop-filter:
  blur(16px);

  transition:.35s ease;

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.08),
  0 12px 30px rgba(0,0,0,.24);
}

.back-top:hover{

  transform:
  translateY(-4px);

  background:
  linear-gradient(
    135deg,
    #d4a85d,
    #f2d39a
  );

  color:#111;

  box-shadow:
  0 18px 40px rgba(212,168,93,.18);
}

/* =========================================================
   SOCIAL
========================================================= */

.home-social{

  position:fixed;

  bottom:24px;
  left:50%;

  transform:
  translateX(-50%);

  display:flex;

  gap:18px;

  z-index:20;
}

.home-social a{

  position:relative;

  color:
  rgba(255,255,255,.72);

  text-decoration:none;

  transition:.3s ease;
}

.home-social a::after{

  content:'';

  position:absolute;

  left:0;
  bottom:-4px;

  width:0;
  height:1px;

  background:var(--gold);

  transition:.35s ease;
}

.home-social a:hover{

  color:#fff;
}

.home-social a:hover::after{

  width:100%;
}


/* =========================================================
   NAVBAR
========================================================= */

.main-navbar{

  position:fixed;

  top:24px;
  left:50%;

  transform:translateX(-50%);

  width:calc(100% - 40px);
  max-width:1400px;

  height:78px;

  padding:0 22px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;


  z-index:5000;

  border-radius:28px;


  overflow:visible;    
  background:
  rgba(10,10,10,.32);

  backdrop-filter:
  blur(24px);

  -webkit-backdrop-filter:
  blur(24px);

  border:
  1px solid rgba(255,255,255,.10);

  box-shadow:

  0 10px 40px rgba(0,0,0,.28),
  inset 0 1px 0 rgba(255,255,255,.06);
}

/* =========================================================
   LOGO
========================================================= */

.nav-logo{

  display:flex;
  align-items:center;

  order:2;
}

.nav-logo img{

  height:52px;

  display:block;

  filter:
  drop-shadow(0 6px 20px rgba(0,0,0,.35));

  transition:
  transform .35s ease;
}

.nav-logo:hover img{

  transform:
  scale(1.04);
}

/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav{

  display:flex;

  align-items:center;

  gap:10px;

  order:1;
}

/* links */

.desktop-nav > a,
.dropdown-toggle{

  position:relative;

  height:52px;

  padding:0 20px;

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

  border-radius:18px;

  border:none;
  outline:none;

  cursor:pointer;

  text-decoration:none;

  color:#fff;

  font-family:'Vazirmatn',sans-serif;

  font-size:14px;
  font-weight:600;

  background:
  transparent;

  transition:

  background .35s ease,
  color .35s ease,
  transform .35s ease;
}

/* hover */

.desktop-nav > a:hover,
.dropdown-toggle:hover{

  background:
  rgba(255,255,255,.08);

  color:var(--gold-light);

  transform:
  translateY(-2px);
}

/* glow line */

.desktop-nav > a::after,
.dropdown-toggle::after{

  content:'';

  position:absolute;

  left:18px;
  right:18px;
  bottom:10px;

  height:1px;

  background:
  linear-gradient(
    90deg,
    transparent,
    var(--gold-light),
    transparent
  );

  opacity:0;

  transform:
  scaleX(.4);

  transition:
  .35s ease;
}

.desktop-nav > a:hover::after,
.dropdown-toggle:hover::after{

  opacity:1;

  transform:
  scaleX(1);
}

/* =========================================================
   DROPDOWN
========================================================= */

.nav-dropdown{

  position:relative;
}

.dropdown-toggle span{

  margin-right:8px;

  font-size:18px;

  line-height:1;

  transition:
  transform .35s ease;
}

.nav-dropdown:hover .dropdown-toggle span{

  transform:
  rotate(45deg);
}

/* menu */

.dropdown-menu{

  position:absolute;

  top:calc(100% + 14px);
  right:0;

  min-width:240px;

  padding:14px;

  display:flex;
  flex-direction:column;

  gap:6px;

  border-radius:24px;

  background:
  rgba(8,8,8,.82);

  backdrop-filter:
  blur(24px);

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
  0 20px 60px rgba(0,0,0,.45);

  opacity:0;
  visibility:hidden;

  transform:
  translateY(10px);

  transition:
  .35s ease;
}

/* open */

.nav-dropdown:hover .dropdown-menu{

  opacity:1;
  visibility:visible;

  transform:
  translateY(0);
}

/* links */

.dropdown-menu a{

  min-height:48px;

  padding:0 16px;

  display:flex;
  align-items:center;

  border-radius:14px;

  text-decoration:none;

  color:rgba(255,255,255,.82);

  font-size:14px;
  font-weight:500;

  transition:
  .3s ease;
}

.dropdown-menu a:hover{

  background:
  rgba(255,255,255,.08);

  color:var(--gold-light);

  transform:
  translateX(-4px);
}

/* =========================================================
   NAVBAR PREMIUM POLISH
========================================================= */

.main-navbar::before{

  content:'';

  position:absolute;
  inset:0;

  border-radius:inherit;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.10),
    transparent 40%
  );

  pointer-events:none;
}


/* =========================================================
   DESKTOP LINK PREMIUM
========================================================= */

.desktop-nav > a,
.dropdown-toggle{

  overflow:hidden;
}

.desktop-nav > a::before,
.dropdown-toggle::before{

  content:'';

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );

  transform:
  translateX(-120%);

  transition:
  transform .7s ease;
}

.desktop-nav > a:hover::before,
.dropdown-toggle:hover::before{

  transform:
  translateX(120%);
}


/* =========================================================
   NAVBAR SCROLL EFFECT
========================================================= */

.main-navbar.scrolled{

  background:
  rgba(8,8,8,.58);

  border-color:
  rgba(255,255,255,.06);

  box-shadow:

  0 14px 50px rgba(0,0,0,.38),
  inset 0 1px 0 rgba(255,255,255,.04);
}

/* =========================================================
   INTRO SECTION FIX
========================================================= */

.scroll-intro{

  position:relative;

  min-height:100vh;

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

  text-align:center;

  padding:120px 20px 80px;

  z-index:5;
}

/* =========================================================
   SCROLL INDICATOR
========================================================= */

.scroll-indicator{

  margin-top:30px;

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

  gap:22px;

  position:relative;

  z-index:10;
}

/* =========================================================
   TOP MOUSE
========================================================= */

.scroll-arrow{

  position:relative;

  width:34px;
  height:54px;

  border-radius:100px;

  border:
  2px solid rgba(255,255,255,.72);

  background:
  rgba(255,255,255,.04);

  backdrop-filter:
  blur(10px);

  box-shadow:
  0 0 30px rgba(255,255,255,.12);
}

.scroll-arrow::before{

  content:'';

  position:absolute;

  top:10px;
  left:50%;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#fff;

  transform:
  translateX(-50%);

  box-shadow:
  0 0 14px rgba(255,255,255,.7);

  animation:
  scrollDot 1.7s ease-in-out infinite;
}

@keyframes scrollDot{

  0%{

    opacity:0;

    transform:
    translate(-50%,0);
  }

  30%{
    opacity:1;
  }

  100%{

    opacity:0;

    transform:
    translate(-50%,22px);
  }
}

/* =========================================================
   TEXT
========================================================= */

.scroll-indicator span{

  font-size:18px;

  letter-spacing:4px;

  font-weight:700;

  color:#fff;

  text-shadow:
  0 0 20px rgba(212,168,93,.35);
}

/* =========================================================
   CHEVRON WRAP
========================================================= */

.scroll-chevron-wrap{

  position:relative;

  width:28px;
  height:70px;
}

/* =========================================================
   CHEVRON
========================================================= */

.chevron{

  position:absolute;

  width:28px;
  height:8px;

  opacity:0;

  transform:
  scale(.5);

  animation:
  chevronMove 3s ease-out infinite;
}

.chevron:first-child{

  animation-delay:0s;
}

.chevron:nth-child(2){

  animation-delay:1s;
}

.chevron:nth-child(3){

  animation-delay:2s;
}

.chevron::before,
.chevron::after{

  content:'';

  position:absolute;

  top:0;

  width:51%;
  height:100%;

  background:#fff;

  box-shadow:
  0 0 12px rgba(255,255,255,.45);
}

.chevron::before{

  left:0;

  transform:
  skewY(30deg);
}

.chevron::after{

  right:0;

  width:50%;

  transform:
  skewY(-30deg);
}

/* =========================================================
   CHEVRON ANIMATION
========================================================= */

@keyframes chevronMove{

  25%{
    opacity:1;
  }

  33%{

    opacity:1;

    transform:
    translateY(20px)
    scale(.9);
  }

  67%{

    opacity:1;

    transform:
    translateY(34px)
    scale(1);
  }

  100%{

    opacity:0;

    transform:
    translateY(52px)
    scale(.5);
  }
}




/* =========================================================
   MOBILE MENU FINAL CLEAN
========================================================= */

.mobile-trigger,
.mobile-overlay{
  display:none;
}

@media(max-width:768px){

  .desktop-nav{
    display:none !important;
  }

  /* =========================================================
     BUTTON
  ========================================================= */

  .mobile-trigger{

    position:fixed;

    top:34px;
    left:30px;

    width:52px;
    height:52px;

    border:none;

    border-radius:16px;

    background:
    rgba(255,255,255,.08);

    backdrop-filter:
    blur(20px);

    -webkit-backdrop-filter:
    blur(20px);

    border:
    1px solid rgba(255,255,255,.10);

    z-index:1000001;

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

    cursor:pointer;
  }

  /* CENTER LINE */

  .mobile-trigger span{

    position:relative;

    width:22px;
    height:2px;

    background:#fff;

    border-radius:20px;

    transition:.35s ease;
  }

  /* TOP + BOTTOM */

  .mobile-trigger span::before,
  .mobile-trigger span::after{

    content:'';

    position:absolute;

    left:0;

    width:100%;
    height:2px;

    background:#fff;

    border-radius:20px;

    transition:.35s ease;
  }

  .mobile-trigger span::before{
    top:-7px;
  }

  .mobile-trigger span::after{
    top:7px;
  }

  /* ACTIVE */

  .mobile-trigger.active span{

    background:transparent;
  }

  .mobile-trigger.active span::before{

    top:0;

    transform:
    rotate(45deg);
  }

  .mobile-trigger.active span::after{

    top:0;

    transform:
    rotate(-45deg);
  }

  /* =========================================================
     OVERLAY
  ========================================================= */

  .mobile-overlay{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    background:
    rgba(5,5,5,.94);

    backdrop-filter:
    blur(30px);

    -webkit-backdrop-filter:
    blur(30px);

    z-index:1000000;

    display:flex;

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

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:.45s ease;
  }

  .mobile-overlay.active{

    opacity:1;
    visibility:visible;

    pointer-events:auto;
  }

  /* NAV */

  .mobile-nav{

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:24px;

    transform:
    translateY(20px);

    opacity:0;

    transition:.45s ease;
  }

  .mobile-overlay.active .mobile-nav{

    transform:
    translateY(0);

    opacity:1;
  }

  .mobile-nav a{

    color:#fff;

    text-decoration:none;

    font-size:20px;
    font-weight:700;

    transition:.3s ease;
  }

  .mobile-nav a:hover{

    color:#f2d39a;
  }

}


@media(max-width:768px){

  .main-navbar{

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

    flex-direction:row;
  }

  .mobile-menu-wrap{

    display:flex;

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

    width:52px;

    flex-shrink:0;

    order:1;
  }

  .nav-logo{

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

    order:2;

    margin:0;
  }

}