@font-face {
  font-display: swap; 
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/merriweather-sans-v26-latin-regular.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Domine';
font-style: normal;
font-weight: 400;
src: url('../Fonts/domine-v23-latin-regular.woff2') format('woff2'); 
}

@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url('../Fonts/poppins-v23-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('../Fonts/playfair-display-v37-latin-700.woff2') format('woff2'); 
}

.fake {
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 2rem !important;
}

@media (max-width: 600px) {
  .fake {
    font-size: 18px !important;
  }
}

.mobile-bgSCH,
.mobile-bgGSD {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  
  z-index: -1;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mobile-bgGSD {
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(../Images/Randoms/ger.webp);
  background-size:cover;
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position-y: 15%;
}

.mobile-bgSCH {
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(../Images/Randoms/shnu.webp);
  background-size:cover;
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position-y: 15%;
}

.disclaimer {
  display:flex;
  flex-direction: row;
  justify-self:center;
  width:100%;
  justify-content: space-between;
  margin-bottom:8%;
  background: rgba(255, 255, 255, 0.8);
  padding:1.5vw;
  gap:3vw;
}

.disclaimer-info-container {
  flex:1;
}

.disclaimer-info-container h3 {
  text-align:center;
  margin-bottom:3%;
  font-size:clamp(8px, 2.05vw, 30px);
  font-weight:700;
}

.disclaimer-info-container ul li {
  list-style: none;
  font-size:clamp(7.5px, 1.75vw, 25px);
}

/* No Upcoming Litters */

.no-litters {
  width:75%;
  justify-self: center;
  display:flex;
  flex-direction:row;
  background-color: rgba(66, 107, 202, 0.7);
  padding: 2vw;
  margin-bottom:20%;
  border-radius:1vw;
  border: solid 0.2vw black;
}

.text-container {
  display:flex;
  flex-direction: column;
  gap:1vw;
  flex:2;
}

.text {
  display:inline-block;
  margin-right:1vw;
  font-size:clamp(14px, 1.75vw, 30px);
  line-height:200%;
  text-align: center;
  align-self: center;
  color:white;
}

#noLitters-heading {
  font-size:clamp(16px, 2.2vw, 35px);
  line-height:50px;
  text-shadow: 2px 2px black;
    
}

.noLitters-imgContainer {
  display:flex;
  flex-direction: column;
  justify-content: center;
  flex:1;
}

.img-div {
  padding:1.5vw 1.5vw 1.5vw 1.5vw;
  background-color: white;
  width:100%;
  height:auto;
  display:flex;
}

.no-LittersIMG {
  max-width: 100%;
  max-height:auto;
  border-radius:.5vw;
  box-shadow:0vw 0vw 1vw 0.6vw rgba(0,0,0,0.5);
}

.noLitters-imgContainer a {
  align-self: center;
  display:block;
  text-align: center;
  margin-top:10%;
  max-width:fit-content;
}

.EnquireBTN {
  border:solid 0.15vw black;
  background-color: rgb(118, 164, 239);
  color:white;
  border-radius:0.5vw;
  font-size:clamp(14px, 1.75vw, 25px);
  padding: 1vw 4vw;
  transition: background-color 0.15s,
  color 0.15s;
}

.EnquireBTN:hover,
.EnquireBTN:active {
  background-color:white;
  color: rgb(118, 164, 239);
}

/* Upcoming Litters */

.upcoming-litters {
  display:flex;
  flex-direction: column;
  padding: 2vw;
  background-color:rgba(74, 113, 241, 0.7);
  color:white;
  border-radius:1vw;
  width:80%;
}

.dam,
.sire {
  text-transform: uppercase;
  font-size:clamp(16px, 2.5vw, 32px) !important;
  position:absolute;
  top:0;
}

.info-container {
  display:flex;
  position:relative;
  flex-direction: column;
  justify-content: center;
  gap:1.5vw;
  flex:1.5;
  align-self:flex-start;
  height: 100%;
}

.info-container p {
  display:flex;
  align-self:center;
  text-align: center;
  font-weight: 500;
  font-size:clamp(14px, 1.75vw, 30px);
}

.name-date-container {
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  height:18vw;
}

.name {
  text-decoration: none;
  font-size:clamp(18px, 2.8vw, 38px);
  font-family:'Merrweather sans';
  padding:1vw 1.5vw;
  text-align:center;
  display:inline-block;
  text-transform: uppercase;
  align-self:center;
  color:white;
  width:90%;
}

.date {
  display:inline-block;
  font-family: 'Merryweather sans';
  font-size: clamp(16px, 2.2vw, 35px);
  flex:1;
  text-align:center;
  align-self:center;
  flex:1;
}

.test {
  display:inline-block;
  position:absolute;
  bottom:0;
  font-size: clamp(16px, 2.2vw, 35px);
}


.enquirebtn-container {
  margin-bottom:10%;
  display:flex;
  max-width:fit-content;
  text-decoration: none;
  justify-self: center;
  margin-bottom:10%;

}

.enquirebtn {
  padding: 1vw 1.5vw;
  border:none;
  border-radius: 0.4vw;
  background-color:rgb(118, 164, 239);
  color:white;
  font-size:clamp(14px, 1.75vw, 25px);
  cursor:pointer;
  font-weight:500;
  transition:background-color 0.15s, color 0.15s;
}

.enquirebtn:hover,
.enquirebtn:active {
  background-color:white;
  color:rgb(118, 164, 239);
}

@media (max-width:1100px) {
    .mobile-bg {
        background-attachment: scroll;
        min-height: 100vh;
        height: 100vh;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
    .page-wrapper {
        position:relative;
    }
    .main {
        align-self:center;
    }
    .page-title {
        padding-top:28vw;
    }
    
    .no-litters {
        flex-direction:column-reverse;
        padding-bottom:3vw;
        width:90%;
        gap:4vw;
    }
    .noLitters-imgContainer {
        flex:0;
        margin-bottom:-2vw;
        height:40vw;
    }
    .img-div {
        max-width:40vw;
        height:auto;
        align-items: center;
        align-self: center;
    }
    .no-littersIMG {
        max-width:40vw;
        height:auto;
    }
    .no-litters a {
        margin:0;
        max-width:fit-content;
        display:inline-block;
        align-self:center;
    }
    .text-container {
        display: flex;
        flex-direction: column;
        gap: normal;
    }
    #noLitters-heading {
        font-weight:bold;
        margin-bottom:4%;
        text-shadow: none;
        line-height: normal;
    }
    .no-litters .text-container .text {
        line-height: clamp(20px, 4vw, 60px);
    }
    .upcoming-litters {
        width:100%;
        border-radius:0;
    }
    .name-date-container {
        height:15vh;
    }
}

@media only screen and (max-width:500px) {
  .mobile-bgGSD {
    background-position-x: 50%;
  }
}