body {
  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  
  
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
}


header {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
    
}




.showcase .showcase-text {
  padding: 3rem;
}

.showcase .showcase-img {
  min-height: 30rem;
  background-size: cover;
}


.features-icons {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.features-icons .features-icons-item {
  max-width: 20rem;
}

.features-icons .features-icons-item .features-icons-icon {
  height: 7rem;
}

.features-icons .features-icons-item .features-icons-icon i {
  font-size: 4.5rem;
}

.features-icons .features-icons-item:hover .features-icons-icon i {
  font-size: 5rem;
}


.testimonials {
     background: url("../images/seamless.jpg");  
background-size: contain;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.strava {
     background: url("../img/3.jpg");  
background-size: repeat;
  
}

.testimonials .testimonial-item {
  max-width: 18rem;
}

.testimonials .testimonial-item img {
  width: 65%;
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.call-to-action {
  position: relative;
  background-color: #ffffff;
  background: url("../img/back4.png") no-repeat center center;
  background-size: cover;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.call-to-action .overlay {
  position: absolute;
  background-color: #212529;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
}




.lead2 {
	  background-color: #000000;

opacity:.5;

}




footer.footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.mydiv {
     background-color: #212529;
  
}



.nav-link {
color: white !important;
     text-shadow: -1px 2px 4px black, 2px 1px 4px black, 2px 0 4px black, 2px -1px 4px black;
    font-weight: bold;
   padding: 5px;
        
}


/* hover effect */

.navbar a:hover,
.navbar a:focus {
    background-color: #43464b;
    color: #ffffff !important;
    border-radius: 10px;
    outline: none; /* Optional: if you provide a strong background color change */
}


/* Make anything with the id = thumbs tag have a hover effect */
a:hover #thumbs { opacity:.7;FILTER: Alpha(Opacity=100, FinishOpacity=70, Style=2); border:1px solid #4E4E4E; border-radius: 25px; }	

a:hover #thumbs2 { opacity:.7;FILTER: Alpha(Opacity=100, FinishOpacity=70, Style=2); border:1px solid #4E4E4E; }

a:hover #thumbs3 { opacity:.7;FILTER: Alpha(Opacity=100, FinishOpacity=70, Style=3); border:0px solid #4E4E4E; }



.cookies a {
    text-decoration: none;
    color: #000;
    margin-top: 8px
}

.cookies a:hover {
    text-decoration: none;
    color: blue;
    margin-top: 8px
}





header.mastheadclimb {
  position: relative;
  background-color: #343a40;
  background: url("../images/upthehillgenerated1.png") no-repeat center center;
  background-size: cover;

  /* === FIXES === */
  height: auto;           /* 1. Shrinks the header to fit content (removes huge gap) */
  min-height: auto;       /* 2. Overrides the default minimum height */
  padding-top: 100px;     /* 3. Pushes the logo/title down so it's not behind the menu */
  padding-bottom: 50px;   /* 4. Adds a small, clean space below the title box */
}

header.mastheadroutes {
  position: relative;
  background-color: #343a40;
  background: url("../images/archfall2015.jpg") no-repeat center center;
  background-size: cover;
  height: auto;
  overflow: visible;

  /* === SPACING FIXES === */
  padding-top: 80px;     /* 1. Pushes content down so it's not behind the menu */
  padding-bottom: 60px;   /* 2. Adds the space you want under the title box */
}

header.mastheadgravel {
  position: relative;
  background-color: #343a40;
  background: url("../img/gravel_cr.jpg") no-repeat center center;
  background-size: cover;
  
  /* === ADD THESE LINES === */
  height: auto;           /* Allows the header to wrap the content naturally */
  padding-top: 100px;     /* Moves the logo and title down */
  padding-bottom: 60px;   /* Adds space at the bottom for a cleaner look */
}
  
    

header.masthead .overlay {
  position: absolute;
  background-color: #212529;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
}

header.masthead h1 {
  font-size: 2rem;
}

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

.responsivelogo {
  width: 100%;
  max-width: 250px;
  height: auto;
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu { 
    display: none; 
    margin-top: 0; 
  }

  /* Added :focus-within to support keyboard navigation */
  .navbar .nav-item:hover .dropdown-menu,
  .navbar .nav-item:focus-within .dropdown-menu { 
    display: block; 
    margin-top: 0;
  }
}	
/* ============ desktop view .end// ============ */


#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #0069d9;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
    
}

#myBtn:hover {
  background-color: #555;
}


.card {
  margin-top: 2em;
  padding: 1.5em 0.5em 0.5em;
  border-radius: 2em;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    opacity:.8;
	
	
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #d2d2dc;
    border-radius: 6px;
    -webkit-box-shadow: 0px 0px 5px 0px rgb(249, 249, 250);
    -moz-box-shadow: 0px 0px 5px 0px rgba(212, 182, 212, 1);
    box-shadow: 0px 0px 5px 0px rgb(161, 163, 164)
	
	
	
}
.card img {
  width: 65%;
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.card .card-title {
  font-weight: 700;
  font-size: 1.5em;
}
.card .btn {
  border-radius: 1em;
  background-color: #2C6BEC;
  color: #ffffff;
  padding: 0.5em .5em;
}
.card .btn:hover {
  background-color: #2763D9;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  
  
  
.card-img-top-container { position: relative; }
.card-img-top.hover { 
  display: none; 
  position: absolute; 
  top: 0; left: 0; 
}
.card:hover .card-img-top.static { display: none; }
.card:hover .card-img-top.hover { display: block; }
  
  
  
}
/* Default: Desktop/Large screens */
.hero-header {
  height: 50vh;   /* half the viewport height */
  position: relative;
}

.swiper-slide {
  display: flex;
  align-items: center;   /* vertical centering */
  justify-content: center; /* horizontal centering */
  position: relative;
}

.slide-media {
  object-fit: cover;
  width: 100%;
  height: 50vh;   /* match the header height */
   display: block;
}

.swiper-slide video.slide-media {
 
  transform: translate(-50%, 0%);
}



.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 10;

  /* gradient background for readability */
  background: linear-gradient(
    rgba(0,0,0,0.6),   /* darker at top */
    rgba(0,0,0,0.3)    /* lighter at bottom */
  );
  padding: 1rem 2rem;
  border-radius: 12px;
}


.overlay-content .logo {
  max-height: 120px; /* smaller logo */
}

.overlay-content .title {
  max-width: 70%;    /* slightly narrower title image */
}

.overlay-content h1 {
  font-size: 1.5rem; /* smaller tagline */
}

/* Mobile: make slider taller for impact */
@media (max-width: 768px) {
  .hero-header {
    height: 70vh;   /* taller on mobile */
  }
  .slide-media {
    height: 70vh;
  }
  .overlay-content .logo {
    max-height: 90px;
  }
  .overlay-content .title {
    max-width: 85%;
  }
  .overlay-content h1 {
    font-size: 1.2rem;
  }
   .overlay-content {
    padding: 0.5rem 1rem;
    background: linear-gradient(
      rgba(0,0,0,0.7),
      rgba(0,0,0,0.4)
    ); /* slightly stronger gradient on mobile */
  }
}

.shadowed-text {
  text-shadow: -1px 0 #90EE90, 0 1px #90EE90, 1px 0 #90EE90, 0 -1px #90EE90;
}

header.masthead {
  position: relative;
  background: url("../img/invert-fidel-fernando-537764-unsplash.png") no-repeat center center;
  background-size: cover;
  height: 50vh;   /* or whatever height you want */
  overflow: hidden;
  padding-top: 70px !important;
  height: auto !important;
  min-height: 400px;
}

/* Default for all images */
.swiper-slide img.slide-media {
  object-fit: cover;
  object-position: center center;
}

/* Specific adjustment for slide 4 */
.swiper-slide:nth-child(4) img.slide-media {
  object-position: center top; /* moves viewpoint down */
}



.video-slide .overlay-content {
  top: 60%; /* push it lower */
  transform: translate(-50%, 50%);
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #212529;
  color: #fff;
  padding: 1rem;
  text-align: center;
  z-index: 9999;
  display: none; /* hidden until needed */
}

.cookie-banner button {
  margin: 0 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#accept-cookies {
  background: #2C6BEC;
  color: #fff;
}

#decline-cookies {
  background: #555;
  color: #fff;
}

/* ============ CSS Image Swap Logic (Updated for Sizing) ============ */

/* The container controls the size and centering */
.card-img-top-container {
  position: relative;
  display: block;
  overflow: hidden;
  
  /* Center the image container within the card */
  margin: 0 auto; 
  
  /* MOBILE SIZE: Keeps it large (fair size) on phones */
  width: 100%; 
  max-width: 350px; /* Optional: Prevents it from getting massive on tablets */
}

/* DESKTOP SIZE: Shrinks it on larger screens */
@media (min-width: 992px) {
  .card-img-top-container {
    width: 60%; /* Adjust this % to make it smaller or larger on desktop */
  }
}

/* The standard image fills the container */
.card-img-top.static {
  display: block;
  width: 100%; /* Fills the container width defined above */
  height: auto;
  transition: opacity 0.2s ease;
}

/* The hover image sits on top, also filling the container */
.card-img-top.hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;     /* Hidden by default */
  transition: opacity 0.2s ease;
  z-index: 2;
}

