* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

.navbar .nav-link {
  font-size: 14px;
  text-transform: uppercase;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.navbar .nav-item.active {
  border-left: #F0B7CD 3px solid;
}

.carousel-item {
  height: 450px;
}

#gallery-page {
  margin-top: 130px;
}

.bgimage {
  /* height: 100%; 
  width: 100%;  */
  max-width: 100%; 
  max-height: 100%;
  width: 100%;
  /* height: 550px; */
  /* background: url('../img/landing-cover.jpg'); */
  background: url('../img/Kauai Flowers/4 Ceremonies - Best/Flower Cirle at Shipwrecks2.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* background-attachment: fixed; */
  height: 100vh;
}

#welcome-div {
  background-color: rgba(0, 0, 0, .5);
  color: white;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 25px;
}

.bgimage h5 {
  color:#F0B7CD;
  text-align: center;
  margin-top: 45vh;
  padding-top: 10px;
}

.bgimage p {
  text-align: center;
  padding-bottom: 20px;
  /* margin-left: 15%;
  margin-right: 15%; */
}

.carousel-image-1 {
  background: url('../img/Kylie\'s\ Webpage-01.png');
  background-size: cover;
  background-position: center;
}

.carousel-image-2 {
  background: url('../img/Kylie\'s\ Webpage-01.png');
  background-size: cover;
}

.carousel-image-3 {
  background: url('../img/Kylie\'s\ Webpage-01.png');
  background-size: cover;
  background-position: center;
}

#home-heading {
  /*position: relative;*/
  position: static;
  min-height: 300px;
  background: url('../img/Tropical\ Centerpiece.JPG');
  background-attachment: fixed;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
  background-position: center;
  background-size: cover;
}

#home-heading-2 {
  /*position: relative;*/
  position: static;
  min-height: 300px;
  background: url('../img/Kauai Flowers/4 Ceremonies - Best/Flower Cirle at Shipwrecks2.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
  background-position: center;
  background-size: cover;  
  opacity: .95;
  /* margin-bottom: 60px; */
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

#video-play {
  /*position: relative;*/
  position: static;
  min-height: 200px;
  background: url('../img/Kylie\'s\ Webpage-01.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
  /*background-position: 0 -300px;*/
  background-position: center;
  text-align: center;
  color: #fff;
  background-size: cover;
}

#video-play a {
  color: #fff;
}

#page-header {
  margin-top: 110px;
  height: 200px;
  background: url('../img/landing-cover.jpg');
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat; /* just testing for windows browsers */
  color: #fff;
  border-bottom: 1px #eee solid;
  padding-top: 50px;
  background-size: cover;
}

.about-img {
  margin-top: -130px;
}

#faq .card {
  border: #444;
}

#faq a {
  color: #fff;
  text-decoration: none;
}

#faq .card-body,
#faq .card-header {
  background: #F0B7CD;
}

#main-footer {
  background: #F0B7CD;
  color: #fff;
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
/* #map {
  height: 530px;
  width: 100%;
} */

#phone-number {
  text-align: right;
}

.occasions-image {
  max-height: 420px; 
  object-fit: cover; 
  object-position: 50% 50%;
}

.highlights-image {
  height: 190px;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .bgimage h5 {
    margin-top: 35vh;
  }
}

@media (max-width: 600px) {
  .bgimage h5 {
    margin-top: 25vh;
  }

  #home-heading {
    display: none;
  }

  #home-heading-2 {
    display: none;
  }
  
  #phone-social {
    text-align: center;
  }

  #phone-number {
    display: none;
  }

  #page-header {
    margin-top: 50px;
    height: 0;
    width: 0;
  }

  #about {
    text-align: center;
  }
}