/* ================================
   GENERAL LAYOUT (1)
   ================================ */
* { box-sizing: border-box; }
html, body 
{	height: 100%;
	background: #0b0f1a;
	font-family: sans-serif;
	text-align: justify;
	overflow-x: hidden;
	overflow-y: scroll;
  	scrollbar-width: none;
  	-ms-overflow-style: none;
	margin: 0;
  	padding: 0;    	
}
canvas#bgCanvas 
{	position: fixed;
  	display: block;
	top: 0;
  	left: 0;
  	width: 100vw;
  	height: 100vh;
  	z-index: 1;	
}

#animToggleBtn {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #00f5ff;
  color: #000;
  padding: 8px 12px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 30;
}

.company
{	display:block;
	position: fixed;
	float: 	left;
	width:	100%;
	/* border: solid cyan 1px; */
	/* background: rgb(10,50,100,0.7); */
	background: tranparent;
	line-height: 1.5;
	color: white;
	text-align: center;
	padding: 0% 0% 0% 0%;
	z-index:20;
}

.links
{	display:block;
	position: relative;
	float: 	left;
	width:	100%;
	/* border: solid yellow 2px; */
	/* background: rgb(255,255,255,1); */
	/* background: rgb(10,50,100,0.7); */
	background: darkorange;
	line-height: 1.5;
	color: navy;
	text-align: center;
	text-shadow:2px 3px 4px gray;
	/*margin-top:5%;*/
	padding: 0.5% 0% 0.5% 0%;
	z-index:20;
}

.gl1
{	visibility:	visible;
	color:		white;
	font-size:	1em;
	font-weight:	bold;
	line-height:	1.5;
	text-align:	center;
	text-shadow:	none;	
	text-indent:	0%;
	
	font-style:	normal;
	font-variant:	normal;
	font-stretch:	normal;
	letter-spacing:	normal;
	text-decoration:none;
	text-transform:	none;
	text-shadow:	2px 3px 4px gray;
	white-space:	normal;
	word-spacing:	normal;

	opacity:	1;
	margin:		0px 0px 0px 0px;
	padding: 	6px 3px 6px 3px;
	z-index:	20;
}

.gl1:hover
{	color:		white;
	font-size:	1.1em;
	font-weight:	bold;
	white-space: 	nowrap;
	box-shadow:	2px 2px 2px gray;
	background-color: rgb(10,100,255);
	padding: 	7px 10px 7px 10px;
	z-index:	20;
}

.gl2
{	visibility:	visible;
	color:		navy;
	font-size:	1.2em;
	font-weight:	bold;
	line-height:	1.5;
	text-align:	center;
	text-shadow:	none;	
	text-indent:	0%;
	font-style:	normal;
	font-variant:	normal;
	font-stretch:	normal;
	letter-spacing:	normal;
	text-decoration:none;
	text-transform:	none;
	white-space:	normal;
	word-spacing:	normal;

	opacity:	1;
	margin:		0px 0px 0px 0px;
	padding: 	6px 3px 6px 3px;
	z-index:	20;
}

.gl2:hover
{	color:		white;
	font-size:	1.1em;
	font-weight:	bold;
	white-space: 	nowrap;
	box-shadow:	2px 2px 2px gray;
	background-color: rgb(10,100,255);
	padding: 	7px 10px 7px 10px;
	z-index:	20;
}
.divL
{	display:	block;
	position: 	absolute;
	float: 		left;
	
	left:		0%;
	top:		25%;
	width:		14%;
	/* height:	100%; */ 
	/* border: 	solid white 1px; */
	background:	transparent;
	/* box-shadow: 	1px 4px 3px gray; */
	text-shadow:	3px 2px 5px gray;

	color:		navy;
	font-Size: 	1em;
	/* font-weight:	bold; */
	text-align:	center;
	
	margin:		0px 0px 0px 0px;
	padding:	1% 1% 1% 1%;
	z-index:	10;
}

