/*header xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.header {
   position: fixed;
   left: 0;
   right: 0;
   margin: auto;
   top: 0px;
   background-color: #012847;
   border-radius: 6px;
   color: white;
   font-family: 'Roboto', sans-serif;

}

/* If the screen size is 1101px wide or more, set the font-size of <div> to 36px */
@media screen and (min-width: 1025px) {
  .header {
    font-size: 20px;
    width:80%;
    height: 80px;
    line-height: 130px;
  }
}
  
/* If the screen size is 601px wide or more, but less than 1101 set the font-size of <div> to 30px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .header {
    font-size: 18px;
    width:100%;
    height: 65px;
    line-height: 105px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  .header {
    font-size: 16px;
    width: 100%;
    height: 50px;
    line-height: 70px;
  }
}


/*banner image xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

img.resp {
    background-color: #012847;
    border-radius: 6px;
}


/* If the screen size is 1101px wide or more, set the font-size of <div> to 36px */
@media screen and (min-width: 1025px) {
  img.resp {
    width:auto;
    height: 80px;
  }
}

  
/* If the screen size is 601px wide or more, but less than 1101 set the font-size of <div> to 30px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  img.resp {
    width: auto;
    height: 65px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  img.resp {
    width: auto;
    height: 50px;
  }
}


/*blog title xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.blogtitle {
  position: relative;
  margin: auto;
  font-family: 'Bona Nova', serif;
  font-style: italic;
  font-weight: bold;                                                                                   
  color: #012847;
  
  }
  
  
  /* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width: 1025px) {
  .blogtitle {
    font-size: 24px;
    width:60%;
    margin-top: 100px;
    
  }
}

  
/* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .blogtitle {
    font-size: 22px;
    width:80%;
    top: 80px;

  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  .blogtitle {
    font-size: 18px;
    width: 94%;
    top: 65px;

  }
}


/*blog date xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.blogdate {
  position: relative;
  margin: auto;  
  color: #012847;
  font-family: 'Roboto', sans-serif;
  
  }
  
  /* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width: 1025px) {
  .blogdate {
    font-size: 16px;
    width:60%;
    margin-top: -5px;
  	margin-bottom: 0px;

  }
}
  
/* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .blogdate {
    font-size: 14px;
    width:80%;
    margin-top: 74px;
  	margin-bottom: 0px;

  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  .blogdate {
    font-size: 12px;
    width: 94%;
    margin-top: 63px;
  	margin-bottom: 0px;

  }
}



.columns {
  display: flex;
  flex-direction: row;
  gap: 5px;
 
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  box-sizing: content-box;
  
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;

}

.column {
  /*flex: 10%;*/
  cursor: pointer;
  /*font-weight: bold;*/
  border: 2px solid #012847;
  border-radius: 4px;
  background: #ffffff;
  color: #012847;
  
  scroll-snap-align: start;
  
  margin-bottom: 10px;
  
}

.active {
	border:solid 2px #ec2b2e;
	border-radius: 4px;
	color: white;
	background: #ec2b2e;
	

}

  /* If the screen size is 1101px wide or more, set the font-size of <div> to 18px */
@media screen and (min-width: 1025px) {
  .column {
    font-size: 10px;
   
    
    
  }
}

  
/* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width:769px) and (max-width: 1024px) {
  .column {
    font-size: 10px;
    
    
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  .column {
    font-size: 8px;
    
  }
}



.tabX1, .tabX2, .tabx3, .tabX4, .tabX5, .tabX6, .tabX7, .tabX8, .tab9, .tab10 {
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  gap: 10px;
  

  
}

.tabX1 button, .tabX2 button, .tabX3 button, .tabX4 button, .tabX5 button, .tabX6 button, .tabX7 button, .tabX8 button, tabX9button, .tabX10 {

  background-color: #ffffff;
  /*float: left;*/
  border: 1px solid #0086ca;
  outline: none;
  cursor: pointer;
  padding: 4px 6px;
  transition: 0.3s;
  /*font-size: 120%;*/
  width: 50%;
  border-radius: 4px;

}

