@charset "UTF-8";
html {
	background-color: rgba(0,0,0,0.76);
}

/*To control the color of text the user highlights*/
::selection {
	/* This sets the color of the highlight itself (the background) */
	background: #7A2E7E; /* A gold/yellow color from your theme */
	/* This sets the color of the text *within* the highlight */
	color: #FFFFFF; /* Ensures the text turns black for contrast */
}

body {
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
	max-width: none;
	background-color: rgba(255,255,255,1.00);
	margin-top: 45px;
}
.body-bg {
	background-image: url(../images/EmptyBlackStarryBackground.jpeg);
}
nav {
	border-bottom: medium solid rgba(73,28,75,1.00);
}
.navbar-color {
	background-color: rgba(0,0,0,1.00);
}
.full-width {
}
.border-left {
	border-left: thin solid rgba(73,28,75,1.00);
}
.navbar-nav.ms-auto.mb-2.mb-lg-0 .nav-item.dropdown .dropdown-menu.nav-bg li a:hover {
	background-color: rgba(122,46,126,1.00);
	border-radius: 6px;
}
/* This rule targets all nav links that are NOT active, like Games, About Us, and Contact */
.navbar .nav-link:not(.active):hover  {
	color: rgba(122,46,126,1.00); /* Example: A gold hover color */
}

/* This rule specifically targets the active Home link */
.navbar .nav-link.active:hover {
	color: rgba(200,118,205,1.00);
}
.navbar-brand:hover {
	transform: scale(1.03);
/*	color: rgba(122,46,126,1.00);*/
}
.navbar-brand{
transition: transform 0.3s ease-in-out;
}


.nav-bg {
	background-color: rgba(0,0,0,1.00);
	color: rgba(255,255,255,1.00);
}
.text-purple {
	color: rgba(73,28,75,1.00);
}
.text-purple-light {
	color: rgba(122,46,126,1.00);
}
.text-purple-superlight{
	color:rgba(167,63,172,1.00) ;
}
.dropdown-menu.nav-bg li .dropdown-item.footer-nav-color:hover {
	background-color: rgba(54,20,56,0.90);
	color: rgba(107,107,107,1.00);
	border-radius: 6px;
}
main {
}
#hero-pew {
	background-image: url(../images/characters/space-marine-mini.png);
	height: 50vh;
	background-position: center center;
	background-size: cover;
}

.darken {
	filter: brightness(.4);
}

.ms-3.darken .text-body-secondary img {
	/*Uses hover to make the hovered elemnt grow in size and change brightness*/
	transition: transform 0.3s ease-in-out;

}

.ms-3.darken .text-body-secondary img:hover {
	/*Uses hover to make the hovered elemnt grow in size and change brightness*/
	transform: scale(1.1);
	filter: brightness(.99);
}
.footer-navbar-dropdown {
	text-decoration: none;
	list-style-image: none;
	list-style-type: none;
}
.bg-dark.text-secondary.flex-wrap.justify-content-between.align-items-center.py-md-4.py-1.border-top .nav.col-md-12.justify-content-center.list-unstyled.d-flex:hover {
	color: rgba(68,160,106,1.00);
}
.btn-index {
	color: rgba(255,255,255,0.50);
	background-color: rgba(122,46,126,1.00);
}
#index-section1-col1 { 
	display: flex;
  flex-direction: column;
  justify-content: center;
}
.bg-space {
	background-image: url(../images/BlackStarryBackground.jpeg);
}
.text-green {
	color: rgba(17,146,69,1.00);
}
#index-section1-col2 {
}
.img-fill {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.intro-border {
	border-top: thick solid rgba(73,28,75,1.00);
}
.border-top-purple {
	border-top: thick solid rgba(73,28,75,1.00);
}
.border-bot-purple {
	border-bottom: thick solid rgba(73,28,75,1.00);
}
.bg-green {
	background-color: rgba(17,146,69,1.00);
}

.footer {
	padding-bottom: 0px;
}
.footer-nav-color {
	color: rgba(255,255,255,1.00);
}
footer .nav-link:hover,
footer .nav-link:focus {
    color: rgba(208,139,212,1.00); /* Use a lighter purple to stand out */
}
.btn-charity {
	background-color: rgba(12,114,54,1.00);
}
.btn-charity.text-white-half:hover {
	background-color: rgba(17,146,69,1.00);
	color: rgba(255,255,255,1.00);
}
.underline {
	text-decoration: underline;
}
.overline {
	text-decoration: overline;
}
.charity-header  {
	font-size: 25px;
	font-style: normal;
}
.text-white-half {
	color: rgba(255,255,255,0.50);
}
.btn.btn-index:hover {
	background-color: rgba(167,63,172,1.00);
	color: rgba(241,241,241,1.00);
}
#index-section3{
    position: relative;
    background-image: url(../images/characters/moss-squirrel.png);
		background-position: bottom;
}