.divR
{	display:	block;
	position: 	absolute;
	float: 		right;
	
	right:		0%;
	top:		40%;
	width:		14%;
	/* height:	100%; */
	/* border: 	solid white 1px; */
	background:	transparent;
	/* box-shadow: 	1px 4px 3px gray; */
	text-shadow:	3px 2px 5px gray;

	color:		navy;
	font-Size: 	1.2em;
	/* font-weight:	bold; */
	text-align:	center;
	
	margin:		0px 0px 0px 0px;
	padding:	1% 1% 1% 1%;
	z-index:	10;
}

.add2anyL, .add2anyR
{	text-align:center;
	margin-left:20%;
}

#cc 
{	position: relative;
  	display: block;
  	width: 70%;
  	height: auto; /* 1000%; */
	/* border: 4px solid white; */
	/* background: cyan; */
	margin: 11.2% auto 0 auto;	
  	/* margin-top: 11.2%; */
	z-index: 2;
}

#insd 
{	position: relative;
  	display: block;
  	width: 100%;
  	/* height: 1000%; */
  	/* border: 2px solid white; */
	/* background: rgb(10,50,100); */ /*transparent; */
  	overflow-y: scroll;
  	scrollbar-width: none;
  	-ms-overflow-style: none;
	color: white;
	margin: 0 auto;
  	margin-top: 45%;
  	z-index: 3;
}

#insd::-webkit-scrollbar 
{	display: none;
}

#insd1, #insd2, #insd3, #insd4, #insd5
{	display: block;
	position:relative;
	float: 	left;
	width: 	100%;
	/* height: 100px; */
    	border: solid white 1px;
	/* background: white; */
	color: black;
	/* vertical=align:center; */
	margin:	0px 0px 0px 0px;
	padding:1% 1% 1% 1%;
	z-index:20;
}

#insd1
{	background: navy;
	color: white;
	text-align: center;
	fontt-size: 2em
	font-weight:bold;	
}

#insd2
{	background: white;
	color: black;
	text-align: justify;
	fontt-size: 1.2em;
	font-weight:normal;
	line-height: 1.5;
	/* text-shadow: 2px 3px 3px gray; */
	padding: 1% 3% 1% 3%;	
}

#insd3
{	background:transparent;
	color: black;
	text-align: justify;
	font-size: 1.2em;
	font-weight:normal;
	line-height: 1.5;
	/* text-shadow: 2px 3px 3px gray; */	
	/* padding: 1% 3% 1% 3%; */	
}

#insd4
{	background: white;
	color: black;
	text-align: justify;
	font-size: 1em;
	font-weight:normal;
	text-shadow: 2px 3px 3px gray;	
	/* padding: 1% 3% 1% 3%; */	
}

#insd5
{	background: white;
	color: black;
	text-align: center;
	font-size: 1.2em;
	font-weight:bold;
	/* padding: 1% 3% 1% 3%; */	
}

#insd7
{margin-bottom:5%;
}
	
.thanks
{	height: ;
	color:	white;
	text-align: center;	
	margin:	0px 0px 0px 0px;
	padding:2px 2px 2px 2px;
}

ul.list1 
{	list-style-position: outside;
 	list-style-type: circle;
	/* list-style-image: url('sqpurple.gif'); */
	font-size:1.2em;
	margin: 1% 3% 1% 3%;
}

ul.list2 
{	list-style-position: outside;
 	list-style-type: square;
	/* list-style-image: url('sqpurple.gif'); */
	font-size:1.2em;
	margin: 1% 3% 1% 3%;
}

.showhide1
{display:block;
 /* display:none; */
 /* For developer tracking block (Error Tracking) */
}
.showhide2
{/* display:block; */
 display:none;
 /* For developer tracking block (Program Flow Tracking) */
}
.showhide3
{display:block;
 /* display:none; */
 /* For developer tracking block (API Prompt Tracking) */
}
.showhide4
{display:block;
 /* display:none; */
 /* For specific area in member page (Info/Facility/Utility 1) */
}
.showhide5
{display:block;
 /* display:none; */
 /* For specific area in member page (Info/Facility/Utility 2) */
}
.showhide6
{display:block;
 /* display:none; */
 /* For specific area in member page (Message 1) */
}
.showhide7
{display:block;
 /* display:none; */
 /*  For specific area in member page (Message 2) */
}
/* ================================
   GENERAL LAYOUT (2)
   ================================ */
