@charset "utf-8";
/* CSS Document */

/* Content Protection - Disable text selection */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow selection only in form inputs */
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Disable image dragging */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Re-enable pointer events for clickable images */
a img, button img {
    pointer-events: auto;
}


/*
  TEMPLATE BACKGROUNDS
    ken burns slideshow IMG
	single img bg IMG
  reset
  layout
  center container
  buttons
  navigation
    lines
  the wall
    drag intro
  countdown
  contact form
    placeholders
  preloader
  borders
  icon extras
    icon effect
  works hover
  skills bar
  logo
  
  ken burns slideshow
  single img bg
  YouTube video
*/


/* TEMPLATE BACKGROUNDS */

/* single img bg IMG */
.single-img-bg {
background-image: url(../img/background/single-img-bg.webp);
}

.single-img-bg::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 10, 10, 0.30);
pointer-events: none;
z-index: 1;
}

@media only screen and (max-width: 880px) {
  .single-img-bg::after {
    position: absolute;
    min-height: 100vh;
  }
}


/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
...vertical-align: baseline;
line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

*:focus {
outline: none !important;
}

/* remove dotted outline from links, button and input element */
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline: 0 !important;
}


/* layout */
html {
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
}

body {
font-family: 'Raleway', sans-serif;
font-size: 13px;
line-height: 1.5;
font-style: normal;
font-weight: 400;
text-align: left;
color: #1e1e1e;
background: #fafafa;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
width: 100%;
height: 100%;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
}

a {
color: #1e1e1e;
text-decoration: none;
outline: none;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a:hover, a:visited, a:active, a:focus {
color: #1e1e1e;
text-decoration: none;
outline: none;
}

p {
color: #1e1e1e;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
}

p a,
.quotations a {
position: relative;
color: #1e1e1e;
text-decoration: none;
outline: none;
font-weight: normal;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

p a:after,
.quotations a:after {
content: "";
position: absolute;
display: block;
width: 20px;
height: 1px;
left: 0;
bottom: -10px;
background-color: #0a0a0a;
-webkit-transition: width 300ms cubic-bezier(0.77, 0, 0.175, 1), background-color 300ms cubic-bezier(0.77, 0, 0.175, 1);
   -moz-transition: width 300ms cubic-bezier(0.77, 0, 0.175, 1), background-color 300ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: width 300ms cubic-bezier(0.77, 0, 0.175, 1), background-color 300ms cubic-bezier(0.77, 0, 0.175, 1);
     -o-transition: width 300ms cubic-bezier(0.77, 0, 0.175, 1), background-color 300ms cubic-bezier(0.77, 0, 0.175, 1);
        transition: width 300ms cubic-bezier(0.77, 0, 0.175, 1), background-color 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

p a:hover,
.quotations a:hover {
color: #1e1e1e;
text-decoration: none;
outline: none;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

p a:hover:after,
.quotations a:hover:after {
width: 100%;
background-color: #0a0a0a;
}

strong {
font-weight: bold;
}

::-moz-selection { background: #0a0a0a; color: #fafafa; }
     ::selection { background: #0a0a0a; color: #fafafa; }

 
h1, h2, h3, h4, h5, h6 {
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.clearfix {
clear: both;
float: none;
overflow: hidden;
}

h2 {
font-family: 'Oswald', sans-serif;
font-size: 45px;
font-weight: 800;
line-height: 1;
letter-spacing: normal;
color: #1e1e1e;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 3px 0 0 12px;
}

h2 .get-behind {
position: absolute;
width: 100%;
height: auto;
left: 0;
margin-top: -31px;
font-size: 55px;
letter-spacing: normal;
color: #1e1e1e;
        opacity: 0.15;
   -moz-opacity: 0.15;
-webkit-opacity: 0.15;
filter: alpha(opacity=15);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}

h3 {
font-family: 'Dosis', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.35em;
color: #1e1e1e;
margin: 0;
padding: 4px 0 0 17px;
}

h4 {
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.05em;
text-align: center;
text-transform: uppercase;
color: #1e1e1e;
margin: 0 0 0 12px;
padding: 0;
}

.services-owl h5 {
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 25px;
color: #1e1e1e;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: normal;
margin: 0 auto -2px auto;
padding: 2px 0 0 10px;
}

.services-owl p {
text-align: center;
}

.upper-page {
min-height: 100%;
min-height: 100vh;
min-height: -webkit-fill-available;
height: 100%;
margin: 0;
padding: 0;
}

.upper-content {
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
min-height: 100vh;
min-height: -webkit-fill-available;
}

.lower-page {
min-height: 100%;
min-height: 100vh;
min-height: -webkit-fill-available;
margin: 0;
padding: 0;
}

.lower-page.works {
min-height: 100%;
margin: 0 auto;
padding: 0;
}

.lower-content {
margin: 0 auto;
}

.lower-content p {
color: #1e1e1e;
font-weight: 400;
letter-spacing: 0.05em;
padding: 0 10px 10px 10px;
}

.lower-content-img {
position: relative;
margin: 0 auto 24px auto;
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
-webkit-transition: -webkit-transform 1s;
   -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
     -o-transition: -o-transform 1s;
        transition: transform 1s;
}

.lower-content-img:hover {
-webkit-transform: rotateY(360deg);
   -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
     -o-transform: rotateY(360deg);
        transform: rotateY(360deg);
-webkit-transition: -webkit-transform 1s;
   -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
     -o-transition: -o-transform 1s;
        transition: transform 1s;
}

.lower-content-img-correction {
margin: 0 auto;
}

.sections {
position: relative;
margin: 0 auto;
padding: 0;
z-index: 5;
}

@media only screen and (max-width: 1200px) {
  .sections {
    margin: 0 auto;
    padding: 0 50px;
  }
}

@media only screen and (max-width: 880px) {
  .sections {
    padding: 0 100px 0 100px;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  .sections {
    margin: 0 auto;
    padding: 0 20px;
  }
}

@media only screen and (max-width: 480px) {
  .sections {
    margin: 0 auto;
    padding: 0 20px;
  }
}

.sections-home {
position: relative;
margin: 0 auto;
padding: 0;
z-index: 5;
width: 100%;
height: 100%;
}

#viewport-wrapper {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 0;
}

#about, #services, #works, #contact {
display: none;
}

/* Dedicated pages should show their own section */
body.services-page #services,
body.contact-page #contact {
  display: block;
}

/* Services & Contact: premium dark background and readable light text */
#services,
#contact {
  background: #0a0a0a;
  color: #fafafa;
}

/* Strong enforcement in case other rules override background */
#services, #contact {
  background: #0a0a0a !important;
  color: #fafafa !important;
}

/* Ensure inner containers are transparent so the section background is visible */
#services .center-container, #contact .center-container,
#services .center-block, #contact .center-block,
#services .lower-content, #contact .lower-content {
  background: transparent !important;
}

#services .lower-content,
#contact .lower-content,
#services .lower-content p,
#contact .lower-content p {
  color: #fafafa;
}

#services a,
#contact a {
  color: #fafafa;
}

/* Services carousel: make pagination "lines" and nav arrows visible on dark bg */
#services .owl-page span {
  background: rgba(255,255,255,0.45) !important;
}

#services .owl-page:hover span,
#services .owl-page.active span {
  background: rgba(255,255,255,0.95) !important;
}

#services .owl-prev,
#services .owl-next {
  color: #ffffff !important;
}

#services .owl-prev .fa,
#services .owl-next .fa {
  color: #ffffff !important;
}

#services .owl-prev:before,
#services .owl-next:before {
  /* subtle light overlay for the arrow area */
  background: rgba(255,255,255,0.02) !important;
}

