/*
  [CSS Index]
  
  ---
  
  Template Name: Nextex - One Page Photography Portfolio Template
  Author:  ex-nihilo
  Version: 1.0
*/


/* 
  1. TEMPLATE BACKGROUNDS
    1.1. single IMG BACKGROUND
	1.2. about IMG BACKGROUND
    1.3. team IMG BACKGROUND
    1.4. services IMG BACKGROUND
    1.5. works IMG BACKGROUND
    1.6. works more IMG BACKGROUND
	1.7. works even more IMG BACKGROUND
    1.8. news IMG BACKGROUND
	1.9. slick fullscreen slideshow - ZOOM/FADE - ken burns slideshow - IMG BACKGROUND
  2. reset
  3. layout
    3.1. upper page
  4. welcome message
  5. borders
  6. home credits, home contact
  7. to top arrow
  8. preloader
  9. hero
  10. videos
    10.1. YouTube video
    10.2. Vimeo video
    10.3. HTML5 video
  11. main navigation
  12. home title wrapper
  13. section txt
  14. section heading
  15. link underline
  16. works
  17. IMG carousel
  18. post box
  19. news
  20. halves
  21. background color
  22. intro
  23. button
  24. services
  25. post
  26. ken burns slideshow
  27. contact
    27.1. social icons
  28. Slick Slider CUSTOM
  29. Owl Carousel CUSTOM
  30. Magnific Popup CUSTOM
  31. Lity CUSTOM
  32. PhotoSwipe CUSTOM
  33. headers
  34. divider
*/
/*
  ____   ____   _    _ 
 | __ ) | __ ) | |  | |
 |  _ \ |  _ \ | |  | |
 | |_) || |_) || |__| |
 |____/ |____/  \____/ 
        __  
       / _| 
      | |_  
      |  _| 
      |_|   

  Version: 1.0.0
   Author: B6U
     For: 62ools by LGI
   Website: https://62ools.com
    Docs: internal
    Repo: private
   Issues: contact LGI team
*/

