@charset "utf-8";
/* CSS Document */

body,
html {
  height: 100%;
}

body {
  overflow-x: hidden;
  margin: 0;
  background-color: #fcf8f4 !important;
}

html {
  overflow-x: visible !important;
  scroll-behavior: smooth;
}





/*NAVIGATION*/

.logo img {
  height: 4.3vmax;
}

.nav-color.scrolled {
  background-color: #F2E8D9 !important;
  transition: background-color 200ms linear;
}

.nav-link.active {
  border-top-style: solid !important;
  border-top-color: #900E0E !important;
  border-top-width: thin !important;
  color: #900E0E !important;
}

.nav-link {
  position: relative;
  border-top: 1px solid transparent;
  transition: border-top-color 0.3s ease;
}


.navbar-light .navbar-toggler {
  border-color: #900E0E !important;
}

.navbar-light .navbar-toggler-icon {
  border-color: rgb(144, 14, 14) !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(144, 14, 14)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.sale-button {
  border: none;
  background-color: #9b0808 !important;
  color: #efe4e8;
  border-radius: 3px;
}

.sale-button:hover {
  background-color: #a83535 !important;
  color: white !important;
}



/* Home */


/* Subtitle effect */
.box .title path {
  -webkit-animation: mainFadeIn 2s forwards;
  -o-animation: mainFadeIn 2s forwards;
  animation: mainFadeIn 2s forwards;
  animation-delay: 4s;
  opacity: 0;
  display: flex;
  align-items: baseline;
  position: relative;
}

@keyframes mainFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


.bgPicture {
  background-image: url("images/Home/Char-cows-in-sunset-2026.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


/* Crew */
.crew-card {
  perspective: 1300px;
  height: 360px;
}

/* INNER CARD */
.crew-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
}

/* HOVER FLIP */
.crew-card:hover .crew-card-inner {
  transform: rotateY(180deg);
}

/* FRONT + BACK */
.crew-card-front,
.crew-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.363);
}

/* FRONT */
.crew-card-front {
  background: white;
}

.crew-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}


/* BACK */
.crew-card-back {
  background: #4b1e1e;
  color: white;
  transform: rotateY(180deg);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 2rem;
  text-align: center;
}

.split-text-container {
  overflow: hidden;
}

.text-part.left {
  display: inline-block;
  transform: translateX(-200%);
  opacity: 0;
}

.text-part.right {
  display: inline-block;
  transform: translateX(200%);
  opacity: 0;
}


/* Sale */
.line-slide-container,
.line-slide-container.slide-in .line-slide {
  width: 160px;
  height: 3px;
}

.line-slide {
  width: 0;
  height: 100%;
  background-color: #B37438;
  transition: width 1s cubic-bezier(.77, 0, .18, 1);
}


/* Herdsires */
.hs-line-slide-container,
.hs-line-slide-container.slide-in .hs-line-slide {
  width: 300px;
  height: 3px;
}

.hs-line-slide {
  width: 0;
  height: 100%;
  background-color: #a83535;
  transition: width 1s cubic-bezier(.77, 0, .18, 1);
}



@keyframes image-appear {
  from {
    filter: saturate(0) contrast(4) brightness(.1) blur(3px);
    opacity: 0;
    scale: .95;
    translate: 0 4rem;
  }
}

@keyframes text-appear {
  from {
    opacity: 0;
    translate: 0 8rem;
  }
}

.link-3 a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.link-3 a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  border-bottom: solid 1px #583C2D;

  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.link-3 a:hover::before {
  transform: scaleY(4);
}



/* Gallery Item */

.image-wrapper {
  display: inline-block;
  opacity: 70%;
}

.scroll-content1 {
  display: flex;
  flex-direction: column;
  animation: scrollUp 80s linear infinite;
}

.scroll-content2 {
  display: flex;
  flex-direction: column;
  animation: scrollUp 80s linear infinite;
}

.scroll-content1 img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.scroll-content2 img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* Animation for infinite scrolling */
@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

.gallery-section {
  height: 75vh;
}

@media (min-width: 768px) {
  .gallery-section {
    height: 50vh;
  }
}


.gallery-scroll-pics {
  display: flex;
  animation: scroll-up 70s linear infinite;
}

@keyframes scroll-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

.gallery-scroll-pics:hover,
.gallery-scroll-pics:active {
  animation-play-state: paused;
}




/* Cowherds */