.outer-div 
{ width: 100%;
  display: flex;
  background: ; 
  /* border: solid red 0px; */
  justify-content: center;
  padding: 1% 1% 1% 1%;
}

.inner-div {
  width: 86%;
  /* background: #ffa94d; */
  /* border: solid red 0px; */
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  overflow: hidden;
  box-sizing: border-box;
}

.top-div,
.bottom-div {
  background: ;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  color: navy;
  padding: 1% 1% 1% 1%;
  font-weight: bold;
}

.top-div { border-radius: 20px 20px 0 0; }
.bottom-div { border-radius: 0 0 20px 20px; }

.middle-div {
  display: flex;
  gap: 20px;
  align-items: stretch; /* stretch columns to equal height */
  padding: 3%;
}

.middle-div .column {
  flex: 1;
  position: relative;
}

.middle-div .left img {
  width: 100%;
  border-radius: 10px;
  box-shadow: inset -5px 0 10px rgba(0,0,0,0.5); /* left shadow */
}

/* ================================
   SPIRAL DIVIDER
   ================================ */
.spiral-divider {
  width: 45px;                     /* Width of middle bar */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;           /* Stack symbols vertically */
  justify-content: flex-start;      /* Start from top */
  align-items: center;              /* Center horizontally */
  padding: 5px 0;                   /* Top/Bottom padding */
  /* background: linear-gradient(to right, #b30000 40%, #660000 60%); */ /* Base color gradient */
  border-radius: 6px;
  /* box-shadow:  */
  /*   inset 2px 0 4px rgba(255,255,255,0.3), */
  /*   inset -2px 0 4px rgba(0,0,0,0.4); */
}

/* ------------------------
   SPIRAL SYMBOLS
   ------------------------ */
.spiral-divider span {
  display: block;                   /* Each symbol goes on a new line */
  font-size: 24px;                  /* Symbol size */
  line-height: 2;                 /* Base spacing (used if you want proportional spacing) */
  color: blue;                       /* Symbol color */
  margin-bottom: 10px;              /* ✅ CUSTOMIZABLE vertical gap */
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Optional metallic shadow effect */
}

/* Adjust gap by changing margin-bottom: 
   Example: smaller gap → 5px
            larger gap → 15px
*/


/* [S]=======================[indexFile] */
#app 
{display: flex; 
 /* min-height: 100vh;  */
 background: #f7f9fb; 
 flex-direction: column;  
}
#header 
{position: fixed; 
 display:flex; 
 top:0; 
 left:0; 
 right:0; 
 height: 64px; 
 background:navy; 
 color:white; 
 align-items:center; 
 justify-content:space-between; 
 padding: 0 16px; 
 z-index: 1000; 
}
#header-left, #header-center, #header-right 
{display:flex; 
 align-items:center; 
}
#header-center 
{flex:1; 
 justify-content:center; 
 font-weight:700; 
 letter-spacing:0.5px; 
}
.debug-box {
  background: #fff3cd;
  color: #856404;
  padding: 8px 12px;
  border: 1px solid #ffeeba;
  font-size: 12px;
  margin: 5px;
}

/* spacer takes same height */
#header-spacer 
{  height: 64px;  
   background:white;
}
@media (max-width: 768px) 
{#header{height: 50px;padding-bottom:10px;}
 #header-spacer{height: 30px;}
}
.vsdiv
{position:relative;
 float:left; 
 width:100%;
 background:blue; 
 margin:0% 0% 0% 0%;
 padding:0% 0% 0% 0%;
}

