/* CSS reset */
*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
} 

html { font-size: 62.5%; }

body {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  position: relative;
}

/* Typography =======================*/

/* Headings */

/* Main heading for card's front cover */
.card-front__heading {
  font-size: 100%; 
  margin-top: .25rem;
}

.card-front__sub-heading{
  font-size: clamp(2rem, 4vw, 4rem);
  text-align: center;
}

/* Main heading for inside page */
.inside-page__heading { 
  padding-bottom: 1rem; 
  width: 100%;
}

/* Mixed */

/* For both inside page's main heading and 'view me' text on card front cover */

.card-front__text-view {
  font-size: 1.3rem;
  font-weight: 800;
  margin-top: .2rem;
}

.inside-page__heading{
  font-size: clamp(4.5rem, 3vw, 4.5rem);
  font-weight: 800;
  color: #000;
  margin-top: 10%;
}


.airplane{
  height: 47%;
  width: 100%;
  margin-top: 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  flex-direction: column;
}

/* Front cover */

.card-front__tp { color: #000; }

/* For pricing text on card front cover */
.card-front__text-price {
  font-size: clamp(1.1rem, 3vw, 3rem);
  margin-top: 1rem;
  text-align: center;
}

/* Back cover */

/* For inside page's body text */
.inside-page__text {
  color: #333;
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 800 !important;
}

.location-text-top{
  font-size: clamp(1.5rem, 3vw, 1rem);
  text-align: center;

}

.location-text-bottom {
  font-size: clamp(1.1rem, 3vw, 1rem);
  text-align: center;
  align-self: flex-end;

}


/* Layout Structure=========================================*/

.main {
  background: linear-gradient(
    to bottom right,
    #c2c1aa, #ebebe7
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* change this */
  align-items: center;         /* add this */
  height: 100vh;
  width: 100vw;
}
/* Container to hold all cards in one place */
.card-area {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-evenly;
  padding: 1rem;
}

/* Card ============================================*/

/* Area to hold an individual card */
.card-section {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%; 
}

/* A container to hold the flip card and the inside page */
.card {
  background-color: rgba(0,0,0, .05);
  box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.5);
  width: min(50vw, 60rem);
  max-width: 60rem;
  height: calc(80vw * 0.914);
  max-height: 50rem;
  position: relative;
  transition: all 1s ease; 
  font-size: clamp(10px, 1.2vw, 16px);
  top: 0;
}



/* Flip card - covering both the front and inside front page */

/* An outer container to hold the flip card. This excludes the inside page */
.flip-card {
  height: 100%;
  perspective: 150rem;
  position: absolute;
  right: 0;
  transition: all 1s ease;
  visibility: hidden;
  width: 100%;
  z-index: 100;
}

/* The outer container's visibility is set to hidden. This is to make everything within the container NOT set to hidden  */
/* This is done so content in the inside page can be selected */
.flip-card > * {
  visibility: visible;
}

/* An inner container to hold the flip card. This excludes the inside page */
.flip-card__container {
  height: 100%;
  position: absolute;
  right: 0;
  transform-origin: top;
  transform-style: preserve-3d;
  transition: all 1s ease;
  width: 100%;
}

.card-front,
.card-back {
  backface-visibility: hidden;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Styling for the front side of the flip card */

/* container for the front side */
.card-front {
  background-color: #fafbfa;
  height: 100%;
  width: 100%;
}

/* Front side's top section */
.card-front__tp {
  align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
  display: flex;
  flex-direction: column;
  height: 80%;
  justify-content: center;
  padding: .75rem;
}

.card-front__tp--city {
  background: linear-gradient(
    to bottom,
    #aab3c2, 
    #a8b1c0
  );
}


.card-front__image{
  width:150%;
  height:150%;
  object-fit:cover;
  object-position: 0px 80%;
}



/* Front card's bottom section */
.card-front__bt {
  align-items: center;
  display: grid;
  justify-content: center;
}

/* Styling for the back side of the flip card */

.card-back {
  background-color: #fafbfa;
  transform: rotateX(-180deg);
}



/* Inside page */
 
.inside-page {
  background-color: #fafbfa;
  box-shadow: inset 0rem 70px 5rem -2.5rem rgba(0,0,0,0.25);
  height: 100%;
  padding: 1rem;
  position: relative;
  right: 0;
  transition: all 1s ease;
  width: 100%;
  z-index: 1;
}

.inside-page__container {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center; 
  width: 100%;
  justify-content: space-evenly;
} 


.card-back__container{
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center; 
  width: 100%;
  padding: 20px;

}

/* Functionality ====================================*/

/* This is to keep the card centered (within its container) when opened */
.card:hover {
  box-shadow:
  1.7rem -0.1rem 6.6rem -3.2rem rgba(0,0,0,0.75);  
  top: 20%;
}



/* When the card is hovered, the flip card container will rotate */
.card:hover .flip-card__container {
  transform: rotateX(180deg);
}

/* When the card is hovered, the shadow on the inside page will shrink to the left */
.card:hover .inside-page {
  box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0,0,0,0.1);
}





/* Footer ====================================*/

.footer {
  background-color: #333;
   margin-top: 3rem;
  padding: 1rem 0;
  width: 100%;
}

.footer-text {
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
}



.cormorant-garamond-regular {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


.allura-regular {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
}


.corinthia-regular {
  font-family: "Corinthia", cursive;
  font-weight: 400;
  font-style: normal;
}








.click-notice {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;

  padding: 14px 10px;
  background: #fff;
  color: #333;

  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.5rem, 2vw, 4.5rem);
  letter-spacing: 1px;

  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;

  transform: translateY(-100%);
  animation: slideDown 1.5s ease 1s forwards;
}

@keyframes slideDown {
  to { transform: translateY(0); }
}