.elementor-kit-6{--e-global-color-primary:#091AD4;--e-global-color-secondary:#081637;--e-global-color-text:#081637CC;--e-global-color-accent:#00C950;--e-global-color-785901c:#2C3DF1;--e-global-color-beba677:#081637;--e-global-color-60d0f9d:#26B1FB;--e-global-color-dec70a0:#162747;--e-global-color-4fce209:#707CFF;--e-global-color-8bc4aa3:#36C6B6;--e-global-color-e63e41e:#2637FB;--e-global-color-7d79939:#172195;--e-global-color-1b5ae74:#FFFFFF;--e-global-color-36d4109:#000000;--e-global-color-8ac6644:#1A2641;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );font-family:"Inter", Sans-serif;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-primary );}.elementor-kit-6 h1{font-family:"Poppins", Sans-serif;font-size:48px;font-weight:700;}.elementor-kit-6 h2{font-family:"Poppins", Sans-serif;font-size:48px;font-weight:700;line-height:58px;letter-spacing:0.35px;}.elementor-kit-6 h3{font-family:"Poppins", Sans-serif;font-size:36px;font-weight:500;line-height:40px;letter-spacing:0.37px;}.elementor-kit-6 h4{font-family:"Inter", Sans-serif;font-size:18px;font-weight:500;line-height:28px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );border-style:none;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1366px){.elementor-kit-6 h1{font-size:44px;}.elementor-kit-6 h2{font-size:44px;}.elementor-kit-6 h3{font-size:32px;line-height:42px;}.elementor-kit-6 h4{font-size:16px;line-height:25px;}}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Footer:#1A2641; --MainBlue:#1224CB; --BlueGre2:#172195; --BlueGre1:#2637FB; --White:#ffffff; --max1400:1400px; --LightBlue:#26B1FB; --Inter:Inter; --Poppins:Poppins; --LightGreen:#00C950; --TextDark:#081637; --Textlight70:#081637b3; --TextLight60:#08163799; --Purple:#707CFF; --LightGreen2:#36C6B6; } /* Start custom CSS */.btn-gradient a{ /* Dimensions and Reset */ padding: 12px 32px; font-size: 1rem; font-weight: bold; color: #ffffff; border: none; border-radius: 8px; cursor: pointer; /* The Gradient Setup: Width is set to 200% so half is hidden initially */ /* Smooth Animation */ transition: background-position 0.7s ease-in-out, transform 0.7s ease; position: relative; overflow: hidden; } .btn-gradient a::after { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; opacity: 0; background: linear-gradient(to right, #091AD4, #26B1FB) !important; transition: opacity.3s ease-in-out; } .btn-gradient a:hover::after { opacity: 1; } .btn-gradient a:hover { /* Shift to the right (100% 0) makes the gradient appear to slide left */ background-position: 100% 0; transform: translateY(-2px); background-size: 200% 100%; background-position: 0% 0%; color:#FFF !important; fill:#FFF !important; box-shadow: 0 8px 30px rgba(255, 255, 255, 0.15); } .btn-gradient a:hover .elementor-button-icon{ color:#FFF !important;} .whiteColor { color:#FFF;} .animateMoveRight{ transition: transform 0.3s ease-out; box-shadow: none; transition: box-shadow 0.3s ease; } .animateMoveRight:hover { transform: translateX(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } .animateMoveLeft{ transition: transform 0.3s ease-out; box-shadow: none; transition: box-shadow 0.3s ease; } .animateMoveLeft:hover { transform: translateX(-10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);} .scale-hover { transition: transform 0.3s ease; } .scale-hover:hover { transform: scale(1.05); } .Boxhover { position: relative; transition: box-shadow 0.3s ease; transition: opacity.5s ease-in-out; } .Boxhover:hover { box-shadow: 0 8px 30px rgba(255, 255, 255, 0.15);} .Boxhover::before {opacity: 0; content:' '; position:absolute; Width:100%; height:100%; background: linear-gradient(to right, #cceeff, #ccdeff) !important; /*background-image: url('http://long-purple-lemur.192-64-117-250.cpanel.site/wp-content/uploads/2026/05/hover_box.png'); /*background-repeat: repeat-y; /*background-size: cover;*/ left:0; top: 0;z-index: -1; border-radius:20px;} .Boxhover:hover::before { opacity: 0.8; } .Boxhover:hover h2 {color:#2637FB;} .Boxhover:hover p { color:#081637;} @media (max-width: 1366px) { .image-parallax { background-attachment: fixed !important; } } @media (max-width: 1024px) { .brnone br { display: none !important;} } /* สถานะปกติของทุก card */ .cards-wrapper .feature-card { transition: all 0.8s ease; } /* เมื่อมี card ใดถูก hover ใน wrapper ทำให้ทุก card จางลงก่อน */ .cards-wrapper:has(.feature-card:hover) .feature-card { opacity: 0.5; } /* จากนั้น card ที่ถูก hover กลับมา active */ .cards-wrapper .feature-card:hover { opacity: 1 !important; background: #ffffff; } /* Text ข้างในเปลี่ยนสีดำ */ .cards-wrapper .feature-card:hover .elementor-button .elementor-button-text { color: #ffffff !important; } .cards-wrapper .feature-card:hover * { color: #1a1a1a !important; } .animateMoveRight{ transition: transform 0.3s ease-out; box-shadow: none; transition: box-shadow 0.3s ease; } .animateMoveRight:hover { transform: translateX(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } .animateMoveLeft{ transition: transform 0.3s ease-out; box-shadow: none; transition: box-shadow 0.3s ease; } .animateMoveLeft:hover { transform: translateX(-10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);} svg { overflow: visible !important; } /* Hover */ .tab_key [role="tab"]:hover span{ color:#2637FB; } .tab_key [role="tab"]:hover { background:#FFF !important;} .tab_key [role="tab"]:hover svg *{ /*fill:#2637FB !important;*/ stroke:#2637FB !important; } /* Active */ .tab_key [role="tab"].e--selected span{ color:#2637FB; } .tab_key [role="tab"].e--selected svg *{ /* fill:#2637FB !important;*/ stroke:#2637FB !important; } .tab_key [role="tab"] span, .tab_key [role="tab"] svg *{ transition: all .3s ease; } .svgWhite svg *{ stroke: #FFF !important;} .bullet-icon .elementor-icon-list-icon { width:18px; height:18px; border-radius:50%; background:linear-gradient( 135deg, #26b1fb 0%, #2637fb 100% ); display:flex; align-items:center; justify-content:center; padding-left: 5px; margin-right: 5px; } .textboldblue strong { color:#2637FB;} .textmediumblue strong { font-weight:500; color:#2637FB;} @media (max-width: 1366px) { .image-parallax { background-attachment: fixed !important; } .image-parallax::before { background-attachment: fixed !important; } } @media (max-width: 1200px) { .image-parallax { background-attachment:unset !important; } .image-parallax::before { background-attachment: unset !important; } }/* End custom CSS */