/* --------------------------------------
GLOBAL STYLES
-----------------------------------------*/
/* Ensure full height layout */
html, body {
  height: 100%;
  margin: 0;
}
html{
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  font-size: 100%;
}
body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1rem; 
  color: #000;
  line-height: normal;
  background-color: #fff;
  margin: 0;
  overflow-x: hidden;
}
/* Other fixes*/
*,*:before,*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	        box-sizing: border-box;
}
i {
  vertical-align: middle;
}
strong{
  font-weight: 800;
}
ul, ol {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
h1 , h2, h3, h4, h5{
  margin: 0;
  padding: 0;
  font-weight: 400;
}
/* LINKS */
a{  color:; }
a:hover{ text-decoration: none; cursor: pointer;}

a {text-decoration:none;}
a:hover {text-decoration:none;}
a:before,a:after { text-decoration:none;}
a:before,a:after,
a:hover:before,a:hover:after {text-decoration:none;}

p{
  font-size: 1rem; 
  padding: 0;
  margin: 0; 
}
/* FADE SCROLL PAGE */
.fade-in {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 2s ease-out, transform 1s ease-out;
}
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}
/*---------------------------------------
FORM                 
-----------------------------------------*/
.form-control{
  background: #f7f7f7;
  color: #a0a0a0;
  font-size: 16px;
  box-shadow: none;
  margin-bottom: 15px;
  border: 1px solid #555553;
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}
.form-control::-moz-placeholder {
  color: #a0a0a0;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #a0a0a0;
}
.form-control::-webkit-input-placeholder {
  color: #a0a0a0;
}
.formpage .form-control{
  background: #ffffff;
  border: 1px solid #c8c8c8;
}
.formpage p{
  font-size: 1rem !important;
  padding-bottom: 1.5rem !important;
}
.form-contact .btn-submit{
  background: #00b0be;
  padding: 6px 30px;
  border: none;
  text-transform: uppercase;
  color: #fff;
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}
.form-group{
  padding-bottom: 13px;
}
.btn-send{
  border: none;
  display: flex;
  gap: 15px;
  background: none;
  margin: 1.5rem 0;
  align-items: center;
}
.btn-send img{
  width: 50px;
  height: auto;
}
.btn-send {
  font-size: 1.35rem !important;
  color: #5B5B59
}
/* IMG RESPONSIVE */
img{
  display: block;
  max-width: 100%;
  height: auto;
}
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1;
}
.container-fluid{
  width: 90%;
}

.btn-default{
  position: relative;
  text-decoration: none;
  color: #00b0be;              /* link color */
  font-size: 1.2rem;
  display: block;
  padding: 1em 0 1em 1.4em;
}
/* ::before creates the square "bullet" */
.btn-default::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* vertical center */
  width: 22px;
  height: 22px;
  background-color: #008ea0;   /* square color */
}
#overlay {
  position: fixed; /* Fixed position to cover the entire viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(72, 72, 72, 0.7); /* Dark gray overlay with 50% opacity */
  opacity: 0; /* Initially hidden */
  pointer-events: none; /* Allow clicks to go through the overlay */
  transition: opacity 0.3s ease; /* Smooth transition for opacity change */
  z-index: 2000;
}
/* --------------------------------------
HEADER
-----------------------------------------*/
header .container-fluid{
  display: flex;
  align-content: center;
  align-items: center;
  padding-bottom: 20px;
  padding-top: 30px;
}
header .logo{
  order: 2;
  margin-left: auto;  
}
header .logo img{
  width: 280px;
  height: auto;
}
#menu{
  align-self: flex-end;
  top: 20px;
  display: flex;
  color: #00b0be;
  position: relative;
  z-index: 3000;
}
#menu > li{
  font-size: 1.1rem;
  margin: 0;
  padding: 0;
}
#menu > li > a{
  color: #5B5B59;
  height: 50px;
  display: block;
}
#menu > li > a span {
  position: relative;
  padding: 0 25px 0 20px;
}

#menu > li > a span::after {
  content: "|";
  position: absolute;
  right: -4px;
  color: #00b0be;
}
#menu > li:last-child > a span::after {
  content: none; /* remove for last item */
}
#menu > li.has-child > a:hover,
#menu > li.has-child:hover > a{
  color: #fff;
  background: #00b0be;
}


/* --------------------------------------
BANNER
-----------------------------------------*/
.banner{
  position: relative;
  max-height: 765px;
}
.video-container{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-height: 765px; /* Set your desired max-height here */
  overflow: hidden;
}
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.banner .carousel {
  position: absolute;
  top: 25%;
  left: 0;
  z-index: 2;               /* make sure it’s above the video */
  width: 45%;
  min-height: 350px;
  background-color: rgba(27, 40, 55, 0.3); /* semi-transparent dark blue */
  display: flex;
  pointer-events: none;     /* allow video to stay interactive if needed */
  padding: 3.5rem 3.5rem 3.5rem 3.5rem;
  border-bottom: 10px solid #00b0be;
}
.banner .carousel-item p {
  color: #fff;
  font-size: 2rem;
  margin: 0 auto;
  margin-left: 60px;
}
.banner .carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 1s ease-in;  /* fade out */
}
.banner .carousel-fade .carousel-item.active {
  opacity: 1;
  transition: opacity 1s ease-out ; /* fade in */
}


