.elementor-9520 .elementor-element.elementor-element-5dc0f40 img{height:500px;object-fit:cover;object-position:center center;}.elementor-9520 .elementor-element.elementor-element-cab2850 .elementor-repeater-item-a3d6a8d.jet-parallax-section__layout .jet-parallax-section__image{background-size:auto;}.elementor-9520 .elementor-element.elementor-element-9812141 .elementor-repeater-item-5fc48b7.jet-parallax-section__layout .jet-parallax-section__image{background-size:auto;}.elementor-9520 .elementor-element.elementor-element-a6ae411 > .elementor-widget-container{padding:20px 0px 20px 0px;}.elementor-9520 .elementor-element.elementor-element-a6ae411{text-align:left;}.elementor-9520 .elementor-element.elementor-element-a6ae411 img{max-width:4%;}.elementor-9520 .elementor-element.elementor-element-f18a85e > .elementor-widget-container{margin:0px 0px -39px 0px;}.elementor-9520 .elementor-element.elementor-element-f18a85e{text-align:left;}.elementor-9520 .elementor-element.elementor-element-f18a85e .elementor-heading-title{font-family:"Georgia", Sans-serif;font-size:60px;font-weight:300;text-transform:uppercase;line-height:1.5em;letter-spacing:1px;color:#CB232D;}.elementor-9520 .elementor-element.elementor-element-3e5f64b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-3e5f64b .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:60px;font-weight:400;line-height:2.5em;letter-spacing:1px;-webkit-text-stroke-width:0px;stroke-width:0px;-webkit-text-stroke-color:#000;stroke:#000;color:#CB232D;}.elementor-9520 .elementor-element.elementor-element-445825f{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:left;}.elementor-9520 .elementor-element.elementor-element-445825f > .elementor-widget-container{margin:15px 0px 030px 0px;}.elementor-9520 .elementor-element.elementor-element-445825f .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:20px;font-weight:400;line-height:1.5em;letter-spacing:0.1px;word-spacing:0px;color:#000000;}.elementor-9520 .elementor-element.elementor-element-9812141{margin-top:0px;margin-bottom:0px;}.elementor-9520 .elementor-element.elementor-element-cab2850:not(.elementor-motion-effects-element-type-background), .elementor-9520 .elementor-element.elementor-element-cab2850 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-9520 .elementor-element.elementor-element-cab2850 > .elementor-container{max-width:1604px;}.elementor-9520 .elementor-element.elementor-element-cab2850{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-cab2850 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9520 .elementor-element.elementor-element-b712cc1{padding:60px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-83d4183{margin-top:0px;margin-bottom:0px;padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-43a5aac > .elementor-widget-container{margin:20px 0px -50px 0px;}.elementor-9520 .elementor-element.elementor-element-c1291c1{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-c1291c1 .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-c1291c1 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-85d4488{margin-top:0px;margin-bottom:0px;padding:50px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-b378357 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-56a86d7 .elementor-repeater-item-a3d6a8d.jet-parallax-section__layout .jet-parallax-section__image{background-size:auto;}.elementor-9520 .elementor-element.elementor-element-e66d9a5 > .elementor-widget-container{margin:20px 0px -50px 0px;}.elementor-9520 .elementor-element.elementor-element-c2dea43{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-c2dea43 .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-c2dea43 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-af0ecfc{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-af0ecfc .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-af0ecfc .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-1c81572, .elementor-9520 .elementor-element.elementor-element-1c81572 > .elementor-background-overlay{border-radius:15px 15px 15px 15px;}.elementor-9520 .elementor-element.elementor-element-1c81572{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-79df27f img{border-radius:0px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-9520 .elementor-element.elementor-element-8885a6d.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-9520 .elementor-element.elementor-element-8885a6d.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-9520 .elementor-element.elementor-element-a06b7bf .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:39px;}.elementor-9520 .elementor-element.elementor-element-6ad767e > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-6ad767e{text-align:left;}.elementor-9520 .elementor-element.elementor-element-6ad767e img{max-width:4%;}.elementor-9520 .elementor-element.elementor-element-d2b4b27 .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:25px;font-weight:300;}.elementor-9520 .elementor-element.elementor-element-c679411{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-c679411 .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-c679411 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-275811e, .elementor-9520 .elementor-element.elementor-element-275811e > .elementor-background-overlay{border-radius:15px 15px 15px 15px;}.elementor-9520 .elementor-element.elementor-element-275811e{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-91be304 img{border-radius:0px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-9520 .elementor-element.elementor-element-17957c2.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-9520 .elementor-element.elementor-element-17957c2.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-9520 .elementor-element.elementor-element-9a534a3 .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:39px;}.elementor-9520 .elementor-element.elementor-element-2ba7154 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-2ba7154{text-align:left;}.elementor-9520 .elementor-element.elementor-element-2ba7154 img{max-width:4%;}.elementor-9520 .elementor-element.elementor-element-d35ba4c .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:25px;font-weight:300;}.elementor-9520 .elementor-element.elementor-element-bbdc4b0{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-bbdc4b0 .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-bbdc4b0 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-38dd325, .elementor-9520 .elementor-element.elementor-element-38dd325 > .elementor-background-overlay{border-radius:15px 15px 15px 15px;}.elementor-9520 .elementor-element.elementor-element-38dd325{margin-top:0px;margin-bottom:20px;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-518a2f0 img{border-radius:0px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-9520 .elementor-element.elementor-element-5f6221c.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-9520 .elementor-element.elementor-element-5f6221c.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-9520 .elementor-element.elementor-element-dd4001a .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:39px;}.elementor-9520 .elementor-element.elementor-element-d08550a > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-d08550a{text-align:left;}.elementor-9520 .elementor-element.elementor-element-d08550a img{max-width:4%;}.elementor-9520 .elementor-element.elementor-element-8c8eb10 .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:25px;font-weight:300;}.elementor-9520 .elementor-element.elementor-element-56a86d7:not(.elementor-motion-effects-element-type-background), .elementor-9520 .elementor-element.elementor-element-56a86d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-9520 .elementor-element.elementor-element-56a86d7 > .elementor-container{max-width:1604px;}.elementor-9520 .elementor-element.elementor-element-56a86d7{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-56a86d7 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9520 .elementor-element.elementor-element-546a306{margin-top:0px;margin-bottom:0px;padding:20px 0px 40px 0px;}.elementor-9520 .elementor-element.elementor-element-0eb8f6e > .elementor-widget-container{margin:20px 0px -50px 0px;}.elementor-9520 .elementor-element.elementor-element-eedcfbb{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-eedcfbb .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-eedcfbb .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-a26038b > .elementor-widget-container{margin:-16px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-4c75fac{margin-top:0px;margin-bottom:0px;padding:20px 0px 40px 0px;}.elementor-9520 .elementor-element.elementor-element-49d52fd > .elementor-widget-container{margin:20px 0px -50px 0px;}.elementor-9520 .elementor-element.elementor-element-1d478f9{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-1d478f9 .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-1d478f9 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-03bdb61{margin-top:-95px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-80f41d3{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-ccf2c13 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-36680d1:not(.elementor-motion-effects-element-type-background), .elementor-9520 .elementor-element.elementor-element-36680d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E9F3EB;}.elementor-9520 .elementor-element.elementor-element-36680d1 > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9520 .elementor-element.elementor-element-36680d1{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:20px 0px 40px 0px;}.elementor-9520 .elementor-element.elementor-element-155383b > .elementor-widget-container{margin:020px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-7cff462{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-7cff462 .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-7cff462 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-5b8b39e:not(.elementor-motion-effects-element-type-background), .elementor-9520 .elementor-element.elementor-element-5b8b39e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E9F3EB;}.elementor-9520 .elementor-element.elementor-element-5b8b39e > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9520 .elementor-element.elementor-element-5b8b39e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-40px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-bbe9adb > .elementor-widget-container{margin:-16px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-70857b8:not(.elementor-motion-effects-element-type-background), .elementor-9520 .elementor-element.elementor-element-70857b8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E9F3EB;}.elementor-9520 .elementor-element.elementor-element-70857b8 > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9520 .elementor-element.elementor-element-70857b8{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-40px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-d09eade > .elementor-widget-container{margin:-16px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-b8cafe6{margin-top:0px;margin-bottom:0px;padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-15e1a2a > .elementor-widget-container{margin:20px 0px -50px 0px;}.elementor-9520 .elementor-element.elementor-element-5c12d91{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-5c12d91 .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-5c12d91 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-33661c0 > .elementor-widget-container{margin:-16px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-995f8f1{margin-top:0px;margin-bottom:0px;padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-627f7c6 > .elementor-widget-container{margin:20px 0px -50px 0px;}.elementor-9520 .elementor-element.elementor-element-1ecb302{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-1ecb302 .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-1ecb302 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-7a6aaf7 > .elementor-widget-container{margin:-16px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-f09eb14{margin-top:0px;margin-bottom:0px;padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-92ad50e > .elementor-widget-container{margin:20px 0px -50px 0px;}.elementor-9520 .elementor-element.elementor-element-89644e1{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-89644e1 .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-89644e1 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-f2eb59d > .elementor-widget-container{margin:-50px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-0e9e4f9{margin-top:0px;margin-bottom:9px;padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-a0e701e > .elementor-widget-container{margin:020px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-bedbfd9{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-9520 .elementor-element.elementor-element-bedbfd9 .elementor-divider-separator{width:100%;}.elementor-9520 .elementor-element.elementor-element-bedbfd9 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-9520 .elementor-element.elementor-element-5e1fdf7 > .elementor-widget-container{margin:-16px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-e903076{margin-top:0px;margin-bottom:0px;padding:50px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-d286081 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-6c0aa36, .elementor-9520 .elementor-element.elementor-element-6c0aa36 > .elementor-background-overlay{border-radius:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-6c0aa36{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-9520 .elementor-element.elementor-element-a6ae411 img{max-width:8%;}.elementor-9520 .elementor-element.elementor-element-f18a85e > .elementor-widget-container{margin:0px 0px -28px 0px;}.elementor-9520 .elementor-element.elementor-element-f18a85e .elementor-heading-title{font-size:40px;}.elementor-9520 .elementor-element.elementor-element-3e5f64b > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-3e5f64b .elementor-heading-title{font-size:40px;}.elementor-9520 .elementor-element.elementor-element-445825f > .elementor-widget-container{margin:15px 0px 30px 0px;}.elementor-9520 .elementor-element.elementor-element-445825f{text-align:left;}.elementor-9520 .elementor-element.elementor-element-445825f .elementor-heading-title{font-size:20px;}.elementor-9520 .elementor-element.elementor-element-b712cc1{padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-85d4488{padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-6ad767e img{max-width:8%;}.elementor-9520 .elementor-element.elementor-element-2ba7154 img{max-width:8%;}.elementor-9520 .elementor-element.elementor-element-d08550a img{max-width:8%;}.elementor-9520 .elementor-element.elementor-element-155383b > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-b8cafe6{padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-995f8f1{padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-f09eb14{padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-0e9e4f9{padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-a0e701e > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-e903076{padding:20px 0px 0px 0px;}}@media(max-width:767px){.elementor-9520 .elementor-element.elementor-element-5dc0f40 img{height:242px;}.elementor-9520 .elementor-element.elementor-element-a6ae411 img{max-width:16%;}.elementor-9520 .elementor-element.elementor-element-f18a85e > .elementor-widget-container{margin:0px 0px -11px 0px;}.elementor-9520 .elementor-element.elementor-element-f18a85e .elementor-heading-title{font-size:49px;line-height:1em;letter-spacing:1px;}.elementor-9520 .elementor-element.elementor-element-3e5f64b > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-3e5f64b .elementor-heading-title{font-size:49px;line-height:1em;letter-spacing:1px;}.elementor-9520 .elementor-element.elementor-element-445825f > .elementor-widget-container{margin:22px 0px 22px 0px;}.elementor-9520 .elementor-element.elementor-element-445825f{text-align:left;}.elementor-9520 .elementor-element.elementor-element-445825f .elementor-heading-title{font-size:17px;}.elementor-9520 .elementor-element.elementor-element-cab2850{padding:0px 0px 60px 0px;}.elementor-9520 .elementor-element.elementor-element-b712cc1{margin-top:-30px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-85d4488{padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-1c81572, .elementor-9520 .elementor-element.elementor-element-1c81572 > .elementor-background-overlay{border-radius:10px 10px 10px 10px;}.elementor-9520 .elementor-element.elementor-element-6ad767e > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-6ad767e img{max-width:10%;}.elementor-9520 .elementor-element.elementor-element-d2b4b27 .elementor-heading-title{font-size:20px;}.elementor-9520 .elementor-element.elementor-element-275811e, .elementor-9520 .elementor-element.elementor-element-275811e > .elementor-background-overlay{border-radius:10px 10px 10px 10px;}.elementor-9520 .elementor-element.elementor-element-2ba7154 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-2ba7154 img{max-width:10%;}.elementor-9520 .elementor-element.elementor-element-d35ba4c .elementor-heading-title{font-size:20px;}.elementor-9520 .elementor-element.elementor-element-38dd325, .elementor-9520 .elementor-element.elementor-element-38dd325 > .elementor-background-overlay{border-radius:10px 10px 10px 10px;}.elementor-9520 .elementor-element.elementor-element-d08550a > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-d08550a img{max-width:10%;}.elementor-9520 .elementor-element.elementor-element-8c8eb10 .elementor-heading-title{font-size:20px;}.elementor-9520 .elementor-element.elementor-element-56a86d7{padding:0px 0px 60px 0px;}.elementor-9520 .elementor-element.elementor-element-155383b > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-b8cafe6{padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-995f8f1{padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-f09eb14{padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-0e9e4f9{padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-a0e701e > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-e903076{padding:20px 0px 0px 0px;}.elementor-9520 .elementor-element.elementor-element-6c0aa36, .elementor-9520 .elementor-element.elementor-element-6c0aa36 > .elementor-background-overlay{border-radius:0px 0px 0px 0px;}}/* Start custom CSS for image, class: .elementor-element-5dc0f40 */.elementor-9520 .elementor-element.elementor-element-5dc0f40 { position: relative; display: inline-block; overflow: hidden; /* ทำให้ภาพไม่ล้นขอบ section */ border-radius: 0px; /* ขอบมน 10px */ } .elementor-9520 .elementor-element.elementor-element-5dc0f40 img { transition: transform 0.3s ease; /* เพิ่ม transition เพื่อให้การขยายเป็นไปอย่างนุ่มนวล */ width: 100%; /* ขนาดภาพเต็มขนาดของ container */ height: auto; /* ให้ความสูงสัมพันธ์กับความกว้าง */ border-radius: 0px; /* ขอบมนของภาพ */ } .elementor-9520 .elementor-element.elementor-element-5dc0f40:hover img { transform: scale(1.04); /* ขยายภาพเมื่อ hover */ }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a6ae411 */.elementor-9520 .elementor-element.elementor-element-a6ae411 img { animation: floatUpDown 2s ease-in-out infinite; } /* สร้าง animation */ @keyframes floatUpDown { 0% { transform: translateY(0px); } 50% { transform: translateY(7px); } 100% { transform: translateY(0px); } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-3e5f64b *//* Custom CSS สำหรับ Gradient และฟอนต์ */ .gradient-text { display: inline-block; background: linear-gradient(to right, #c79015, #d30d28); background-size: 100% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 30px; /* ✅ Desktop */ } /* Tablet: ความกว้างน้อยกว่า 1024px */ @media (max-width: 1024px) { .gradient-text { font-size: 25px; /* ✅ Tablet */ } } /* Mobile: ความกว้างน้อยกว่า 768px */ @media (max-width: 768px) { .gradient-text { font-size: 20px; /* ✅ Mobile */ } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a6ae411 */.elementor-9520 .elementor-element.elementor-element-a6ae411 img { animation: floatUpDown 2s ease-in-out infinite; } /* สร้าง animation */ @keyframes floatUpDown { 0% { transform: translateY(0px); } 50% { transform: translateY(7px); } 100% { transform: translateY(0px); } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-3e5f64b *//* Custom CSS สำหรับ Gradient และฟอนต์ */ .gradient-text { display: inline-block; background: linear-gradient(to right, #c79015, #d30d28); background-size: 100% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 30px; /* ✅ Desktop */ } /* Tablet: ความกว้างน้อยกว่า 1024px */ @media (max-width: 1024px) { .gradient-text { font-size: 25px; /* ✅ Tablet */ } } /* Mobile: ความกว้างน้อยกว่า 768px */ @media (max-width: 768px) { .gradient-text { font-size: 20px; /* ✅ Mobile */ } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a6ae411 */.elementor-9520 .elementor-element.elementor-element-a6ae411 img { animation: floatUpDown 2s ease-in-out infinite; } /* สร้าง animation */ @keyframes floatUpDown { 0% { transform: translateY(0px); } 50% { transform: translateY(7px); } 100% { transform: translateY(0px); } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-3e5f64b *//* Custom CSS สำหรับ Gradient และฟอนต์ */ .gradient-text { display: inline-block; background: linear-gradient(to right, #c79015, #d30d28); background-size: 100% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 30px; /* ✅ Desktop */ } /* Tablet: ความกว้างน้อยกว่า 1024px */ @media (max-width: 1024px) { .gradient-text { font-size: 25px; /* ✅ Tablet */ } } /* Mobile: ความกว้างน้อยกว่า 768px */ @media (max-width: 768px) { .gradient-text { font-size: 20px; /* ✅ Mobile */ } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-a6ae411 */.elementor-9520 .elementor-element.elementor-element-a6ae411 img { animation: floatUpDown 2s ease-in-out infinite; } /* สร้าง animation */ @keyframes floatUpDown { 0% { transform: translateY(0px); } 50% { transform: translateY(7px); } 100% { transform: translateY(0px); } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-3e5f64b *//* Custom CSS สำหรับ Gradient และฟอนต์ */ .gradient-text { display: inline-block; background: linear-gradient(to right, #c79015, #d30d28); background-size: 100% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 30px; /* ✅ Desktop */ } /* Tablet: ความกว้างน้อยกว่า 1024px */ @media (max-width: 1024px) { .gradient-text { font-size: 25px; /* ✅ Tablet */ } } /* Mobile: ความกว้างน้อยกว่า 768px */ @media (max-width: 768px) { .gradient-text { font-size: 20px; /* ✅ Mobile */ } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-4ee2bc1 */.elementor-9520 .elementor-element.elementor-element-4ee2bc1 { position: relative; display: inline-block; overflow: hidden; /* ทำให้ภาพไม่ล้นขอบ section */ border-radius: 0px; /* ขอบมน 10px */ } .elementor-9520 .elementor-element.elementor-element-4ee2bc1 img { transition: transform 0.3s ease; /* เพิ่ม transition เพื่อให้การขยายเป็นไปอย่างนุ่มนวล */ width: 100%; /* ขนาดภาพเต็มขนาดของ container */ height: auto; /* ให้ความสูงสัมพันธ์กับความกว้าง */ border-radius: 0px; /* ขอบมนของภาพ */ } .elementor-9520 .elementor-element.elementor-element-4ee2bc1:hover img { transform: scale(1.1); /* ขยายภาพเมื่อ hover */ }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-43a5aac */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); .os-wrapper { width: 100%; position: relative; box-sizing: border-box; overflow-x: hidden; background-color: transparent; } .gp-our-story-container { width: 100%; margin: 10px 0; /* Minimum margin */ overflow-x: hidden; font-family: 'Inter', sans-serif; color: white; display: block; position: relative; box-sizing: border-box; } .gp-content-wrapper { display: flex; flex-direction: row; max-width: 1400px; margin: 0 auto; padding: 5px 0; /* Minimum padding */ position: relative; box-sizing: border-box; } .gp-text-section { flex: 1; padding: 5px 1rem; /* Minimum padding */ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; position: relative; box-sizing: border-box; } .gp-title { position: relative; display: inline-block; margin: 0; padding: 0; overflow: hidden; } .gp-title-text { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; background-image: linear-gradient(270deg, #c79015, #d30d28, #c79015); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; line-height: 1.2; animation: gp-gradientAnimation 3s ease infinite; overflow: hidden; height: auto; margin: 0; padding: 0; } .gp-title-text::after { display: none; } .gp-title-wrapper { position: relative; display: block; overflow: hidden; padding: 0; margin: 0 0 10px 0; } .gp-subtitle { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255, 255, 255, 0.9); margin-top: 10px; font-weight: 400; text-align: left; line-height: 1.4; } @-webkit-keyframes gp-gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-moz-keyframes gp-gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes gp-gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Responsive */ @media (max-width: 1024px) { .gp-content-wrapper { flex-direction: column; padding: 5px 0; } .gp-text-section { padding: 5px 1rem; } } @media (max-width: 768px) { .gp-our-story-container { margin: 8px 0; } .gp-text-section { padding: 5px 1rem; } .gp-title-wrapper { padding: 0; } .gp-title-text { line-height: 1.7 !important; } .gp-title-text::after { height: 0.55em !important; } } @media (max-width: 480px) { .gp-our-story-container { margin: 5px 0; } .gp-content-wrapper { padding: 5px 0; } .gp-text-section { padding: 5px 1rem; } .gp-title-wrapper { padding: 0; } .gp-title-text { line-height: 1.8 !important; } .gp-title-text::after { height: 0.6em !important; } .gp-subtitle { font-size: 0.9rem; line-height: 1.3; } } /* เพิ่ม hover effect */ .gp-title:hover { background-size: 150% 100%; transition: background-size 0.5s ease; } .bks-animated-gradient-text, .gp-title.bks-animated-gradient-text, .gp-title.bks-animated-gradient-text::after { display: none !important; }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-c1291c1 */.elementor-9520 .elementor-element.elementor-element-c1291c1 .elementor-divider-separator { height: 1px; /* ความหนาของเส้น */ background: linear-gradient(to right, #c69214 0%, #c69214 20%, #d30528 60%, #d30528 100%); border: none !important; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-6ea6d3a */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @keyframes os-gradientAnimation { 0% { background-position: 0% 100%; } 50% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } } @keyframes os-arrowSlideAndFade { 0% { transform: translateY(-8px); opacity: 0; } 20% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(8px); opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } } /* New animation with scaling pulse */ @keyframes os-arrowSlideAndPulse { 0% { transform: translateY(-8px) scale(1); opacity: 0; } 20% { transform: translateY(0) scale(1); opacity: 1; } /* Fade in, slide down */ 50% { transform: translateY(4px) scale(1.1); opacity: 1; } /* Pulse larger */ 80% { transform: translateY(8px) scale(1); opacity: 1; } /* Slide down */ 100% { transform: translateY(16px) scale(1); opacity: 0; } /* Slide down, fade out */ } @keyframes os-dotFollowPath { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } @keyframes os-dotMove { 0%, 100% { transform: translate(-50%, -50%); top: 0; left: 0; } 25% { transform: translate(-50%, -50%); top: 0; left: 100%; } 50% { transform: translate(-50%, -50%); top: 100%; left: 100%; } 75% { transform: translate(-50%, -50%); top: 100%; left: 0; } } .os-our-story-container { width: 100%; margin: 10px 0; overflow-x: hidden; font-family: 'Inter', sans-serif; color: white; display: block; position: relative; box-sizing: border-box; } .os-content-wrapper { display: flex; flex-direction: row; max-width: 1400px; margin: 0 auto; padding: 5px 2rem; position: relative; box-sizing: border-box; gap: 4rem; } .os-text-section { flex: 0 0 55%; padding: 2rem 0; display: flex; flex-direction: column; } .os-timeline { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 1rem; } .os-timeline-item { display: flex; flex-direction: column; position: relative; padding-left: 1.5rem; } .os-timeline-item::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 1px; background: linear-gradient(to top, #c79015, #d30d28); background-size: 100% 200%; animation: os-gradientAnimation 3s linear infinite; } .os-timeline-item:not(:last-child)::after { content: '↓'; position: absolute; left: 0.4rem; bottom: -2rem; font-size: 1.5rem; color: transparent; background: linear-gradient(to top, #c79015, #d30d28); background-size: 100% 200%; background-clip: text; -webkit-background-clip: text; background-repeat: no-repeat; /* Use the new pulse animation, keep gradient animation */ animation: os-gradientAnimation 3s linear infinite, os-arrowSlideAndPulse 6s ease-in-out infinite; } .os-year { display: inline-block; font-size: 1.5rem; font-weight: 700; padding: 0.5rem 1.5rem; border: 1px solid #c79015; border-radius: 2rem; margin-bottom: 0.75rem; background: linear-gradient(to top, #c79015, #d30d28); background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; background-repeat: no-repeat; animation: os-gradientAnimation 3s ease infinite; position: relative; transition: transform 0.3s ease; cursor: pointer; } .os-year:hover { transform: scale(1.05); } .os-year::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 4px; background: #f39c12; border-radius: 50%; box-shadow: 0 0 5px 1px rgba(243, 156, 18, 0.7); offset-path: border-box; animation: os-dotFollowPath 12s linear infinite; } .os-description { font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); max-width: 90%; } .os-image-section { flex: 0 0 45%; display: flex; align-items: center; justify-content: center; margin: 1.5rem 0; /* ปรับลดจาก 2rem เหลือ 1.5rem ให้ภาพเขยิบขึ้น */ border-radius: 15px; overflow: hidden; height: fit-content; position: relative; } .os-story-image { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; } /* ✅ ข้อความติดด้านบนของภาพ */ .os-image-caption { position: absolute; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5); color: white; padding: 0.5rem 1rem; font-size: 1.1rem; font-weight: 600; z-index: 2; text-align: center; border-top-left-radius: 15px; border-top-right-radius: 15px; } .os-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; } .os-dot { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); cursor: pointer; transition: background-color 0.3s ease; } .os-dot.active { background-color: #d30d28; } /* Responsive */ @media (max-width: 1024px) { .os-content-wrapper { flex-direction: column; padding: 5px 1rem; align-items: center; } .os-text-section { padding: 1rem 0; width: 100%; } .os-image-section { width: 100%; max-width: 500px; margin: 1rem auto; height: auto; } .os-story-image { width: 100%; height: auto; max-width: 500px; object-fit: contain; } } @media (max-width: 768px) { .os-our-story-container { margin: 8px 0; } .os-year { font-size: 1.25rem; background-size: 100% 200%; animation: os-gradientAnimation 3s ease infinite; } .os-description { font-size: 0.9rem; } .os-image-section { margin-top: 0.75rem; margin-bottom: 1rem; } .os-text-section { padding: 5px 1rem; } .os-story-image { max-width: 100%; } } @media (max-width: 480px) { .os-our-story-container { margin: 5px 0; } .os-content-wrapper { padding: 5px 0; } .os-text-section { padding: 5px 1rem; } .os-timeline { gap: 1.5rem; } .os-year { font-size: 1.1rem; padding: 0.4rem 1.2rem; background-size: 100% 200%; animation: os-gradientAnimation 3s ease infinite; } .os-story-image { max-width: 100%; height: auto; } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-83d4183 */.elementor-9520 .elementor-element.elementor-element-83d4183 { --opacity: 1.5; /* ปรับค่า opacity ที่นี่ */ background: linear-gradient(to top right, rgba(77, 0, 3, var(--opacity)), rgba(43, 0, 3, var(--opacity))); }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-85d4488 */.elementor-9520 .elementor-element.elementor-element-85d4488 { --opacity: 1.5; /* ปรับค่า opacity ที่นี่ */ background: linear-gradient(to top right, rgba(77, 0, 3, var(--opacity)), rgba(43, 0, 3, var(--opacity))); }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-c2dea43 */.elementor-9520 .elementor-element.elementor-element-c2dea43 .elementor-divider-separator { height: 1px; /* ความหนาของเส้น */ background: linear-gradient(to right, #c69214 0%, #c69214 20%, #d30528 60%, #d30528 100%); border: none !important; }/* End custom CSS */ /* Start custom CSS for column, class: .elementor-element-246c1b1 */.my-custom-column-text .elementor-heading-title { /* Style สำหรับ Heading */ color: #333; /* สีข้อความ */ font-size: 24px; /* ขนาดตัวอักษร */ text-align: center; /* จัดข้อความให้อยู่ตรงกลาง (ถ้าต้องการ) */ } .my-custom-column-text .elementor-widget-text-editor { /* Style สำหรับ Text Editor */ color: #666; /* สีข้อความ */ font-size: 16px; /* ขนาดตัวอักษร */ text-align: center; /* จัดข้อความให้อยู่ตรงกลาง (ถ้าต้องการ) */ }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-79df27f */.elementor-9520 .elementor-element.elementor-element-79df27f { position: relative; display: inline-block; overflow: hidden; /* ทำให้ภาพไม่ล้นขอบ section */ border-radius: 10px; /* ขอบมน 10px */ } .elementor-9520 .elementor-element.elementor-element-79df27f img { transition: transform 0.3s ease; /* เพิ่ม transition เพื่อให้การขยายเป็นไปอย่างนุ่มนวล */ width: 100%; /* ขนาดภาพเต็มขนาดของ container */ height: auto; /* ให้ความสูงสัมพันธ์กับความกว้าง */ border-radius: 10px; /* ขอบมนของภาพ */ } .elementor-9520 .elementor-element.elementor-element-79df27f:hover img { transform: scale(1.2); /* ขยายภาพเมื่อ hover */ }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-91be304 */.elementor-9520 .elementor-element.elementor-element-91be304 { position: relative; display: inline-block; overflow: hidden; /* ทำให้ภาพไม่ล้นขอบ section */ border-radius: 10px; /* ขอบมน 10px */ } .elementor-9520 .elementor-element.elementor-element-91be304 img { transition: transform 0.3s ease; /* เพิ่ม transition เพื่อให้การขยายเป็นไปอย่างนุ่มนวล */ width: 100%; /* ขนาดภาพเต็มขนาดของ container */ height: auto; /* ให้ความสูงสัมพันธ์กับความกว้าง */ border-radius: 10px; /* ขอบมนของภาพ */ } .elementor-9520 .elementor-element.elementor-element-91be304:hover img { transform: scale(1.2); /* ขยายภาพเมื่อ hover */ }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-518a2f0 */.elementor-9520 .elementor-element.elementor-element-518a2f0 { position: relative; display: inline-block; overflow: hidden; /* ทำให้ภาพไม่ล้นขอบ section */ border-radius: 10px; /* ขอบมน 10px */ } .elementor-9520 .elementor-element.elementor-element-518a2f0 img { transition: transform 0.3s ease; /* เพิ่ม transition เพื่อให้การขยายเป็นไปอย่างนุ่มนวล */ width: 100%; /* ขนาดภาพเต็มขนาดของ container */ height: auto; /* ให้ความสูงสัมพันธ์กับความกว้าง */ border-radius: 10px; /* ขอบมนของภาพ */ } .elementor-9520 .elementor-element.elementor-element-518a2f0:hover img { transform: scale(1.2); /* ขยายภาพเมื่อ hover */ }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-c2dea43 */.elementor-9520 .elementor-element.elementor-element-c2dea43 .elementor-divider-separator { height: 1px; /* ความหนาของเส้น */ background: linear-gradient(to right, #c69214 0%, #c69214 20%, #d30528 60%, #d30528 100%); border: none !important; }/* End custom CSS */ /* Start custom CSS for column, class: .elementor-element-246c1b1 */.my-custom-column-text .elementor-heading-title { /* Style สำหรับ Heading */ color: #333; /* สีข้อความ */ font-size: 24px; /* ขนาดตัวอักษร */ text-align: center; /* จัดข้อความให้อยู่ตรงกลาง (ถ้าต้องการ) */ } .my-custom-column-text .elementor-widget-text-editor { /* Style สำหรับ Text Editor */ color: #666; /* สีข้อความ */ font-size: 16px; /* ขนาดตัวอักษร */ text-align: center; /* จัดข้อความให้อยู่ตรงกลาง (ถ้าต้องการ) */ }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-79df27f */.elementor-9520 .elementor-element.elementor-element-79df27f { position: relative; display: inline-block; overflow: hidden; /* ทำให้ภาพไม่ล้นขอบ section */ border-radius: 10px; /* ขอบมน 10px */ } .elementor-9520 .elementor-element.elementor-element-79df27f img { transition: transform 0.3s ease; /* เพิ่ม transition เพื่อให้การขยายเป็นไปอย่างนุ่มนวล */ width: 100%; /* ขนาดภาพเต็มขนาดของ container */ height: auto; /* ให้ความสูงสัมพันธ์กับความกว้าง */ border-radius: 10px; /* ขอบมนของภาพ */ } .elementor-9520 .elementor-element.elementor-element-79df27f:hover img { transform: scale(1.2); /* ขยายภาพเมื่อ hover */ }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-91be304 */.elementor-9520 .elementor-element.elementor-element-91be304 { position: relative; display: inline-block; overflow: hidden; /* ทำให้ภาพไม่ล้นขอบ section */ border-radius: 10px; /* ขอบมน 10px */ } .elementor-9520 .elementor-element.elementor-element-91be304 img { transition: transform 0.3s ease; /* เพิ่ม transition เพื่อให้การขยายเป็นไปอย่างนุ่มนวล */ width: 100%; /* ขนาดภาพเต็มขนาดของ container */ height: auto; /* ให้ความสูงสัมพันธ์กับความกว้าง */ border-radius: 10px; /* ขอบมนของภาพ */ } .elementor-9520 .elementor-element.elementor-element-91be304:hover img { transform: scale(1.2); /* ขยายภาพเมื่อ hover */ }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-518a2f0 */.elementor-9520 .elementor-element.elementor-element-518a2f0 { position: relative; display: inline-block; overflow: hidden; /* ทำให้ภาพไม่ล้นขอบ section */ border-radius: 10px; /* ขอบมน 10px */ } .elementor-9520 .elementor-element.elementor-element-518a2f0 img { transition: transform 0.3s ease; /* เพิ่ม transition เพื่อให้การขยายเป็นไปอย่างนุ่มนวล */ width: 100%; /* ขนาดภาพเต็มขนาดของ container */ height: auto; /* ให้ความสูงสัมพันธ์กับความกว้าง */ border-radius: 10px; /* ขอบมนของภาพ */ } .elementor-9520 .elementor-element.elementor-element-518a2f0:hover img { transform: scale(1.2); /* ขยายภาพเมื่อ hover */ }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-eedcfbb */.elementor-9520 .elementor-element.elementor-element-eedcfbb .elementor-divider-separator { height: 1px; /* ความหนาของเส้น */ background: linear-gradient(to right, #c69214 0%, #c69214 20%, #d30528 60%, #d30528 100%); border: none !important; }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-546a306 */.elementor-9520 .elementor-element.elementor-element-546a306 { --opacity: 1.5; /* ปรับค่า opacity ที่นี่ */ background: linear-gradient(to top right, rgba(77, 0, 3, var(--opacity)), rgba(43, 0, 3, var(--opacity))); }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-1d478f9 */.elementor-9520 .elementor-element.elementor-element-1d478f9 .elementor-divider-separator { height: 1px; /* ความหนาของเส้น */ background: linear-gradient(to right, #c69214 0%, #c69214 20%, #d30528 60%, #d30528 100%); border: none !important; }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-7cff462 */.elementor-9520 .elementor-element.elementor-element-7cff462 .elementor-divider-separator { height: 1px; /* ความหนาของเส้น */ background: linear-gradient(to right, #c69214 0%, #c69214 20%, #d30528 60%, #d30528 100%); border: none !important; }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-5b8b39e *//* Sustainability Goals CSS */ .bks-sustainability-section { font-family: 'Inter', sans-serif; padding: 50px 20px; background-color: transparent; position: relative; } .bks-sustainability-container { max-width: 1200px; margin: 0 auto; } .bks-goals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .bks-goal-card { background-color: white; border-radius: 10px; padding: 30px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .bks-goal-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .bks-goal-title { font-size: 18px; font-weight: 600; color: #333; margin-top: 0; margin-bottom: 20px; text-align: center; } .bks-logo-container { width: 150px; height: 150px; margin: 0 auto 20px; } .bks-logo-container img { width: 100%; height: 100%; object-fit: contain; } .bks-stat-content { text-align: center; } .bks-stat-number { font-size: 32px; font-weight: 700; color: #333; display: flex; align-items: center; justify-content: center; } .up-arrow, .down-arrow { color: #00c853; margin-right: 5px; animation: arrow-fade 2s infinite; } .bks-stat-label { font-size: 16px; color: #666; margin-bottom: 5px; } .bks-stat-target { font-size: 18px; color: #c8202d; font-weight: 600; margin: 5px 0 15px; } .bks-stat-desc { font-size: 14px; color: #555; line-height: 1.5; margin: 0; } /* Responsive Design */ @media screen and (max-width: 992px) { .bks-goals-grid { grid-template-columns: 1fr; gap: 25px; } } @media screen and (max-width: 768px) { .bks-sustainability-section { padding: 40px 20px; } .bks-goal-title { font-size: 17px; } .bks-logo-container { width: 130px; height: 130px; } .bks-stat-number { font-size: 28px; } } @media screen and (max-width: 480px) { .bks-sustainability-section { padding: 30px 15px; } .bks-goal-title { font-size: 16px; } .bks-logo-container { width: 110px; height: 110px; } .bks-stat-number { font-size: 26px; } .bks-stat-label { font-size: 14px; } .bks-stat-target { font-size: 16px; } .bks-stat-desc { font-size: 13px; } } /* keyframes สำหรับ animation ลูกศร */ @keyframes arrow-fade { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(3px); opacity: 0.5; } 100% { transform: translateY(0); opacity: 1; } } /* ลบ delay เดิมออก */ .bks-goals-grid .bks-goal-card:nth-child(1), .bks-goals-grid .bks-goal-card:nth-child(2), .bks-goals-grid .bks-goal-card:nth-child(3), .bks-goals-grid .bks-goal-card:nth-child(4) { animation-delay: 0s; }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-70857b8 *//* Sustainability Goals CSS */ .bks-sustainability-section { font-family: 'Inter', sans-serif; padding: 50px 20px; background-color: transparent; position: relative; } .bks-sustainability-container { max-width: 1200px; margin: 0 auto; } .bks-goals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .bks-goal-card { background-color: white; border-radius: 10px; padding: 30px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .bks-goal-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .bks-goal-title { font-size: 18px; font-weight: 600; color: #333; margin-top: 0; margin-bottom: 20px; text-align: center; } .bks-logo-container { width: 150px; height: 150px; margin: 0 auto 20px; } .bks-logo-container img { width: 100%; height: 100%; object-fit: contain; } .bks-stat-content { text-align: center; } .bks-stat-number { font-size: 32px; font-weight: 700; color: #333; display: flex; align-items: center; justify-content: center; } .up-arrow, .down-arrow { color: #00c853; margin-right: 5px; animation: arrow-fade 2s infinite; } .bks-stat-label { font-size: 16px; color: #666; margin-bottom: 5px; } .bks-stat-target { font-size: 18px; color: #c8202d; font-weight: 600; margin: 5px 0 15px; } .bks-stat-desc { font-size: 14px; color: #555; line-height: 1.5; margin: 0; } /* Responsive Design */ @media screen and (max-width: 992px) { .bks-goals-grid { grid-template-columns: 1fr; gap: 25px; } } @media screen and (max-width: 768px) { .bks-sustainability-section { padding: 40px 20px; } .bks-goal-title { font-size: 17px; } .bks-logo-container { width: 130px; height: 130px; } .bks-stat-number { font-size: 28px; } } @media screen and (max-width: 480px) { .bks-sustainability-section { padding: 30px 15px; } .bks-goal-title { font-size: 16px; } .bks-logo-container { width: 110px; height: 110px; } .bks-stat-number { font-size: 26px; } .bks-stat-label { font-size: 14px; } .bks-stat-target { font-size: 16px; } .bks-stat-desc { font-size: 13px; } } /* keyframes สำหรับ animation ลูกศร */ @keyframes arrow-fade { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(3px); opacity: 0.5; } 100% { transform: translateY(0); opacity: 1; } } /* ลบ delay เดิมออก */ .bks-goals-grid .bks-goal-card:nth-child(1), .bks-goals-grid .bks-goal-card:nth-child(2), .bks-goals-grid .bks-goal-card:nth-child(3), .bks-goals-grid .bks-goal-card:nth-child(4) { animation-delay: 0s; }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-5c12d91 */.elementor-9520 .elementor-element.elementor-element-5c12d91 .elementor-divider-separator { height: 1px; /* ความหนาของเส้น */ background: linear-gradient(to right, #c69214 0%, #c69214 20%, #d30528 60%, #d30528 100%); border: none !important; }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-b8cafe6 */.elementor-9520 .elementor-element.elementor-element-b8cafe6 { --opacity: 1.5; /* ปรับค่า opacity ที่นี่ */ background: linear-gradient(to top right, rgba(77, 0, 3, var(--opacity)), rgba(43, 0, 3, var(--opacity))); }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-1ecb302 */.elementor-9520 .elementor-element.elementor-element-1ecb302 .elementor-divider-separator { height: 1px; /* ความหนาของเส้น */ background: linear-gradient(to right, #c69214 0%, #c69214 20%, #d30528 60%, #d30528 100%); border: none !important; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-7a6aaf7 *//* Awards Section Custom CSS for WordPress Elementor */ .bks-awards-section, .bks-honors-section { font-family: 'Inter', sans-serif; padding: 60px 20px; background-color: transparent; /* Transparent background */ position: relative; } .bks-awards-container, .bks-honors-container { max-width: 1200px; margin: 0 auto; } .bks-awards-grid, .bks-honors-grid { display: grid; gap: 30px; margin-bottom: 40px; } .bks-awards-top-row, .bks-honors-top-row { grid-template-columns: repeat(4, 1fr); } .bks-awards-bottom-row, .bks-honors-bottom-row { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; } .bks-award-card, .bks-honor-card { display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s ease; width: 100%; max-width: 300px; margin: 0 auto; background-color: transparent; /* Ensure cards have transparent background */ } .bks-award-card:hover, .bks-honor-card:hover { transform: translateY(-5px); } .bks-award-image-container, .bks-honor-image-container { background-color: #ffffff; border-radius: 8px; padding: 0; width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease; overflow: hidden; position: relative; } .bks-award-image-container:hover, .bks-honor-image-container:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .bks-award-image-container img, .bks-honor-image-container img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 8px; transition: transform 0.5s ease !important; } .bks-award-image-container:hover img, .bks-honor-image-container:hover img { transform: scale(1.15) !important; } .bks-award-title, .bks-honor-title { font-size: 20px; font-weight: 700; margin: 0 0 8px 0; background: linear-gradient(270deg, #c79015, #d30d28, #c79015); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bks-gradientAnimation 3s ease infinite; line-height: 1.3; padding-bottom: 0.25em; display: inline-block; overflow: visible; margin-bottom: 5px; position: relative; text-shadow: none; /* Ensure no text shadow interferes with gradient */ } .bks-award-title::after, .bks-honor-title::after { content: ""; display: block; height: 5px; width: 100%; } @keyframes bks-gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .bks-award-description, .bks-honor-description { font-size: 14px; color: #000; margin: 0; max-width: 250px; text-align: center; line-height: 1.5; font-weight: 400; } /* Responsive Design */ @media screen and (max-width: 1024px) { .bks-awards-top-row, .bks-honors-top-row { grid-template-columns: repeat(2, 1fr); gap: 25px; } .bks-awards-bottom-row, .bks-honors-bottom-row { grid-template-columns: repeat(2, 1fr); gap: 25px; } .bks-awards-bottom-row > *:last-child, .bks-honors-bottom-row > *:last-child { grid-column: 1 / -1; width: 100%; max-width: 300px; margin: 0 auto; } } @media screen and (max-width: 767px) { .bks-award-title, .bks-honor-title { font-size: 18px; margin-bottom: 10px; line-height: 1.3; padding-bottom: 0.25em; } .bks-awards-top-row, .bks-awards-bottom-row, .bks-honors-top-row, .bks-honors-bottom-row { grid-template-columns: 1fr; max-width: 300px; margin-left: auto; margin-right: auto; gap: 30px; } /* Reset the last item styling for mobile */ .bks-awards-bottom-row > *:last-child, .bks-honors-bottom-row > *:last-child { grid-column: auto; width: 100%; max-width: 300px; } /* Consistent card sizing and spacing */ .bks-award-card, .bks-honor-card { max-width: 300px; margin-bottom: 20px; padding: 15px 10px; background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; } .bks-award-image-container, .bks-honor-image-container { height: 160px; margin-bottom: 12px; } .bks-award-description, .bks-honor-description { font-size: 13px; max-width: 100%; line-height: 1.4; } } /* Additional media query for very small screens */ @media screen and (max-width: 375px) { .bks-award-title, .bks-honor-title { font-size: 16px; } .bks-award-description, .bks-honor-description { font-size: 12px; } } /* WordPress Elementor Compatibility Fixes */ body .bks-award-image-container img, html .bks-award-image-container img, #page .bks-award-image-container img, .site-content .bks-award-image-container img, .entry-content .bks-award-image-container img, .content-area .bks-award-image-container img, #content .bks-award-image-container img, .elementor .bks-award-image-container img, .wp-block-image .bks-award-image-container img, .wp-block .bks-award-image-container img, article .bks-award-image-container img, .post .bks-award-image-container img, .page .bks-award-image-container img, div .bks-award-image-container img, body .bks-honor-image-container img, html .bks-honor-image-container img, #page .bks-honor-image-container img, .site-content .bks-honor-image-container img, .entry-content .bks-honor-image-container img, .content-area .bks-honor-image-container img, #content .bks-honor-image-container img, .elementor .bks-honor-image-container img, .wp-block-image .bks-honor-image-container img, .wp-block .bks-honor-image-container img, article .bks-honor-image-container img, .post .bks-honor-image-container img, .page .bks-honor-image-container img, div .bks-honor-image-container img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; border-radius: 8px !important; transition: transform 0.5s ease !important; } body .bks-award-image-container:hover img, html .bks-award-image-container:hover img, #page .bks-award-image-container:hover img, .site-content .bks-award-image-container:hover img, .entry-content .bks-award-image-container:hover img, .content-area .bks-award-image-container:hover img, #content .bks-award-image-container:hover img, .elementor .bks-award-image-container:hover img, .wp-block-image .bks-award-image-container:hover img, .wp-block .bks-award-image-container:hover img, article .bks-award-image-container:hover img, .post .bks-award-image-container:hover img, .page .bks-award-image-container:hover img, div .bks-award-image-container:hover img, body .bks-honor-image-container:hover img, html .bks-honor-image-container:hover img, #page .bks-honor-image-container:hover img, .site-content .bks-honor-image-container:hover img, .entry-content .bks-honor-image-container:hover img, .content-area .bks-honor-image-container:hover img, #content .bks-honor-image-container:hover img, .elementor .bks-honor-image-container:hover img, .wp-block-image .bks-honor-image-container:hover img, .wp-block .bks-honor-image-container:hover img, article .bks-honor-image-container:hover img, .post .bks-honor-image-container:hover img, .page .bks-honor-image-container:hover img, div .bks-honor-image-container:hover img { transform: scale(1.05) !important; } /* Fix for Elementor and other page builders */ .elementor-widget-container .bks-award-image-container img, .fl-module-content .bks-award-image-container img, .et_pb_module .bks-award-image-container img, .vc_column_container .bks-award-image-container img, .elementor-widget-container .bks-honor-image-container img, .fl-module-content .bks-honor-image-container img, .et_pb_module .bks-honor-image-container img, .vc_column_container .bks-honor-image-container img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; border-radius: 8px !important; } /* Fix for WordPress image alignment */ .bks-award-image-container img.aligncenter, .bks-award-image-container img.alignleft, .bks-award-image-container img.alignright, .bks-award-image-container img.alignnone { margin: 0 auto !important; float: none !important; display: block !important; } /* Lightbox styling and animation */ .bks-awards-lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 9999; justify-content: center; align-items: center; padding: 30px; box-sizing: border-box; opacity: 0; transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .bks-awards-lightbox.active { display: flex; opacity: 1; } .bks-awards-lightbox-content { position: relative; max-width: 90%; max-height: 90%; display: flex; justify-content: center; align-items: center; transform: scale(0.9); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .bks-awards-lightbox.active .bks-awards-lightbox-content { transform: scale(1); } .bks-awards-lightbox-image { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 4px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); transform: translateY(20px); opacity: 0; transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease, max-height 0.5s ease, max-width 0.5s ease; cursor: zoom-in; } .bks-awards-lightbox.active .bks-awards-lightbox-image { transform: translateY(0); opacity: 1; } /* Full size image mode */ .bks-awards-lightbox.fullsize .bks-awards-lightbox-image { max-width: none; max-height: none; cursor: zoom-out; } .bks-awards-lightbox.panning { cursor: grabbing !important; } /* Remove the zoom text styling */ .bks-awards-lightbox-zoom-text { display: none; } .bks-awards-lightbox.active .bks-awards-lightbox-zoom-text { display: none; } .bks-awards-lightbox.fullsize .bks-awards-lightbox-zoom-text { display: none; } @media (max-width: 768px) { .bks-awards-lightbox-zoom-text { display: none; } } .bks-awards-lightbox-close, .bks-honors-lightbox-close { position: absolute; top: -50px; right: 0; color: white; font-size: 36px; font-weight: 300; cursor: pointer; background: none; border: none; outline: none; box-shadow: none; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; transform: rotate(0deg); padding: 0; margin: 0; width: auto; height: auto; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .bks-awards-lightbox-close:focus, .bks-awards-lightbox-close:active, .bks-honors-lightbox-close:focus, .bks-honors-lightbox-close:active { outline: none; border: none; box-shadow: none; } .bks-awards-lightbox.active .bks-awards-lightbox-close, .bks-honors-lightbox.active .bks-honors-lightbox-close { opacity: 0.8; transition-delay: 0.4s; } .bks-awards-lightbox-close:hover, .bks-honors-lightbox-close:hover { opacity: 1; transform: rotate(90deg); } /* Make sure honors lightbox styling matches awards lightbox */ .bks-honors-lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 9999; justify-content: center; align-items: center; padding: 30px; box-sizing: border-box; opacity: 0; transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .bks-honors-lightbox.active { display: flex; opacity: 1; } .bks-honors-lightbox-content { position: relative; max-width: 90%; max-height: 90%; display: flex; justify-content: center; align-items: center; transform: scale(0.9); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .bks-honors-lightbox.active .bks-honors-lightbox-content { transform: scale(1); } .bks-honors-lightbox-image { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 4px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); transform: translateY(20px); opacity: 0; transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease, max-height 0.5s ease, max-width 0.5s ease; cursor: zoom-in; } .bks-honors-lightbox.active .bks-honors-lightbox-image { transform: translateY(0); opacity: 1; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-92ad50e */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); .os-wrapper { width: 100%; position: relative; box-sizing: border-box; overflow-x: hidden; background-color: transparent; } .gp-our-story-container { width: 100%; margin: 10px 0; /* Minimum margin */ overflow-x: hidden; font-family: 'Inter', sans-serif; color: white; display: block; position: relative; box-sizing: border-box; } .gp-content-wrapper { display: flex; flex-direction: row; max-width: 1400px; margin: 0 auto; padding: 5px 0; /* Minimum padding */ position: relative; box-sizing: border-box; } .gp-text-section { flex: 1; padding: 5px 1rem; /* Minimum padding */ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; position: relative; box-sizing: border-box; } .gp-title { position: relative; display: inline-block; margin: 0; padding: 0; overflow: hidden; } .gp-title-text { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; background-image: linear-gradient(270deg, #c79015, #d30d28, #c79015); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; line-height: 1.2; animation: gp-gradientAnimation 3s ease infinite; overflow: hidden; height: auto; margin: 0; padding: 0; } .gp-title-text::after { display: none; } .gp-title-wrapper { position: relative; display: block; overflow: hidden; padding: 0; margin: 0 0 10px 0; } .gp-subtitle { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255, 255, 255, 0.9); margin-top: 10px; font-weight: 400; text-align: left; line-height: 1.4; } @-webkit-keyframes gp-gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-moz-keyframes gp-gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes gp-gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Responsive */ @media (max-width: 1024px) { .gp-content-wrapper { flex-direction: column; padding: 5px 0; } .gp-text-section { padding: 5px 1rem; } } @media (max-width: 768px) { .gp-our-story-container { margin: 8px 0; } .gp-text-section { padding: 5px 1rem; } .gp-title-wrapper { padding: 0; } .gp-title-text { line-height: 1.7 !important; } .gp-title-text::after { height: 0.55em !important; } } @media (max-width: 480px) { .gp-our-story-container { margin: 5px 0; } .gp-content-wrapper { padding: 5px 0; } .gp-text-section { padding: 5px 1rem; } .gp-title-wrapper { padding: 0; } .gp-title-text { line-height: 1.8 !important; } .gp-title-text::after { height: 0.6em !important; } .gp-subtitle { font-size: 0.9rem; line-height: 1.3; } } /* เพิ่ม hover effect */ .gp-title:hover { background-size: 150% 100%; transition: background-size 0.5s ease; } .bks-animated-gradient-text, .gp-title.bks-animated-gradient-text, .gp-title.bks-animated-gradient-text::after { display: none !important; }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-89644e1 */.elementor-9520 .elementor-element.elementor-element-89644e1 .elementor-divider-separator { height: 1px; /* ความหนาของเส้น */ background: linear-gradient(to right, #c69214 0%, #c69214 20%, #d30528 60%, #d30528 100%); border: none !important; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-f2eb59d *//* Base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Scoped dashboard styles - everything is prefixed with .smartex-dashboard */ .smartex-dashboard { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #ffffff; line-height: 1.5; width: 100%; max-width: 1280px; margin: 0 auto; padding: 3rem 2rem; background-color: transparent; border-radius: 1.5rem; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border: none; } /* Header */ .smartex-dashboard .header { display: flex; justify-content: flex-end; margin-bottom: 3rem; } .smartex-dashboard .branding { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #a0a0a0; } /* Main heading */ .smartex-dashboard .main-heading { font-size: 3rem; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 5rem; } /* Gradient text effect */ .smartex-dashboard .gradient-text { background: linear-gradient(to right, #c79015, #c8202d); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientAnimation 4s ease infinite; } @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Content grid */ .smartex-dashboard .content-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; } @media (min-width: 1024px) { .smartex-dashboard .content-grid { grid-template-columns: 1fr 1fr; } } /* Column */ .smartex-dashboard .column { display: flex; flex-direction: column; gap: 3rem; } /* Stat container */ .smartex-dashboard .stat-container { margin-bottom: 1rem; } /* ===== Hover Effect สำหรับตัวเลขใหญ่ ===== */ body .smartex-dashboard .stat-number, html .smartex-dashboard .stat-number { font-size: 3.75rem !important; font-weight: 700 !important; line-height: 1.1 !important; margin-bottom: 0.5rem !important; color: #ffffff !important; position: relative !important; display: inline-block !important; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease !important; transform-origin: center center !important; } /* Hover effect สำหรับตัวเลขและเครื่องหมายบวก */ body .smartex-dashboard .stat-number:hover, body .smartex-dashboard .plus:hover, html .smartex-dashboard .stat-number:hover, html .smartex-dashboard .plus:hover, .page .smartex-dashboard .stat-number:hover, .page .smartex-dashboard .plus:hover { transform: scale(1.15) !important; background: linear-gradient(to right, #c79015, #c8202d) !important; background-size: 200% 200% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; animation: gradientAnimation 4s ease infinite !important; cursor: pointer !important; } /* แก้ไขเครื่องหมายบวก */ body .smartex-dashboard .plus, html .smartex-dashboard .plus { font-size: 2.5rem !important; font-weight: 300 !important; color: #c79015 !important; vertical-align: 0.5rem !important; margin-left: -0.25rem !important; display: inline-block !important; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease !important; transform-origin: center center !important; } .smartex-dashboard .stat-description { font-size: 1.125rem; color: #e0e0e0; font-weight: 500; } .smartex-dashboard .stat-subtitle { display: block; font-size: 0.875rem; color: #a0a0a0; font-weight: 400; margin-top: 0.25rem; } /* ===== Hover Effect สำหรับ Tagline (REDEFINING EFFICIENCY) ===== */ body .smartex-dashboard .tagline, html .smartex-dashboard .tagline { font-size: 0.8rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; background: linear-gradient(to right, #c79015, #c8202d) !important; background-size: 200% 200% !important; display: inline-block !important; padding: 0.5rem 1rem !important; border-radius: 1rem !important; margin-top: 1rem !important; font-weight: 600 !important; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-position 0.3s ease !important; transform-origin: center center !important; cursor: pointer !important; } body .smartex-dashboard .tagline:hover, html .smartex-dashboard .tagline:hover { animation: gradientAnimation 4s ease infinite, pulseTagline 1.5s ease-in-out infinite !important; } /* Production list */ .smartex-dashboard .production-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; } /* ===== Hover Effect สำหรับรายการผลิต ===== */ body .smartex-dashboard .production-item, html .smartex-dashboard .production-item { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0.75rem 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; position: relative !important; cursor: pointer !important; } body .smartex-dashboard .production-item::before, html .smartex-dashboard .production-item::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(to right, #c79015, #c8202d, #c79015) !important; background-size: 200% 100% !important; opacity: 0 !important; transition: opacity 0.4s ease !important; z-index: 0 !important; pointer-events: none !important; } body .smartex-dashboard .production-item:hover::before, html .smartex-dashboard .production-item:hover::before { opacity: 0.15 !important; animation: gradientAnimation 4s ease infinite !important; } body .smartex-dashboard .production-name, html .smartex-dashboard .production-name, body .smartex-dashboard .production-value, html .smartex-dashboard .production-value { position: relative !important; z-index: 1 !important; } /* Badge */ .smartex-dashboard .badge-container { margin-top: 1rem; } .smartex-dashboard .ready-badge { display: inline-block; background-color: transparent; color: white; padding: 0.5rem 0; font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; } .smartex-dashboard .highlight { color: #c8202d; font-weight: 700; } /* Location info */ .smartex-dashboard .location-info { font-size: 0.875rem; color: #a0a0a0; margin-top: 1.5rem; line-height: 1.6; } /* Indicator dots */ .smartex-dashboard .indicator-dots { display: flex; gap: 0.375rem; margin-top: 1.5rem; } .smartex-dashboard .dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.3); } .smartex-dashboard .dot.active { background-color: #c8202d; } /* ADD new keyframes for top/left animation */ @keyframes moveDot { 0% { top: -3px; left: -3px; /* Adjust initial position */ } 25% { top: -3px; left: calc(100% - 4px); /* Adjust for offset */ } 50% { top: calc(100% - 4px); left: calc(100% - 4px); /* Adjust for offset */} 75% { top: calc(100% - 4px); left: -3px; /* Adjust for offset */ } 100% { top: -3px; left: -3px; /* Back to start */} } /* Image container */ .smartex-dashboard .image-container { margin-top: 2rem; border-radius: 1rem; /* overflow: hidden; */ /* Keep commented out for now */ box-shadow: none; border: none; position: relative; padding: 1px; /* Reduce padding for thinner stroke */ transition: transform 0.5s ease; } /* Gradient border using ::before */ .smartex-dashboard .image-container::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; margin: -1px; /* Reduce negative margin for thinner stroke */ border-radius: inherit; background: linear-gradient(to bottom right, #c79015, #c8202d); } /* Animated dot using ::after */ .smartex-dashboard .image-container::after { content: ''; position: absolute; top: -3px; /* Adjust initial position */ left: -3px; /* Adjust initial position */ width: 7px; /* Keep increased size */ height: 7px; /* Keep increased size */ /* Change background back to solid yellow */ background: #f39c12; border-radius: 50%; /* Keep box-shadow for glow */ box-shadow: 0 0 5px 1px rgba(243, 156, 18, 0.7); z-index: 2; /* USE new animation */ animation: moveDot 20s linear infinite; } .smartex-dashboard .dashboard-image { width: 100%; height: auto; object-fit: cover; display: block; position: relative; z-index: 1; border-radius: calc(1rem - 1px); /* Adjust radius for new padding */ } /* Apply hover effect to the container */ .smartex-dashboard .image-container:hover { transform: scale(1.03); } /* Remove hover effect from the image itself */ /* .smartex-dashboard .image-container:hover .dashboard-image { transform: scale(1.03); } */ /* Responsive adjustments */ @media (max-width: 768px) { .smartex-dashboard { padding: 2rem 1.5rem; } .smartex-dashboard .main-heading { font-size: 2.5rem; margin-bottom: 3rem; } .smartex-dashboard .stat-number { font-size: 3rem; } .smartex-dashboard .plus { font-size: 2rem; } } @media (max-width: 480px) { .smartex-dashboard { padding: 1.5rem 1rem; } .smartex-dashboard .main-heading { font-size: 2rem; margin-bottom: 2rem; } .smartex-dashboard .stat-number { font-size: 2.5rem; } .smartex-dashboard .plus { font-size: 1.75rem; } .smartex-dashboard .content-grid { gap: 2rem; } .smartex-dashboard .column { gap: 2rem; } } @keyframes pulseTagline { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } /* ขยายเล็กน้อย */ } .smartex-dashboard .tagline:hover { animation: gradientAnimation 4s ease infinite, pulseTagline 1.5s ease-in-out infinite; /* เพิ่ม pulse animation */ /* ไม่ต้องใช้ transform: scale(1.15) แล้ว */ }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-f09eb14 */.elementor-9520 .elementor-element.elementor-element-f09eb14 { --opacity: 1.5; /* ปรับค่า opacity ที่นี่ */ background: linear-gradient(to top right, rgba(77, 0, 3, var(--opacity)), rgba(43, 0, 3, var(--opacity))); }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-bedbfd9 */.elementor-9520 .elementor-element.elementor-element-bedbfd9 .elementor-divider-separator { height: 1px; /* ความหนาของเส้น */ background: linear-gradient(to right, #c69214 0%, #c69214 20%, #d30528 60%, #d30528 100%); border: none !important; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-5e1fdf7 *//* นำเข้าฟอนต์ Inter จาก Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* Reset และ Base Styles */ .apple-quality-process * { margin: 0; padding: 0; box-sizing: border-box; } /* Wrapper Styles */ .apple-quality-wrapper { width: 100%; padding: 60px 20px; background-color: transparent; } .apple-quality-process { font-family: 'Inter', sans-serif; max-width: 1200px; margin: 0 auto; padding: 60px 40px; color: #1d1d1f; background-color: transparent; border-radius: 20px; box-shadow: none; } /* Header Styles */ .quality-header { text-align: center; margin-bottom: 60px; animation: fadeIn 0.8s ease-out; } .quality-header h1 { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 20px; line-height: 1.1; } .quality-header .highlight { color: #c8202d; position: relative; display: inline-block; } .quality-header .highlight::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #c8202d, #ff9f43); border-radius: 3px; } .quality-header p { font-size: 18px; color: #86868b; max-width: 600px; margin: 0 auto; line-height: 1.5; } /* Section Styles */ .process-section { margin-bottom: 50px; animation: fadeIn 0.8s ease-out; animation-fill-mode: both; } .process-section:nth-child(2) { animation-delay: 0.1s; } .process-section:nth-child(3) { animation-delay: 0.2s; } .process-section:nth-child(4) { animation-delay: 0.3s; } .section-header { background-color: #c8202d; color: white; padding: 12px 30px; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; min-width: 150px; font-weight: 600; font-size: 20px; margin-bottom: 30px; box-shadow: 0 6px 16px rgba(200, 32, 45, 0.2); } /* Process Items Grid */ .process-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; margin-bottom: 20px; } .process-flow { display: flex; flex-direction: column; gap: 30px; } /* Process Item Styles */ .process-item { background-color: white; border-radius: 16px; padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e5e7; transition: all 0.3s ease; font-weight: 500; font-size: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); position: relative; overflow: hidden; } .process-item::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, #c8202d, #ff9f43); opacity: 0; transition: opacity 0.3s ease; } .process-item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); border-color: rgba(200, 32, 45, 0.2); } .process-item:hover::before { opacity: 1; } .process-item i { color: #86868b; } /* Process Group and Subitems */ .process-group { display: flex; flex-direction: column; width: 100%; gap: 15px; margin-bottom: 15px; } .process-parent { font-weight: 600; background-color: #f9f9fa; } .process-parent:hover { background-color: #fff; } .process-subitem { margin-left: 40px; display: flex; flex-direction: column; gap: 15px; position: relative; } .process-subitem::before { content: ""; position: absolute; top: -15px; left: -20px; height: calc(100% + 30px); width: 2px; background: linear-gradient(to bottom, #c8202d, #ff9f43); background-size: 100% 200%; animation: gradientFlow 3s linear infinite; border-radius: 2px; } .process-subitem .process-item { position: relative; } .process-subitem .process-item::after { content: ""; position: absolute; top: 50%; left: -20px; width: 16px; height: 2px; background-color: #ff9f43; background: linear-gradient(to right, rgba(200, 32, 45, 0.7), #ff9f43); } /* Number and step styling */ .step-number { font-weight: 600; color: #c8202d; margin-right: 10px; } /* Make sure the process sections are properly spaced */ .process-section:last-child { margin-bottom: 0; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes gradientFlow { 0% { background-position: 0% 200%; } 100% { background-position: 0% 0%; } } /* Responsive Styles */ @media (max-width: 1024px) { .process-items { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } @media (max-width: 768px) { .apple-quality-wrapper { padding: 40px 15px; } .apple-quality-process { padding: 40px 25px; border-radius: 16px; } .quality-header { margin-bottom: 50px; } .quality-header h1 { font-size: 36px; margin-bottom: 16px; } .quality-header p { font-size: 16px; max-width: 90%; } .section-header { padding: 10px 24px; font-size: 18px; min-width: 140px; margin-bottom: 25px; } .process-items { grid-template-columns: 1fr; gap: 16px; } .process-item { padding: 18px 24px; } .process-subitem { margin-left: 30px; } .process-group { gap: 12px; } } @media (max-width: 480px) { .apple-quality-wrapper { padding: 30px 10px; } .apple-quality-process { padding: 30px 20px; border-radius: 12px; } .quality-header h1 { font-size: 28px; } .quality-header p { font-size: 15px; } .section-header { padding: 10px 20px; font-size: 16px; min-width: 120px; margin-bottom: 20px; } .process-item { padding: 16px 20px; font-size: 15px; } .process-subitem { margin-left: 25px; gap: 12px; } .process-subitem::before { left: -15px; } .process-subitem .process-item::after { width: 12px; left: -15px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-d286081 *//* Import Inter font */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* Reset and Base Styles */ .apple-innovation-section { font-family: 'Inter', sans-serif; max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; color: #1d1d1f; background-color: transparent; overflow: hidden; } /* Base wrapper styles */ .section-wrapper { width: 100%; max-width: 1400px; margin: 0 auto; padding: 10px 40px; font-family: 'Inter', sans-serif; color: #1d1d1f; display: block; position: relative; box-sizing: border-box; } /* Hero Image Styles */ .hero-image-container { position: relative; width: 100%; margin-bottom: 52px; border-radius: 24px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); } .hero-image { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .hero-image-container:hover .hero-image { transform: scale(1.02); } .image-caption { font-family: 'Inter', sans-serif; position: absolute; bottom: 20px; right: 20px; background-color: rgba(0, 0, 0, 0.6); color: white; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500; } /* Heading Styles */ .innovation-heading { text-align: center; margin-bottom: 65px; animation: fadeIn 0.8s ease-out; } .innovation-heading h1 { font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } /* Gradient text styling */ .gradient-text { background: linear-gradient(to top, #c79015, #c8202d); background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientAnimation 3s linear infinite; } /* Content Styles */ .innovation-content { background-color: white; border-radius: 24px; padding: 52px 40px; margin-top: 26px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); animation: slideUp 0.8s ease-out; } .intro-paragraph, .challenge-paragraph, .current-paragraph { font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.6; margin-bottom: 24px; color: #4a5568; } .highlight-text { /* Apply gradient animation directly without hover */ background-image: linear-gradient(to top, #c79015, #c8202d); background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientAnimation 3s linear infinite; font-weight: 500; display: inline-block; } /* Company Logo */ .company-logo { display: flex; flex-direction: column; align-items: center; margin-top: 0; } .logo-image { width: 180px; max-width: 180px; height: auto; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes gradientAnimation { 0% { background-position: 0% 100%; } 50% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } } /* Responsive Styles */ @media (max-width: 1024px) { .section-wrapper { padding: 10px 35px; } .innovation-heading h1 { font-size: 40px; } .intro-paragraph, .challenge-paragraph, .current-paragraph { font-size: 17px; line-height: 1.5; } } @media (max-width: 768px) { .apple-innovation-section { padding: 40px 0; } .section-wrapper { padding: 10px 25px; } .innovation-heading h1 { font-size: 36px; } .innovation-content { padding: 39px 30px; } .intro-paragraph, .challenge-paragraph, .current-paragraph { font-size: 16px; line-height: 1.5; } .logo-image { width: 152px; max-width: 152px; } } @media (max-width: 480px) { .apple-innovation-section { padding: 30px 0; } .section-wrapper { padding: 10px 20px; } .innovation-heading h1 { font-size: 28px; } .innovation-content { padding: 26px 20px; } .intro-paragraph, .challenge-paragraph, .current-paragraph { font-size: 15px; line-height: 1.4; } .logo-image { width: 120px; max-width: 120px; } } /* Existing styles */ .apple-innovation-section * { font-family: 'Inter', sans-serif; }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-e903076 */.elementor-9520 .elementor-element.elementor-element-e903076 { --opacity: 1.5; /* ปรับค่า opacity ที่นี่ */ background: linear-gradient(to top right, rgba(77, 0, 3, var(--opacity)), rgba(43, 0, 3, var(--opacity))); }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-bc35c5a *//* ใช้วิธีการโหลดฟอนต์ที่เชื่อถือได้มากขึ้น */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* จำกัดขอบเขตของ CSS ให้อยู่เฉพาะภายใน .contact-section เท่านั้น */ .contact-section { color: #fff; text-align: center; padding: 80px 0; /* ไม่กำหนด font-family ที่นี่ แต่จะกำหนดเฉพาะภายในแต่ละ element */ } .contact-section .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .contact-section .title { font-family: 'Inter', sans-serif; font-size: 3rem; font-weight: 700; color: transparent; margin-bottom: 30px; line-height: 1.2; background: linear-gradient(270deg, #c69214, #d30528, #c69214); background-size: 600% 100%; background-repeat: no-repeat; background-position: 0% 50%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: animateContactGradient 4s ease-in-out infinite; } @keyframes animateContactGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .contact-section .cta-container { background: linear-gradient(to right, #c69214, #d30528); border-radius: 30px; padding: 15px 30px; box-shadow: 0 4px 15px rgba(198, 146, 20, 0.5); /* ทองอมส้มในเงา */ display: inline-block; margin-bottom: 40px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .contact-section .cta-container:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(198, 146, 20, 0.7); /* เงามากขึ้นเมื่อ hover */ } .contact-section .cta-text { font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0; } /* ปรับปรุงการจัดวาง contact details */ .contact-section .contact-details { display: flex; justify-content: center; align-items: flex-start; margin-top: 50px; gap: 60px; flex-wrap: wrap; } .contact-section .contact-info { display: flex; flex-direction: column; gap: 20px; text-align: left; min-width: 250px; } .contact-section .contact-info .info-item { display: flex; align-items: center; gap: 15px; padding: 10px; background-color: rgba(0, 0, 0, 0.2); border-radius: 10px; transition: background-color 0.3s ease; font-family: 'Inter', sans-serif; } .contact-section .contact-info .info-item:hover { background-color: rgba(0, 0, 0, 0.4); } .contact-section .contact-info img { width: 24px; height: 24px; object-fit: contain; } /* ปรับปรุงการจัดวาง QR codes */ .contact-section .qr-codes { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; } .contact-section .qr-code { text-align: center; background-color: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; transition: transform 0.3s ease; font-family: 'Inter', sans-serif; } .contact-section .qr-code:hover { transform: translateY(-5px); } .contact-section .qr-code img { width: 120px; height: 120px; margin-bottom: 10px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.2); } .contact-section .qr-code p { font-weight: 500; margin: 0; } /* ปรับปรุง footer */ .contact-section .footer { margin-top: 70px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-transform: uppercase; } .contact-section .company-name { font-family: 'Inter', sans-serif; font-size: 1.8rem; font-weight: 700; color: #FFA500; margin: 0; letter-spacing: 1px; } .contact-section .established { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.7); margin: 10px 0 0 0; letter-spacing: 2px; } /* Responsive Design - ปรับปรุงให้ดีขึ้น */ @media (max-width: 1024px) { .contact-section .contact-details { gap: 40px; } .contact-section .title { font-size: 2.5rem; } .contact-section .cta-text { font-size: 1.3rem; } .contact-section .qr-code img { width: 100px; height: 100px; } } @media (max-width: 768px) { .contact-section { padding: 60px 0; } .contact-section .contact-details { flex-direction: column; align-items: center; gap: 40px; } .contact-section .contact-info { width: 100%; max-width: 400px; } .contact-section .title { font-size: 2rem; } .contact-section .cta-container { padding: 12px 25px; } .contact-section .cta-text { font-size: 1.1rem; } } @media (max-width: 480px) { .contact-section .title { font-size: 1.7rem; } .contact-section .qr-codes { flex-direction: column; gap: 20px; } .contact-section .contact-info .info-item { padding: 8px; } .contact-section .company-name { font-size: 1.5rem; } .contact-section .established { font-size: 0.9rem; } } /* ปรับสีข้อความ "WhatsApp" และ "Social Media" */ .contact-section .qr-code p { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1rem; color: #fff; /* สีขาว */ margin-top: 10px; transition: color 0.3s ease; } .contact-section .qr-code:hover p { color: #d30528; /* สีแดงเข้มเมื่อ hover */ } /* เพิ่มสไตล์สำหรับอีเมลและเบอร์โทรศัพท์ */ .contact-section .contact-info a { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; text-decoration: none; color: #fff; /* สีขาว */ transition: color 0.3s ease; } .contact-section .contact-info a:hover { color: #d30528; /* สีแดงเมื่อ hover */ } /* Inquiry Section - แบบเรียบง่าย */ .contact-section .inquiry-section { margin-top: 40px; padding: 20px 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); } .contact-section .inquiry-description { font-family: 'Inter', sans-serif; font-size: 1.2rem; font-weight: 500; color: #fff; margin-bottom: 15px; } .contact-section .inquiry-link { font-family: 'Inter', sans-serif; /* ฟอนต์เหมือนกับ inquiry-description */ font-size: 1.2rem; /* ขนาดฟอนต์เท่ากัน */ font-weight: 600; text-decoration: none; color: #FFA500; transition: color 0.3s ease; display: inline-block; border-bottom: 1px solid transparent; padding-bottom: 2px; } .contact-section .inquiry-link:hover { color: #d30528; border-bottom-color: #d30528; } /* Responsive adjustments */ @media (max-width: 768px) { .contact-section .inquiry-section { margin-top: 30px; padding: 15px 0; } .contact-section .inquiry-description { font-size: 1.1rem; } .contact-section .inquiry-link { font-size: 1.1rem; /* ขนาดฟอนต์ของลิงค์เล็กลงเมื่อหน้าจอเล็กลง */ } } @media (max-width: 480px) { .contact-section .inquiry-description { font-size: 1rem; } .contact-section .inquiry-link { font-size: 1rem; /* ขนาดฟอนต์เท่ากัน */ } }/* End custom CSS */ /* Start custom CSS for section, class: .elementor-element-6c0aa36 */.elementor-9520 .elementor-element.elementor-element-6c0aa36 { --opacity: 1.5; /* ปรับค่า opacity ที่นี่ */ background: linear-gradient(to top right, rgba(77, 0, 3, var(--opacity)), rgba(43, 0, 3, var(--opacity))); }/* End custom CSS */