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


/*
  TEMPLATE BACKGROUNDS - CITY STYLE
    hero background IMG
      split slider IMG
	  zoom slider IMG
  layout
  center container
  logo
  navigation
  social icons
  loader
  slides
  borders
  newsletter form
    placeholders
  social icons waits
  countdown
  lines
  hero
    hero container
    hero bg
    hero slider
*/


/* TEMPLATE BACKGROUNDS - CITY STYLE */
/* hero background IMG */
/* split slider IMG */
.bg-img-split-1 {
background-image: url(../img/background/hero-bg-split-1.jpg);
}

.bg-img-split-2 {
background-image: url(../img/background/hero-bg-split-2.jpg);
}

.bg-img-split-3 {
background-image: url(../img/background/hero-bg-split-3.jpg);
}

.bg-img-split-4 {
background-image: url(../img/background/hero-bg-split-4.jpg);
}

/* zoom slider IMG */
.bg-img-zoom-1 {
background-image: url(../img/background/hero-bg-zoom-1.jpg);
}

.bg-img-zoom-2 {
background-image: url(../img/background/hero-bg-zoom-2.jpg);
}

.bg-img-zoom-3 {
background-image: url(../img/background/hero-bg-zoom-3.jpg);
}

.bg-img-zoom-4 {
background-image: url(../img/background/hero-bg-zoom-4.jpg);
}


/* layout */
body {
background: #000;
}

#intro-wrapper,
#intro-wrapper-2,
#intro-wrapper-3 {
margin: 0 auto;
width: 100%;
}

.unveil-1 {
position: relative;
padding: 12px 0 0 0;
margin-bottom: -25px;
}

@media only screen and (max-width: 640px) {
  .unveil-1 {
    padding: 9px 0 0 0;
    margin-bottom: -122px;
  }
}

.unveil-2 {
position: relative;
padding: 45px 0 0 0;
}

.unveil-3 {
position: relative;
padding: 59px 0 0 0;
}

.title-intro {
font-family: 'Oswald', sans-serif;
font-size: 160px;
line-height: 1;
font-style: normal;
font-weight: 400;
color: #fff;
letter-spacing: -0.04em;
text-transform: uppercase;
text-align: center;
margin: 0 auto;
padding: 0;
text-shadow: 1px 1px 2px #000;
position: relative;
display: block;
}

@media only screen and (max-width: 640px) {
  .title-intro {
    font-size: 57px;
  }
}

.description-intro h2 {	
font-family: 'Dosis', sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
color: #fff;
letter-spacing: normal;
text-transform: uppercase;
text-shadow: 1px 1px 2px #000;
margin: 5px auto;
padding: 6px 0 0 0;
border: 1px solid #fff;
width: 275px;
height: 30px;
background: rgba(0, 0, 0, .55);
}

@media only screen and (max-width: 880px) {
  .description-intro h2 {	
    width: 275px;
  }
}

@media only screen and (max-width: 640px) {
  .description-intro h2 {	
    display: none;
    visibility: hidden;
  }
}

.top-intro {
height: 110px;
overflow: hidden;
}

.bottom-intro {
height: 110px;
overflow: hidden;
}

.top-intro .title-intro {
margin: 43px auto 0 auto;
}

.bottom-intro .title-intro {
margin: -97px auto 0 auto;
}

div.flexslider {
background: none;
border: none;
}

.flexslider h3 {
font-family: 'Oswald', sans-serif;
font-size: 23px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.05em;
color: #fff;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px #000;
position: relative;
}

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


/* center container */
.center-container {
background: #fff;
}

.center-container-home-waits {
position: absolute;
display: table;
height: 100%;
width: 100%;
left: 0;
top: 0;
}

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


/* logo */
.logo-img.logo-light {
width: 57px;
height: 34px;
background: url(../img/logo-light-mobile.png) no-repeat;
}

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

@media only screen and (max-width: 640px) {
  .logo.logo-waits {
    top: 25px;
    left: 25px;
  }
}


/* navigation */
@media only screen and (max-width: 880px) {
  #menu-mobile-btn.menu-mobile-btn-waits {
    top: 37px;
    right: 35px;
}
}

@media only screen and (max-width: 640px) {
  #menu-mobile-btn.menu-mobile-btn-waits {
    top: 12px;
    right: 10px;
  }
}


/* social icons */
ul.social-icons a {
color: #fff;
}

ul.social-icons a:hover {
color: #fff;
}

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

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


