/* base styles */
{    
	margin: 0;    
	padding: 0;    
	box-sizing: border-box;    
	list-style: none;    
	text-decoration: none;
}

a {    
	color: rgb(00,00,00); /*rgb(239,229,126);*/
} 

a:visited {    
	color: rgb(47,47,47);/*rgb(69,99,245);*/
}

a:hover {    
	color: rgb(239,229,126);/*#6F86FF;*/
}

@keyframes bgSwap {
           0%,25% { background-image: url('img/epv_team_1.jpg'); }
           25%,50% { background-image: url('img/epv_team_2.jpg'); }
           50%,75% { background-image: url('img/epv_team_1.jpg'); }
           75%,100% { background-image: url('img/epv_team_2.jpg'); }
     }

     body {
     	background-color: rgb(188,188,188);
     	animation: bgSwap 30s infinite;
     	animation-fill-mode: forwards;
     	font-family: font-family: Arial;
     	background-color: var(--primary-bg);

     	/*color: var(--text-main);*/
     	display: flex;
     	justify-content: center;
     	padding: 2rem;
     	margin: 0;
     	background-image: url('img/epv_team_1.jpg');/* Ensure the image does not repeat */
     	background-repeat: no-repeat;/* Center the background image */
     	background-position: center center;/* Fixed makes it stay in place while scrolling */
     	background-attachment: fixed;/* SCALE LOGIC: 'cover' scales the image to fill the entire container */
     	background-size: cover;/* Ensure the body takes up the full height of the viewport */
     }

    .fixed-bottom-center {
    	position: fixed; /* or absolute */
    	display: flex;
    	justify-content: center;
    	bottom: 0;
    	width: 100%;
    	/*text-align: center;*/
    	color:white;
    	font-size:14px;
    	font-family: Arial, Helvetica, sans-serif;
    	text-decoration:none;
    }

     .fixed-bottom-center a{
      position: fixed; /* or absolute */
      display: flex;
      justify-content: center;
      text-align: center;
      bottom: 0;
      width: 100%;
      color:white;
      font-size:14px;
      font-family: Arial, Helvetica, sans-serif;
      text-decoration:none;
    }

    .text-top {
    	font-size: 1rem;
    	font-weight: bold;
    	font-family: Arial, Helvetica, sans-serif;
    	color:black;
    	position: relative; /* or absolute, fixed */
    	top: 0;
    	right: 40;
    	width: 100%;
    	text-align: 0 ; /* Optional: centers the text horizontally */
    }
    .video-container {
      width: 15vw; /* The container is 50% of the main content area */
      margin: 0 auto; /* Optional: centers the container */
    }
    .video-container video {
      width: 75%; /* Video fills 100% of the .video-container */
      height: auto; /* Height scales proportionally */
    }

    .centered-text-area {
    	position: fixed; /* or absolute */
    	/*display: flex;*/
    	justify-content: center;
    	text-align: center;
    	align-items: center; /* Vertical alignment */
    	background-color: rgba(238, 238, 223, 0.6);
    	font-size: 14px;
    	font-family: Arial, Helvetica, sans-serif;
    	color:black;
    	/*position: absolute;  or absolute, relative */
    	top: 100px;/*distance from the top*/
    	right: 20vw;/* distance from the right*/
    	left:10vw;/*distance from the left*/
    	padding:20px;
    	height:60vh;
      width:60vw;
    	overflow-y: auto;

    	border-radius: 15px; /* The Rounded Corners */

    	outline: 2px solid 3498db;/*Add a shadow and border */
    	outline-offset: 10px;

    	border: 3px solid #3498db; /* Set border size, style, and color in one line */
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);/* Add a shadow: [horizontal] [vertical] [blur] [spread] [color] */
        	
      /* Additional styling for better appearance */
      outline: groove, ridge, inset, and outset; /* Removes the default focus outline */
      border: 1px solid #d7a3cf;
      box-shadow: 0 4px 8px rgba(23,23,100);
      border: 1px solid #ddd;margin: 10px 0;
      line-height: 1.6;
      /*keep textbox below hamburger menu*/
      z-index: 1; /* High value brings it to front */
   }

   .centered-text-area-contact {
   	  position: fixed; /* or absolute */
      /*display: flex;*/
      justify-content: center;
      text-align: center;
      align-items: center; /* Vertical alignment */
      background-color: rgba(238, 238, 223, 0.5);
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
      color:black;
      /*position: absolute;  or absolute, relative */
      top: 110px;/*distance from the top*/
      right: 20vw;/* distance from the right*/
      left:10vw;/*distance from the left*/
      padding:20px;
      height:25vh;
      width:60vw;
      overflow-y: auto;

      border-radius: 15px; /* The Rounded Corners */

      outline: 2px solid 3498db;/*Add a shadow and border */
      outline-offset: 10px;
      border: 3px solid #3498db; /* Set border size, style, and color in one line */
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);/* Add a shadow: [horizontal] [vertical] [blur] [spread] [color] */
      /* Additional styling for better appearance */
      outline: groove, ridge, inset, and outset; /* Removes the default focus outline */
      border: 1px solid #d7a3cf;
      box-shadow: 0 4px 8px rgba(23,23,100);
      border: 1px solid #ddd;margin: 10px 0;
      line-height: 1.6;
    }

    .centered-text-area-contact a{
      position: fixed; /* or absolute */
      /*display: flex;*/
      justify-content: center;
      text-align: center;
      align-items: center; /* Vertical alignment */
      background-color: rgba(238, 238, 223, 0.5);
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
      color:black;
      /*position: absolute;  or absolute, relative */
      top: 110px;/*distance from the top*/
      right: 20vw;/* distance from the right*/
      left:10vw;/*distance from the left*/
      padding:20px;
      height:25vh;
      width:60vw;
      overflow-y: auto;

      border-radius: 15px; /* The Rounded Corners */

      outline: 2px solid 3498db;/*Add a shadow and border */
      outline-offset: 10px;
      border: 3px solid #3498db; /* Set border size, style, and color in one line */
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);/* Add a shadow: [horizontal] [vertical] [blur] [spread] [color] */
      /* Additional styling for better appearance */
      outline: groove, ridge, inset, and outset; /* Removes the default focus outline */
      border: 1px solid #d7a3cf;
      box-shadow: 0 4px 8px rgba(23,23,100);
      border: 1px solid #ddd;margin: 10px 0;
      line-height: 1.6;
    }

   .centered-text-area-video {
      position: absolute; /* or absolute */
      /*display: flex;*/
      justify-content: center;
      text-align: center;
      align-items: center; /* Vertical alignment */
      background-color: rgba(238, 238, 223, 0.5);
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
      color:black;
      /*position: absolute;  or absolute, relative */
      top: 130px;/*distance from the top*/
      right: 20vw;/* distance from the right*/
      left:10vw;/*distance from the left*/
      padding:20px;
      height:25vh;
      width:65vw;
      overflow-y: auto;

      border-radius: 15px; /* The Rounded Corners */

      outline: 2px solid 3498db;/*Add a shadow and border */

      outline-offset: 10px;
      border: 3px solid #3498db; /* Set border size, style, and color in one line */
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);/* Add a shadow: [horizontal] [vertical] [blur] [spread] [color] */
      /* Additional styling for better appearance */
      outline: groove, ridge, inset, and outset; /* Removes the default focus outline */
      border: 1px solid #d7a3cf;
      box-shadow: 0 4px 8px rgba(23,23,100);/* is this the hamburger menu color, please let me know?????23,23,100*/
      border: 1px solid #ddd;margin: 10px 0;
      line-height: 1.6;
    }

   /*take the dots out of unordered lists*/

   ul {
    list-style-type: none;
   	font-size: 14px;
   	font-size: clamp(1rem, 2vw + 0.5rem, 1.2rem);
   	font-family: Arial, sans-serif;
    z-index:1000;
   }

   /* off-screen-menu */
   .off-screen-menu { 
   	/*background-color: dimgrey;transparent*/
   	background-color:rgba(191, 191, 191, 0.0);
   	height: 75vh;
   	width:35%;
   	max-width: 425px;
   	position: fixed;
   	top: 0;
   	right: -450px;
   	display: flex; 
   	flex-direction: column;
   	justify-content: center;
   	align-items: center;
   	text-align: center;
   	font-size: 3rem;
   	transition: .3s ease;
    z-index:1000;
   }

   .off-screen-menu.active{
   	right:25px;
    z-index:1000;
   }

   /* nav */
   nav {
   	padding: 1rem;
   	display: flex;
    color: rgb(00, 00, 00)!important;
   	background-color: rgb(00, 00, 00);
    z-index:1000;
   }

   nav:a{
    padding: 1rem;
    display: flex;
    color: rgb(00, 00, 00)!important;
    background-color: rgb(00, 00, 00);
    z-index:1000;
   }

   /* ham menu */
   .ham-menu { 
   	font-family: Arial, sans-serif !important;
    font-weight: bold;
   	colour:rgb(00, 00, 00)!important; 

   	/*background-color:transparent !important;*/
   	margin-left:auto;
   	position:relative;
   	height:30px;
   	width:30px;
    transform: scale(0.8);
   	z-index: 1000; /* High value brings to front */
   }

   .ham-menu:a {
   	/*color:black;*/
    background-color: rgba(238, 238, 223, 0.6);
    color:rgb(00, 00, 00) !important;
    font-weight: bold;
    z-index:1000;
   }

   .ham-menu:visited {
   	  color: rgb(00, 00, 00) !important;
      font-weight: bold;
      z-index:1000;
   }

  .ham-menu span{
    color:rgb(00, 00, 00) !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold;
  	height: 5px;
   	width: 100%;
   	background-color: #EfEfEf;
   	border-radius: 25px;
   	position: absolute; 
   	left: 50%;
   	top: 50%;
   	transform: translate(-50%, -50%);
   	transition: .3s ease;
    z-index:1000;
   }

   .ham-menu span:nth-child(1) {
   	top: 25%;
    z-index:1000;
   }

   .ham-menu span:nth-child(3) {
   	top: 75%;
    z-index:1000;
   }

   .ham-menu.active span:nth-child(1) {
   	top: 50%;
   	transform: translate(-50%, -50%)rotate(45deg);
    z-index:1000;
   }

   .ham-menu.active span:nth-child(2) {
   	opacity: 0;
    z-index:1000;
   }

   .ham-menu.active span:nth-child(3) {
   	top: 50%;
   	transform: translate(-50%, -50%)rotate(-45deg);
    z-index:1000;
   }

   .styled_image {
   	width: 170px;         /* Specific width */
   	height: auto;         /* Maintains aspect ratio */
   	border-radius: 10px;  /* Rounded corners */
   	display: block;       /* Necessary for centering with margin */
   	margin: 0 auto;       /* Centers horizontally */
   }