/* Change background color of buttons on hover */
.tabX1 button:hover, .tabX2 button:hover {

  background-color: #aaa;
}

/* Create an active/current tablink class */
.tabX1 button.active, .tabX2 button.active, .tabX3 button.active, .tabX4 button.active, .tabX5 button.active, .tabX6 button.active, .tabX7 button.active, .tabX8 button.active, .tabX9 button.active, .tabX10 button.active {

  background-color: #0086ca;
  color: #ffffff;
  border-radius: 4px;
  

}
.tabcontentX1, .tabcontentX2, .tabcontentX3, .tabcontentX4, .tabcontentX5, .tabcontentX6, .tabcontentX7, .tabcontentX8, .tabcontentX9, .tabcontentX10 {
	
  display: none;
  margin-top: 5px;
  
}


.button {

  background-color: #012847;
  border: 1px solid #012847;
  border-radius: 4px;
  color: #ffffff;
  padding: 5px 25px;
  display: inline-block;
  margin: 4px 2px;
  cursor: default;
  font-family: 'Oswald', sans-serif;
  /*font-weight: bold;*/
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px 0px, rgba(0, 0, 0, 0.22) 0px 15px 12px 0px;
  
}

 /* If the screen size is 1101px wide or more, set the font-size of <div> to 18px */
@media screen and (min-width: 1025px) {
  .button {
    font-size: 18px;
    
    
   
  }
}

  
/* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width:769px) and (max-width: 1024px) {
  .button {
    font-size: 16px;
    
    
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  .button {
    font-size: 12px;
    
  }
}


.buttonB {

  background-color: #0246c1;
  border: 1px solid #0246c1;
  border-radius: 4px;
  color: #ffffff;
  padding: 5px 25px;
  display: inline-block;
  margin: 4px 2px;
  cursor: default;
  font-family: 'DM Sans', sans-serif;
  /*font-weight: bold;*/
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px 0px, rgba(0, 0, 0, 0.22) 0px 15px 12px 0px;
  
}

 /* If the screen size is 1101px wide or more, set the font-size of <div> to 18px */
@media screen and (min-width: 1025px) {
  .buttonB {
    font-size: 18px;
  }
}

  
/* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width:769px) and (max-width: 1024px) {
  .buttonB {
    font-size: 16px;
    
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  .buttonB {
    font-size: 16px;
    
  }
}



 .image-container {
      display: flex;
      gap: 20px;
      padding: 0px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      /*border: 1px solid green;*/
    }
    
      /* If the screen size is 1101px wide or more, set the font-size of <div> to 18px */
/*@media screen and (min-width: 1025px) {
  .image-container {
    font-size: 16px;
    width:35%;
    
  }
}

  
/* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
/*@media screen and (min-width:769px) and (max-width: 1024px) {
  .image container {
    font-size: 16px;
    width:0%;
    
  }
}*/

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
/*@media screen and (max-width: 768px) {
  .image-container {
    font-size: 14px;
    width: 60%;
    
  }
}*/

    */

    .image-container .img-wrapper {
      position: relative;
      cursor: pointer;
      padding-bottom: 5px;
      user-select: none;
      
    }

    .image-container .img-wrapper img {
      /*width: 30%;*/
      height: auto;
      object-fit: cover;
      border-radius: 8px;
      display: block;
      background: none;
      border: none;
    }

    /* Underline Base Styling */
    .image-container .img-wrapper::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      opacity: 0;
      transform: scaleX(0);
      transition: 
        transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 0.4s ease,
        opacity 0.3s ease;
    }

    /* Synchronized Blinking: Applied to parent wrapper */
    .image-container .img-wrapper.active-red,
    .image-container .img-wrapper.active-blue {
      animation: blink 1s infinite alternate;
    }

    /* Active Underline Styles */
    .image-container .img-wrapper.active-red::after {
      opacity: 1;
      transform: scaleX(1);
      background-color: #ff3333;
    }

    .image-container .img-wrapper.active-blue::after {
      opacity: 1;
      transform: scaleX(1);
      background-color: #3388ff;
    }

    @keyframes blink {
      0% { opacity: 1; }
      100% { opacity: 0.1; }
    }
  
  