/* loader */
#loader {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
display: block;
padding: 90px;
left: 0;
top: 0;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

#loader .loaderStatic {
width: 0;
height: 100%;
display: block;
background: #000;
}

#loader .loaderDynamic {
width: 100%;
height: 100%;
display: block;
background: #db0018;
}

#loaderText {
position: absolute;
display: block;
width: 100%;
padding: 50px;
top: 50%;
margin-top: -85px;
left: 0;
text-align: center;
}

@media only screen and (max-width: 640px) {
  #loaderText {
    display: none;
    visibility: hidden;
  }
}

#loaderText .loaderTitle {
font-family: 'Dosis', sans-serif;
font-size: 23px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.04em;
color: #fff;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
max-width: 400px;
width: 100%;
height: auto;
text-align: center;
margin: 0 auto;
position: relative;
}

#loaderText .loaderSubTitle {
position: relative;
display: block;
font-family: 'Oswald', sans-serif;
font-size: 40px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.04em;
color: #fff;
margin: 15px auto;
text-align: center;
text-transform: uppercase;
}


/* slides */
.slide {
position: fixed;
display: block;
background: none;
width: 100%;
height: 100%;
left: 100%;
visibility: inherit;
}

.slideBgImg,
.slideBgImg-video {
position: absolute;  
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: none;
background-position: 50% 50%;
background-size: 100%;
background-repeat: no-repeat;
        opacity: 100;
   -moz-opacity: 100;
-webkit-opacity: 100;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.slide1 {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: url(../img/background/Banner1.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.slide2 {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: url(../img/background/Banner2.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.slide3 {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: url(../img/background/Banner3.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.slide .homeSlide {
-webkit-transition: opacity .5s ease;
   -moz-transition: opacity .5s ease;
    -ms-transition: opacity .5s ease;
     -o-transition: opacity .5s ease;
        transition: opacity .5s ease;
}

@-webkit-keyframes CityOut {
25% {
    opacity: .5;
    -webkit-transform: translateZ(-500px);
}

75% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(-200%);
}

100% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(-200%);
}
}

@-moz-keyframes CityOut {
25% {
    opacity: .5;
    -moz-transform: translateZ(-500px);
}

75% {
    opacity: .5;
    -moz-transform: translateZ(-500px) translateX(-200%);
}

100% {
    opacity: .5;
    -moz-transform: translateZ(-500px) translateX(-200%);
}
}

@keyframes CityOut {
25% {
    opacity: .5;
    transform: translateZ(-500px);
}

75% {
    opacity: .5;
    transform: translateZ(-500px) translateX(-200%);
}

100% {
    opacity: .5;
    transform: translateZ(-500px) translateX(-200%);
}
}

@-webkit-keyframes CityIn {
0,25% {
    opacity: .5;
    -webkit-transform: translateZ(-500px) translateX(200%);
}

75% {
    opacity: .5;
    -webkit-transform: translateZ(-500px);
}

100% {
    opacity: 1;
    -webkit-transform: translateZ(0) translateX(0);
}
}

@-moz-keyframes CityIn {
0,25% {
    opacity: .5;
    -moz-transform: translateZ(-500px) translateX(200%);
}

75% {
    opacity: .5;
    -moz-transform: translateZ(-500px);
}

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

@keyframes CityIn {
0,25% {
    opacity: .5;
    transform: translateZ(-500px) translateX(200%);
}

75% {
    opacity: .5;
    transform: translateZ(-500px);
}

100% {
    opacity: 1;
    transform: translateZ(0) translateX(0);
}
}

#slidePositionIndicator {
position: fixed;
display: none;
width: 100%;
height: 10px;
text-align: center;
bottom: 47px;
left: 50%;
margin-left: -131px;
z-index: 200;
}

@media only screen and (max-width: 640px) {
  #slidePositionIndicator {
    bottom: 22px;
	margin-left: -106px;
  }
}

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

@media only screen and (max-width: 480px) {
  #slidePositionIndicator {
    bottom: 22px;
    left: 0;
    margin-left: 0;
  }
}

#slidePositionIndicator.show {
display: block;
}

.positionIndicator {
position: relative;
display: inline-block;
width: 45px;
height: auto;
margin: 0 5px;
padding: 5px 0;
vertical-align: top;
cursor: pointer;
}

.positionIndicatorLine {
display: block;
width: 45px;
height: 2px;
        opacity: 100;
   -moz-opacity: 100;
-webkit-opacity: 100;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
background: #fff;
-webkit-transition: background .8s ease-in-out;
   -moz-transition: background .8s ease-in-out;
    -ms-transition: background .8s ease-in-out;
     -o-transition: background .8s ease-in-out;
        transition: background .8s ease-in-out;
}

.active .positionIndicatorLine {
        opacity: 100;
   -moz-opacity: 100;
-webkit-opacity: 100;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
background: #db0018;
-webkit-transition: background .8s ease-in-out;
   -moz-transition: background .8s ease-in-out;
    -ms-transition: background .8s ease-in-out;
     -o-transition: background .8s ease-in-out;
        transition: background .8s ease-in-out;
}


/* borders */
.borders {
position: absolute;
width: -webkit-calc(100% - 40px);
width: -moz-calc(100% - 40px);
width: calc(100% - 40px);
height: -webkit-calc(100% - 40px);
height: -moz-calc(100% - 40px);
height: calc(100% - 40px);
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
border: 10px solid rgba(0, 0, 0, .55);
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
z-index: 1;
}

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

.borders, .borders:after, .borders:before {
width: -webkit-calc(100% - 40px);
width: -moz-calc(100% - 40px);
width: calc(100% - 40px);
height: -webkit-calc(100% - 40px);
height: -moz-calc(100% - 40px);
height: calc(100% - 40px);
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}


/* newsletter form */
#subscribe-wrapper-2 {
position: relative;
margin: 0 auto;
background: none;
width: 225px;
height: 70px;
color: #fff;
}

#newsletter {
width: auto;
height: 55px;
padding: 1px 0 0 0;
}