#page 
{display:block; 
 position:relative; 
 margin-top:64px; 
 margin-bottom:56px; 
}
#main-content 
{display:block; 
 position:relative; 
 float:left; 
 width:86%; 
 border-radius:16px; 
 box-shadow: 0 6px 20px rgba(0,0,0,0.08); 
 background:#ffffff; 
 font-family: sans-serif; 
 font-size: 1em; 
 margin-left: 7%; 
 padding: 2% 2% 2% 2%; 
 z-index:10; 
}
#tabs 
{display:flex; 
 gap:8px; 
 margin-bottom:16px; 
}
#tab-login, #tab-signup 
{flex:1; 
 border-radius:12px; 
 background:#e2e8f0; 
 cursor:pointer; 
 text-align:center; 
 padding:10px; 
}
#tab-login.active, #tab-signup.active 
{background:#0ea5e9; color:#fff; 
}
#panel 
{border:1px solid #e2e8f0; 
 border-radius:14px; 
 background:#f8fafc; 
 padding:16px; 
}
#flash 
{border-radius:8px; 
 margin-bottom:12px; 
 padding:10px; 
}
#flash-ok 
{background:#d1fae5; 
 color:#065f46; 
}
#flash-err 
{background:#fee2e2; 
 color:#991b1b; 
}
.form-row 
{display:flex; 
 flex-direction:column; 
 margin-bottom:12px; 
}
.form-label 
{font-size:0.95em; 
 margin-bottom:6px; 
}
.form-input 
{border:1px solid #cbd5e1; 
 border-radius:10px; 
 padding:10px; 
}
.form-help 
{font-size:0.85em; 
 color:#475569; 
}
.error 
{display:block; 
 color:red; 
 font-size:0.85em; 
 margin-top:6px; 
}
.error-highlight 
{border-color:red !important; 
}
#btn-submit 
{border:none; 
 border-radius:12px; 
 background:#10b981; 
 color:#fff; 
 cursor:pointer; 
 font-weight:600; 
 padding:10px 16px; 
}
#btn-submit:active 
{transform: scale(0.98); 
}
#footer 
{display:flex; 
 position: fixed; 
 left:0; 
 right:0; 
 bottom:0; 
 width:100%;
 height:56px; 
 background:navy; 
 color:white; 
 align-items:center; 
 justify-content:space-between; 
 padding: 0 16px; 
 z-index: 1000; 
}
#footer-left
{
}
#footer-center 
{text-align:center; 
 flex:1; 
}
#footer-right
{
}
#responsive 
{display:none; 
}
#toggle-btn 
{border:none; 
 border-radius:10px; 
 background:#e2e8f0; 
 cursor:pointer;  
 color:#0f172a; 
 padding:10px 14px; 
}
#toggle-btn:active 
{transform: scale(0.98); 
}

/* [E]=======================[indexFile] */
/* [S]=======================[memberFile] */
/* [S]=====================================[S][For Service Section] */
/* ---------- Service Section Scroll ---------- */
.member-services {
    max-height: 400px;       /* Adjust the height as needed */
    overflow-y: auto;        /* Enable vertical scroll when content exceeds max-height */
    border: 1px solid #ccc;  /* Optional: border for visual separation */
    padding: 10px;           /* Optional: inner spacing */
    background-color: #f9f9f9; /* Optional: background */
}

/* Optional: style the table inside service section */
.member-services table {
    width: 100%;
    border-collapse: collapse;
}

.member-services th, 
.member-services td {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: left;
}

.member-services th {
    background-color: #e0e0e0;
}
/* [E]=====================================[E][For Service Section] */
/* [S]=====================================[S][For Scrollable Billing table:] */
.member-billing {
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    margin-bottom: 20px;
}

.billing-scroll {
    max-height: 350px;   /* adjust as needed */
    overflow-y: auto;
    margin-top: 10px;
}

.billing-scroll table {
    width: 100%;
    border-collapse: collapse;
}

.billing-scroll th, .billing-scroll td {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: left;
}

.billing-scroll th {
    background-color: #e0e0e0;
    position: sticky;
    top: 0;
}

/* [E]=====================================[E][For Scrollable Billing table:] */
/*  ======================================================== */
/* Parent Container */
.grid-container
{	display: grid;
	grid-template-rows: auto; /* Automatically adjust row height */
	/* grid-template-columns: repeat(5, 1fr); */ /* 5 equal columns */
	grid-template-columns: 19% 19% 19% 19% 19%;
	gap: 10px; /* Spacing between grid items */
	
	width: 100%;
	border: solid navy 2px;
	background-color: lightblue;
	/* margin-left: 15%; */
	padding: 10px;
	/* max-width: 100%; */ /* Prevent overflow */
	box-sizing: border-box; /* Include padding and border in width */
}

