:root {
  --dark-green: #074123;
  --muted-olive: #a7a592;
  --cream: #f3f0da;
  --white: #ffffff;
  --flat-green: #3E4F47;
  --dark-brown: #724022;
  --light-green: #9ebf8b;
  --almost-black: #1d1d1b;
}



body {
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: normal;
}

strong {
    font-weight: 700;
}

a {
  text-decoration: none;
}

.pre-header {
  background-color: var(--flat-green);
  color: var(--white);
  text-transform: uppercase;
}

.navbar {
  background-color: var(--dark-green);
}

.main-nav {
    margin-left: 120px;
}

.nav-link {

    font-size: 1.5rem;
    text-transform: uppercase;
}

footer {
  background-color: var(--flat-green);
  color: var(--cream);
}

.logo-header img {
  height: 90px;
  width: auto; /* This ensures the aspect ratio of the image is maintained */
}

.hero-text {
    font-family: "santelia-script", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.bg-flat-green {

    background-color: var(--flat-green);
}

.bg-light-green {
    background-color: var(--light-green);
}

.bg-dark-brown {

    background-color: var(--dark-brown);
}

.brand-subnav {

    background-color: var(--dark-brown);
    color: var(--cream);
}

.carousel {
  position: relative;
}

.overlay-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the SVG */
  height: 60%;
  width: 60%;
  z-index: 2; /* Ensure the SVG sits on top of the slides */
}

.carousel-container {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.image-link {
  display: block;
}

.image-container {
  position: relative;
}

.overlay-text {
  /*background-color: rgba(0, 0, 0, 0.5);*/
  font-family: "santelia-script", sans-serif;
  font-size: 3rem;
  color: white;
  padding: 20px;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .8;
  transition: opacity 0.3s ease;
}

.image-container:hover .overlay-text {
  opacity: 1;
}

.image-container:focus-within .overlay-text {
  opacity: 1;
}

.hero-video-block-text {
  font-family: "santelia-script", sans-serif;
  font-size: 6rem;
  color: #f3f0da;
  text-align: center;

}

.sub-nav-link {
  color: #EFEBD1;
}

.sub-nav-link:hover {
  color: #cfcaaa;
}

.text-layer {
  background: rgba(255, 255, 255, 0.7); /* Semi-transparent white background to increase readability */
  z-index: 2;
}

.text-layer h2 {
  margin-left: 20%; /* 20% offset from left */
}

.text-overlay {
  position: relative;
  z-index: 1;
  right: -20%; /* This moves the text to the right, causing it to overlap the next column */
}

.video-thumbnail {
  position: relative;
  z-index: 0; /* This ensures the video thumbnail is underneath the text */
}

  .video-block-bg {
    background-image: url('img/irish-map-bg.png');
    background-repeat: no-repeat;
    background-position: 20% 15%;
    background-size: auto 130%;
  }

  .cobbles {

    background: url(img/cobbles-bg.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #3E4F47;

  }

  .social-icon {
    display: inline-block;
    margin-top: 20px;
    color: #efecd3;
    font-size: 1.5rem;

  }

  .aspectratio-3x2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 66.66%;
  }
  
  .aspectratio-3x2 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .control-btn {
    position: absolute;
    font-size: 2rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: none;
  }
  
  .prev-btn {
    top: 50%;
    left: 0;
  }
  
  .next-btn {
    top: 50%;
    right: 0;
  }
  
  .close-btn {
    top: 0;
    right: 0;
  }

  .navbar-nav .nav-item img.shop-icon {
    height: 50px;  /* adjust as needed */
    margin-left: 5px; /* space between the text and the icon */
  }
  
  .shop-text {
    font-size: 1.5rem;
    display: inline-block; /* Required to allow width to be set for '.shop-subtext' */
    line-height: 1rem;
    margin-top: 20px;
    text-align: center;
  }
  
  .shop-subtext {
    font-size: 0.6rem; /* Adjust as needed */
    width: 100%; /* Take up the full width of the parent */
    display: inline-block; /* Required for 'width' to have an effect */
    white-space: nowrap; /* Prevent the text from wrapping */
    overflow: hidden; /* Hide any overflow */
    text-overflow: ellipsis; /* Add ellipsis (...) for any overflow */
  }