.newsletter {
position: relative;
clear: both;
width: auto;
border: none;
background: none;
margin: -7px 0 0 0;
padding: 0;
overflow: hidden;
}

.subscribe-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;
color: #fff;
margin: 45px auto 0 auto;
padding: 0;
line-height: 1;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#subscribe .subscribe-error {
position: relative;
display: block;
margin-left: -31px;
text-align: center;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.15em;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#subscribe input {
width: 225px;
height: 40px;
text-align: center;
color: #fff;
border: none;
border-bottom: 1px solid #fff;
background: none;
padding: 0 5px 0 0;
float: left;
-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;
}

#subscribe input:focus, #subscribe textarea:focus {
color: #fff;
-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;
}

#subscribe input:hover {
border-color: rgba(119, 119, 119, .5);
-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;
}

.submit-button-2 {
position: relative;
font-family: 'Dosis', sans-serif;
font-size: 15px;
line-height: 1.5;
font-style: normal;
text-transform: uppercase;
text-align: center;
font-weight: 400;
color: #fff;
letter-spacing: normal;
display: inline-block;
outline: none;
margin: 10px auto;
width: 225px;
padding: 1px 0 0 0;
height: 45px;
border: none;
background: #000;
-webkit-backface-visibility: hidden;
	    backface-visibility: hidden;
	overflow: hidden;
	cursor: pointer;
-webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
	 -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
-webkit-transform: translate(0,0);
   -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
     -o-transform: translate(0,0);
        transform: translate(0,0);
}

.submit-button-2::before {
position: absolute;
content: '';
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
right: -100%;
bottom: 0%;
width: 200%;
height: 200%;
background: #db0018;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-transform: skewX(-60deg);
   -moz-transform: skewX(-60deg);
    -ms-transform: skewX(-60deg);
     -o-transform: skewX(-60deg);
        transform: skewX(-60deg);
-webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
	 -o-transition: all 0.4s ease;
	    transition: all 0.4s ease;
z-index: -1;
}

.submit-button-2::before {
-webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
}

.submit-button-2:hover {
color: #fff;
background: #000;
}

.submit-button-2:hover::before {
bottom: -100%;
right: -200%;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}


/* placeholders */  
input[type="text"].subscribe-email::-webkit-input-placeholder {
color: #fff;
}

input[type="text"].subscribe-email:-ms-input-placeholder{
color: #fff;
}

input[type="text"].subscribe-email::-moz-placeholder {
color: #fff;
}


/* social icons waits */
.social-icons-wrapper-waits {
position: relative;
margin: 0 auto;
text-align: center;
}

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

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

ul.social-icons-waits {
font-size: 40px;
line-height: 1;
color: #fff;
letter-spacing: -0.04em;
text-align: center;
margin: 0 auto;
padding: 0;
text-shadow: 1px 1px 2px #000;
position: relative;
}