.header-row 
{	grid-column: span 5; /* Span all 5 columns */
  	background-color: navy; /* #f0f0f0; */
  	color: white;
	text-align: center;
  	font-weight: bold;
  	padding: 10px;
}

.grid-container > div 
{	padding: 10px;
  	border: 1px solid #ddd;
  	text-align: center;
}

.hide4big
{	display: none;
}

/*  ======================================================== */
/* Grid Items */
.grid-item 
{	border: solid #ccc 1px;
	padding: 10px;
	text-align: center;
	background-color: #f9f9f9;
	word-wrap: break-word; /* Prevent text overflow */
}

.csn
{	background-color: navy;
}

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

/* [E]=======================[memberFile] */
/* [S]=======================[aiFile] */
/* +++++++++++++++++++++++++++++++[S][for sr1c-email-inc] */
.email-generator 
{     width: 70%; margin: auto; background: #fff; padding: 20px;
      border-radius: 8px; box-shadow: 0 0 10px #ccc; box-sizing: border-box;
}
    
h2 { text-align: center; margin-bottom: 20px; }
    
form 
{     display: grid; grid-template-columns: 1fr 1fr;
      gap: 20px;
}

label { font-weight: bold; margin-bottom: 5px; display: block; }
input, textarea, select 
{      width: 100%; padding: 10px; font-size: 14px; box-sizing: border-box;
}
    
.full-width { grid-column: 1 / 3; }
button 
{     grid-column: 1 / 3; padding: 12px; font-size: 16px;
      background: #0066cc; color: white; border: none; border-radius: 5px; cursor: pointer;
}
    
