*, ::after, ::before { box-sizing: border-box;}
*{ outline: none !important;}

body{ margin:0; padding:0; background-color: #e8e0da; color:#222; font-family:"Helvatica Neue", sans-serif;}
body{    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -ms-word-wrap: break-word;
    word-wrap: break-word;}



a{ text-decoration: none;}

img{ max-width: 100%;}

.smooth-scroll{ width: 100%; display: flex; flex-wrap: wrap; position: relative; overflow: hidden; background: red;}


@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(360deg); }
    to { -webkit-transform: rotate(0); }
}
@-moz-keyframes rotate {
    from { -moz-transform: rotate(360deg); }
    to { -moz-transform: rotate(0); }
}
@-ms-keyframes rotate {
    from { -ms-transform: rotate(360deg); }
    to { -ms-transform: rotate(0); }
}
@-o-keyframes rotate {
    from { -o-transform: rotate(360deg); }
    to { -o-transform: rotate(0); }
}
@keyframes rotate {
    from { transform: rotate(360deg); }
    to { transform: rotate(0); }
}



.a-container{ width: 100%; display: block; padding: 0 2vw;}

.navbar{ width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 30px 2vw; position: absolute; top:0; left: 0; z-index: 4;
  .logo{ display: inline-block;
    img{ height: 36px;}}
  .nav-links{ margin: 0 auto; padding: 0;
    li{display: inline-block; margin: 0 10px; padding: 0; list-style: none;
      a{color: #222; font-weight: bold; font-size: 13px;}}}
  .current-time{ margin-left: auto; font-size: 12px; font-weight: 600;}
  .custom-button{ margin-left: 60px;
    a{ height: 62px; display: flex;  align-items: center; background-color: #222; color:#e8e0da; padding: 0 40px; border-radius: 62px;}}}
.hero{ width: 100%; min-height: calcc(100svh + 100px); display: flex; flex-wrap: wrap; align-items: flex-end; padding-top: 100px; padding-bottom: 30px; margin-bottom: 100px; position: relative; overflow: hidden;
  &:after{content:""; width: 100%; height: 200px; position: absolute; left: 0; bottom: 0; z-index: 2;
  background: rgb(232,224,218);
  background: -moz-linear-gradient(0deg, rgba(232,224,218,1) 0%, rgba(232,224,218,0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(232,224,218,1) 0%, rgba(232,224,218,0) 100%);
  background: linear-gradient(0deg, rgba(232,224,218,1) 0%, rgba(232,224,218,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e8e0da",endColorstr="#e8e0da",GradientType=1);}
  .video-bg{ min-width: 100%; min-height: 100%; max-width: inherit; position: absolute; left: 0; top: 0; z-index: 0;
    video{ width: 100%; opacity: 0.05; filter: grayscale(100%);}}
  .a-container {position: relative; z-index: 3;}
  h1{ font-size: 10vw; font-weight: 200; margin: 0; letter-spacing: -0.3vw;
    span{ width: 100%; display: block; text-indent: 5vw;
      &:last-child{ text-indent:10vw;}
      img{ height: 7vw; margin: 0 2vw;}}}
  p{ max-width: 70%; padding-left:15vw; font-size: 19px; opacity: 0.6; line-height: 1.4;}
  .bottom{ width: 100%; display: flex;
    .play{ display: inline-block; position: absolute; right: 2vw; bottom: 0; -webkit-animation-name: rotate; -moz-animation-name: rotate; -ms-animation-name: rotate; -o-animation-name: rotate; animation-name: rotate;
      -webkit-animation-duration: 10s; -moz-animation-duration: 10s; -ms-animation-duration: 10s; -o-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear;
    text{ font-size: 11px;}}

  }
  .scroll-down{ width: 200px; height: 60px; display: flex; align-items: center; background-color: #eee; border-radius: 60px; overflow: hidden; position: relative; white-space: nowrap;
    span{ margin: 0 5px;
      svg{ margin-left: 10px; transform: translateY(1px);}}}}


.hero-image{ width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 100px; padding: 0 2vw;
  figure{ width: 100%; max-height: 80vh; margin: 0; margin-bottom: 30px; position: relative; overflow: hidden; object-fit: cover; border-radius: 2vw;
    img{ width: 100%;}}
  h4{ width: 100%; font-size: 3vw; margin: 0;}
  p{ margin: 0; font-size: 19px;}}



.packages{ width: 100%; display: block; margin-bottom:100px;
  h2{ width: 100%; font-size: 2vw;}
  a{color:#222; text-decoration: underline;}
  p{ width: 100%; display: block; margin-bottom: 40px;}
  .pricing-columns{display: grid; grid-template-columns: repeat(4, 1fr); gap: 2vw;
    .pricing-column{ width: 100%; display: block; padding: 40px; border: 1px solid #222; border-radius: 2vw; position: relative;
      .popular-badge{  background: #222; color:#fff; position: absolute; left: 40px; top:30px; border-radius: 4px; font-size: 12px; padding: 3px 8px;}
      .package-header{ width: 100%; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 20px; margin-bottom: 20px; padding-top: 20px;
        h3{ font-size: 2vw; margin: 0;}
        .price{ width: 100%; font-size: 1.5vw; margin-bottom: 10px;}}
      .features{ width: 100%; margin-bottom: 30px; padding-left: 20px;
        li{margin-bottom: 10px;}}
      .cta-button{height: 62px; display: flex; align-items: center; justify-content: center; font-weight: bold; background-color: #222; color:#e8e0da ; padding: 0 40px; border-radius: 62px;}}}}


.services{ display: grid; margin-bottom: 100px;
    h2{ width: 100%; font-size: 2vw; margin-bottom: 40px;}
    .services-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; padding-left: 10vw;
      .service{ width: 100%; padding-right: 15%;
        h3{ font-size: 15px; font-weight: 600; letter-spacing: -0.2px; text-transform: uppercase;}
        p{line-height: 1.4;}}}}


.why-choose-us{ display: grid; margin-bottom: 100px;
    h2{ width: 100%; font-size: 2vw; margin-bottom: 40px;}
    p{ font-size: 20px; padding-right: 50%; line-height: 1.4; margin-bottom: 50px}
    ul{ padding:0 10%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw;
      li{ width: 100%; display: block; padding: 40px; border: 1px solid #222; border-radius: 2vw; position: relative;
        strong{ width: 100%; display: block; margin-bottom: 20px; font-size: 1.5vw;}}}}


.works{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 2vw; margin-bottom: 100px; padding: 0 2vw;
  .column{ width: 100%; display: flex; flex-wrap: wrap; overflow: hidden;}
    figure{ width: 100%; max-height: 80vh; margin: 0; margin-bottom: 30px; position: relative; overflow: hidden; object-fit: cover; border-radius: 2vw;
      img{ width: auto; height: 100vh; max-width: inherit;}}
    h4{ width: 100%; font-size: 2vw; margin: 0;}
    p{ margin: 0; font-size: 19px; }}


.detailed-services{ display: grid; margin-bottom: 100px;
    h2{ width: 100%; font-size: 2vw; margin-bottom: 40px;}
    .services-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 2vw; padding: 0 10%;
      .service{ width: 100%; display: block; padding: 40px; border: 1px solid #222; border-radius: 2vw; position: relative;
        h3{ width: 100%; display: block; margin-bottom: 20px; font-size: 1.5vw; text-transform: uppercase;}
        p{line-height: 1.4;}}}}


.footer{ width: 96vw; display: flex; flex-wrap:wrap; background-color: #222; color:#e8e0da; padding:100px 2vw; margin: 2vw; margin-bottom: 0; border-radius: 2vw; position: relative; overflow: hidden;
  .video-bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; opacity: 0.05; filter: grayscale(100%);
    video{ width: 100%;}}
  .a-container{ position: relative; z-index: 1;}
  h2{ font-size: 8vw; font-weight: 200; margin: 0; letter-spacing: -0.3vw;}
  p{ max-width: 60%; font-size: 25px; opacity: 0.6; line-height: 1.4;}
  .actions{ display: flex; align-items: center; margin-top: 70px;
    small{ font-size: 19px; opacity: 0.5; margin: 0 30px; display: inline-block;}
    .email-link{ font-size: 27px; display: inline-block;
      a{color:#e8e0da;}}
    .custom-button{ display: inline-block;
      a{ height: 62px; display: flex; align-items: center; background-color: #e8e0da; color:#222; padding: 0 40px; border-radius: 62px;}}}}

.footer-bottom{ width: 100%; display: flex; padding: 40px 0;}