html {
  font-size: 62.5%;
}

body {
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: var(--base-light);
}

body::-webkit-scrollbar-thumb {
  background: var(--base-green);
}

::selection {
  background-color: var(--base-green);
  color: var(--base-light);
}

/* =================== */
/* ==== VARIABLES ====*/
/* =================== */
:root {
  --base-light: #f5f0ec;
  --base-dark: #111;

  --base-green: #1b5b31;
  --base-green-light: #277542;
  --base-green-dark: #1a4e2c;

  --base-yellowish: #dcc1ab;
}

*,
*::before,
*::after,
a:link,
a:visited {
  color: var(--base-dark);
}

h1,
h2,
p,
button,
a:link,
a:visited {
  filter: drop-shadow(0 4px 4px #00000025);
}

/* ==================== */
/* == HELPER CLASSES ==*/
/* ==================== */

.stop-scroll {
  overflow: hidden;
}

.toggling-apperance {
  transition: 0.3s ease;
}

.hidden-custom {
  opacity: 0;
  width: 0;
}

.active-custom {
  width: 15rem;
  opacity: 1;
}

.custom-mini-title {
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: -1%;
  padding-bottom: 1.6rem;
}

.custom-title {
  line-height: 115%;
  font-size: 4.8rem;
  padding-bottom: 3.2rem;
}

.custom-text {
  line-height: 150%;
  font-size: 1.6rem;
  letter-spacing: -1%;
}

/* ANIMATIONS */
@keyframes slide-from-left {
  0% {
    transform: translateX(-10rem);
    opacity: 0;
  }

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

@keyframes slide-from-right {
  0% {
    transform: translateX(10rem);
    opacity: 0;
  }

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

@keyframes slide-from-top {
  0% {
    transform: translateY(-10rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-from-bottom {
  0% {
    transform: translateY(10rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

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

  100% {
    opacity: 1;
  }
}

/* ======================= */
/* ==== LOADER SCREEN ====*/
/* ======================= */

.loading-screen {
  position: fixed;
  z-index: 9999;
  margin-top: -6rem;
  width: 100%;
  height: 100%;
  background-color: var(--base-light);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}

.loader-remove {
  animation: remove-loader 0.8s forwards;
}

.loading-screen img {
  width: 20rem;
}

.loader {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 16px solid;
  border-color: #e4e4ed;
  border-right-color: #1b5b31;
  animation: s2 1s infinite linear;

  position: absolute;
}

@keyframes remove-loader {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes s2 {
  to {
    transform: rotate(1turn);
  }
}

/* ==================== */
/* ==== NAVIGATION ====*/
/* ==================== */
nav.navbar {
  padding: 2.4rem 0;
  background-color: #fff;

  opacity: 0;
  transform: translateY(10rem);
  animation: slide-from-top 1s forwards;
}

.navbar-collapse .navbar-nav {
  gap: 3rem;
}

.navbar-collapse .navbar-nav .nav-item {
  align-items: center;
  font-size: 1.6rem;
}

.navbar-collapse .navbar-nav .nav-item img {
  width: 1.8rem;
}

#search-icon-toggler {
  cursor: pointer;
}

#search-bar {
  background: none;
  outline: none;
  border: none;

  padding: 0.5rem 1rem;

  border: 2px solid var(--base-green);
  border-radius: 5rem;
}

.navbar-collapse .navbar-nav .nav-item a:active {
  color: var(--base-green);
}

.dropdown-menu .dropdown-item {
  font-size: 1.6rem;
  margin: 0.6rem 0;
  padding: 0.5rem 0 0.5rem 0.3rem;
}

.dropdown-menu .dropdown-item:active {
  transition: 0.2s ease;
}

.dropdown-menu .dropdown-item:active {
  background-color: var(--base-green);
}

.dropdown-menu .dropdown-item:active {
  color: var(--base-light) !important;
}

/* =================== */
/* == BANER SECTION ==*/
/* =================== */

.section-header {
  background-color: var(--base-yellowish);
  max-height: 80rem;
  position: relative;
  margin-top: 6rem;
  overflow: hidden;

  opacity: 0;
  animation: appear 1s 0.5s forwards;
}

.section-header__info {
  transform: translateX(-10rem);
  opacity: 0;
  animation: slide-from-left 1s 0.5s forwards;
}

/* TITLE */
.section-header h1 {
  font-size: 6rem;
  line-height: 7rem;
  color: #111;

  margin-bottom: 4.4rem;
}

/* PARAGRAPH UNDER TITLE */
.section-header p {
  font-size: 1.6rem;
  line-height: 150%;
  max-width: 45rem;

  margin-bottom: 7.2rem;
}

/* BUTTONS */
.section-header__btns {
  gap: 3.6rem;

  opacity: 0;
  transform: translate(-10rem);
  animation: slide-from-bottom 0.5s 1.2s forwards;
}

.section-header__btns .btn-custom {
  font-size: 1.6rem;
  padding: 1.2rem 2.4rem;
  border-radius: 20rem;
  transition: 0.3s ease;
  cursor: pointer;
  display: inline-block;

  background: none;
  border: none;
  outline: none;
}

.section-header__btns .btn-custom-selected {
  color: var(--base-light);
  background-color: var(--base-green);
}

.section-header__btns .btn-custom-selected:hover {
  background-color: var(--base-green-light);
  transform: scale(1.02);
  box-shadow: 0 0 6px #1111113d;
}

.section-header__btns .btn-custom-selected:active {
  background-color: var(--base-green-dark);
  transform: scale(1.01);
}

.section-header__btns .btn-custom-secondary {
  display: inline-block;
  color: var(--base-green);
  border: 1px solid var(--base-green);
  background: none;
}

.section-header__btns .btn-custom-secondary span {
  margin-left: 8px;
  color: var(--base-green);
  transition: 0.2s ease;
  display: inline-block;
}

.section-header__btns .btn-custom-secondary:hover {
  background-color: var(--base-green);
  color: #f5f0ec;
}

.section-header__btns .btn-custom-secondary:active {
  background-color: var(--base-green-dark);
  color: #f5f0ec;
}

.section-header__btns .btn-custom-secondary:hover span {
  transform: translateY(5px);
  color: var(--base-light);
}

/* CAROUSEL */
.carousel-container {
  width: 50vw;
  max-width: 50vw;
  margin-right: calc(-51vw + 50%);
  max-height: 80rem;
  overflow: hidden;

  opacity: 0;
  transform: translateX(10rem);
  animation: slide-from-right 1s 1s forwards;
}

.carousel-controls-container {
  position: absolute;
  display: flex;
  bottom: 0;
  right: 0;
  gap: 2rem;
  background-color: #fff;

  opacity: 0;
  transform: translateX(10rem);
  animation: slide-from-right 1s 1.3s forwards;
}

.carousel-container-inner {
  display: none;
}

.carousel-container-outside {
  display: flex;
}

.carousel-control-prev,
.carousel-control-next {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  padding: 2.4rem 1.6rem;
  opacity: 0.5;

  transition: 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}

/* ==================== */
/* == SECTION OFFERS == */
/* ==================== */
.section-offers {
  background-color: var(--base-light);
  padding-top: 12rem;
  padding-bottom: 16rem;

  opacity: 0;
}

.section-offers.scrolled {
  animation: appear 1s forwards;
}

.section-offers .container {
  opacity: 0;
  transform: translateY(10rem);
  animation: slide-from-top 1s 2s forwards;
}

.section-offers .container .row {
  gap: 9.6rem;
}

.section-offers__info-mini_title {
  color: var(--base-green);
}

.cards {
  gap: 6.4rem;
}

.card {
  padding: 4.8rem 4rem;
  filter: drop-shadow(0 4px 4px #00000025);
  border-radius: 2.8rem;
  border: none;
  width: 378px;

  /* transform: translateY(10rem) scale(1);
  opacity: 0; */

  transition: 0.3s ease;
}

/* .cards.scrolled .card:nth-child(1) {
  animation: slide-from-bottom 1s 1s forwards;
}

.cards.scrolled .card:nth-child(2) {
  animation: slide-from-bottom 1s 1.2s forwards;
}
.cards.scrolled .card:nth-child(3) {
  animation: slide-from-bottom 1s 1.4s forwards;
} */

.card:hover {
  transform: translateY(0) scale(1.02);
  filter: drop-shadow(0 4px 4px #0000001e);
}

.card-img {
  width: 4.4rem;
  height: 4.4rem;
  margin-bottom: 3.2rem;
}

.card-title {
  font-size: 2.8rem;
  line-height: 115%;
  letter-spacing: -5%;
  margin-bottom: 1.2rem;
}

.card-text {
  font-size: 1.4rem;
  line-height: 150%;
  letter-spacing: -1%;
  margin-bottom: 5rem;
}

.card-link:link,
.card-link:visited {
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid var(--base-green);
  color: var(--base-green);
  padding-bottom: 0.4rem;
  font-size: 1.6rem;

  transition: 0.3s ease;
}

.card-link span {
  margin-left: 1rem;
  font-size: 2rem;
  transition: 0.3s ease;
}

.card-link:hover span {
  margin-left: 1.8rem;
}

/* =================== */
/* == SECTION ABOUT == */
/* =================== */
.section-about {
  background-color: var(--base-green);
  opacity: 0;
  overflow: hidden;
}

.section-about h2::selection,
.section-about p::selection {
  background-color: var(--base-light);
  color: var(--base-green-dark);
}

.section-about.scrolled {
  animation: appear 1s forwards;
}

.section-about.scrolled .section-about__img {
  opacity: 0;
  transform: translateX(-10rem);

  animation: slide-from-left 1s forwards;
}

.section-about.scrolled .section-about__info {
  opacity: 0;
  transform: translateX(10rem);
  animation: slide-from-right 1s forwards;
}

.section-about.scrolled .section-about__btn {
  display: inline-block;
  opacity: 0;
  transform: translateX(10rem);
  animation: slide-from-right 1s 1s forwards;
}

.section-about,
.section-about .container,
.section-about .container .row,
.section-about .container .row .col,
.section-about .container,
.section-about__img {
  max-height: 80rem;
}

.section-about__info * {
  color: var(--base-light);
}

.section-about__info-text {
  margin-bottom: 7.2rem;
}

.section-about__btn:link,
.section-about__btn:visited {
  font-size: 1.6rem;
  text-decoration: none;
  color: var(--base-light);
  padding: 1.2rem 2.2rem 1.4rem 2.2rem;
  border-radius: 20rem;
  border: 1px solid var(--base-light);

  transition: 0.3s ease;
}

.section-about__btn:hover {
  background-color: var(--base-light);
  color: var(--base-green-dark);
  box-shadow: 0 0 4px #00000025;
}

.section-about__btn span {
  margin-left: 0.8rem;
  transition: 0.2s ease;
}

.section-about__btn:hover span {
  color: var(--base-green-dark);
  margin-left: 1.6rem;
}

.section-about__img {
  width: 50vw;
  max-width: 50vw;
  margin-left: calc(-50vw + 112%);
  height: 100%;
}

.section-about__img img {
  width: 100%;
}

/* ====================== */
/* == SECTION PROJECTS == */
/* ====================== */

.section-projects {
  padding: 12rem 0;
  background-color: var(--base-yellowish);

  position: relative;

  opacity: 0;
  transform: translateY(-10rem);
}

.section-projects.scrolled {
  animation: slide-from-bottom 0.5s forwards;
}

.section-projects__header {
  padding-left: 12rem;
  margin-bottom: 9.6rem;
}

.section-projects__header p {
  font-size: 1.2rem;
  line-height: 150%;
  letter-spacing: -1%;
  color: var(--base-green);
}

.section-projects__header h2 {
  font-size: 4.8rem;
  line-height: 115%;
}

.section-projects__gallery.container-fluid {
  padding: 0;
  margin: 0;
}

.grid-item {
  overflow: hidden;
}

.grid-item img {
  width: 100%;
  height: auto;
  transition: 0.3s ease;
  cursor: pointer;
}

.grid-item img:hover {
  transform: scale(1.1);
}

.section-projects__gallery.gallery-setter::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: linear-gradient(to bottom, #ffffff00, var(--base-yellowish));
  opacity: 1;
}

.section-projects__gallery-btn {
  background: none;
  outline: none;
  border: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10rem;
  z-index: 20;
  display: inline-block;
  padding: 1.2rem 2.2rem 1.4rem 2.2rem;
  font-size: 1.6rem;
  border: 1px solid var(--base-dark);
  border-radius: 20rem;

  transition: 0.3s ease;
}

.section-projects__gallery-btn span {
  transition: 0.2s ease;
  margin-left: 8px;
  color: inherit;
}

.section-projects__gallery-btn:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 0 8px #0000004d;
  background-color: var(--base-light);
  color: var(--base-green);
  border-color: var(--base-light);
}

.section-projects__gallery-btn:active {
  opacity: 0.9;
  transform: translateX(-50%) scale(1.02);
  box-shadow: 0 0 4px #0000002a;
}

.section-projects__gallery.gallery-setter {
  overflow: hidden;
  max-height: 120rem;
  position: relative;

  transition: 0.3s ease;
}

.gallery-active {
  animation: expand 3s forwards;
}

.move-gallery-btn {
  bottom: 5rem;
}

.gallery-hide {
  animation: hide 1s forwards;
}

.section-projects__gallery.gallery-active.gallery-setter::before {
  animation: removeBackground 1s forwards;
}

.section-projects__gallery.gallery-hide.gallery-setter::before {
  animation: addBackground 1s forwards;
}

@keyframes expand {
  0% {
    max-height: 120rem;
  }
  100% {
    max-height: 1000rem;
  }
}

@keyframes hide {
  0% {
    max-height: 1000rem;
  }
  100% {
    max-height: 120rem;
  }
}

@keyframes addBackground {
  0% {
    opacity: 0;
    z-index: 0;
  }

  100% {
    opacity: 1;
    z-index: 10;
  }
}

@keyframes removeBackground {
  0% {
    opacity: 1;
    z-index: 10;
  }

  100% {
    opacity: 0;
    z-index: 0;
  }
}

/* =============== */
/* ==== POPUP ==== */
/* =============== */

.popup-container {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 28;
  margin-top: -6rem;

  display: grid;
  place-items: center;
}

.popup-container .popup {
  z-index: 30;
  object-fit: contain;
  max-height: 80vh;
}

.popup-container .layout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccccccb7;
  z-index: 29;
}

.popup-img-container {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 80vh;
}

.popup-img-container img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 2rem;
}

.gallery-controls {
  position: absolute;
  bottom: 0;
}

.gallery-controls button {
  background: none;
  outline: none;
  border: none;

  font-size: 2rem;
  padding: 1rem 4rem;
  background-color: #fff;
  color: var(--base-dark);
  transition: 0.3s ease;
}

.gallery-controls button.btn-gallery-prev {
  border-top-left-radius: 2rem;
}

.gallery-controls button.btn-gallery-next {
  border-top-right-radius: 2rem;
}

.gallery-controls button:hover {
  background-color: var(--base-yellowish);
}

.gallery-controls button:active {
  background-color: #a79180;
}

.popup-container .popup {
  animation: loadPopup 1s forwards;
}

.popup-layout {
  animation: loadLayout 0.5s forwards;
}

@keyframes loadPopup {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes loadLayout {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* ======================= */
/* == SECTION INSTAGRAM == */
/* ======================= */

.section-instagram {
  margin: 6rem 0;
  opacity: 0;
  transform: translateX(-10rem);
}

.section-instagram h2::selection,
.section-instagram p::selection {
  background-color: var(--base-light);
  color: var(--base-green-dark);
}

.section-instagram.scrolled {
  animation: slide-from-left 1s forwards;
}

.section-instagram .container .row .col-main {
  background-color: var(--base-green);
  padding: 12rem 11rem;
}

.section-instagram__info h2 {
  letter-spacing: -2px;
  font-size: 4rem;
}

.section-instagram__info h2,
.section-instagram__info h2 span {
  line-height: 120%;
  color: var(--base-light);
}

.section-instagram__info h2 span {
  letter-spacing: 1px;
}

.section-instagram__cta p {
  line-height: 150%;
  letter-spacing: -1%;
  font-size: 1.6rem;
  color: var(--base-light);
  margin-bottom: 2.4rem;
}

.section-instagram__cta a:link,
.section-instagram__cta a:visited {
  display: inline-block;
  text-decoration: none;
  background-color: var(--base-light);
  color: var(--base-green);
  padding: 1rem 2.4rem 1.2rem 2.4rem;
  border-radius: 20rem;
  font-size: 1.6rem;

  transition: 0.3s ease;
}

.section-instagram__cta a:hover {
  transform: scale(1.05);
  box-shadow: 0 0 4px #00000025;
}

/* ============ */
/* == FOOTER == */
/* ============ */

.footer {
  background-color: var(--base-dark);
  padding: 8rem 0;

  opacity: 0;
  transform: translateY(-10rem);
}

.footer.scrolled {
  animation: slide-from-bottom 1s forwards;
}

.footer * {
  color: var(--base-light);
  font-size: 1.6rem;
}

.footer-top {
  gap: 6.2rem;
}

.footer-header__cta {
  gap: 2.4rem;
}

.footer-header__cta a:link,
.footer-header__cta a:visited {
  text-decoration: none;
  color: var(--base-light);
  padding: 1.2rem 2.4rem 1.4rem 2.4rem;
  background-color: var(--base-green);
  display: inline-block;
  border-radius: 20rem;

  transition: 0.3s ease;
}

.footer-header__cta a:hover {
  background-color: var(--base-green-light);
  transform: scale(1.02);
}

.footer-header__cta a:active {
  background-color: var(--base-green-dark);
  transform: scale(1.01);
}

.footer-separator {
  background-color: var(--base-light);
  height: 1px;
}

.footer-nav ul {
  gap: 4.8rem;
}

.footer-nav ul li a:link,
.footer-nav ul li a:visited,
.footer-nav__contact a:link,
.footer-nav__contact a:visited {
  color: var(--base-light);
  font-size: 1.6rem;
  padding-bottom: 0.3rem;

  transition: 0.3s ease;
}

.footer-nav ul li a:hover,
.footer-nav__contact a:hover {
  border-bottom: 1px solid var(--base-light);
}

.footer-nav ul li a:active,
.footer-nav__contact a:active {
  color: #f5f0ec96;
  border-color: #f5f0ec96;
}

.footer-nav__contact {
  gap: 4.8rem;
}

.footer-credentials {
  margin-top: 12rem;
}

.footer-credentials__logo {
  gap: 1.6rem;
}

/* 1200px */
@media only screen and (max-width: 75em) {
  .section-about,
  .section-about .container,
  .section-about .container .row,
  .section-about .container .row .col,
  .section-about .container,
  .section-about__img {
    max-height: none;
  }

  .section-about .container .row {
    gap: 10rem !important;
  }

  .section-about__img {
    width: 60vw;
    max-width: 60vw;
    margin-left: auto;
    margin-right: auto;
  }

  .section-about__img img {
    border-radius: 1.6rem;
  }
}

/* 1085px */
@media only screen and (max-width: 67.8125em) {
  .section-header h1 {
    font-size: 5rem;
  }

  .carousel-container {
    width: 55vw;
    max-width: 55vw;
  }
}

/* 992px */
@media only screen and (max-width: 62em) {
  .section-header {
    max-height: none;
  }

  .carousel-container {
    width: 80vw;
    max-width: 80vw;
    margin: 0 auto;

    border-radius: 1.6rem 1.6rem 0 1.6rem;
    overflow: hidden;
  }

  .carousel-container-inner {
    display: flex;
  }

  .carousel-container-outside {
    display: none;
  }

  .carousel-controls-container {
    right: 0px;
  }

  .section-instagram .container .row {
    gap: 8rem;
  }

  .footer-nav {
    gap: 5rem;
  }

  .footer-nav__contact {
    gap: 0;
  }
}

/* 768px */
@media only screen and (max-width: 48em) {
  .section-projects__header {
    padding-left: 0;
  }
}

/* 750px */
@media only screen and (max-width: 46.875em) {
  .section-instagram__info h2 {
    font-size: 3rem;
  }
}

/* 600px */
@media only screen and (max-width: 37.5em) {
  .section-about__img {
    width: 80vw;
    max-width: 80vw;
  }
}

/* 576px */
@media only screen and (max-width: 36em) {
  .section-instagram .container .row .col-main {
    padding: 6rem 2rem;
  }
}

/* 480px */
@media only screen and (max-width: 30em) {
  .section-offers .container .row {
    align-items: start !important;
  }

  .section-offers__info-title {
    font-size: 4rem;
  }

  .section-offers__info-text {
    width: 100%;
  }
}

/* 435px */
@media only screen and (max-width: 27.1875em) {
  .gallery-controls button {
    font-size: 1.6rem;
    padding: 1rem 2.6rem;
  }

  .gallery-controls button img {
    width: 1.6rem;
  }
}

/* 416px */
@media only screen and (max-width: 26em) {
  .section-header h1,
  .section-offers__info-title,
  .section-about__info-title,
  .section-projects__header h2 {
    font-size: 4rem;
    line-height: 5rem;
  }

  .section-header p {
    max-width: 100%;
  }
}