@font-face {
  font-family: "Belizio";
  font-style: normal;
  font-weight: normal;
  src: url("../assets/font/Belizio-Regular.eot");
  src: url("../assets/font/Belizio-Regular.eot") format("embedded-opentype"),
    url("../assets/font/Belizio-Regular.woff2") format("woff2"),
    url("../assets/font/Belizio-Regular.woff") format("woff"),
    url("../assets/font/Belizio-Regular.ttf") format("truetype"),
    url("../assets/font/Belizio-Regular.svg") format("svg");
}
@font-face {
  font-family: "Arquitecta";
  src: url("../assets/font/Arquitecta-Regular.eot");
  src: url("../assets/font/Arquitecta-Regular.eot") format("embedded-opentype"),
    url("../assets/font/Arquitecta-Regular.woff2") format("woff2"),
    url("../assets/font/Arquitecta-Regular.woff") format("woff"),
    url("../assets/font/Arquitecta-Regular.ttf") format("truetype"),
    url("../assets/font/Arquitecta-Regular.svg") format("svg");
}
* {
  box-sizing: border-box;
}
html {
  font-size: 36px;
  line-height: 1.2;
}

body {
  width: 100vw;
  height: 100vh;
  font-size: 36px;
  line-height: 1.2;
  /* font-family: sans-serif; */
  overflow: hidden;
  font-family: "Arquitecta", sans-serif;
}

a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
}

/* a.text {
  padding: 20px 40px;
} */

a:hover,
a:visited,
a:focus {
  text-decoration: none;
  color: #ffffff;
}

#wrapper {
  width: 100vw;
  height: 100vh;
}
.grid-container {
  display: grid;
}

.bg-img {
  background-color: lightgray;
}
.bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.denim-bg {
  background-color: #19769d;
  color: #ffffff;
  overflow: hidden;
}

.charcoal-bg {
  background-color: #4b5353;
  overflow: hidden;
}

.orange-bg {
  background-color: #f76e23;
  overflow: hidden;
}

.white-bg {
  background-color: #edf0f0;
  color: #4b5353;
  overflow: hidden;
}
/* .white-bg a {
  color: #4b5353;
} */

.kiwi-bg {
  background-color: #9ec44b;
  overflow: hidden;
}

.lime-bg {
  background-color: #ffbb49;
  overflow: hidden;
}

.aqua-bg {
  background-color: #5ac8b3;
  overflow: hidden;
}
#left-section .grid-item a {
  font-size: 152px;
  line-height: 1;
}

#left-section,
#right-section {
  text-align: center;
  height: 100%;
  /* padding: 2vw; */
}
#right-section {
  position: relative;
}
#sec-one {
  grid-template-columns: repeat(3, 1fr);
  height: 905px;
}

/* #foodie-img {
  background-image: url("../assets/images/img1.jpg");
} */

#sec-two {
  grid-template-areas:
    "here here travel"
    "making leisure travel"
    "making leisure travel";
  height: 1457px;
  grid-template-columns: 34% 28% 38%;
}

#sec-two #here-sec a {
  font-size: 200px;
  color: #ffffff;
  font-family: "Belizio", sans-serif;
}

#sec-two #here-sec {
  grid-area: here;
  /* width: 1311px; */
  height: 369px;
}

#sec-two #travel-sec {
  grid-area: travel;
  display: grid;
  /* width: 849px; */
  grid-template-rows: 65% 35%;
}

#travel-img {
  height: 953px;
}

#sec-two #making-sec {
  grid-area: making;
  display: grid;
  /* width: 732px; */
  height: 1088px;
  grid-template-rows: 53% 47%;
}

#making-img {
  height: 584px;
}
#sec-two #leisure-sec {
  grid-area: leisure;
  /* width: 579px; */
  height: 1088px;
  display: grid;
  grid-template-rows: 40% 60%;
}

/* #leisure-img {
  background-image: url("../assets/images/img4.jpg");
} */

#sec-three {
  height: 1478px;
  display: grid;
  grid-template-columns: 40% 35% 25%;
}

#sec-three #arts-sec {
  display: grid;
  grid-template-rows: 60% 40%;
}

#arts-img {
  height: 893px;
}

#sec-three #nature-sec {
  display: grid;
  grid-template-rows: 40% 60%;
  /* height: 40vh; */
}

#sec-three #wellness-sec {
  display: grid;
  grid-template-rows: 60% 40%;
}

/* #leisure-ease .main-data {
  color: #4b5353 !important;
} */

#wellness-img {
  height: 893px;
}
#right-section > div {
  background-color: #ffffff;
}

#right-section .main-image {
  width: 100%;
  height: 2360px;
  background: lightgray;
}
#right-section .main-image-pattern {
  width: 100%;
  height: 180px;
  background: lightgray;
}

#right-section .main-data {
  width: 100%;
  padding: 0 10%;
  height: 1300px;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#right-section .main-image img,
#right-section .main-image-pattern img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#right-section .main-title {
  font-size: 1.9rem;
  text-align: center;
  line-height: 1;
}

#right-section .main-copy {
  font-size: 62px;
  margin-bottom: 25px;
  line-height: 1;
}

#right-section .main-listing {
  padding-top: 2%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
}
#right-section .main-listing .carousel-data-div {
  padding: 2%;
  width:33.33%;
}
#right-section .main-listing .carousel-data-div:first-child:nth-last-child(4), #right-section .main-listing .carousel-data-div:first-child:nth-last-child(4) ~ div,#right-section .main-listing .carousel-data-div:first-child:nth-last-child(3), #right-section .main-listing .carousel-data-div:first-child:nth-last-child(3) ~ div,#right-section .main-listing .carousel-data-div:first-child:nth-last-child(2), #right-section .main-listing .carousel-data-div:first-child:nth-last-child(2) ~ div,#right-section .main-listing .carousel-data-div:first-child:nth-last-child(1) {
  width: 40% !important;
  padding: 2% 5%;
}
#right-section .main-listing .main-listing-title {
  font-size: 38px;
  margin-bottom: 0.3rem;
  line-height: 1;
}

#right-section .main-listing .main-listing-copy {
  font-size: 28px;
  margin: 0;
  line-height: 1;
}


#right-section .left-arrow {
  position: absolute;
  left: 5%;
  font-size: 2rem;
  appearance: none;
  top: 85%;
  border: none;
  background: none;
  color: #ffffff;
  width: auto;
  height: auto;
  z-index: 9;
}
#right-section .right-arrow {
  position: absolute;
  right: 5%;
  font-size: 2rem;
  appearance: none;
  top: 85%;
  border: none;
  background: none;
  color: #ffffff;
  width: auto;
  height: auto;
  z-index: 9;
}
#right-section .arrow {
  border: solid #ffffff;
  border-width: 0 10px 10px 0;
  display: inline-block;
  padding: 39px;
}

#right-section .right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

#right-section .left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

@media only screen and (min-width: 2160px) {
  html {
    font-size: 100px;
  }

  body {
    font-size: 100px;
    line-height: 1.2;
  }
}