/* --------------------------------------
INTROBLK
-----------------------------------------*/
.introblk{
 border-top: 15px solid #00b0be;
 border-bottom: 15px solid #00b0be;
 padding: 3.5rem 0;
}
.introblk p{
  font-size: 1.6rem;
  color: #5b5b5b;
}
.introblk a{
  color: #008ea0;
}
.introblk a:hover{
  color: #ff9e00;
}
.introblk p.note{
  font-size: 1.2rem;
  color: #5b5b5b;
}
.introblk h1{
  font-size: 2.6rem;
  color: #00b0be;
}
/* --------------------------------------
INTROBLKNORED
-----------------------------------------*/
.introblknored{
 border-top: 1px solid #00b0be;
 border-bottom: 15px solid #00b0be;
 padding: 3.5rem 0;
}
.introblknored p{
  font-size: 1.6rem;
  color: #5b5b5b;
}
.introblknored h1{
  font-size: 2.6rem;
  padding-bottom: 20px;
  color: #00b0be;
}
/* --------------------------------------
MAINBLK
-----------------------------------------*/
.mainblk{
   padding: 3.5rem 0;
}
.mainblk .animation{
  padding-bottom: 3.5rem;
}
.mainblk h1, 
.mainblk h2,
.mainblk h3,
.mainblk h4,
.mainblk h5{
 color: #00b0be;
}
.mainblk h1{
  font-size: 2rem; 
  line-height: 1.2;
  padding-bottom: 2rem;
}
.mainblk p{
  color: #5b5b5b;
  font-size: 2rem;
  padding-bottom: 2.5rem;
}
.mainblk p a{
  color: #00b0be; 
}
/* four col animation*/
.animation.fourcol{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  column-gap: 40px;                      /* spacing between images */
  align-items: center;
}
.animation.fourcol img{
  max-height: 350px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
video {
  max-width: 100%;
  background-color: #fff;
  height: auto;
  display: block;
  
}
/* --------------------------------------
TBLBLK
-----------------------------------------*/
.tblblk{
  padding: 2.5rem 0
}
.table-container {
  overflow-x: auto;
}
.table-container h1{
  font-size: 2.6rem;
  padding-bottom: 20px;
  color: #00b0be;
}
table.tbldata {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* optional: prevents columns from getting too narrow */
}
table.tbldata th, 
table.tbldata td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
  font-size: 1.5rem;
}
table.tbldata th{
  border: 1px solid #f5f6f6;
  color: #fff;
  text-align: center;
}
table.tbldata td{
  background: #f5f6f6;
  border: 1px solid #fff;
  color: #5b5b5b;
  font-weight: 500;
}
table.tbldata thead {
  background-color: #00b0be;
  font-weight: bold;
}

table.tbldata th:nth-child(1),
table.tbldata td:nth-child(1) {
  width: 30%;
}

table.tbldata th:nth-child(2),
table.tbldata td:nth-child(2) {
  width: 30%;
}

table.tbldata th:nth-child(3),
table.tbldata td:nth-child(3) {
  width: 40%;
}

/* --------------------------------------
MAINBLK-SUB
-----------------------------------------*/
.mainblk-sub{
  padding: 3.2rem 0;
  border-top: 1px solid #bfbfbf;
}
.mainblk-sub .animation{
  padding-bottom: 3.5rem;
}
.mainblk-sub h1, 
.mainblk-sub h2,
.mainblk-sub h3,
.mainblk-sub h4,
.mainblk-sub h5{
 color: #00b0be;
 padding-bottom: 2rem;
}
.mainblk-sub h1{
  font-size: 4rem; 
}
.mainblk-sub h2{
  font-size: 3.6rem; 
}
.mainblk-sub .intro p{
  font-size: 2.0rem;
}
.mainblk-sub p{
  color: #5b5b5b;
  font-size: 1.6rem;
  padding-bottom: 2.5rem;
}
.mainblk-sub p a{
  color: #00b0be; 
}
.photoinsert{
  padding: 2em 0;
}
p.subintro{
  font-size: 2rem;
  padding-bottom: 2rem;
  font-weight: 500;
}

