/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* Reset some default styles */
html,
body {
  margin: 0;
  padding: 0;
}

/* Set default font and smooth scrolling */
html {
  font-family: "Montserrat", sans-serif;
  scroll-behavior: smooth;
  overflow-y: auto;
  scroll-snap-type: y optional;
}

/* General styles for body */
body {
  background-color: #fefef2;
  color: #62605e;
  font-weight: 300;
}

/* Utility classes */
.d-none {
  display: none;
}

.d-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-center {
  text-align: center;
}

.upparcase {
  text-transform: uppercase;
}

.light-gray {
  color: #aaa;
}

li {
  list-style: none;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: #62605e;
  line-height: 25px;
}

/* Heading style */
h4 {
  font-size: 24px;
  font-weight: 400;
  padding: 20px;
}

.italic {
  font-style: italic;
}

/* Animations */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Animations */
@keyframes fade {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fade 3s ease-in-out forwards;
}

.loader-wrapper.d-none {
  display: none;
}

.loader {
  color: #63625e;
  text-align: center;
}

.loader h1 {
  font-size: 40px;
  letter-spacing: 20px;
}

.loader h5,
.home-section h5 {
  text-align: center;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 18px;
}

.home-section h5 {
  margin-left: 16px;
}

header,
footer {
  background-color: #fefef2;
  width: 100%;
  z-index: 11;
  box-shadow: 0px 0px 0px 1px #f4f4f4;
  padding: 0px;
  margin: 0px;
}

header {
  right: 0;
  z-index: 16;
  position: absolute;
  -webkit-transition: all 2s;
  transition: all 2s;
  top: -100px;
}

header.show {
  top: 0;
  position: fixed;
}

footer {
  height: 20vh;
}

footer a {
  display: contents;
  font-size: 13px;
}

footer .left-section {
  padding: 0px;
}

footer .right-section {
  align-items: self-end;
}

footer .right-section ul {
  float: right;
}

footer .right-section ul li {
  display: inline-block;
}

footer .right-section,
footer .left-section {
  display: block;
  padding: 0 48px;
}

.media {
  width: 40px;
  height: 40px;
  display: inline-block;
  background-image: url(../assets/images/social-media.png);
  background-repeat: no-repeat;
  background-position-y: -4px;
  background-position-x: -10px;
  margin: 0 5px;
}

.media:hover {
  background-position-y: -48px;
}

.instagram {
  background-position-x: -69px;
}

.twitter {
  background-position-x: -128px;
}

.youtube {
  background-position-x: -187px;
}

header nav {
  float: right;
}

.navbar-list {
  padding: 10px 20px;
  gap: 10px;
}

.navbar-list a {
  font-size: 12px;
}

.navbar-list a.active,
.navbar-list a:hover {
  color: #000000;
  font-weight: 600;
}

/* Styles for the 'what-we-do' section */
.what-we-do-section,
.what-we-do-main,
.lets-talk-section {
  /* animation: fadeIn 6s ease-in-out forwards; */
}

/* Center content in sections */
.what-we-do-section section {
  min-height: calc(100vh - 77px);
  text-align: center;
}

.what-we-do-main section {
  height: 100vh;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.what-we-do-main section h4 {
  padding-right: 40px;
}

.what-we-do-main section img {
  width: 160px;
}

/* Styles for list items in the 'what-we-do' section */
.what-we-do-section ul li {
  display: block;
  padding: 5px;
  text-align: left;
  font-style: italic;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

/* Hover effect for list items */
.what-we-do-section ul li:hover {
  transform: scale(1.01);
}

/* Styles for sub-sections */
.what-we-do-section .sub-section {
  /* opacity: 0; */
  /* transition: opacity 2s ease-in-out; */
}

#about .sub-section {
  opacity: 0;
}

/* Fade-in effect for sub-sections */
.what-we-do-section .sub-section.fade-in,
#about .sub-section.fade-in,
#lets-talk .sub-section.fade-in {
  opacity: 1;
}

/* Image styles */
.what-we-do-section .sub-section img {
  width: 100%;
}

/* Styles for text in sub-sections */
.what-we-do-section .sub-section .details {
  padding: 40px;
}

