body {
	margin: 0px;
	background: #000 !important; 
} 
html {
	
	    background: #000;
}

/* Outer container with green background and full width */
.outer-container {
 border-bottom: solid 5px #d0ab49;
    width: 100%; /* Full width */
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: fixed;
    top: 0; /* Aligns it to the top of the viewport */
    left: 0; /* Aligns it to the left */
    right: 0; /* Ensure it spans full width */
    z-index: 10; /* Keeps the header on top */
    margin: 0; /* Ensure no margin is applied */
    padding: 0; /* Ensure no padding is applied */
    box-sizing: border-box; /* To include padding in the element's total width/height */
}
.homecontent{
	width: 100%; 
    margin: auto;
    /* margin-top: 50px; */
    background: #fff;
	position: relative;
border-bottom: 1px solid #d0ab49;
 
    height: 200px;
	color: #000;
	
}

.main-img {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	margin: auto;
	
    position: relative;
}
.quote {
    position: absolute;
    color: white;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.5); /* semi-transparent background */
    padding: 10px;
    border-radius: 8px;
    top: 30%; /* Adjust position */
    left: 50%; /* Adjust position */
	text-transform: uppercase;


}
.quotemarkone{
color: #d0ab49; 
font-size: 10px;     
vertical-align: top;
}
.quotemarktwo{
	padding-left: 5px; 
	font-size: 10px;  
	color: #d0ab49;   
	vertical-align: top;
}
.quoteby {
	color: #d0ab49;  
	font-style: normal; 
	font-size: 14px;
	    display: block;
    text-align: right;
}
.quotepadding {
	padding-left: 0px
}


@media (max-width: 599px) {	
#avadropdwn{
	margin-bottom: 20px !important;
}
}
@media (min-width: 600px) {	
#avadropdwn{
	margin-bottom: 20px !important;
}
}

@media (max-width: 600px) {	
.quote {

    font-size: 12px;
 

}
.quotemarkone{
font-size: 8px;     

}
.quotemarktwo{

	font-size: 8px;  

}
.quoteby {
	font-size: 10px;
	padding-top: 10px;

}
.quotepadding {
	padding-left: px
}
}

.main-img img {
    width: 100%;
    height: auto; /* maintains aspect ratio */
    max-width: 1000px;
}
	.info-drop-1{
		width: 100%; 
		display:inline-block;
		padding: 30px; 

		text-align: justify;

	
	}
	.info-drop-2{
		
		width: 100%;  
		display:inline-block;
    vertical-align: top;
	height: 100%;
	    object-fit: cover;
    object-position: center;

	}
	.info-drop-2 img {
    max-height: 200px;
    object-fit: cover;
    object-position: center;	
}
	
	.pawhover:hover
	{
		color: #fff !important;
	}


.pageactive {
    color: #d0ab49 !important;
	font-weight: bold;
	}
	
	.footersection {
		max-width: 33%;
		display: inline-block;
		vertical-align: top;
		color: #585858;
		padding: 10px;	
		margin-top: 20px; 
		text-align: left;
		padding-left: 20px;
		}
		.footersectionline{
		border-left: 1px solid #585858;	
		}
		.footertitle{
		font-size: 16px;
		}
		
@media (max-width: 600px) {	
.info-drop-1{
		width: 100% !important; 
		padding: 20px !important; 
		
	}
	.info-drop-2{
		width: 100% !important;  
		padding-top: 0px !important; 
	}
	.info-drop-2 img {
    max-height: 100px;
    object-fit: cover;
    object-position: center;	
}
	
.footersection {
		max-width: 100%;
		width: calc(100% - 40px);
		margin-top:0px;
		
		margin: 0px 20px 0px 20px;
		padding: 10px;
		}
		
		.footersectionline{
		border-top: 1px solid #585858;	
			border-left: 0px;	
		}
		
		.footertop{
			margin-top: 20px;
		}
}
		