/* Remove dark shading/box from owlCarousel navigation and transitions */
#services .owl-prev:before,
#services .owl-next:before,
.owl-prev:before,
.owl-next:before {
  background: none !important;
  box-shadow: none !important;
}

/* Ensure carousel containers/items stay transparent during transitions */
.owl-carousel,
.owl-carousel .owl-wrapper,
.owl-carousel .owl-wrapper-outer,
.owl-carousel .owl-item,
.services-owl .item {
  background: transparent !important;
}

/* Prevent a dark overlay when transitionStyle runs */
.owl-carousel .owl-item .services-icon,
.owl-carousel .owl-item > * {
  background: transparent !important;
}

/* Reduce pagination bar darkness if visible */
.owl-page span { background: rgba(255,255,255,0.12) !important; }
.owl-page.active span { background: rgba(255,255,255,0.22) !important; }

/* Services grid: simple centered stacked layout (fallback) */
/* Restore original carousel styles (use .services-owl from plugins.css) */
.services-owl .item { text-align: center; padding: 30px 20px; }
.services-owl .services-icon { margin-bottom: 18px; }
.services-owl .services-icon i {
  font-size: 64px; /* larger icon */
  line-height: 1;
  display: block;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

@media (max-width: 768px) {
  .services-owl .services-icon i { font-size: 48px; }
}

@media (max-width: 480px) {
  .services-owl .services-icon i { font-size: 40px; }
}
.services-owl h5 { font-family: 'Oswald', sans-serif; font-size: 25px; color: #fafafa; margin: 8px 0 12px; }
.services-owl p { color: rgba(255,255,255,0.9); max-width: 700px; margin: 0 auto; line-height: 1.7; font-size: 18px; }

@media (max-width: 768px) {
  .services-owl p { font-size: 16px; }
}

@media (max-width: 480px) {
  .services-owl p { font-size: 14.5px; }
}

/* Slightly increase contact column text for readability */
#contact .col-md-4 p, #contact p { font-size: 15px; }

/* make section headings truly centered here (remove left padding applied globally) */
#services h2,
#contact h2 {
  padding-left: 0;
}


/* Strong override: make all text in services & contact white for dark background */
#services,
#contact,
#services * ,
#contact * {
  color: #fafafa !important;
}

/* Typography: slightly bolder text for a premium feel */
.upper-content p,
.lower-content p,
.sections h2,
.sections h3,
.sections h4,
#services h2,#services h3,#services h4,
#contact h2,#contact h3,#contact h4 {
  font-weight: 600 !important;
}

.upper-content p,
.lower-content p,
.sections p {
  font-weight: 500 !important;
}

/* Form controls: keep backgrounds transparent and text readable */
#services input,
#services textarea,
#services select,
#contact input,
#contact textarea,
#contact select {
  color: #fafafa !important;
  background-color: transparent !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Placeholder colors */
#services ::-webkit-input-placeholder,
#contact ::-webkit-input-placeholder { color: rgba(255,255,255,0.6) !important; }
#services :-moz-placeholder,
#contact :-moz-placeholder { color: rgba(255,255,255,0.6) !important; }
#services ::-moz-placeholder,
#contact ::-moz-placeholder { color: rgba(255,255,255,0.6) !important; }
#services :-ms-input-placeholder,
#contact :-ms-input-placeholder { color: rgba(255,255,255,0.6) !important; }

/* UI elements: arrows, borders, icons — ensure they're visible on dark bg */
#services .arrows-horizontal,
#contact .arrows-horizontal,
#services .arrows-vertical,
#contact .arrows-vertical {
  background: #fff !important;
}

#services .border-top,
#contact .border-top,
#services .border-bottom,
#contact .border-bottom {
  border-color: rgba(255,255,255,0.18) !important;
}

#services .quote-mark-l,
#services .quote-mark-r,
#contact .quote-mark-l,
#contact .quote-mark-r,
#services .awesome-contact .fa,
#contact .awesome-contact .fa {
  color: #fafafa !important;
}

/* Align contact icons with their text */
.awesome-contact {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  font-size: 18px;
}
.awesome-contact + p {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 10px 0;
}

/* PhotoSwipe arrow buttons (in galleries) */
#services .pswp__button,
#contact .pswp__button {
  color: #fff !important;
  background: transparent !important;
}

/* If PhotoSwipe uses SVG or image arrows, invert them for dark background */
#services .pswp__button--arrow--left img,
#services .pswp__button--arrow--right img,
#contact .pswp__button--arrow--left img,
#contact .pswp__button--arrow--right img {
  filter: invert(1) brightness(2) !important;
}

/* Contact: make submit button transparent with white outline/text */
#contact .btn.btn-padding.btn-correction {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
}

#contact .btn.btn-padding.btn-correction .btn-label {
  color: #ffffff !important;
}

/* Center the submit label inside the contact button */
#contact .btn .btn-label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* Vertically center the label by matching the button height */
#contact .btn .btn-label {
  line-height: 40px !important;
  padding: 0 !important;
}

/* Make the mask transparent by default and a subtle white overlay on hover */
#contact .btn .mask {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

#contact .btn:hover .mask {
  background: rgba(255,255,255,0.06) !important;
}

/* Ensure focus/active states remain visible */
#contact .btn:focus,
#contact .btn:active {
  outline: none !important;
  color: #ffffff !important;
}

/* Final override: force dark background for Services and Contact pages */
/* Placed at the end to beat other rules; keeps inner containers transparent */
#services, #contact {
  background-color: #0a0a0a !important;
  color: #fafafa !important;
}
#services .center-container, #contact .center-container,
#services .center-block, #contact .center-block,
#services .lower-content, #contact .lower-content,
#services .sections, #contact .sections {
  background: transparent !important;
}
/* If any element is explicitly white, force its background/text to inherit the dark theme */
#services * , #contact * {
  background: transparent !important;
  color: inherit !important;
}

/* Ensure when a section is active (has .current) it displays the dark background above other layers */
#services.current, #contact.current {
  background-color: #0a0a0a !important;
  color: #fafafa !important;
  z-index: 20 !important;
}

#services.current *, #contact.current * {
  color: inherit !important;
  background: transparent !important;
}

.dividerOT-about,
.dividerOT-services,
.dividerOT-works {
position: relative;
width: auto;
height: 85px;
margin: 0 auto;
}

.dividerOT-contact {
position: relative;
width: auto;
height: 49px;
margin: 0 auto;
}

/* Prevent white flash during section transitions (minimal, targeted) */
html, body {
  background-color: #0a0a0a;
}

/* Make transition container and global overlay transparent so underlying sections show through */
.fade-position, #viewport, #overlay-all {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure services/contact sections keep dark background and readable text */
#services, #contact {
  background-color: #0a0a0a;
  color: #fafafa;
}

/* Prevent PhotoSwipe backdrop from showing white during transitions */
.pswp__bg, .pswp__ui {
  background: transparent !important;
}

@media only screen and (max-width: 880px) {
  .dividerOT-contact-form {
    position: relative;
    width: auto;
    height: 71px;
    margin: 0 auto;
  }
}

.make-space {
margin-left: 15px;
margin-right: 15px;
}

.awesome {
font-size: 17px;
letter-spacing: 0.05em;
}

.awesome-services {
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.05em;
}

.awesome-contact {
font-size: 25px;
margin: 0;
padding: 12px 0 12px 10px;
text-align: left;
display: block;
}

.change-color {
color: #1e1e1e;
}


/* center container */
.center-container-home {
position: absolute;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
background: none;
}

.center-block-home {
display: table-cell;
vertical-align: middle;
}

.center-container {
position: absolute;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
background: none;
}

.center-block {
display: table-cell !important;
vertical-align: middle !important;
}