.what-we-do-section .sub-section .details p,
.what-we-do-section .sub-section .details h4 {
  display: inline-block;
  width: 40%;
  margin: 0px;
  vertical-align: middle;
  padding: 10px;
  white-space: pre-line;
}

.what-we-do-section .sub-section .details p {
  text-align: left;
  color: #323231;
  font-style: italic;
  margin-right: 10vw;
}

.what-we-do-section .sub-section .details h4 {
  text-align: right;
  font-size: 30px;
}

/* Other sections and styles can be added as needed */
#about-section,
.show-info {
  height: 100vh;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

#about-section > * {
  width: 30%;
  position: relative;
  scale: 0.5;
  opacity: 0;
}

#about-section:nth-child(1) {
  text-align: right;
}

#about-section .middle-section {
  width: 20%;
  padding: 0 40px 0 20px;
}

.horizontal-bar {
  padding: 0;
}

.horizontal-bar li {
  margin-right: 40px;
  color: white;
  opacity: 1;
  width: 280px;
  height: 25px;
  margin: 0;
  margin-bottom: 20px;
  position: relative;
  top: 0;
  line-height: 2em;
  overflow: hidden;
}

.vertical-bar {
  padding: 0;
}

.vertical-bar li {
  display: inline-block;
  margin-right: 13px;
  margin-left: 13px;
  height: 35vh;
}

.horizontal-bar li .work-img,
.horizontal-bar li span,
.vertical-bar li a {
  padding: 0 2px 0 6px;
  background-image: url(../assets/images/home/layer_1.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  display: block;
  font-weight: 600;
}
layer-1.work-img {
  background-image: url(../assets/images/home/layer_1.png);
}

.layer-2 .work-img {
  background-image: url(../assets/images/home/layer_2.png);
}

.layer-3 .work-img {
  background-image: url(../assets/images/home/layer_3.png);
}

.layer-4 .work-img {
  background-image: url(../assets/images/home/layer_4.png);
}

.layer-5 .work-img {
  background-image: url(../assets/images/home/layer_5.png);
}

.layer-6 .work-img {
  background-image: url(../assets/images/home/layer_6.png);
}

.layer-7 .work-img {
  background-image: url(../assets/images/home/layer_7.png);
}

.layer-8 .work-img {
  background-image: url(../assets/images/home/layer_8.png);
}

.layer-9 .work-img {
  background-image: url(../assets/images/home/layer_9.png);
}

.layer-10 .work-img {
  background-image: url(../assets/images/home/layer_10.png);
}

.layer-11 .work-img {
  background-image: url(../assets/images/home/layer_11.png);
}

.home-section .vertical-bar li::before,
.home-section .vertical-bar li::after {
  content: "";
  height: 10vh;
  background-color: #fefef2;
  position: absolute;
  transition: all 2s ease-in;
  z-index: 11;
  bottom: 0;
  width: 40px;
}

.layer-1:before,
.layer-1::after {
  height: 3vh !important;
}

.layer-2:before,
.layer-2::after {
  height: 5vh !important;
}
.layer-3:before,
.layer-3::after {
  height: 2vh !important;
}
.layer-4:before,
.layer-4::after {
  height: 4vh !important;
}
.layer-5:before,
.layer-5::after {
  height: 0 !important;
}
.layer-6:before,
.layer-6::after {
  height: 7vh !important;
}
.layer-7:before,
.layer-7::after {
  height: 7vh !important;
}
.layer-8:before,
.layer-8::after {
  height: 2vh !important;
}
.layer-9:before,
.layer-9::after {
  height: 10vh !important;
}
.layer-10:before,
.layer-10::after {
  height: 5vh !important;
}
.layer-11:before,
.layer-11::after {
  height: 3vh !important;
}

.horizontal-bar .bar-image {
  height: 30px;
  width: 100%;
}

.vertical-bar li a {
  display: flex;
  color: #fff;
  align-items: center;
}

.home-section {
  display: flex;
  position: relative;
  flex-direction: column;
}

.home-section .vertical-bar li::before {
  top: 0;
}

.home-section .fly-in-text.vertical-bar li:hover::before,
.home-section .fly-in-text.vertical-bar li:hover::after {
  height: 0;
}

.horizontal-bar li::before,
.horizontal-bar li::after {
  content: "";
  height: 40px;
  background-color: #fefef2;
  position: absolute;
  transition: all 1s ease-in;
}

.horizontal-bar li::before {
  left: -1px;
  top: -1px;
}

.horizontal-bar li::after {
  top: -1px;
  right: -1px;
}

.horizontal-bar li:nth-child(1) span {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222641/iStockStreetScene.jpg");
}

.horizontal-bar li:nth-child(2) span,
.bg2 {
  background-image: url("../assets/images/work/bellacasa-prod2.jpg") !important;
}

.horizontal-bar li:nth-child(3) span,
.bg3 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222641/BusScene.jpg") !important;
}

