:root {
  --main-green: #2e8b57;
  --main-green-shade: #297d4e;
  --light-green: oklch(85.75% 0.07117 158.549);
  --dark-green: #1e5631;
  --color-white: #fff;
}

body {
  font-family: "Rubik", sans-serif;
}

a:focus {
  outline: 2px solid var(--light-green);
}

/*================================
  NAVBAR
=================================*/
.navbar {
  background-color: var(--main-green);
}

.navbar-brand,
.navbar-toggler,
.nav-link {
  color: var(--color-white) !important;
}

.navbar-brand .bi-airplane-engines {
  transform: rotate(25deg);
}

.navbar-toggler {
  border-color: var(--color-white);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.nav-link:hover {
  text-decoration: underline;
}

.nav-link:focus {
  box-shadow: 0 0 0 3px rgba(169, 223, 191, 0.5);
  outline: none;
  border: none;
}

.btm-text {
  color: var(--main-green) !important;
  font-size: 20px;
}

/*================================
  HERO
=================================*/
.hero {
  height: 90vh;
  background-image: linear-gradient(
      to right bottom,
      rgba(30, 86, 49, 0.3),
      rgba(30, 86, 49, 0.9)
    ),
    url(./images/globetrek-hero.jpg);
  background-size: cover;
  background-position: top;
}

.hero h1,
.hero p {
  color: var(--color-white) !important;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.hero p {
  max-width: 600px;
}

.btn-primary {
  background-color: var(--main-green);
  border: none;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus:active,
.btn-primary:focus {
  background-color: var(--main-green-shade);
  outline: none;
}

.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.5);
}

/*================================
  DESTINATIONS
=================================*/
.heading-secondary {
  color: var(--main-green);
  transition: all 0.2s;
}

.heading-secondary:hover {
  transform: scale(1.1) skew(-20deg);
}

/*================================
  TOURS
=================================*/
.accordion-button {
  background-color: var(--light-green) !important;
  color: var(--dark-green);
}

.accordion-button:not(.collapsed) {
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.5);
  color: var(--dark-green);
}

.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.5);
}

.accordion-link {
  color: var(--main-green);
}

/*================================
  CONTACT US
=================================*/
.form-control:focus {
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.5);
}

.footer svg {
  color: var(--main-green);
}