/* Dark Orange	#FF8C00 | rgb(255,165,0)   dark orange-->
<!--#203864 green	#17A589(23,165,137) #203864green
	Dark green	#023020 
	Dark red	#C70039(199,0,57)dark red
	moccasin	#FFE4B5	rgb(255,228,181) (light orange type
	lemonchiffon	#FFFACD	rgb(255,250,205)
	Navy #203864	#0504aa
	 very light silver #f8f8f8 248 248 248
	white silver #DADBDD	 RGB: 218, 219, 221
	 silver		#BCBDBF   RGB: 188, 189, 191
	 ruby 	#0b4c8c 
	 little dark lemonchiffon #FFE4B5;
	 light green:#90EE90
	 dark #203864: #034694 
	 dark red : #650000
	 light red  #FFB09C (255,176,156)
NavyBlue= #00308F  0, 48, 143
dARKgreen #203864 :  #203864 (32,56,100)
coral #FF7F50  rgb(255, 127, 80)
ultramarine blue #4166f5 | rgb(65,102,245)
Pink 	#fb607f | rgb(251,96,127)
Neon Blue	#000c66	rgb(31, 81, 255)


>>>>>>>>>FOR NSMI -----cadmium green #0b4c8c 9, 121, 105
.........FOR NSMI ----#E4D00A -228 208 10
 #BAC095
blue font color color:#0b4c8c; ==11,76,140

>>>>>>>>>Orange  #FFA500 R:255 G:165 , B:0
	--> 	*/
	
/*For the second combination with #2980B9 (Belize Hole Blue) as the primary color and #F39C12 (Orange) as the accent color, a suitable background color would be #ECF0F1 (Light Gray). This neutral color will provide a clean and modern look while allowing the primary and accent colors to stand out effectively.


background color = silver 		= #DADBDD;  RGB: 218, 219, 221




THIS ONE FOR INSIDE POP-UP
background:	radial-gradient(circle at 10% 20%, rgba(11,76,140,0.12) 0%, transparent 40%),
radial-gradient(circle at 90% 30%, rgba(30,107,184,0.15) 0%, transparent 45%),
radial-gradient(circle at 30% 90%, rgba(11,76,140,0.08) 0%, transparent 40%),
linear-gradient(120deg, #ffffff 0%, #f3f8ff 100%);





font color Blue for h1 to h6,p 	= #0b4c8c;  RGB:  11,  76, 140
light honey						= #BAC095;  
honey							= #E4D00A;	RGB: 228, 208,  10
mygreen: #097969


THIS IS FOR CENTER AREA: 
======================
style="background:	
															radial-gradient(circle at 10% 20%, rgba(11,76,140,0.12) 0%, transparent 40%),
															radial-gradient(circle at 90% 30%, rgba(30,107,184,0.15) 0%, transparent 45%),
															radial-gradient(circle at 30% 90%, rgba(11,76,140,0.08) 0%, transparent 40%),
															linear-gradient(120deg, #ffffff 0%, #f3f8ff 100%); margin:10px;    box-shadow: 0px 3px 6px rgba(0,0,0,0.3);
    box-sizing: border-box;">



THIS IS 'RED' strip=
======================
background:
											linear-gradient(
												135deg,
												#dbeafe 0%,
												#bfdbfe 30%,
												#fee2e2 40%,   /* red strip 1
												#ffffff 50%,
												#fecaca 60%,   /* red strip 2
												#f0f9ff 100%
											"




THIS IS 'GREEN' STRIP
=====================

background:
    linear-gradient(
        135deg,
        #dbeafe 0%,
        #bfdbfe 30%,
        #dcfce7 90%,   /* green strip 1 
        #ffffff 50%,
        #bbf7d0 90%,   /* green strip 2 
        #f0f9ff 100%
    );

THIS IS 'BODY' STRIP
===================	
background: linear-gradient(
        135deg,
        #ebf4ff 0%,  
        #dbeeff 40%,  
        #eaf6ff 70%,  
        #e6f2ff 100%   
    );

    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;


THIS IS 'CONTAINER' STRIP
style="background: linear-gradient(
									135deg,
									#dbeafe 0%, 
									#bfdbfe 35%, 
									#e0f2fe 65%,  
									#f0f9ff 100% 
									);

									background-repeat: no-repeat;
									background-size: 100% 100%;"





*/

 
body {background: linear-gradient(
        135deg,
        #ebf4ff 0%,  
        #dbeeff 40%,  
        #eaf6ff 70%,  
        #e6f2ff 100%   
    );

    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
	font-family: 'Work Sans', sans-serif;
    margin: 0;
    padding: 0;
}


