.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; /* Adjusts the space between images */
}

.image-grid img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* Optional: for rounded corners */
}


* { 
      margin: 0px;
      padding: 0px;
						box-sizing: border-box;
						-webkit-font-smoothing: antialiased; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
      border: 0;
						font-family: inherit;
						font-size: 100%; 
						ont-weight: inherit;
						margin: 0;
						outline: 0;
						padding: 0;
						vertical-align: baseline;
						}
						
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
html, body, button, input, select, textarea {
      font-family: Arial;
						font-size: 12px;
						color: #8c806e;
						}
						
ul, ol { 
      margin-top: 0;
						margin-bottom: 10px;
						}
						
ul ul { margin-bottom: 0; }

li {
      font-size: 13px;
						margin: 5px 0px 10px 0px; }
						
pre { overflow: auto; }

table { border-collapse: separate; border-spacing: 0; }

caption, th, td { font-weight: normal; text-align: left; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }

blockquote, q {
      -webkit-hyphens: none;
						-moz-hyphens: none;
						-ms-hyphens: none;
						hyphens: none;
						quotes: none;
						}
						
a img { border: 0; }

a, input { outline: none; }

a { color: #F06; }

a:hover { text-decoration: none; }


img { 
      -ms-interpolation-mode: bicubic; 
						border: 0; height: auto; 
						max-width: 100%; 
						vertical-align: middle; 
						display: block; 
						}
figure { margin: 0; }

::-webkit-input-placeholder { color: rgba(51, 51, 51, 0.7); }

:-moz-placeholder { color: rgba(51, 51, 51, 0.7); }

::-moz-placeholder { color: rgba(51, 51, 51, 0.7); opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ }

:-ms-input-placeholder { color: rgba(51, 51, 51, 0.7); }

input:focus, textarea:focus { 
      background-color: #fff; 
						border: 1px solid #c1c1c1; 
						border: 1px solid rgba(51, 51, 51, 0.3); 
						color: #333; 
						}
						
input:focus, select:focus { 
      outline: 2px solid #c1c1c1; 
						outline: 2px solid rgba(51, 51, 51, 0.3); 
						}
						
.hide { display: none;}

.clear { clear: both; height: 0px; overflow: hidden; }

/* <<< Design Holder >>> */
.DesignHolder { position: relative; display: block; width: 100%; min-height: 100%; }

/* <<< Layout Frame >>> */
.LayoutFrame { margin: 0 auto; width: 100%; display: block; }

/* <<< Body >>> */
body { background: #fff; }

/* <<< Header >>> */
header { width: 100%; position: fixed; top: 0px; left: 0px; height: 45px; background: rgba(0, 0, 0, 0.5); z-index: 9; }

header .Center { max-width: 1100px; margin: auto; }

header .site-logo { padding: 0px 0px 0px 0px; width: 100px; float: left; transition: all 0.3s; }

header .site-logo h1 { margin: 0px; }

header .site-logo h1 a { 
       font-size: 30px; 
							color: #fff; 
							font-family: 'Open Sans', sans-serif; 
							font-weight: 800; 
							text-decoration: none; 
							text-transform: uppercase; 
							text-shadow: rgb(3, 3, 3) 0px 2px 5px; 
							transition: all 0.7s ease; 
							}
							
header .site-logo h1 a span { color: #ff9000; }

header.smaller { padding: 0px 0px 0px 0px; height: 60px; transition: all 0.3s; background: rgba(0, 0, 0, 0.75); }

header.smaller .site-logo {padding: 12px 0px 0px 0px; }

header.smaller .site-logo h1 { line-height: 30px; }

header.smaller .site-logo h1 a { font-size: 20px; }

/* <<< Navigation >>> */
.Navigation { float: right; width: 80%; margin-right: 0px; }

.Navigation ul { list-style: none; margin: 0px; float: right; }

.Navigation li {
      float: left; 
						padding: 0px; 
						margin: 0px; 
						height: 35px; 
						position: relative; 
						transition: all 0.3s ease; 
						}
						
.Navigation li a { 
      padding: 10px 10px 5px 5px; 
						font-size: 14px; color: #fff; 
						font-family: 'Open Sans', sans-serif; 
						font-weight: 400; 
						text-decoration: none; 
						display: block; 
						-webkit-transition: all 0.3s ease; 
						transition: all 0.3s ease; 
						}
						
.Navigation li span { 
	     border-bottom: solid 5px #ff9000;
	     background: rgba(56,87,122,1);
	     background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(56,87,122,1)), color-stop(0%, rgba(56,87,122,1)), color-stop(0%, rgba(56,87,122,1)), color-stop(100%, rgba(44,68,94,1)));
	     background: linear-gradient(to bottom, rgba(56,87,122,1) 0%, rgba(56,87,122,1) 0%, rgba(56,87,122,1) 0%, rgba(44,68,94,1) 100%);
	     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38577a', endColorstr='#2c445e', GradientType=0 );
	     width: 100%;
	     height: 100%;
	     display: block;
	     position: absolute;
	     top: 0;
	     left: 0;
	     z-index: -10;
	     opacity: 0;
	     transition: all 0.5s ease;
}
.Navigation li:hover span, .Navigation li.active span {opacity: 1;}

header.smaller .Navigation li a { padding: 6px 6px; }

header.smaller .Navigation li { height: 35px; }

.mobile { display: none; }

.mobile .fa { padding: 12px 14px; font-size: 31px; width: 55px; height: 55px; color: #fff; cursor: pointer; background: #ff9408; }

.mobile .fa:hover { background: #e3860e; }

.mobile.closed .fa-bars { display: none; }

.mobile .fa-times { padding: 11px 15px; width: 55px; height: 55px; display: none; font-size: 31px; }

.mobile.closed .fa-times { display: block; }

/* <<< Banner Section >>> */
.Banner_sec { 
      width: 100%; 
						background: url(../img/stage-1.jpg) top center no-repeat; 
						height: 687px; 
						position: relative; 
						background-size: cover; 
						}
						
.Banner_sec .bannerside { width: 100%; position: absolute; top: 110px; left: 0px; } /*TOP is the space above the banner*/

.Banner_sec .Center { max-width: 1100px; margin: auto; }

.Banner_sec .leftside { padding: 0px 0px 0px 0px; width: 28.90%; float: left; }

.Banner_sec .leftside h3 { 
      font-size: 36px; 
						color: #fff; 
						font-family: 'Open Sans', sans-serif; 
						font-weight: 800; 
						text-transform: uppercase; 
						margin: 0px; 
						line-height: 34px;
						}
						
.Banner_sec .leftside h3 span { color: #ff9000; font-family: 'Open Sans', sans-serif; font-weight: 600; display: block; }

.Banner_sec .leftside p { 
      padding: 16px 0px 26px 0px; 
						font-size: 16px; 
						color: #fff; 
						font-family: 'Open Sans', sans-serif; 
						font-weight: 600; 
						font-style: italic; 
						margin: 0px; 
						word-spacing: 2px; 
						line-height: 22px; 
						}
						
.Banner_sec .leftside a { 
      padding: 11px 16px; 
						font-size: 14px; 
						color: #fff; 
						font-family: 'Open Sans', sans-serif; 
						font-weight: 600; 
						text-transform: uppercase; 
						text-decoration: none; 
						display: inline-block; 
						border: solid 1px #b0bdc8; 
						background: rgba(64, 93, 118, 0.8); 
						transition: all 0.3s ease; 
						}
						
.Banner_sec .leftside a:hover { background: #ff9000; color: #fff; border: solid 1px #ff9000; }

.Banner_sec .rightside { width: 68.36%; float: right; position: relative; }

.Banner_sec .rightside .bx-wrapper { position: relative; z-index: 1; }

.Banner_sec .rightside ul { list-style: none; margin: 0px; }

.Banner_sec .rightside li { padding: 0px; margin: 0; float: none!important; }

.Banner_sec .rightside #slider { width: 100%; float: right; position: relative; z-index: 1; }

.Banner_sec .rightside .Slider .text { 
      padding: 0px 47px 21px 30px; 
						position: absolute; 
						bottom: 0px; 
						left: 0px; 
						width: 100%; 
						background: rgba(0, 0, 0, 0.7); 
						}
						
.Banner_sec .rightside .Slider .text .Icon { width: 38%; float: left; }

.Banner_sec .rightside .Slider .text ul { list-style: none; margin: 0px; }

.Banner_sec .rightside .Slider .text li { float: left!important; padding: 0px 30px 0px 10px; margin: 0px; }

.Banner_sec .rightside .Slider .text li a { 
      display: block; 
						font-size: 14px; 
						color: #fff; 
						text-decoration: none; 
						font-family: 'Open Sans', sans-serif; 
						font-weight: 400; 
						transition: all 0.3s ease;
						}
						
.Banner_sec .rightside .Slider .text li:last-child { padding: 0px; }

.Banner_sec .rightside .Slider .text li:hover a { color: #ff9000!important;}

.Banner_sec .rightside .Slider .text li a .fa { 
      padding: 13px; 
						margin-right: 10px; 
						color: #fff; 
						border-radius: 50px; 
						border: solid 2px #fff; 
						transition: all 0.3s ease; 
						}
						
.Banner_sec .rightside .Slider .text li:hover a .fa { background: #ff9000; color: #fff; border: solid 2px #ff9000; }

.Banner_sec .rightside .Slider .text li:last-child { padding-right: 0px; padding-left: 0px;}

.Banner_sec .rightside .Slider .text .Lorem { float: left; width: 100%; }

/* this is the text under the images */
.Banner_sec .rightside .Slider .text .Lorem p { 
       padding-top: 0px; 
							font-size: 18px; 
							color: #fff; 
							margin: 0px; 
							font-family: 'Open Sans', sans-serif; 
							font-weight: 400; 
							text-align: left; 
							line-height: 19px; }

.Banner_sec .rightside .Slider .text .Lorem p span { font-size: 14px; text-align: left; color: #ff9000;}

.Banner_sec .rightside .Shadow { position: absolute; bottom: -3px; left: -25px; max-width: none; }

/* <<< bg color>>> */
.bgcolor { 
      height: 74px; 
						width: 100%; 
						background: rgba(249,250,251,1); 
						background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(249,250,251,1)), color-stop(0%, rgba(249,250,251,1)), color-stop(100%, rgba(225,228,231,1)));
	     background: linear-gradient(to bottom, rgba(249,250,251,1) 0%, rgba(249,250,251,1) 0%, rgba(225,228,231,1) 100%);
	     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fafb', endColorstr='#e1e4e7', GradientType=0 ); 
						}
	
	
	/* <<< Container >>> */
	#Container { overflow: hidden; width: 100%; }

	/* <<< About Section >>> */
	.About_sec { padding: 115px 0px 88px 0px ; width: 100%; overflow: hidden; background:#3A5C81 }
	
	.About_sec .Center { max-width: 1100px; margin: auto; overflow: hidden; text-align: center; }
	
	.About_sec h2 { 
	      font-size: 56px; 
							color: #000; 
							font-family: 'Oswald', sans-serif; 
							font-weight: 400; 
							margin: 0px; 
							text-transform: uppercase; 
							line-height: 60px; 
							letter-spacing: -0.4px; 
							}
							
	.About_sec p { 
	      padding: 24px 0px 35px 0px; 
							font-size: 14px; 
							color: #333; 
							margin: 0px; 
							font-family: 'Open Sans', sans-serif; 
							line-height: 25px; 
							font-weight: 400; 
							}
							
	.About_sec .Line { border: solid 1px #ff9408; height: 2px; width: 252px; margin: auto; }
	
	.About_sec .Tabside { padding: 90px 0px; width: 100%;}
	
	.About_sec .Tabside ul { list-style: none; margin: 0px; padding-bottom: 59px; }
	
	.About_sec .Tabside li { float: none; padding: 0px; margin: 0px -2px; display: inline-block;}
	
	.About_sec .Tabside li a { 
	      padding: 14px 40px 13px 40px; 
							font-size: 18px; 
							color: #989898; 
							font-family: 'Open Sans', sans-serif; 
							font-weight: 400; 
							text-decoration: none; 
							text-transform: uppercase; 
							border: solid 1px #d5d5d5; 
							display: block; 
							transition: all 0.3s ease; 
							}
							
	.About_sec .Tabside li a:hover, .About_sec .Tabside li a.activeLink { border: solid 1px #ff9408; background: #ff9408; color: #fff;}
	
	.About_sec .Tabside .TabImage { width: 43.63%; float: left; position: relative; }
	
	.About_sec .Tabside .TabImage .img1 { 
	      position: absolute; 
							top: 0px; 
							left: 42px; 
							height: 260px; 
							background: url(../img/about-shadow.png) no-repeat; 
							background-position: 25px 223px; 
							}
							
	.About_sec .Tabside .TabImage .img1 img { padding: 5px; border: solid 1px #ececec; background: #fff; }
	
	.About_sec .Tabside .TabImage .img2 { position: absolute; top: 40px; left: 2px; height: 260px; background: url(../img/about-shadow.png) bottom center no-repeat; background-position: 0px 223px; }
	.About_sec .Tabside .TabImage .img2 img { padding: 5px; border: solid 1px #ececec; background: #fff; }
	.About_sec .Tabside .Description { width: 54.3%; float: right; text-align: left; margin-top: -6px;}
	.About_sec .Tabside .Description h3 { font-size: 24px; color: #000; margin: 0px; text-transform: uppercase; font-family:'Open Sans'; line-height: 29px; }
	.About_sec .Tabside .Description h3 span { padding-left: 3px; font-size: 14px; color: #ff9000; display: block; }
	.About_sec .Tabside .Description p { padding: 21px 0px 4px 0px; font-size: 14px; color: #333; margin: 0px; font-family:'Open Sans'; line-height: 25px; }
	.About_sec .Tabside .Description p .cyan { font-size: 16px; color: #00F; text-align:left }

	/* <<< Services Section >>> */
	.Services_sec{ padding: 114px 0px 90px 0px ; width: 100%; overflow: hidden; background: url(../img/Services-bg.jpg) top center no-repeat; background-size: cover; }
	.Services_sec .Center { max-width: 1100px; margin: auto; overflow: hidden; text-align: center; }
	.Services_sec h2 { font-size: 56px; color: #fff; font-family: 'Oswald', sans-serif; font-weight: 400; margin: 0px; text-transform: uppercase; line-height: 60px; }
	.Services_sec p { padding: 25px 0px 35px 0px; font-size: 14px; color: #d8dfe5; margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; font-weight: 400; }
	.Services_sec .Line { border: solid 1px #ff9408; height: 2px; width: 252px; margin: auto; }
	.Services_sec .Serviceside { padding: 76px 0px 30px 0px; width: 100%; overflow: hidden; }
	.Services_sec .Serviceside ul { list-style: none; margin: 0px }
	.Services_sec .Serviceside li { float: left; padding: 0px; margin: 0px 40px 0px 0px; text-align: center; width: 245px; }
	.Services_sec .Serviceside li:last-child { margin-right: 0px;}
	.Services_sec .Serviceside li.Development { padding: 44px 0px 161px 0px; background: url(../img/Development-bg.jpg) no-repeat;box-shadow: 1px 4px 7px -4px rgba(0,0,0,0.75); }	.Services_sec .Serviceside li.Development a { text-decoration: none; background: url(../img/Development-cn.png) top center no-repeat; display: block; }
	.Services_sec .Serviceside li.Development h4 { padding: 138px 0px 0px 0px; font-size: 17px; color: #03a4df; text-decoration: none; text-transform: uppercase; font-family: 'Open Sans', sans-serif; font-weight: 400; }
	.Services_sec .Serviceside li.Development a:hover h4 { color: #fff; background: url(../img/Develop-hover-icn.png) top center no-repeat; }

	.Services_sec .Serviceside li.Desdin { padding: 44px 0px 159px 0px;background: url(../img/desgin-bg.jpg) no-repeat; box-shadow: 1px 4px 7px -4px rgba(0,0,0,0.75); }
	.Services_sec .Serviceside li.Desdin a { text-decoration: none; background: url(../img/desgin-icn.png) top center no-repeat; display: block; }
	.Services_sec .Serviceside li.Desdin h4 { padding: 138px 0px 0px 0px; font-size: 18px; color: #ffab3f; text-decoration: none; text-transform: uppercase; font-family: 'Open Sans', sans-serif; font-weight: 400; }
	.Services_sec .Serviceside li.Desdin a:hover h4 { color: #fff; background: url(../img/desgin-hover-icn.png) top center no-repeat; }

	.Services_sec .Serviceside li.Concept { padding: 44px 0px 159px 0px; background: url(../img/concept-bg.jpg) no-repeat; box-shadow: 1px 4px 7px -4px rgba(0,0,0,0.75); }
	.Services_sec .Serviceside li.Concept a { text-decoration: none; background: url(../img/concept-icn.png) top center no-repeat; display: block; }
	.Services_sec .Serviceside li.Concept h4 { padding: 138px 0px 0px 0px; font-size: 18px; color: #ae382d; text-decoration: none; text-transform: uppercase;font-family: 'Open Sans', sans-serif; font-weight: 400; }
	.Services_sec .Serviceside li.Concept a:hover h4 { color: #fff; background: url(../img/concept-hover-icn.png) top center no-repeat; }

	.Services_sec .Serviceside li.System { padding: 44px 0px 159px 0px;background: url(../img/systam-bg.jpg) no-repeat; box-shadow: 1px 4px 7px -4px rgba(0,0,0,0.75); }
	.Services_sec .Serviceside li.System a { text-decoration: none; background: url(../img/systam-icn.png) top center no-repeat; display: block; }
	.Services_sec .Serviceside li.System h4 { padding: 138px 0px 0px 0px; font-size: 18px; color: #5e5f61; text-decoration: none; letter-spacing: -1px; text-transform: uppercase; font-family: 'Open Sans', sans-serif; font-weight: 400; }
	.Services_sec .Serviceside li.System a:hover h4 { color: #fff; background: url(../img/systam-hover-icn.png) top center no-repeat;}
	
	/* <<< Pricing Section >>> */
	.Pricing_sec { padding: 1px 0px 108px 0px ; width: 100%; overflow: hidden; background: #3A5C81; }
	.Pricing_sec .Center { max-width: 1100px; margin: auto; overflow: hidden; text-align: center; }
	.Pricing_sec h2 { font-size: 57px; color: #000; font-family: 'Oswald', sans-serif; font-weight: 400; margin: 0px; line-height: 26px; }
	.Pricing_sec p { padding: 0px 0px 0px 0px; font-size: 14px; color: #8f8f8f; margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; font-weight: 400; }
	.Pricing_sec .Line { border: solid 1px #ff9408; height: 2px; width: 252px; margin: auto; }
	.Pricing_sec .Pricingside { padding: 50px 0px 0px 0px; width: 100%; overflow: hidden; text-align: initial; }
	.Pricing_sec .Pricingside ul { list-style: none; margin: 0px;}
	.Pricing_sec .Pricingside li { float: none; padding: 0px; margin: 0px 0px 0px 0px; height: 150px; background-color:; text-align: center; }
	.Pricing_sec .Pricingside li .Basic { width: 25px; float: left; display: table; height: 10px; background: #ff9408; transition: all ease 0.3s; }
	.Pricing_sec .Pricingside li .Basic h5 { display: table-cell; vertical-align: middle; font-size: 25px; color: #2d2d2d; font-family: 'Oswald', sans-serif; font-weight: 400; text-transform: uppercase; margin: 0px; clear: none; text-align: center; }
	.Pricing_sec .Pricingside li .sidebox {width: 130px; height: auto; float: left; background: #2d2d2d;}
	.Pricing_sec .Pricingside li .sidebox h2 { font-size: 20px; color: #ff9408; font-family: 'Oswald', sans-serif; font-weight: 100; letter-spacing: 1px; text-transform: none }

	.Pricing_sec .Pricingside li .schoolinfo { padding: 0px 0px 0px 0px; width: 900px; float: left; }
	.Pricing_sec .Pricingside li .schoolinfo p { font-size: 16px; color: #CCC; margin: 0px; font-family: 'Oswald', sans-serif; font-weight: 400; line-height: 20px; }
	.Pricing_sec .Pricingside li .schoolinfo p span { }
	.Pricing_sec .Pricingside li .schoolinfo.last { background: none; }
	

	/* <<< Contact Section >>> */
	.Contact_sec { width: 100%; overflow: hidden; }
	.Contact_sec .Contactside { background: url(../img/stage-2.jpg) center no-repeat; background-size:50%; overflow: hidden; }
	.Contact_sec .Center { padding: 115px 0px 77px 0px; max-width: 1100px; margin: auto; overflow: hidden; text-align: center; }
	.Contact_sec h2 { font-size: 57px; color: #fff; font-family: 'Oswald', sans-serif; font-weight: 400; margin: 0px; text-transform: uppercase; line-height: 60px;}
	.Contact_sec p { padding: 24px 0px 35px 0px; font-size: 14px; color: #ebebeb; margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; font-weight: 400; }
	.Contact_sec .Line { border: solid 1px #ff9408; height: 2px; width: 252px; margin: auto; }
	.Contact_sec .Pricingside { padding: 70px 0px 10px 0px; width: 100%; overflow: hidden; text-align: initial; }
	
	/* <<< Map >>> */
	.Map { position: relative; z-index: 1; width: 100%; overflow: hidden; box-shadow: 0px 1px 12px 3px #242424;
		-webkit-box-shadow: 0px 1px 12px 3px #242424; -moz-box-shadow: 0px 1px 12px 3px #242424; -o-box-shadow: 0px 1px 12px 3px #242424; }
		.Map #GoogleMap { height: 399px; }

	

		/* <<< footer >>> */
		footer { overflow: hidden; width: 100%; text-align: center; background: rgba(0, 0, 0, 0); }
		footer .Cntr { padding: 28px 0px; max-width: 1100px; margin: auto;}
		footer .Cntr p { padding: 100px; font-size: 13px; color: #039; font-family:'Open Sans'; margin: 0px; }
		footer .Cntr a { color: #a9abad; text-decoration: none; }
		footer .Cntr a:hover { color: #fff; }


/* ==========================================================================
  Author's custom styles
  ========================================================================== */
  #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
  #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
  	animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ z-index: 1001; }
  	#loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent;
  	border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ }
  #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent;
border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ }

.image2
{ display: flex;
    align-items: center;
    justify-content: center;}

@-webkit-keyframes spin {
	0%  { 
		-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */
		transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */
		transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
	}
}
@keyframes spin {
	0%  { 
		-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */
		transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */
		transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
	}
}

#loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #222222; z-index: 1000; -webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: translateX(0); /* Firefox 16+, IE 10+, Opera */}

#loader-wrapper .loader-section.section-left {
	left: 0;
}

#loader-wrapper .loader-section.section-right {
	right: 0;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
	-webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */
	transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ 
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {
	-webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */
	transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ 
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader {
	opacity: 0; 
	transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
	visibility: hidden;

	-webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE 9 */
	transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */ 
	transition: all 0.3s 1s ease-out;
}

/* JavaScript Turned Off */
.no-js #loader-wrapper {
	display: none;
}


/*--------------------STYLES FROM TEST ---------------------------*/

/*-----Standard styles --------*/
h1 { font-size: 40px; 
					text-align:center; 
					color: aqua
					}
					
h2 { font-size: 30px;
     text-align:center; 
					color:aliceblue;
					}
					
h3 { font-size: 24px; color:antiquewhite }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 14px; }
.h7 { font-size: 100px; }  /*use for spacing with &nbsp; */

.h8 { 
      font-size: 36px; 
      color: #CCC; 
						display:block; 
						margin-left:10%; 
						margin-right:10%; 
						margin-top:30px; 
						text-align:center; 
					}

p {font-size: 13px; margin: 5px 0px 15px 0px; }

.p1 {
      font-size: 16px; 
						margin: 5px 0px 15px 0px; 
						color:darkorange; display: inline; 
						font-style: italic;
						}
						
.p2 { 
      font-size: 16px; 
						color: #C8C8C8; 
						display: inline; }

.p3 {
      font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; 
						font-size: 30px; 
						color:darkorange; 
						display:block; 
						margin-right:10%; 
						margin-top:30px; 
						text-align:left; 
						font-style: italic;  }

.p4 {
      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; 
						font-size: 20px; 
						color: cornflowerblue; 
						display:block; 
						margin-left:0%; 
						margin-right:10%; 
						margin-top:10px; 
						margin-bottom: 10px; 
						text-align:justify; 
						}

.p5 { 
      font-size: 16px; 
						color: #ff9000; 
						display:block; 
						text-align:left; 
						padding-left: 20px 
					}
					
.p6 { 
      font-size: 16px; 
						color: #FEFEFE; 
						display:block; 
						text-align:left; 
						padding-left: 20px 
						}
						
						
hr {
  				border: #EFEFEF;
      height: 1px;           /* Set height */
      background: linear-gradient(to right, #ff4e50, #fc913a); /* Gradient color */
      margin: 2px 0;
		    width: 100%;
}


.button 
{
      float: right; 
						background-color:#100461; 
						border: none; 
						color: white; 
						padding: 5px 5px; 
						text-align: center; 
						text-decoration: none; 
						display: inline-block; 
						font-size: 12px; 
						margin: 4px 2px; 
						cursor: pointer; 
	}
	
body {
    margin: 0;
				font-family: Arial, sans-serif;
    justify-content: center;
    align-items: center;
    background-color:darkslateblue;
    justify-content:center; /* Aligns the container to the right */
				padding-right: 30px; /* Optional: Padding on the right side of the body */
				display: flex;            /* Enable Flexbox */
    flex-direction: column;  /* Stack items vertically */
    align-items: center;      /* Center horizontally */
				width: 100%;
}
	
	html {
    height: 100%; /* Ensure html element takes full height */
	   scroll-behavior: smooth /* Enables smooth scrolling for anchor links */
}


img {
            display: block; /* Ensures the image is below text */
            margin-top: 10px; /* Space above the image */
            width: 100%; /* Adjusts to the container width */
            height: auto; /* Keeps the aspect ratio */
	}
	
	/*Navbar----------------------------------------*/

.navbar {
    background-color: #040521;
    overflow: hidden;
    position:fixed; /* Fixed position */
    top: 0; /* Stay at the top */
				right: 0; /* Align to the right */
    width: 100%; /* Full width */
    z-index: 1000; /* On top of other elements */
				padding-right: 150px; /* Right padding */
				font-size: 15px;
				display: flex; /* Use Flexbox for layout */
    justify-content: flex-end; /* Align items to the right */
				
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav a {
    text-decoration: none; /* Remove default underline */
    color: darkgoldenrod; /* Default link color */
    position: relative; /* Required for the pseudo-element */
}

nav a:hover {
    color: white; /* Change link color on hover */
    font-style: italic; /* Make text italic on hover */
}

nav a::after {
    content: ""; /* Empty string to create the underline */
    position: absolute; /* Position it below the text */
    left: 0;
    right: 0;
    bottom: -9px; /* Adjust as needed to position the underline */
    height: 3px; /* Thickness of the underline */
    background-color: chocolate; /* Color of the underline */
    transform: scaleX(0); /* Initially hide the underline */
    transition: transform 0.3s ease; /* Smooth transition */
}

nav a:hover::after {
    transform: scaleX(1); /* Show the underline on hover */
				
}


/* End of navbar ---------------------------------*/

/*--------------------------------------------sliding images---------------------------*/
.slide-container {
    position: relative;
    width: 500px;
    height: 500px; /* Adjust as needed */
    overflow: hidden;
				padding-right: 100px; margin-top: 30px; margin-right: 30px; /* Optional padding */
				float: right;
				 
}

.fade {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 2s ease-in-out;  /*how long it takes to fade in & out */
}

.fade.active {
    opacity: 1;
}

@keyframes fadeEffect {
    from { opacity: 0; }
    to { opacity: 1; }
}



.toptext {
width: 50%;
}

/* Logo ----------------*/
.logo {
    width: 100px; /* Adjust the height as needed */
    margin-right: 400px; /* Space between logo and links */
}

/*----About us -------*/

.aboutuscontainer {
    height: 400px; /* Full height */
				width: 100%;
    background-image: url('images/stage-1.jpg'); /* Image URL */
    background-size: cover;/* Ensure the image covers the whole area */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent tiling */
    margin: 10px;
				display: block; /* Ensures block behavior */
				top: 35px; /* Adjust as necessary */
				
}

.aboutus {
				width: 95%;
				display: block; /* Ensures block behavior */
				position: absolute;
				margin-left: 50px;
				top: 35px; /* Adjust as necessary */
}
				
/*---- next show  ----*/


.next-show {
    background-color:blue;
				width: 100%;
				padding: 15px;
    margin: 10px;
				display: block; /* Ensures block behavior */
				border: 1px solid #000;
    margin-bottom: 20px;
				}
				
			/*----------------- PAST SHOWS -------------------*/
			
		.past-container {
    display: flex; /* Create a flex container */
				width: 100%;
}

.past-left-box {
    width: 20%; /* Fixed width for the left box */
    background-color:darkslateblue/* Background color */
    padding: 20px; /* Padding for the left box */
}

.past-right-box {
    width: 80%; /* Take the remaining width for the right box */
    background-color:darkslateblue; /* Background color */
    padding: 10px; /* Adjust padding for the right box */
    /*height: 400px; /* Fixed height for demonstration */
    columns: 4; /* Number of columns in the right box */
    column-gap: 30px; /* Spacing between columns */
    margin: 0; /* Remove all margins from the right box */
				
}

.past-right-box ul {
    list-style-type: none; /* Remove bullet points */
    margin: 0; /* Remove default margin for the unordered list */
    padding: 0; /* Remove default padding for the unordered list */
				text-align: left;
}

.past-right-box li {
    margin: 0; /* Remove any margin around list items */
    padding: 5px 0; /* Optional: Add padding for spacing between items */
}

.past-image-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
								
/*---------END OF PAST SHOWS --------*/

/*--------MEMBERS -----*/
.members-container {
    padding: 0px 0px 40px 40px ;
    width: 100%;
    overflow: hidden;
				background-color: blue;
				}
				
.centre {
    padding: 114px 0px 90px 0px ;
    width: 100%;
    overflow: hidden;
				}
				
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0px; /* Adjusts the space between images */
		  text-align: left;
		  color: aliceblue;
}

.image-centre {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
				}
			

/*------------------FUNDING------------*/
.funding{ 
     padding: 1px 0px 108px 0px ; 
					width: 100%; 
					overflow: hidden; 
					background: #3A5C81; }
					

	.funding .centre {
	    max-width: 1100px;
					margin: auto;
					overflow: hidden;
					text-align: center;
					}
					
	.funding h2 {
	    font-size: 57px;
					color: #000;
					font-family: 'Oswald', sans-serif;
					font-weight: 400;
					margin: 0px;
					line-height: 26px;
					}
					
	.funding p {
	    padding: 0px 0px 0px 0px;
					font-size: 14px;
					color: #8f8f8f;
					margin: 0px;
					font-family: 'Open Sans', sans-serif;
					line-height: 25px;
					font-weight: 400;
					}
	
	
	.funding .line {
	    border: solid 1px #ff9408;
					height: 2px;
					width: 252px;
					margin: auto;
					}
					
	.funding .leftbox {
	    padding: 50px 0px 0px 0px;
					width: 100%;
					overflow: hidden;
					text-align: initial;
					}
					
	.funding .leftbox ul {
	    list-style: none;
					margin: 0px;
					}
					
	.funding .leftbox li {
	    float: none;
					padding: 0px;
					margin: 0px 0px 0px 0px;
					height: 150px;
					background-color:;
					text-align: center;
					}
					
	.funding .leftbox li .basic {
	    width: 25px;
					float: left;
					display: table;
					height: 10px;
					background: #ff9408;
					transition: all ease 0.3s;
					}
					
	.funding .leftbox li .basic h5 {
	    display: table-cell;
					vertical-align: middle;
					font-size: 25px;
					color: #2d2d2d;
					font-family: 'Oswald', sans-serif;
					font-weight: 400;
					text-transform: uppercase;
					margin: 0px;
					clear: none;
					text-align: center;
					}
					
	.funding .leftbox li .sidebox {
	    width: 130px;
					height: auto; float: left;
					background: #2d2d2d;
					}
					
	.funding .leftbox li .sidebox h2 {
	    font-size: 20px;
					color: #ff9408;
					font-family: 'Oswald', sans-serif;
					font-weight: 100;
					letter-spacing: 1px;
					text-transform: none
					}

	.funding .leftbox li .rightbox {
	    padding: 0px 0px 0px 0px;
					width: 900px;
					float: left;
					}
					
	.funding .leftbox li .rightbox p {
	    font-size: 16px;
					color: #CCC;
					margin: 0px;
					font-family: 'Oswald', sans-serif;
					font-weight: 400;
					line-height: 20px;
					}
	/*Responsive navbar*/
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #435494;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  position: sticky;
  top: 0;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;    /*colour of nav text */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #039;   /*colour of active page background */
  color: white;   /*colour of active page text */
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

				
	.funding .leftbox li .rightbox.last {
	    background: none;
					}
	
	/*--------   GET IN TOUCH   ------*/

	.getintouch {
	    width: 90%;
					height: 410px;
					overflow: hidden;
					background: url(images/stage-2.jpg) center no-repeat;
					background-size:50%;
					overflow: hidden;
					margin-top: 0px;
					}