@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&family=Quicksand:wght@300;400;500;600;700&display=swap');
/*:root{
    --t-blue:"#2d3192";
}*/

body {
    font-family: 'Quicksand', sans-serif;
    font-size:1em;
    color:#787878;
    background-color:#f1f2f3;
    font-weight:500;
}

.bg-blue{background-color: #2d3192!important;}
.bg-black{background-color:#000!important}

h1, h2, h3, h4, h5, h6{font-family: 'Montserrat', sans-serif; line-height:normal; font-weight:600; color:#333}
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.1rem!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}
.text-justify{ text-align:justify}

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:#000}

.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:4rem; 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-1{display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.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);}

.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-brand{padding:0 0 0 0;}
.navbar{max-width:1600px; margin:0 auto; padding-top:.0rem; 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; }
.bg-img 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;}
.img-bw {
    -ms-filter: grayscale(100%) blur(4px);
    -webkit-filter: grayscale(100%) blur(4px);
    filter: grayscale(100%) blur(4px);
}

.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: rgba(255,50,50,1);
            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);
        }


/* 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) rotate(90deg);
	-webkit-transform: translateY(0) rotate(90deg);
	-ms-transform: translateY(0) rotate(90deg);
}
.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; object-position:center center}
.sticky-top.sticky-top-100{top:100px;}

.navbar{transition:all 0.4s ease-in 0s;}
.navbar-brand img{max-width:200px; max-height:60px;}
.footer-logo{max-width:220px; max-height:90px;}
.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.7rem .75rem!important;}
    .dropdown:hover .dropdown-menu{display:block; margin-top:-4px; border-radius:0; backdrop-filter:blur(10px); border:none; padding:0 0; box-shadow:1px 1px 4px rgba(0,0,0,0.4);}
    /*.dropdown:hover .dropdown-menu .dropdown-item{color:#fff;}
    .dropdown:hover .dropdown-menu .dropdown-item:hover{background-color:#000;}*/
    .bg-white-lg{background-color:#fff}
    .dropdown-item{padding:.5rem 1rem;}
    .home-header-content{padding:0 3.6rem;}
}

/*---------page Header---------*/
.bg-50-blur{background-color:rgba(255,255,255,0.5); backdrop-filter:blur(7px); }
header h2{font-size: 4.5vw!important;
  line-height: 1;}
.home-header{z-index:0; position:relative}/*position:relative;*/

.slide-wrap{position:relative; z-index:5}
.home-header, .home-header .item, .home-header .slide-wrap{min-height:calc(100vh - 160px);}
.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; left:0; top:50%; transform:translateY(-50%); width:100%; z-index:9}
.home-header .carousel-item{min-height:calc(100vh - 100px);}
.header-space{min-height:calc(100vh - 120px);}
.carousel-item .home-header-content .row > div:first-child{opacity:0}
.carousel-item .home-header-content .row > div:last-child {opacity:0}
.carousel-item.active .home-header-content .row > div:first-child{-webkit-animation:fadeInzoomoutLeft 0.8s ease 0.2s; animation:fadeInzoomoutLeft 0.8s ease 0.2s; animation-fill-mode: forwards;}
.carousel-item.active .home-header-content .row > div:last-child{-webkit-animation:fadeInzoomoutright 0.8s ease .2s; animation:fadeInzoomoutright 0.8s ease .2s; animation-fill-mode: forwards;}

@-webkit-keyframes fadeInzoomoutLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) scale(2.5); transform:translate3d(-100%,0,0) scale(1.4)}to{opacity:1;-webkit-transform:translateZ(0)  scale(1);transform:translateZ(0)  scale(1)}}
@keyframes fadeInzoomoutLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) scale(1.4); transform:translate3d(-100%,0,0) scale(2.5)}to{opacity:1;-webkit-transform:translateZ(0)  scale(1);transform:translateZ(0)  scale(1)}}
  
@-webkit-keyframes fadeInzoomoutright{0%{opacity:0;-webkit-transform:translate3d(100%,0,0) scale(2.5); transform:translate3d(100%,0,0) scale(1.4)}to{opacity:1;-webkit-transform:translateZ(0)  scale(1);transform:translateZ(0)  scale(1)}}
@keyframes fadeInzoomoutright{0%{opacity:0;-webkit-transform:translate3d(100%,0,0) scale(1.4); transform:translate3d(100%,0,0) scale(2.5)}to{opacity:1;-webkit-transform:translateZ(0)  scale(1);transform:translateZ(0)  scale(1)}}