.container {background: linear-gradient(
			135deg,
			#dbeafe 0%,   /* light blue */
			#bfdbfe 35%,  /* stronger mid blue */
			#e0f2fe 65%,  /* soft contrast */
			#f0f9ff 100%  /* clean finish */
			);

			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin:10px;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-wrap: nowrap;
			border-radius:12px;
			}



#OrangeBlueBtn {
			width: 100px;
			font-size: 12px;
			padding: 3px;
			border: none;
			background-color: #E4D00A;
		
			border-radius:5px;
			color:#0b4c8c;
			cursor: pointer;
			height:30px;
			margin-top:30px;
			}

			#OrangeBlueBtn:hover {
			background: #0b4c8c;
			cursor: pointer;
			transition:0.7s;
			color:white;
			}



/* Typography */
h1, h2, h3, h4, h5, h6, p {
  font-family: Bahnschrift, "Work Sans", sans-serif;
  color: #0b4c8c;
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  margin-bottom: 15px;
}

p {
  margin-bottom: 10px;
  line-height: 1.6; /* Makes long descriptions easier to read */
}












:root {
  --color1: #BAC095;
  --color2: #E4D00A;
  --silvergray: #BCC6CC;
}

/* === Tablet (768px to 991px) === */
@media (max-width: 767px) {
h1 { font-size: 1.75rem; margin-bottom: 0.6em; }   /* 28px */
h2 { font-size: 1.5rem;  margin-bottom: 0.6em; }   /* 24px */
h3 { font-size: 1.25rem; margin-bottom: 0.6em; }   /* 20px */
h4 { font-size: 1.125rem; margin-bottom: 0.5em; }  /* 18px */
h5 { font-size: 1rem;    margin-bottom: 0.5em; }   /* 16px */
h6 { font-size: 0.6rem;margin-bottom: 0.4em; }   /* 14px */
p  { font-size: 1rem;    margin-bottom: 1em; }     /* 16px */
}
/* === Tablet (768px to 991px) === */
@media (min-width: 768px) and (max-width: 991px) {
  h1 { font-size: 2rem; }      /* 32px */
  h2 { font-size: 1.75rem; }   /* 28px */
  h3 { font-size: 1.5rem; }    /* 24px */
  h4 { font-size: 1.25rem; }   /* 20px */
  h5 { font-size: 1.125rem; }  /* 18px */
  h6 { font-size: 1rem; }      /* 16px */
  p  { font-size: 1.0625rem; } /* 17px */
}

/* === Desktop (992px and up) === */
@media (min-width: 992px) {
  h1 { font-size: 2.25rem; }   /* 36px */
  h2 { font-size: 2rem; }      /* 32px */
  h3 { font-size: 1.75rem; }   /* 28px */
  h4 { font-size: 1.5rem; }    /* 24px */
  h5 { font-size: 1.25rem; }   /* 20px */
  h6 { font-size: 1rem; }      /* 16px */
  p  { font-size: 1.125rem; }  /* 18px */
}

