/* 
=========================
FARGEPALETT
=========================
Lysest til mørkest

#1b365d mørkeblå
#384c7b blå (nabofarge)
#f15a22 Orange (fra Athabasca university)
#ffffff hvit
=========================
BREAKING POINTS BS
=========================
--bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
*/
/* 
=========================
GENERELLE STILER
=========================
*/
body {
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
}
/* Stilen nedenfor fikset overflow på iphone, eller max-width på body */
body > * {
  overflow-x: hidden;
}

.btn-secondary {
  background-color: #384c7b !important;
  color: white;
}
.btn-secondary:hover {
  background-color: #1b365d !important;
}
.btn-outline-secondary {
  color: #384c7b !important;
  background-color: white;
}
.btn-outline-secondary:hover {
  background-color: #384c7b !important;
  color: white !important;
}

#hero img {
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}

#hero {
  position: relative;
  /* background-image: url("./images/bg_valley1.webp");
  background-size: cover;
  background-position: center; */
  z-index: 0; /* Ensure the container has a stacking context but doesn't need to be higher than its content */
}

#hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7); /* Adjust the opacity as needed */
  z-index: -1; /* Place the overlay behind the container's content */
}

#hero .row {
  position: relative; /* This ensures the content is in a new stacking context on top of the ::before pseudo-element */
  z-index: 1; /* Optional, depending on other CSS rules you might have */
}
#scroll-up-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  /* transform: translateX(-50%); */
  z-index: 2;
  background-color: #384c7b !important;
  border: none;
  color: white;
  opacity: 0.5;
  /* border: 2px solid #f15a22; */
}
#scroll-up-btn:hover {
  opacity: 0.8;
}
#scroll-up-btn:active {
  opacity: 1;
  transform: scale(1.1);
  /* background-color: #1b365d; */
}
.old-hero-header {
  background-color: #1b365d;
  z-index: 2;
  position: absolute;
  width: 100vw;
}

#hero {
  padding-top: 70px;
}
#jdfooter {
  background-color: #1b365d;
}
#jdfooter .text-body-secondary {
  color: white !important;
}
/* TEST burger */
/* Hamburger Icon */
/* Custom Hamburger Icon */
.navbar-toggler {
  position: relative;
  border: none;
  background: transparent;
}
.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none;
  box-shadow: none;
}

/* Hamburger lines */
.hamburger-line {
  display: block;
  width: 30px; /* Adjust based on your design */
  height: 3px; /* Adjust thickness */
  background-color: #fff; /* Line color */
  margin: 5px 0; /* Spacing between lines */
  transition: all 0.3s ease-in-out; /* Transition effect */
}

/* Transformation for X */
.navbar-toggler.x .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.navbar-toggler.x .hamburger-line:nth-child(2) {
  opacity: 0;
}

.navbar-toggler.x .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.lead {
  font-weight: 450;
}

#hero .btn-primary {
  background-color: #f15a22;
  color: white;
  border-color: #f15a22;
  /* transition: 0.3s; */
}
#hero .btn-primary:hover {
  background-color: #c04e1a; /* Darker shade of the original orange */
  border-color: #c04e1a;
}
.btn-primary {
  border-color: #f15a22;
  /* background-color: #f15a22; */
  background-color: white;
  color: #f15a22;
  /* background-color: #DEB76A; */
  /* border:0; */
}
.btn-primary:hover {
  background-color: #f15a22;
  color: white;
  border-color: #f15a22;
}

#hero h1 {
  transform: translateX(-2px);
}
#hero {
  display: none;
}
/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900 */

.company-text{
  font-family: "Grenze Gotisch", serif;
  font-optical-sizing:auto;
  font-size: 1.5rem !important;
  font-weight: 500;
  font-style:normal;
}
/* #hero {
  position: relative;
}
#hero .container {
  background-image: url("./images/bg_valley5.webp");
  background-size: cover;
  background-position: center;
}

#hero .container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5); /* Adjust the opacity as needed */
/* z-index: 1;
} */

/* #hero .btn-primary {
  background-color: #f15a22;
  color: white;
  border-color: #f15a22;
}
#hero .btn-primary:hover {
  border-color: #f15a22;
  background-color: white;
  color: #f15a22;
} */

#quotes {
  background-color: #1b365d;
  /* color: white; */
  font-style: italic;
  font-weight: 350;
  padding: 1.5em;
}



/* #firmatittel {
  font-family: "Baskerville", serif;
  font-weight: 400; 
} 
*/

p {
  max-width: 60ch;
}

#features i,
#bestilling i,
#bestillingssteder i,
#kontakt i {
  color: #f15a22;
}
#om i {
  color: #f15a22;
}
#features p,
#boker p,
#om p {
  text-align: justify;
}