.horizontal-bar li:nth-child(4) span,
.bg4 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222641/sun-trees.jpg") !important;
}

.horizontal-bar li span:hover {
  transform: scale(1.07);
}

.horizontal-bar li:hover:before,
.horizontal-bar li:hover:after {
  width: 0 !important;
}

.about-image img {
  max-width: 100%;
}

.back-link {
  position: fixed;
  bottom: 24px;
  right: 36px;
}

.show-info {
  grid-template-columns: 20% 35% auto;
  padding: 24px;
}

.show-info h4,
.show-info blockquote {
  animation: fadeIn 6s ease-in-out forwards;
}

.show-info img,
.horizontal-bar li span,
.slidex .text-item,
.bg-img {
  transition: all 2s ease;
}

.bar-image.hidden,
.show-info.hidden img {
  animation: fadeIn 6s ease-in-out forwards;
}

.slider-content {
  position: relative;
}

/* .slidex {
  position: absolute;
  right: 20%;
} */

.slidex .slide-text {
  text-align: right;
}

/* .stop-scrolling {
  height: 100vh;
  overflow: hidden;
}

.scrolling {
  overflow-y: auto;
  height: 100vh;
} */

#slide-show {
  height: calc(100vh - 200px);
  padding: 100px 0px;
  overflow: hidden;
  display: flex;
  animation: fadeIn 6s ease-in-out forwards;
}

#works,
#about,
#home,
#services,
#lets-talk {
  min-height: calc(100vh - 77px);
  position: relative;
}

.right-section,
.left-section {
  align-self: center;
  width: 50%;
}

.slide-text {
  font-size: 16px;
  text-align: center;
  font-weight: 200;
  text-align: end;
}

.about-wrap .text {
  font-size: 16px;
  text-align: left !important;
  line-height: 24px;
  font-weight: 200;
  letter-spacing: 0.5px;
  word-spacing: 1px;
}

.slidex .text-item,
.bg-img {
  opacity: 0;
}

.active {
  opacity: 1 !important;
}

.slideshow-nav {
  padding: 200px 50px 0 50px;
}


.bg1,
.bg2,
.bg3,
.bg4 {
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center top !important;
  background-size: cover !important;
  /* background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/222641/iStockStreetScene.jpg"); */
  overflow: hidden;
  height: 74vh;
  width: calc(50vw - 20px);
}


.nav-link {
  color: #0c0b0b;
  font-size: 40px;
}

.previousx {
  float: left;
}

.nextx {
  float: right;
}

.fly-in-text li {
  animation: fadeIn 6s ease-in-out forwards;
}

.fly-in-text.show li {
  transform: translateY(0) !important;
  opacity: 1;
}

.fly-in-text li:nth-child(1) {
  transform: translateY(-200px);
}

.fly-in-text li:nth-child(2) {
  transform: translateY(100px);
}

.fly-in-text li:nth-child(3) {
  transform: translateY(-180px);
}

.fly-in-text li:nth-child(4) {
  transform: translateY(-200px);
}

.fly-in-text li:nth-child(5) {
  transform: translateY(200px);
}

.fly-in-text li:nth-child(6) {
  transform: translateY(-120px);
}

.fly-in-text li:nth-child(7) {
  transform: translateY(200px);
}

.fly-in-text li:nth-child(8) {
  transform: translateY(-200px);
}

.fly-in-text li:nth-child(9) {
  transform: translateY(30px);
}

.fly-in-text li:nth-child(10) {
  transform: translateY(160px);
}

.fly-in-text li:nth-child(11) {
  transform: translateY(-300px);
}

.fly-in-text.horizontal-bar li {
  transform: translateY(0);
}