/* Fix for navbar visibility - override any display:none rules */
.navbar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure navbar is always visible on screen */
@media screen {
  .navbar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* 1. TEMPLATE BACKGROUNDS */
/* 1.1. single IMG BACKGROUND */
.bg-img-SINGLE {
  background: url('/images/62ools/Gemini_Generated_Image_cjo5oucjo5oucjo5.png') center/cover no-repeat;
  transition: opacity 1s ease;
  z-index: 1;
}

video {
  z-index: 2;
}



/* 1.2. about IMG BACKGROUND */
.works-list .works-list-bg.about-list-bg {
  background-image: url(../images/62ools/Gemini_Generated_Image_2ekghr2ekghr2ekg.png);
}


/* 1.3. team IMG BACKGROUND */
.carousel-item-team-01 {
  background-image: url(../images/team/1.jpg);
}

.carousel-item-team-02 {
  background-image: url(../images/team/2.jpg);
}

.carousel-item-team-03 {
  background-image: url(../images/team/3.jpg);
}

.carousel-item-team-04 {
  background-image: url(../images/team/4.jpg);
}


/* 1.4. services IMG BACKGROUND */
.works-list .works-list-bg.services-list-bg {
  background-image: url(../images/62ools/abstract-blue-red-color-wave-on-black-background-2024-11-27-09-52-00-utc.jpg);
}


/* 1.5. works IMG BACKGROUND */
.works-list .works-list-bg.works-list-bg-1 {
  background-image: url(../images/62ools/abstract-grainy-color-gradient-background-orange-p-2024-12-02-22-35-18-utc.jpg);
}

.works-list .works-list-bg.works-list-bg-2 {
  background-image: url(../images/62ools/color-gradient-dark-grainy-background-ray-light-re-2024-11-27-19-47-44-utc.jpg);
}

.works-list .works-list-bg.works-list-bg-3 {
  background-image: url(../images/62ools/dark-blue-orange-grainy-gradient-background-blurr-2024-12-03-08-47-55-utc.jpg);
}

.works-list .works-list-bg.works-list-bg-4 {
  background-image: url(../images/62ools/grainy-color-gradient-background-orange-purple-blu-2024-11-26-22-20-14-utc.jpg);
}


/* 1.6. works more IMG BACKGROUND */
.works-list .works-list-bg.works-list-bg-1-1 {
  background-image: url(../images/works/more/3.jpg);
}

.works-list .works-list-bg.works-list-bg-2-1 {
  background-image: url(../images/works/more/4.jpg);
}

.works-list .works-list-bg.works-list-bg-3-1 {
  background-image: url(../images/works/more/5.jpg);
}

.works-list .works-list-bg.works-list-bg-4-1 {
  background-image: url(../images/works/more/6.jpg);
}


/* 1.7. works even more IMG BACKGROUND */
.carousel-item-works-even-more-01 {
  background-image: url(../images/works/even-more/1.jpg);
}

.carousel-item-works-even-more-02 {
  background-image: url(../images/works/even-more/2.jpg);
}

.carousel-item-works-even-more-03 {
  background-image: url(../images/works/even-more/3.jpg);
}

.carousel-item-works-even-more-04 {
  background-image: url(../images/works/even-more/4.jpg);
}


/* 1.8. news IMG BACKGROUND */
.news-bg-1 {
  background-image: url(../images/62ools/01.jpg);
}

.news-bg-2 {
  background-image: url(../images/62ools/01.jpg);
}

.news-bg-3 {
  background-image: url(../images/62ools/01.jpg);
}

.news-bg-4 {
  background-image: url(../images/62ools/01.jpg);
}


/* 1.9. slick fullscreen slideshow - ZOOM/FADE - ken burns slideshow - IMG BACKGROUND */
.bg-img-1,
.kenburns-slide-1 {
  background-image: url(../images/background/1.jpg);
}

.bg-img-2,
.kenburns-slide-2 {
  background-image: url(../images/background/2.jpg);
}

.bg-img-3,
.kenburns-slide-3 {
  background-image: url(../images/background/3.jpg);
}

.bg-img-4,
.kenburns-slide-4 {
  background-image: url(../images/background/4.jpg);
}


/* 2. 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;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  line-height: 170%;
}

body {}

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;
}

/* 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;
}

/* IE10 scrollbar FIX */
html {
  -ms-overflow-style: scrollbar;
}


/* 3. layout */
body {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  color: #5f5f5f;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

a {
  color: #5f5f5f;
  text-decoration: none;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -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;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

a:hover,
a:visited,
a:active,
a:focus {
  color: #5f5f5f;
  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;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

p {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #5f5f5f;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

p a,
p a:hover {
  color: #5f5f5f;
  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;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

p.light {
  color: #fff;
}

strong {
  font-weight: bold;
}

::-moz-selection {
  background: #ccc;
  color: #fff;
}

::selection {
  background: #ccc;
  color: #fff;
}

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}


/* 3.1. upper page */
.upper-page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0;
  top: 0;
  margin: 0;
}


/* 4. welcome message */


/* 5. borders */
.border-top,
.border-top.top-position,
.border-bottom,
.border-bottom.bottom-position,
.border-bottom.bottom-position-primary,
.border-bottom-2,
.border-left,
.border-left.left-position,
.border-left.left-position-primary,
.border-right,
.border-right.right-position,
.border-right.right-position-primary {
  position: fixed;
  background: #fff;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
  z-index: 100;
}

.border-top {
  width: 100%;
  height: 110px;
  left: 0;
  top: 0;
}

@media only screen and (max-width: 768px) {
  .border-top {
    height: 70px;
  }
}

.border-top.top-position {
  -webkit-transform: translateY(-110px);
  -moz-transform: translateY(-110px);
  -ms-transform: translateY(-110px);
  -o-transform: translateY(-110px);
  transform: translateY(-110px);
}

@media only screen and (max-width: 768px) {
  .border-top.top-position {
    -webkit-transform: translateY(-70px);
    -moz-transform: translateY(-70px);
    -ms-transform: translateY(-70px);
    -o-transform: translateY(-70px);
    transform: translateY(-70px);
  }
}

.border-bottom {
  width: 100%;
  height: 190px;
  left: 0;
  bottom: 0;
}

@media all and (min-width: 1920px) {
  .border-bottom {
    height: 240px;
  }
}

@media only screen and (max-width: 768px) {
  .border-bottom {
    height: 160px;
  }
}

.border-bottom.bottom-position {
  -webkit-transform: translateY(240px);
  -moz-transform: translateY(240px);
  -ms-transform: translateY(240px);
  -o-transform: translateY(240px);
  transform: translateY(240px);
}

@media only screen and (max-width: 768px) {
  .border-bottom.bottom-position {
    -webkit-transform: translateY(160px);
    -moz-transform: translateY(160px);
    -ms-transform: translateY(160px);
    -o-transform: translateY(160px);
    transform: translateY(160px);
  }
}

.border-bottom.bottom-position-primary {
  -webkit-transform: translateY(240px);
  -moz-transform: translateY(240px);
  -ms-transform: translateY(240px);
  -o-transform: translateY(240px);
  transform: translateY(240px);
}

@media only screen and (max-width: 768px) {
  .border-bottom.bottom-position-primary {
    -webkit-transform: translateY(160px);
    -moz-transform: translateY(160px);
    -ms-transform: translateY(160px);
    -o-transform: translateY(160px);
    transform: translateY(160px);
  }
}

.border-bottom-2 {
  width: 100%;
  height: 110px;
  left: 0;
  bottom: 0;
  -webkit-transform: translateY(110px);
  -moz-transform: translateY(110px);
  -ms-transform: translateY(110px);
  -o-transform: translateY(110px);
  transform: translateY(110px);
}

@media only screen and (max-width: 768px) {
  .border-bottom-2 {
    height: 70px;
  }
}

.border-bottom-2.show {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.border-left {
  width: 110px;
  height: 100%;
  left: 0;
  top: 0;
}

@media only screen and (max-width: 768px) {
  .border-left {
    width: 50px;
  }
}

.border-left.left-position {
  -webkit-transform: translateX(-110px);
  -moz-transform: translateX(-110px);
  -ms-transform: translateX(-110px);
  -o-transform: translateX(-110px);
  transform: translateX(-110px);
}

@media only screen and (max-width: 768px) {
  .border-left.left-position {
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    -o-transform: translateX(-50px);
    transform: translateX(-50px);
  }
}

.border-left.left-position-primary {
  -webkit-transform: translateX(-60px);
  -moz-transform: translateX(-60px);
  -ms-transform: translateX(-60px);
  -o-transform: translateX(-60px);
  transform: translateX(-60px);
}

@media only screen and (max-width: 768px) {
  .border-left.left-position-primary {
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.border-right {
  width: 110px;
  height: 100%;
  right: 0;
  top: 0;
}

@media only screen and (max-width: 768px) {
  .border-right {
    width: 50px;
  }
}

.border-right.right-position {
  -webkit-transform: translateX(110px);
  -moz-transform: translateX(110px);
  -ms-transform: translateX(110px);
  -o-transform: translateX(110px);
  transform: translateX(110px);
}

@media only screen and (max-width: 768px) {
  .border-right.right-position {
    -webkit-transform: translateX(50px);
    -moz-transform: translateX(50px);
    -ms-transform: translateX(50px);
    -o-transform: translateX(50px);
    transform: translateX(50px);
  }
}

.border-right.right-position-primary {
  -webkit-transform: translateX(60px);
  -moz-transform: translateX(60px);
  -ms-transform: translateX(60px);
  -o-transform: translateX(60px);
  transform: translateX(60px);
}

@media only screen and (max-width: 768px) {
  .border-right.right-position-primary {
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
  }
}


/* 6. home credits, home contact */


/* 7. to top arrow */
.to-top-arrow {
  position: fixed;
  width: 50px !important;
  max-width: 50px;
  height: 50px;
  line-height: 50px;
  left: 0;
  right: 0;
  bottom: -10px;
  margin-left: auto;
  margin-right: auto;
  margin: 0 auto;
  overflow: hidden;
  font-size: 16px;
  text-align: center;
  color: #fff;
  background: #111;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: translateY(40px);
  -moz-transform: translateY(40px);
  -ms-transform: translateY(40px);
  -o-transform: translateY(40px);
  transform: translateY(40px);
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  z-index: 115;
}

.to-top-arrow.show {
  bottom: 10px;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  transform: translateY(-20px);
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@media only screen and (max-width: 768px) {
  .to-top-arrow.show {
    bottom: -10px;
  }
}

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


/* 8. preloader */
.preloader-bg,
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  z-index: 999999;
}

#preloader {
  display: table;
  table-layout: fixed;
}

#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: auto;
  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(0, 0, 0, .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(0, 0, 0, .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);
  }
}


/* 9. hero */
.hero-fullscreen {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.hero-fullscreen-FIX {
  width: 100%;
  height: 100%;
}

/* Video background optimizations */
.hero-bg-fallback {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.hero-video-container {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-video-container.video-loaded {
  opacity: 1;
}

.hero-video-container.video-loaded+.hero-bg-fallback {
  opacity: 0;
}

/* Mobile optimization - use static image on mobile devices */
@media only screen and (max-width: 768px) {
  .hero-video-container {
    display: none;
  }

  .hero-bg-fallback {
    opacity: 1 !important;
    z-index: 2;
  }
}

/* Performance optimizations for video elements */
.html5-videoContainment video {
  object-fit: cover;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .hero-video-container {
    display: none;
  }

  .hero-bg-fallback {
    opacity: 1 !important;
    z-index: 2;
  }

  .hero-bg-fallback,
  .hero-video-container {
    transition: none;
  }
}

.hero-center-container {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
}

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


/* 10. videos */
/* 10.1. YouTube video */
.YT-bg {
  display: none;
}

@media only screen and (max-width: 995px) {
  .YT-bg {
    position: relative;
    height: 100%;
    background-image: url(../images/background/YT-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* uncomment the following to show an image for mobile devices */
    /* display: block; */
  }
}

#videoContainment {
  position: absolute;
  display: block;
  width: 100% !important;
  height: 100% !important;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #000;
  z-index: 0;
}


/* 10.2. Vimeo video */
.vimeo-bg {
  display: none;
}

@media only screen and (max-width: 995px) {
  .vimeo-bg {
    position: relative;
    height: 100%;
    background-image: url(../images/background/vimeo-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* uncomment the following to show an image for mobile devices */
    /* display: block; */
  }

  #vimeo-videoContainment {
    display: none;
  }
}

#vimeo-videoContainment {
  position: absolute;
  display: block;
  width: 100% !important;
  height: 100% !important;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #000;
  z-index: 0;
}

#vimeo-videoContainment iframe,
#vimeo-videoContainment object,
#vimeo-videoContainment embed {
  border: none;
}


/* 10.3. HTML5 video */
.html5-bg {
  display: none;
}

@media only screen and (max-width: 995px) {
  .html5-bg {
    position: relative;
    height: 100%;
    background-image: url(../images/background/html5-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /* uncomment the following to show an image for mobile devices */
    /* display: block; */
  }
}

.html5-videoContainment {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  background: #000;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 0;
}


/* 11. main navigation */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: none;
  z-index: 1001;
}

.logo-desktop .logo-desktop-dark,
.main-navigation-bg .logo-desktop .logo-desktop-dark {
  opacity: 1;
  -moz-opacity: 1;
  -webkit-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  height: auto;
  margin-top: -23px;
}

@media only screen and (max-width: 768px) {
  .logo-mobile {
    margin-top: 2px;
    /* margin-left: -12px; */
    margin-left: 0;
  }
}

.navbar-bg-switch {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: #fff;
  border-bottom: none;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  transition: all .4s ease-out;
  z-index: 999;
}

.main-navigation {
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}

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

.main-navigation .navbar-nav li a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #111;
  padding: 46px 15px 0 15px;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  transition: all .4s ease-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
  .main-navigation .navbar-nav li a {
    padding: 10px 15px;
  }
}

.main-navigation .navbar-nav li a:hover {
  color: #111;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

.nav li a:focus,
.nav li a:hover {
  color: #111;
  background: none;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

.main-navigation-bg {
  height: 70px;
  background: #fff;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

@media only screen and (max-width: 768px) {
  .main-navigation-bg {
    height: auto;
    min-height: 70px;
    background: rgba(255, 255, 255, 1);
  }
}

.main-navigation-bg .main-navigation .navbar-nav li a {
  color: #111;
  padding: 26px 15px 0 15px;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

@media only screen and (max-width: 768px) {
  .main-navigation-bg .main-navigation .navbar-nav li a {
    padding: 10px 15px;
  }
}

.main-navigation-bg .main-navigation .navbar-nav li a:hover {
  color: #111;
}

@media only screen and (max-width: 768px) {
  .navbar-toggle .icon-bar {
    background: #111;
    margin-top: 63px;
    /* margin-right: 2px; */
    margin-right: 14px;
  }

  .main-navigation-bg .navbar-toggle .icon-bar {
    background: #111;
  }

  .navbar-toggle {
    margin-top: -45px;
    margin-right: -10px;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s ease-out;
  }

  .main-navigation-bg .navbar-toggle {
    margin-top: -45px;
    margin-right: -10px;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s ease-out;
  }

  .navbar-collapse {
    background: rgba(255, 255, 255, 1);
    margin-left: -15px;
    margin-right: -15px;
  }
}

.navbar-nav li.active,
.navbar-nav>.active>a {
  color: #111 !important;
  text-decoration: none;
}

.navbar-nav>.active>a {
  background: none;
}

.main-navigation-bg .navbar-nav li.active,
.main-navigation-bg .navbar-nav>.active>a {
  color: #111 !important;
}

@media (min-width: 768px) {
  .navbar-nav {
    position: relative;
    right: -50%;
  }

  .navbar-nav>li {
    position: relative;
    left: -50%;
  }

  .navbar-nav>li a {
    vertical-align: middle;
  }
}


/* 12. home title wrapper */
.home-title-wrapper * {
  -webkit-box-sizing: padding-box;
  -moz-box-sizing: padding-box;
  -ms-box-sizing: padding-box;
  -o-box-sizing: padding-box;
  box-sizing: padding-box;
}

.home-title-wrapper h1,
.home-title-wrapper h4 {
  line-height: 1;
}

.home-title-wrapper h1 {
  position: relative;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 60px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.08em;
  color: #111;
  z-index: 1;
}

.home-title-wrapper h4 {
  position: relative;
  display: inline-block;
  width: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #111;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -0.02em;
  position: relative;
  margin: 0 auto;
  padding: 0 10px;
  z-index: 10;
}

.home-title-wrapper h4:before,
.home-title-wrapper h4:after {
  content: "";
  position: absolute;
  width: 35px;
  height: 1px;
  top: 50%;
  background: #111;
}

@media only screen and (max-width: 768px) {

  .home-title-wrapper h4:before,
  .home-title-wrapper h4:after {
    width: 25px;
  }
}

.home-title-wrapper h4:before {
  left: -35px;
}

@media only screen and (max-width: 768px) {
  .home-title-wrapper h4:before {
    left: -25px;
  }
}

.home-title-wrapper h4:after {
  right: -35px;
}

@media only screen and (max-width: 768px) {
  .home-title-wrapper h4:after {
    right: -25px;
  }
}


/* 13. section txt */
.section-txt p {
  margin: -17px auto 0 auto;
  text-align: center;
}

.section-txt a,
.section-txt a:hover {
  text-decoration: none;
  font-weight: 600;
}


/* 14. section heading */
h2.section-heading {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #5f5f5f;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -0.02em;
  padding: 0;
  z-index: 10;
}

h2.section-heading.section-heading-light {
  color: #fff;
}

h2.section-heading span {
  position: relative;
  display: inline-block;
  padding-right: 90px;
  margin-right: 30px;
  line-height: 1;
}

@media all and (min-width: 1920px) {
  h2.section-heading span {
    padding-right: 105px;
    margin-right: 35px;
  }
}

@media only screen and (max-width: 995px) {
  h2.section-heading span {
    padding-right: 75px;
    margin-right: 25px;
  }
}

@media only screen and (max-width: 768px) {
  h2.section-heading span {
    padding-right: 60px;
    margin-right: 20px;
  }
}

h2.section-heading span:before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 0;
  width: 60px;
  height: 0;
  margin-top: -1px;
}

@media all and (min-width: 1920px) {
  h2.section-heading span:before {
    width: 70px;
  }
}

@media only screen and (max-width: 995px) {
  h2.section-heading span:before {
    width: 50px;
  }
}

@media only screen and (max-width: 768px) {
  h2.section-heading span:before {
    width: 40px;
  }
}

h2.section-heading span:before {
  border-top: 1px solid #5f5f5f;
}

h2.section-heading-light span:before {
  border-top: 1px solid #fff;
}

h2.section-heading.section-heading-all {
  padding: 0;
}


/* 15. link underline */


/* 16. works */
.works-list .works-list-wrapper {
  margin: -40px 0 0 0;
  padding: 0 0 150px 0;
}

@media only screen and (max-width: 1200px) {
  .works-list .works-list-wrapper {
    margin: -130px 0 0 0;
    padding: 0 0 60px 0;
  }
}

@media only screen and (max-width: 995px) {
  .works-list .works-list-wrapper {
    margin: -60px 0 0 0;
    padding: 0;
  }
}

.works-list .works-list-item {
  position: relative;
}

@media only screen and (max-width: 995px) {
  .works-list .works-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.works-list .works-list-item:not(:first-of-type) {
  margin-top: 460px;
}

@media only screen and (max-width: 1200px) {
  .works-list .works-list-item:not(:first-of-type) {
    margin-top: 200px;
  }
}

@media only screen and (max-width: 995px) {
  .works-list .works-list-item:not(:first-of-type) {
    margin-top: 0;
  }
}

.works-list .works-list-item:nth-of-type(odd) .works-list-bg {
  left: 0;
}

.works-list .works-list-item:nth-of-type(odd) .works-list-bg.works-list-bg-all {
  left: auto;
  right: 0;
}

.works-list .works-list-item:nth-of-type(even) .works-list-bg {
  right: 0;
}

.works-list .works-list-item-container {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}

.works-list .works-list-row {
  position: relative;
  z-index: 2;
}

.works-list .works-list-content {
  padding: 150px 150px;
  background: #fff;
}

@media only screen and (max-width: 1200px) {
  .works-list .works-list-content {
    padding: 55px 55px;
  }
}

@media only screen and (max-width: 995px) {
  .works-list .works-list-content {
    padding: 0;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 768px) {
  .works-list .works-list-content {
    padding: 0 15px;
  }
}

.works-list .works-list-bg {
  position: absolute;
  width: 72%;
  height: calc(100% + 300px);
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  z-index: 1;
}

@media only screen and (max-width: 1200px) {
  .works-list .works-list-bg {
    height: calc(100% + 120px)
  }
}

@media only screen and (max-width: 995px) {
  .works-list .works-list-bg {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 580px;
    -webkit-transform: none;
    transform: none;
    padding-top: 50%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
  }
}

.works-list-content-wrapper {
  padding-top: 190px;
  margin-top: -1px;
}

@media only screen and (max-width: 995px) {
  .works-list-content-wrapper {
    padding-top: 60px
  }
}

.container-custom {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-right: auto;
  margin-left: auto
}

@media only screen and (max-width: 995px) {
  .container-custom {
    padding: 0;
  }
}

.col-md-6-custom {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: 0;
  padding-right: 0;
}

@media only screen and (max-width: 995px) {
  .col-md-6-custom {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media only screen and (min-width: 995px) {
  .col-lg-4-custom {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .offset-lg-1-custom {
    margin-left: 0;
  }

  .offset-lg-7-custom {
    margin-left: 50%;
  }
}


/* 17. IMG carousel */
.carousel-item-img-wrapper {
  position: relative;
  /* width: 100vw; */
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  cursor: grab;
}

@media only screen and (max-width: 995px) {
  .carousel-item-img-wrapper {
    width: 100%;
  }
}

.carousel-item-img-wrapper.carousel-item-img-wrapper-all {
  height: auto;
}

.carousel-item-all {
  position: relative;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-item-all {
  height: 70vh;
}


/* 18. post box */
.post-box-inner {
  margin: 0;
}

.post-box-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0;
  text-align: left;
  letter-spacing: 0.05em;
  color: #ff264a;
  margin: -6px 0 -7px 0;
}

.post-spacing {
  padding: 0 15px;
}

@media only screen and (max-width: 768px) {
  .post-spacing {
    padding: 0 30px;
  }
}


/* 19. news */
.news-txt {
  margin: 0 auto;
  padding: 0 150px;
}

@media all and (min-width: 1920px) {
  .news-txt {
    padding: 0 150px;
  }
}

@media only screen and (max-width: 1200px) {
  .news-txt {
    padding: 0 30px;
  }
}

@media only screen and (max-width: 995px) {
  .news-txt {
    padding: 0;
    margin: 0 -15px;
  }
}

@media only screen and (max-width: 768px) {
  .news-txt {
    padding: 0 15px;
  }
}

.news-bg-all {
  width: 100%;
  height: auto;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

@media only screen and (max-width: 995px) {
  .news-bg-all {
    margin-top: -30px;
  }
}

@media only screen and (max-width: 880px) {
  .news-bg-all {
    margin-top: -30px;
  }
}

@media only screen and (max-width: 768px) {
  .news-bg-all {
    margin-top: -20px;
  }
}

@media only screen and (max-width: 640px) {
  .news-bg-all {
    margin-top: 0;
  }
}

.halves:hover .news-bg-all {
  -webkit-filter: none;
  filter: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}


/* 20. halves */
.halves {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

@media only screen and (max-width: 995px) {
  .halves {
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.halves .half {
  min-height: 350px;
  -webkit-box-flex: 50%;
  -ms-flex: 50%;
  flex: 50%;
}

@media all and (min-width: 1920px) {
  .halves .half {
    min-height: 580px;
  }
}

@media only screen and (max-width: 995px) {
  .halves .half {
    min-height: 580px;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }
}

.halves-services {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

@media only screen and (max-width: 768px) {
  .halves-services {
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.halves-services .half {
  min-height: 350px;
  -webkit-box-flex: 50%;
  -ms-flex: 50%;
  flex: 50%;
}

@media all and (min-width: 1920px) {
  .halves-services .half {
    min-height: 350px;
  }
}

@media only screen and (max-width: 768px) {
  .halves-services .half {
    min-height: 350px;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }
}


/* 21. background color */
.bg-light {
  background: #fff;
}

.bg-dark {
  background: #111;
}

.bg-dark-reverse {
  background: #111;
}

@media only screen and (max-width: 995px) {
  .bg-dark-reverse {
    background: #fff;
  }
}


/* 22. intro */
.intro {
  position: relative;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 60px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.08em;
  color: #111;
  margin: 0 0 20px 0;
  padding: 0;
  z-index: 1;
}

.intro span {
  font-size: 120px;
}

.intro.intro-light {
  color: #fff;
}


/* 23. button */
.more-wraper {
  position: relative;
  width: 120px !important;
  max-width: 120px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin: 19px auto 0 auto;
  overflow: hidden;
  text-align: center;
}

.more-button .more-button-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 120px;
  max-width: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.more-button .more-button-wrapper:active svg,
.more-button .more-button-wrapper:focus svg,
.more-button .more-button-wrapper:hover svg {}

.more-button .more-button-wrapper:active svg path,
.more-button .more-button-wrapper:focus svg path,
.more-button .more-button-wrapper:hover svg path {
  stroke: #111;
}

.more-button .more-button-wrapper:active span,
.more-button .more-button-wrapper:focus span,
.more-button .more-button-wrapper:hover span {
  right: -10%;
  color: #111;
}

.more-button svg {
  -webkit-transition: all .4s cubic-bezier(.165, .84, .44, 1);
  transition: all .4s cubic-bezier(.165, .84, .44, 1);
  -webkit-transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
}

.more-button svg path {
  fill: none;
  stroke: #111;
  stroke-miterlimit: 10;
  -webkit-transition: all .4s cubic-bezier(.165, .84, .44, 1);
  transition: all .4s cubic-bezier(.165, .84, .44, 1);
  -webkit-transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
}

.more-button span {
  position: absolute;
  top: 50%;
  width: 120px !important;
  max-width: 120px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  color: #111;
  -webkit-transition: all .4s cubic-bezier(.165, .84, .44, 1);
  transition: all .4s cubic-bezier(.165, .84, .44, 1);
  -webkit-transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}


/* 24. services */
.services-item {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  z-index: 10;
}

.services-item.services-item-1 {
  background: #f2f2f2;
}

.services-item.services-item-1:hover {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  background: #f2f2f2;
}

.services-item.services-item-2 {
  background: #fff;
}

.services-item.services-item-2:hover {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  background: #fff;
}

.services-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  z-index: 2;
}

.services-item .services-content {
  position: relative;
  z-index: 3;
}

.services-item .services-content .services-sub-header {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.services-item .services-content .services-sub-header {
  color: #5f5f5f;
}

.services-item:hover .services-sub-header {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  color: #111;
}

.services-sub-header {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -0.02em;
  color: #5f5f5f;
  position: relative;
  margin: -6px 0 -6px 0;
  padding: 0;
  z-index: 10;
}

.services-sub-header-all-lead {
  position: relative;
  display: block;
  color: #111;
}

.services-item:hover .services-sub-header-all-lead::after {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  background: #111;
}

.services-item .services-content .post-title {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.services-item:hover .services-content .post-title {
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  color: #5f5f5f;
}

.services-item .services-content .post-title {
  position: relative;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 40px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.08em;
  color: #111;
  margin: -10px 0 -4px 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}


/* 25. post */
.post-title {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #5f5f5f;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -0.02em;
  margin: -10px 0 0 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 10;
}


/*  26. ken burns slideshow */
.kenburns-slide-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 0;
}

.kenburns-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-animation: KenBurnsSlideShow 24s linear infinite 0s;
  -moz-animation: KenBurnsSlideShow 24s linear infinite 0s;
  -ms-animation: KenBurnsSlideShow 24s linear infinite 0s;
  -o-animation: KenBurnsSlideShow 24s linear infinite 0s;
  animation: KenBurnsSlideShow 24s linear infinite 0s;
}

.kenburns-slide-1,
.kenburns-slide-2,
.kenburns-slide-3,
.kenburns-slide-4 {
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

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

.kenburns-slide-2 {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}

.kenburns-slide-3 {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

.kenburns-slide-4 {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -ms-animation-delay: 18s;
  -o-animation-delay: 18s;
  animation-delay: 18s;
}

@-webkit-keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }

  5% {
    opacity: 1
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    -webkit-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transformm: scale(1);
  }
}

@-moz-keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
    -moz-transform: scale(1);
  }

  5% {
    opacity: 1
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    -moz-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -moz-transform: scale(1);
  }
}

@-o-keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
    -o-transform: scale(1);
  }

  5% {
    opacity: 1
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    -o-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -o-transform: scale(1);
  }
}

@keyframes KenBurnsSlideShow {
  0% {
    opacity: 0;
    transform: scale(1);
    -ms-transform: scale(1);
  }

  5% {
    opacity: 1
  }

  25% {
    opacity: 1;
  }

  30% {
    opacity: 0;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
    -ms-transform: scale(1);
  }
}


/* 27. contact */
#contact-form {
  width: 75%;
  margin: -10px auto 0 auto;
  padding: 0;
}

form {
  margin: 0;
  padding: 0;
}

#formId input {
  position: relative;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #111;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 5px 5px;
  background: none;
  margin: 10px 0 10px 0;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: #111;
  -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 #111;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 5px 5px;
  background: none;
  margin: 5px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: #111;
  -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;
}

#formId textarea {
  margin: 15px 0 10px 0;
  -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;
}

#formId input:hover,
#formId textarea:hover {
  border-color: #ff264a;
  -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;
}

#formId input:focus,
#formId textarea:focus {
  -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-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  color: #111;
  margin: 0;
  padding: 25px 0 0 15px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#formId .error {
  position: absolute;
  display: block;
  width: 200px !important;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0;
  font-size: 9px;
  text-transform: uppercase;
  text-align: center;
  color: #ff264a;
  letter-spacing: 0.15em;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

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

::-webkit-input-placeholder {
  font-size: 13px;
  color: #111;
}

:-ms-input-placeholder {
  font-size: 13px;
  color: #111;
}

::-moz-placeholder {
  font-size: 13px;
  color: #111;
}

input:-moz-placeholder {
  font-size: 13px;
  color: #111;
}

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;
}

button {
  border: none;
  background: none;
  outline: none;
}

button.more-button-wrapper {
  margin: 5px auto 0 auto;
}


/* 27.1. social icons */
.social-icons {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
  color: #5f5f5f;
  margin: 10px auto 0 0;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -ms-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}

.social-icons a,
.social-icons a:hover {
  outline: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.social-icons li a:hover,
.social-icons li a:visited,
.social-icons li a:active,
.social-icons li a:focus {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-style: normal;
  text-transform: uppercase;
}

.social-icons li {
  display: inline;
  padding: 0;
}

.social-icons li span {
  color: #5f5f5f;
  padding: 0 10px;
}


/* 28. Slick Slider CUSTOM */
.slick-slide {
  height: 100vh;
  background: none;
}

.slick-slider {
  margin-bottom: 0;
  margin-top: 0;
  cursor: auto;
}

.slick-track,
.slick-list {
  -webkit-perspective: 2000;
  perspective: 2000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slick-fullscreen-img-fill {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.slick-fullscreen-img-fill img {
  position: relative;
  display: inline-block;
  min-width: 100%;
  max-width: none;
  min-height: 100%;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill,
.slick-fullscreen-slideshow .slick-fullscreen-item .slick-fullscreen-img-fill,
.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item .slick-fullscreen-img-fill {
  height: 100vh;
  background: none;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img,
.slick-fullscreen-slideshow .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img,
.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img {
  position: relative;
  width: auto;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.slick-fullscreen,
.slick-fullscreen-slideshow,
.slick-fullscreen-slideshow-zoom-fade {
  background: none;
}

.slick-fullscreen .slick-slide,
.slick-fullscreen-slideshow .slick-slide,
.slick-fullscreen-slideshow-zoom-fade .slick-slide {
  display: none;
  float: left;
  height: 100%;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item .bg-img {
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -moz-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
}

.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item.slick-active .bg-img {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}


/* 29. Owl Carousel CUSTOM */
.owl-carousel {
  cursor: grab;
}

.owl-nav-custom-team,
.owl-nav-custom-works,
.owl-nav-custom-works-even-more,
.owl-nav-custom-news {
  position: relative;
  width: 115px !important;
  max-width: 115px;
  height: 50px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin: 19px auto 0 auto;
  overflow: hidden;
  text-align: center;
}

.owl-buttons {
  position: static;
}

.owl-prev,
.owl-next {
  position: absolute;
  display: block;
  text-align: center;
}

.owl-prev {
  left: 0;
}

.owl-next {
  left: 60px;
}

.owl-prev,
.owl-next {
  width: 50px;
  height: 50px;
  line-height: 50px;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  transition: all .4s ease-out;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  background: #111;
  cursor: pointer;
  z-index: 10;
}

.owl-prev:hover,
.owl-next:hover {
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  transition: all .4s ease-out;
  background: #111;
}

.owl-nav-custom-works .owl-prev,
.owl-nav-custom-works .owl-next {
  color: #111;
  background: #fff;
}

@media only screen and (max-width: 995px) {

  .owl-nav-custom-works .owl-prev,
  .owl-nav-custom-works .owl-next {
    color: #fff;
    background: #111;
  }
}

.owl-nav-custom-works .owl-prev:hover,
.owl-nav-custom-works .owl-next:hover {
  background: #fff;
}

@media only screen and (max-width: 995px) {

  .owl-nav-custom-works .owl-prev:hover,
  .owl-nav-custom-works .owl-next:hover {
    background: #111;
  }
}


/* 30. Magnific Popup CUSTOM */
.mfp-bg {
  background: rgba(0, 0, 0, .7);
}

.mfp-arrow-left:after {
  font-family: "Ionicons";
  content: "\f124";
  font-size: 18px;
  color: #fff;
  margin-top: 22px;
}

.mfp-arrow-right:after {
  font-family: "Ionicons";
  content: "\f125";
  font-size: 18px;
  color: #fff;
  margin-top: 22px;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: crosshair;
}

.mfp-arrow-left:after,
.mfp-arrow-left:before {
  border-right: none;
}

.mfp-arrow-right:after,
.mfp-arrow-right:before {
  border-left: none;
}

.mfp-title,
.mfp-counter {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.mfp-close {
  display: none;
  visibility: hidden;
}

@media only screen and (max-width: 1200px) {
  .mfp-close {
    display: block;
    visibility: visible;
  }
}

.mfp-bg {
  z-index: 99996;
}

.mfp-wrap {
  z-index: 99997;
}

.mfp-content {
  z-index: 99998;
}


/* 31. Lity CUSTOM */
.lity {
  z-index: 99999;
  cursor: crosshair;
  background: rgba(0, 0, 0, .55);
}

.lity-close {
  display: none;
  visibility: hidden;
}

@media only screen and (max-width: 995px) {
  .lity-close {
    top: 37px;
    left: 40px;
    display: block;
    visibility: visible;
  }
}

@media only screen and (max-width: 995px) {
  .lity-close:active {
    top: 37px;
    left: 40px;
  }
}

@media only screen and (max-width: 768px) {
  .lity-close {
    top: 17px;
    left: 20px;
  }
}

@media only screen and (max-width: 768px) {
  .lity-close:active {
    top: 17px;
    left: 20px;
  }
}


/* 32. PhotoSwipe CUSTOM */
.item-folio__caption {
  display: none;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
}


/* 33. headers */
.home-title-wrapper h1 {
  font-size: 60px;
  margin: -10px auto 0 auto;
}

@media all and (min-width: 1920px) {
  .home-title-wrapper h1 {
    font-size: 60px;
  }
}

@media only screen and (max-width: 768px) {
  .home-title-wrapper h1 {
    font-size: 40px;
    margin: -5px auto 0 auto;
  }
}

.home-title-wrapper h4 {
  font-size: 14px;
}

.intro {
  font-size: 40px;
  margin: 0 auto -1px auto;
}

@media all and (min-width: 1920px) {
  .intro {
    font-size: 60px;
  }
}

@media only screen and (max-width: 995px) {
  .intro {
    font-size: 30px;
  }
}

@media only screen and (max-width: 768px) {
  .intro {
    font-size: 20px;
  }
}

.intro.intro-large-end {
  margin: 0 auto -7px auto;
}

@media only screen and (max-width: 768px) {
  .intro.intro-large-end {
    margin: 0 auto -2px auto;
  }
}

.intro span {
  font-size: 80px;
}

@media all and (min-width: 1920px) {
  .intro span {
    font-size: 100px;
  }
}

@media only screen and (max-width: 995px) {
  .intro span {
    font-size: 60px;
  }
}

@media only screen and (max-width: 768px) {
  .intro span {
    font-size: 40px;
  }
}

.intro.intro-all {
  font-size: 30px;
  margin: 0 auto -2px auto;
}

@media all and (min-width: 1920px) {
  .intro.intro-all {
    font-size: 50px;
  }
}

.services-item .services-content .post-title {
  font-size: 40px;
}

@media all and (min-width: 1920px) {
  .services-item .services-content .post-title {
    font-size: 40px;
  }
}

@media only screen and (max-width: 995px) {
  .services-item .services-content .post-title {
    font-size: 30px;
    top: 1px;
  }
}

@media only screen and (max-width: 768px) {
  .services-item .services-content .post-title {
    font-size: 20px;
  }
}

.more-wraper {
  margin: 3px auto;
}

.more-wraper.more-wraper-form {
  margin: 19px auto 0 auto;
}

h2.section-heading {
  margin: 0 auto -2px auto;
}

@media only screen and (max-width: 768px) {
  h2.section-heading {
    font-size: 12px;
  }
}

.section-txt p {
  margin: 0 auto;
}

@media only screen and (max-width: 995px) {
  .section-txt p {
    padding: 0 15px;
  }
}

.post-title {
  margin: 0 auto -2px auto;
}

@media only screen and (max-width: 768px) {
  .post-title {
    font-size: 12px;
  }
}

.owl-nav-custom-team,
.owl-nav-custom-works,
.owl-nav-custom-works-even-more,
.owl-nav-custom-news {
  margin: 3px auto;
}

.services-sub-header {
  margin: 0 auto -2px auto;
}

@media only screen and (max-width: 768px) {
  .services-sub-header {
    font-size: 12px;
  }
}

.services-item .services-content .post-title {
  margin: 0 auto 0 auto;
}


/* 34. divider */
.inner-divider,
.inner-divider-half,
.inner-divider-ultra-half,
.inner-divider-50,
.inner-divider-last {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: none;
  z-index: -1;
}

.inner-divider {
  height: 150px;
}

@media only screen and (max-width: 995px) {
  .inner-divider {
    height: 150px;
  }
}

.inner-divider-half {
  height: 75px;
}

@media only screen and (max-width: 995px) {
  .inner-divider-half {
    height: 75px;
  }
}

.inner-divider-ultra-half {
  height: 50px;
}

@media all and (min-width: 1920px) {
  .inner-divider-ultra-half {
    height: 75px;
  }
}

@media only screen and (max-width: 768px) {
  .inner-divider-ultra-half {
    height: 50px;
  }
}

.inner-divider-50 {
  height: 50px;
}

@media only screen and (max-width: 768px) {
  .inner-divider-50 {
    height: 30px;
  }
}

.inner-divider-last {
  height: 260px;
}

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

@media only screen and (max-width: 995px) {
  .mobile-visible {
    display: block;
    visibility: visible;
  }

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

.extra-margin-all,
.extra-margin-owl {
  position: relative;
  height: auto;
  min-height: inherit;
  overflow: hidden;
  margin-left: 50px;
  margin-right: 50px;
  background: none;
}

@media only screen and (max-width: 768px) {

  .extra-margin-all,
  .extra-margin-owl {
    margin-left: 30px;
    margin-right: 30px;
  }
}

.monsiwa-svg {
  flex-shrink: 0;
  /* Prevent it from shrinking */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 2rem;
}

.monsiwa-svg img {
  width: 200px;
  /* Adjust size */
  height: auto;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.monsiwa-svg img:hover {
  transform: scale(1.05) rotate(3deg);
}

/* Optional responsive tweak */
@media (max-width: 768px) {
  .monsiwa-svg img {
    width: 150px;
  }
}

.highlight-62ools {
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 0 0 rgba(255, 215, 0, 0);
  display: inline-block;
}

.snake-game {
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

.snake-game.active {
  opacity: 1;
  pointer-events: auto;
  height: auto;
  margin: 32px auto 24px auto;
}

.snake-canvas {
  background: #f7f7f9;
  border-radius: 18px;
  box-shadow: 0 2px 16px 0 rgba(60, 60, 60, 0.07);
  border: none;
  display: block;
  width: 100%;
  height: auto;
}

.snake-score {
  text-align: center;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.snake-controls {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 8px;
  -webkit-user-select: none;
  user-select: none;
}

.snake-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: #e9ecef;
  border-radius: 8px;
  font-size: 1.3rem;
  color: #444;
  cursor: pointer;
  box-shadow: 0 1px 4px 0 rgba(239, 227, 227, 0.07);
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.snake-btn:active {
  background: #d1e7dd;
}

/* Lighten the video by overlay */
.hero-bg {
  position: relative;
  overflow: hidden;
}

.html5-videoContainment video {
  filter: brightness(1.3);
  /* make it lighter */
}

/* Fix for gif-background video sizing at all zoom levels */
.gif-background {
  position: relative;
  z-index: 1;
}

.gif-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* filter: brightness(1.3); */
  /* make it lighter */
  opacity: 1;
  transition: opacity 0.6s ease;
  /* Ensure no video controls are visible */
  pointer-events: none;
  outline: none;
  border: none;
}

/* Hide any potential video controls */
.gif-background video::-webkit-media-controls {
  display: none !important;
}

.gif-background video::-webkit-media-controls-panel {
  display: none !important;
}

.gif-background video::-webkit-media-controls-play-button {
  display: none !important;
}

.gif-background video::-webkit-media-controls-volume-slider {
  display: none !important;
}

.gif-background video::-webkit-media-controls-mute-button {
  display: none !important;
}

.gif-background video::-webkit-media-controls-timeline {
  display: none !important;
}

.gif-background video::-webkit-media-controls-current-time-display {
  display: none !important;
}

.gif-background video::-webkit-media-controls-time-remaining-display {
  display: none !important;
}

.gif-background video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

.bg-img-SINGLE {
  background-image: url("../images/62ools/01.jpg");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* keep it behind other elements */
}

/* Ensure video sits above image once loaded */
.html5-videoContainment {
  position: relative;
  z-index: 1;
}

.gif-background {
  position: relative;
  z-index: 1;
}

/* Optional: fade transition when video loads */
.html5-videoContainment video {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.html5-videoContainment video.loaded {
  opacity: 1;
}

/* Video fade transition handled in main .gif-background video rule above */

/* Footer Base */
.custom-footer {
  background-color: #000;
  /* Black background */
  color: #ddd;
  padding: 60px 40px 20px;
  font-family: "Segoe UI", Arial, sans-serif;
}

.custom-footer .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left;
  /* default kiri */
}

.custom-footer .footer-section {
  margin-bottom: 30px;
}

.footer-title {
  font-size: 18px;
  color: #fff;
  margin-bottom: 15px;
  font-weight: 600;
}

.footer-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #aaa;
  max-width: 300px;
  /* biar gak kepanjangan */
}

/* Links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin: 8px 0;
}

.footer-links a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #fff;
}

/* Social Icons */
.social-icons {
  margin-top: 15px;
}

.social-icons a {
  display: inline-block;
  margin-right: 12px;
  font-size: 20px;
  color: #bbb;
  transition: color 0.3s, transform 0.2s;
}

.social-icons a:hover {
  color: #fff;
  transform: scale(1.1);
}

/* Bottom */
.footer-bottom {
  border-top: 1px solid #222;
  margin-top: 40px;
  padding-top: 15px;
  font-size: 13px;
  color: #888;
  text-align: center;
}

.footer-bottom a {
  color: #bbb;
  text-decoration: none;
  font-weight: 500;
}

.footer-bottom a:hover {
  color: #fff;
}

.alert-success-modern {
  background: rgba(34, 197, 94, 0.2);
  /* green with transparency */
  backdrop-filter: blur(10px);
  /* blur effect */
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: #16a34a;
  /* green text */
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 1rem;
  animation: fadeInScale 0.6s ease forwards;
}

/* smooth appear */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Password Toggle Button Styles */
.password-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.password-input-wrapper input {
  padding-right: 40px !important;
}

.password-toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  font-size: 18px;
  padding: 0;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  z-index: 10;
  line-height: 1;
}

.password-toggle-btn:hover {
  color: #333;
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateY(-50%) scale(1.1);
}

.password-toggle-btn:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.password-toggle-btn svg {
  width: 18px;
  height: 18px;
  transition: all 0.3s ease;
}

.password-toggle-btn:hover svg {
  transform: scale(1.1);
}