.card {
  transition: box-shadow 0.3s;
  border: 0;
  padding-top: 1rem;
  margin-top: 1rem;
  border-radius: 10%;
}
.card:hover {
  box-shadow: 0 0 15px rgba(33, 33, 33, 0.2);
  background-color: whitesmoke;
}
.card a {
  width: 50%;
  margin-left: 25%;
  margin-top: 1rem;
}
.card-img-top {
  width: 50%;
  padding-left: 1rem;
  max-width: 200px;
}
#boker .bi-book {
  color: #f15a22;
}

.carousel-item img {
  width: 30%;
  margin-left: 35%;
  margin-bottom: 5%;
}

.carousel-indicators {
  bottom: -25px;
}

#carouselExampleSlidesOnly {
  padding-top: 25px;
}

.card a {
  width: auto;
  margin-left: 0;
}

/* Bestilling */

.salgssteder {
  list-style: none;
  padding: 0;
  /* margin: 0; */
}

.salgssteder li {
  transition: all 0.3s ease-in-out;
}

.salgssteder li:last-child {
  border-bottom: none;
}

/* Ny salgssteder stil */
/* Style adjustments for the links */
.salgssteder a,
#kontakt a {
  position: relative; /* Required for positioning pseudo-elements */
  display: inline-block; /* Needed to properly size and position the underline */
  text-decoration: none; /* Removes default 
    underline */
  color: black;
  transition: color 0.3s ease; /* Smooth color transition for hover effect, if needed */
}

/* Chevron icon grow effect */
.salgssteder i {
  transition: transform 0.3s ease; /* Transition for scaling */
}

.salgssteder a:hover i {
  transform: scale(1.5); /* Adjust scale value as needed */
}

/* Underline animation for links */
.salgssteder a::after,
#kontakt a::after {
  content: "";
  position: absolute;
  bottom: -5px; /* Adjust as needed to place the underline below the text */
  left: 50%;
  /* transform: translateX(-50%); */
  height: 2px; /* Thickness of the underline */
  width: 0;
  background: #f15a22; /* Match the text color */
  transition:
    width 0.3s ease,
    left 0.3s ease; /* Smooth transition for the underline */
}

.salgssteder a:hover::after,
#kontakt a:hover::after {
  width: 100%;
  left: 0;
  transform: translateX(0%);
  /* Ensure the underline expands from the center */
}

.mychkbtn {
  color: #f15a22;
  border-color: #f15a22;
}
.mychkbtn:checked {
  color: white;
  border-color: #f15a22;
  background-color: #f15a22;
}
.mychkbtn:active,
.mychkbtn:focus,
.mychkbtn:focus:active {
  /* background-image: none; */
  /* outline: 0; */
  box-shadow: none;
}

.form-container {
  max-width: 768px; /* Adjust this value based on the actual 'md' breakpoint width in your version of Bootstrap */
  /* margin: 0 auto;  */
  /* Centers the form */
}

/* .form-control.is-invalid, .was-validat form-control:invalid */
#jdfooter h5 {
  color: white;
}
#jdfooter {
  color: azure;
}
@keyframes gradientAnimation {
  0% {
    background: #1b365d; /* Starting color */
  }
  50% {
    background: #384c7b; /* Midway color */
  }
  100% {
    background: #1b365d; /* Ending color, same as starting to make it loop smoothly */
  }
}

#jdfooter {
  animation: gradientAnimation 5s ease-in-out infinite;
  background-size: 200% 200%; /* Enhance the gradient effect */
}

#logobtn {
  transition: 0.3s ease;
  cursor: pointer;
}
#logobtn:hover {
  scale: 1;
}
#logobtn:active {
  transform: translateX(-1px) translateY(-1px);
}

.lenke-kaare img,
.lenke-stein img {
  transition: box-shadow 0.3s ease-in-out; /* Legger til en myk overgangseffekt */
}

.lenke-kaare:hover img,
.lenke-stein:hover img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Legger til skygge når musepekeren er over lenken */
}

#bestilling .container,
#kontakt .container {
  overflow-y: hidden;
}

/* [data-aos] {
  animation: none !important;
  transition: none !important;
} */
#om figcaption p {
  padding-inline-end: 0 !important;
}

.rimg {
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.rolle-container figure {
  max-width: 60ch;
}

/* @media (min-width: 768px) {
  #quotes .container {
    max-width: 720px;
  }
} */

@media (max-width: 767.98px) {
  /* Bootstrap 'sm' breakpoint er vanligvis 576px */
  .carousel {
    position: relative;
  }
  .carousel p {
    text-align: left;
  }
  #features p,
  #boker p,
  #om p {
    text-align: left;
  }

  .carousel-control-prev,
  .carousel-control-next {
    position: absolute;
    top: -250px; /* Juster dette tallet for å flytte knappene høyere */
  }
}
/* #carouselExampleSlidesOnly div.col-1{
align-self:center;
justify-items: right;
} */