.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{position:absolute;top:50%; transform:translateY(-50%); color:#999; 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:200px; max-height:400px; margin-top:0; 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:85px; width:100%; opacity:0.8; z-index:5; background:linear-gradient(180deg, #ffffff 0%, #fff 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; }
.breadcrumb-wrap.sticky-top{position: sticky; position: -webkit-sticky; position: -moz-sticky; top: 78px; z-index:99}
.breadcrumb {color:#333;position:relative; z-index:9; margin-bottom:0; padding:0; }
.breadcrumb .active{color:#333;}
.breadcrumb a{color:rgba(255,50,50,1);}
.breadcrumb a:hover{color:#333;}
.bg-black .breadcrumb {color:#fff;position:relative; z-index:9; margin-bottom:0; padding:0; }
.bg-black .breadcrumb .active{color:#fff;}
.bg-black .breadcrumb a{color:rgba(255,50,50,1);}
.bg-black .breadcrumb a:hover{color:#fff;}

@media only screen and (max-width: 768px) {
    .home-header-content{ top:50%; transform:translateY(-50%);}
    header h2{font-size: 5vw!important;
  line-height: 1;}
    .home-header, .home-header .item, .home-header .slide-wrap{padding-top:80px; min-height: calc(100vh - 92px);}
}

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;
}
.video-overlay {
    background-image: url('../img/patarn.png');
    background-size:6px;
    position:absolute; top:0; left:0; width:100%; height:100%;
}

.contact-box {
    background-image: url('../img/bg-c.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size:cover;
}
.pathshadow{filter: drop-shadow(1px 4px 4px rgba(50, 50, 0, 0.3));}
.product-path{clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);filter: drop-shadow(1px 4px 4px rgba(50, 50, 0, 0.3)); background-color:#99999999}

a.card{transition:all 0.15s ease-in 0s; margin-top:15px;}
a.card:hover{transform:translateY(-7px);}

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

.top-nav a:hover{color:#000000!important;}
footer 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);}
}

.s-icon{position:relative; padding:0; padding-top:100%; height:0; }
.s-icon img{width:50%!important; height:50%!important; margin:0 auto; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:0}
.s-icon:before{width:100%; height:100%; top:0; left:0; content:""; background:url('../img/o1.png') no-repeat center center; background-size:cover; z-index:0; background-repeat:no-repeat; position:absolute; margin:0 auto; transition:all 0.6s ease-in-out 0s;}
.s-icon:after{width:86%; height:86%; top:7%; left:7%; content:""; background:url('../img/o2.png') no-repeat center center; background-size:cover; z-index:0; background-repeat:no-repeat; position:absolute; margin:0 auto; transition:all 0.6s ease-in-out 0s;}
.card:hover .s-icon:before{transform:rotate(360deg);}
.card:hover .s-icon:after{transform:rotate(-360deg);}

@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;}
}
    
.svg-trigger {
    width: 40px;
    height: 40px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .4s;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.svg-trigger path {
    fill: none;
    transition: stroke-dasharray .4s, stroke-dashoffset .4s;
    stroke: #999;
    stroke-width: 4;
    stroke-linecap: round
}
.bg-light .svg-trigger path{stroke:#333;}
nav.navbar .svg-trigger path:nth-child(1) {
    stroke-dasharray: 40 160
}

nav.navbar .svg-trigger path:nth-child(2) {
    stroke-dasharray: 40 142;
    transform-origin: 50%;
    transition: transform .4s
}

nav.navbar .svg-trigger path:nth-child(3) {
    stroke-dasharray: 40 85;
    transform-origin: 50%;
    transition: transform .4s, stroke-dashoffset .4s
}

nav.navbar.active-bar .navbar-toggler .svg-trigger {
    transform: rotate(45deg)
}

nav.navbar.active-bar .navbar-toggler .svg-trigger path:nth-child(1),
nav.navbar.active-bar .navbar-toggler .svg-trigger path:nth-child(3) {
    stroke-dashoffset: -64px
}

nav.navbar.active-bar .navbar-toggler .svg-trigger path:nth-child(2) {
    transform: rotate(90deg)
}


.w-35{width:35%;}

.product-icon, .product-icon *{transition:all 0.5s ease-in 0s}
.product-icon{padding:0px; width:140px; height:140px; position:relative; border-radius:50%; display:inline-block; /*background:linear-gradient(#000, #000, #000);*/ margin:0 auto;transition:all 0.5s ease-in 0s;} 

.product-icon i{font-size:80px; 
    color:#000;
  position:absolute; top:50%; transform:translate(-50%, -50%); left:50%;
  transition:all 0.5s ease-in 0s
}
.product-icon i:before{line-height:2}

.product-icon:before{width:76px; height:152px; background-color: transparent;
    border-top-left-radius: 115px;
    border-bottom-left-radius: 115px;
    border: 6px solid #fff;
    border-right: 0;
    position:absolute;
    left:-6px; top:-6px; content:"";
    transition:all 0.5s ease-in 0s;
    
        transform-origin:100% 0%;
}
.product-icon:after{width:70px; height:140px; background-color: transparent;
    border-top-left-radius: 114px;
    border-bottom-left-radius: 114px;
    border: 6px solid #fff;
    border-right: 0;
    position:absolute;
    left:0%; top:0; content:"";
        transform:rotateY(180deg);
        transform-origin:100% 0%;
        transition:all 0.5s ease-in 0s;
}
a:hover .product-icon i{ color:#fff;  }
a:hover .product-icon:before{transform:rotateY(180deg);border: 6px solid #000; border-right: 0;}
a:hover .product-icon:after{transform:rotateY(0deg);border: 6px solid #000;border-right: 0;}

@media only screen and (max-width: 768px){
    .product-icon{width:130px; height:130px;} 

.product-icon i{font-size:70px; 
}
}