/*@media screen and ( min-width: 1025px ) {
	.img-wrapper img { width: 100%;
				  
 }
}

@media screen and ( min-width:769px ) and ( max-width: 1024px ) {
	.img-wrapper img { width: 60%;
                 
 }
}

@media screen and (max-width: 768px) {
  	.img-wrapper img {
    
    			width: 80%;	
    		
  }
}*/

@media screen and ( min-width: 1025px ) {
img.responsiveT { width: 15%; }
}
@media screen and ( min-width:769px ) and ( max-width: 1024px ) {
img.responsiveT { width: 18%; }
}
@media screen and ( max-width: 768px ) {
img.responsiveT { width: 20%;
				  }
}
img.responsiveT { height: auto;
				  margin-bottom: 3px;
				 
 }


.curve {
	width: 20%;
	height: auto;
	float: right;
	margin-left: 1.5rem; 
	border-radius: 50%;
	shape-outside:circle();
}

  /* If the screen size is 1101px wide or more, set the font-size of <div> to 18px */
@media screen and (min-width: 1025px) {
  .curve {
    
    width: 20%;
    
  }
}

/* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width:769px) and (max-width: 1024px) {
  .curve {
    
    width: 25%;
   
    
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  .curve {
    
    width: 30%;
    
   
  }
}

.main {
  position: relative;
  margin: auto;
  text-align: justify;
  font-family: 'Roboto', sans-serif;
  color: #012847;  
  line-height: 1.15em;
  margin-top:0px; 
  /*border:1px solid red;*/
  border-radius:4px; 
  
  
 
  }
  
  /* If the screen size is 1101px wide or more, set the font-size of <div> to 18px */
@media screen and (min-width: 1025px) {
  .main {
    font-size: 16px;
    width:60%;
    
  }
}

  
/* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width:769px) and (max-width: 1024px) {
  .main {
    font-size: 16px;
    width:80%;
   
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  .main {
    font-size: 14px;
    width: 94%;
   
   
  }
}

.main1 {
  position: relative;
  margin: auto;
  text-align: justify;
  color: #012847;  
  margin-top: 20px;
  border-radius: 4px;
  line-height: 1.15em;
  /*border: 1px solid #aaa;*/
  
  
 
  }
  
  /* If the screen size is 1101px wide or more, set the font-size of <div> to 18px */
@media screen and (min-width: 1025px) {
  .main1 {
    font-size: 16px;
    width:60%;
    
  }
}

  
/* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width:769px) and (max-width: 1024px) {
  .main1 {
    font-size: 16px;
    width:80%;
   
    
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  .main1 {
    font-size: 14px;
    width: 100%;
    
   
  }
}

.mainbox {
  position: relative;
  margin: auto;
  text-align: justify;
  font-family: 'DM Sans', sans-serif;
  color: #012847;  
  margin-top: 0px;
  /*padding: 20px 20px 0px 20px;*/
  /*border-radius: 8px;*/
  line-height: 1.15em;
  /*border: 1px solid red;*/
  
  }
  
  /* If the screen size is 1101px wide or more, set the font-size of <div> to 18px */
@media screen and (min-width: 1025px) {
  .mainbox {
    font-size: 16px;
    width:60%;
    
  }
}

  
/* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width:769px) and (max-width: 1024px) {
  .mainbox {
    font-size: 16px;
    width:80%;
    
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  .mainbox {
    font-size: 14px;
    width: 94%;
    
  }
}

/* Dark background overlay spanning the whole viewport */
.custom-media-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99999; /* Higher than your existing tabs and layouts */
  

  
  /* Flexbox configuration handles the centering perfectly on all screens */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Toggle state via class */
.custom-media-overlay.custom-media-active {
  opacity: 1;
  pointer-events: auto;
}