@media (max-width: 768px) {
	

  
  
  
.homecontent{

    height: 100px;
	
}	
.homecontent-text{ 
font-size: 12px !important;
padding: 25px !important;
	
}
}
.kingandqueen-image{
    background-image: url(/images/website_images/top_banners/kingandqueen.webp);
    background-size: cover;
    background-position-y: center;
    opacity: 0.8;
	height: 100%;
	width: 100%;
	
}
.kitten-image{
    background-image: url(/images/website_images/top_banners/kitten.webp);
    background-size: cover;
    background-position-y: center;
    opacity: 0.8;
	height: 100%;
	width: 100%; 
	
}
.info-image{
    background-image: url(/images/website_images/top_banners/info.webp);
    background-size: cover;
    background-position-y: center;
    opacity: 0.8;
	height: 100%;
	width: 100%; 
	
}
.homecontent-text{
	height: 100%;
	width: 100%;
	padding: 70px;
	text-align: center;
	position: absolute;
    top: 0px;
    left: 0;
	font-size: 16px;
	    color: #ffffff;
    background: #000;
    opacity: 0.7;
}

.footercontent{
	max-width: 1000px;
	background: #1b1b1b;
	margin:auto;
	font-size: 14px;
	text-align: center;
}
#mainbody{
	padding-top: 314px;
		transition: all 0.4s ease;
		background: #000;
		font-style: italic;

}
#mainbody.scrolled {
        padding-top: 65px ;
}
.socials-text{
	width: 100%;
	max-width: 600px;
	margin: auto; 
}

#footer{
	background: #1b1b1b;
	width: 100%;
	border-top: solid 5px #d0ab49;

}
/* Header styling */
header#mainHeader {
  position: relative;
    width: 100%;
    max-width: 1000px;
    background-color: black;
    color: white;
    z-index: 10;
    transition: all 0.4s ease; /* Smooth transition on all properties */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20px; /* Increase padding for expanded state */
    padding-bottom: 20px; 
	box-sizing: border-box;
	 transition: 0.4s ease;
	 height: 310px;
} 
/* Logo container styling */
.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: all 0.4s ease;
}
/* Crown image styling */
#crownImage {
    width: 90px;
    opacity: 1;
    position: relative; /* Ensure it's aligned using flex */
    top: -100px;
    transition: opacity 3s ease, top 1.5s ease;
	will-change: top, opacity;

}

#crownImage.scrolled {
		width: 60px;
			    margin-left: 0 !important;
    align-self: flex-start !important;
    text-align: left !important;
    float: left !important;
	}
/* Logo image styling */
#logoImage {
    max-width: 375px;
    height: auto;
    transition: opacity 0.4s ease, max-height 0.4s ease;
}