.fly-in-text.vertical-bar li {
  -webkit-transition: all 2s;
  transition: all 2s;
}

.fly-in-text li:hover {
  cursor: pointer;
  -webkit-transition: all 2s;
  transition: all 2s;
}

.home-section {
  height: 94vh;
  padding: 30px;
  animation: fadeIn 2s ease-in-out forwards;
}

/* slider  */

.slider-container {
  /* Use 100% to fill the device width */
  overflow: hidden;
}

#dynamicSlider1,
#search-dynamicSlider1 {
  animation: slide1 20s linear infinite alternate;
  /* Use 'alternate' to reverse the animation */
}

#dynamicSlider2,
#search-dynamicSlider2 {
  animation: slide2 20s linear infinite alternate;
  /* Use 'alternate' to reverse the animation */
}

#dynamicSlider1,
#dynamicSlider2,
#search-dynamicSlider1,
#search-dynamicSlider2 {
  white-space: nowrap;
}

.slide {
  display: inline-block;
}

.slide img {
  height: 12.7vw;
}

@keyframes slide1 {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-25%);
  }

  50% {
    transform: translateX(-50%);
  }

  75% {
    transform: translateX(-75%);
  }

  100% {
    transform: translateX(-100%);
    /* Reverses the animation */
  }
}

@keyframes slide2 {
  0% {
    transform: translateX(-100%);
  }

  25% {
    transform: translateX(-75%);
  }

  50% {
    transform: translateX(-50%);
  }

  75% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(0);
  }
}

/* About section */
#about .horizontal-bar li {
  width: 100%;
  max-width: 330px;
}

.sub-heading {
  opacity: 0;
  -webkit-transition: opacity 5s ease-in-out;
  transition: opacity 5s ease-in-out;
}

.sub-heading.show {
  opacity: 1;
}

#about section {
  scroll-snap-align: start;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#about .sub-section > * {
  width: 40%;
}

#about .sub-section h4 {
  width: 15% !important;
  text-align: right;
}

#about .sub-section .about-image {
  width: 30%;
  padding: 0 40px 0 20px;
}

#about .sub-section .info-text {
  letter-spacing: 0.5px;
  word-spacing: 1px;
}

#about .horizontal-bar li:nth-child(1):before,
#about .horizontal-bar li:nth-child(1)::after {
  width: 13%;
}
#about .horizontal-bar li:nth-child(2):before,
#about .horizontal-bar li:nth-child(2)::after {
  width: 20%;
}
#about .horizontal-bar li:nth-child(3):before,
#about .horizontal-bar li:nth-child(3)::after {
  width: 10%;
}
#about .horizontal-bar li:nth-child(4)::after,
#about .horizontal-bar li:nth-child(4):before {
  width: 17%;
}
#about .horizontal-bar li:nth-child(5):before,
#about .horizontal-bar li:nth-child(5)::after {
  width: 0;
}
#about .horizontal-bar li:nth-child(6):before,
#about .horizontal-bar li:nth-child(6)::after {
  width: 20%;
}

/* work section */
#works {
  padding-top: 80px;
}
#works .horizontal-bar .bar-image {
  height: inherit;
  object-fit: cover;
  object-position: top;
  display: block;
  width: auto;
  margin-left: auto;
  transition: all 2s ease;
}

#works .horizontal-bar .bar-image:hover {
  flex: 1;
}

#works .horizontal-bar li {
  width: 100%;
  max-width: 360px;
  display: flex;
}

.carousel-wraper {
  margin-bottom: 6px;
  display: flex;
  gap: 40px;
}

.carousel-wraper .horizontal-bar {
  flex-direction: column;
  align-items: flex-end;
}

#carousel-view h4 {
  text-align: center;
  padding: 0;
  margin: 0 0 20px;
  text-decoration: auto;
  text-transform: uppercase;
}

#works .left-section {
  padding: 0 30px;
}

.reverse-section.carousel-wraper {
  flex-direction: row-reverse;
}

.reverse-section.carousel-wraper .bar-image {
  margin-left: 0 !important;
  margin-right: auto;
}

.reverse-section.carousel-wraper .horizontal-bar {
  align-items: flex-start;
}

.reverse-section.carousel-wraper .slidex .slide-text {
  text-align: left;
}

