/* 1. Ensure the parent elements completely restrict horizontal overflow */




/* 2. Fix the .content block (especially inside the media query) */

    
    /* 3. Fix the menu button widths on mobile */
  
    
    /* 4. Fix margins on the text block so they don't push outside the grid */
    .con {
        margin: 10px 0; /* Changed from 20px all-around to 10px top/bottom, 0 left/right */
    }
}

html, body {
    width: 100%;
    overflow-x: hidden;
}


*, *::before, *::after {
	box-sizing: border-box;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.mobcontent{
	display:none;
}

.the_page {
    width: 100%;
    min-height: 100vh;
    background-image: url('images/eric.png'); 
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow-x: hidden; /* Prevents background elements from breaking out */
}
.content{
	width: 100%;
	min-height: 100vh;
	display: grid;
	grid-gap:5px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas:
	"log log log tag"
	"apl con con men"
	"fot fot fot fot";
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 18px;
	justify-content: center;
	padding:30px;
	border:#000000 3px double;
}




.logo{
	width:100%;
	max-width: 500px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.menlogo{
	width:100%;
	text-align:center;
}

.logbox{
	padding:20px;
}
.deslog{
	display:block;
}
.moblog{
	display:none;
}
.mentag{
	display:none;
}

.con{
        margin: 10px 0;
	background-color:#000000AA;
	color:#FFFFFF;
	padding:18px;
	border:#FFFFFF 2px solid;
	border-radius:40px; 
	box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.con a{
	color:#00FFFF;
	text-decoration:none;
}

.con a:hover{
	color:#FFFF00;
	text-decoration:none;
}
.apl{
	padding:12px;
	text-align:center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center; 
}
.men{
	padding:12px;
	text-align:center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}




.tag{
	display: grid;
	width: 100%;
	grid-gap:5px;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
	"img txt"
	"img and";
	align-items: center;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 18px;
	text-align:center;
	background: #daa669BB; 
	color:#853a1c;
	border:#FFFFFF 2px solid;
	border-radius:20px; 
	padding:10px 10px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.5);       
}

.floating-image-link {
	display: block;
	width: 180px; /* Adjust size as desired */
	height: 300px; /* Portrait aspect ratio */
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 20px rgba(0,0,0,0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	animation: float 4s ease-in-out infinite;
}
.floating-image-link:hover {
	transform: scale(1.03);
	box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
.floating-image-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Subtle floating animation */
@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-8px); }
	100% { transform: translateY(0px); }
}
.menu-btn {         
	display: inline-flex;
	align-items: center;  
	justify-content: center;
	width: 300px;
	height: 40px;
	background: rgba(0, 0, 0, 0.4);            
	color: #ffffff;            
	border: 1px solid rgba(255, 255, 255, 0.4);            
	padding: 0 18px;            
	margin:3px;
	font-size: 0.85rem;            
	font-weight: 700;            
	text-transform: uppercase;            
	letter-spacing: 1.5px;            
	text-decoration: none;            
	border-radius: 10px;            
	text-align: center;            
	transition: all 0.3s ease;            
	backdrop-filter: blur(4px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);

}       
.menu-btn:hover {            
	background: #ffffff;            
	color: #1a1a1a;            
	border-color: #ffffff;            
	box-shadow: 0 4px 12px rgba(0,0,0,0.4);            
	transform: translateX(-3px); /* Subtle nudge left on hover */        
}        
 
/* Active state (matches your hover effect or uses a distinct color) */
.menu-btn.active {
	background: #ffffff;
	color: #1a1a1a;
	border-color: #ffffff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.mobile-only-btn {
	display:none;
}
.short_menu_show{
	display:none;
}


.footer{
	color:#FFFFFF;
	padding-top:20px;
	text-align:center;
	background: rgba(0, 0, 0, 0.4);     
	border:#000000 2px solid;
	border-radius:20px;        
	box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.softag{
	color:#FFFFFF;
}
.num-input{
	font-size:18px;
	width:30px;
	height:30px;
	text-align:center;
	background-color:#FFFF00;
}

.inst{
	text-align:center;
	color:#660000;
}
.reggy {
    display: grid;
    width: 100%;
    grid-gap: 5px;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "reh reh"
        "dev pcl"
        "qr lnk";
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 16px;
    justify-content: center;
    padding: 10px;
}
.qr{
	display:block;
}

.exp{
	padding:12px;
	text-align:center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
}
.plk{
	padding:12px;
	text-align:center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

  .hidden-field { display: none !important; }
    .contact-form { max-width: 500px; margin: 20px auto; font-family: sans-serif; }
    .contact-form input, .contact-form textarea { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; }
    .contact-form button { background: #ff8b01; color: white; border: none; padding: 10px 20px; cursor: pointer; }
  }

/* ========================================================================================= */


@media (max-width: 1000px) {            
	h1{
		font-size:18px;
	}
	.content{
		display: grid;
		width: 100%;
		min-height: 100vh;
		grid-gap:5px;
		grid-template-columns: 1fr;
		grid-template-areas:
		"log"
		"con"
		"fot";
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 16px;
		justify-content: center;
		padding:10px;

	}
	.deslog{
		display:none;
	}
	.moblog{
		display:block;
	}
	.mentag{
		display:block;
		text-align:center;
		font-size:20px;
		color:#FFFFFF;
	}
	.apl{
		display:none;
	}
	.tag{
		display:none;
	}
	.men{
		display:none;
	}

	.mobile-only-btn {         
		display: inline-flex;
		align-items: center;  
		justify-content: center;
		width: 300px;
		height: 40px;
		background: rgba(0, 0, 0, 0.4);            
		color: #ffffff;            
		border: 1px solid rgba(255, 255, 255, 0.4);            
		padding: 0 18px;            
		margin:3px;
		font-size: 0.85rem;            
		font-weight: 700;            
		text-transform: uppercase;            
		letter-spacing: 1.5px;            
		text-decoration: none;            
		border-radius: 10px;            
		text-align: center;            
		transition: all 0.3s ease;            
		backdrop-filter: blur(4px);
		box-shadow: 0 10px 20px rgba(0,0,0,0.2);

	}       
	.mobile-only-btn:hover {            
		background: #ffffff;            
		color: #1a1a1a;            
		border-color: #ffffff;            
		box-shadow: 0 4px 12px rgba(0,0,0,0.4);            
		transform: translateX(-3px); /* Subtle nudge left on hover */        
	}        
	 
	.mobile-only-btn.active {
		background: #ffffff;
		color: #1a1a1a;
		border-color: #ffffff;
		box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	}

	.short_menu_show{
		display:block;
	}

	.reggy {
	    display: grid;
	    width: 100%;
	    grid-gap: 5px;
	    grid-template-columns: 1fr;
	    grid-template-areas:
		"reh"
		"pcl"
	 	"lnk"
		"dev"
		"qr";
	    font-family: Verdana, Geneva, Tahoma, sans-serif;
	    font-size: 16px;
	    justify-content: center;
	    padding: 10px;
	}
	.qr{
		display:block;
	}

	.exp{
		padding:12px;
		text-align:center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	.plk{
		padding:12px;
		text-align:center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
   
}