/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
	font-family: 'Poppins', sans-serif;
	background:#242124; 
}

a {
	color:#000;
	text-decoration: underline;
}

#container {
   /*width:90%;*/
   margin:0px auto;
   max-width:960px; 
   padding:0px; 
  border:1px solid #000;
   border-radius:12px; 
   background:#fff; 
   overflow: hidden;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


#container.iframed {
	border:none;
}


div.stage {
	min-height: 450px; 
	position: relative; 
	padding:0px 0px;
	flex: 1;
	padding-bottom: 0px; /* if footer overlaps */
	background: #fff;
}





/* re. modal popup .. */ 
.mfp-content {
	max-width:600px;
}

/* end of Modal */ 
	   
	   section#branding {
	   	text-align: center;
		   width:100%;
		   background-color:#000; 
		   color:black; 
		   display:table; 
		   text-shadow:none;
		   position: relative;
		   padding:0px;
		  
background-color: #f9ff60;
background-image: linear-gradient(315deg, #f9ff60 0%, #ffef77 74%);
		 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Soft, subtle shadow */
 	      
	            		   
	   }


#branding p.slogan {
    color: white; /* Main text color */
    -webkit-text-stroke: 1px black; /* Black stroke for readability */
    font-size: 1.3rem; /* Adjust as needed */
    font-weight: bold; /* Optional: to make the text stand out more */
	text-transform: uppercase;
}


 section#branding h1 {
    z-index: 3; 
	color: black;
	font-size: 2.3em;
    margin:30px auto; 
    max-width:300px; 
	font-family: 'Staatliches', cursive;
	letter-spacing: 7px; 
	 margin-bottom:2px; 

	   }

	   section#branding h1 a {
	   	  color:black;
	   	  text-decoration: none;
	   	  font-size:3rem;
	   }


section#branding h3 {
	margin-top:2px; 
	margin-bottom:8px; 
}


	   section#branding h4.slogan {
		font-family: "Poppins",sans-serif;
		font-size: 1rem;
		margin: 8px 0;
		padding: 0;	   	
	   }

	   
	   section#branding nav {
	   	margin:18px 0 20px 0;
		   display:flex; 
		   justify-content: center; 
		   gap: 10px;
	   }
	   

	   section#branding nav a,section#branding nav a:visited{
    display: inline-block;
    padding: 10px 20px; /* Adjusts button size */
    background-color: white; /* Makes the buttons white */
    color: black; /* Text color */
    text-transform: uppercase; /* Converts text to uppercase */
    font-weight: bold; /* Makes text bold */
	font-size:.9rem; 
    text-decoration: none; /* Removes underline */
    border-radius: 4px; /* Slightly rounds button corners */
    transition: 0.3s ease; /* Smooth hover effect */
	   }

	   section#branding nav a:hover{
    background-color: black; /* Inverts colors on hover */
    color: white; /* Text becomes white on hover */
	   }

	 section#branding nav a.active{
      background-color: black; 
      color: white; 
	  font-style: italic; 
	  }

img.arrow {
	position: absolute;	
	max-width: 230px;
	width: 28%;
	z-index: 1; 

}

img.mfp-img { /*magnifPop modal image */ 
	max-width:400px; 
}


img.arrow.arrow-pointRight {

	transform: rotateY(180deg);
	left: -30px;
	top: 10px;
	animation: pulseRight 1s ease-in-out 3;
}
img.arrow.arrow-pointLeft {

	right: -30px;
	top: 40px;
	animation: pulseLeft 1s ease-in-out 3;

}

@media (max-width: 558px) {
	
	img.arrow.arrow-pointLeft {
		top:55px; 
	}

	/* make nav links smaller */ 
	section#branding nav a,section#branding nav a:visited{
	  font-size:.8rem; 
	}

	   section#branding nav {

		   gap: 8px;
	   }	
	
} /* end of media query */ 
@media (max-width: 5000px) {
	

	/* make nav links smaller */ 
	section#branding nav a,section#branding nav a:visited{
	  font-size:.8rem; 
	  padding: 8px 12px; /* Adjusts button size */
	}

@media (min-width: 800px) {
	

	/* make nav links  */ 
	section#branding nav a,section#branding nav a:visited{
	  font-size:1rem; 
	}

	   section#branding nav {

		   gap: 14px;
	   }	
	
	
} /* end of media query */ 

