/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/
html, body {
	overflow-x: hidden !important ;
}

.section-aboutus::before {
	background-image: linear-gradient(90deg, #FFFFFF0F 0%, #323A45 65%, var(--e-global-color-primary) 0%) !important;
}

.popup-menu {
	-webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px)
}

body e-page-transition {
     --preloader-fade-duration: 5s !important;
}

body e-page-transition .e-page-transition--preloader{
 	animation-duration: 5s, 5s !important;
}

.back-totop {
	cursor: pointer;
}

.menu-lang-eng li {
	border: 1px solid #323A45;
    padding: 2px 10px !important;
}

.menu-lang-eng li:nth-child(2) {
	border-left: none;
	border-right: none;
}

.menu-lang-eng li:nth-child(2) .elementor-icon-list-text {
	color: #323A45 !important;
}

.menu-lang-eng li:nth-child(1) .elementor-icon-list-text {
	font-family: "Noto Sans Thai", sans-serif;
}

.clouds-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.clouds-effect img {
    position: absolute;
    bottom: 0;
    max-width: 100% !important;
    animation: animateSteam calc(5s * var(--i)) ease-out infinite;
}

.hide-effect {
	transition: opacity 10s;
	opacity: 0;
}

.sec-timeline .ha-timeline-icon svg {
    height: 1.2em;
}
.sec-timeline .ha-timeline-icon {
    justify-content: flex-end;
}

.sec-timeline::before {
    position: absolute;
    display: inline-block;
    content: "";
    left: 140px;
    border-style: dotted;
    border-width: 0px 0px 0px 1px;
    border-color: #C2C3BEDE;
    width: 100%;
    height: 100%;
}

@keyframes animateSteam {
    0% {
        opacity: 0;
        transform: scale(1);
        right: 0%;
    }

    25%, 75%{
        opacity: .6;
    }

    100% {
        opacity: 0;
        right: 100%;
        transform: scale(3);
    }
}
@media (max-width: 1024px) {
	.section-aboutus .elementor-motion-effects-layer::before {
		background-image: linear-gradient(90deg, #FFFFFF0F 0%, #323A45 65%, #323a45fa 0%) !important;
	}
	
	.clouds-effect img {
		object-fit: cover;
		height: 100vh !important;
		width: 100%;
	}
	
	.sec-timeline::before {
		left: 10px;
	}
}
@media (max-width: 767px) {
	.menu-lang-eng li {
		padding: 2px 6px !important;
	}
	.sec-timeline::before {
		left: 5px;
	}
	.sec-timeline .ha-timeline-icon svg {
    	height: .7em;
	}
	.sec-timeline .ha-timeline-content {
		margin-top: -10px;
	}
}

.head-vision {
    transform: rotate(90deg);
    width: fit-content;
    position: absolute;
    right: -100px;
    top: 85px;
}

.head-mission {
    transform: rotate(90deg);
    width: fit-content;
    position: absolute;
    left: -120px;
    top: 115px
}

.head-ourhistory h2 {
    transform: rotate(90deg);
    width: 500px;
    position: absolute;
    right: -235px;
    top: 215px;
}

.head-awards {
    transform: rotate(90deg);
    width: fit-content;
    position: absolute;
    left: -120px;
    top: 125px
}

@media (max-width: 1366px) {
	.head-vision {
		right: -90px;
    	top: 75px;
	}
	.head-mission{
		left: -105px;
    	top: 30px;
	}
	.head-awards {
		left: -105px;
    	top: 33px;
	}
}