body {  background: url('img/parallax-bg.jpg') no-repeat; /*background-size: cover;*/ background-attachment: fixed; background-color: white; margin: 0; padding: 0; font-family: 'Lato', Helvetica Neue, Arial, Sans-serif; color: #174889; }

header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: all .25s ease; }
main { position: relative; z-index: 2; background-color: white;}
footer { position: relative; z-index: 2; background-color: #dcdcdc;}
subfooter { position: relative; z-index: 2; background-color: #174889;display: block;}
.footer-row { height: 56px; background: #fff; width: 100%; display: flex; justify-content: center; align-items: center; }
.logo-bg { background: white !important; height: 140px; }
.logo-bg-scroll { background: rgba(255,255,255,0.95) !important; border-bottom: 1px solid #c2c2c2;  }
.logo-h { height: 73px; }
.logo-header { width:100%; display: inline-block; max-height: 33px; max-width: 510px; vertical-align: middle; }
.uli-size { font-size: 20px; }
/* reveal animations */

.reveal-upzoom { opacity: 0; transform: translateY(100px);  }
.revealed-upzoom {  animation: revealUpzoomAnim .6s ease forwards;}
@keyframes revealUpzoomAnim {
  0% { opacity: 0; -webkit-transform: scale3d(.8,.8,.8);transform: scale3d(.3,.3,.3) translateY(100px); }
  100% { opacity: 1; -webkit-transform: scale3d(1,.1,1);transform: scale3d(1,1,1) translateY(0); }
}

.reveal-basic { opacity: 0; transform: translateY(50px);  }
.revealed-basic {  animation: revealBasicAnim .6s ease forwards;}
@keyframes revealBasicAnim {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

.rev1eal-zoom { opacity: 0; transform: translateY(50px);}
.rev1ealed-zoom {animation:zoom 1.0s ease-out forwards;}
@keyframes zoom {    
0% {opacity: 0;-webkit-transform: scale3d(.3,.3,.3);transform: scale3d(.3,.3,.3) translateY(50px);}
50% {opacity: 1}
100% {-webkit-transform: scale3d(1,.1,1);transform: scale3d(1,1,1) translateY(0);}
}

.reveal-flyinform-L { opacity: 0.8; transform: translateX(-2200px); }
.revealed-flyinform-L {animation:flyinBounceFL .8s ease-out forwards;}
@keyframes flyinBounceFL {
0%{opacity:.8;transform:translateX(-2200px);}
55%{transform:translateX(28px);}
72%{transform:translateX(-12px);}
88%{transform:translateX(6px);}
100%{transform:translateX(0);}
}

.reveal-flyin-L { opacity: 0.8; transform: translateX(-1100px); }
.revealed-flyin-L {animation:flyinBounceL .8s ease-out forwards;}
@keyframes flyinBounceL {
0%{opacity:.8;transform:translateX(-1100px);}
55%{transform:translateX(28px);}
72%{transform:translateX(-12px);}
88%{transform:translateX(6px);}
100%{transform:translateX(0);}
}

.rev2eal-flyin-L { opacity: 0.8; transform: translateX(-1100px); }
.rev2ealed-flyin-L {animation:flyinBounceL .8s ease-out forwards;}
@keyframes flyinBounceL {
0%{opacity:.8;transform:translateX(-1100px);}
55%{transform:translateX(28px);}
72%{transform:translateX(-12px);}
88%{transform:translateX(6px);}
100%{transform:translateX(0);}
}


/* Normal right fly-in */
.rev1eal-flyin-R {opacity:.8;transform:translateX(1550px);}
.rev1ealed-flyin-R {animation:flyinBounceR .8s ease-out forwards;}
@keyframes flyinBounceR {
0%{opacity:.8;transform:translateX(1550px);}
55%{transform:translateX(-28px);}
72%{transform:translateX(12px);}
88%{transform:translateX(-6px);}
100%{transform:translateX(0);}
}

/* GALLERY - img effects*/
.fncGallery img {	opacity: 1; transition: opacity 0.2s ease-in-out; cursor: pointer;}
.fncGallery img:hover {	opacity: 0.5;}
.lightbox img {	opacity: 1; transition: opacity 0.2s ease-in-out; cursor: pointer;}
.lightbox img:hover {	opacity: 0.8;}
.opacity img {	opacity: 1; transition: opacity 0.2s ease-in-out; cursor: pointer;}
.opacity img:hover {	opacity: 0.75;}
.lightbox2 img {	opacity: 1; transition: opacity 0.2s ease-in-out; cursor: pointer;}
.lightbox2 img:hover {	opacity: 0.8;}
 /* Custom modal size at different breakpoints */
        @media (min-width: 0px) {	.modalform {width: 85vw;height: 300px;} .body-bg { background-position: calc(50% - 100px) -110px; } .logo-h { height: 140px; } .uli-size { font-size: 18px; } .topup-size {width:45px; height:45px; right:20px; bottom:20px;}	}
        @media (min-width: 612px) {	.modalform {width: 85vw;height: 300px;} .body-bg { background-position: calc(50% - 50px) -40px; } .logo-h { height: 140px; }  .uli-size { font-size: 18px; } .topup-size {width:45px; height:45px; right:20px; bottom:20px;}		}
        @media (min-width: 880px) {	.modalform {width: 580px;height: 300px;} .body-bg { background-position: center top; } .logo-h { height: 140px; } .uli-size { font-size: 18px; }	.topup-size {width:55px; height:55px; right:30px; bottom:30px;}	}
        @media (min-width: 1000px) {	.modalform {width: 580px;height: 300px;} .body-bg { background-position: center top; } .logo-h { height: 73px; } .uli-size { font-size: 20px; }		.topup-size {width:55px; height:55px; right:30px; bottom:30px;}	}
        @media (min-width: 1470px) {	.modalform {width: 580px;height: 300px;} .body-bg { background-position: center top; }  .logo-h { height: 73px; } .uli-size { font-size: 20px; }	.topup-size {width:55px; height:55px; right:30px; bottom:30px;}	}
        @media (min-width: 1700px) {	.modalform {width: 580px;height: 300px;}  .body-bg { background-position: center top; } .logo-h { height: 73px; } .uli-size { font-size: 20px; }	.topup-size {width:55px; height:55px; right:30px; bottom:30px;}	}
        @media (min-width: 1880px) {	.modalform {width: 580px;height: 300px;}  .body-bg { background-position: center top; } .logo-h { height: 73px; } .uli-size { font-size: 20px; }	.topup-size {width:55px; height:55px; right:30px; bottom:30px;}	}

/* Carousel Buttons */
.carousel-btn { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: auto; /* let it shrink to fit inner button */ padding: 0 36px; /* optional spacing from edge */ color: #000000; text-align: center; background: transparent; border: 0; opacity: 0.75; transition: opacity 0.15s ease; }
.carousel-btn.prev { left: 0; }
.carousel-btn.next { right: 0; }
.carousel-btn div.inner-btn { cursor: pointer; position: absolute; /*top: 44%;*/ color: #fff; background-color: rgb(32, 33, 36); opacity: 0.9; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; /* added transition for hover */ }
.carousel-btn div.inner-btn:hover { background-color: #AEAEAE; /* lighter gray on hover */ opacity: 0.8; }
.carousel-btn div.inner-btn svg { width: 36px; height: 36px; }
.carousel-btn.next div.inner-btn { transform: rotate(180deg); }
/* arrows */
.control-circle { background-color: rgba(255,255,255,0.85); border-radius: 50%; width: 48px; height: 48px; }
/* Carousel bullets */
.carousel-bullets-wrapper { display: flex; justify-content: center; gap: 8px; }
.carousel-bullet { width: 10px; height: 10px; border-radius: 50%; background-color: rgb(189,193,198); cursor: pointer; transition: background-color 0.3s, transform 0.3s; }
.b88 { width: 8px !important; height: 8px !important; margin-top: 1px !important; }
.b66 { width: 6px !important; height: 6px !important; margin-top: 2px !important; }
.carousel-bullet.active { background-color: #827153; transform: scale(1.0); }
/* Carousel size */
#mainCarousel .carousel-inner { width: 100%; max-height: 655px; /* optional max height */ overflow: hidden; }
#mainCarousel .carousel-item img { width: 100%; height: auto;       /* image scales proportionally */ object-fit: cover;  /* fills the container while keeping ratio */ }
/* Carousel anim */
.carousel.carousel-fade .carousel-item { opacity: 0; transition: opacity .8s ease-in-out; }
.carousel.carousel-fade .carousel-item.active, .carousel.carousel-fade .carousel-item-next.carousel-item-start, .carousel.carousel-fade .carousel-item-prev.carousel-item-end {    opacity: 1;}
.carousel.carousel-fade .active.carousel-item-start, .carousel.carousel-fade .active.carousel-item-end {    opacity: 0;}
/* Remove Bootstrap transform animations (cause of white flash) */
.carousel.carousel-fade .carousel-item, .carousel.carousel-fade .carousel-item.active { transform: none !important; }

.justify { text-align: justify; }


/* ========================== design ====================== */
.max-w{max-width:1170px;}
.ul { margin: 0; padding: 0; list-style: none; }
.uli { margin:0; position: relative; list-style: none; padding: 0; display: inline-block; }
.uli a {font-weight:300;padding: 5px 0px 5px;text-transform:uppercase;border-bottom: 2px solid transparent;color: #174889; text-decoration: none;transition: all 0.2s ease-in-out; }
.uli a:hover { color: #f15920; background-color: transparent; border-bottom:2px solid #f15920; }
.slogan{}
.slogan-img{width: 70%; max-width: 750px;min-width: 420px;}
.hb-menu-white{ font-size: 38px;color: #ffffff;text-shadow: 0px 1px 5px #555;margin-right: 10px;}
.hb-menu-gold{ color: #c3a354;font-size: 38px;margin-right: 10px;}
.hb-bg{ background-image: url('img/hb.png'); background-repeat: no-repeat; background-position: top right;}
/*a.hb-menu:hover{ color: rgb(149, 144, 132);}*/
.fot{ text-align: center; font-size: 14px; /*font-family: Roboto, sans-serif;*/ color: #403f3c;}
a.fot:hover{ color: rgb(149, 144, 132);}
.asocial { width: 32px; height: 32px; margin: 6px; background-color: rgb(95, 99, 104); background-image: linear-gradient(rgb(95, 99, 104), rgb(95, 99, 104)); border-radius: 50%; display: inline-block; vertical-align: middle; text-align: center; line-height: 0; font-size: 10pt; }
a.asocial:hover { background-color: rgb(155, 144, 119); background-image: linear-gradient(rgb(155, 144, 119), rgb(155, 144, 119)); }
.imgsocial { width: 28px; height: 28px; margin: 2px; }
.thumb { margin-right: 5px;margin-bottom: 5px;margin-top: 5px;height: 100px;}
.thumb-mini { position: relative;    height: 49px;    width: 69px;    float: right;    top: -3px;    margin-left: 3px;}
.shadw { box-shadow: 0px 0px 20px 0px #00000005; }
.menu-li { min-width: 250px; transition: background-color 0.2s ease-in-out; }
.menu-li-border { border-bottom: 1px solid #efefef; min-width: 250px; transition: background-color 0.2s ease-in-out; }
.menu-li:hover { background-color: #f5f3ef;  }
.menu-li-border:hover { background-color: #f5f3ef; }
.menu-modal { position: fixed;top: 65px; right: 10px; background-color: white; }
/*strong { color: #002a2a; }*/
.acc { color: #dbb363; }
.acc-li { color: #dbb363; font-size: clamp(1.0rem, 2vw + 0.5rem, 1.25rem); }
.acc-lis { color: #dbb363; font-size: clamp(0.98rem, 1.8vw + 0.5rem, 1.25rem); }
.acc-line { /* background-color: #cdb179; */ /* color: white; */ border-bottom: 4px solid #dbb363; width: 50%; position: relative; left: -2px; margin-bottom: 6px; max-width: 300px; }
.pheader { margin-bottom: 4px; font-size: 19px; font-weight: bold; color:#83734f; /*rgb(155, 144, 119);*/ line-height: 1.25; }
.pheadermain { font-weight: bold;/*color: rgb(151, 130, 84);*/color: #7a5e21;line-height: 1.25;margin-bottom: 5px;    font-size: clamp(1.4rem, 2vw + 0.5rem, 1.78rem);   /*font-size: clamp(1.3rem, 2vw + 0.5rem, 1.5rem);font-size: 25px;*/}
.fheader { font-size: 24px; font-weight: normal; color: rgb(155, 144, 119); margin-bottom: 40px;  }
.thumb-header {  font-weight: 300; text-transform: uppercase;color: #174889; font-size: 18px; white-space: nowrap;}
.finput { margin-bottom: 2px; font-size: 16px; font-weight: normal; color: rgb(155, 144, 119);  }
.input-project { border-color: rgba(130, 113, 83, 1) !important; color: rgba(130, 113, 83, 1) !important; font-family: 'Open Sans', sans-serif; font-size: 12pt; line-height: 22px; padding: 5px 5px !important; border-radius: 4px; transition: background-color 0.3s ease; background-color: white !important; width: 65%; cursor: text !important;}
.margin-small { margin: 40px 0px !important;}
.padding-small { padding: 5px 40px !important;}
.padding-big { padding: 5px 80px !important;}
.bubble-top { width:0;height:0;border-left: 14px solid transparent;border-right: 14px solid transparent;border-top: 14px solid #ffffff;}
.bubble-bottom { width:0;height:0;border-left: 8px solid transparent;border-right: 28px solid transparent;border-top: 25px solid #a1d3ee;}
.head-h1 { text-transform: uppercase;font-size: 35px;font-weight: 700;line-height: 42px;letter-spacing: .5px;color: #174889;white-space: nowrap;}
.head-h1-left { text-transform: uppercase;font-size: 35px;font-weight: 700;line-height: 42px;letter-spacing: .5px;color: #174889;text-align: left;width: 100%;}
.head-h2 {font-size: 20px;font-weight:300;padding: 0px 0px 1px 0px;text-transform:uppercase;border-bottom: 2px solid transparent;color: #2a68af; text-decoration: none;transition: all 0.2s ease-in-out; white-space: nowrap;}
.h2-pad {padding: 5px 0px 0px 0px;    margin: 0px 0px 5px 0px;}
.head-h2:hover { color: #4187D1; background-color: transparent; border-bottom:2px solid #4187D1; }
.head-h2-desc {font-size: 20px;font-weight:300; text-decoration: none; line-height: 1.45; color: #174889;}
.head-h3 {font-size: 21px;font-weight:700;text-transform:uppercase;color: #174889; text-decoration: none; white-space: nowrap; text-align: left;margin: 20px 0 10px 0;width: 100%;	}
.head-h3-desc {font-size: 20px;font-weight:300; text-decoration: none; line-height: 1.45; color: #174889;width: 100%;text-align: left;margin-left: 25px;list-style-type: disc;	}
.head-h3-desc li {display: list-item;	}
.head-hr {    border-top: 1px solid #c2c2c2;}
.head-img {  width: 100%; max-width:480px; }
.head-img-b {  width: 100%;  }
.max-800 {  width: 800px;  }
.p-foot { margin: 0;    padding: 0 0 15px 0;color: #d7d7d7;font-weight: 300; line-height: 1.45;font-size: 20px;}
.head-call { text-transform: uppercase;font-size: 28px;font-weight: 400;line-height: 1.2;color: #174889;white-space: nowrap;  }
.head-input {margin-bottom: 5px;font-weight: 700;color: #174889; display: block;font-size: 20px;line-height: 1.45; }
.star-input {color: #f00; }
.text-input {background: #ffffff;color: #174889;font-size: 20px;font-weight: 300;outline: none;border: none;border-bottom: 1px solid #c2c2c2;  }
.text-input-area {background: #ffffff;color: #174889;font-size: 20px;font-weight: 300;outline: none;border: none;border-bottom: 1px solid #c2c2c2;opacity: 1; height: 180px;  }
/*form placeholder*/
::placeholder {  color:#898989;  font-size:14px;	}
::-webkit-input-placeholder { color: #898989; font-size: 14px }
:-moz-placeholder { color: #898989; font-size: 14px }
::-moz-placeholder { color: #898989; font-size: 14px }
:-ms-input-placeholder { color: #898989; font-size: 14px }

#highlighted { background: #a1d3ee; position: relative; border-top:5px solid #fff; } 
blockquote {font-size: 24px;    font-style: italic;    padding: 0 0 0 50px;    border-left: none;    position: relative;    margin: 40px 0px 50px 0px;font-weight: 300;}
blockquote p { font-weight: 300; line-height: 1.44; }
.footer-area blockquote { padding-left: 70px; }
/*blockquote quote symbol*/
blockquote:after { position: absolute; font-family: 'PT Serif', Georgia, Times, Times New Roman, Serif; content: "“"; left: 0px; top: 0; color: #4187d1; 
font-style: normal; font-size: 140px; line-height: 1; }
.footer-area blockquote:after { left: 0; font-size: 130px; }



.btn-project { border-color: rgba(130, 113, 83, 1) !important; color: rgba(130, 113, 83, 1) !important; font-family: 'Open Sans', sans-serif; font-size: 12pt; line-height: 22px; border-radius: 4px; transition: background-color 0.3s ease; background-color: white !important; }
.btn-project:hover, .btn-project:focus { border-color: rgba(130, 113, 83, 1) !important; color: rgba(130, 113, 83, 1) !important; font-family: 'Open Sans', sans-serif; font-size: 12pt; line-height: 22px; border-radius: 4px; background-color: #F2F1ED !important; outline: none; }
.btn-project:active { border-color: rgba(130, 113, 83, 1) !important; color: rgba(130, 113, 83, 1) !important; font-family: 'Open Sans', sans-serif; font-size: 12pt; line-height: 22px; border-radius: 4px; background-color: #fff !important; outline: none; }

.btn-fproject { border-color: rgb(157, 138, 107) !important; color: white !important; font-family: 'Open Sans', sans-serif; font-size: 12pt; line-height: 22px; border-radius: 4px; background-color: rgb(157, 138, 107) !important; transition: background-color 0.3s ease; }
.btn-fproject:hover, .btn-fproject:focus { border-color: rgb(145, 123, 88) !important; color: white !important; font-family: 'Open Sans', sans-serif; font-size: 12pt; line-height: 22px; border-radius: 4px; background-color: rgb(145, 123, 88) !important; outline: none; }
.btn-fproject:active { border-color: rgb(145, 123, 88) !important; color: white !important; font-family: 'Open Sans', sans-serif; font-size: 12pt; line-height: 22px; border-radius: 4px; background-color: rgb(145, 123, 88) !important; outline: none; }

.btn-form {min-width: 160px;font-weight: 300;outline: none;border: none; border-color: #2a68af !important; color: white !important; font-family: 'Lato', Helvetica Neue, Arial, Sans-serif !important; font-size: 14px; line-height: 1; background-color: #2a68af !important; transition: background-color 0.3s ease; text-transform: uppercase;}
.btn-form:hover, .btn-form:focus {min-width: 160px;font-weight: 300;border: none; border-color: #4187d1 !important; color: white !important; font-family: 'Lato', Helvetica Neue, Arial, Sans-serif !important; font-size: 14px; line-height: 1;  background-color: #4187d1 !important; outline: none;text-transform: uppercase; }
.btn-form:active { min-width: 160px;font-weight: 300;border: none; border-color: #4187d1 !important; color: white !important; font-family: 'Lato', Helvetica Neue, Arial, Sans-serif !important; font-size: 14px; line-height: 1;  background-color: #4187d1 !important; outline: none;text-transform: uppercase; }

/* Scroll to top */
.topup {border-radius:50%; background:rgba(37,37,37,0.8); position:fixed; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:9999;transition: background-color 0.2s ease-in-out;}
.topup:hover {background:rgba(37,37,37,1);}
.arrowup {color:#fff; font-size:28px;}

.topup-anim-show {animation:topupShow .4s ease forwards;}
@keyframes topupShow {
    0% {opacity:0; transform:scale(0);}
    100% {opacity:1; transform:scale(1);}
}
.topup-anim-hide {animation:topupHide .4s ease forwards;}
@keyframes topupHide {
    0% {opacity:1; transform:scale(1);}
    100% {opacity:0; transform:scale(0);}
}
.topup-anim-off {opacity:0; transform:scale(0);}