/* CSS Document */

/* colors */
body{background-color:rgba(233,233,233,1.00);} /* main page back */
.top-bar{background-color:rgba(233,233,233,1.00); color:rgba(191,164,111,1.00);} /* header bar */
.header-inner{color:rgba(233,233,233,1.00); color:rgba(191,164,111,1.00);} /* inner header bar */
.footer{background-color:rgba(233,233,233,1.00); color:rgba(191,164,111,1.00);} /* footer bar */
.overlay{background:rgba(0, 0, 0, 0.5);} /* main page cover */
.page-content, .page-content-1200{background-color: rgba(233,233,233,1.00);} /* page content area */
.page-title-box{background-color: rgba(217,217,217,1.00); color:rgba(191,164,111,1.00);} /* page - title box */
.page-cont-box{background-color: rgba(255,255,255,1.00); color:rgba(30,30,30,1.00);}  /* page - content box */
.page-title-box-sub{background-color: rgba(201,201,201,1.00); color: rgba(191,164,111,1.00);} /* page - sub title box */
.page-cont-box-sub{background-color: rgba(205,205,205,0.50); color: rgba(0,0,0,1.00);}  /* page - sub content box */


/* fonts */
.page-title-box, .page-title-box-sub{
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-family: 'Playfair Display', serif;
font-weight: 700;}

.page-cont-box,.page-cont-box-sub{
font-size: clamp(0.875rem, 1.5vw, 1rem);
font-family: 'Playfair Display', serif;}


/* Reset some defaults */
body {
margin: 0;
font-family: 'Playfair Display', serif;
display: flex;
flex-direction: column;
min-height: 100vh; /* Exact viewport height */
overflow: auto;} /* No scroll unless needed */


input, textarea, select, button {font-family: 'Playfair Display', serif;}

/*---------------------Error txt----------------------*/
.errortxt, .errortxtf{
background-color: rgba(0,0,0,0);
color: rgba(255,0,4,1.00);
border: none;
font-size: 16px;
font-family: 'Playfair Display', serif;
overflow-y: auto;
word-wrap: break-word;
resize: none;
/*-ms-overflow-style: none;*/
}

.errortxt{display: inline-block;}
.errortxtf{position:absolute; display: block;}

.errortxt p{margin: 0px;}


html, body {
margin: 0;
padding: 0;
width: 100%;
height: auto;}

.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 45px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);}

.header-inner {
display: flex;
align-items: center;
width: 100%;
padding: 0 15px;
height: 45px;}

.menu-toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;}

.header-title {
flex: 1;
display: flex;
justify-content: center;}

.header-title h1 {
font-size: 24px;
margin: 0;
text-align: center;
flex: 1;}

.header-title h1 a {text-decoration: none;}
@media screen and (max-width: 350px){.header-title h1 {font-size: 12px;}}

.header-icon-insta {
height: 25px;
width: 25px;
object-fit: contain;}

.page-content {
flex: 1; /* Takes remaining space */
display: flex;
justify-content: center;
align-items: center; /* Centers image vertically */
padding: 0;
height: calc(100vh - 45px - 25px);}

.page-content.home-page {margin-top: 10px;} /* if hero banner */
.page-content.other-page{margin-top: 45px;} /* not home page no hero banner */

.page-content-1200{
width: 100%;
max-width: 1200px;
min-height: 750px;
margin: 0 auto; /* Center horizontally */
padding: 0px;}

/* Footer */
.footer {
position: relative;
text-align: right;
margin-top: auto; /* Push footer to bottom */
padding-right: 25px; /* Extra space on the right */
height: 25px;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Optional shadow for separation */}

.footer-inner{
display: flex;
justify-content: center;
margin: 0 auto;
width: 100%;}

.footer-inner {
display: flex;
justify-content: space-between; /* Push first <p> left and second <p> right */
align-items: center;
width: 98%;
height: 100%;
padding: 0 20px; /* Add horizontal padding */
font-size: 12px;}

/* Overlay - page cover */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh; /* Use viewport height */
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 998;}

.overlay.active{
opacity: 1;
pointer-events: auto;} /* Enable clicks when visible */

/* page boxes */
.page-title-box, .page-title-box-sub{
display: flex;
align-items: center; /* vertically centers text */
padding: 0.5rem 1rem;
margin: 0.5rem 0.25rem 0 0.25rem;
text-transform: uppercase;}

.page-cont-box,.page-cont-box-sub{
display: flex;
flex-direction: column; /* stack content vertically */
margin: 0 0.25rem 1rem 0.25rem;
padding: 0.25rem;
gap: 0.5rem; /* modern spacing */
flex: 1 1 auto;
min-height: 0; /* allows inner content to scroll */
overflow: auto;}

/* images *//* images *//* images *//* images *//* images *//* images *//* images */
.content-img { /* max width 500px, floats left allows text wrap */
display: block;/* removes inline gaps */
float: left;/* allows text to wrap around */
width: auto;/* avoid ‘100% + margins’ overflow */
max-width: min(500px, calc(100% - 2rem)); /* 2rem = left + right margins below */
height: auto;/* keeps aspect ratio */
margin: 0.5rem 1rem 0.5rem 1rem;/* space between image and text */
border-radius: 1px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);}

.center-img { /* max width 500px, centers, no text wrap */
display: block;/* no inline gaps */
width: 100%;/* responsive: scales down with container */
max-width: min(500px, calc(100% - 2rem)); /* subtract horizontal margins */
height: auto;/* preserve aspect ratio */
margin: 0.5rem auto 0.5rem auto; /* centers the image horizontally */
border-radius: 1px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);}

/*normal text for link*/
a.normal-link {
color: inherit;        /* Uses the parent element's text color */
text-decoration: none; /* Removes the underline */
font-weight: normal;}


.login-popup {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;}

.login-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
width: 300px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);}

.close-popup{
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
cursor: pointer;}

/*---------------------div button-----------------------------*/
.div_btn, .divf_btn{
text-align: center;
font-size: 12px;
font-family: 'Helvetica', 'Tahoma', 'Geneva', sans-serif;
color: rgba(146,136,136,0.85);
padding: 0px;
background-color:rgba(55,55,55,1.00);
border: solid;
border-color: black;
border-width: 1px;
border-radius: 0px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Chrome, Edge, Opera and Firefox */
}

.div_btn:hover, .divf_btn:hover{
cursor: pointer;
background-color:rgba(75,75,75,1.00);
box-shadow: 2px 2px 2px 2px rgba(1,1,1,0.25);}

.div_btn{display: inline-block;}
.divf_btn{display: block; position: absolute;}