@media only screen and (max-width: 880px) {
  ul.social-icons-waits {
    font-size: 20px;
    width: 80%;
  }
}

ul.social-icons-waits a {
padding: 0;
color: #fff;
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-waits a:hover {
padding: 0;
color: #fff;
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;
}


/* countdown */
#countdown-wrapper-waits {
position: relative;
text-align: center;
}

ul.countdown-waits#countdown li {
color: #fff;
text-shadow: 1px 1px 2px #000;
}

ul.countdown-waits#countdown li.countdown-slash {
color: #fff;
}

ul.countdown-waits#countdown li span.days {
color: #db0018;
text-shadow: 1px 1px 2px #000;
}

ul.countdown-waits#countdown li p.timeRefDays {
color: #db0018;
letter-spacing: 0.05em;
text-shadow: 1px 1px 2px #000;
}

ul.countdown-waits#countdown li p.timeRefHours,
ul.countdown-waits#countdown li p.timeRefMinutes,
ul.countdown-waits#countdown li p.timeRefSeconds {
color: #fff;
letter-spacing: 0.05em;
text-shadow: 1px 1px 2px #000;
}


/* lines */
.lines {
background: #db0018;
}

.lines:after,
.lines:before {
background: #db0018;
}

.lines-button.minus.lines-close .lines:after,
.lines-button.minus.lines-close .lines:before {
background: #db0018;
}

.lines-button.x.lines-close .lines:after,
.lines-button.x.lines-close .lines:before {
background: #db0018;
}

.lines-button.x2.lines-close .lines:after,
.lines-button.x2.lines-close .lines:before {
background: #db0018;
}


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


/* hero bg */
.hero-bg {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}


/* hero slider */
.hero-slider-split .owl-wrapper-outer,
.hero-slider-split .owl-height,
.hero-slider-split .owl-stage,
.hero-slider-split .owl-wrapper,
.hero-slider-split .owl-item {
height: 100%!important;
}
 
.hero-slider-split .slide-HERO {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100%!important;
}

.hero-slider-zoom .owl-wrapper-outer,
.hero-slider-zoom .owl-height,
.hero-slider-zoom .owl-stage,
.hero-slider-zoom .owl-wrapper,
.hero-slider-zoom .owl-item {
height: 100%!important;
}
 
.hero-slider-zoom .slide-HERO {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100%!important;
}

/* =========================================
   CUSTOM CSS FOR ABOUT SECTION
   ========================================= */

/* Fix header positioning - push it down */
.lower-page#about {
    padding-top: 100px;
        background: #fafafa;
    /* Adds space at the top */
}

@media only screen and (max-width: 880px) {
    .lower-page#about {
        padding-top: 80px;
    }
}

@media only screen and (max-width: 640px) {
    .lower-page#about {
        padding-top: 60px;
    }
}

/* Center the section header */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h4 {
    color: #999;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.section-header h2 {
    font-size: 48px;
    font-weight: bold;
    margin: 20px 0;
    color: #111;
}

.section-header h3 {
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 30px;
}

/* Center and style the main about content */
.about-content-wrapper {
    margin-top: 40px;
    margin-bottom: 80px;
}

.about-text-center {
    text-align: left;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 30px;
}

.about-text-center h3 {
    font-size: 24px;
    font-weight: 600;
    color: #111;
    margin-top: 40px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.about-text-center h3:first-child {
    margin-top: 0; /* Remove top margin from first h3 */
}

.about-text-center p {
    font-size: 16px;
    line-height: 1.8;
    color: #5f5f5f;
    margin-bottom: 25px;
    text-align: justify;
    padding: 0; /* Remove default padding */
}

.about-text-center p strong {
    color: #111;
    font-weight: 600;
}

/* Responsive adjustments */
@media only screen and (max-width: 880px) {
    .section-header h2 {
        font-size: 36px;
    }
    
    .about-text-center {
        padding: 30px 20px;
    }
    
    .about-text-center h3 {
        font-size: 20px;
        margin-top: 30px;
    }
    
    .about-text-center p {
        font-size: 15px;
        line-height: 1.7;
    }
}

@media only screen and (max-width: 640px) {
    .section-header h2 {
        font-size: 28px;
    }
    
    .section-header h3 {
        font-size: 14px;
    }
    
    .about-text-center {
        padding: 20px 15px;
    }
    
    .about-text-center h3 {
        font-size: 18px;
        margin-top: 25px;
    }
    
    .about-text-center p {
        font-size: 14px;
        text-align: left; /* Left align on mobile for better readability */
    }
}

/* Fix for col-md-offset-1 if not working */
.col-md-offset-1 {
    margin-left: 8.333333%;
}

@media only screen and (max-width: 991px) {
    .col-md-offset-1 {
        margin-left: 0;
    }
}

/* Remove quotations styling for this section */
.about-text-center .quotations-line-left {
    display: none;
}

/* Optional: Add subtle background */
.lower-page#about .center-container {
    background: #fafafa; /* Very light gray background */
}