/* When header shrinks */
header.scrolled {
    padding: 10px 20px;
    flex-direction: row; /* Align logo and menu side by side */
    justify-content: space-between; /* Space items out */
    align-items: center; /* Vertically align logo and menu */
	height: 60px !important;
}
/* Adjust logo container when header shrinks */
header.scrolled .logo-container {
    align-items: flex-start; /* Align the contents of the container to the left */
    justify-content: flex-start; /* Ensure items inside are aligned to the left */
}
header.scrolled #logoImage {
    opacity: 0;
    max-height: 0px;
}
/* Menu styling */
.menu {
    text-align: center; /* Menu centered when expanded */
    opacity: 0; /* Start hidden */
    visibility: hidden; /* Hide it from layout calculations */
   transition: opacity 1s ease;
	padding-top:10px; 

}
.menu .nav-item {
    display: inline-block;
   
}
.menu .nav-item a {
    color: white;
    text-decoration: none;
}
/* When the header is expanded */
header:not(.scrolled) .menu { 
    width: 100%; /* Menu takes up 100% width */
    text-align: center; /* Menu centered when header is expanded */
    position: relative; /* Reset positioning */
	 visibility: visible; /* Show it */
}
/* Shrink header when scrolling */
header.scrolled .menu {
	visibility: visible;
    text-align: left; /* Menu left-aligned when header shrinks */
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Vertically center the menu */
    right: 20px; /* Adjust as needed */
    left: auto;
    width: auto; /* Menu width is not 100% when shrunk */
}
/* Mobile-specific styles */
@media (max-width: 768px) {
#mainbody{
	padding-top: 174px;
	transition: all 0.4s ease;
	
}
#mainbody.scrolled {
        padding-top: 65px ;
}
		
    /* Show the hamburger menu icon */
    .menu-icon {
		font-size: 40px;
        text-align: center;
        display: inline-block; /* Ensure it shows on mobile */
        color: white;
		order: 2; /* Ensure it stays on the right */
		margin: auto;
		margin-top: 0px;
		margin-bottom: 0px;
        cursor: pointer;
        transition: all 0.4s ease;
        flex-direction: column; /* Stack the bars vertically */
		position: absolute;
        top: 0px;
        right: 10px;
    }


    .menu-icon div {
        width: 30px;
        height: 4px;
        background-color: white;
        margin: 5px 0;
    }

    /* Ensure the header is still aligned correctly for mobile */
    header#mainHeader {
        flex-direction: row; /* Ensure logo and menu are side by side */
        justify-content: space-between; /* Space logo and menu icon apart */
        align-items: center; /* Vertically center the items */
		height: 170px;
    }
	
	
	/* Crown image styling */
	#crownImage {
		width: 50px;
		
	}
	

	/* Logo image styling */
	#logoImage {
		max-width: 200px;

	}

    /* Only apply when header is expanded (without .scrolled class) */
    header#mainHeader:not(.scrolled) {
        flex-direction: column; /* Stack items vertically on mobile when expanded */
        align-items: center; /* Center items horizontally */
		
    }
    /* Mobile-specific styles for the header when shrunk */
    header#mainHeader.scrolled {
        flex-direction: row; /* Keep row layout when shrunk */
        justify-content: space-between;
    }
    /* Adjust the menu container for mobile */
    .menu {
        display: none; /* Hide menu options on mobile */
    }

    /* Positioning for the menu icon */
  	
	
	
    /* Mobile Menu (hidden off-screen) */
    .mobile-menu {
		text-align: left;
        position: fixed;
        top: 0;
        right: -100%; /* Start hidden off-screen */
        width: 60%;
        height: 100%;
        background-color: #000000;
        transition: right 0.3s ease;
        padding: 20px;
		z-index: 10;
        display: block; /* Ensure it's displayed as a block element */
		border-left: 3px solid #d0ab49;
    }

    /* When the mobile menu is active (slides in) */
    .mobile-menu.active {
        right: 0; /* Slide the menu in */
    }

    /* Mobile Menu Items */
    .mobile-menu .nav-item {
        display: block;
        margin: 15px 0;
    }

    .mobile-menu .nav-item a {
        color: white;
        text-decoration: none;
    }
	
	.mobile-menu .nav-item a:hover {
    color: #d0ab49 !important;
	}
	

	
	

    /* Display mobile menu when the menu icon is clicked */
    .menu-icon.open + .mobile-menu {
        right: 0; /* Slide the menu in */
    }
}
.bg-black{
	background: #000 !important;
	border: 0px !important;
}
/* Hide menu icon and options on larger screens */
@media (min-width: 769px) {
    .menu-icon {
        display: none; /* Hide the menu icon on larger screens */
    }

    .mobile-menu {
        display: none; /* Hide mobile menu when on larger screens */
    }
}

/* Blurred background behind the mobile menu */
.mobile-menu-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    backdrop-filter: blur(10px); /* Apply blur */
    z-index: 5; /* Make sure it is on top */
    display: none; /* Hide by default */
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Smooth fade */
}

#parallax-image-1{
	background-image: url("/images/parallax-1.jpg");
	height: 500px;
	background-attachment: fixed;
	background-position: Center;
	background-repeat: no-repeat;
	background-size: cover;
	
}

#parallax-image-2{
	background-image: url("/images/parallax-2.jpg");
	height: 500px;

	background-attachment:scroll;
	background-position: Center;
	background-repeat: no-repeat;
	background-size: cover;
	
}