/* buttons */
.btn {
position: relative;
display: block;
width: 185px;
height: 40px;
overflow: hidden;
color: #fafafa;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
padding: 0 20px;
-webkit-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
   -moz-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -ms-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
     -o-transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0s;
border: none;
cursor: pointer;
background: #fafafa;
z-index: 5;
}

.btn .btn-label {
padding: 14px 0;
}

.btn:hover, .btn:active {
color: #fafafa;
border: none;
outline: none;
}

btn:focus {
color: #1e1e1e;
border: none;
outline: none;
}

.btn span {
position: relative;
display: inline-block;
z-index: 2;
}

.btn .mask {
position: absolute;
display: block;
width: 0;
height: 100%;
left: 0; 
top: 0;
-webkit-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
   -moz-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -ms-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
     -o-transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
        transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
background: rgba(250, 250, 250, 1);
border: 1px solid #1e1e1e;
z-index: 1;
}

.btn:hover .mask {
width: 100%;
}

.btn-padding {
margin: 20px 0 0 0;
}

.btn-correction {
margin: 20px auto 0 auto;
}

.btn.btn-mobile {
display: none;
visibility: hidden;
}

@media only screen and (max-width: 880px) {
  .btn.btn-pc {
    display: none;
    visibility: hidden;
  }

  .btn.btn-mobile {
    display: inline;
    visibility: visible;
    width: 55px;
  }
}


/* navigation */
#menu-mobile-btn {
position: absolute;
width: 50px;
height: 44px;
top: 50%;
transform: translateY(-50%);
right: 40px;
z-index: 100000;
}

.menu-toggle {
position: absolute;
display: block;
padding: 0;
background: none;
line-height: 1;
        opacity: 1 !important;
   -moz-opacity: 1 !important;
-webkit-opacity: 1 !important;
filter: alpha(opacity=100) !important;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
border: none;
z-index: 100000;
}

#menu-mobile {
position: fixed;
font-family: 'Oswald', sans-serif;
font-size: 30px;
font-style: normal;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
width: 390px;
height: 100%;
right: -200%;
top: 0;
margin: auto;
-webkit-transition: right .6s ease-in-out;
   -moz-transition: right .6s ease-in-out;
    -ms-transition: right .6s ease-in-out;
     -o-transition: right .6s ease-in-out;
        transition: right .6s ease-in-out;
-webkit-transform: skew(-22deg, 0deg);
   -moz-transform: skew(-22deg, 0deg);
    -ms-transform: skew(-22deg, 0deg);
     -o-transform: skew(-22deg, 0deg);
        transform: skew(-22deg, 0deg);
background: rgba(10, 10, 10, 0.98); /* slightly softer than pure black */
box-shadow: -10px 0 30px rgba(10, 10, 10, 0.6);
border-left: 1px solid rgba(255,255,255,0.04);
z-index: 99999;
}

#menu-mobile.activated {
right: 0;
}

#menu-mobile ul {
width: 390px;
list-style: none outside none;
margin: 0 auto;
padding-left: 121px;
}

#menu-mobile ul li {
padding: 0 0 2px 0;
}

#menu-mobile .credits {
font-size: 12px;
margin: 6px 0 0 0;
}

#menu-mobile .credits a {
color: #fafafa;
text-decoration: none;
}

#menu-mobile a {
display: none;
min-width: 10px;
color: #fafafa;
text-decoration: none;
-webkit-transition: color .8s ease-in-out;
   -moz-transition: color .8s ease-in-out;
    -ms-transition: color .8s ease-in-out;
     -o-transition: color .8s ease-in-out;
        transition: color .8s ease-in-out;
}

#menu-mobile a:hover {
color: #1e1e1e;
-webkit-transition: color .8s ease-in-out;
   -moz-transition: color .8s ease-in-out;
    -ms-transition: color .8s ease-in-out;
     -o-transition: color .8s ease-in-out;
        transition: color .8s ease-in-out;
}

/* Override: keep menu link text visible (white) on dark menu background and on hover */
#menu-mobile,
#menu-mobile.activated {
  /* ensure link styles inside the panel are white */
}
#menu-mobile a {
  color: #fafafa !important;
}
#menu-mobile a:hover,
#menu-mobile.activated a:hover {
  color: #ffffff !important;
}

#menu-mobile li .active {
color: #fafafa;
}

.menu-nav-wrapper {
display: table;
width: 100%;
height: 100%;
overflow: hidden;
}

/* Make menu section titles bolder and more prominent */
.menu-nav a, #menu-mobile ul li a, .menu-state {
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Keep paragraph text lighter for contrast */
p, .services-owl p, #contact p {
  font-weight: 400;
}

.menu-nav {
display: table-cell;
width: 100%;
height: 100%;	
vertical-align: middle;
}

@media only screen and (max-width: 880px) {
  #menu-mobile-btn {
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
  }

  #menu-mobile {
    font-size: 20px;
    width: 300px;
  }

  #menu-mobile ul {
    width: 300px;
    padding-left: 81px;
  }

  #menu-mobile ul li {
    padding: 0 0 3px 0;
  }

  #menu-mobile .credits {
    font-size: 10px;
    margin: 6px 0 0 0;
  }
}

@media only screen and (max-width: 640px) {
  #menu-mobile {
    font-size: 17px;
    width: 230px;
  }

  #menu-mobile ul {
    width: 230px;
    padding-left: 47px;
  }
}


