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


.text{
font-size:24px;
text-decoration:none;
}

.greybutton {
	-moz-box-shadow: 3px 4px 5px -1px #276873;
	-webkit-box-shadow: 3px 4px 5px -1px #276873;
	box-shadow: 3px 4px 5px -1px #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #465257), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #465257 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #465257 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #465257 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #465257 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #465257 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#465257', endColorstr='#ffffff',GradientType=0);
	background-color:#465257;
	-webkit-border-radius:21px;
	-moz-border-radius:21px;
	border-radius:21px;
	border:1px solid #29668f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	padding:5px 55px;
	text-decoration:none;
	text-shadow:13px -9px 50px #3d768a;
}
.greybutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #465257));
	background:-moz-linear-gradient(top, #ffffff 5%, #465257 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #465257 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #465257 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #465257 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #465257 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#465257',GradientType=0);
	background-color:#ffffff;
}
.greybutton:active {
	position:relative;
	top:1px;
	}
	
	
	
	/* blue      button------------*/
.bluebutton {
	-moz-box-shadow: 3px 4px 6px -1px #2d2e3b;
	-webkit-box-shadow: 3px 4px 6px -1px #2d2e3b;
	box-shadow: 3px 4px 6px -1px #2d2e3b;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #342c54), color-stop(1, #007385));
	background:-moz-linear-gradient(top, #342c54 5%, #007385 100%);
	background:-webkit-linear-gradient(top, #342c54 5%, #007385 100%);
	background:-o-linear-gradient(top, #342c54 5%, #007385 100%);
	background:-ms-linear-gradient(top, #342c54 5%, #007385 100%);
	background:linear-gradient(to bottom, #342c54 5%, #007385 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#342c54', endColorstr='#007385',GradientType=0);
	background-color:#342c54;
	-webkit-border-radius:18px;
	-moz-border-radius:18px;
	border-radius:18px;
	border:1px solid #03578f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	padding:7px 59px;
	text-decoration:none;
	text-shadow:0px 1px 0px #76797a;
}
.bluebutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007385), color-stop(1, #342c54));
	background:-moz-linear-gradient(top, #007385 5%, #342c54 100%);
	background:-webkit-linear-gradient(top, #007385 5%, #342c54 100%);
	background:-o-linear-gradient(top, #007385 5%, #342c54 100%);
	background:-ms-linear-gradient(top, #007385 5%, #342c54 100%);
	background:linear-gradient(to bottom, #007385 5%, #342c54 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007385', endColorstr='#342c54',GradientType=0);
	background-color:#007385;
}
.bluebutton:active {
	position:relative;
	top:1px;
}

/*    turquise blue  button------------*/

@media (min-width:999px){
.turqbluebutton {
	-moz-box-shadow: 0px 14px 12px -7px #276873;
	-webkit-box-shadow: 0px 14px 12px -7px #276873;
	box-shadow: 0px 14px 12px -7px #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #198ab3), color-stop(1, #5eb0bd));
	background:-moz-linear-gradient(top, #198ab3 5%, #5eb0bd 100%);
	background:-webkit-linear-gradient(top, #198ab3 5%, #5eb0bd 100%);
	background:-o-linear-gradient(top, #198ab3 5%, #5eb0bd 100%);
	background:-ms-linear-gradient(top, #198ab3 5%, #5eb0bd 100%);
	background:linear-gradient(to bottom, #198ab3 5%, #5eb0bd 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#198ab3', endColorstr='#5eb0bd',GradientType=0);
	background-color:#198ab3;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	border:2px solid #29668f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:10px 22px;
	text-decoration:none;
	text-shadow:0px 13px 0px #3d768a;
	margin-top:10px;
}
.turqbluebutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5eb0bd), color-stop(1, #198ab3));
	background:-moz-linear-gradient(top, #5eb0bd 5%, #198ab3 100%);
	background:-webkit-linear-gradient(top, #5eb0bd 5%, #198ab3 100%);
	background:-o-linear-gradient(top, #5eb0bd 5%, #198ab3 100%);
	background:-ms-linear-gradient(top, #5eb0bd 5%, #198ab3 100%);
	background:linear-gradient(to bottom, #5eb0bd 5%, #198ab3 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5eb0bd', endColorstr='#198ab3',GradientType=0);
	background-color:#5eb0bd;
}
.turqbluebutton:active {
	position:relative;
	top:1px;
}
}

@media (max-width:600px){
.turqbluebutton {
	-moz-box-shadow: 0px 14px 12px -7px #276873;
	-webkit-box-shadow: 0px 14px 12px -7px #276873;
	box-shadow: 0px 14px 12px -7px #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #198ab3), color-stop(1, #5eb0bd));
	background:-moz-linear-gradient(top, #198ab3 5%, #5eb0bd 100%);
	background:-webkit-linear-gradient(top, #198ab3 5%, #5eb0bd 100%);
	background:-o-linear-gradient(top, #198ab3 5%, #5eb0bd 100%);
	background:-ms-linear-gradient(top, #198ab3 5%, #5eb0bd 100%);
	background:linear-gradient(to bottom, #198ab3 5%, #5eb0bd 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#198ab3', endColorstr='#5eb0bd',GradientType=0);
	background-color:#198ab3;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	border:2px solid #29668f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:10px 22px;
	text-decoration:none;
	text-shadow:0px 13px 0px #3d768a;
	margin-top:10px;
	margin-bottom:50px;
}
.turqbluebutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5eb0bd), color-stop(1, #198ab3));
	background:-moz-linear-gradient(top, #5eb0bd 5%, #198ab3 100%);
	background:-webkit-linear-gradient(top, #5eb0bd 5%, #198ab3 100%);
	background:-o-linear-gradient(top, #5eb0bd 5%, #198ab3 100%);
	background:-ms-linear-gradient(top, #5eb0bd 5%, #198ab3 100%);
	background:linear-gradient(to bottom, #5eb0bd 5%, #198ab3 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5eb0bd', endColorstr='#198ab3',GradientType=0);
	background-color:#5eb0bd;
}
.turqbluebutton:active {
	position:relative;
	top:1px;
}
}
/*    dark green  button------------*/

.darkgreenbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #756d00));
	background:-moz-linear-gradient(top, #000000 5%, #756d00 100%);
	background:-webkit-linear-gradient(top, #000000 5%, #756d00 100%);
	background:-o-linear-gradient(top, #000000 5%, #756d00 100%);
	background:-ms-linear-gradient(top, #000000 5%, #756d00 100%);
	background:linear-gradient(to bottom, #000000 5%, #756d00 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#756d00',GradientType=0);
	background-color:#000000;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	border:2px solid #001406;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	font-weight:bold;
	padding:8px 38px;
	text-decoration:none;
	text-shadow:-1px 0px 0px #ffffff;
}
.darkgreenbutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #756d00), color-stop(1, #000000));
	background:-moz-linear-gradient(top, #756d00 5%, #000000 100%);
	background:-webkit-linear-gradient(top, #756d00 5%, #000000 100%);
	background:-o-linear-gradient(top, #756d00 5%, #000000 100%);
	background:-ms-linear-gradient(top, #756d00 5%, #000000 100%);
	background:linear-gradient(to bottom, #756d00 5%, #000000 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#756d00', endColorstr='#000000',GradientType=0);
	background-color:#756d00;
}
.darkgreenbutton:active {
	position:relative;
	top:1px;
}


/*   skyblue button------------*/


.skybluebutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #42f6ff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #42f6ff;
	box-shadow:inset 0px 1px 0px 0px #42f6ff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #17d4c1), color-stop(1, #012b25));
	background:-moz-linear-gradient(top, #17d4c1 5%, #012b25 100%);
	background:-webkit-linear-gradient(top, #17d4c1 5%, #012b25 100%);
	background:-o-linear-gradient(top, #17d4c1 5%, #012b25 100%);
	background:-ms-linear-gradient(top, #17d4c1 5%, #012b25 100%);
	background:linear-gradient(to bottom, #17d4c1 5%, #012b25 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#17d4c1', endColorstr='#012b25',GradientType=0);
	background-color:#17d4c1;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	border:4px solid #49a6a0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:6px 54px;
	text-decoration:none;
	text-shadow:-2px 0px 0px #80cfbf;
}
.skybluebutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #012b25), color-stop(1, #17d4c1));
	background:-moz-linear-gradient(top, #012b25 5%, #17d4c1 100%);
	background:-webkit-linear-gradient(top, #012b25 5%, #17d4c1 100%);
	background:-o-linear-gradient(top, #012b25 5%, #17d4c1 100%);
	background:-ms-linear-gradient(top, #012b25 5%, #17d4c1 100%);
	background:linear-gradient(to bottom, #012b25 5%, #17d4c1 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#012b25', endColorstr='#17d4c1',GradientType=0);
	background-color:#012b25;
}
.skybluebutton:active {
	position:relative;
	top:1px;
}

/*    greeen  button------------*/



.greenbutton {
	-moz-box-shadow: 1px 20px 14px -7px #3e7327;
	-webkit-box-shadow: 1px 20px 14px -7px #3e7327;
	box-shadow: 1px 20px 14px -7px #3e7327;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #236308));
	background:-moz-linear-gradient(top, #000000 5%, #236308 100%);
	background:-webkit-linear-gradient(top, #000000 5%, #236308 100%);
	background:-o-linear-gradient(top, #000000 5%, #236308 100%);
	background:-ms-linear-gradient(top, #000000 5%, #236308 100%);
	background:linear-gradient(to bottom, #000000 5%, #236308 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#236308',GradientType=0);
	background-color:#000000;
	-webkit-border-radius:9px;
	-moz-border-radius:9px;
	border-radius:9px;
	border:3px solid #4b8f29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:raleway;
	font-size:20px;
	font-weight:bold;
	letter-spacing:3.5px;
	padding:11px 55px;
	text-decoration:none;
	text-shadow:0px -13px 0px #5b8a3c;
}
.greenbutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #236308), color-stop(1, #000000));
	background:-moz-linear-gradient(top, #236308 5%, #000000 100%);
	background:-webkit-linear-gradient(top, #236308 5%, #000000 100%);
	background:-o-linear-gradient(top, #236308 5%, #000000 100%);
	background:-ms-linear-gradient(top, #236308 5%, #000000 100%);
	background:linear-gradient(to bottom, #236308 5%, #000000 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#236308', endColorstr='#000000',GradientType=0);
	background-color:#236308;
}
.greenbutton:active {
	position:relative;
	top:1px;
}
.knowmorebutton {
	-moz-box-shadow: 3px 4px 6px -1px #2d2e3b;
	-webkit-box-shadow: 3px 4px 6px -1px #2d2e3b;
	box-shadow: 3px 4px 6px -1px #2d2e3b;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #342c54), color-stop(1, #007385));
	background:-moz-linear-gradient(top, #342c54 5%, #007385 100%);
	background:-webkit-linear-gradient(top, #342c54 5%, #007385 100%);
	background:-o-linear-gradient(top, #342c54 5%, #007385 100%);
	background:-ms-linear-gradient(top, #342c54 5%, #007385 100%);
	background:linear-gradient(to bottom, #342c54 5%, #007385 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#342c54', endColorstr='#007385',GradientType=0);
	background-color:#342c54;
	-webkit-border-radius:18px;
	-moz-border-radius:18px;
	border-radius:18px;
	border:1px solid #03578f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	padding:8px 20px;
	text-decoration:none;
	text-shadow:0px 1px 0px #76797a;
}
.knowmorebutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007385), color-stop(1, #342c54));
	background:-moz-linear-gradient(top, #007385 5%, #342c54 100%);
	background:-webkit-linear-gradient(top, #007385 5%, #342c54 100%);
	background:-o-linear-gradient(top, #007385 5%, #342c54 100%);
	background:-ms-linear-gradient(top, #007385 5%, #342c54 100%);
	background:linear-gradient(to bottom, #007385 5%, #342c54 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007385', endColorstr='#342c54',GradientType=0);
	background-color:#007385;
}
.knowmorebutton:active {
	position:relative;
	top:1px;
}






.contactbutton {
	-moz-box-shadow: 3px 4px 5px 1px #00ccf5;
	-webkit-box-shadow: 3px 4px 5px 1px #00ccf5;
	box-shadow: 1px 1px 1px 1px #00ccf5;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #00d5ff), color-stop(1, #0400f0));
	background:-moz-linear-gradient(top, #00d5ff 5%, #0400f0 100%);
	background:-webkit-linear-gradient(top, #00d5ff 5%, #0400f0 100%);
	background:-o-linear-gradient(top, #00d5ff 5%, #0400f0 100%);
	background:-ms-linear-gradient(top, #00d5ff 5%, #0400f0 100%);
	background:linear-gradient(to bottom, #00d5ff 5%, #0400f0 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d5ff', endColorstr='#0400f0',GradientType=0);
	background-color:#00d5ff;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	border:9px solid #337bc4;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:raleway;
	font-size:20px;
	letter-spacing:3px;
	font-weight:bold;
	padding:12px 30px;
	text-decoration:none;
	text-shadow:0px 1px 2px #5fa2e6;
}
.contactbutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0400f0), color-stop(1, #00d5ff));
	background:-moz-linear-gradient(top, #0400f0 5%, #00d5ff 100%);
	background:-webkit-linear-gradient(top, #0400f0 5%, #00d5ff 100%);
	background:-o-linear-gradient(top, #0400f0 5%, #00d5ff 100%);
	background:-ms-linear-gradient(top, #0400f0 5%, #00d5ff 100%);
	background:linear-gradient(to bottom, #0400f0 5%, #00d5ff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0400f0', endColorstr='#00d5ff',GradientType=0);
	background-color:#0400f0;
}
.contactbutton:active {
	position:relative;
	top:1px;
}
@media screen and (max-width:700px){
.contactbutton{

	font-size:20px;
	font-weight:bold;
	padding:11px 24px;
	text-decoration:none;
	text-shadow:0px 1px 2px #5fa2e6;
	white-space:no-wrap;
}


}



/*---------------------------------------
 * 
 * 
  other pages              
-----------------------------------------*/

.title-text{
font-size:30px;
position:relative;
display:row;
z-index:1;
color:#e11e1e;
left:0px;
font-weight:5em;
letter-spacing: 0.5px;
margin-top:5px;  
}
@media  (max-width:600px){

.title-text{
font-size:30px;
position:relative;
display:sticky;
z-index:1;
color:#e11e1e;

text-align:center;
 left:0px;
 font-weight:5em;
 letter-spacing: 0.5px;
 margin-top:40px;
 margin-bottom:;
}
}


@media  (max-width:600px){
.glass{
top:0px;
right: 0px;
    left: 0px;
    bottom: 0px;
box-sizing:border-box;
position:absolute;
display:flex;
width:100%;
height:0px;
background-color: rgba(255, 255, 255, .15); 
background-repeat:no-repeat;  
backdrop-filter: blur(5px);
flex-direction: ;
    align-items: center;
    justify-content: center;
   overflow:;
    background-size: cover;
    transition: .5s;
    z-index:-1;
}
.banner{
box-sizing:border-box;
position:relative;
display:flex;
width:100%;
height:100%;
background-size:cover;
z-index:-1;
background-position:center center;
}
.banner-img{
position:relative;
display:flex;
background-repeat:no-repeat; 
background-size:cover;
 top:0;
 left: 0;
 width:100%;
z-index:-1;
height:150px;
background-position:center center;
box-sizing:border-box;
}
.text-banner{
font-size:25px;
position:absolute;
display:row;
z-index:1;
color:blue ;
margin-bottom:;
margin-top:80px;
 left:50px;
 right:50px;
 font-weight:5em;
 letter-spacing: 0.5px;
    text-align:center;
  justify-content: center;
}
}
@media (min-width:999px){
.banner{
width:100%;
float:left;
clear:none;  

height:600px;
position:relative;
display:flex;
box-sizing:border-box;
background-size:;
}

.banner-img{
background-repeat:no-repeat; 
box-sizing:border-box;   
background-position:center center;
overflow: visible !important;
justify-content: space-evenly;
align-items: center;
object-fit:fill;
float:left;
clear:none; 
width:100%;
height:600px;

background-size:;
position:relative;
display:flex;
flex-wrap: ;
z-index:-1;
background-attachment:;


}
.text-banner{
font-size:50px;
position:absolute;
display:row;
z-index:1;
color:blue ;
margin-bottom:50px;
margin-top:100px;
left:50px;
right:50px;
font-weight:5em;
letter-spacing: 0.5px;
text-align:center;
justify-content: center;
}
.glass{
top:0px;
right: 0px;
    left: 0px;
    bottom: 0px;
box-sizing:border-box;
position:absolute;
display:flex;
width:100%;
height:0px;
background-color: rgba(255, 255, 255, .15); 
background-repeat:no-repeat;  
backdrop-filter: blur(5px);
flex-direction: ;
    align-items: center;
    justify-content: center;
   overflow:;
    background-size: cover;
    transition: .5s;
    z-index:;
}
}



.address{
width:100%;
height:auto;
box-sizing:border-box;

left:10px;
margin-top:100px;

}


.name{
height:30px;

position:relative;
display:flex;
box-sizing:border-box;
background-color:skyblue;
z-index:1;
left:px;
border-color:white;
border-radius: 5px;
border-style: solid;
}
.name1{
height:30px;

position:relative;
display:flex;
top:50px;
background-color:skyblue;
z-index:1;
left:px;
border-color:white;
border-radius: 5px;
border-style: solid;
}
.pname{
height:20px;
width:70px;
position:absolute;
display:inline-block;
margin-top:5px;
font-size:14px;
color:blue;
white-space:nowrap;
letter-spacing:0.1px;
font-weight:;

}
#about-image{
  filter: grayscale(10);
  backdrop-filter: blur(5px);
  background-repeat:no-repeat;
  background-size:cover;
  box-sizing:border-box;
  overflow:hidden;
}
.detail{
height:;
width:;
background-color: rgba(255, 255, 255, .15);  
backdrop-filter: blur(5px);
 z-index: 1;
position:relative;
display:grid;
padding:10px;
border-radius:10px;
border-color:white;
 border-style: solid;
 text-align: justify;
 font-size: 1.3vw;
}
@media  screen and (max-width:399px){
.detail{
font-size: 4.3vw;
}

}
 .newbody{
 
  margin:0;
  height:;
  background:#eeeeee;
  
  
 }
.btn-secondary1{
color:#fff;
background-color:#8CC641;
border-color:#8CC641;
position:absolute;
display:;
}
.btn-secondary1:hover{
color:#000;
background-color:#9dcf5e;
border-color:#98cc54;
}
.btn-check:focus+.btn-secondary1,
.btn-secondary1:focus{
color:#000;
background-color:#9dcf5e;
border-color:#98cc54;
box-shadow:0 0 0 .25rem rgba(119,168,55,0.5);
}
/*---------------------------------------
  VIDEO           
-----------------------------------------*/

/*---------------------------------------
  HERO        -- video      
-----------------------------------------*/
@media (min-width:999px){
.videoWrapper {
  position: relative;
 /* padding-bottom: 56.25%;  16:9 
  height: ;
  */
 } 
 }
@media (max-width:600px){
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height:250px ;
   margin-top:0px;
  
 
}

}
.custom-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   z-index: -1;
}
@media (max-width: 600px) {
  .hero {
    height:250px;
    margin-top:0px;
  }
  }
@media (min-width: 999px) {
  .hero {
    height:100vh;
  }

  .custom-video
   {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
  }

  .sticky-wrapper {
    position: relative;
    bottom: 76px;
  }
}


.heroText {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  text-align: center;
}

.heroText h1 {
  font-size: 30px;
  line-height: normal;
  color: red;
}
.heroText p {
  color: red;
  font-size: 25px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.5px;
}
.hero {
  position: relative;
  overflow: hidden;
 
  
}




.custom-underline {
  border-bottom: 2px solid blue;
  color: green;
  padding-bottom: 4px;
}
/*--------------------------------------------------------------
# MAIN BODY- product box
--------------------------------------------------------------*/
.bg-box {
background-color: rgba(255, 255, 255, .15);  
backdrop-filter: blur(5px);
 z-index: 1;
   border-style: solid;
 border-color:white;
  border-radius:5px;
height:400px;
display:;
position:relative;
right:40px;
width:100%;
 text-align: justify;
 font-size: 4.3vw;
}
.bg-box:after {
  content: "";
  display: inline-block;
  width: 100%;
}
.bg-box1 {
background-color: rgba(255, 255, 255, .15);  
backdrop-filter: blur(5px);
 z-index: 1;
   border-style: solid;
 border-color:white;
  border-radius:5px;
height:auto;
display:;
position:relative;
left:40px;
width:100%;
 text-align: justify;
 font-size: 4.3vw;
}
.bg-box1:after {
  content: "";
  display: inline-block;
  width: 100%;
}
@media(max-width:999px){
.bg-box1{


}
}
.bg-box2 {
background-color: rgba(255, 255, 255, .15);  
backdrop-filter: blur(5px);
 z-index: 1;
   border-style: solid;
 border-color:white;
  border-radius:5px;
height:auto;
display:;
position:relative;
left:0px;
width:100%;
 text-align: justify;
 font-size: 4.3vw;
 bottom:50px;
}
.bg-box2:after {
  content: "";
  display: inline-block;
  width: 100%;
}
.bg-box3 {
background-color: rgba(255, 255, 255, .15);  
backdrop-filter: blur(5px);
 z-index: 1;
   border-style: solid;
 border-color:white;
  border-radius:5px;
height:250px;
display:row;
position:sticky;
right:;
width:100%;
 text-align: justify;
 font-size: 4.3vw;
 margin-top:10px;
  margin-bottom:;
} 
.bg-box3:after {
  content: "";
  display: flex;
  width: 100%;
}
@media (min-width:999px){
.bg-box4 {
background-color: rgba(255, 255, 255, .15);  
backdrop-filter: blur(5px);
 z-index: 1;
   border-style: solid;
 border-color:white;
  border-radius:5px;
height:100%;
display:;
position:relative;
right:40px;
width:100%;
 text-align: justify;
 font-size: 4.3vw;
}
.bg-box4:after {
  content: "";
  display: flex;
  width: 100%;
}
}
@media (max-width:600px){
.bg-box4{
height:100%;
width: 100%;
position:relative;
display:inline;
margin-top:10px;
margin-bottom:10px;
}
.bg-box4:after {
  content: "";
  display: inline;
  width: 100%;
  height:100%;
  position:relative;
  margin-top:10px;
margin-bottom:10px;
}

}
/*--------------------------------------------------------------
# products
--------------------------------------------------------------*/
.image-about{
position:relative;
width:100%;
height:100%;
z-index:;
 background-image: url('../images/gem.jpg');
 background-repeat: no-repeat; 
 background-size:cover;
 filter:brightness(100%);
 filter:blur(0%);
 padding-top:0px;
}
#about

 {
 position:flex;
   width:100%;
   float: left;
    background-color: #143a51;
    height:auto ;
    padding: 0px 0px 0px 0px;
    box-sizing:border-box;
    margin-top:0px;
    margin-bottom:0px;
    
  }

#about h2 {
  position:flex;
 text-align:center;
 padding: 0 0px 0 700px;
 
}


/*--------------------------------------------------------------
# TITLE
--------------------------------------------------------------*/
.title {
  padding: 0px 0 0px 0;
  
  
  background:red;
  position:sticky;
  overflow:;
  margin-top:0;
 margin-bottom:0;
   z-index:;
   height:50px;
   box-sizing:border-box;
   width:100%;
  display: flex;
     align-items:center;
     place-items: center;
     justify-content: center;
      white-space: nowrap;
}
.title h1 {
  max-width: 60%;
  transition: all 0.4s ease-in-out;
 
    top: 0;
    bottom: 0;
    left:450px;
    right:0;
  margin:auto;
  position:relative;
  display:grid ;
  filter: grayscale(100);
 
  
}

.title h1:hover {
  filter: none;
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .title h1 {
    max-width: 40%;
  }
}

/*  CONTACT  -----------------------------------------------------------------------------*/
/*.contact{
background:black;
border:20px;
height:auto;
width:100%;

}

.contact h3{
color:white;
font-size:18px;
}
.contact p{
color:white;
font-size:12px;
}
.button{
color:yellow;
font-size:20px;
text-decoration:none;
}*/

.contactbox::before{
    content: '';
    
    position:relative;
    opacity: 2;
    width: 100%;
     height:auto;
    background-image:url('../img/bgim.jpg');
    background-repeat:no-repeat;
    background-size:cover;
} 
.contactbox{
   
   box-sizing:border-box;
   position:relative;
   width:100%;
   height:auto;
   margin-top: 90px;
   background-color: rgba(67, 75, 89, .55);  
     backdrop-filter: blur(5px);
   background-repeat:no-repeat;
   background-size:cover;
 
}


.inside{
position:flex;
 box-sizing:border-box;
 width:100%;
}
@media (max-width:992px){
#bright{
  color:white;
  filter:brightness(100%) !important;
  font-size:20px;
}

#bright1{
   color:white;
   filter:brightness(100%) !important;
   
   font-size:18px;
   white-space:wrap;
   width:100%;
   
}
}

@media (min-width:1000px){
#bright{
  color:white;
  filter:brightness(100%) !important;
   font-size:30px;
   left:0px;
}

#bright1{
   color:white;
   filter:brightness(100%) !important;
   
   font-size:20px;
   white-space:nowrap;
   left:0px;
}
}
/*
@media (max-width: 991.98px) {
    .bgcontact
     {
        background-size: cover;
    }
/*--------------- footer--------------------------------*/
.text-primary1{
color:white;
}
.text-light1{
color:white;
text-decoration:none;

}
.text-light1:hover{
color:#00d4ff;



}
.footer-container{
box-sizing:border-box;
height:auto;
width:100%;
background-color:#243241;
position:relative;
display:flex;
    
}
@media (max-width:800px){
.list{
color: green;
  font-size: 15px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.5px;
  white-space:wrap;
  margin-bottom:1.5rem !important;
  list-style-type:square;
  padding-right:15px;
  padding-left:15px;
  list-style-image: none;
  list-style-position: outside;
  width:100%;
}

.foot1{
color: #00247D;
  font-size: 15px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.5px;
  word-wrap:break-word;
  margin-bottom:1.5rem ;
  list-style-type:square;
  left:2px;
  right:2px;
   padding-right:8px;
  padding-left:8px;
}
.list li{
padding-top:5px;
}
.about-title{
font-size:22px;
}
}
@media (min-width:900px){
.list{
color: green;
  font-size: 20px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.5px;
  white-space:wrap;
  margin-bottom:1.5rem !important;
  list-style-type:square;
  padding-right:50px;
  list-style-image: none;
  list-style-position: outside;
  width:100%;
  
}
.list li{
padding-top:10px;
}

.foot1{
color: #00247D;
  font-size: 20px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.5px;
  word-wrap:break-word;
  margin-bottom:1.5rem ;
  list-style-type:square;
  left:2px;
  right:2px;
  padding-right:8px;
  padding-left:8px
}
}

@media(min-width:999px){


}
.foot2{
color: white;
  font-size: 15px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.5px;
}
.foot3{
color: white;
  font-size: 15px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.5px;
}
.foot4{
color: white;
  font-size: 15px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.5px;
}
.foot7{
  color:#234D8C;
  font-size: 16px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.1px;
  word-wrap:break-word;
  
  display:row;
  position:relative;
  margin-top:;
  margin-bottom:;
    width:100%;
    margin-left:0px;
    margin-right:0px;
    right:0px;
}
@media (max-width:600px){
.foot7{
color:#234D8C;
font-size:18px;
word-wrap:break-word;
width:100%;
display:row;
  position:relative;
  margin-top:2px;
  margin-bottom:2px;
    width:100%;
    margin-left:0px;
    margin-right:0px;
    right:0px;
}
@media (max-width:992px){
.foot7 .btn-secondary{
  
}
}
.lower{
box-sizing:border-box;
height:auto;
width:100%;
background-color:#2C3E4F;
}
.foot5{
color: white;
  font-size: 15px;
  font-weight: var(--font-weight-light);
  letter-spacing: 0.5px;
    text-align:center;
  justify-content: center;
     margin-top:2px;
    margin-bottom:2px;
}
.foot6{
color: yellow;
  font-size: 15px;
 font-family:sans-serif;
  letter-spacing: 0.5px;
    text-align:center;
  justify-content: center;
     margin-top:2px;
    margin-bottom:2px;
    white-space:nowrap:
}


.left-box{
height:400px;
width:100%;
left:0;
right:;
margin-top:0px;
position:relative;
display:flex;
background:;

}
.right-box{
height:400px;
width:100%;
margin-left:300px;
right:100px;
margin-top:0px;
position:absolute;
display:;
background:;

 
}
.box-p{
font-size: 20px;
 font-family:times roman;
  letter-spacing: 0.5px;
    padding-left:;
    right:30px;
    margin-top:10px;
    margin-bottom:;
    white-space:wrap;
    display:row;
    color:red;
    position:relative;
    width:450px;
}

.box-h1{
font-size: 30px;
 font-family:sans-serif;
  letter-spacing: 0.5px;
    text-align:center;
 justify-content:center;
     left:0;
    right:0;
    white-space:nowrap;
    display:row;
    position:relative;
    color:red;
}


/*
@media screen and (max-width: 900px) {
   .right-box{
    min-height: 232.5px;
    width:50%;
    left:100px;
    text-wrap:wrap;
  }

@media screen and (max-width: 900px) {
  .left-box {
    min-height: 232.5px;
    width:50%;
  }

@media screen and (max-width: 900px) {
  .glass-box {
    min-height: 232.5px;
    width:50%;
  }

@media screen and (max-width: 900px) {
  .box-p{
    
    width:100%;
    font-size: 20px;
 font-family:times roman;
  letter-spacing: 0.5px;
    
  padding-left:0px;
  right:0;
     margin-top:10px;
    margin-bottom:;
    white-space:wrap;
    display:row;
    color:red;
      position:relative;
      text-wrap:nowrap;
      display:grid;
  }*/
/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------
@media screen and (min-width: 1600px) {
  .news-two-column {
    min-height: 232.5px;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 32px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  .navbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .team-thumb {
    left: 0;
    width: auto;
  }

  .news-two-column {
    height: auto !important;
    min-height: inherit;
  }

  .news .col-12 .news-two-column:first-child {
    margin-bottom: 38px;
  }
}

@media screen and (max-width: 767px) {
  .news-detail-title {
    font-size: 36px;
  }
}

@media screen and (max-width: 360px) {
  h1 {
    font-size: 32px;
  }

  .heroText p {
    font-size: 14px;
  }
}

@media screen and (max-width: 359px) {
  .news-detail-title {
    font-size: 22px;
  }
}
/*
:root {
  --white-color:                  #FFFFFF;
  --primary-color:                #ffc107;
  --section-bg-color:             #f9f9f9;
  --dark-color:                   #000000;
  --grey-color:                   #fcfeff;
  --text-secondary-white-color:   rgba(255, 255, 255, 0.98);
  --title-color:                  #565758;
  --p-color:                      #717275;

  --body-font-family:           'Noto Sans JP', sans-serif;

  --h1-font-size:               72px;
  --h2-font-size:               42px;
  --h3-font-size:               36px;
  --h4-font-size:               32px;
  --h5-font-size:               24px;
  --h6-font-size:               22px;
  --p-font-size:                20px;
  --copyright-text-font-size:   14px;
  --custom-link-font-size:      12px;

  --font-weight-light:          300;
  --font-weight-normal:         400;
  --font-weight-bold:           700;
  --font-weight-black:          900;
}

body,
html {
  height: 100%;
}

body {
    background: var(--white-color);
    font-family: var(--body-font-family);    
    position: relative;
}

/*
.overlay {
  background: linear-gradient(to top, #000, transparent 90%);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
n    BACK TO TOP BUTTON            -------------------------------*/

.top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  max-width: 50px;
  max-height: 50px;
  width: 100%;
  height: 100%;
  padding: .5px;
  border-radius: 8px;
  justify-content: center;
  background: #3b3d42;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  display:sticky;
}
html {
    scroll-behavior: smooth;
}
body {
     height:1000px;
}
 #top{
}
 #middle {
     margin-top:500px;
}
 #btn {
     position: sticky;
     bottom: 50px;
     left: 300px;
     z-index: 99;
     font-size: 35px;
     border: none;
     outline: none;
     background-color: gray;
     color: darkgray;
     cursor: pointer;
     padding: 15px;
     border-radius: 4px;
     
}
 #btn:hover {
     background-color: white;
}

#myBtn {
  display: ; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 150px; /* Place the button at the bottom of the page */
  right: 400px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
   width: 36px;
   height: 36px;
   padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}