:root {
  --primary-color: #7aa573;
  --secondary-color: #f4f7f4;
}

@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-VariableFont_opsz\,wdth\,wght.ttf");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PTSans";
  src: url("../fonts/PTSans-Regular.ttf");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Merriweather";
}

body {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  font-family: "PTSans", sans-serif;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 120px;
}

.contact-dtls {
  background-color: #fff;
  padding: 5px 25px;
}

@media (max-width: 1200px) {
  .container {
    padding: 0 100px;
  }
}

@media (max-width: 992px) {
  .container {
    padding: 0 80px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal.active .card {
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatObject {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.welcome-photo svg rect {
  animation: floatObject 5s ease-in-out infinite;
  transform-origin: center;
}

.welcome-photo svg path {
  animation: floatObject 3s ease-in-out infinite;
  transform-origin: center;
}

.welcome-photo svg path:nth-child(even) {
  animation-duration: 7s;
  animation-delay: 1s;
}

.welcome-photo svg rect:nth-child(even) {
  animation-duration: 7s;
  animation-delay: 1s;
}

.welcome-photo svg rect[fill="#9AF286"],
.welcome-photo svg rect[fill-opacity="0.2"],
.welcome-photo svg rect[fill-opacity="0.5"] {
  animation: slowSpin 12s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.welcome-photo img {
  transition: transform 0.4s ease-out;
}
.welcome-photo:hover img {
  filter: brightness(1.05);
}