html * {
     border:0;
     margin:0;
     padding:0;
}

body {
     /*font-family:HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;*/
     font-family: 'Montserrat', sans-serif;
     font-size:100%;
     line-height:1.1em;
     text-align:left;
     background-image: url('/images/BG.png');
     background-size: 100% 100%;
}

#page {
     margin-left:10px;
     margin-right:10px;
     text-align:left;
     width:95%;
}

#header {
     height:4em;
     position:relative;
     vertical-align:middle;
     width:100%;
}

#left {
     float:left;
     font-size:.8em;
     position:relative;
     width:28%;
}

div.left_box h3,
div#nav h3,
#path,
div#path h3 {
    background: rgb(66, 132, 181); /* Blue */
    border: 0.2em solid rgb(66, 132, 181); /* Blue */
    color: #FFF;
    font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1.0em;
    /*font-size: .8em;*/
    /*margin: 0;*/
    /*padding: 0.1em 0.1em 0.1em 0.1em;*/
    text-transform: uppercase;
}

div#nav {
  background: #FFFFFF;
  border: 0.2em solid rgb(66, 132, 181); /* Blue */
  box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.80);
  float: right;
  width: 255px;
  max-width: 100%;
}

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

#nav ul li {
  color: rgb(51, 51, 51);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2.5rem;
  margin: 0;
  padding: 0.5rem 1rem;
  text-decoration: none;
/*  text-transform: uppercase;*/
  background-color: #fff; /* Default background color */
  transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.2s; /* Smooth transitions */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* No box shadow by default */
}

#nav ul li:hover {
  background-color: rgb(242, 242, 242);
  color: rgb(34, 34, 34);
  transform: scale(1.05); /* Slight scaling effect on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow on hover for lifted effect */
}

#nav ul li::before {
  margin-right: 0.5rem;
}

#nav a:link {
     background:transparent;
     color:rgb(66, 132, 181);  /*Blue*/
     text-decoration:none;
}
#nav a:visited {
     background:transparent;
     color:rgb(166, 4, 219);  /*Purple*/
     text-decoration:none;
}

#nav a:hover,#nav a:active {
     text-decoration:none;
}

div.left_box {
     background:rgba(255,255,255,0.9);
     border: 0.2em solid rgb(66, 132, 181); /* Blue */
     float:right;
     width:202px;
}

#content {
     -moz-box-shadow:6px 6px 15px rgba(0,0,0,0.80);
     -webkit-box-shadow:6px 6px 15px rgba(0,0,0,0.80);
     background:rgba(255,255,255,0.9);
     border: 0.2em solid rgb(66, 132, 181); /* Blue */
     box-shadow:6px 6px 15px rgba(0,0,0,0.80);
     display:inline;
     float:right;
     font-family:HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     /*font-size:90%;*/
     min-width:630px;
     overflow:hidden;
     position:relative;
     width:68%;
}

#content p {
     font-family: 'Open Sans', sans-serif;
     margin:0 0 .5em;
     padding:.35em;
}

#content ul {
     margin:1em 0;
     padding:0 0 .2em 1em;
}

#content img {
  height: auto;
  max-width: 100%;
  padding: 0.5em;
}

#content h1 {
     border-bottom:.2em solid #666666; /* Grey */
     clear:both;
     color: rgb(178, 34, 34); /* Red */
     font-family: 'Roboto', sans-serif;
     font-size:1.4em;
     line-height:1em;
     margin:0;
     /*padding:top right bottom left*/
     padding:.1em .1em .1em .1em;
}

#content h2 {
     clear:both;
     color:#666666; /* Grey */
     font-family: 'Roboto', sans-serif;
     font-size:1.4em;
     margin:0;
     padding:.1em .1em .1em .1em;
}

#content h3 {
     clear:both;
     color:#666666; /* Grey */
     font-family: 'Roboto', sans-serif;
     font-size:1.4em;
     margin:0;
     /*padding:.1em .1em .1em .1em;*/
}

#main {
     border: 0.2em solid rgb(66, 132, 181); /* Blue */
     padding:.5em 1.5em 1.5em .7em;
}

.question {
     color:#000000; /*Black*/
     font-weight:700;
}

.answer1 {
     color:#B22222; /*Red*/
     font-weight:700;
}

.answer2 {
     color:#666666; /*Grey*/
     font-weight:700;
}

smalltext {
     font-family: 'Open Sans', sans-serif;
     font-size:10px;
}

div.img_left,div.img_right {
     border: 0.2em solid rgb(66, 132, 181); /* Blue */
}

div.img_left {
     float:left;
     margin:.5em .8em 0 0;
}