/* lines */
.lines-button {
margin: -16px 0 0 -3px;
padding: 30px 16px;
cursor: pointer;
-webkit-user-select: none;
 -khtml-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

.lines-button:hover {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.lines-button:active {
-webkit-transition: 0;
   -moz-transition: 0;
	-ms-transition: 0;
     -o-transition: 0;
        transition: 0;
}

.lines {
position: relative;
display: inline-block;
width: 35px;
height: 2px;
-webkit-transition: .3s;
  -moz-transition: .3s;
	-ms-transition: .3s;
    -o-transition: .3s;
      transition: .3s;
/* No background here; color is set by body class below */
}

.lines:after,
.lines:before {
content: "";
position: absolute;
display: inline-block;
width: 35px;
height: 2px;
-webkit-transition: .3s;
  -moz-transition: .3s;
	-ms-transition: .3s;
    -o-transition: .3s;
      transition: .3s;
left: 0;
-webkit-transform-origin: .28571rem center;
  -moz-transform-origin: .28571rem center;
   -ms-transform-origin: .28571rem center;
    -o-transform-origin: .28571rem center;
      transform-origin: .28571rem center;
/* No background here; color is set by body class below */
}

.lines:before {
top: 10px;
}

.lines:after {
top: -10px;
}

.lines-button.minus.lines-close .lines:after,
.lines-button.minus.lines-close .lines:before {
-webkit-transform: none;
   -moz-transform: none;
    -ms-transform: none;
     -o-transform: none;
        transform: none;
top: 0;
width: 35px;
background: #fafafa;
}

body.light-menu .lines-button.minus.lines-close .lines:after,
body.light-menu .lines-button.minus.lines-close .lines:before {
background: #0a0a0a;
}

.lines-button.x.lines-close .lines {
background: 0 0;
}

.lines-button.x.lines-close .lines:after,
.lines-button.x.lines-close .lines:before {
-webkit-transform-origin: 50% 50%;
   -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
     -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
top: 0;
width: 35px;
background: #ffffff;
}

.lines-button.x.lines-close .lines:before {
-webkit-transform: rotate3d(0,0,1,45deg);
   -moz-transform: rotate3d(0,0,1,45deg);
    -ms-transform: rotate3d(0,0,1,45deg);
     -o-transform: rotate3d(0,0,1,45deg);
        transform: rotate3d(0,0,1,45deg);
}

.lines-button.x.lines-close .lines:after {
-webkit-transform: rotate3d(0,0,1,-45deg);
   -moz-transform: rotate3d(0,0,1,-45deg);
    -ms-transform: rotate3d(0,0,1,-45deg);
     -o-transform: rotate3d(0,0,1,-45deg);
        transform: rotate3d(0,0,1,-45deg);
}

.lines-button.x2 .lines {
-webkit-transition: background .3s .5s ease;
   -moz-transition: background .3s .5s ease;
	-ms-transition: background .3s .5s ease;
     -o-transition: background .3s .5s ease;
        transition: background .3s .5s ease;
}

.lines-button.x2 .lines:after,
.lines-button.x2 .lines:before {
-webkit-transform-origin: 50% 50%;
   -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
     -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
-webkit-transition: top .3s .6s ease, -webkit-transform .3s ease;
   -moz-transition: top .3s .6s ease, -moz-transform .3s ease;
	-ms-transition: top .3s .6s ease, -ms-transform .3s ease;
     -o-transition: top .3s .6s ease, -o-transform .3s ease;
        transition: top .3s .6s ease, transform .3s ease;
}

.lines-button.x2.lines-close .lines {
-webkit-transition: background .3s 0 ease;
   -moz-transition: background .3s 0 ease;
	-ms-transition: background .3s 0 ease;
     -o-transition: background .3s 0 ease;
        transition: background .3s 0 ease;
background: 0 0;
}

.lines-button.x2.lines-close .lines:after,
.lines-button.x2.lines-close .lines:before {
-webkit-transition: top .3s ease, -webkit-transform .3s .5s ease;
   -moz-transition: top .3s ease, -moz-transform .3s .5s ease;
	-ms-transition: top .3s ease, -ms-transform .3s .5s ease;
     -o-transition: top .3s ease, -o-transform .3s .5s ease;
        transition: top .3s ease, transform .3s .5s ease;
top: 0;
width: 35px;
background: #ffffff;
}

.lines-button.x2.lines-close .lines:before {
-webkit-transform: rotate3d(0,0,1,45deg);
   -moz-transform: rotate3d(0,0,1,45deg);
    -ms-transform: rotate3d(0,0,1,45deg);
     -o-transform: rotate3d(0,0,1,45deg);
        transform: rotate3d(0,0,1,45deg);
}

.lines-button.x2.lines-close .lines:after {
-webkit-transform: rotate3d(0,0,1,-45deg);
   -moz-transform: rotate3d(0,0,1,-45deg);
    -ms-transform: rotate3d(0,0,1,-45deg);
     -o-transform: rotate3d(0,0,1,-45deg);
        transform: rotate3d(0,0,1,-45deg);
}

/* Force center line visibility when not closed */
.menu-trigger #menu-mobile-caller .lines {
  background: #ffffff !important;
}

/* Fix: hide center line when hamburger becomes X (close) */
#menu-mobile-caller.lines-button.x.lines-close .lines,
#menu-mobile-caller.lines-button.x2.lines-close .lines,
.menu-trigger #menu-mobile-caller.lines-button.x.lines-close .lines,
.menu-trigger #menu-mobile-caller.lines-button.x2.lines-close .lines {
  background: transparent !important;
}

#menu-mobile-caller.lines-button.x.lines-close .lines:before,
#menu-mobile-caller.lines-button.x.lines-close .lines:after,
#menu-mobile-caller.lines-button.x2.lines-close .lines:before,
#menu-mobile-caller.lines-button.x2.lines-close .lines:after,
.menu-trigger #menu-mobile-caller.lines-button.x.lines-close .lines:before,
.menu-trigger #menu-mobile-caller.lines-button.x.lines-close .lines:after,
.menu-trigger #menu-mobile-caller.lines-button.x2.lines-close .lines:before,
.menu-trigger #menu-mobile-caller.lines-button.x2.lines-close .lines:after {
  background: #fff !important;
}


/* the wall */
.wall {
z-index: 1;
}

/* Footer copyright bottom-right */


#viewport {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
margin: 0;
}

@media only screen and (max-width: 880px) {
  #viewport {
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh;
    margin: 0 !important;
    overflow: visible;
  }
}

#overlay,
#overlay-all {
position: relative;
width: 100%;
height: 520px;
background: none;
cursor: move;
z-index: 2;
display: none;
}

#overlay-all {
cursor: auto;
}

@media only screen and (max-width: 880px) {
  #overlay,
  #overlay-all {
    width: 100%;
    height: 367px;
  }
}

@media only screen and (max-width: 640px) {
  #overlay,
  #overlay-all {
    width: 100%;
    height: 316px;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  #overlay,
  #overlay-all {
    width: 100%;
    height: 173px;
  }
}

@media only screen and (max-width: 480px) {
  #overlay,
  #overlay-all {
    width: 100%;
    height: 173px;
  }
}

#overlay-img {
position: relative;
margin: 0 auto;
z-index: 2;
}


/* drag intro */
.drag-intro-hide {
display: none;
visibility: hidden;
}

#drag-intro {
position: absolute;
display: none;
width: 180px;
height: 180px;
top: 50%;
left: 50%;
margin: -129px 0 0 -90px;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
background: rgba(255, 255, 255, .75);
cursor: move;
z-index: 100;
}

@media only screen and (max-width: 880px) {
  #drag-intro {
    margin: -133px 0 0 -90px;
  }
}

@media only screen and (max-width: 640px) {
  #drag-intro {
    margin: -134px 0 0 -90px;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  #drag-intro {
    margin: -90px 0 0 -90px;
  }
}

@media only screen and (max-width: 480px) {
  #drag-intro {
    margin: -133px 0 0 -90px;
  }
}

#drag-intro div {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}

#drag-intro .arrows-vertical:after,
#drag-intro .arrows-vertical:before,
#drag-intro .arrows-horizontal:after,
#drag-intro .arrows-horizontal:before {
content:"";
position: absolute;
display: block;
width: 30px;
height: 20px;
top: 30px;
left: 50%;
margin-left: -15px;
background: url(../img/drag-intro.png) no-repeat;
background-size: 100%;
}

#drag-intro .arrows-vertical:after {
top: auto;
bottom: 30px;
-webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
        transform: rotate(180deg);
}

#drag-intro .arrows-horizontal:after,
#drag-intro .arrows-horizontal:before {
top: 50%;
left: 30px;
margin-left: 0;
margin-top: -10px;
-webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
     -o-transform: rotate(270deg);
        transform: rotate(270deg);
}

#drag-intro .arrows-horizontal:after {
left: auto;
right: 30px;
-webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
        transform: rotate(90deg);
}

#drag-intro.show .arrows-horizontal {
-webkit-animation: growH 1s 0s 1;
   -moz-animation: growH 1s 0s 1;
    -ms-animation: growH 1s 0s 1;
     -o-animation: growH 1s 0s 1;
        animation: growH 1s 0s 1;
}

#drag-intro.show .arrows-vertical {
-webkit-animation: growV 1s 1s 1;
   -moz-animation: growV 1s 1s 1;
    -ms-animation: growV 1s 1s 1;
     -o-animation: growV 1s 1s 1;
        animation: growV 1s 1s 1;
}

@-webkit-keyframes growH {
	0%, 100% {
		width: 100%;
	}
	50% {
		width: 130%;
	}
}
@-moz-keyframes growH {
	0%, 100% {
		width: 100%;
	}
	50% {
		width: 130%;
	}
}
@-ms-keyframes growH {
	0%, 100% {
		width: 100%;
	}
	50% {
		width: 130%;
	}
}
@-o-keyframes growH {
	0%, 100% {
		width: 100%;
	}
	50% {
		width: 130%;
	}
}
@keyframes growH {
	0%, 100% {
		width: 100%;
	}
	50% {
		width: 130%;
	}
}
@-webkit-keyframes growV {
	0%, 100% {
		height: 100%;
	}
	50% {
		height: 130%;
	}
}
@-moz-keyframes growV {
	0%, 100% {
		height: 100%;
	}
	50% {
		height: 130%;
	}
}
@-ms-keyframes growV {
	0%, 100% {
		height: 100%;
	}
	50% {
		height: 130%;
	}
}
@-o-keyframes growV {
	0%, 100% {
		height: 100%;
	}
	50% {
		height: 130%;
	}
}
@keyframes growV {
	0%, 100% {
		height: 100%;
	}
	50% {
		height: 130%;
	}
}