h1 {font-family:Bahnschrift; font-style:normal; color:#444444;}
h2 {font-family:Bahnschrift; font-style:normal; color:#444444;}
h3 {font-family:Bahnschrift; font-style:normal; color:#444444;} 
h4 {font-family:Bahnschrift; font-style:normal; color:#444444;} 
h5 {font-family:Bahnschrift; font-style:normal; color:#444444;}
h6 {font-family:Bahnschrift; font-style:normal; color:#444444;}
p {font-family:Bahnschrift; font-style:normal; color:#444444;}



html {
  scroll-behavior: smooth;
}

html {zoom: 100%;} 	

        * 	{
            margin: 0px;
            padding: 0px;
            box-sizing:border-box;
 			font-style:normal;
			font-weight:normal;
			}
	
	b {font-weight:bold;}
	i {font-style:italic;}
	.center {margin: auto;}
	
	
			.img {display:inline;}
			.image {display:inline;}
			.nav {display: inline;}
       
		
	   
	    .dot {
		height: 30px;
		width: 30px;
		background-color: #bbb;
		border-radius: 50%;
		display: inline-block;
		text-align:center;
		
			}
			
	    .dotSmall {
		height: 10px;
		width: 10px;
		margin-right:10px;
		background-color: #17A589;
		border-radius: 50%;
		display: inline-block;
		text-align:center;
			}
	
		#myVideo {
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: -1;
		}




.tab {
  overflow: hidden;
  width:50%;
  margin-right:0px;
  position:fixed;
  float:left;
  background: 	#C70039;

}

/* Style the buttons that are used to open the tab content */
.tab button {
	background: rgba(0, 0, 0, 0);
	color :white;
	font-weight:bold;
	text-align:center;
    border: none;
	outline: none;
	cursor: pointer;
	padding: 15px 5px;
	transition: 0.2s;
	width:100px;
	display:inline-block;
	height:60px;
	font-family:MS Sans Serif;
  }

  
  
		#ANarrow {font-family: 'Arial Narrow';
				  color:rgb(0,0,0,.6);}
 
 a:link {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color:inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

a:active {
 color: inherit;
  text-decoration: none;
}
 
 
 .tab button.active {
  background-color: #ccc;
}

	/* Style the tab */
.tab3 {
  overflow: hidden;
  width:10%;
  margin-right:0px;
  position:fixed;
  float:left;
 
}



.overlay {
  height: 0%;
  width: 15%;
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 85%;
  background-color: rgba(23,165,137,0.7);
  background-color: rgba(0,0,0, 0.7);

  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 0px;
}				

.overlay a {
  padding: 5px;
  text-decoration: none;
  font-size: 14px;
  color:  white;
  display: block;
  transition: 0.3s;
   
}

.overlay a:hover, .overlay a:focus {
  color:red;
	
}

.overlay.closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 550px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

.squareAds {
			height: 800px;
			width:100%;
			background-color:#FFFACD;
			border-style:solid;
		}

.dropdown {
  display: inline-block;
  
  position: relative;

}
.dropdown-content {
  display: none;
  position: absolute;
  width: 250%;
  background-color:white;
 
  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.9);
    
}
.dropdown:hover .dropdown-content {
  display: block;
 
}
.dropdown-content a {
  display: block;
  color: #000000;
  padding: 0px;
  text-decoration: none;
 
}
.dropdown-content a:hover {
  color: #FFFFFF;
  background-color: #00A4BD;

	
}	



 #nBtn {
  width:150px;
  background-color: orange;
  color: black;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 12px;
  font-family: 'Segoe UI', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
 }

#nBtn:hover {
			background: #203864;
			cursor: pointer;
			color: white;
			}
	
	
	#myBtn {
			width: 150px;
			font-size: 12px;
			padding: 10px;
			border: none;
			background-color: #0b4c8c;
		
			border-radius:15px;
			color:white;
			cursor: pointer;
			}

			#myBtn:hover {
			background: #203864;
			cursor: pointer;
			}
	



#myBtn2 {
			width: 150px;
			font-size: 12px;
			background-color:transparent;
			cursor: pointer;
			border:1px #17A589;
			color:RGB(255,255,255,1);
			color:#666666;
			height:40px; 
				}

			#myBtn2:hover {
			text-weight:bold;
			transition: .6s ease-in-out;
			
						}	