/* The actual white box inside the overlay */
.custom-media-dialog {
  background: #ffffff;
  width: 90%;
  max-width: 550px;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  overflow: hidden;
}

/* Formatting internals to keep headers separated */
.custom-media-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 20px;
  border-bottom: 1px solid #eeeeee;
}

.custom-media-title {
  margin: 0;
  font-size: 1.25rem;
  color: #333333;
}

.custom-media-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  line-height: 1;
  color: #aaaaaa;
}
.custom-media-close:hover {
  color: #000000;
}

.custom-media-body {
  padding: 0px 20px 0 20px;
}

/* General button look */
.custom-media-btn {
  padding: 2px 20px;
  margin: 5px;
  cursor: pointer;
}

.disclaimer {
  position: relative;
  margin: auto;
  text-align: justify;
  font-family: 'DM Sans', sans-serif;
  background: #ccc;
  color: #004040;
  width: 100%;
  border-radius: 4px;
  padding: 10px;
  
  
  }
  
  /* If the screen size is 1101px wide or more, set the font-size of <div> to 18px */
@media screen and (min-width: 1025px) {
  .disclaimer {
    font-size: 14px;
    
    
  }
}

  
/* If the screen size is 601px wide or more, set the font-size of <div> to 30px */
@media screen and (min-width:769px) and (max-width: 1024px) {
  .disclaimer {
    font-size: 14px;
   
    
  }
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 18px */
@media screen and (max-width: 768px) {
  .disclaimer {
    font-size: 12px;
    
  }
}


@media screen and ( min-width: 1025px ) {
		.yr { font-size: 11px; }
	}
	
	@media screen and ( min-width:769px ) and ( max-width: 1024px ) {
		.yr { font-size: 10px; }
	}
	
	@media screen and ( max-width: 768px ) {
		.yr { font-size: 9px; }
	}
	
	    .yr {
				font-family: 'DM Sans', sans-serif;
				font-weight: bold;
				text-align: left; 
				padding-left: 5px;}

spanZZ{
    		display:inline-block;
    		color: #012847;
    		font-family: 'Libre Baskerville', serif;
			font-size: 100%;
			font-style: italic;
}

spanF{

    		display:inline-block;
    		color: #ffffff;
    		border-bottom:2px solid #ffffff;
    		padding-bottom:4px;
    		font-weight: bold;
    		font-family: 'Roboto', sans-serif;
    		font-size: 130%;

}

spanQ3{

    display: inline-block;
    padding-top: 0px;
    color: #ec2b2e;                                            
    font-family: 'Oswald', sans-serif;
	font-size: 100%;
    font-weight: bold;

}

spanD{

    display:inline-block;
    font-weight: bold;
    font-size: 140%;
    font-family: 'Oswald', sans-serif;
    color: #012847;
	}

spanE{

    display:inline-block;
    /*font-weight: bold;*/
    font-size: 110%;
    font-family: 'Oswald', sans-serif;
    color: #012847;
	}


	@media screen and ( min-width: 1025px ) {
		img.responsive8 { width: 222px; }
	}

		@media screen and ( min-width:769px ) and ( max-width: 1024px ) {
		img.responsive8 { width: 152px; }
		
	}
		@media screen and ( max-width: 768px ) {
		img.responsive8 { width: 121px; }
	}

		img.responsive8 { height: auto;
				  cursor: pointer;
				
 	}
 	
 	
 @media screen and ( min-width: 1025px ) {
		.synopsis { font-size: 16px; }
	}
	
	@media screen and ( min-width:769px ) and ( max-width: 1024px ) {
		.synopsis { font-size: 16px; }
	}
	
	@media screen and ( max-width: 768px ) {
		.synopsis { font-size: 14px; }
	}
	
	    .synopsis {
				font-family: 'DM Sans', sans-serif;
				color: #012847;
				text-align: justify; 
				font-family: 'DM Sans', sans-serif;
				border: 1px solid gainsboro; 
				padding: 15px 15px 5px 15px; 
				border-radius: 4px;