html {
  --primary-colour: #ffe5e5;
  --accent-colour: #f6f0ff;
}

.navbar {
  display: flex;
  padding: 2.5vh 10px;
  /* background-color: lightcoral; */
  /* border-bottom: solid 1pt lightgray; */
  justify-content: space-between;
  min-height: 10vh;
  color: black !important;
}

.nav-link {
  color: black !important;
}

.navbar > ul {
  list-style: none;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin: 0px;
}

.navbar > ul > li {
  padding: 0px;
  margin: 10px;
  transition: 0.25s;
}

.nav-item {
  transition: 0.5s;
}

.nav-item:hover {
  transform: translateY(2px);
  transition: 0.25s;
}

.navbar > ul > li:hover {
  transform: translateY(2.5px);
  transition: 0.25s;
}

.logo_div {
  display: flex;
  align-items: center;
}

.logo {
  max-height: 5vh;
}

body {
  font-family: "Urbanist" !important;
}

h1,
h2,
h3,
h4 {
  /* font-family: "Crimson Text" !important; */
  font-family: "Playfair" !important;
  font-weight: 600 !important;
  /* margin-bottom: 0px !important; */
}

.welcome_section {
  max-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-colour);
  background: linear-gradient(
    90deg,
    var(--primary-colour),
    var(--accent-colour)
  );
  overflow: hidden;
}

.welcome_section > img {
  z-index: 0;
  position: absolute;
  min-width: 100vw;
  min-height: 120vh;
  object-fit: cover;
}

.welcome_section::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(90deg, #ffffffa5, #ffffff5a);
}

