@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://unpkg.com/aos@2.3.1/dist/aos.css');
@import url('../vendor/offcanvas/offcanvas.css');
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}

.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);}
.text-primary{ color: #008bff !important;}  /*#0026ff*/

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

.wrapper{max-width:100%; margin:0 auto; z-index:1}
.navbar{max-width:100%; 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: #fecc00;
            left: 4px;
            top: 8px;
            content: "";
            transform: rotate(45deg);
        }


/* 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, .footer-logo{max-width:256px; max-height:72px;}
.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.8rem .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, #000000 0%, #00000000 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: 80px; z-index:99}
.breadcrumb {color:#333;position:relative; z-index:9; margin-bottom:0; padding:0; }
.breadcrumb .active{color:#333;}
.breadcrumb a{color:#008bff;}
.breadcrumb a:hover{color:#333;}

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

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);}

#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;}
}