button:hover { background: #004d99; }
@media (max-width: 768px) 
{     form { grid-template-columns: 1fr; }
      .full-width { grid-column: 1 / 2; }
}
/* +++++++++++++++++++++++++++++++[E}[for sr1c-email-inc] */

#devPrompt
{	display:block;
	width:100%;
	background:#f9f9f9;
	border:solid red 5px;
	border-radius:6px;
	color: black;
	font-family: sans-serif;
	font-size:1.2em;
	line-height:1.5;
	white-space:pre-wrap; 
	word-wrap:break-word;
	margin-left:2%;	
	padding-left:2%;
	z-index:250;	
}

#srvOutput
{	width:100%;
	background:#f9f9f9;
	border:solid green 5px;
	border-radius:6px;
	font-family: sans-serif;
	font-size:1.2em;
	line-height:1.5;
	margin-left:2%;	
	padding-left:2%;
	z-index:25;	
}

#ond
{	display:block;
	width:100%;
	background:#f9f9f9;
	border:solid navy 5px;
	border-radius:6px;
	font-family: sans-serif;
	font-size:1.2em;
	line-height:1.5;
	margin-left:2%;	
	padding-left:2%;
	padding-bottom:2%;
	z-index:25;	
}

.ais-generator, .email-generator 
{     width: 100%; margin: auto; background: #fff; padding: 20px;
      border-radius: 8px; box-shadow: 0 0 10px #ccc; box-sizing: border-box;
}

#promptOp
{	white-space: 
	pre-wrap; word-wrap: 
	break-word;
	
	width:90%;
	background:#f9f9f9;
	border:solid brown 1px;
	border-radius:6px;
	font-family: sans-serif;
	font-size:1.2em;
	line-height:1.5;
	/* margin-left:2%; */	
	padding:2% 2% 2% 2%;
	z-index:25;	
}

#feedback
{	width:100%;
	background:#f9f9f9;
	border:solid red 5px;
	border-radius:6px;
	font-family: sans-serif;
	font-size:1.2em;
	line-height:1.5;
	margin-left:2%;	
	padding-left:2%;
	z-index:25;	
}
h2 { text-align: center; margin-bottom: 20px; }
    
form 
{     display: grid; grid-template-columns: 1fr 1fr;
      gap: 20px;
}

label { font-weight: bold; margin-bottom: 5px; display: block; }
input, textarea, select 
{      width: 100%; padding: 10px; font-size: 14px; box-sizing: border-box;
}
    
.full-width { grid-column: 1 / 3; }
button 
{     grid-column: 1 / 3; padding: 12px; font-size: 16px;
      background: #0066cc; color: white; border: none; border-radius: 5px; cursor: pointer;
}
    
button:hover { background: #004d99; }

/* [E]=======================[aiFile] */
/* [S]=======================[essentialFile] */

/* [E]=======================[essentialFile] */
/* [S]=======================[etcFile] */

/* [S]=======================[etcFile] */
/* [+]%%%%%%%%%%%%%%%%%%%%%%%[>>] */
/* [*][...][...][...][...][...][...][>>] */
/* ========================================
   UNIVERSAL MOBILE FONT SIZE CONTROL
   ======================================== */
@media (max-width: 768px) 
{ /* Apply to all elements */
  * {
    font-size: clamp(1em, 4vw, 2em) !important;
    line-height: 1.4 !important;
  }

  /* Special handling for headings (if you want them slightly bigger) */
  h1, h2, h3, h4, h5, h6 {
    font-size: clamp(1.2em, 5vw, 2em) !important;
    font-weight: bold;
  }

  /* Buttons and links should also respect this */
  button, a {
    font-size: clamp(1em, 4vw, 1.5em) !important;
  }
}
/* ======================================== */
/* ================================
   RESPONSIVE FOR MOBILE
   ================================ */
@media (max-width: 768px) 
{ .middle-div {
    flex-direction: column;          /* Stack columns vertically */
    gap: 10px;
  }
  .spiral-divider {
    width: 90%;                     /* Full width horizontal spiral */
    flex-direction: row;             /* Stack symbols horizontally */
    justify-content: center;
    padding: 5px 0;
  }
  .spiral-divider span {
    margin-bottom: 0;               /* Remove vertical gap in horizontal layout */
    margin-right: 5px;              /* Horizontal gap between symbols */
    font-size: 18px;                /* Smaller symbols for mobile */
  }
 .links
 { margin-top:0%;
 }

 #app, #header, .company, .links
 {/*  width:100%; */}
}
@media (max-width: 1024px) 
{	.grid-container 
	{	grid-template-columns: 19% 19% 19% 19% 19%; /* Original column sizes */
       	}
}

@media (max-width: 768px) 
{	.links
	{ margin-top:3%;
	}
	#cc 
	{ width: 100%; 
	  /* margin: 60% auto 0 auto; */
	}
  	#insd 
	{ width: 100%; }
	.divL, .divR
	{ width: 100%;
	}
}

@media (max-width: 768px) 
{	.grid-container 
	{	/* grid-template-columns: 1fr 1fr; */ /* Switch to 2 columns for smaller screens */
		grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
        }

	.header-row 
	{	grid-column: span 2; /* Span all columns in the new layout */
	}

	.grid-container > div
	{	/* grid-template-columns: 1fr 1fr;*/  /* Switch to 2 columns for smaller screens */
	}

	.hide4big
	{	display: block;
	}
}

@media (max-width: 480px) 
{	.grid-container 
	{	grid-template-columns: 1fr; /* Single column for very small screens */
        }

	.header-row 
	{	grid-column: span 1; /* Span all columns in the new layout */
	}

	.grid-container > div
	{	/* grid-template-columns: 1fr 1fr; */ /* Switch to 2 columns for smaller screens */
	}
	.hide4big
	{	display: block;
	}
}
/* ========================================
   UNIVERSAL MOBILE RESPONSIVE CONTROL
   ======================================== */
/* ✅ Mobile / Small Screens */
@media (max-width: 768px) 
{/* Remove fixed from the main footer */
 #footer 
 {position: static;        /* Not fixed anymore */
  flex-direction: column;  /* Stack vertically */
  height: auto;
  padding: 10px;
  text-align: center;
 }

 /* Only footer-left stays fixed */
 #footer-left 
 {position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: navy;
  color: white;
  z-index: 1001;
  padding: 8px 0;
 }

 /* Center and Right scroll normally */
 #footer-center,#footer-right 
 {width: 100%;
  margin: 5px 0;
 }

 /* Add bottom padding to page content so fixed part won't overlap */
 body 
 {padding-bottom: 60px; /* adjust if needed */ }
}
@media (max-width: 768px) 
{     form { grid-template-columns: 1fr; }
      .full-width { grid-column: 1 / 2; }
}

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

/* ================================================== */
.faq-block{
  width:100%;
  margin:20px 0;
  color:#000;
}

.faq-heading{
  margin-bottom:12px;
  padding:10px 12px;
  background:navy; /* #f1f1f1; */
  border-left:10px solid red;
  box-shadow:3px 4px 5px gray;
  color:white;
  font-size:1.4em;
  font-weight:bold;
}

.faq-item{
  border:1px solid #ccc;
  margin-bottom:10px;
  border-radius:4px;
  overflow:hidden;
  color:black;
  font-size:1.2em;
  font-weight:normal;
}

.faq-q{
  margin:0;
  padding:12px;
  background:rgb(180,200,255); /* #e9e9e9; */
  cursor:pointer;
  font-size:1em;
  font-weight:bold;
}

.faq-q:hover{
  background:#dcdcdc;
}

.faq-a{
  display:none;
  padding:12px;
  background:#ffffff;
  border-top:1px solid #ccc;
  line-height:1.6;
  /* opacity: 0; */
  /* transform: translateY(-10px); */
  /* transition: opacity 0.3s ease, transform 0.3s ease; */
}
.faq-a.open 
{/*
  display: block;
  opacity: 1;
  transform: translateY(0);
*/
}
/* ================================================== */
h1 
{font-size: 2em;
 /* margin: 10px 0; */
}

h2 
{ font-size: 2em;
  /* margin: 8px 0; */
}

h3 
{ font-size: 1.5em;
  /* margin: 6px 0; */
}

p 
{  font-size: 1em;
}
/* ================================================== */
/* =============================================== */
.debug-box {
  background: #fff3cd;
  color: #856404;
  padding: 8px 12px;
  border: 1px solid #ffeeba;
  font-size: 12px;
  margin: 5px;
}
#header 
{ 
}
/* spacer takes same height */
#header-spacer 
{  height: 64px;  
   background:white;
}
@media (max-width: 768px) 
{#header{height: 50px;padding-bottom:10px;}
 #header-spacer{height: 30px;}
}
/* ============================= */
/* NAV BASE */
#main-nav {
  background: #001f4d;
  width:100%;
}

/* HAMBURGER BUTTON */
#nav-toggle {
  display: none;
  width: 100%;              /* full width clickable */
  padding: 14px 16px 14px 16px;  /* large tap area */
  font-size: 18px;
  background: navy;
  color: white;
  border: none;
  text-align: left;
  cursor: pointer;
}