.parallax-font{
	font-family: Cosmic Sans MS, Cosmic Sans, Cursive;
	color: whitesmoke;
	font-size: 50px;
}
.parallax-text-container{
	
}
.home-container{
	
	background: #eee;
	width: 50%;
	margin: auto; 
}
.home-box {
    width: 33.33%;
    min-height: 300px;
    display: inline-block;
    border: 2px solid #d0ab49;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: white; /* Adjust text color as needed */
}





.glow-on-hover {
    transition: box-shadow 0.3s ease;

}

.glow-on-hover:hover {
     box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.3); /* White glow with 0.3 opacity */
}
.btn-check:focus + .btn,
.btn:focus {
    box-shadow: none !important;
}


.menu .nav-item a {
    color: white;
    text-decoration: none;
}
.menu .nav-item a:hover {
    color: #d0ab49;
    text-decoration: none;
}
body.locked {
    overflow: hidden;
    position: fixed;  /* Prevents scroll on mobile */
    width: 100%;      /* Ensure the body spans the full width */
    height: 100%;     /* Ensure the body takes up the full height */
}

/* Optionally, to make sure background scrolling is blocked, disable touch events on the background */
.mobile-menu-background {
    touch-action: none;
}
body.locked .mobile-menu-background {
    display: block; /* Show background when menu is active */
    opacity: 1;
}

/* Apply the blur effect to the elements that are behind the menu */
body.locked .content {
    filter: blur(5px); /* Apply blur effect to the content when menu is open */
}
  .slideshow { position: relative; isolation: isolate; } /* create a stacking context */

  .filter-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;          /* higher than any slide layers */
    background: rgba(0,0,0,.6);
    padding: 6px 8px;
    border-radius: 8px;
    backdrop-filter: blur(2px);
    pointer-events: auto;     /* accept clicks */
  }
  .filter-overlay select.form-select {
    padding: .25rem .5rem;
    font-size: .9rem;
    line-height: 1.2;
    height: auto;
    min-width: 130px;
    background-color: #111;
    color: #fff;
    border: 1px solid #d0ab49;
  }

  /* Prevent the reveal overlays from eating clicks */
  .slide__img-reveal,
  .preview__img-reveal {
    pointer-events: none;
  }

  /* If your nav bar overlaps, disable its container's hitbox but keep buttons clickable */
  .slidenav { pointer-events: none; }
  .slidenav__item { pointer-events: auto; }

  @media (max-width: 576px){
    .filter-overlay { top: 8px; left: 8px; padding: 4px 6px; }
    .filter-overlay select.form-select { min-width: 110px; font-size: .85rem; }
  }
 






/* === Loader Overlay === */
#pageLoader {
  position: fixed;
  inset: 0;
  background: black;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease, visibility 1s ease;
}

body.loaded #pageLoader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* === Loader Logo Container (same as header) === */
#loaderLogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 1s ease;
}

/* === Crown (optional static crown) === */
#crownImageStatic {
  width: 90px;
  opacity: 1;
  position: relative;
  top: 0;
  transition: opacity 3s ease, top 1.5s ease;
}

/* === Logo (same as header) === */
#logoImageStatic {
  max-width: 375px;
  width: 100%;
  height: auto;
  transition: opacity 0.4s ease, max-height 0.4s ease;
}


/* === Meow Text Animation === */
#meowText {
  font-family: 'Pacifico', cursive;
  color: #d0ab49;
  font-size: 32px;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  opacity: 1;
  animation: typing 0.5s steps(4) 0.2s forwards;
  transition: opacity 0.2s ease;
}

/* Responsive resizing to match logo on smaller screens */
@media (max-width: 768px) {
  #meowText {
    font-size: 25px;
  }
}
@keyframes typing {
  to {
    width: 5.2ch;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* === Responsive Adjustments === */
@media (max-width: 768px) {
  #crownImageStatic {
    width: 50px;
  }

  #logoImageStatic {
    max-width: 200px;
  }

	
}
body.loader-active {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}



/* remove the default typing animation during initial CSS parse */
#meowText {
  animation: none;       /* we'll set it in JS */
  opacity: 0;            /* hidden until we kick it off */
}