/* countdown */
#countdown-wrapper,
#countdown-wrapper-all {
position: absolute;
display: none;
width: 40%;
max-width: 310px;
min-width: 310px;
height: auto;
overflow: hidden;
background: none;
margin: 0 auto;
left: 0;
right: 0;
bottom: 4px;
z-index: 10;
}

@media only screen and (max-width: 880px) {
  #countdown-wrapper,
  #countdown-wrapper-all {
    max-width: 260px;
    min-width: 260px;
    bottom: -9px;
  }
}

@media only screen and (max-width: 640px) {
  #countdown-wrapper,
  #countdown-wrapper-all {
    bottom: 0;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  #countdown-wrapper,
  #countdown-wrapper-all {
    display: none;
    visibility: hidden;
  }
}

@media only screen and (max-width: 480px) {
  #countdown-wrapper,
  #countdown-wrapper-all {
    bottom: -26px;
  }
}

#countdown-wrapper.oblique,
#countdown-wrapper-all.oblique {
-webkit-transform: skew(-8deg, 0deg);
   -moz-transform: skew(-8deg, 0deg);
    -ms-transform: skew(-8deg, 0deg);
     -o-transform: skew(-8deg, 0deg);
        transform: skew(-8deg, 0deg);
}

ul#countdown li {
display: inline-block;
width: 65px;
color: #1e1e1e;
text-align: center;
}

@media only screen and (max-width: 880px) {
  ul#countdown li {
    width: 55px;
  }
}

ul#countdown li.countdown-slash {
display: inline-block;
width: 5px;
text-align: center;
color: #1e1e1e;
}

ul#countdown li span {
font-family: 'Oswald', sans-serif;
font-size: 30px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.04em;
margin: 0;
padding: 0;
position: relative;
}

@media only screen and (max-width: 880px) {
  ul#countdown li span {
    font-size: 25px;
  }
}

ul#countdown li span.days {
font-size: 50px;
}

@media only screen and (max-width: 880px) {
  ul#countdown li span.days {
    font-size: 40px;
  }
}

@media only screen and (max-width: 640px) {
  ul#countdown li span.days {
    font-size: 25px;
  }
}

ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 12px;
font-style: normal;
font-weight: 400;
text-align: center;
margin: 0;
}

@media only screen and (max-width: 640px) {
  ul#countdown li p.timeRefDays,
  ul#countdown li p.timeRefHours,
  ul#countdown li p.timeRefMinutes,
  ul#countdown li p.timeRefSeconds {
    font-size: 11px;
  }
}


/* contact form */
#contact-form {
width: 100%;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}

@media only screen and (max-width: 880px) {
  #contact-form {
    padding: 0;
  }
}

form {
margin: 0;
padding: 0;
}

#form input {
position: relative;
width: 100%;
height: 40px;
border-bottom: 1px solid #1e1e1e;
border-left: none;
border-right: none;
border-top: none;
padding: 5px 5px;
background: none;
margin: 20px 0 10px 0;
-webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
        transition: all 0.3s;
font-family: 'Raleway', sans-serif;
font-size: 14px;
line-height: 1.5;
font-style: normal;
font-weight: normal;
text-align: center;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

textarea {
position: relative;
width: 100%;
height: 100px;
border-bottom: 1px solid #1e1e1e;
border-left: none;
border-right: none;
border-top: none;
padding: 5px 5px;
background: none;
margin: 5px;
font-family: 'Raleway', sans-serif;
font-size: 14px;
line-height: 1.5;
font-style: normal;
font-weight: normal;
text-align: center;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#form textarea {
margin: 20px 0 10px 0;
} 

#form input:hover,
#form textarea:hover {
border-color: rgba(10, 10, 10, 1);
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