/* Optional: Add divider styling if needed */
.dividerOT-about {
    width: 60px;
    height: 3px;
    background: #111;
    margin: 30px auto;
}

/* =========================================
   CUSTOM CSS FOR DATES SECTION
   ========================================= */

/* Ensure normal document flow */
.lower-page#dates {
    position: relative !important;
    display: none;
    padding-top: 100px;
    padding-bottom: 60px;
    background: #fafafa !important;
    width: 100%;
}

.lower-page#dates .center-container {
    position: relative !important;
    background: #fafafa !important;
}

.lower-page#dates .center-block {
    position: relative !important;
}

/* Dates section header */
.lower-page#dates .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.lower-page#dates .section-header h4 {
    color: #999;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.lower-page#dates .section-header h2 {
    font-size: 48px;
    font-weight: bold;
    margin: 20px 0;
    color: #111;
}

.lower-page#dates .section-header h3 {
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 30px;
}

/* Divider */
.dividerOT-dates {
    width: 60px;
    height: 3px;
    background: #111;
    margin: 30px auto;
}

/* Content */
.dates-content-wrapper {
    margin-top: 40px;
    margin-bottom: 80px;
}

.dates-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}

.dates-intro p {
    font-size: 18px;
    line-height: 1.8;
    color: #666;
}

/* Bandsintown Widget */
.bandsintown-widget {
    max-width: 900px;
    margin: 60px auto;
    padding: 40px 20px;
    background: #fff;
    border-radius: 8px;
}

.bandsintown-widget h3 {
    font-size: 28px;
    font-weight: 600;
    color: #111;
    text-align: center;
    margin-bottom: 40px;
}

/* Booking Button */
.booking-cta {
    max-width: 700px;
    margin: 80px auto 40px auto;
    padding: 50px 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    text-align: center;
    color: white;
}

.booking-cta h3 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    color: white;
}

.booking-cta p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.95);
}

.btn-booking {
    display: inline-block;
    padding: 15px 40px;
    background: white;
    color: #667eea;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-booking:hover {
    background: #111;
    color: white;
}

/* Responsive */
@media only screen and (max-width: 880px) {
    .lower-page#dates {
        padding-top: 80px;
    }
    
    .lower-page#dates .section-header h2 {
        font-size: 36px;
    }
}

@media only screen and (max-width: 640px) {
    .lower-page#dates {
        padding-top: 60px;
    }
    
    .lower-page#dates .section-header h2 {
        font-size: 28px;
    }
}
/* =========================================
   CUSTOM CSS FOR MUSIC SECTION
   ========================================= */

.lower-page#music {
    position: relative !important;
    display: none;
    padding-top: 100px;
    padding-bottom: 60px;
    background: #fafafa !important;
    width: 100%;
}

.lower-page#music .center-container {
    position: relative !important;
    background: #fafafa !important;
}

.lower-page#music .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.lower-page#music .section-header h4 {
    color: #999;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.lower-page#music .section-header h2 {
    font-size: 48px;
    font-weight: bold;
    margin: 20px 0;
    color: #111;
}

.lower-page#music .section-header h3 {
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 30px;
}

.dividerOT-music {
    width: 60px;
    height: 3px;
    background: #111;
    margin: 30px auto;
}

.music-content-wrapper {
    margin-top: 40px;
    margin-bottom: 80px;
}

.music-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}

.music-intro p {
    font-size: 18px;
    line-height: 1.8;
    color: #666;
}

/* =========================================
   CUSTOM CSS FOR PHOTOS SECTION
   ========================================= */

.lower-page#photos {
    position: relative !important;
    display: none;
    padding-top: 100px;
    padding-bottom: 60px;
    background: #fafafa !important;
    width: 100%;
}

.lower-page#photos .center-container {
    position: relative !important;
    background: #fafafa !important;
}