/* DESKTOP MENU */
.nav-desktop {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-desktop li a {
  display: block;
  padding: 12px 16px;
  color: white;
  text-decoration: none;
}

/* MOBILE MENU BASE */
.nav-mobile {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  background: navy;
}

/* FULL ROW CLICKABLE LINKS */
.nav-mobile li a {
  display: block;           /* makes whole row clickable */
  width: 100%;
  padding: 14px 16px;       /* thumb-friendly */
  color: white;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.2);
}

/* HOVER / TAP EFFECT */
.nav-mobile li a:hover,
#nav-toggle:hover {
  background: #003366;
}

/* 📱 MOBILE MODE */
@media (max-width: 768px) 
{ #main-nav 
  {/* background:yellow; */
   width:100%;
   padding: 20px 20px 20px 20px;  /* large tap area */
  } 
  #nav-toggle 
  { display: block;
    min-width:  48px;
    min-height: 48px;
    width:  200px;
    /* height: 70px; */
    font-size: 28px;
    margin-top:20px;
    padding: 20px 20px 20px 20px;  /* large tap area */
    z-index: 9999; /* higher than nav items */
  }
  .nav-desktop 
  {display: none;}
  .nav-mobile.active 
  {display: block;}
  #mainnav{display:none;}
  .nav-desktop{display:none;}
  .nav-mobile{display:block;}
}
.nav-desktop{display:none;}
.nav-mobile{display:none;}
#mainnav{}
* { /* outline: 1px solid red;*/ }
/* ++++++++++++++++++++++++++++++++++++ */
.middle-div {
  display: flex;
  align-items: stretch; /* important */
}
.spiral-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;        /* controls symbol size */
  line-height: 1;
  user-select: none;
}
/* ++++++++++++++++++++++++++++++++++++ */
.middle-div {
  display: flex;          /* make columns equal height */
  align-items: stretch;   /* stretch to tallest column */
}

