/* CSS Variables */
:root {
    --primary-colour: #4753ff;
    --secondary-colour: #FF004F;
    --primary-rgb: 71, 83, 255;
    --secondary-rgb: 255, 0, 79;
    --bs-body-font-family: 'Inter';
    --bs-body-bg: #F0F8FF;
    --bs-primary: var(--primary-colour);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-secondary: var(--secondary-colour);
    --bs-secondary-rgb: var(--secondary-rgb);
    --bs-link-color-rgb: var(--primary-rgb);
    --bs-link-hover-color-rgb: 42, 49, 153;
}
::selection {
  background-color: var(--primary-colour);
  color: #fefefe;
}
/* Bootstrap styling overwrite */
.btn.btn-primary {
  --bs-btn-bg: var(--primary-colour);
  --bs-btn-border-color: var(--primary-colour);
  --bs-btn-hover-bg: var(--bs-body-bg);
  --bs-btn-hover-color: var(--primary-colour);
  --bs-btn-hover-border-color: var(--primary-colour);
  --bs-btn-border-width: 2px;
}
.btn.btn-secondary {
  --bs-btn-bg: var(--secondary-colour);
  --bs-btn-border-color: var(--secondary-colour);
  --bs-btn-border-width: 2px;
  --bs-btn-hover-bg: var(--bs-body-bg);
  --bs-btn-hover-color: var(--secondary-colour);
  --bs-btn-hover-border-color: var(--secondary-colour);
}
.btn.btn-light {
  --bs-btn-bg: none;
  --bs-border-width: 3px;
  --bs-btn-color: #fefefe;
  --bs-btn-border-color: #fefefe;
  --bs-btn-hover-border-color: #fefefe;
  --bs-btn-hover-bg: #fefefe;
}
.btn-lg {
  --bs-btn-border-width: 3px;
}
/* Our own utilities */
.mw-894 {
  max-width: 894px;
}
.mw-600 {
  max-width: 600px;
  margin: 0 auto;
}
.mw-1920 {
  max-width: 1920px;
  margin: 0 auto;
}
/* And now for everything else */
.home-client-logo {
  height: 70px;
  max-width: 100%;
}
.nav-link, .nav-link:hover {
  transition: all 0.5s ease 0s;
}
.nav-link:hover {
  background-color: var(--primary-colour);
  color: white !important;
}
.navbar-toggler {
  margin-top: -10px;
}
.carousel-indicators [data-bs-target] {
  background-color: #808080;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.carousel-indicators .active {
  background-color: var(--primary-colour);
}
.carousel {
  min-height: 400px;
}
.slide-up-animation {
  overflow: hidden;
}
.slide-up-animation span {
  display: none;
}
.slide-up-animation span.show {
  display: inline-block;
  animation: slideUp .5s ease;
}
.slide-up-animation span.show-out {
  animation: slideDown .5s ease;
}
.welcome-heading {
  opacity: 0;
  transition: all 1s ease 0s;
}
.cc-photography-welcome-heading-animation {
  opacity: 1;
  transition: all 3s ease 0s;
}
@keyframes slideUp{
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes slideDown{
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}