:root {
    --theme-color: purple;
}

* {
padding: 0;
margin: 0;
}

html,
body {
height: 100%;
width: 100%;
}


nav.navbar {
margin-top: 30px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

#home {
background: url(../images/16.jpg) no-repeat center center fixed;
display: table;
padding-top: 80px;
display: flex;
align-items: center;
min-height: 500px;
position: relative;
width: 100%;
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

@supports ( -webkit-touch-callout : none) {
#home, .spacer, #numbers {
    background-attachment:scroll;
    /*background: url(../images/16.jpg) center top no-repeat scroll; */
}

.spacer {
   background-attachment:scroll;
  background position:left top;
}

}

.spacer {
background: url(../img/8.jpg) no-repeat center center fixed;
display: table;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#numbers {
background: url(../img/20.jpg) no-repeat center center fixed;
display: table;
position: relative;
padding: 40px 0;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.neonText {
animation: flicker 2s infinite alternate;
color: #fff;
font-size: 4rem;
z-index: 9;
/* transform: rotate(-5deg); */
}

@media (max-width: 496px) {
.neonText {
  font-size: 2.8rem;
}

.short-about {
     width: 70%;
}
}

@media (min-width: 497px) {
#home {
  height: 100%;
}

.short-about {
     width: 50%;
}
}

/* Flickering animation */
@keyframes flicker {
0%,
18%,
22%,
25%,
53%,
57%,
100% {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 5px purple,
    0 0 20px purple, 0 0 30px purple, 0 0 50px purple;
}

/* #0fa */

20%,
24%,
55% {
  text-shadow: none;
}
}

#image-container {
background-image: url(../img/maciej.png);
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
right: 0;
left: 0;
    background-size: cover;
background-position: bottom;
bottom: 0;
}

@media (min-width: 2300px) {
#image-container {
  background-position: 70% 0;
}
}

#home>.container {
z-index: 9;
}

.short-about {
color: #fff;
background-color: rgba(0,0,0,0.6);
padding: 1rem;
text-align: justify;
margin: 20px 0;
}

.btn {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
padding: 15px 30px !important;
letter-spacing: 3px;
border-radius: 0 !important;
touch-action: manipulation;
}

#reserve-btn, .theme-btn {
box-shadow: inset 0 0 0 0 pink;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
margin-bottom: 30px;
}
#reserve-btn:hover, .theme-btn:hover {
box-shadow: inset 300px 0 0 0 #ff11cb;
}

.theme-btn {
background-color: var(--theme-color);
color: #fff
}


@media (max-width: 768px){
.navbar-collapse {
background: #813095;
text-align: center;
}
}

a.nav-link {
color: #fff;
}

#about {
padding:
  60px 0;
}

.flex {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-evenly;
align-content: center;
}

#numbers .flex>div {
text-align: center;
color: #fff;
font-size: 2.5rem;
}

@media (max-width: 992px) {
.flex>div {
  max-width: 100% !important;
  flex: 0 0 100%;
  padding: 20px 0;
  margin-bottom: 10px;
}
}


.center-flex-content {
display: flex;
align-items: center;
height: 100%;
justify-content: center;
font-weight: bold;
padding: 15px;
}

.section-title {
text-align: center;
text-transform: uppercase;
font-weight: bold;
margin: 20px 0;
padding: 50px;
}

.spacer {
height: 400px;
display: block;
background-color: aliceblue;
}

.subtitle {
font-style: italic;
}

section#contact footer {
font-weight: bold;
text-align: center;
font-size: 2.0rem;
padding: 1rem 0;
}

#img-about {
clip-path: rect(10px, 20px, 30px, 40px);
max-width: 100%;
height: 500px;
object-fit: cover;
object-position: center inherit;

}
#numbers div {
font-size: 1.5rem;
}

nav.navbar {
transition: all .5s;
}

.header_bar {
background: rgba(36, 36, 36, 0.7) !important;
margin-top: 0px !important;
}

.custom-counter {
display: block;
font-size: 3rem;
}

.navbar-expand-md .navbar-collapse {
    justify-content: space-between;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


.e-2 .form-floating, .e-3 .form-floating {
  margin: 4px; 
}

@media (max-width: 991px) {
  #contact-form .form-input-wrapper {
    width: 100%;
  } 

  #contact-form .col-md-12{
    width: 100%;
  }
}

#message {
  height: 200px;
}

#send-msg-btn {
  margin-top: 8px;
  min-width: 300px;
}

.offert-option {
  padding: 0;
  border: solid 1px purple;
}

.offert-option>img {
  width: 100%;
  object-fit: cover;
  max-height: 250px;
}

.offert-option>footer {
  text-align: center;
}

ul {
  list-style: square;
}

.offert-option>header, .offert-option>.content {
  margin: 8px 20px;
}

.offert-option>header {
  display: flex;
  justify-content: space-between;
}

.offert-option>header>.price {
  font-weight: bold;
  color: purple;
  font-size: 1.2rem;
}

footer>.all-rights {
  font-weight: normal;
  font-size: 1rem;
  margin: 1.5rem auto;
  text-align: center;
}

body>footer {
  padding: 2rem 0;
}

.panel-social-links {
  display: flex;
}

.panel-social-links>a {
  margin-left: 10px;
  color: #fff;
  transition: all .5s;
}

.panel-social-links>a:not(:first-child):hover {
  transform: scale(1.4);
}

.panel-social-links>a:hover {
  color: purple;
}

footer>.social-links {
  text-align: center;
  color: purple;
  font-size: 1.8rem;
  transition: all .5s;
}

footer>.social-links>a {
  color: purple;
}

footer>.social-links>a:hover {
  transform: scale(2.2);
  color: palevioletred;
}

#recaptcha-error {
  color: red;
  background-color: rgb(230, 164, 164);
  border: red solid 1px;
  display: none;
  padding: 5px;
  margin: 1rem 0;
  color: #fff;
  border-radius: 8px;
}