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: 0;
    position: relative; /* Ensure it's aligned using flex */
    top: -100px;
    transition: opacity 3s ease, top 1.5s ease;

}

#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;
}
#tailImage {
    position: absolute;
    bottom: 17px; /* Moves the image up by 10px */
    left: 50%;
    width: 35px; /* Sets the width to 35px */
    transform-origin: top center;
    transform: translateX(-50%);
    animation: tailWag 8s ease-in-out infinite;
	transition: opacity 1s ease;
}
/* Keyframes for intermittent wagging */
@keyframes tailWag {
    0% {
        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);
    }
    /* Pauses */
    60%, 80% {
        transform: translateX(-50%) rotate(0deg);
    }
    90% {
        transform: translateX(-50%) rotate(-5deg);
    }
    100% {
        transform: translateX(-50%) rotate(0deg);
    }
}



/* 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 ;
}
		
	#tailImage {
		bottom: 8px; /* Moves the image up by 10px */
		width: 20px; /* Sets the width to 35px */

	}
    /* 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; }
  }
 


@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); }
}



/* === 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;
}

/* === Tail (matches header tail exactly) === */
#tailImageStatic {
  position: absolute;
  bottom: 17px;
  left: 50%;
  width: 35px;
  transform-origin: top center;
  transform: translateX(-50%);
  animation: tailWag 8s ease-in-out infinite;
  transition: opacity 1s ease;
}

/* === Tail 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); }
}

/* === 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;
  }

  #tailImageStatic {
    bottom: 8px;
    width: 20px;
  }
}
body.loader-active {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}