/* --------------------------------------
BULLETLIST
-----------------------------------------*/
ul.bulletlist li{
  position: relative;
  text-decoration: none;
  color: #5b5b5b;         
  font-size: 2.0rem;
  display: block;
}
ul.bulletlist > li{
  padding: 0.2em 0 0.2em 1.4em;
}
ul.bulletlist > li li{
  padding: 0.2em 0 0.2em 1em;
}
ul.bulletlist > li a{
  color: #00b0be;
}
/* square bullet */
ul.bulletlist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 12px;
  background-color: #00b0be;   /* square color */
}
/* arrow bullet */
ul.bulletlist > li li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0;
  height: 0;
  border-top: 7.5px solid transparent;
  border-bottom: 7.5px solid transparent;
  border-left: 10px solid #00b0be; /* arrow color */
}
ul.bulletlist li a::after {
  content: '>'; 
  margin-left: 0.25em; /* space between text and arrow */
  font-weight: bold;   /* optional: make it stand out */
  color: inherit;      /* match link color */
}
/* --------------------------------------
BULLETLISTSML
-----------------------------------------*/
ul.bulletlistsml li{
  position: relative;
  text-decoration: none;
  color: #5b5b5b;         
  font-size: 1.6rem;
  display: block;
}
ul.bulletlistsml > li{
  padding: 0.2em 0 0.2em 1.4em;
}
ul.bulletlistsml > li li{
  padding: 0.2em 0 0.2em 1em;
}
ul.bulletlistsml > li a{
  color: #00b0be;
}
/* square bullet */
ul.bulletlistsml > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 12px;
  background-color: #00b0be;   /* square color */
}
/* arrow bullet */
ul.bulletlistsml > li li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0;
  height: 0;
  border-top: 7.5px solid transparent;
  border-bottom: 7.5px solid transparent;
  border-left: 10px solid #00b0be; /* arrow color */
}
ul.bulletlistsml li a::after {
  content: '>'; 
  margin-left: 0.25em; /* space between text and arrow */
  font-weight: bold;   /* optional: make it stand out */
  color: inherit;      /* match link color */
}
/* --------------------------------------
LISTVIEW
-----------------------------------------*/
.listview{
  padding-bottom: 3.5rem;
}
.listview .entrylist{
  border-bottom: 1px solid #bfbfbf;
  padding: 3.5rem 0;
}
.listview .entrylist .container-fluid{
  display: flex;
  align-items: flex-start;
  gap: 2rem; 
}
.listview .entrylist img{
  width: 30%;
  height: auto;           /* keeps aspect ratio */
  object-fit: cover;   
}
.listview .content {
  width: 67%;
  padding-left: 3%;
}
.listview h3{
  color: #00b0be;
  font-size: 1.8rem;
  padding-bottom: 2rem;
}
.listview h4{
  color: #00b0be;
  font-size: 2rem;
  padding-bottom: 1.2rem;
}
.listview p{
  color: #5b5b5b;
  font-size: 1.6rem;
  padding-bottom: 0.8rem;
}
.listview ul{
  
}
/* --------------------------------------
SUBFOOTER
-----------------------------------------*/
.subfooter{
   border-top: 1px solid #bfbfbf;
   padding: 2rem 0;
}
.subfooter ul,
ul.list-hor{
  display: flex;
  padding-top: 10px;
  gap: 20px;
}
.subfooter ul li,
ul.list-hor li{
  font-size: 1.6rem;
  font-weight: 500;
  color: #5b5b5b;
}
.subfooter ul li a,
ul.list-hor li a{
  color: #00b0be;
}
.subfooter ul li::after,
ul.list-hor li::after{
  content: "|";
  padding-left: 20px;
}
.subfooter ul li:last-child::after,
ul.list-hor li:last-child::after{
  content:'';
}
ul.list-hor li{
  font-weight: 400;
  font-size: 1.6rem;
}
/* --------------------------------------
FOOTER
-----------------------------------------*/
footer{
  background-color: #a6a4a4;
  color: #fff;
  font-weight: 500;
}
.contactblk{
  background: #fcfcfc;
}
.contactblk .title{
  background: #00b0be;
  padding: 10px 0;
}
.contactblk .title h3{
  width: 95%;
  margin: 0 auto;
  margin-left: 100px;
  font-weight: 300;
  font-size: 2rem; 
}
.contactblk .intro p{
  font-size: 1.25rem;
  color: #00b0be;
  font-weight: 400;
  padding-bottom: 20px;
}
.contactblk .intro p a{
  color: #00b0be;
}
.contactblk .check p{
  font-size: 0.875rem;
  color: #555553;
  font-weight: 400;
  line-height: 28px;
  display: flex;
  align-content: center;
  align-items: flex-start;
  gap: 10px;
}
.contactblk .check p input{
  margin-top: 5px;
}
.contactblk .check p a{
  color: #555553;
}
.contactblk .check p input.form-content{
 accent-color: #fcfcfc;
 background-color: #e5e5e5 !important;
}
.contactblk .indent{
  margin: 10px 0 10px 22px;
}
.contactblk .indent p{
  padding: 10px 0;
}
footer .top{
  border-top: 30px solid #00b0be;
  border-bottom: 1px solid #fff;
}
footer .container-fluid{
  padding: 20px 0 30px 0;
}
footer p{
  padding-bottom: 4px;
}
footer ul{
  display: flex;
  gap: 10px;
}
footer ul li a,
footer p a{
  color: #fff;
}
footer ul li::after{
  content: '|';
  padding-left: 10px;
}
footer ul li:last-child::after{
  content:'';
}