@media (max-width: 405px) {
	
	   section#branding nav {
		   gap: 2px;
	   }
	/* make nav links smaller */ 
	section#branding nav a,section#branding nav a:visited{
	  padding: 6px 5px; /* Adjusts button size */
	}

	
	
} /* end of media query */ 



@keyframes pulseRight {
    0%, 100% {
        left: -30px;
    }
    50% {
        left: -85px;
    }
}

@keyframes pulseLeft {
    0%, 100% {
        right: -30px;
    }
    50% {
        right: -80px;
    }
}



/* General Hero Styling */
.hero-wrap {
    display: flex;
    align-items: center; /* Vertically centers content */
    justify-content: center; /* Centers the content horizontally in larger screens */
    max-width: 1200px;
    margin: 0 auto; /* Centers the hero within the page */
    padding: 20px;
    gap: 20px; /* Space between text and image columns */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Creates a soft shadow */
    margin-bottom: 20px; /* Adds spacing below the hero */	
	
}

/* Mobile-First Styles: Stacked Layout */
.hero-content {
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    text-align: center;
}

.hero-text {
    max-width: 500px;
    margin: 0 auto 20px auto;
}

.hero-image img {

    height: auto; /* Maintains aspect ratio */
    max-width: 400px; /* Limits image size for mobile */
}
	
	
/* re. ANIMATION OF HERO CONNIE COME TOGETHER */ 

.hero-text, .hero-image {
    position: relative;
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.hero-content > :nth-child(1) {
    transform: translateX(-50%);
}

.hero-content > :nth-child(2) {
    transform: translateX(50%);
}

.hero-content.animate > :nth-child(1), 
.hero-content.animate > :nth-child(2) {
    transform: translateX(0);
    opacity: 1;
}

/* for ALT */ 
	
.hero-alt-text, .hero-alt-image {
    position: relative;
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}	
	
.hero-alt-content > :nth-child(1) {
    transform: translateX(-50%);
}

.hero-alt-content > :nth-child(2) {
    transform: translateX(50%);
}

.hero-alt-content.animate > :nth-child(1), 
.hero-alt-content.animate > :nth-child(2) {
    transform: translateX(0);
    opacity: 1;
}
	
/* END OF HERO CONNIE COME TOGETHER */ 
	
	.hero-text {
        padding:2px 24px;
    }


/* Desktop Styles: Two Columns */
@media (min-width: 768px) {
    .hero-content {
        flex-direction: row; /* Aligns text and image side-by-side */
        text-align: left;
    }

    .hero-text {
        flex: 1; /* Allows text to take up one column */
    }

    .hero-image {
        flex: 1; /* Allows image to take up the other column */
        display: flex;
        flex-flow:column;
        justify-content: center; /* Centers the image within its column */
    }

    .hero-image img {
       
	
    }
}

/* Button Styles */
.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF; /* Blue button */
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.cta-button.homer {
	margin: 26px auto;
    display: block;
    text-align: center;
    max-width: 250px;
}


.cta-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
	transform: scale(1.05); 
}

.cta-button.elite {
    background-color: #FFD700; /* Gold button for Elite */
    color: black; /* Strong contrast for readability */
}

.cta-button.elite:hover {
    background-color: #E6C200; /* Slightly darker gold on hover */
	
}




/* Alternative Hero Section */
.hero-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    gap: 20px;
	   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Creates a soft shadow */
    margin-bottom: 20px; /* Adds spacing below the hero */	
}

/* Mobile-First Styles: Stacked Layout */
.hero-alt-content {
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    text-align: center;
}

.hero-alt-image img {
    width: 100%;
    height: auto;
    max-width: 400px; /* Ensures responsive sizing */
    margin-bottom: 20px; /* Adds spacing on small screens */
}

.hero-alt-text {
    max-width: 500px;
    margin: 0 auto;
}

/* Desktop Styles: Two Columns */
@media (min-width: 768px) {
    .hero-alt-content {
        flex-direction: row; /* Image on the left, text on the right */
        text-align: left;
		gap:16px; 
    }

    .hero-alt-image {
        flex: 1; /* Allocates one column to the image */
        display: flex;
        justify-content: center; /* Centers the image within its column */
    }
	
	.hero-alt-image img {
		max-width: 340px; /* Ensures responsive sizing */

	}

	

    .hero-alt-text {
        flex: 1; /* Allocates one column to the text */
        margin: 0;
    }
}

/* desired Action.. black CTA */ 

p.prompt-prepare {
	line-height: 1.5; 
	font-size:18px; 
	
}