.search-section {
  height: calc(100vh - 145px);
}

.search-container {
  margin: 10vh auto;
  text-align: center;
  position: relative;
  width: 40%;
  border-radius: 30px;
  font-size: 18px;
  border: none;
  box-shadow: 0px 0px 0px 2px #f4f4f4;
  background: transparent;
}


.search-container input {
  padding: 15px 30px;
  border-radius: 30px;
  font-size: 18px;
  border: none;
  box-shadow: 0px 0px 0px 0px #fff;
  background: transparent;
  outline: -webkit-focus-ring-color auto 0px;
}

#searchIcon {
  margin-left: 10px;
  cursor: pointer;
  display: inline-block;
  height: 30px;
  width: 30px;
  background: url("./../assets/images/work/search-icon.svg") center center
    no-repeat;
  background-size: cover;
  position: absolute;
  right: 2%;
  top: 10px;
}

#itemList {
  list-style: none;
  padding: 0;
  display: none;
  position: absolute;
  width: 100%;
  position: absolute;
  text-align: left;
  padding: 10px;
  background-color: #fefef2;
  border-radius: 5px;
  z-index: 2;
  box-shadow: #dbdada 0 0 5px 0px;
  height: 29vh;
  overflow-y: scroll;
  text-transform: capitalize;
}

#itemList li {
  padding: 10px;
  margin: 2px;
  font-size: 14px;
}

#itemList li:hover {
  background-color: #dbdada;
}

input,
textarea {
  border-radius: 5px;
  border: none;
  background: transparent;
  box-shadow: #a9a0a0 0 0 1px 1px;
  font-size: 14px;
  padding: 10px;
  width: 100%;
}

#carousel-view {
  height: 100vh;
  padding-top: 90px;
}

.slider figure {
  margin: 0;
}

.slider figcaption {
  margin: 5px 30px 10px;
  display: none;
}

.slider.caption-text figcaption {
  display: block;
}

/* lets-talk section */
.lets-talk-wrap {
  height: 100vh;
}

.lets-talk-wrap .location-link {
  padding-right: 40px;
}

.location-link li a:hover,
.service-links li a:hover {
  font-weight: 500;
  color: #3f3d3c;
}

.lets-talk-wrap h4 {
  padding-left: 40px;
}

#lets-talk {
  scroll-behavior: smooth;
}

.vertical-bar {
  display: flex;
  font-style: italic;
}

.vertical-bar li {
  height: auto;
  display: flex;
  align-items: center;
  position: relative;
  width: 20px;
  height: 250px;
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

.vertical-bar li::before, 
.vertical-bar li::after  {
  content: "";
  background-color: #fefef2;
  position: absolute;
  transition: all 1s ease-in;
  z-index: 20;
  width: 30px;
}

.vertical-bar li::before {
  top: -1px;
  left: -1px;
}

.vertical-bar li::after {
  bottom: -1px;
  right: -1px;
}

.vertical-bar li:nth-child(1):before,
.vertical-bar li:nth-child(1)::after {
  height: 20%;
}
.vertical-bar li:nth-child(2):before,
.vertical-bar li:nth-child(2)::after {
  height: 2%;
}
.vertical-bar li:nth-child(3):before,
.vertical-bar li:nth-child(3)::after {
  height: 20%;
}

.vertical-bar li:hover::before,
.vertical-bar li:hover::after {
  height: 0;
}

.location-wrap {
  max-width: 1200px;
  margin: 20px auto;
  height: 100vh;
  scroll-snap-align: start;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

.location-wrap:nth-child(2),
.location-wrap:nth-child(3) {
  padding: 8% 0;
}

.lets-talk-form {
  width: 100%;
  max-width: 98%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
}

.location-wrap p {
  margin: 40px 0;
}

.location-wrap .bg-image {
  height: 30vh;
  width: 100%;
  overflow: hidden;
}

.form-row {
  display: inline-flex;
  gap: 14px;
  width: 100%;
}

.form-row:not(:last-child) {
  margin-bottom: 30px;
}

.form-row label {
  width: 90px;
  text-align: right;
}

.right-group {
  align-self: end;
}

.right-group label,
.right-group textarea {
  display: block;
  width: 100%;
}

.lets-talk-form label {
  margin: 10px 0;
}