.lower-page#photos .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.lower-page#photos .section-header h4 {
    color: #999;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.lower-page#photos .section-header h2 {
    font-size: 48px;
    font-weight: bold;
    margin: 20px 0;
    color: #111;
}

.lower-page#photos .section-header h3 {
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 30px;
}

.dividerOT-photos {
    width: 60px;
    height: 3px;
    background: #111;
    margin: 30px auto;
}

.photos-content-wrapper {
    margin-top: 40px;
    margin-bottom: 80px;
}

.photos-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}

.photos-intro p {
    font-size: 18px;
    line-height: 1.8;
    color: #666;
}

/* Responsive for both sections */
@media only screen and (max-width: 880px) {
    .lower-page#music,
    .lower-page#photos {
        padding-top: 80px;
    }
    
    .lower-page#music .section-header h2,
    .lower-page#photos .section-header h2 {
        font-size: 36px;
    }
}

@media only screen and (max-width: 640px) {
    .lower-page#music,
    .lower-page#photos {
        padding-top: 60px;
    }
    
    .lower-page#music .section-header h2,
    .lower-page#photos .section-header h2 {
        font-size: 28px;
    }
}
/* Force Bandsintown horizontal layout */
.bit-widget .bit-event {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.bit-widget .bit-event-date {
    flex: 0 0 auto !important;
    margin-right: 20px !important;
}

.bit-widget .bit-event-buttons {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 10px !important;
}
/* Apple Music Widgets Side by Side */
.apple-music-widgets {
    display: flex;
    gap: 30px;
    margin: 40px auto;
    max-width: 1200px;
    justify-content: center;
}

.music-widget-left,
.music-widget-right {
    flex: 1;
    max-width: 580px;
}

.music-widget-left iframe,
.music-widget-right iframe {
    width: 100% !important;
    border-radius: 10px;
}

/* Responsive - stack on mobile */
@media only screen and (max-width: 880px) {
    .apple-music-widgets {
        flex-direction: column;
        gap: 20px;
    }
    
    .music-widget-left,
    .music-widget-right {
        max-width: 100%;
    }
}
/* Music section titles */
.music-section-title {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    color: #111;
    margin: 60px 0 40px 0;
    letter-spacing: 2px;
}
/* =========================================
   PHOTOS SECTION CSS - ADD TO style-city.css
   ========================================= */

/* Event Gallery Sections */
.event-gallery-section {
    margin: 60px 0;
}

.event-title {
    font-size: 28px;
    font-weight: bold;
    color: #111;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Photo Items in Slider */
.photo-item {
    padding: 10px;
}

.photo-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.photo-item img:hover {
    transform: scale(1.05);
}

/* Owl Carousel Navigation Buttons */
.event-slider .owl-nav {
    margin-top: 20px;
    text-align: center;
}

.event-slider .owl-nav button {
    background: #111 !important;
    color: white !important;
    font-size: 24px !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 10px;
    transition: background 0.3s ease;
}

.event-slider .owl-nav button:hover {
    background: #667eea !important;
}

.event-slider .owl-nav .owl-prev:before {
    content: "‹";
}

.event-slider .owl-nav .owl-next:before {
    content: "›";
}

/* Owl Carousel Dots */
.event-slider .owl-dots {
    text-align: center;
    margin-top: 20px;
}

.event-slider .owl-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    transition: background 0.3s ease;
}

.event-slider .owl-dot.active {
    background: #111;
}

/* Responsive */
@media only screen and (max-width: 880px) {
    .event-title {
        font-size: 24px;
    }
    
    .event-gallery-section {
        margin: 40px 0;
    }
}

@media only screen and (max-width: 640px) {
    .event-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .photo-item {
        padding: 5px;
    }
}
/* =========================================
   CONTACT SECTION CSS - COMPLETE STYLING
   ========================================= */

/* Contact Section Base Styling - MATCHES OTHER SECTIONS */
.lower-page#contact {
    position: relative !important;
    display: none;
    padding-top: 100px;
    padding-bottom: 60px;
    background: #fafafa !important;
    width: 100%;
}

.lower-page#contact .center-container {
    position: relative !important;
    background: #fafafa !important;
}

.lower-page#contact .center-block {
    position: relative !important;
}