.success {
font-family: 'Raleway',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 10px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.25em;
margin: 0 auto;
padding: 0;
line-height: 1;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#form .error {
position: absolute;
font-size: 9px;
text-transform: uppercase;
text-align: left;
display: block;
margin: -2px 0 0 1px;
padding: 0;
letter-spacing: 0.25em;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


/* placeholders */
::-webkit-input-placeholder { color: #1e1e1e; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; }
     :-ms-input-placeholder { color: #1e1e1e; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; }
         ::-moz-placeholder { color: #1e1e1e; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; }
     input:-moz-placeholder { color: #1e1e1e; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; }

input:focus::-webkit-input-placeholder { color: transparent; }
     input:focus:-ms-input-placeholder { color: transparent; }
         input:focus::-moz-placeholder { color: transparent; }
          input:focus:-moz-placeholder { color: transparent; }

textarea:focus::-webkit-input-placeholder { color: transparent; }
     textarea:focus:-ms-input-placeholder { color: transparent; }
         textarea:focus::-moz-placeholder { color: transparent; }
          textarea:focus:-moz-placeholder { color: transparent; }

/* social icons */
.social-icons-wrapper {
position: fixed;
bottom: 25px;
left: 45px;
}

@media only screen and (max-width: 880px) {
  .social-icons-wrapper {
    bottom: 20px;
    left: 20px;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  .social-icons-wrapper {
    display: none;
    visibility: hidden;
  }
}

@media only screen and (max-width: 480px) {
  .social-icons-wrapper {
    display: block;
    visibility: visible;
    bottom: 16px;
    left: 20px;
    transform: none;
  }

  ul.social-icons a {
    font-size: 16px !important;
    padding: 0 5px !important;
  }

  /* Remove left padding from first icon so its visual edge matches
     the logo's 20px left inset (the padding-right is kept for spacing) */
  .social-icons-wrapper ul li:first-child a {
    padding-left: 0 !important;
  }
}

.social-icons-wrapper ul {
margin: 0 auto;
padding: 0;
list-style-type: none;
}

.social-icons-wrapper ul li {
display: inline-block;
margin: 0;
padding: 0 0 0 8px;
}

.social-icons-wrapper ul li:first-child {
padding-left: 0;
}

ul.social-icons {
line-height: 1;
margin: 0;
padding: 0;
position: relative;
}

ul.social-icons a {
font-size: 14px;
padding: 0;
color: #fafafa;
text-decoration: none;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

ul.social-icons a:hover {
font-size: 14px;
padding: 0;
color: #fafafa;
text-decoration: none;
        opacity: 0.3;
   -moz-opacity: 0.3;
-webkit-opacity: 0.3;
filter: alpha(opacity=30);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}


/* preloader */
.preloader-bg {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent !important;
z-index: -1 !important;
}

#preloader {
position: fixed;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent !important;
z-index: -1 !important;
}

#preloader-status {
display: table-cell;
vertical-align: middle;
}

.preloader-position {
position: relative;
margin: 0 auto;
text-align: center;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
}

.loader {
position: relative;
width: 45px;
height: 45px;
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: 2px;
-webkit-animation: rotate 1s infinite linear;
   -moz-animation: rotate 1s infinite linear;
    -ms-animation: rotate 1s infinite linear;
     -o-animation: rotate 1s infinite linear;
        animation: rotate 1s infinite linear;
border: 3px solid rgba(17, 17, 17, .15);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

.loader span {
position: absolute;
width: 45px;
height: 45px;
top: -3px;
left: -3px;
border: 3px solid transparent;
border-top: 3px solid rgba(10, 10, 10, .75);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

@-webkit-keyframes rotate {
	0% {
	    -webkit-transform: rotate(0deg);
    }
	100% {
	    -webkit-transform: rotate(360deg);
	}
}
@keyframes rotate {
	0% {
	    transform: rotate(0deg);
	}
	100% {
	    transform: rotate(360deg);
	}
}


/* borders */
.border-top {
position: fixed;
width: 100%;
height: 70px;
left: 0;
top: 0;
background: none;
z-index: 100000;
}

@media only screen and (max-width: 880px) {
  .border-top {
    position: absolute;
    height: 60px;
  }
}

.border-top {
-webkit-transition: all 2.0s ease;
   -moz-transition: all 2.0s ease;
	-ms-transition: all 2.0s ease;
     -o-transition: all 2.0s ease;
        transition: all 2.0s ease;
}

.border-top.top-position {
-webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
     -o-transform: translateY(-200px);
        transform: translateY(-200px);
-webkit-transition: all 2.0s ease;
   -moz-transition: all 2.0s ease;
	-ms-transition: all 2.0s ease;
     -o-transition: all 2.0s ease;
        transition: all 2.0s ease;
}

.border-bottom {
position: fixed;
width: 100%;
height: auto;
left: 0;
bottom: 0;
background: none;
z-index: 99998;
}

.border-bottom {
-webkit-transition: all 2.0s ease;
   -moz-transition: all 2.0s ease;
	-ms-transition: all 2.0s ease;
     -o-transition: all 2.0s ease;
        transition: all 2.0s ease;
}

.border-bottom.bottom-position {
-webkit-transform: translateY(200px);
   -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
     -o-transform: translateY(200px);
        transform: translateY(200px);
-webkit-transition: all 2.0s ease;
   -moz-transition: all 2.0s ease;
	-ms-transition: all 2.0s ease;
     -o-transition: all 2.0s ease;
        transition: all 2.0s ease;
}


/* icon extras */
.hi-icon-wrap {
margin: 0;
padding: 0 0 0 10px;
}

.hi-icon-wrap a {
color: #1e1e1e;
}

.hi-icon-wrap a:hover {
color: #1e1e1e;
}

.hi-icon {
position: relative;
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 0;
width: 90px;
height: 90px;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
text-align: center;
z-index: 1;
}

.hi-icon:after {
position: absolute;
pointer-events: none;
content: "";
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
        border-radius: 50%;
-webkit-box-sizing: content-box; 
   -moz-box-sizing: content-box; 
        box-sizing: content-box;
}

.hi-icon:before {
font-family: 'FontAwesome';
speak: none;
font-size: 40px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.hi-icon-services-1:before {
	content: "\f121";
}

.hi-icon-services-2:before {
	content: "\f085";
}

.hi-icon-services-3:before {
	content: "\f26c";
}

.hi-icon-services-4:before {
	content: "\f0ac";
}


/* icon effect */
.set-8 {
background: none;
margin: 20px 0 20px 0;
}

.hi-icon-effect-8 .hi-icon {
background: rgba(219, 219, 219, .3);
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
   -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
        transition: transform ease-out 0.1s, background 0.2s;
}

.hi-icon-effect-8 .hi-icon:after {
top: 0;
left: 0;
padding: 0;
box-shadow: 0 0 0 2px rgba(219, 219, 219, .2);
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale(0.9);
   -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
        transform: scale(0.9);
z-index: -1;
}

.hi-icon-effect-8 .hi-icon:hover:after {
-webkit-animation: sonarEffect 1.3s ease-out 75ms;
   -moz-animation: sonarEffect 1.3s ease-out 75ms;
        animation: sonarEffect 1.3s ease-out 75ms;
}

@-webkit-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(10, 10, 10, .1), 0 0 10px 10px #0a0a0a, 0 0 0 10px rgba(10, 10, 10, .5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(10, 10, 10, .1), 0 0 10px 10px #0a0a0a, 0 0 0 10px rgba(10, 10, 10, .5);
		-webkit-transform: scale(1.5);
		opacity: 0;
	}
}

@-moz-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(10, 10, 10, .1), 0 0 10px 10px #0a0a0a, 0 0 0 10px rgba(10, 10, 10, .5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(10, 10, 10, .1), 0 0 10px 10px #0a0a0a, 0 0 0 10px rgba(10, 10, 10, .5);
		-moz-transform: scale(1.5);
		opacity: 0;
	}
}

@keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(10, 10, 10, .1), 0 0 10px 10px #0a0a0a, 0 0 0 10px rgba(10, 10, 10, .5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(10, 10, 10, .1), 0 0 10px 10px #0a0a0a, 0 0 0 10px rgba(10, 10, 10, .5);
		transform: scale(1.5);
		opacity: 0;
	}
}

.quotations-line-left {
position: absolute;
width: 4px;
height: 100%;
left: 25px;
top: 3px;
background: #0a0a0a;
}

.quotations {
font-family: 'Raleway', sans-serif;
font-size: 12px;
line-height: 1.5;
font-style: italic;
font-weight: normal;
text-align: left;
padding: 0 0 0 30px;
}

@media only screen and (max-width: 880px) {
  .quotations {
    margin: 0 0 90px 0;
  }
  
  .quotations-works {
    margin: 70px 0 0 0;
  }
}

.quote-mark-l {
padding: 0 10px 0 0;
}

.quote-mark-r {
padding: 0 0 0 10px;
}


/* works hover */
.icon-works {
position: absolute; 
width: 100%;
top: 50%;
margin-left: 0;
margin-top: 0;
text-align: center;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all 0.35s ease-out;
   -moz-transition: all 0.35s ease-out;
    -ms-transition: all 0.35s ease-out;
	 -o-transition: all 0.35s ease-out;
        transition: all 0.35s ease-out;
-webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
        transform: translateY(-50%);
-webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
z-index: 1;
}

@media only screen and (min-width: 1024px) {
  .icon-works {
    margin-left: -15px;
  }
}

.icon-works a {
position: relative;
display: inline-block;
vertical-align: middle;
text-decoration: none;
width: 44px;
height: 44px;
line-height: 44px;
margin: 0 4px;
font-size: 20px;
background: #fafafa;
border: 1px solid #fafafa;
color: #1e1e1e;	
-webkit-transition: all 0.35s ease-out;
   -moz-transition: all 0.35s ease-out;
    -ms-transition: all 0.35s ease-out;
	 -o-transition: all 0.35s ease-out;
        transition: all 0.35s ease-out;
}

.icon-works a.iw-slide-left {
-webkit-transform: translate3d(-60px,0,0);
   -moz-transform: translate3d(-60px,0,0);
    -ms-transform: translate3d(-60px,0,0);
     -o-transform: translate3d(-60px,0,0);
        transform: translate3d(-60px,0,0);
}

.icon-works a.iw-slide-right {
-webkit-transform: translate3d(60px,0,0);
   -moz-transform: translate3d(60px,0,0);
    -ms-transform: translate3d(60px,0,0);
     -o-transform: translate3d(60px,0,0);
        transform: translate3d(60px,0,0);
}

.image-works:hover .icon-works a {
padding: 0;
-webkit-transform: translate3d(0,0,0)!important;
   -moz-transform: translate3d(0,0,0)!important;
    -ms-transform: translate3d(0,0,0)!important;
     -o-transform: translate3d(0,0,0)!important;
        transform: translate3d(0,0,0)!important;
}

.icon-works a:hover {
background: #0a0a0a;
border: 1px solid #1e1e1e;
color: #fafafa;
}

.icon-works a:hover:after {
background: #0a0a0a;
}

.image-works:hover .icon-works {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.icon-works a:before {
position: relative;
z-index: 1;
}

.icon-works a i {
position: relative;
z-index: 1;
}

.image-works {
position: relative;
z-index: 5!important;
}

.hover-effect {
position: absolute;
background: #0a0a0a;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
     -o-transition: all 1s ease;
        transition: all 1s ease;
width: -webkit-calc(100% - 80px);
width: -moz-calc(100% - 80px);
width: calc(100% - 80px);
height: -webkit-calc(100% - 80px);
height: -moz-calc(100% - 80px);
height: calc(100% - 80px);
top: 40px;
left: 40px;
bottom: 40px;
right: 40px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
cursor: pointer;
}

@media only screen and (max-width: 880px) {
  .hover-effect {
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: calc(100% - 40px);
    height: -webkit-calc(100% - 80px);
    height: -moz-calc(100% - 80px);
    height: calc(100% - 80px);
    top: 40px;
    left: 20px;
    bottom: 40px;
    right: 20px;
  }
}

.image-works:hover .hover-effect {
        opacity: 0.75;
   -moz-opacity: 0.75;
-webkit-opacity: 0.75;
filter: alpha(opacity=75);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
-webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
     -o-transition: all 1s ease;
        transition: all 1s ease;
}

.legendary-gallery {
margin: -20px 0 0 0;
position: relative;
z-index: 0;
}

.legendary-gallery figure {
padding: 20px;
}

@media only screen and (max-width: 880px) {
  .legendary-gallery figure {
    padding: 20px 0;
  }
}

.legendary-gallery .img-caption {
display: none;
}

.legendary-gallery .pswp__bg {
background: #0a0a0a;
}


/* skills bar */
.show-skillbar {
position: relative;
margin: 23px 0 0 0;
}

.skillbar {
position: relative;
display: inline-block;
width: 100%;
height: 21px;
margin: 0 0 30px 0;
background: none;
}

.skillbar-title {
position: absolute;
width: 100px;
height: 21px;
line-height: 21px;
top: 0;
left: 0;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
color: #1e1e1e;
background: #fafafa;
padding: 0;
}

.skillbar-bar {
display: inline-block;
width: 0px;
height: 3px;
background: #0a0a0a;
margin: 0 0 3px 0;
}

.skill-bar-percent {
position: absolute;
height: auto;
line-height: 1;
top: -21px;
right: 0;
color: #1e1e1e;
font-size: 11px;
}

.skillbar-head {
font-family: 'Oswald', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 25px;
color: #1e1e1e;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1;
margin: 0;
padding: 0 0 20px 0;
}

.skillbar-head-span {
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.05em;
}


/* logo */
.logo {
position: absolute;
display: inline-block;
top: 50%;
transform: translateY(-50%);
left: 40px;
line-height: 0;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
cursor: pointer;
z-index: 200;
}

@media only screen and (max-width: 880px) {
  .logo {
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
  }
}

.logo-img {
width: 165px;
height: auto;
display: block;
}

@media only screen and (max-width: 880px) {
  .logo-img {
    width: 130px;
  }
}

/* Menu icon color adaptation */
/* Default: white on homepage (dark-menu class) */
body.dark-menu .lines,
body .lines {
background: #fafafa !important;
}

body.dark-menu .lines:after,
body.dark-menu .lines:before,
body .lines:after,
body .lines:before {
background: #fafafa !important;
}

body.dark-menu .lines-button.x2.lines-close .lines:after,
body.dark-menu .lines-button.x2.lines-close .lines:before,
body.dark-menu .lines-button.x.lines-close .lines:after,
body.dark-menu .lines-button.x.lines-close .lines:before,
body .lines-button.x2.lines-close .lines:after,
body .lines-button.x2.lines-close .lines:before {
background: #ffffff !important;
}

/* Black on services/contact pages if light-menu class is present */
body.light-menu .lines {
background: #0a0a0a !important;
}

body.light-menu .lines:after,
body.light-menu .lines:before {
background: #0a0a0a !important;
}

body.light-menu .lines-button.x2.lines-close .lines:after,
body.light-menu .lines-button.x2.lines-close .lines:before,
body.light-menu .lines-button.x.lines-close .lines:after,
body.light-menu .lines-button.x.lines-close .lines:before {
background: #0a0a0a !important;
}




/* single img bg */
.single-img-bg-wrapper {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
z-index: 1;
}

.single-img-bg {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

/* Mobile background fix */
@media only screen and (max-width: 880px) {
  .single-img-bg {
    position: absolute;
    background-attachment: scroll;
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}



video,
source {
position: absolute;
min-width: 100%;
min-height: 100%;
bottom: 0;
left: 0;
}

.loaded .ytplayer-container {
display: block;
}

.ytplayer-container {
position: absolute;
min-width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0; 
overflow: hidden;
z-index: 1;
}

.ytplayer-shield {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}

.ytplayer-player {
position: absolute;
}

/* Force a single font across the site */
html, body, body * {
  font-family: 'Raleway', sans-serif !important;
}

/* Preserve icon fonts for Font Awesome */
[class^="fa"], [class*=" fa-"] {
  font-family: FontAwesome !important;
}

/* Headings should use the same font but keep weight differences */
h1,h2,h3,h4,h5,h6 { font-family: 'Raleway', sans-serif !important; }

/* Hamburger menu icon: always render three lines, color white by default, black for light-menu */
/* Hamburger menu icon color: ultra-specific, single block only */
body .menu-trigger .lines,
body .menu-trigger .lines:before,
body .menu-trigger .lines:after {
  background: #fff !important;
  opacity: 1 !important;
}

body:not(.light-menu) .menu-trigger .lines,
body:not(.light-menu) .menu-trigger .lines:before,
body:not(.light-menu) .menu-trigger .lines:after {
  background: #fff !important;
}
body.light-menu .menu-trigger .lines,
body.light-menu .menu-trigger .lines:before,
body.light-menu .menu-trigger .lines:after {
  background: #0a0a0a !important;
}

/* FINAL OVERRIDE: Hamburger icon color */
body.dark-menu .menu-trigger .lines,
body.dark-menu .menu-trigger .lines:before,
body.dark-menu .menu-trigger .lines:after {
  background: #fff !important;
}
body.light-menu .menu-trigger .lines,
body.light-menu .menu-trigger .lines:before,
body.light-menu .menu-trigger .lines:after {
  background: #0a0a0a !important;
}

/* Home page specific: always white hamburger icon */
body.home-page .menu-trigger .lines,
body.home-page .menu-trigger .lines:before,
body.home-page .menu-trigger .lines:after {
  background: #fff !important;
}

/* Stronger, button-specific override in case other rules win; targets the exact hamburger button */
body.home-page .menu-trigger #menu-mobile-caller .lines,
body.home-page .menu-trigger #menu-mobile-caller .lines:before,
body.home-page .menu-trigger #menu-mobile-caller .lines:after {
  background: #fff !important;
}

/* DEBUG: Hamburger icon color and border override */
body:not(.light-menu) .menu-trigger .lines,
body:not(.light-menu) .menu-trigger .lines:before,
body:not(.light-menu) .menu-trigger .lines:after {
  background: #fff !important;
}
body.light-menu .menu-trigger .lines,
body.light-menu .menu-trigger .lines:before,
body.light-menu .menu-trigger .lines:after {
  background: #0a0a0a !important;
}

/* Mobile viewport fixes - prevent shrinking and ensure full screen */
@media only screen and (max-width: 880px) {
  html {
    width: 100vw;
    height: 100vh;
    height: -webkit-fill-available;
  }
  
  body {
    width: 100vw;
    height: 100vh;
    height: -webkit-fill-available;
    position: fixed;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .center-container,
  .center-container-home {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    height: 100vh;
    height: -webkit-fill-available;
  }
  
  .sections-home {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  #viewport-wrapper {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  #home, #services, #contact {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    width: 100vw;
  }
}

/* Additional iOS Safari fixes for full viewport */
@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available;
  }
  
  body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  .upper-page, .lower-page {
    min-height: -webkit-fill-available;
  }
  
  .single-img-bg {
    min-height: -webkit-fill-available;
  }
}

/* ==========================================================================
   PREMIUM DESIGN UPGRADE - START
   ========================================================================== */

/* 1. Refined Typography */
h1, h2, h3, h4, h5, h6, .menu-nav ul li a {
    letter-spacing: 4px !important;
    font-weight: 300 !important;
    text-transform: uppercase;
}

/* 2. Glassmorphism Navigation Overlay (Applied to menu panel) */
#ui-layer {
    position: relative;
    z-index: 9999; /* High, but MUST be lower than .border-top (100000) to keep the toggle button visible */
}

#menu-mobile {
    background: rgba(10,10,10,0.85) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.5); /* Stronger shadow for depth */
}