.gallery-item {
  position: relative;
  overflow: hidden;

  opacity: 0;
  transform: translateY(60px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.gallery-item.show {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item img {
  transition:
    transform 0.6s ease,
    filter 0.6s ease;

}

/* Contact */
.salePics-scroll {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.salePics-track {
  display: flex;
  animation: scroll-left 50s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.salePics-track:hover,
.salePics-track:active {
  animation-play-state: paused;
}

.salePics-track .card {
  min-width: 450px;
  max-width: 450px;
  /* height: 420px; */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.salePics-track .card {
  background-color: #fcf8f4 !important;
  border: #900E0E 1px solid !important;
}





/* General Styles */
.primary-font {
  font-family: montserrat, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.secondary-font {
  font-family: abril-display, serif;
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "EdoTypeFace";
  src: url("images/Font/edo.ttf") format("truetype");
}

.fancy-font {
  font-family: "EdoTypeFace";
}

.beige-colour {
  color: #F2E8D9 !important;
}

.red-colour {
  color: #900E0E !important;
}

.brown-colour {
  color: #583C2D !important;
}

.brown-bg {
  background-color: #3b261b !important;
}

.red-brown-colour {
  color: #3b261b !important;
}

.red-brown-colour:hover {
  color: #a83535 !important;
}

.btn {
  background-color: #900E0E !important;
}

.btn:hover {
  background-color: #a83535 !important;
}

.justify-text {
  text-align: justify;
}




/* Responsive Styles */

@media (min-width: 1361px) {

  /* Sale */
  .grid-bg {
    position: absolute;
    top: 50%;
    left: 7%;
    right: 0;
    height: 70vh;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 0.05rem;
    width: min(100%, 2000px);
    max-width: 2000px;
    height: 100%;
  }

  .square {
    width: 30%;
    height: 30%;
    border-radius: 10%;
    background: #ece1d760;
  }

}

@media (max-width: 1360px) {

  /* Sale */
  .grid-bg {
    position: absolute;
    top: 18%;
    left: 7%;
    right: 0;
    height: 70vh;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 0.05rem;
    width: min(100%, 2000px);
    max-width: 2000px;
    height: 110%;
  }

  .square {
    width: 30%;
    height: 30%;
    border-radius: 10%;
    background: #ece1d760;
  }

}



@media only screen and (max-width: 992px) {

  /* Sale */
  .grid-bg {
    position: absolute;
    top: 16%;
    left: 15%;
    right: 0;
    height: 70vh;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(6, 3fr);
    grid-template-rows: repeat(20, 3fr);
    gap: 0.5rem;
    width: min(100%, 2000px);
    max-width: 2000px;
    height: 116%;
  }

  .square {
    width: 24%;
    height: 66%;
    border-radius: 10%;
    background: #ece1d760;
  }

  
/* Crew */

/* INNER CARD */
.crew-card-inner {
  position: relative;
  width: 100%;
  height: 80%;
}

.small-text {
  font-size: 0.75rem !important;
}

}


@media (max-width: 768px) {

  /* Sale */
  .grid-bg {
    position: absolute;
    top: 50%;
    left: 13%;
    right: 0;
    height: 70vh;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 0.05rem;
    width: min(100%, 2000px);
    max-width: 2000px;
    height: 100%;
  }

  .square {
    width: 30%;
    height: 30%;
    border-radius: 10%;
    background: #ece1d760;
  }



}

@media only screen and (max-width: 576px) {

  /* Home */
  .crew-card {
    height: 350px;
  }

  /* Sale */
  .grid-bg {
    position: absolute;
    top: 50%;
    left: 13%;
    right: 0;
    height: 70vh;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(10, 1fr);
    width: min(100%, 2000px);
    max-width: 2000px;
    height: 120%;
  }

  .square {
    width: 30%;
    height: 30%;
    border-radius: 10%;
    background: #ece1d760;
  }


  /* Contact */
  .salePics-track {
    display: flex;
    animation: scroll-left 20s linear infinite;
  }

  .salePics-track .card {
    min-width: 450px;
    max-width: 450px;
    flex: 0 0 auto;
  }

  .salePics-track .card {
    min-width: 280px;
    max-width: 280px;
  }



/* Crew */

/* INNER CARD */
.crew-card-inner {
  position: relative;
  width: 100%;
  height: 80%;
}


.small-text {
  font-size: 0.75rem !important;
}

}

/* Sale announcement - scoped styles only (won't affect SVG sizing or global fonts) */
#sale-announcement {
  font-size: 18px; /* fixed px value so it doesn't scale SVG */
  line-height: 1.2;
  display: inline-block;
  transform: translateY(8px);
  will-change: opacity, transform;
}

.sale-cta {
  font-size: 16px; /* fixed px value */
  line-height: 1.2;
  display: inline-block;
  transform: translateY(8px);
  will-change: opacity, transform;
}

/* Ensure these rules are scoped and won't cascade to SVG elements */
.sale-links svg, .sale-links svg * {
  all: initial;
}