.cta-button-final {
    display: block;
	text-align: center; 
	max-width:240px; 
	margin:24px auto; 
    padding: 12px 24px; /* Slightly larger for emphasis */
    background-color: #4CAF50; /* Bold green  base */
    color: white; /* High contrast text */
    text-transform: uppercase; /* Consistent with your other buttons */
    text-decoration: none; /* Removes any underline */
    border-radius: 8px; /* Slightly rounded for a modern look */
    font-weight: bold; /* Makes the text stand out */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effects */
}

/* Hover Effect */
.cta-button-final:hover {
    transform: scale(1.05); /* Slightly larger on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Adds a glowing shadow effect */
    background-color: #172A10; /* Darker shade for subtle variation */
}





.hero-border {
    display: flex;
    justify-content: center; /* Centers the diamonds */
    align-items: center;
    gap: 10px; /* Spacing between diamonds */
    margin-top: 20px; /* Adds space between hero and border */
}

.diamond {
    background-color: yellow;
    border: 2px solid black;
    transform: rotate(45deg); /* Turns square into a diamond */
}

/* Size Variations */
.diamond.small {
    width: 15px;
    height: 15px;
}

.diamond.medium {
    width: 25px;
    height: 25px;
}

.diamond.large {
    width: 35px;
    height: 35px;
}







h1 {
	font-size:1.7rem;
}


  h2 {
  	
  	border-bottom:1px solid #000;
  	padding-bottom:14px;
  	font-size:1.4rem;
  }

  p {
  	font-size:.88rem;
  }

p.smaller {
	font-size:.88rem; /* in case overridden */ 
}

p.noTop {
	/* no top margin */
	margin-top:2px; 
}


	   footer {
		   width:100%;
background-color: #f9ff60;
background-image: linear-gradient(315deg, #f9ff60 0%, #ffef77 74%);

		   color:black; 
		   text-align: center; 
	
		   padding:10px;
		   position: relative; 
		   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Soft, subtle shadow */
	   }


a.someLinks {
	background: linear-gradient(to right, #bbb, #999); /* Darker shift */

    padding: 8px;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Soft shadow */
    transition: all 0.3s ease-in-out;
}

a.someLinks:hover {
    background: linear-gradient(to right, #ccc, #bbb); /* Gentle gradient */
    color: #fff;
    transform: scale(1.05);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); /* Slightly deeper shadow */
}


footer a.someLinks {
	background:yellow; 
	opacity:.8; 
	
}

footer a.someLinks:hover {
    background: #767623;  /* Darker shift */
    color: #fff;
	opacity:1; 

}


	   footerLinks {
		   width:100%;
           background:#fff;
           text-align:right;
		   padding:10px;
	
		   
	   }



     div.footerLinks {
		padding-right:10px; 
     }

     div.footerLinks a,div.footerLinks a:visited {
/*
      color:black;
      
      font:.9rem Arial;
*/
     }

@keyframes slideInLeft {
    0% { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0); }
}



div.connie {
	position: relative;
	  animation: slideInLeft 0.8s ease-out;
	  background: #fff;
}

div#home_connie {
	background: #414A4C;
}


div.connie a.return {
	position: absolute;
	right:0;
	top:-14px;
	width:45px;
	height: 45px
}

div.connie a.return img {
	width:100%;
}

/* magnific popup */ 
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

/* buttons for going forward */ 


.buttonGo {
  display: inline-block;
  padding: 12px 24px;
    background: linear-gradient(to bottom, #2e8b57, #7ecf8f); /* dark to light green */
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  color: white;
  font-size: 1.2rem;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.buttonGo:hover {
  background: #4046ed;
  color: #eee;
  transform: translateY(-1px);
}

.buttonGo:active {
  background: #1b435e;
  transform: translateY(1px);
}


.grayGradient {
	padding:6px 14px;
    background: linear-gradient(to right, rgba(240, 240, 240, 1) 0%, rgba(230, 230, 230, 1) 30%, rgba(220, 220, 220, 1) 70%, rgba(255, 255, 255, 1) 100%);
    border-radius: 8px; /* Soft, rounded corners */

}

ul,ol {
/*	 list-style: none; */
	 margin: 1em 0; 
/*	 padding: 0;*/
	 margin-bottom:2px;
}


@media (max-width: 450px) {

 	   #container {

		   /*width:90%;*/
		   margin:0px auto;
		   width:100%;
		   border:none;
		   padding:0px; 
	
	      overflow: hidden;
   


	   } 

}