.welcome_content {
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.welcome_content > img {
  max-height: 10vh;
  width: auto;
  max-width: 80vw;
}

.scroll-up {
  /* position: relative; */
  /* make sure it stays put so we can see it! */

  animation: up 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
}

.scroll-up-fade {
  /* position: relative; */
  /* make sure it stays put so we can see it! */

  animation: fade-scroll 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
}

.appear {
  animation-name: appear;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.slide-up {
  animation-name: slide-up;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 3;
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes up {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(500px);
  }
}

@keyframes fade-scroll {
  0% {
    opacity: 1;
  }

  15% {
    opacity: 0;
  }
}

.logo_banner {
  /* background-color: black; */
  display: flex;
  max-height: 10vh;
  padding: 20px;
}

.logo_banner > img {
  /* height: 100%; */
  display: flex;
  object-fit: contain;
}

#navbar {
  /* background-color: black; */
}

.sticky-top {
  background-color: white;
  /* box-shadow: #7979791f 0px 3px 10px 0px; */
}

.nav_links {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}

.nav_links > li {
  list-style: none;
  text-align: center;
  margin: 5px;
  display: inline-flex;
  /* font-family: "Crimson Text"; */
  font-family: "Playfair" !important;
  font-weight: bold;
  font-size: 14pt;
}

.about_us_section {
  background-color: var(--primary-colour);
  background: linear-gradient(
    90deg,
    var(--primary-colour),
    var(--accent-colour)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn_primary {
  border-radius: 0px !important;
  background-color: black !important;
  /* font-family: "Crimson Text" !important; */
  font-family: "Playfair" !important;
  border-color: black !important;
  text-transform: capitalize;
  transition: 0.5s !important;
}

.btn_primary:hover {
  transform: translateY(3px);
  transition: 0.25s;
}

.btn_outline_primary {
  border-radius: 0px !important;
  background-color: none !important;
  /* font-family: "Crimson Text" !important; */
  font-family: "Playfair" !important;
  border-color: black !important;
  text-transform: capitalize;
  color: black !important;
}

.btn_outline_primary:hover {
  border-radius: 0px !important;
  background-color: black !important;
  /* font-family: "Crimson Text" !important; */
  border-color: black !important;
  text-transform: capitalize;
  color: white !important;
}

.btn_outline_primary:focus {
  box-shadow: none !important;
}

/* .about_us_img{
    height: auto;
    max-width: 100%;
} */

.about_us_img {
  width: 100%;
  height: 50vh;
  background-position-x: 30%;
  background-position-y: 0%;
  background-size: cover;
  background-repeat: no-repeat;
}

.services_img {
  /* max-height: 30vh; */
  /* max-height: 100%; */
  width: 100%;
  height: 50dvh;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.test_imgs > div > img {
  width: 100%;
  min-width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50%;
  min-height: 100%;
}

.test_imgs_1 > img {
  width: 100%;
  min-width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50%;
  max-height: 33.33% !important;
  min-height: 33.33% !important;
}

.big_img > img {
  /* transform: rotate(90deg); */
}

.test_imgs > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.test_imgs {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
  height: 100%;
}

.img_wrap {
  /* max-height: 50vh; */
  width: 100%;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery_cell {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 10px;
  /* max-height: 25vh; */
}

.gallery_cell > img {
  height: 100%;
  width: 25vw;
}

.slider {
  display: flex;
  align-items: center;
  overflow-x: hidden;
}

.price_section {
  border: solid 1pt;
  display: flex;
  width: 100%;
  flex-direction: column;
  border-color: var(--primary-colour);
}

.price_section > ul {
  padding: 0px;
}

.price_section > ul > li {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.our_work_section {
  /* background-color: var(--primary-colour);
        background: linear-gradient(90deg, var(--primary-colour), var(--accent-colour)); */
}

.work_image {
  display: flex;
  padding: 0px;
  margin: 0px;
  /* max-height: 20vh; */
  justify-content: center;
  align-items: center;
  margin: 30px 0px;
}

.work_image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: #a1a1a1 -2px -2px 5px 0px;
}

.carousel-item {
  /* background-color: black; */
  /* height: 400px; */
  color: black !important;
  /* font-family: "Crimson text" !important;; */
  position: relative;
  min-height: 50vh;
}

.carousel_bg {
  position: relative;
  width: 100%;
  height: auto;
  z-index: -1;
}

.inner {
  position: absolute;
  top: 25%;
}

.our_prices {
  background-color: var(--primary-colour);
  background: linear-gradient(
    90deg,
    var(--primary-colour),
    var(--accent-colour)
  );
}

.img_div > img {
  /* object-fit: cover; */
  /* width: 100%; */
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* height: 100%; */
}

.img_div {
  /* min-height: 200px; */
  position: relative;
  width: 100%;
  height: 0;
}

.price {
  /* font-family: "Crimson Text"; */
  font-family: "Playfair" !important;
  font-weight: 600;
}

.price_item > p {
  font-size: 10pt;
  /* margin: 0px !important; */
}

.price_item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.p {
  font-family: "Urbanist" !important;
  font-weight: 500;
  font-size: 10pt;
}

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

.bg {
  background-image: url(./images/in_progress.jpg);
  /* min-height: 80vh; */
  width: 100%;
  display: flex;
  background-size: cover;
  background-position: center;
  background-position-y: 60%;

  z-index: -2;
  position: relative;
  background-repeat: no-repeat;
}

.bg:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(180deg, black, rgba(0, 0, 0, 0.51));
}

.test_card {
  width: 100%;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
}

.contact_card {
  background-color: var(--primary-colour);
  background: linear-gradient(
    90deg,
    var(--primary-colour),
    var(--accent-colour)
  );
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.social_icon > a > img {
  height: 2rem;
}

.footer {
  background-color: black;
}

.before_after_section {
  background-color: var(--primary-colour);
  background: linear-gradient(
    90deg,
    var(--primary-colour),
    var(--accent-colour)
  );
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#before_after_row > * {
  /* font-family: "Crimson Text" !important; */
  font-family: "Playfair" !important;
  /* font-weight: bold; */
}

.item {
  display: flex;
  box-shadow: black -1px -1px 5px;
  margin-bottom: 10px;
}

.comparison_img {
  display: flex;
  height: 100%;
  min-height: 50vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;

  transition: 0.5s;
}

.comparison_img::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(90deg, #000000a5, #0000005a);
  transition: 0.25s;
}

.comparison_img:hover {
  width: 300%;
  transition: 0.25s;
}

.comparison_img:hover::before {
  background: none;
  transition: 0.25s;
}

.box-shadow {
  /* box-shadow: #7a7a7a -1px -1px 5px; */
}

.footer_logo {
  height: 50px;
  max-height: 50px;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: var(--primary-colour);
  background: linear-gradient(
    90deg,
    var(--primary-colour),
    var(--accent-colour)
  );
  border-left: solid 1pt lightgray;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: black;
  transition: 0.25s;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
  transition: 0.25s;
}