#myBtn2Mobile {
			width: 56px;
			font-size: 0.5vw;
			background-color:transparent;
			cursor: pointer;
			border:0px;
			color:RGB(255,255,255,1);
			color:#666666;
			height:40px; 
				}

			#myBtn2Mobile:hover {
						}	




			
			
#myBtn3 {
			width: 100px;
			font-size: 12px;
			
			cursor: pointer;
			border:1px #17A589;
			color:gray;
			height:40px; 
			font-weight:bold;
			}

			#myBtn3:hover {
			background: #FF8C00;
			font-size:12px;
			text-decoration:bold; color: #FFFFFF;
			}	
			
			.scrollable-element {
			scrollbar-width: auto;
			}
	
	
	
#myBtn4 {
			width: 280px;
			font-size: 12px;
			text-align:left;
			cursor: pointer;
			border:1px #17A589;
			color:#023020;
			height:30px; 
			padding-left:5px;}

			
			#myBtn4:hover {
			background:  #E4D00A;
			color:black;
			
			}	
			
			.scrollable-element {
			scrollbar-width: auto;
			}
			
	
#myBtn4Mobile {
			width: 250px;
			font-size: .6vw;
			text-align:left;
			cursor: pointer;
			border:1px #17A589;
			color:gray;
			height:30px; 
			padding-left:5px;}

			#myBtn4:hover {
			/*background: #00308F;*/
			text-weight:bold; 
			color: white; 			
			}	
			
			.scrollable-element {
			scrollbar-width: auto;
			}
	


	
	
#myBtnBack {
			
			font-size: 12px;
			padding: 7px;
			border: none;
			background-color:#0504aa  ;
		
			border-radius:5px;
			color:white;
			cursor: pointer;
			}

			#myBtnBack:hover {
			background: #0b4c8c;
			cursor: pointer;
			}
			
	
	
	
#"btn1" {
			width: 100px;
			font-size: 12px;
			
			cursor: pointer;
			border:1px #17A589;
			color:gray;
			height:40px; 
			font-weight:bold;			}

/* FOR SCROLL BAR 
width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
 /* box-shadow: inset 0 0 5px grey; */
  border-radius: 5px;
  box-shadow: inset 0 0 5px grey;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: gray; 
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #E4D00A; 
}		


//html {zoom: 100%;} 

		#headerPopup {
			position		: 	absolute;
			top				: 	70%;
			left			:	50%;
			transform		:	translate(-50%, -50%);
			background-color: 	white;
			padding			: 	20px;
			border			: 	1px solid gray;
			width			:	35%;
			height			:	50%;
			border-radius	: 	10px;
			}

			* Close button styles */
			#headerPopup.popup-content button { float: right;
			}
			
	.center {
  margin: auto;
  width: 100%;
  padding: 5px;
  
 .dropdown-content a {
  display: block;
  transition: 1s;
  color: #000000;
  padding: 0px;
  text-decoration: none;
	
}
.dropdown-content a:hover {
  color: #FFFFFF;
  background-color: #00A4BD;
transition: 1s;
}	
  
  
}

	
/* ribbon at the bottom of screen for Mobile applications */
#bottomribbon { 
    height: 40px; 
    position: fixed; 
    bottom:0%;
    width:100%; 
    background-color: #393838; 
    opacity: 1;
}
	

<style>
/* Style element for accordion for ASK A QUESTION */
p.accordion {
    background-color: rgb(0,0,0,.5);
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-bottom:10px;
	font-size:20px;
}

/* Add a background color to the accordion if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
p.accordion.active, p.accordion:hover {
    background-color: rgb(0,0,0,.8);
}

/* Unicode character for "plus" sign (+) */
p.accordion:after {
    content: '\2795'; 
    font-size: 16px;
    color: #650000;
    float: right;
    margin-left: 5px;
}

/* Unicode character for "minus" sign (-) */
p.accordion.active:after {
    content: "\2796"; 
}

/* Style the element that is used for the panel class */

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease-in-out;
    opacity: 0;
    margin-bottom:10px;
}

div.panel.show {
    opacity: 1;
    max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}
</style>