#index-section3::before {
	content: '';
	display: block;
	position: absolute;
	background-color: #000;
	opacity: 0.6;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#index-section3-row {
	position: relative;
}
.border-t {
	border-top: medium solid rgba(255,255,255,1.00);
}
.border-b {
	border-bottom: medium solid rgba(255,255,255,1.00);
}
.border-bot-green {
	border-bottom: medium solid rgba(17,146,69,1.00);
}
.border-top-green {
	border-top: medium solid rgba(17,146,69,1.00);
}
.border-right {
	border-right-color: rgba(73,28,75,1.00);
	border-right-style: solid;
}
.btn-marmotia {
	background-color: rgba(12,114,54,1.00);
}
.btn.text-white-half.btn-marmotia:hover {
	background-color: rgba(17,146,69,1.00);
	color: rgba(255,255,255,1.00);
}
#marmotia-section1-col2 {
}
.object-position-top {
	object-position: top;
}
#hero-hands-red {
	height: 50vh;
	position: relative;
	background-image: url(../images/characters/elder-hands-red.png);
	background-position: center center;
	background-size: cover;
}
.btn-white {
	background-color: rgba(178,178,178,1.00);
}
/*hero section: frames, filters and imgs*/
.hero-about {
	position: relative;
	background-size: cover;
	background-position: center center;
}

.hero-about::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1; /* Sits below the text, above the actual container background */
	/* Apply the image here */
	background-image: url("../images/characters/sable-gothic.jpeg");
	background-size: cover;
	background-position: 0% 8%;
	/* Apply the grayscale filter to THIS pseudo-element */
	filter: grayscale(100%);
}
.hero-about::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Sits above the grayscale image, below the text */
		
    /* Apply the color overlay */
    background-color: rgba(0, 0, 0, 0.77);
}

.hero-about .container-fluid {
    position: relative;
    z-index: 3; /* **Crucial** to ensure text is above the overlay */
}
.hero-index {
	position: relative;
	background-size: cover;
	background-position: center center;
}

.hero-index::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Sits below the text, above the actual container background */

    /* Apply the image here */
    background-image: url("../images/characters/elder-hands.jpg");
    background-size: cover;
    background-position: center center;
	

    /* Apply the grayscale filter to THIS pseudo-element */
    filter: grayscale(100%);
}
.hero-index::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Sits above the grayscale image, below the text */

    /* Apply the color overlay */
    background-color: rgba(0, 0, 0, 0.82);
}

.hero-index .container-fluid {
    position: relative;
    z-index: 3; /* **Crucial** to ensure text is above the overlay */
}

/*Elders of Marmotia Hero Image styling*/
.hero-marmotia {
	position: relative;
	background-size: cover;
	background-position: center center;
}

.hero-marmotia::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Sits below the text, above the actual container background */

    /* Apply the image here */
    background-image: url("../images/backgrounds/mossBear-spaceMarineVillain.png");
    background-size: cover;
    background-position: top;

    /* Apply the grayscale filter to THIS pseudo-element */
    filter: grayscale(100%);
}
.hero-marmotia::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Sits above the grayscale image, below the text */

    /* Apply the color overlay */
    background-color: rgba(0, 0, 0, 0.88);
}

.hero-marmotia .container-fluid {
    position: relative;
    z-index: 3; /* **Crucial** to ensure text is above the overlay */
}

.hero-contact {
	position: relative;
	background-size: cover;
	background-position: center center;
}

.hero-contact::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1; /* Sits below the text, above the actual container background */
	/* Apply the image here */
	background-image: url("../images/backgrounds/nebula-orange-blue.jpg");
	background-size: cover;
	background-position: -273px 26%;
	/* Apply the grayscale filter to THIS pseudo-element */
	filter: grayscale(70%);
}
.hero-contact::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Sits above the grayscale image, below the text */

    /* Apply the color overlay */
    background-color: rgba(0, 0, 0, 0.53);
}

.hero-contact .container-fluid {
    position: relative;
    z-index: 3; /* **Crucial** to ensure text is above the overlay */
}

/*thank you page*/
.hero-thankyou {
	position: relative;
	background-size: cover;
	background-position: center center;
}

.hero-thankyou::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1; /* Sits below the text, above the actual container background */
	/* Apply the image here */
	background-image: url("../images/backgrounds/nebula-orange-blue.jpg");
	background-size: cover;
	background-position: -273px 26%;
	/* Apply the grayscale filter to THIS pseudo-element */
	filter: grayscale(70%);
}
.hero-thankyou::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Sits above the grayscale image, below the text */

    /* Apply the color overlay */
    background-color: rgba(0, 0, 0, 0.23);
}

.hero-thankyou .container-fluid {
    position: relative;
    z-index: 3; /* **Crucial** to ensure text is above the overlay */
}