#menu-mobile.activated {
    right: 0;
}

/* 3. Premium Hamburger Icon (Refined 2px lines for better visual presence) */
.menu-trigger .lines, 
.menu-trigger .lines:before, 
.menu-trigger .lines:after,
#menu-mobile-caller .lines,
#menu-mobile-caller .lines:before,
#menu-mobile-caller .lines:after {
    width: 38px;
    height: 2px !important; /* 2px lines look more purposeful than 1px */
    background-color: #ffffff !important;
    display: block;
    content: '';
    position: absolute;
    left: 0;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}

.menu-trigger .lines, 
#menu-mobile-caller .lines {
    position: relative;
    top: 50%;
    background: #ffffff !important;
}

/* Adjust hamburger bar spacing for the new thickness */
.menu-trigger .lines:before, #menu-mobile-caller .lines:before { top: 11px; }
.menu-trigger .lines:after, #menu-mobile-caller .lines:after { top: -11px; }

/* Smaller hamburger on mobile */
@media only screen and (max-width: 880px) {
  .menu-trigger .lines,
  .menu-trigger .lines:before,
  .menu-trigger .lines:after,
  #menu-mobile-caller .lines,
  #menu-mobile-caller .lines:before,
  #menu-mobile-caller .lines:after {
    width: 26px !important;
  }
  .menu-trigger .lines:before, #menu-mobile-caller .lines:before { top: 8px; }
  .menu-trigger .lines:after,  #menu-mobile-caller .lines:after  { top: -8px; }
}