/* TRIGGER: Hovering shows the hidden image */
.card-link-wrapper:hover .card-img-top.hover {
  opacity: 1;
}


/* Only target the image element when its parent slide is active */
.swiper-slide-active img.slide-media {
  animation: kenburns 6s ease-out both;
}

@keyframes kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}



/* === Transparent Navbar Overrides === */

nav.navbar {
    background-color: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Increase z-index to ensure it is above the title box */
    z-index: 2000 !important; 
    border-bottom: none;
}

@media (max-width: 991.98px) {
    nav.navbar {
        position: fixed;
        background-color: rgba(0,0,0,0.95) !important;
    }

    header.mastheadclimb {
        padding-top: 140px; /* account for fixed navbar */
    }
	
	header.masthead {
        padding-top: 130px !important;
    }
}



header.mastheadclimb .row {
    position: relative;
    z-index: 1; /* Keeps the logo and title box at a lower stack level */
}


@media (max-width: 991px) {
    .navbar-collapse {
        max-height: 80vh; /* Limits height to 80% of screen to allow scrolling */
        overflow-y: auto;  /* Allows scrolling if the menu is longer than the screen */
    }
    
    .dropdown-menu {
        position: static !important; /* Allows the menu to push content rather than float over it */
        float: none;
    }
}


html { scroll-behavior: smooth; }


.responsive-iframe {
    width: 100%;
    max-width: 640px; /* Keeps it from getting too wide on desktop */
    margin: 0 auto;   /* Centers the form */
    display: block;
}