.cp-diag-s-top {
	clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
	overflow: hidden;
}
.cp-diag-s-bot {
	clip-path: polygon(0 0, 70% 0, 100% 100%, 0 100%);
	overflow: hidden;
}
.cp-diag-e-top {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
	overflow: hidden;

}
.cp-diag-e-bot {
	clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
	overflow: hidden;

}
#about-section1-img {
    /* Ensure the image fills its container while maintaining aspect ratio */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.about-flex {
	min-height: 55vh; 
  display: flex; 
  flex-direction: column;
}
#about-section1-col1 {
	display: flex;
  flex-direction: column;
  justify-content: center;
}
#about-section1 .row {
  flex-grow: 1;
}
#about-section2-col2 {
	display: flex;
  flex-direction: column;
  justify-content: center;
}
#about-section2 .row {
  flex-grow: 1;
}
#index-section2-col2 {
	display: flex;
  flex-direction: column;
  justify-content: center;
}

.align-center-y{
	display: flex;
  flex-direction: column;
  justify-content: center;
}
.text-orange {
	color: rgba(255,103,31,1.00);
}
.hero-index {
}
#contact-form-img {
	text-shadow: 0px 0px;
}
#contact-form-col2 {
}
.text-gold {
	color: rgba(252,196,84,1.00);
}
#social-icons {
	filter: grayscale(100%);
}
#mobile-menu {
	border-width: medium;
	border-style: solid;
}
#hero {
position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    /* Set height to viewport height for full screen coverage */
    height: 50vh; 
    
    /* Pushes the hero section into the background layer */
    z-index: 0; 
}
#sections {
	padding-top: 45vh;
}

/*pushes Index sections on top of hero image*/
#index-section1,
#index-section2,
#index-section3, 
footer {
    /* Ensure the background is solid black (or whatever color you want) */
    background-color: #000000 !important; 
    
    /* Ensure these are positioned above the hero (z-index: 0) */
    position: relative; 
    z-index: 2; 
}
/*pushes About sections on top of hero image*/
#about-section1,
#about-section2,
#about-section3,
#about-section4,
footer{
    /* Ensure the background is solid black (or whatever color you want) */
    background-color: #000000 !important; 
    
    /* Ensure these are positioned above the hero (z-index: 0) */
    position: relative; 
    z-index: 2; 
}

/*pushes marmotia sections on top of hero image*/
#marmotia-section1,
#marmotia-section2,
#marmotia-section3,
#marmotia-section4,
footer{
    /* Ensure the background is solid black (or whatever color you want) */
    background-color: #000000 !important; 
    
    /* Ensure these are positioned above the hero (z-index: 0) */
    position: relative; 
    z-index: 2; 
}
/*pushes contact sections on top of hero image*/
#contact-section1,
#contact-section2,
#contact-section3,
#contact-section4,
footer{
	/* Ensure the background is solid black (or whatever color you want) */
	background-color: #20252A;
	/* Ensure these are positioned above the hero (z-index: 0) */
	position: relative;
	z-index: 2;
}

footer{
	/* Ensure the background is solid black (or whatever color you want) */
	background-color: #20252A;
	/* Ensure these are positioned above the hero (z-index: 0) */
	position: relative;
	z-index: 2;
}

#about-section1 {
}
#hero-spacer {
	height: 600px;
}

@media (max-width: 768px) {
.border-left {
	border-left-width: 0px;
	border-left-style: none;
}
	
	#index-section1 {
    /* Push the content down by the height of the hero section. Instead I created a #sections div */
  
    
    /* Bring the content forward so it scrolls ON TOP of the fixed hero */
    position: relative; 
    z-index: 5; 
    
    /* IMPORTANT: Must have a solid background color to hide the fixed hero layer when scrolling */
    background-color: #000000; /* Use your body/main dark background color */
}
#index-section1-img {
}
.mobile-img-height{
	height: 25vh !important;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
	}

.cp-mobile-none {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}
.border-right {
	border-right-style: none;
}
#marmotia-section1-col2 img {
	object-position: top;
	background-size: auto auto;
}
#index-section1-img img {
	background-size: auto auto;
}
#about-section1-img {
	object-fit: cover;
	object-position: center;
	object-position: 0px -70px;
}
#about-section1-col2 {
	min-height: 25vh;
}
h5 {
	text-align: center;
}
#about-section2-img {
	object-fit: cover;
	object-position: center;
	object-position: 0px -90px;
}
.mobile-hero-height {
	height: 35vh;
}
.hero-height {
	height: 50vh;
}
.mobile-img-top {
	object-position: top !important;
}
.mobile-img-height-md {
	height: 40vh;
}
/*
#contact-section1-col2 {
	height: 25vh;
}
*/
#dditem-marmotia {
	display: inline-block;
}
#navbarSupportedContent {
	justify-content: center;
}

	
	
	
	
	
}