/* when ready, flip them on by adding .ready to #pageLoader */
#pageLoader.ready #tailImageStatic,
#pageLoader.ready #

 {
  animation-play-state: running;
}
.slideshow {
  pointer-events: auto;
  touch-action: pan-y;
}

/* Tail styling — applies to both header and loader */
#tailImage,
#tailImageStatic {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;
    animation: tailWag 8s ease-in-out infinite;
    transition: opacity 1s ease;
    height: auto; /* keep aspect ratio */
}
#tailImageStatic {

    animation-play-state: paused; /* start paused */
}
/* Run animation only when pageLoader is ready OR in the header after load */
#pageLoader.ready #tailImageStatic{
    animation-play-state: running;
}

/* Desktop size (≥768px) */
@media (min-width: 768px) {
    #tailImage,
    #tailImageStatic {
        bottom: 17px;
        width: 35px;
    }
}

/* Mobile size (<768px) */
@media (max-width: 767px) {
    #tailImage,
    #tailImageStatic {
        bottom: 8px;
        width: 20px;
    }
}

/* Wag animation */
@keyframes tailWag {
    0%, 60%, 80%, 100% { transform: translateX(-50%) rotate(0deg); }
    10% { transform: translateX(-50%) rotate(-15deg); }
    20% { transform: translateX(-50%) rotate(15deg); }
    30% { transform: translateX(-50%) rotate(-10deg); }
    40% { transform: translateX(-50%) rotate(10deg); }
    50% { transform: translateX(-50%) rotate(0deg); }
    90% { transform: translateX(-50%) rotate(-5deg); }
}

/* Let the slideshow handle horizontal swipes; still allow vertical scroll */
.slideshow,
.slideshow *:not(button) {
  touch-action: pan-y;
  -ms-touch-action: pan-y; /* old Edge */
}

/* Reduce iOS/Chrome overscroll interruptions */
.slideshow {
  overscroll-behavior: contain;
}
/* --- Price tag --- */
.slide__img-wrap { position: relative; } /* ensure overlay anchors correctly */
.price-tag{
  position:absolute; top: 15%; right:12px;
  background:#d0ab49; color:#111; font-weight:700;
  padding:6px 10px; border-radius:8px;
  transform: rotate(6deg);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  line-height:1; font-size:14px;
}


 .slide__img-wrap { position: relative; }

  /* price tag stays above */
  .price-tag { z-index: 4; }

  /* lineage overlay on image */
  .lineage-overlay{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:16%;             /* <-- raises it off the very bottom */
    z-index:3;
    width:80%;
    padding:10px 12px;
    
    border-radius:10px;
    background:rgba(0,0,0,.38);
    
    color:#fff;
    pointer-events:none;    /* don't block slide controls */
  }
  .lineage-overlay h5{
    margin:0px;
    text-align:center;
    font-size:14px;
    letter-spacing:.02em;
    color:#d0ab49;
  }
  .lineage-overlay .nodes{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    gap:8px;
  }
    .lineage-overlay .nodes2{
    display:block;
	margin: 0px; 
	margin-top: 5px;
    grid-template-columns:1fr;
    align-items:center;
    gap:8px;
  }
  .lineage-overlay .node{
    background:rgba(0,0,0,.35);
    border:1px solid rgba(208,171,73,.5);
    border-radius:8px;
    padding:6px 8px;
    text-align:center;
    font-size:12px;
    line-height:1.2;
  }
  .lineage-overlay .node.kitten{
    font-weight:700;
    background:rgba(208,171,73,.15);
    color:#fff;
  }
  .lineage-overlay .connectors{
    position:relative;
    height:16px;
 
  }
  .lineage-overlay .h-line{
    position:absolute; left:12%; right:12%; top:50%;
    height:1px; background:rgba(208,171,73,.8);
  }
  .lineage-overlay .v-line{
    position:absolute; left:50%; top:0; bottom:0;
    width:1px; background:rgba(208,171,73,.8);
    transform:translateX(-50%);
  }