/* Contact section header - MATCHES OTHER SECTIONS */
.lower-page#contact .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.lower-page#contact .section-header h4 {
    font-size: 14px;
    color: #999;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.lower-page#contact .section-header h2 {
    font-size: 48px;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.lower-page#contact .section-header h3 {
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 30px;
    font-weight: 600;
}

/* Divider - MATCHES OTHER SECTIONS */
.dividerOT-contact {
    width: 60px;
    height: 3px;
    background: #111;
    margin: 0 auto 60px auto;
}

/* Contact Content Wrapper */
.contact-content-wrapper {
    margin-top: 40px;
}

/* Contact Intro */
.contact-intro {
    text-align: center;
    margin: 0 auto 50px auto;
    max-width: 800px;
}

.contact-intro p {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
}

/* Contact Form Styling */
#contact-form {
    margin-bottom: 40px;
}

#contact-form input,
#contact-form textarea,
#contact-form select {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 14px;
    color: #333;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.3s ease;
}

#contact-form input:focus,
#contact-form textarea:focus,
#contact-form select:focus {
    border-color: #667eea;
    outline: none;
}

#contact-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
    cursor: pointer;
}

#contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

#contact-form .make-space {
    padding: 0;
}

#contact-form button {
    width: 100%;
    margin-top: 10px;
}

/* Contact Info Box */
.contact-info-box {
    padding: 30px 20px;
}

.contact-info-box .awesome-contact {
    display: block;
    text-align: left;
    margin: 30px 0 10px 0;
}

.contact-info-box .awesome-contact:first-child {
    margin-top: 0;
}

.contact-info-box .awesome-contact .fa {
    font-size: 24px;
    color: #667eea;
}

.contact-info-box h4 {
    font-size: 16px;
    font-weight: bold;
    color: #111;
    margin: 10px 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-info-box p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 10px 0;
}

/* Form validation error styling */
#contact-form .error {
    color: #e74c3c;
    font-size: 12px;
    margin-top: -15px;
    margin-bottom: 15px;
    display: block;
}

#contact-form .inputError {
    border-color: #e74c3c !important;
}

/* Success message */
#contact-form .success {
    background: #2ecc71;
    color: white;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
    margin: 20px 0;
    font-size: 16px;
}

/* Responsive - MATCHES OTHER SECTIONS */
@media only screen and (max-width: 880px) {
    .lower-page#contact {
        padding-top: 80px;
    }
    
    .lower-page#contact .section-header {
        margin-bottom: 50px;
    }
    
    .lower-page#contact .section-header h2 {
        font-size: 36px;
    }
    
    .contact-intro {
        margin-bottom: 40px;
    }
    
    .contact-info-box {
        margin-top: 40px;
        padding: 20px 0;
    }
}

@media only screen and (max-width: 640px) {
    .lower-page#contact {
        padding-top: 60px;
    }
    
    .lower-page#contact .section-header {
        margin-bottom: 40px;
    }
    
    .lower-page#contact .section-header h2 {
        font-size: 28px;
    }
    
    .contact-intro p {
        font-size: 14px;
    }
    
    #contact-form input,
    #contact-form textarea,
    #contact-form select {
        padding: 12px 15px;
        font-size: 13px;
    }
    
    .contact-info-box h4 {
        font-size: 14px;
    }
    
    .contact-info-box p {
        font-size: 13px;
    }
}

/* =========================================
   COMPLETE MOBILE FIXES - FINAL VERSION
   REPLACE ALL PREVIOUS MOBILE FIX CSS WITH THIS
   ADD TO THE BOTTOM OF style-city.css
   ========================================= */

/* ==========================================
   FIX 1: SHOW LOADER TEXT ON MOBILE
   ========================================== */

/* Remove the display: none on mobile for loader text */
@media only screen and (max-width: 640px) {
  #loaderText {
    display: block !important;
    visibility: visible !important;
    padding: 20px !important;
    margin-top: -50px !important;
  }
  
  #loaderText .loaderTitle {
    font-size: 18px !important;
    max-width: 300px !important;
  }
  
  #loaderText .loaderSubTitle {
    font-size: 28px !important;
  }
}

/* ==========================================
   FIX 2: SHOW BORDERS ON MOBILE
   ========================================== */

/* Keep borders visible on mobile but make them thinner */
@media only screen and (max-width: 640px) {
  .borders {
    display: block !important;
    visibility: visible !important;
    width: calc(100% - 20px) !important;
    height: calc(100% - 20px) !important;
    top: 10px !important;
    left: 10px !important;
    border-width: 5px !important;
  }
}