/* Close Icon "X" Fix: Ensure lines intersect at center when active */
#menu-mobile-caller.lines-close .lines:before,
#menu-mobile-caller.lines-close .lines:after,
.menu-trigger .lines-close .lines:before,
.menu-trigger .lines-close .lines:after {
    top: 0 !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    width: 42px; /* Slightly longer lines for the X to make it more elegant */
}

/* Force middle line visibility for the burger, but hide for the X icon */
#menu-mobile-caller .lines {
    opacity: 1 !important;
    visibility: visible !important;
}

#menu-mobile-caller.lines-close .lines {
    background: transparent !important;
}

/* 3.1 Interaction Enhancements */
.menu-toggle {
    transition: transform 0.3s ease;
}

.menu-toggle:hover {
    transform: scale(1.1);
}

.menu-toggle:hover .lines,
.menu-toggle:hover .lines:before,
.menu-toggle:hover .lines:after {
    background-color: #ffffff !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* 4. Service Card Elevation (for services.html) */
.services-owl .item {
    padding: 60px 30px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    background: rgba(255, 255, 255, 0.01);
    transition: all 0.4s ease;
}

.services-owl .item:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-5px);
}

.services-icon i {
    font-size: 28px;
    margin-bottom: 25px;
    display: block;
    color: #ffffff;
}

/* 5. Subtle UI Accents — header bar stays transparent */
.border-top, .border-bottom {
    background: transparent !important;
}

/* ==========================================================================
   PREMIUM DESIGN UPGRADE - END
   ========================================================================== */

/* ==========================================================================
   MOBILE TITLE SIZING & HEADER SPACING
   ========================================================================== */

/* Smaller, less cramped section titles on phones */
@media only screen and (max-width: 880px) {
  .sections h2,
  #services h2,
  #contact h2 {
    font-size: 34px !important;
    letter-spacing: 3px !important;
  }
}

@media only screen and (max-width: 480px) {
  .sections h2,
  #services h2,
  #contact h2 {
    font-size: 27px !important;
    letter-spacing: 2px !important;
  }
}

/* On the dedicated Services & Contact pages, start content below the logo
   bar instead of vertically centering it (prevents the title sitting right
   under the logo and looking cramped on mobile). */
@media only screen and (max-width: 880px) {
  body.services-page .center-block,
  body.contact-page .center-block {
    vertical-align: top;
    padding-top: 130px;
  }
}

/* ==========================================================================
   CHROME VISIBILITY SAFETY NET
   The logo, hamburger and social icons are persistent UI chrome. They must
   never be hidden by the scroll-reveal animation system (.animate => opacity:0)
   nor by an entrance transform that fails to clear. Force them always visible.
   ========================================================================== */
.logo,
.logo-img,
.menu-trigger,
#menu-mobile-btn,
.social-icons-wrapper,
.social-icons-wrapper .social-icons a {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Social icons now live outside the reveal sections, so neutralise the
   leftover reveal transform that would otherwise offset them.
   Also ensure they sit above all page content. */
.social-icons-wrapper .social-icons a {
  transform: none !important;
}

.social-icons-wrapper {
  z-index: 99999 !important;
}

/* Hamburger button: tighten the oversized padding so the hit-target
   stays inside the header bar and the icon looks proportionate. */
.lines-button {
  margin: 0 !important;
  padding: 10px 8px !important;
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

/* Restore the close-state (X) vertical centre on desktop only.
   On mobile the static-flex approach handles centering without transforms. */
@media only screen and (min-width: 881px) {
  .lines-button.lines-close {
    transform: translateY(-50%) !important;
  }
}

/* Re-center the middle line within the tighter button */
.menu-trigger .lines,
#menu-mobile-caller .lines {
  top: 0 !important;
}

/* ==========================================================================
   SOCIAL ICONS — HOME PAGE ONLY
   On services/contact the icons conflict with carousel pagination and the
   submit button. Keep them only on the home page where they make sense.
   ========================================================================== */
body.services-page .social-icons-wrapper,
body.contact-page  .social-icons-wrapper {
  display: none !important;
}

/* Contact page: give the form bottom breathing room so the submit button
   isn't flush against the viewport edge on short screens. */
@media only screen and (max-width: 880px) {
  body.contact-page .lower-content {
    padding-bottom: 40px;
  }
}

/* ==========================================================================
   MOBILE HEADER ALIGNMENT
   .border-top  → flex row (logo left, hamburger right, 20px gutters)
   #menu-mobile-btn → also flex, so it centres its button child without
                       any absolute-position / translateY tricks
   .lines-button    → static child — no position/transform needed for
                       centering, so the close-state (X) can never drift
   ========================================================================== */
@media only screen and (max-width: 880px) {
  .border-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* Logo: leave absolute flow, let flex centre it */
  .logo {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }

  /* Hamburger wrapper: static flex item, itself a flex container
     so the button inside centres naturally — no top/transform math */
  #menu-mobile-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
  }

  /* Hamburger / close button: static, no transform centering needed.
     Right padding removed so the icon sits at the 20px gutter edge. */
  .lines-button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 12px 0 12px 8px !important;
  }

  /* Close (X) state: keep same static position, no upward shift */
  .lines-button.lines-close {
    transform: none !important;
  }
}