@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  --st-font-green-color-hex: #2C4023;
  --st-background-primary-hex: #D3CCB3;
  --st-background-primary-hover-hex: #afa993;
  --st-background-secondary-hex: #FFFEF2;
}

html, body {
  height: 100%;
  width: 100%;
  background-color: var(--st-background-primary-hex);
}

#home {
  background: url("images/safari_road.5ea17d301ad0.JPG") no-repeat center center fixed;
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  background-size: cover;
}

#break {
  background: url("images/zebras.45682b3d20e0.JPG") no-repeat center center;
  display: table;
  height: 400px;
  position: relative;
  width: 100%;
  background-size: cover;
}

.asteriskField {
    display: none;
}

.textarea.form-control {
  height: 100px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Figtree', serif !important;
  color: var(--st-font-green-color-hex);
}

p, div, li, a {
  font-family: 'Figtree', sans-serif !important;
  color: var(--st-font-green-color-hex);
}

a.navbar-brand {
  font-family: 'Figtree', serif !important;
  color: var(--st-font-green-color-hex);
}

nav-img {
  max-width: 10% !important;
}

.card-img {
  object-fit: cover;
  width: 100%;
  height: 300px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*.navbar-scrolled {
    background-color: rgba(255, 255, 255);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}*/

.navbar {
  font-family: 'Figtree', serif;
  transition: all 0.5s;
  background-color: var(--st-background-primary-hex);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.footer {
  background-color: var(--st-background-primary-hover-hex);
}

.card {
  background: var(--st-background-secondary-hex)
}

.btn-primary {
  --bs-btn-color: var(--st-font-green-color-hex);
  --bs-btn-bg: var(--st-background-primary-hex);
  --bs-btn-border-color: var(--st-background-primary-hex);
  --bs-btn-hover-color: var(--st-font-green-color-hex);
  --bs-btn-hover-bg: var(--st-background-primary-hover-hex);
  --bs-btn-hover-border-color: var(--st-font-green-color-hex);
  --bs-btn-focus-shadow-rgb: black;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--st-background-primary-hover-hex);
  --bs-btn-active-border-color: black;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.btn-secondary {
  --bs-btn-color: var(--st-font-green-color-hex);
  --bs-btn-bg: rgba(0, 0, 0, 0.23);
  --bs-btn-border-color: var(--st-background-primary-hover-hex);
  --bs-btn-hover-color: var(--st-font-green-color-hex);
  --bs-btn-hover-bg: var(--st-background-primary-hover-hex);
  --bs-btn-hover-border-color: var(--st-font-green-color-hex);
  --bs-btn-focus-shadow-rgb: black;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--st-background-primary-hover-hex);
  --bs-btn-active-border-color: black;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.card-title {
  color: var(--st-font-green-color-hex)
}


/* Transform only the <i> arrow when hovering the parent .service-link.
   This avoids affecting other links and ensures consistent behavior. */
.service-link .moveX i,
.service-link i.bi-arrow-right {
  font-size: 1.5em; /* consistent icon size */
  display: inline-block; /* so transform applies smoothly */
  transition: transform .4s;
  transform-origin: center;
}

/* Also trigger the same icon movement when hovering the whole service column */
.service-col:hover .service-link .moveX i,
.service-col:hover .service-link i.bi-arrow-right {
  transform: translateX(5px);
}

.align-content-center {
  align-content: center;
}