/* ==========================================
   FIX 3: HERO SLIDES 2 & 3 BACKGROUNDS - COMPLETE FIX
   ========================================== */

/* Force proper background sizing on ALL screens */
.slideBgImg.slide2,
.slideBgImg.slide3,
div.slide2,
div.slide3 {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Mobile specific - ensure backgrounds fill viewport */
@media only screen and (max-width: 880px) {
    .slideBgImg.slide2,
    .slideBgImg.slide3 {
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
    }
    
    div.slide#slide2,
    div.slide#slide3 {
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media only screen and (max-width: 640px) {
    /* Force slides 2 & 3 to match slide 1 behavior */
    .slideBgImg.slide2,
    .slideBgImg.slide3 {
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    div.slide#slide2,
    div.slide#slide3 {
        background-size: cover !important;
        background-position: center center !important;
        width: 100% !important;
        height: 100vh !important;
        overflow: hidden !important;
    }
    
    /* Ensure all slide containers have proper dimensions */
    .slide {
        width: 100% !important;
        height: 100vh !important;
    }
}

/* Mobile landscape orientation */
@media only screen and (max-width: 640px) and (orientation: landscape) {
    .slideBgImg.slide2,
    .slideBgImg.slide3 {
        background-size: cover !important;
        background-position: center center !important;
        min-height: 100vh !important;
    }
}

/* ==========================================
   FIX 4: BANDSINTOWN WIDGET - MOBILE LAYOUT
   ========================================== */

/* Remove forced horizontal layout on mobile */
@media only screen and (max-width: 880px) {
    .bit-widget .bit-event {
        display: block !important;
        flex-direction: column !important;
        padding: 20px 15px !important;
    }
    
    .bit-widget .bit-event-date {
        flex: none !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .bit-widget .bit-event-venue,
    .bit-widget .bit-event-location {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }
    
    .bit-widget .bit-event-buttons {
        flex: none !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 15px !important;
    }
    
    .bit-widget .bit-event-buttons button,
    .bit-widget .bit-event-buttons a {
        width: 100% !important;
        display: block !important;
    }
    
    .bit-widget .bit-event-social-share {
        margin-top: 10px !important;
        text-align: center !important;
    }
}

@media only screen and (max-width: 640px) {
    .bandsintown-widget {
        padding: 20px 10px !important;
        margin: 40px auto !important;
    }
    
    .bit-widget .bit-event {
        padding: 15px 10px !important;
        margin-bottom: 15px !important;
    }
    
    .bit-widget .bit-event-date,
    .bit-widget .bit-event-venue,
    .bit-widget .bit-event-location {
        font-size: 13px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
    
    .bit-widget .bit-event-buttons button,
    .bit-widget .bit-event-buttons a {
        font-size: 14px !important;
        padding: 12px 15px !important;
    }
    
    .bit-widget .bit-event-social-share svg,
    .bit-widget .bit-event-social-share i {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ==========================================
   FIX 5: ADDITIONAL MOBILE OPTIMIZATIONS
   ========================================== */

@media only screen and (max-width: 640px) {
    /* Ensure proper viewport sizing */
    .homeSlide {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Make sure hero backgrounds don't get cut off */
    .hero-bg,
    .hero-fullscreen {
        width: 100% !important;
        height: 100% !important;
    }
}
/* ==========================================
   GOOGLE FORM STYLING
   ========================================== */

.google-form-wrapper {
    max-width: 900px;
    margin: 60px auto 40px auto;
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

.google-form-wrapper iframe {
    width: 100%;
    min-height: 1400px;
    border: none;
    background: transparent;
}

@media only screen and (max-width: 880px) {
    .google-form-wrapper {
        padding: 20px;
        margin: 40px auto 30px auto;
    }
    
    .google-form-wrapper iframe {
        min-height: 1500px;
    }
}

@media only screen and (max-width: 640px) {
    .google-form-wrapper {
        padding: 15px;
        margin: 30px auto 20px auto;
        border-radius: 4px;
    }
    
    .google-form-wrapper iframe {
        min-height: 1600px;
    }
}
/* Hide Google Forms branding footer */
.google-form-wrapper iframe {
    margin-bottom: -50px; /* Cuts off the bottom footer */
}

/* Alternative: Overlay white box over footer */
.google-form-wrapper {
    position: relative;
    overflow: hidden;
}

.google-form-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #fafafa; /* Match your page background */
    pointer-events: none;
}