body {
  display: flex;
  flex-direction: column;
}

main {
  margin-top: 98px;
  flex: 1;
}

/* ! Navbar */
.c-navbar {
  height: 98px;
  background-color: var(--navbar-transparent);
  box-shadow: 0 0 0 hsla(0, 0%, 100%, 0);
  z-index: 100;
}

.c-navbar-container {
  display: flex;
  justify-content: space-between;
  gap: calc(1rem * 0.5);
}

.c-nav-li {
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  color: var(--secondary-text);
}

.c-nav-li:hover {
  color: var(--primary-text);
}

.c-nav-li:active {
  color: var(--primary-text);
}

.navbar-nav .nav-link.active.c-nav-li {
  font-weight: bold;
  color: var(--secondary-text);
}

.c-nav-li-btn {
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  color: var(--secondary-text);
}

.nav-link.dropdown-toggle.c-nav-li-btn.show,
.c-nav-li-btn:focus,
.c-nav-li-btn:active {
  color: var(--secondary-text);
}

.c-nav-li-btn:hover {
  color: var(--primary-text);
}

.c-nav-dropdown-li {
  font-size: 1.1rem;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--secondary-text);
}

.c-nav-dropdown-li:active {
  background-color: var(--primary-color-hover);
}

.c-dropdown-menu {
  border: none;
  padding: 0;
  background-color: var(--base-color);
}

.c-contact-btn {
  color: var(--alt-text);
  background-color: var(--primary-color);
  font-weight: 700;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.c-contact-btn:hover {
  color: var(--alt-text);
  background-color: var(--primary-color-hover);
  transform: scale(1.05);
}

.c-contact-btn:active {
  transform: translateY(2px);
}

/* ! Hero */
.c-hero-badge {
  width: max-content;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--alt-text);
  background-color: var(--primary-color);
}

.c-hero-title {
  margin-bottom: 0;
  font-size: clamp(3rem, 4.5vw, 3.5rem);
  font-weight: 800;
}

.c-hero-text {
  margin-bottom: 0;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  text-align: justify;
}

/* ! Images */
.c-img-right {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  /* object-position: 65% 50%; */
  rotate: 1deg;
  transition: transform 0.2s ease-in;
}

.c-img-right:hover {
  transform: scale(1.02) rotate(-1deg);
}

.c-img-left {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  /* object-position: 65% 50%; */
  rotate: -1deg;
  transition: transform 0.2s ease-in;
}

.c-img-left:hover {
  transform: scale(1.02) rotate(1deg);
}

/* ! Sections */
.c-section-badge {
  width: max-content;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--alt-text);
  background-color: var(--primary-color);
}

.c-section-title {
  margin-bottom: 0;
  font-size: 2.5rem;
  font-weight: bold;
}

/* ! Toast */
.c-toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1080;
}

/* ! Footer */
.c-footer {
  background-color: var(--base-alt-color);
}

.c-socials-btn {
  border: none;
  color: var(--secondary-text);
  background-color: transparent;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.c-socials-btn:hover {
  color: var(--primary-text);
  background-color: transparent;
  transform: scale(1.1);
}

.c-socials-btn:active {
  transform: translateY(2px);
}

.c-socials-icons {
  height: 28px;
  width: 28px;
}

.c-copy-name {
  margin: 0;
  font-family: var(--secondary-font-family);
}

/* ! Custom Buttons */
.c-primary-btn {
  color: var(--alt-text);
  background-color: var(--primary-color);
  font-size: 1.25rem;
  font-weight: 700;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.c-primary-btn:hover {
  color: var(--alt-text);
  background-color: var(--primary-color-hover);
  transform: scale(1.05);
}

.c-primary-btn:active {
  transform: translateY(2px);
}

.c-primary-outline-btn {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  background-color: var(--base-color);
  font-size: 1.25rem;
  font-weight: 700;
  transition:
    border 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.c-primary-outline-btn:hover {
  border: 1px solid var(--primary-color);
  color: var(--alt-text);
  background-color: var(--primary-color);
  transform: scale(1.05);
}

.c-primary-outline-btn:active {
  transform: translateY(2px);
}

.c-alt-btn {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  background-color: var(--base-color);
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform 0.25s ease;
}

.c-alt-btn:hover {
  color: var(--primary-color-hover);
  border: 1px solid var(--primary-color-hover);
  background-color: var(--base-color);
  transform: scale(1.05);
}

.c-alt-btn:active {
  transform: translateY(2px);
}

.c-alt-outline-btn {
  color: var(--base-color);
  border: 1px solid var(--base-color);
  background-color: var(--primary-color);
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform 0.25s ease;
}

.c-alt-outline-btn:hover {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  background-color: var(--base-color);
  transform: scale(1.05);
}

.c-alt-outline-btn:active {
  transform: translateY(2px);
}

/* ! Media Queries */
@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
  .c-nav-dropdown-li {
    justify-content: start;
    text-align: start;
  }
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}