div.img_right {
     float:right;
     margin:.5em 0 0 .8em;
}

div.img_left img,div.img_right img {
     border: 0.2em solid rgb(66, 132, 181); /* Blue */
     display:block;
     margin:0;
     padding:0;
}

br.clear {
     clear:both;
     display:none;
}

ul#gallery {
     font-family: 'Open Sans', sans-serif;
     list-style-type:none;
     margin:0 auto;
     margin-right:auto;
     padding:0;
     width:95%;
}

ul#gallery li {
     float:left;
     margin:5px;
     transition: all 0.3s; /* Adding smooth transition effect */
}

#gallery li:hover {
    transform: scale(1.1); /* Increase the size by 10% */
    color: #FF0000; /* Change the text color to red */
}

ul#gallery li p {
     margin:5px 0;
     text-align:center;
}

blockquote {
     color:#3d6a8e;
     /*font-family:Cambria, Georgia, serif;*/
     font-family: 'Roboto', sans-serif;
     font-size:120%;
     font-style:italic;
     line-height:1.45;
     margin:.25em 0;
     padding:.25em 40px;
     position:relative;
     margin-left:auto;
     margin-right:auto;
     width:70%;
}

blockquote:before {
     color:rgb(66, 132, 181); /*Blue*/
     content: open-quote;
     display:block;
     font-size:90px;
     left:-10px;
     position:absolute;
     top:-20px;
}

blockquote:after {
     color:rgb(66, 132, 181); /*Blue*/
     content: close-quote;
     display:block;
     font-size:90px;
     right:10px;
     position:absolute;
     bottom:-70px;
}

div.quotebox {
     -moz-box-shadow:6px 6px 15px rgba(0,0,0,0.80);
     -webkit-box-shadow:6px 6px 15px rgba(0,0,0,0.80);
     background:rgb(66, 132, 181); /*Blue*/
     box-shadow:6px 6px 15px rgba(0,0,0,0.80);
     color:#FFF;
     font-family: 'Roboto', sans-serif;
     font-size:1.2em;
     font-weight:700;
     line-height:1.2em;
     margin:10px;
     padding:10px;
     text-align:left;
     width:300px;
}

div.left_box a:link,#content a:link {
     color:rgb(66, 132, 181); /*Blue*/
}

div.left_box a:visited,#content a:visited,#footer a:link,#footer a:visited {
     color:#666666; /*Grey*/
}

div.left_box a:hover,div.left_box a:active,#content a:hover,#content a:active,#footer a:hover,#footer a:active {
     color:rgb(66, 132, 181); /*Blue*/
}

/* Style the container with a rounded border, grey background and some padding and margin */
.container {
     border: 2px solid #ccc;
     background-color: #eee;
     border-radius: 5px;
     padding: 16px;
     margin: 16px 0;
}

/* Clear floats after containers */
.container::after {
     content: "";
     clear: both;
     display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
     float: left;
     margin-right: 20px;
}

/* Increase the font-size of a span element */
.container span {
     font-size: 20px;
     margin-right: 15px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 500px) {
     .container {
         text-align: center;
    }
     .container img {
         margin: auto;
         float: none;
         display: block;
    }
}

.video-container-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Adjust the alignment as needed */
}

.video-container {
    flex: 1 0 calc(33.33% - 20px); /* Relative flex-basis with a max-width */
    box-sizing: border-box;
    text-align: center;
    margin: 10px; /* Add margin to create space between video containers */
    max-width: 500px; /* Adjust the max-width to limit the size of the containers */
}

.social-icons {
  display: flex;
  justify-content: space-between;
  width: 150px; /* Adjust the width as needed */
  margin: 0 auto; /* Center the icons horizontally */
}

.social-icons a {
  color: #333; /* Icon color */
  font-size: 24px; /* Icon size */
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #007bff; /* Icon color on hover */
}

/* Basic styling for the hero banner container */
.hero-banner {
  position: relative; /* To position the heading text over the banner */
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* To ensure the image doesn't overflow */
}

/* Style for the banner image */
.hero-banner img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  /*object-fit: cover; Resize the image to cover the container */
}

/* Style for the heading text */
.hero-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Poppins', sans-serif;
  font-size: 4rem; /* Increase the font size as needed */
  font-weight: bold;
  color: white;
  background-color: transparent; /* Remove the background color */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  text-align: center; /* Center the text horizontally */
  line-height: 1.2; /* Set the desired line height for spacing */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a drop shadow effect */
}

/* Individual style for the hero heading */
.hero-heading {
h4 {
     /*font-size:12rem;*/
     font-size:4vw;
   }
}