.elementor-18308 .elementor-element.elementor-element-ffc2561{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--justify-content:flex-end;--overflow:hidden;--background-transition:0.3s;--border-radius:12px 12px 12px 12px;}.elementor-18308 .elementor-element.elementor-element-ffc2561:hover::before, .elementor-18308 .elementor-element.elementor-element-ffc2561:hover > .elementor-background-video-container::before, .elementor-18308 .elementor-element.elementor-element-ffc2561:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-18308 .elementor-element.elementor-element-ffc2561 > .elementor-background-slideshow:hover::before, .elementor-18308 .elementor-element.elementor-element-ffc2561 > .e-con-inner > .elementor-background-slideshow:hover::before{--background-overlay:'';}.elementor-18308 .elementor-element.elementor-element-ffc2561:hover{--overlay-opacity:0.7;}.elementor-18308 .elementor-element.elementor-element-ffc2561, .elementor-18308 .elementor-element.elementor-element-ffc2561::before{--overlay-transition:0s;--border-transition:0.3s;}.elementor-18308 .elementor-element.elementor-element-45db3b6{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--justify-content:flex-end;--background-transition:0.3s;--overlay-opacity:0.7;--padding-block-start:30px;--padding-block-end:30px;--padding-inline-start:30px;--padding-inline-end:30px;}.elementor-18308 .elementor-element.elementor-element-45db3b6:not(.elementor-motion-effects-element-type-background), .elementor-18308 .elementor-element.elementor-element-45db3b6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-18308 .elementor-element.elementor-element-45db3b6::before, .elementor-18308 .elementor-element.elementor-element-45db3b6 > .elementor-background-video-container::before, .elementor-18308 .elementor-element.elementor-element-45db3b6 > .e-con-inner > .elementor-background-video-container::before, .elementor-18308 .elementor-element.elementor-element-45db3b6 > .elementor-background-slideshow::before, .elementor-18308 .elementor-element.elementor-element-45db3b6 > .e-con-inner > .elementor-background-slideshow::before, .elementor-18308 .elementor-element.elementor-element-45db3b6 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-18308 .elementor-element.elementor-element-45db3b6:hover::before, .elementor-18308 .elementor-element.elementor-element-45db3b6:hover > .elementor-background-video-container::before, .elementor-18308 .elementor-element.elementor-element-45db3b6:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-18308 .elementor-element.elementor-element-45db3b6 > .elementor-background-slideshow:hover::before, .elementor-18308 .elementor-element.elementor-element-45db3b6 > .e-con-inner > .elementor-background-slideshow:hover::before{--background-overlay:'';background-color:#02254B;}.elementor-18308 .elementor-element.elementor-element-45db3b6:hover{--overlay-opacity:0.7;}.elementor-18308 .elementor-element.elementor-element-45db3b6, .elementor-18308 .elementor-element.elementor-element-45db3b6::before{--overlay-transition:0s;--border-transition:0.3s;}.elementor-18308 .elementor-element.elementor-element-45db3b6.e-con:hover{--e-con-transform-scale:1.04;}.elementor-18308 .elementor-element.elementor-element-444701f .elementor-heading-title{color:#FFFFFF;font-family:"SukhumvitSet-Bold", Sans-serif;font-size:36px;font-weight:700;}.elementor-18308 .elementor-element.elementor-element-444701f > .elementor-widget-container{margin:0px 0px 0px 0px;}/* Start custom CSS for container, class: .elementor-element-45db3b6 */.text {
opacity: 0;
transition: 0.5s ease-in-out;

}

.container-hover-effect:hover .text {
opacity: 1;

}

/* กำหนดสไตล์พื้นฐานของข้อความ */
.container-hover-effect .text {
    color: #000;
    font-size: 18px;
    font-weight: bold;
    opacity: 0; /* เริ่มต้นด้วยความโปร่งใสเป็น 0 */
    transform: translateX(-100%); /* เริ่มต้นให้อยู่ข้างซ้าย */
    transition: transform 0.5s ease, opacity 0.5s ease; /* แอนิเมชันการเคลื่อนที่และความโปร่งใส */
}

/* เมื่อ hover บน container ให้ข้อความแสดง */
.container-hover-effect:hover .text {
    opacity: 1; /* ทำให้ข้อความไม่โปร่งใส */
    transform: translateX(0); /* ขยับข้อความไปตำแหน่งปกติ */
}/* End custom CSS */