.column.left,
.column.right {
  flex: 1;                /* both take equal height */
}

.spiral-divider {
  width: 40px;            /* adjust as needed */
  display: flex;
  align-items: stretch;   /* very important */
  justify-content: center;
}
@media (max-width: 768px) 
{#spiral-divider1, #spiral-divider2, #spiral-divider3
 {display:none;}
}
/* ++++++++++++++++++++++++++++++++++++ */
/* =========================================
   GLOBAL FONT SYSTEM (DESKTOP DEFAULT)
   ========================================= */

html {
  font-size: 100%;        /* 16px desktop base */
}

body {
  font-weight: 400;
  line-height: 1.5;
}

/* Use rem everywhere in your site */
h1 { font-size: 2rem;   font-weight: 700; }
h2 { font-size: 1.6rem; font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }

p, li, span, a, label, input, button, textarea {
  font-size: 1rem;
  font-weight: inherit;
}

/* =========================================
   TABLET CONTROL
   ========================================= */
@media (max-width: 1024px) {
  html {
    font-size: 95%;   /* slightly smaller */
  }
}

/* =========================================
   MOBILE MASTER CONTROL
   🔥 CHANGE ONLY html FONT-SIZE TO SCALE ALL
   ========================================= */
@media (max-width: 768px) {

  html {
    font-size: 90%;   /* 🔧 MASTER MOBILE SCALE */
  }

  body {
    font-weight: 400;
    line-height: 1.4;
  }

  * {
    font-size: 1rem;
    font-weight: inherit;
  }

  /* prevent too-bold headings on mobile */
  h1, h2, h3, h4, h5, h6,
  b, strong {
    font-weight: 600;
  }

}

/* =========================================
   EXTRA SMALL PHONES
   ========================================= */
@media (max-width: 480px) {
  html {
    font-size: 85%;
  }
}
/* ++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++ */
/* Header title layout */
.site-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* H2 already controlled by your rem system */
.site-text {
  font-size: 1.6rem;   /* your existing h2 size */
  margin: 0;
  line-height: 1;
}

/* LOGO auto matches text height */
.site-logo {
  height: 2em;         /* 🔥 SAME as font size */
  width: auto;
  display: block;
}
@media (max-width: 480px) 
{ .site-logo 
  {height: 1.5em;         /* 🔥 SAME as font size */
   width: auto;
   display: block;
  }
}
#insd1.site-title {
  display: inline-flex;     /* 🔥 key change */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#insd1 {
  text-align: center;       /* center the inline-flex block */
  width: 100%;
}
/* ++++++++++++++++++++++++++++++++++++ */
/* ========================================= */
/* =========================================
   MOBILE TYPOGRAPHY – CLEAN & READABLE
   ========================================= */
@media (max-width: 768px) 
{ /* Force normal weight (no bold) */
  * {font-weight: 400 !important; }

  /* Headings – slightly stronger but not bold */
  h1 { font-size: 22px; font-weight: 400 !important; }
  h2 { font-size: 20px; font-weight: 400 !important; }
  h3 { font-size: 18px; font-weight: 400 !important; }
  h4 { font-size: 17px; font-weight: 400 !important; }
  h5 { font-size: 16px; font-weight: 400 !important; }
  h6 { font-size: 15px; font-weight: 400 !important; }
}
/* ========================================= */