@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:1rem;
    color:#787878;
    background-color:#f1f2f3;
    font-weight:400;
}

h1, h2, h3, h4, h5, h6{font-family: 'Source Sans Pro', sans-serif; line-height:normal; font-weight:600}
h1 {font-size: 3.2rem;}
h2 {font-size: 2.6rem;}
h3 {font-size: 2.0rem;}
h4 {font-size: 1.6rem;}
h5 {font-size: 1.4rem;}
h6 {font-size: 1.2rem;}
.h1 {font-size: 3.6rem!important;}
.h2 {font-size: 2.6rem!important;}
.h3 {font-size: 2.0rem!important;}
.h4 {font-size: 1.6rem!important;}
.h5 {font-size: 1.4rem!important;}
.h6 {font-size: 1.2rem!important;}

[class^="bi-"]::before, [class*=" bi-"]::before{vertical-align:middle;}
.bi{line-height:1}
.bi-x  {font-size:100%}
.bi-2x {font-size:150%}
.bi-3x {font-size:200%}
.bi-4x {font-size:250%}
.bi-5x {font-size:300%}

/*p{text-align:justify;}*/
div p:last-child{margin-bottom:0;}
.text-justify-center{text-align:justify; text-align-last:center}

ul, ol {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
button:focus, button:active{outline:none;}
a{cursor:pointer; transition:all 0.3s ease-in 0s; text-decoration:none; color:#787878}
a:hover{color:#ed2a27!important}

.form-control:focus{outline:none; box-shadow:none}
.modal-backdrop.show{background-color:rgba(0,0,0,0.7); backdrop-filter:blur(20px); opacity:1}

section{padding-top:4rem; padding-bottom:5rem; overflow:hidden; position:relative;}
footer{margin:0 auto; z-index:1; position:relative;}
header{overflow:hidden;}

.text-1x{font-size:100%}
.text-2x{font-size:125%}
.text-3x{font-size:150%}
.text-4x{font-size:200%}

.op-1{opacity:0.1!important}
.op-2{opacity:0.2!important}
.op-3{opacity:0.3!important}
.op-4{opacity:0.4!important}
.op-5{opacity:0.5!important}
.op-6{opacity:0.6!important}
.op-7{opacity:0.7!important}
.op-8{opacity:0.8!important}
.op-9{opacity:0.9!important}
.op-x{opacity:1!important}

.fw-1{font-weight:100!important}
.fw-2{font-weight:200!important}
.fw-3{font-weight:300!important}
.fw-4{font-weight:400!important}
.fw-5{font-weight:500!important}
.fw-6{font-weight:600!important}
.fw-7{font-weight:700!important}
.fw-8{font-weight:800!important}

.max-line-2{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.max-line-3{display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.max-line-4{display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;}
.max-line-5{display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;}

.z-index-0{z-index:0}
.z-index-1{z-index:5}
.z-index-2{z-index:10}
.z-index-3{z-index:15}
.z-index-4{z-index:20}
.z-index-5{z-index:25}

.text-shadow{text-shadow:1px 1px 2px rgba(0,0,0,0.5);}

.bg-black{ background-color:#000;}
.container, .container-fluid, .container-xl, .container-xl, .container-md, .container-sm{position:relative; z-index:5}

.wrapper{max-width:1600px; margin:0 auto; z-index:1}
.navbar{max-width:1600px; margin:0 auto; padding-top:.25rem; padding-bottom:.25rem}
.navbar.fixed-top{left:50%; transform:translateX(-50%); width:calc(100% + 1px);}
.top-nav{z-index:999; position:relative}
.bg-img { position:absolute!important; bottom:0; left:0; width:100%; height:100%; z-index:2; object-fit:cover; }
.pg-header .bg-img {z-index:0;}

.fancybox-is-open .fancybox-bg{ background-color:rgba(90, 90, 90, 0.85); backdrop-filter:blur(50px); opacity:1;}

.btn{transition:all 0.2s ease-in 0s;}

.points {
    padding: 0;
    list-style: none;
}

    .points.row {
        padding-left: 10px;
    }

    .points li {
        position: relative;
        padding: 2px 4px 12px 24px;
    }

        .points li:before {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #ed2a27;
            left: 4px;
            top: 8px;
            content: "";
            transform: rotate(45deg);
        }
        /*.points .points > li:before {
            position: absolute;
            width: 8px;
            height: 8px;
            border: solid 2px #fecc00  ;
            left: 4px;
            top: 8px;
            content: "";
            border-radius:50%;
            transform: rotate(45deg);
        }*/
        .points.points2 > li:before {
            background-color: #fecc00;
        }

/* Scroll Top Button */
#scroll-top {
	width: 52px;
	height: 52px;
	position: fixed;
	right: 20px;
	bottom: 40px;
	z-index: 9999;
	color: #333;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
	visibility: hidden;
	opacity: 0;
	border-radius: 0;
	border: none;
	background-color: rgba(204, 204, 204, 0.70);
	transition: all 0.4s ease;
	transform: translateY(60px);
	-ms-transform: translateY(60px);
    backdrop-filter:blur(10px);
    border-radius:50%;
}

#scroll-top:hover,
#scroll-top:focus {
	color: #777;
	background-color: #eaeaea;
}

#scroll-top.show {
    display:block;
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
}
.logowraper, .logowraper .container, .logowraper .container-fluid{z-index:9999; height:0; overflow:visible;}


.img-box, .img-box-4_3, .img-box-4_2, .img-box-4_1, .img-box-16_9, .video{position:relative; overflow:hidden; width:100%; height:0; padding-top:100%; display:block;}
.img-box-4_3{padding-top:75%!important}
.img-box-4_2{padding-top:50%!important}
.img-box-4_1{padding-top:25%!important}
.img-box-16_9, .video{padding-top:56.25%!important}
.img-box img, .img-box-4_3 img, .img-box-4_2 img, .img-box-4_1 img, .img-box-16_9 img, .video iframe{position:absolute; width:100%; left:0; top:0; object-fit:cover; width:100%; height:100%;}
.img-contain{object-fit:contain!important}

.navbar{transition:all 0.4s ease-in 0s;}
.navbar-brand img{max-width:220px; max-height:72px;}
.footer-logo{max-width:220px; max-height:100px;}
.nav-link{padding:1rem .5rem!important; font-size:1.1em}
.navbar-dark .navbar-nav .active > .nav-link{color:#fff;}
@media only screen and (min-width: 992px){
    .navbar-expand-lg .navbar-nav .nav-link{    padding: 1.5rem .5rem!important;}
    .dropdown:hover .dropdown-menu{display:block; margin-top:-1px; border-radius:0; background-color:rgba(255,255,255,0.8); backdrop-filter:blur(10px); border:none; padding:0 0;}
    .bg-white-lg{background-color:#fff}
    .dropdown-item{padding:.5rem 1rem;}
    .home-header-content{padding:0 5rem;}
}

/*---------page Header---------*/
.bg-50-blur{background-color:rgba(255,255,255,0.5); backdrop-filter:blur(7px); }

.home-header{z-index:0}/*position:relative;*/
.slide-wrap{position:relative; z-index:5}
.home-header, .home-header .item, .home-header .slide-wrap{min-height:calc(100vh - 00px);}
.home-header .container, .home-header .container-fluid, .home-header .row {height: 100%;}
.banner-img{width:100%; z-index:0; position:absolute; height:100%; object-fit:cover; }
.home-header .video-wrap{width:100%; z-index:0; position:absolute!important; height:100%; object-fit:cover; top:0; left:0; transform:translate(0, 0); overflow:hidden }
.home-header .video-wrap video{transform:scale(1.12) translate(-50%, -50%); overflow:hidden}
.home-header-content{position:absolute; padding-top:72px; left:0; top:50%; transform:translateY(-50%); width:100%; z-index:9}
.home-header .carousel-item{height:calc(100vh - 0px);}
.header-space{height:calc(100vh - 122px);}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{position:absolute;top:50%; transform:translateY(-50%); color:#fff; opacity:0.6; text-shadow:1px 1px 4px rgba(0,0,0,0.5);}
.owl-carousel .owl-nav button.owl-next{right:0px} .owl-carousel .owl-nav button.owl-prev{left:0px;}
.home-header .owl-carousel .owl-nav button.owl-next{right:20px} .home-header .owl-carousel .owl-nav button.owl-prev{left:20px;}
.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover{ opacity:1;}
.owl-carousel .owl-nav button.owl-next.disabled, .owl-carousel .owl-nav button.owl-prev.disabled,.owl-carousel .owl-nav button.owl-next.disabled:hover, .owl-carousel .owl-nav button.owl-prev.disabled:hover{opacity:0.3!important}
.home-header .owl-dots{width:100%; position:absolute; left:0; top:92vh; bottom:auto; text-align:center; padding:0 60px; z-index:11}
.owl-dots{width:100%; position:absolute; left:0; top:auto; bottom:0px; text-align:center; padding:0 60px; z-index:11}
.owl-dots .owl-dot{position:relative; box-shadow:1px 1px 2px rgba(0,0,0,0.4); width:14px; height:14px; background:rgba(255,255,255,0.4)!important; border:solid 2px rgba(255,255,255,0.75)!important; border-radius:50%; margin:0 4px; cursor:pointer; transition:all 0.4s ease-in 0s;}
.owl-dots .owl-dot.active, .owl-dots .owl-dot:hover{background-color:rgb(255, 180, 0)!important;}

.carousel-control-next, .carousel-control-prev{z-index:19; border:none; background:#00000000; max-width:70px;}

.header-content{position:absolute; bottom:0; left:0; width:100%;}

.pg-header{ min-height:280px; max-height:400px; margin-top:-118px; position:relative; width:100%; z-index:0; padding-bottom:50px; padding-top:100px;}
.pg-header + .header-space{height:0;}
.pg-header:after{position:absolute; content:""; left:0; top:0; height:80%; width:100%; opacity:0.6; z-index:1; background:linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);}
.pg-header > .bottom-bg { z-index:2; position:absolute; bottom:-1px; left:0; width:100%; -webkit-transform: scaleX(-1); transform: scaleX(-1);}
.pg-header .container-fluid{position:relative; z-index:9; }
.breadcrumb-wrap { border-top:solid 1px rgba(255,255,255,0.2); background-color:rgba(255,255,255,0.6); backdrop-filter:blur(20px); box-shadow:0 1px 4px rgba(0,0,0,0.2); padding:0.5rem 0; position: sticky; position: -webkit-sticky; position: -moz-sticky; top: 74px; z-index:99}
.breadcrumb {color:#333;position:relative; z-index:9; margin-bottom:0; padding:0; }
.breadcrumb .active{color:#333;}
.breadcrumb a{color:#dc3545;}
.breadcrumb a:hover{color:#333;}

@media only screen and (max-width: 992px) {
    .home-header .bg-img{opacity:.4}
}

section .video-wrap{z-index:1;     
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
   pointer-events: none;
   overflow: hidden;
}

.video-wrap video {
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    position: absolute;
    z-index: 1;
    opacity: 1;
    min-width: 100%;
    width:auto;
    min-height: 100%;
    transition: opacity .3s 1s ease;
}

.video-wrap iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
    z-index: 1;
}

.contact-box {
    background-image: url('../img/bg-c.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size:cover;
}

a.card{transition:all 0.4s ease-in 0s;}
a.card:hover{transform:scale(1.05);}

.w-75px{max-width:75px; display:block; margin:0 auto;}
.w-100px{max-width:100px; display:block; margin:0 auto;}

footer a:hover, .top-nav a:hover{color:#fecc00!important;}

#loading {
    width: 40px;
    height: 20px;
    object-fit: cover;
}

.scaling-anim{animation: leaves 20s ease-in-out infinite alternate;}
.bg-dark.card-img{border-radius:20px;}
.bg-dark.card-img:before{content:"";position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; background:linear-gradient(135deg,  #005c9b99 0%, #699c1599 100%)}
.grad-card:before{content:"";position:absolute; left:0; top:50%; bottom:0; border-radius:20px; z-index:0; width:100%; height:auto; background:linear-gradient(135deg,  #005c9b 0%, #699c15 100%)}
.grad-card h3{position:relative; z-index:1; color:#fff!important}
@keyframes leaves {
    0% {transform: scale(1.0);}
    100% {transform: scale(2.0);}
}

@-webkit-keyframes leaves {
    0% {transform: scale(1.0);}
    100% {transform: scale(2.0);}
}
@-moz-keyframes leaves {
    0% {transform: scale(1.0);}
    100% {transform: scale(2.0);}
}


@media only screen and (max-width: 992px) {
h1 {font-size: 2.8rem;}
h2 {font-size: 2.4rem;}
h3 {font-size: 1.8rem;}
h4 {font-size: 1.4rem;}
h5 {font-size: 1.2rem;}
h6 {font-size: 1.0rem;}
.h1 {font-size: 2.8rem!important;}
.h2 {font-size: 2.4rem!important;}
.h3 {font-size: 1.8rem!important;}
.h4 {font-size: 1.4rem!important;}
.h5 {font-size: 1.2rem!important;}
.h6 {font-size: 1.0rem!important;}
}
    


.hexa{
  border: 0px;
  float: left;
  text-align: center;
  height: 35px;
  width: 60px;
  font-size: 22px;
  background: #f0f0f0;
  color: #3c3c3c;
  position: relative;
  margin-top: 15px;
}

.hexa:before{
  content: ""; 
  position: absolute; 
  left: 0; 
  width: 0; 
  height: 0;
  border-bottom: 15px solid #f0f0f0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  top: -15px;
}

.hexa:after{
  content: ""; 
  position: absolute; 
  left: 0; 
  width: 0; 
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 15px solid #f0f0f0;
  bottom: -15px;
}

.timeline {
  position: relative;
  padding: 0;
  width: 100%;
  margin-top: 20px;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  background: rgb(213,213,213);
  background: -moz-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: -o-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: -ms-linear-gradient(top, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  background: linear-gradient(to bottom, rgba(213,213,213,0) 0%, rgb(213,213,213) 8%, rgb(213,213,213) 92%, rgba(213,213,213,0) 100%);
  z-index: 0;
}

.timeline li {
  padding: 2em 0;
}

.timeline .hexa{
  width: 16px;
  height: 10px;
  position: absolute;
  background: #00c4f3;
  z-index: 5;
  left: 0;
  right: 0;
  margin-left:auto;
  margin-right:auto;
  top: -30px;
  margin-top: 0;
}

.timeline .hexa:before {
  border-bottom: 4px solid #00c4f3;
  border-left-width: 8px;
  border-right-width: 8px;
  top: -4px;
}

.timeline .hexa:after {
  border-left-width: 8px;
  border-right-width: 8px;
  border-top: 4px solid #00c4f3;
  bottom: -4px;
}

.direction-l,
.direction-r {
  float: none;
  width: 100%;
  text-align: center;
}

.flag-wrapper {
  text-align: center;
  position: relative;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(255,255,255);
  font-weight: 600;
  z-index: 15;
  padding: 6px 10px;
  text-align: left;
  border-radius: 5px;
}

.direction-l .flag:after,
.direction-r .flag:after {
  content: "";
  position: absolute;
  left: 50%;
  top: -15px;
  height: 0;
  width: 0;
  margin-left: -8px;
  border: solid transparent;
  border-bottom-color: rgb(255,255,255);
  border-width: 8px;
  pointer-events: none;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.time-wrapper {
  display: block;
  position: relative;
  margin: 4px 0 0 0;
  z-index: 14;
  line-height: 1em;
  vertical-align: middle;
  color: #fff;
}

.direction-l .time-wrapper {
  float: none;
}

.direction-r .time-wrapper {
  float: none;
}

.time {
  background: #00c4f3;
  display: inline-block;
  padding: 8px;
}

.desc {
  position: relative;
  margin: 1em 0 0 0;
  padding: 1em;
  background: rgb(254,254,254);
  -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
  -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
  box-shadow: 0 0 1px rgba(0,0,0,0.20);
  z-index: 15;
}

.direction-l .desc,
.direction-r .desc {
  position: relative;
  margin: 1em 1em 0 1em;
  padding: 1em;
  z-index: 15;
}

@media (min-width: 768px){
  .timeline {
    width: 660px;
    margin: 0 auto;
    margin-top: 20px;
  }

  .timeline li:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  
  .timeline .hexa {
    left: -50%;
    right: auto;
    top: 8px;
  }

  .timeline .direction-l .hexa {
    left: auto;
    right: -50%;
  }

  .direction-l {
    position: relative;
    width: 310px;
    float: left;
    text-align: right;
  }

  .direction-r {
    position: relative;
    width: 310px;
    float: right;
    text-align: left;
  }

  .flag-wrapper {
    display: inline-block;
  }
  
  .flag {
    font-size: 18px;
  }

  .direction-l .flag:after {
    left: auto;
    right: -16px;
    top: 50%;
    margin-top: -8px;
    border: solid transparent;
    border-left-color: rgb(254,254,254);
    border-width: 8px;
  }

  .direction-r .flag:after {
    top: 50%;
    margin-top: -8px;
    border: solid transparent;
    border-right-color: rgb(254,254,254);
    border-width: 8px;
    left: -8px;
  }

  .time-wrapper {
    display: inline;
    vertical-align: middle;
    margin: 0;
  }

  .direction-l .time-wrapper {
    float: left;
  }

  .direction-r .time-wrapper {
    float: right;
  }

  .time {
    padding: 5px 10px;
  }

  .direction-r .desc {
    margin: 1em 0 0 0.75em;
  }
  .timeline li {
  padding: .5em 0;
}
}

@media (min-width: 768px){
  .timeline {
    width: auto;
    max-width:96%;
    margin: 0 auto;
    margin-top: 20px;
  }

  .direction-l {
    position: relative;
    width: 48%;
    float: left;
    text-align: right;
  }

  .direction-r {
    position: relative;
    width: 48%;
    float: right;
    text-align: left;
  }
}

.max-520{max-width: 520px}