.elementor-549 .elementor-element.elementor-element-8d0526d{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-118e7ed{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-bd2e645{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-549 .elementor-element.elementor-element-12ee648{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-549 .elementor-element.elementor-element-bc03e66 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-549 .elementor-element.elementor-element-7be9097{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-549 .elementor-element.elementor-element-83783db{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-d5bc5f6{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-549 .elementor-element.elementor-element-04386f9{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-d949193{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-fe15467{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-c5f7583{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-4b1f48b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-434fc02{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-4182c54{--display:flex;}.elementor-549 .elementor-element.elementor-element-6e619b1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-8988010{--display:flex;}.elementor-549 .elementor-element.elementor-element-36830a3{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-ec75e04{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-f6e75a9{--display:flex;}.elementor-549 .elementor-element.elementor-element-9a7d450{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-54fa0e4{--display:flex;}.elementor-549 .elementor-element.elementor-element-8c000cf{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-554ba09{--display:flex;}.elementor-549 .elementor-element.elementor-element-c0e8c4a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-157c9ed{--display:flex;}.elementor-549 .elementor-element.elementor-element-a181178{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-549 .elementor-element.elementor-element-79aa1fd{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-34f1a20{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-a783134{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-4bf6a90{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-d76c4e1{--display:flex;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-d87f587{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-b3c664a{--display:flex;}.elementor-549 .elementor-element.elementor-element-617efdb{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:00px;--padding-bottom:00px;--padding-left:00px;--padding-right:00px;}.elementor-549 .elementor-element.elementor-element-7e7c80b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-549 .elementor-element.elementor-element-b508d9e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-440aff7.elementor-element{--align-self:center;}.elementor-549 .elementor-element.elementor-element-f1d961b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-885c098{--display:flex;}.elementor-549 .elementor-element.elementor-element-5c3f2d3{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-af15610{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-549 .elementor-element.elementor-element-63bb5ee{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-e71b8f8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-d0068cb{--display:flex;}.elementor-549 .elementor-element.elementor-element-e9afa20{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-bd56b50{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-549 .elementor-element.elementor-element-9671344{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-535b45a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-fbdf3e3{--display:flex;}.elementor-549 .elementor-element.elementor-element-50acf1e{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-14fe9e5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-549 .elementor-element.elementor-element-e51df01{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-31c217b{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-e0c8baf{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-f2d9eeb{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-5e159f1{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-17256f3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-7cdd986{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-c2cd731{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-b6b6c4d{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-95f1eb6{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-4176897{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-d8ed05b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-10ae901{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-c36c325{--display:flex;}.elementor-549 .elementor-element.elementor-element-193ab69{--display:flex;}.elementor-549 .elementor-element.elementor-element-462375f{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-f6550f9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-d166b02{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-4ea3a4c{--display:flex;}.elementor-549 .elementor-element.elementor-element-725ff51{--display:flex;}.elementor-549 .elementor-element.elementor-element-5963c0f{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-35ea9f0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-f266ed6{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-3f18421{--display:flex;}.elementor-549 .elementor-element.elementor-element-e2d4177{--display:flex;}.elementor-549 .elementor-element.elementor-element-508517f{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-3fcd2b2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-e23b646{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-51430ba{--display:flex;}.elementor-549 .elementor-element.elementor-element-1d37231{--display:flex;}.elementor-549 .elementor-element.elementor-element-3a87ed5{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-df30295{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-ab9545b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-ededf32{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-c2f0f95{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-5b7e1db{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-2448ce4{--display:flex;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-cdc2869{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-d6fd06c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-8a8fa9a{--display:flex;}.elementor-549 .elementor-element.elementor-element-6f59d54{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-549 .elementor-element.elementor-element-39f83d1{--display:flex;}.elementor-549 .elementor-element.elementor-element-c95976a{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-de30d82{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-549 .elementor-element.elementor-element-73259de{--display:flex;}.elementor-549 .elementor-element.elementor-element-4d1f20a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-549 .elementor-element.elementor-element-525438a{--display:flex;}.elementor-549 .elementor-element.elementor-element-6f5e01d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-549 .elementor-element.elementor-element-3f1e01f{--display:flex;}.elementor-549 .elementor-element.elementor-element-e6cafe3{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-397ec28{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;}.elementor-549 .elementor-element.elementor-element-b46634d.elementor-element{--align-self:center;}.elementor-549 .elementor-element.elementor-element-b46634d{text-align:center;}.elementor-549 .elementor-element.elementor-element-99e4f05{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-2e7be84{--display:flex;}.elementor-549 .elementor-element.elementor-element-4b874c9{--display:flex;}.elementor-549 .elementor-element.elementor-element-37ebcac{--display:flex;}.elementor-549 .elementor-element.elementor-element-5ea5de0{--display:flex;}.elementor-549 .elementor-element.elementor-element-460836b{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-90c49ea{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-3c788ac{--display:flex;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-910f1b6{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-51e1c32{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;}.elementor-549 .elementor-element.elementor-element-3d348df{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-549 .elementor-element.elementor-element-44d5ac3{--display:flex;}.elementor-549 .elementor-element.elementor-element-6f83b04{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-6949244{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-60368dd{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-549 .elementor-element.elementor-element-9e7f589{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-60277f7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-3199304{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-85bee06{--display:flex;}.elementor-549 .elementor-element.elementor-element-33de88f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-7a3a436{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-328b691{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-549 .elementor-element.elementor-element-83ac84a{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-b4e42aa{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-2476505{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-8847e6b{--display:flex;}.elementor-549 .elementor-element.elementor-element-9cf4e1e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-39811f6{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-bd93f77{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-549 .elementor-element.elementor-element-3f5a061{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-f0149f7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-b6a1fb8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-0cb91ff{--display:flex;}.elementor-549 .elementor-element.elementor-element-4a7e6c8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-675d42c{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-ae61991{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-549 .elementor-element.elementor-element-5be5a32{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-484e424{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-4ae7926{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-d7e5ba0{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-283911d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:wrap;}.elementor-549 .elementor-element.elementor-element-182c661{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-3ac06ea{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-35d750b{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-e4163df{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-e2e2218{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-ec6edbb{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-549 .elementor-element.elementor-element-4f2d273{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-7e41868{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-53466c0{--display:flex;}.elementor-549 .elementor-element.elementor-element-9d75d53{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-5d60928{--display:flex;}.elementor-549 .elementor-element.elementor-element-ac8c7f7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-2e463ec{--display:flex;}.elementor-549 .elementor-element.elementor-element-7f404ad{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-13bbc29{--display:flex;}.elementor-549 .elementor-element.elementor-element-e49401c{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-e312c41{--display:flex;}.elementor-549 .elementor-element.elementor-element-3ad2e78{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-db03ef8{--display:flex;}.elementor-549 .elementor-element.elementor-element-4e00eff{--display:flex;}.elementor-549 .elementor-element.elementor-element-b2c0322{--display:flex;}.elementor-549 .elementor-element.elementor-element-18566b3{--display:flex;}.elementor-549 .elementor-element.elementor-element-96d88ab{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-197263f{--display:flex;}.elementor-549 .elementor-element.elementor-element-552bf0b{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-7e5214c{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-f7f8043{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-7b2701f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-c626eba{--display:flex;}.elementor-549 .elementor-element.elementor-element-ec5ec6a{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-a1d0b16{--display:flex;}.elementor-549 .elementor-element.elementor-element-33a4ce7{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-336b7ed{--display:flex;}.elementor-549 .elementor-element.elementor-element-18d4690{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-3c6fc8a{--display:flex;}.elementor-549 .elementor-element.elementor-element-25244bc{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-073cd80{--display:flex;}.elementor-549 .elementor-element.elementor-element-93707fa{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-1af46b2{--display:flex;}.elementor-549 .elementor-element.elementor-element-91e4394{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-d58e9e9{--n-accordion-title-font-size:1rem;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-icon-size:15px;}.elementor-549 .elementor-element.elementor-element-88cc3b9{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-77bc29a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-8d90674{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-549 .elementor-element.elementor-element-afd038f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-549 .elementor-element.elementor-element-defdac7 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-549 .elementor-element.elementor-element-0eb0d3b .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-549 .elementor-element.elementor-element-a1bf6fd{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-a77f772{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-0c394ba{--display:flex;}.elementor-549 .elementor-element.elementor-element-245751d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-549 .elementor-element.elementor-element-8a23538{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-4bab047{--display:flex;}.elementor-549 .elementor-element.elementor-element-fc35476{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-9e319b8{--display:flex;}.elementor-549 .elementor-element.elementor-element-708c1f2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-2726602{--display:flex;}.elementor-549 .elementor-element.elementor-element-4419af6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-549 .elementor-element.elementor-element-365413d{--display:flex;}.elementor-549 .elementor-element.elementor-element-fe73d46{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-549 .elementor-element.elementor-element-99e4f05{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-549 .elementor-element.elementor-element-99e4f05{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-8d0526d *//* ========================================================= PALUM AUTOMOTIVE PAGE SECTION 01 — AUTOMOTIVE HERO Brand Color: #FE6800 ========================================================= */ /* ========================================================= 01. SECTION BASE ========================================================= */ .palum-auto-hero { --palum-orange: #FE6800; --palum-orange-hover: #FF7918; --palum-dark: #0A1017; --palum-dark-2: #0F1822; --palum-dark-3: #111B26; --palum-white: #FFFFFF; --palum-muted: rgba(255, 255, 255, 0.64); --palum-line: rgba(255, 255, 255, 0.10); position: relative; width: 100% !important; min-height: 760px; overflow: hidden; padding: 74px 42px 58px !important; background: radial-gradient( circle at 18% 18%, rgba(254, 104, 0, 0.11) 0%, rgba(254, 104, 0, 0.04) 20%, rgba(254, 104, 0, 0) 42% ), linear-gradient( 135deg, #0A1017 0%, #0F1822 58%, #111B26 100% ) !important; isolation: isolate; } /* ========================================================= 02. TECHNICAL GRID ========================================================= */ .palum-auto-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(255, 255, 255, 0.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px ); background-size: 72px 72px; pointer-events: none; } /* decorative circle */ .palum-auto-hero::after { content: ""; position: absolute; width: 620px; height: 620px; left: -390px; bottom: -390px; z-index: 0; border: 1px solid rgba(254, 104, 0, 0.11); border-radius: 50%; pointer-events: none; } /* ========================================================= 03. INNER ========================================================= */ .palum-auto-hero .palum-auto-hero-inner { position: relative; z-index: 2; width: 100% !important; max-width: 1600px !important; min-height: 620px; margin: 0 auto !important; display: grid !important; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important; gap: 74px !important; align-items: center !important; } /* ========================================================= 04. LEFT CONTENT ========================================================= */ .palum-auto-hero .palum-auto-hero-content { width: 100% !important; max-width: 700px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= 05. EYEBROW ========================================================= */ .palum-auto-hero .palum-auto-hero-eyebrow { position: relative; width: auto !important; margin: 0 0 23px !important; padding-left: 38px !important; } .palum-auto-hero .palum-auto-hero-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 2px; background: var(--palum-orange); transform: translateY(-50%); } .palum-auto-hero .palum-auto-hero-eyebrow .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 1.9px !important; text-transform: uppercase !important; } /* ========================================================= 06. H1 ========================================================= */ .palum-auto-hero .palum-auto-hero-title { width: 100% !important; max-width: 700px !important; margin: 0 0 27px !important; } .palum-auto-hero .palum-auto-hero-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: clamp(52px, 4.7vw, 76px) !important; line-height: 0.99 !important; font-weight: 700 !important; letter-spacing: -2.8px !important; } .palum-auto-hero .palum-auto-hero-title .elementor-heading-title span { color: var(--palum-orange) !important; } /* ========================================================= 07. DESCRIPTION ========================================================= */ .palum-auto-hero .palum-auto-hero-text { width: 100% !important; max-width: 650px !important; margin: 0 0 35px !important; } .palum-auto-hero .palum-auto-hero-text, .palum-auto-hero .palum-auto-hero-text p, .palum-auto-hero .palum-auto-hero-text span { color: var(--palum-muted) !important; font-size: 17px !important; line-height: 1.74 !important; font-weight: 400 !important; } .palum-auto-hero .palum-auto-hero-text p { margin: 0 !important; } /* ========================================================= 08. ACTIONS ========================================================= */ .palum-auto-hero .palum-auto-hero-actions { width: auto !important; margin: 0 0 39px !important; display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 13px !important; } /* ========================================================= 09. COMMON BUTTON ========================================================= */ .palum-auto-hero .palum-auto-hero-primary .elementor-button, .palum-auto-hero .palum-auto-hero-secondary .elementor-button { min-height: 52px !important; padding: 0 23px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-radius: 5px !important; font-size: 13.5px !important; line-height: 1 !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: none !important; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; } /* PRIMARY */ .palum-auto-hero .palum-auto-hero-primary .elementor-button { color: #FFFFFF !important; background: var(--palum-orange) !important; border: 1px solid var(--palum-orange) !important; box-shadow: 0 12px 30px rgba(254, 104, 0, 0.16) !important; } .palum-auto-hero .palum-auto-hero-primary .elementor-button:hover { background: var(--palum-orange-hover) !important; border-color: var(--palum-orange-hover) !important; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(254, 104, 0, 0.23) !important; } /* SECONDARY */ .palum-auto-hero .palum-auto-hero-secondary .elementor-button { color: #FFFFFF !important; background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(255, 255, 255, 0.17) !important; } .palum-auto-hero .palum-auto-hero-secondary .elementor-button:hover { background: rgba(255, 255, 255, 0.075) !important; border-color: rgba(255, 255, 255, 0.30) !important; transform: translateY(-2px); } /* BUTTON ICON */ .palum-auto-hero .elementor-button-icon { margin: 0 !important; display: flex !important; align-items: center !important; transition: transform 0.25s ease !important; } .palum-auto-hero .elementor-button:hover .elementor-button-icon { transform: translateX(4px); } .palum-auto-hero .elementor-button-icon svg { width: 14px !important; height: 14px !important; fill: currentColor !important; } /* ========================================================= 10. TAGS ========================================================= */ .palum-auto-hero .palum-auto-hero-tags { width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; } /* ========================================================= 11. TAG ITEM ========================================================= */ .palum-auto-hero .palum-auto-hero-tag { position: relative; width: auto !important; min-height: 34px !important; padding: 0 14px 0 28px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; border: 1px solid rgba(255, 255, 255, 0.095) !important; border-radius: 4px !important; background: rgba(255, 255, 255, 0.025) !important; } /* orange dot */ .palum-auto-hero .palum-auto-hero-tag::before { content: ""; position: absolute; left: 13px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--palum-orange); box-shadow: 0 0 0 4px rgba(254, 104, 0, 0.08); transform: translateY(-50%); } .palum-auto-hero .palum-auto-hero-tag .elementor-heading-title, .palum-auto-hero .palum-auto-hero-tag p, .palum-auto-hero .palum-auto-hero-tag span { margin: 0 !important; color: rgba(255, 255, 255, 0.60) !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: 0.2px !important; } /* ========================================================= 12. RIGHT VISUAL ========================================================= */ .palum-auto-hero .palum-auto-hero-visual { position: relative !important; width: 100% !important; min-height: 590px !important; overflow: visible !important; } /* subtle right glow */ .palum-auto-hero .palum-auto-hero-visual::before { content: ""; position: absolute; left: 44%; top: 36%; width: 520px; height: 360px; background: radial-gradient( ellipse at center, rgba(254, 104, 0, 0.10) 0%, rgba(254, 104, 0, 0.035) 34%, rgba(254, 104, 0, 0) 72% ); transform: translate(-50%, -50%); pointer-events: none; } /* ========================================================= 13. MAIN IMAGE WRAPPER ========================================================= */ .palum-auto-hero .palum-auto-hero-main { position: absolute !important; left: 5% !important; top: 0 !important; width: 84% !important; height: 520px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 10px !important; background: #17222D !important; box-shadow: 0 34px 80px rgba(0, 0, 0, 0.28); z-index: 1; } /* ========================================================= 14. MAIN IMAGE ========================================================= */ .palum-auto-hero .palum-auto-hero-main-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; } .palum-auto-hero .palum-auto-hero-main-image .elementor-widget-container { width: 100% !important; height: 100% !important; } .palum-auto-hero .palum-auto-hero-main-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; filter: saturate(0.88) contrast(1.04) brightness(0.82); } /* image dark overlay */ .palum-auto-hero .palum-auto-hero-main::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(6, 10, 15, 0.04) 0%, rgba(6, 10, 15, 0.10) 55%, rgba(6, 10, 15, 0.35) 100% ); pointer-events: none; } /* ========================================================= 15. MAIN IMAGE LABEL ========================================================= */ .palum-auto-hero .palum-auto-hero-image-label { position: absolute !important; left: 22px !important; top: 22px !important; width: auto !important; z-index: 3; padding: 8px 11px !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 4px !important; background: rgba(11, 17, 24, 0.72) !important; backdrop-filter: blur(8px); } .palum-auto-hero .palum-auto-hero-image-label .elementor-heading-title { margin: 0 !important; color: rgba(255, 255, 255, 0.74) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; } /* ========================================================= 16. SMALL IMAGE WRAPPER ========================================================= */ .palum-auto-hero .palum-auto-hero-small { position: absolute !important; left: 0 !important; bottom: 10px !important; width: 255px !important; height: 175px !important; z-index: 4; overflow: hidden !important; border: 5px solid #0F1822 !important; border-radius: 8px !important; background: #17222D !important; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.32); } /* ========================================================= 17. SMALL IMAGE ========================================================= */ .palum-auto-hero .palum-auto-hero-small-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .palum-auto-hero .palum-auto-hero-small-image .elementor-widget-container { width: 100% !important; height: 100% !important; } .palum-auto-hero .palum-auto-hero-small-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; filter: brightness(0.82) contrast(1.05); } /* small image overlay */ .palum-auto-hero .palum-auto-hero-small::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(8, 12, 18, 0.02), rgba(8, 12, 18, 0.40) ); pointer-events: none; } /* ========================================================= 18. SMALL LABEL ========================================================= */ .palum-auto-hero .palum-auto-hero-small-label { position: absolute !important; left: 16px !important; bottom: 14px !important; width: auto !important; z-index: 3; } .palum-auto-hero .palum-auto-hero-small-label .elementor-heading-title { margin: 0 !important; color: rgba(255, 255, 255, 0.76) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; } /* ========================================================= 19. ENGINEERING CARD ========================================================= */ .palum-auto-hero .palum-auto-hero-engineering { position: absolute !important; right: 0 !important; bottom: 0 !important; z-index: 5; width: 300px !important; padding: 22px 22px 21px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 8px !important; background: rgba(13, 20, 28, 0.91) !important; backdrop-filter: blur(12px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); } /* ========================================================= 20. ENGINEERING LABEL ========================================================= */ .palum-auto-hero .palum-auto-hero-engineering-label { width: auto !important; margin: 0 0 9px !important; } .palum-auto-hero .palum-auto-hero-engineering-label .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 1.3px !important; text-transform: uppercase !important; } /* ========================================================= 21. ENGINEERING TITLE ========================================================= */ .palum-auto-hero .palum-auto-hero-engineering-title { width: 100% !important; margin: 0 0 14px !important; } .palum-auto-hero .palum-auto-hero-engineering-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: 17px !important; line-height: 1.35 !important; font-weight: 700 !important; } /* ========================================================= 22. ENGINEERING LIST ========================================================= */ .palum-auto-hero .palum-auto-hero-engineering-list { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 9px !important; } /* ========================================================= 23. ENGINEERING ITEM ========================================================= */ .palum-auto-hero .palum-auto-hero-engineering-item { position: relative; width: 100% !important; padding-left: 15px !important; } .palum-auto-hero .palum-auto-hero-engineering-item::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--palum-orange); } .palum-auto-hero .palum-auto-hero-engineering-item .elementor-heading-title, .palum-auto-hero .palum-auto-hero-engineering-item p, .palum-auto-hero .palum-auto-hero-engineering-item span { margin: 0 !important; color: rgba(255, 255, 255, 0.55) !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 500 !important; } /* ========================================================= 24. SIDE LABEL ========================================================= */ .palum-auto-hero .palum-auto-hero-side-label { position: absolute !important; right: 0 !important; top: 48px !important; width: auto !important; z-index: 4; writing-mode: vertical-rl; text-orientation: mixed; } .palum-auto-hero .palum-auto-hero-side-label .elementor-heading-title { margin: 0 !important; color: rgba(255, 255, 255, 0.20) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; } /* ========================================================= 25. ELEMENTOR CLEANUP ========================================================= */ .palum-auto-hero .elementor-widget, .palum-auto-hero .elementor-widget-container { margin-bottom: 0 !important; } .palum-auto-hero .palum-auto-hero-inner, .palum-auto-hero .palum-auto-hero-content, .palum-auto-hero .palum-auto-hero-visual { row-gap: 0 !important; } /* ========================================================= 26. LARGE DESKTOP ========================================================= */ @media (min-width: 1600px) { .palum-auto-hero { padding: 80px 52px 64px !important; } .palum-auto-hero .palum-auto-hero-inner { max-width: 1600px !important; gap: 82px !important; } .palum-auto-hero .palum-auto-hero-visual { min-height: 610px !important; } .palum-auto-hero .palum-auto-hero-main { height: 540px !important; } } /* ========================================================= 27. MEDIUM DESKTOP ========================================================= */ @media (min-width: 1101px) and (max-width: 1399px) { .palum-auto-hero { min-height: 720px; padding: 68px 28px 52px !important; } .palum-auto-hero .palum-auto-hero-inner { gap: 46px !important; } .palum-auto-hero .palum-auto-hero-title .elementor-heading-title { font-size: clamp(46px, 4.7vw, 62px) !important; } .palum-auto-hero .palum-auto-hero-main { width: 82% !important; height: 485px !important; } .palum-auto-hero .palum-auto-hero-small { width: 220px !important; height: 150px !important; } .palum-auto-hero .palum-auto-hero-engineering { width: 270px !important; padding: 20px !important; } } /* ========================================================= 28. TABLET ========================================================= */ @media (max-width: 1100px) { .palum-auto-hero { min-height: auto; padding: 82px 30px 70px !important; } .palum-auto-hero .palum-auto-hero-inner { min-height: 0; grid-template-columns: 1fr !important; gap: 58px !important; } .palum-auto-hero .palum-auto-hero-content { max-width: 820px !important; } .palum-auto-hero .palum-auto-hero-title { max-width: 850px !important; } .palum-auto-hero .palum-auto-hero-title .elementor-heading-title { font-size: clamp(50px, 7vw, 68px) !important; } .palum-auto-hero .palum-auto-hero-text { max-width: 760px !important; } .palum-auto-hero .palum-auto-hero-visual { min-height: 560px !important; } .palum-auto-hero .palum-auto-hero-main { left: 7% !important; width: 82% !important; } } /* ========================================================= 29. MOBILE ========================================================= */ @media (max-width: 767px) { .palum-auto-hero { min-height: auto; padding: 68px 20px 58px !important; } .palum-auto-hero .palum-auto-hero-inner { gap: 46px !important; } /* LEFT */ .palum-auto-hero .palum-auto-hero-eyebrow { margin-bottom: 18px !important; padding-left: 31px !important; } .palum-auto-hero .palum-auto-hero-eyebrow::before { width: 20px; } .palum-auto-hero .palum-auto-hero-eyebrow .elementor-heading-title { font-size: 10.5px !important; letter-spacing: 1.3px !important; } .palum-auto-hero .palum-auto-hero-title { margin-bottom: 22px !important; } .palum-auto-hero .palum-auto-hero-title .elementor-heading-title { font-size: 41px !important; line-height: 1.04 !important; letter-spacing: -1.5px !important; } .palum-auto-hero .palum-auto-hero-text { margin-bottom: 29px !important; } .palum-auto-hero .palum-auto-hero-text, .palum-auto-hero .palum-auto-hero-text p { font-size: 15.5px !important; line-height: 1.66 !important; } /* BUTTONS */ .palum-auto-hero .palum-auto-hero-actions { width: 100% !important; flex-direction: column !important; align-items: stretch !important; margin-bottom: 28px !important; gap: 10px !important; } .palum-auto-hero .palum-auto-hero-primary, .palum-auto-hero .palum-auto-hero-secondary { width: 100% !important; } .palum-auto-hero .palum-auto-hero-primary .elementor-button, .palum-auto-hero .palum-auto-hero-secondary .elementor-button { width: 100% !important; } /* TAGS */ .palum-auto-hero .palum-auto-hero-tags { gap: 8px !important; } .palum-auto-hero .palum-auto-hero-tag { min-height: 32px !important; padding: 0 12px 0 26px !important; } .palum-auto-hero .palum-auto-hero-tag::before { left: 12px; } .palum-auto-hero .palum-auto-hero-tag .elementor-heading-title { font-size: 10px !important; } /* VISUAL */ .palum-auto-hero .palum-auto-hero-visual { min-height: 480px !important; } .palum-auto-hero .palum-auto-hero-main { left: 0 !important; width: 100% !important; height: 400px !important; } .palum-auto-hero .palum-auto-hero-image-label { left: 14px !important; top: 14px !important; padding: 7px 9px !important; } .palum-auto-hero .palum-auto-hero-image-label .elementor-heading-title { font-size: 8px !important; } /* SMALL */ .palum-auto-hero .palum-auto-hero-small { width: 155px !important; height: 110px !important; left: 10px !important; bottom: 8px !important; border-width: 4px !important; } .palum-auto-hero .palum-auto-hero-small-label { left: 9px !important; bottom: 9px !important; } .palum-auto-hero .palum-auto-hero-small-label .elementor-heading-title { font-size: 7px !important; letter-spacing: 0.8px !important; } /* ENGINEERING */ .palum-auto-hero .palum-auto-hero-engineering { width: 235px !important; right: 6px !important; bottom: 0 !important; padding: 17px !important; } .palum-auto-hero .palum-auto-hero-engineering-title .elementor-heading-title { font-size: 14px !important; } .palum-auto-hero .palum-auto-hero-engineering-item .elementor-heading-title, .palum-auto-hero .palum-auto-hero-engineering-item p { font-size: 9.5px !important; } /* SIDE LABEL */ .palum-auto-hero .palum-auto-hero-side-label { display: none !important; } } /* ========================================================= 30. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .palum-auto-hero { padding-left: 18px !important; padding-right: 18px !important; } .palum-auto-hero .palum-auto-hero-title .elementor-heading-title { font-size: 36px !important; line-height: 1.06 !important; } .palum-auto-hero .palum-auto-hero-visual { min-height: 450px !important; } .palum-auto-hero .palum-auto-hero-main { height: 370px !important; } .palum-auto-hero .palum-auto-hero-engineering { width: 215px !important; } .palum-auto-hero .palum-auto-hero-engineering-title .elementor-heading-title { font-size: 13px !important; } } /* ========================================================= 31. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .palum-auto-hero *, .palum-auto-hero *::before, .palum-auto-hero *::after { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c5f7583 *//* ========================================================= PALUM AUTOMOTIVE PAGE SECTION 02 — AUTOMOTIVE MANUFACTURING EXPERTISE Brand Color: #FE6800 ========================================================= */ /* ========================================================= 01. SECTION BASE ========================================================= */ .palum-auto-expertise { --palum-orange: #FE6800; --palum-heading: #111722; --palum-text: #66717E; --palum-light: #F7F8FA; --palum-border: #E5E9ED; --palum-dark: #111922; position: relative; width: 100% !important; overflow: hidden; padding: 112px 42px 118px !important; background: radial-gradient( circle at 4% 8%, rgba(254, 104, 0, 0.045) 0%, rgba(254, 104, 0, 0) 24% ), #FFFFFF !important; isolation: isolate; } /* ========================================================= 02. DECORATIVE ELEMENTS ========================================================= */ /* top-right technical corner */ .palum-auto-expertise::before { content: ""; position: absolute; right: 5%; top: 78px; width: 110px; height: 110px; border-top: 1px solid rgba(17, 23, 34, 0.055); border-right: 1px solid rgba(17, 23, 34, 0.055); pointer-events: none; z-index: 0; } /* bottom-left circle */ .palum-auto-expertise::after { content: ""; position: absolute; width: 420px; height: 420px; left: -280px; bottom: -280px; border: 1px solid rgba(254, 104, 0, 0.09); border-radius: 50%; pointer-events: none; z-index: 0; } /* ========================================================= 03. INNER ========================================================= */ .palum-auto-expertise .palum-auto-expertise-inner { position: relative; z-index: 2; width: 100% !important; max-width: 1600px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr) !important; gap: 96px !important; align-items: center !important; } /* ========================================================= 04. LEFT CONTENT ========================================================= */ .palum-auto-expertise .palum-auto-expertise-content { width: 100% !important; max-width: 650px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= 05. EYEBROW ========================================================= */ .palum-auto-expertise .palum-auto-expertise-eyebrow { position: relative; width: auto !important; margin: 0 0 18px !important; padding-left: 36px !important; } .palum-auto-expertise .palum-auto-expertise-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 2px; background: var(--palum-orange); transform: translateY(-50%); } .palum-auto-expertise .palum-auto-expertise-eyebrow .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; } /* ========================================================= 06. H2 ========================================================= */ .palum-auto-expertise .palum-auto-expertise-title { width: 100% !important; max-width: 650px !important; margin: 0 0 25px !important; } .palum-auto-expertise .palum-auto-expertise-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: clamp(44px, 3.6vw, 60px) !important; line-height: 1.04 !important; font-weight: 700 !important; letter-spacing: -1.8px !important; } /* ========================================================= 07. MAIN TEXT ========================================================= */ .palum-auto-expertise .palum-auto-expertise-text { width: 100% !important; max-width: 610px !important; margin: 0 0 40px !important; } .palum-auto-expertise .palum-auto-expertise-text, .palum-auto-expertise .palum-auto-expertise-text p, .palum-auto-expertise .palum-auto-expertise-text span { color: var(--palum-text) !important; font-size: 16.5px !important; line-height: 1.75 !important; font-weight: 400 !important; } .palum-auto-expertise .palum-auto-expertise-text p { margin: 0 !important; } /* ========================================================= 08. ENGINEERING NOTE ========================================================= */ .palum-auto-expertise .palum-auto-expertise-note { position: relative; width: 100% !important; max-width: 590px !important; padding: 28px 30px 28px 32px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; overflow: hidden; background: #F7F8FA !important; border: 1px solid var(--palum-border) !important; border-radius: 8px !important; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important; } /* orange accent */ .palum-auto-expertise .palum-auto-expertise-note::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--palum-orange); } .palum-auto-expertise .palum-auto-expertise-note:hover { border-color: rgba(254, 104, 0, 0.22) !important; box-shadow: 0 18px 42px rgba(17, 23, 34, 0.055); transform: translateY(-2px); } /* ========================================================= 09. NOTE LABEL ========================================================= */ .palum-auto-expertise .palum-auto-expertise-note-label { width: auto !important; margin: 0 0 10px !important; } .palum-auto-expertise .palum-auto-expertise-note-label .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 10px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; } /* ========================================================= 10. NOTE TITLE ========================================================= */ .palum-auto-expertise .palum-auto-expertise-note-title { width: 100% !important; max-width: 480px !important; margin: 0 0 10px !important; } .palum-auto-expertise .palum-auto-expertise-note-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: 19px !important; line-height: 1.35 !important; font-weight: 700 !important; } /* ========================================================= 11. NOTE TEXT ========================================================= */ .palum-auto-expertise .palum-auto-expertise-note-text { width: 100% !important; max-width: 500px !important; margin: 0 !important; } .palum-auto-expertise .palum-auto-expertise-note-text, .palum-auto-expertise .palum-auto-expertise-note-text p, .palum-auto-expertise .palum-auto-expertise-note-text span { color: var(--palum-text) !important; font-size: 13.5px !important; line-height: 1.65 !important; font-weight: 400 !important; } .palum-auto-expertise .palum-auto-expertise-note-text p { margin: 0 !important; } /* ========================================================= 12. RIGHT ENGINEERING PANEL ========================================================= */ .palum-auto-expertise .palum-auto-expertise-panel { position: relative; width: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; background: #F7F8FA !important; border: 1px solid var(--palum-border) !important; border-radius: 10px !important; box-shadow: 0 24px 60px rgba(17, 23, 34, 0.055); } /* orange technical top line */ .palum-auto-expertise .palum-auto-expertise-panel::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; z-index: 4; background: linear-gradient( 90deg, var(--palum-orange) 0%, rgba(254, 104, 0, 0.38) 38%, rgba(254, 104, 0, 0) 100% ); } /* ========================================================= 13. PANEL HEADER ========================================================= */ .palum-auto-expertise .palum-auto-expertise-panel-head { width: 100% !important; padding: 28px 32px 24px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; background: rgba(255, 255, 255, 0.42) !important; border-bottom: 1px solid var(--palum-border) !important; } /* ========================================================= 14. PANEL LABEL ========================================================= */ .palum-auto-expertise .palum-auto-expertise-panel-label { width: auto !important; margin: 0 0 7px !important; } .palum-auto-expertise .palum-auto-expertise-panel-label .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 10px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 1.3px !important; text-transform: uppercase !important; } /* ========================================================= 15. PANEL TITLE ========================================================= */ .palum-auto-expertise .palum-auto-expertise-panel-title { width: 100% !important; margin: 0 !important; } .palum-auto-expertise .palum-auto-expertise-panel-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: 20px !important; line-height: 1.35 !important; font-weight: 700 !important; } /* ========================================================= 16. LIST ========================================================= */ .palum-auto-expertise .palum-auto-expertise-list { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } /* ========================================================= 17. ITEM BASE ========================================================= */ .palum-auto-expertise .palum-auto-expertise-item { position: relative; width: 100% !important; min-height: 132px; padding: 28px 32px !important; display: grid !important; grid-template-columns: 72px minmax(0, 1fr) !important; gap: 20px !important; align-items: start !important; background: transparent !important; border-bottom: 1px solid var(--palum-border) !important; transition: background 0.25s ease, padding-left 0.25s ease !important; } /* last item */ .palum-auto-expertise .palum-auto-expertise-item-04 { border-bottom: 0 !important; } /* hover */ .palum-auto-expertise .palum-auto-expertise-item:hover { padding-left: 38px !important; background: #FFFFFF !important; } /* ========================================================= 18. ITEM NUMBER ========================================================= */ .palum-auto-expertise .palum-auto-expertise-number { width: auto !important; margin: 3px 0 0 !important; } .palum-auto-expertise .palum-auto-expertise-number .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 11px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1px !important; } /* ========================================================= 19. ITEM COPY ========================================================= */ .palum-auto-expertise .palum-auto-expertise-item-copy { position: relative; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* technical dot */ .palum-auto-expertise .palum-auto-expertise-item-copy::before { content: ""; position: absolute; left: -22px; top: 7px; width: 6px; height: 6px; border: 1px solid var(--palum-orange); border-radius: 50%; background: rgba(254, 104, 0, 0.20); box-shadow: 0 0 0 4px rgba(254, 104, 0, 0.035); } /* ========================================================= 20. ITEM TITLE ========================================================= */ .palum-auto-expertise .palum-auto-expertise-item-title { width: 100% !important; margin: 0 0 8px !important; } .palum-auto-expertise .palum-auto-expertise-item-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; } /* ========================================================= 21. ITEM TEXT ========================================================= */ .palum-auto-expertise .palum-auto-expertise-item-text { width: 100% !important; max-width: 570px !important; margin: 0 !important; } .palum-auto-expertise .palum-auto-expertise-item-text, .palum-auto-expertise .palum-auto-expertise-item-text p, .palum-auto-expertise .palum-auto-expertise-item-text span { color: var(--palum-text) !important; font-size: 13.5px !important; line-height: 1.65 !important; font-weight: 400 !important; } .palum-auto-expertise .palum-auto-expertise-item-text p { margin: 0 !important; } /* ========================================================= 22. PANEL FOOTER ========================================================= */ .palum-auto-expertise .palum-auto-expertise-panel-footer { width: 100% !important; padding: 18px 32px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; background: var(--palum-dark) !important; } /* ========================================================= 23. FOOTER TEXT ========================================================= */ .palum-auto-expertise .palum-auto-expertise-panel-footer-text { width: auto !important; margin: 0 !important; } .palum-auto-expertise .palum-auto-expertise-panel-footer-text, .palum-auto-expertise .palum-auto-expertise-panel-footer-text p, .palum-auto-expertise .palum-auto-expertise-panel-footer-text span { margin: 0 !important; color: rgba(255, 255, 255, 0.56) !important; font-size: 11px !important; line-height: 1.5 !important; font-weight: 500 !important; } /* ========================================================= 24. FOOTER CODE ========================================================= */ .palum-auto-expertise .palum-auto-expertise-panel-footer-code { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; } .palum-auto-expertise .palum-auto-expertise-panel-footer-code .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; white-space: nowrap !important; } /* ========================================================= 25. ELEMENTOR CLEANUP ========================================================= */ .palum-auto-expertise .elementor-widget, .palum-auto-expertise .elementor-widget-container { margin-bottom: 0 !important; } .palum-auto-expertise .palum-auto-expertise-inner, .palum-auto-expertise .palum-auto-expertise-content, .palum-auto-expertise .palum-auto-expertise-note, .palum-auto-expertise .palum-auto-expertise-panel, .palum-auto-expertise .palum-auto-expertise-panel-head, .palum-auto-expertise .palum-auto-expertise-list, .palum-auto-expertise .palum-auto-expertise-item-copy { row-gap: 0 !important; } /* ========================================================= 26. LARGE DESKTOP ========================================================= */ @media (min-width: 1600px) { .palum-auto-expertise { padding: 120px 52px 126px !important; } .palum-auto-expertise .palum-auto-expertise-inner { max-width: 1600px !important; gap: 104px !important; } .palum-auto-expertise .palum-auto-expertise-item { padding-top: 30px !important; padding-bottom: 30px !important; } } /* ========================================================= 27. MEDIUM DESKTOP ========================================================= */ @media (min-width: 1181px) and (max-width: 1399px) { .palum-auto-expertise { padding: 96px 28px 104px !important; } .palum-auto-expertise .palum-auto-expertise-inner { gap: 58px !important; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important; } .palum-auto-expertise .palum-auto-expertise-title .elementor-heading-title { font-size: clamp(40px, 3.5vw, 50px) !important; } .palum-auto-expertise .palum-auto-expertise-item { grid-template-columns: 60px minmax(0, 1fr) !important; padding: 25px 26px !important; } .palum-auto-expertise .palum-auto-expertise-item:hover { padding-left: 31px !important; } } /* ========================================================= 28. TABLET / NARROW DESKTOP ========================================================= */ @media (max-width: 1180px) { .palum-auto-expertise { padding: 90px 30px 98px !important; } .palum-auto-expertise .palum-auto-expertise-inner { grid-template-columns: 1fr !important; gap: 58px !important; } .palum-auto-expertise .palum-auto-expertise-content { max-width: 800px !important; } .palum-auto-expertise .palum-auto-expertise-title { max-width: 760px !important; } .palum-auto-expertise .palum-auto-expertise-text { max-width: 760px !important; } .palum-auto-expertise .palum-auto-expertise-note { max-width: 680px !important; } } /* ========================================================= 29. MOBILE ========================================================= */ @media (max-width: 767px) { .palum-auto-expertise { padding: 68px 20px 74px !important; } .palum-auto-expertise::before { display: none; } .palum-auto-expertise .palum-auto-expertise-inner { gap: 42px !important; } /* EYEBROW */ .palum-auto-expertise .palum-auto-expertise-eyebrow { margin-bottom: 15px !important; padding-left: 31px !important; } .palum-auto-expertise .palum-auto-expertise-eyebrow::before { width: 20px; } .palum-auto-expertise .palum-auto-expertise-eyebrow .elementor-heading-title { font-size: 11px !important; letter-spacing: 1.2px !important; } /* TITLE */ .palum-auto-expertise .palum-auto-expertise-title { margin-bottom: 21px !important; } .palum-auto-expertise .palum-auto-expertise-title .elementor-heading-title { font-size: 35px !important; line-height: 1.08 !important; letter-spacing: -1px !important; } /* TEXT */ .palum-auto-expertise .palum-auto-expertise-text { margin-bottom: 30px !important; } .palum-auto-expertise .palum-auto-expertise-text, .palum-auto-expertise .palum-auto-expertise-text p { font-size: 15.5px !important; line-height: 1.67 !important; } /* NOTE */ .palum-auto-expertise .palum-auto-expertise-note { padding: 23px 22px 23px 25px !important; } .palum-auto-expertise .palum-auto-expertise-note-title .elementor-heading-title { font-size: 17px !important; } .palum-auto-expertise .palum-auto-expertise-note-text, .palum-auto-expertise .palum-auto-expertise-note-text p { font-size: 13px !important; } /* PANEL HEADER */ .palum-auto-expertise .palum-auto-expertise-panel-head { padding: 23px 20px 20px !important; } .palum-auto-expertise .palum-auto-expertise-panel-title .elementor-heading-title { font-size: 18px !important; } /* ITEMS */ .palum-auto-expertise .palum-auto-expertise-item { min-height: 0; grid-template-columns: 38px minmax(0, 1fr) !important; gap: 13px !important; padding: 23px 20px !important; } .palum-auto-expertise .palum-auto-expertise-item:hover { padding-left: 20px !important; } .palum-auto-expertise .palum-auto-expertise-item-copy::before { display: none; } .palum-auto-expertise .palum-auto-expertise-item-title .elementor-heading-title { font-size: 16px !important; } .palum-auto-expertise .palum-auto-expertise-item-text, .palum-auto-expertise .palum-auto-expertise-item-text p { font-size: 12.5px !important; line-height: 1.60 !important; } /* FOOTER */ .palum-auto-expertise .palum-auto-expertise-panel-footer { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 17px 20px !important; } } /* ========================================================= 30. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .palum-auto-expertise { padding-left: 18px !important; padding-right: 18px !important; } .palum-auto-expertise .palum-auto-expertise-title .elementor-heading-title { font-size: 32px !important; } .palum-auto-expertise .palum-auto-expertise-panel { border-radius: 8px !important; } } /* ========================================================= 31. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .palum-auto-expertise *, .palum-auto-expertise *::before, .palum-auto-expertise *::after { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-79aa1fd *//* ========================================================= PALUM AUTOMOTIVE PAGE SECTION 03 — AUTOMOTIVE PART APPLICATIONS Brand Color: #FE6800 ========================================================= */ /* ========================================================= 01. SECTION BASE ========================================================= */ .palum-auto-parts { --palum-orange: #FE6800; --palum-heading: #111722; --palum-text: #66717E; --palum-light: #F7F8FA; --palum-border: #E5E9ED; --palum-dark: #101823; position: relative; width: 100% !important; overflow: hidden; padding: 112px 42px 120px !important; background: radial-gradient( circle at 96% 8%, rgba(254, 104, 0, 0.045) 0%, rgba(254, 104, 0, 0) 24% ), #F7F8FA !important; isolation: isolate; } /* ========================================================= 02. DECORATIVE ELEMENTS ========================================================= */ .palum-auto-parts::before { content: ""; position: absolute; width: 520px; height: 520px; right: -350px; bottom: -330px; border: 1px solid rgba(254, 104, 0, 0.09); border-radius: 50%; pointer-events: none; z-index: 0; } .palum-auto-parts::after { content: ""; position: absolute; left: 5%; top: 78px; width: 110px; height: 110px; border-left: 1px solid rgba(17, 23, 34, 0.055); border-top: 1px solid rgba(17, 23, 34, 0.055); pointer-events: none; z-index: 0; } /* ========================================================= 03. INNER ========================================================= */ .palum-auto-parts .palum-auto-parts-inner { position: relative; z-index: 2; width: 100% !important; max-width: 1600px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* ========================================================= 04. HEADER ========================================================= */ .palum-auto-parts .palum-auto-parts-head { width: 100% !important; margin: 0 0 62px !important; display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important; gap: 80px !important; align-items: end !important; } /* ========================================================= 05. HEADER LEFT ========================================================= */ .palum-auto-parts .palum-auto-parts-head-left { width: 100% !important; max-width: 820px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= 06. EYEBROW ========================================================= */ .palum-auto-parts .palum-auto-parts-eyebrow { position: relative; width: auto !important; margin: 0 0 18px !important; padding-left: 36px !important; } .palum-auto-parts .palum-auto-parts-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 2px; background: var(--palum-orange); transform: translateY(-50%); } .palum-auto-parts .palum-auto-parts-eyebrow .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; } /* ========================================================= 07. TITLE ========================================================= */ .palum-auto-parts .palum-auto-parts-title { width: 100% !important; max-width: 800px !important; margin: 0 !important; } .palum-auto-parts .palum-auto-parts-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: clamp(44px, 3.6vw, 60px) !important; line-height: 1.04 !important; font-weight: 700 !important; letter-spacing: -1.8px !important; } /* ========================================================= 08. INTRO ========================================================= */ .palum-auto-parts .palum-auto-parts-intro { width: 100% !important; max-width: 620px !important; margin: 0 !important; } .palum-auto-parts .palum-auto-parts-intro, .palum-auto-parts .palum-auto-parts-intro p, .palum-auto-parts .palum-auto-parts-intro span { color: var(--palum-text) !important; font-size: 16.5px !important; line-height: 1.72 !important; font-weight: 400 !important; } .palum-auto-parts .palum-auto-parts-intro p { margin: 0 !important; } /* ========================================================= 09. CARD GRID ========================================================= */ .palum-auto-parts .palum-auto-parts-grid { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px !important; align-items: stretch !important; } /* ========================================================= 10. CARD BASE ========================================================= */ .palum-auto-parts .palum-auto-part-card { position: relative; width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid var(--palum-border) !important; border-radius: 10px !important; box-shadow: 0 18px 50px rgba(17, 23, 34, 0.04); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important; } /* top orange line */ .palum-auto-parts .palum-auto-part-card::before { content: ""; position: absolute; left: 0; top: 0; z-index: 8; width: 0; height: 3px; background: var(--palum-orange); transition: width 0.35s ease; } .palum-auto-parts .palum-auto-part-card:hover { transform: translateY(-4px); border-color: rgba(254, 104, 0, 0.23) !important; box-shadow: 0 26px 60px rgba(17, 23, 34, 0.08); } .palum-auto-parts .palum-auto-part-card:hover::before { width: 100%; } /* ========================================================= 11. IMAGE WRAPPER ========================================================= */ .palum-auto-parts .palum-auto-part-image { position: relative !important; width: 100% !important; height: 290px !important; min-height: 290px !important; overflow: hidden !important; background: #18232D !important; flex: 0 0 auto !important; } /* image overlay */ .palum-auto-parts .palum-auto-part-image::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient( 180deg, rgba(7, 11, 16, 0.02) 0%, rgba(7, 11, 16, 0.08) 58%, rgba(7, 11, 16, 0.34) 100% ); pointer-events: none; } /* ========================================================= 12. IMAGE WIDGET ========================================================= */ .palum-auto-parts .palum-auto-part-image-widget { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 1; } .palum-auto-parts .palum-auto-part-image-widget .elementor-widget-container { width: 100% !important; height: 100% !important; overflow: hidden !important; } .palum-auto-parts .palum-auto-part-image-widget img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; transition: transform 0.55s ease, filter 0.35s ease !important; filter: saturate(0.95) contrast(1.02); } .palum-auto-parts .palum-auto-part-card:hover .palum-auto-part-image-widget img { transform: scale(1.045); filter: saturate(1) contrast(1.03); } /* ========================================================= 13. IMAGE LABEL ========================================================= */ .palum-auto-parts .palum-auto-part-image-label { position: absolute !important; left: 22px !important; top: 22px !important; z-index: 4; width: auto !important; padding: 8px 11px !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 4px !important; background: rgba(10, 16, 23, 0.70) !important; backdrop-filter: blur(8px); } .palum-auto-parts .palum-auto-part-image-label .elementor-heading-title { margin: 0 !important; color: rgba(255, 255, 255, 0.76) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.15px !important; text-transform: uppercase !important; } /* ========================================================= 14. CARD BODY ========================================================= */ .palum-auto-parts .palum-auto-part-body { width: 100% !important; padding: 30px 32px 32px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; flex: 1 1 auto !important; } /* ========================================================= 15. TOP ROW ========================================================= */ .palum-auto-parts .palum-auto-part-top { width: 100% !important; margin: 0 0 18px !important; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) !important; gap: 20px !important; align-items: start !important; } /* ========================================================= 16. NUMBER ========================================================= */ .palum-auto-parts .palum-auto-part-number { width: auto !important; margin: 4px 0 0 !important; } .palum-auto-parts .palum-auto-part-number .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 11px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1px !important; } /* ========================================================= 17. CARD HEADING ========================================================= */ .palum-auto-parts .palum-auto-part-heading { width: 100% !important; margin: 0 !important; } .palum-auto-parts .palum-auto-part-heading .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: 23px !important; line-height: 1.22 !important; font-weight: 700 !important; letter-spacing: -0.4px !important; } /* ========================================================= 18. DESCRIPTION ========================================================= */ .palum-auto-parts .palum-auto-part-description { width: 100% !important; max-width: 630px !important; margin: 0 0 23px !important; } .palum-auto-parts .palum-auto-part-description, .palum-auto-parts .palum-auto-part-description p, .palum-auto-parts .palum-auto-part-description span { color: var(--palum-text) !important; font-size: 13.5px !important; line-height: 1.68 !important; font-weight: 400 !important; } .palum-auto-parts .palum-auto-part-description p { margin: 0 !important; } /* ========================================================= 19. TAG LIST ========================================================= */ .palum-auto-parts .palum-auto-part-list { width: 100% !important; margin-top: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; } /* ========================================================= 20. TAG ========================================================= */ .palum-auto-parts .palum-auto-part-tag { position: relative; width: auto !important; min-height: 30px !important; padding: 0 11px 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; background: #F7F8FA !important; border: 1px solid #E8EBEE !important; border-radius: 4px !important; transition: background 0.22s ease, border-color 0.22s ease !important; } /* tag dot */ .palum-auto-parts .palum-auto-part-tag::before { content: ""; position: absolute; left: 10px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--palum-orange); transform: translateY(-50%); } .palum-auto-parts .palum-auto-part-tag:hover { background: #FFFFFF !important; border-color: rgba(254, 104, 0, 0.22) !important; } /* tag text */ .palum-auto-parts .palum-auto-part-tag .elementor-heading-title, .palum-auto-parts .palum-auto-part-tag p, .palum-auto-parts .palum-auto-part-tag span { margin: 0 !important; color: #58636E !important; font-size: 10.5px !important; line-height: 1 !important; font-weight: 600 !important; } /* ========================================================= 21. INDIVIDUAL CARD IMAGE POSITIONING 根据实际图片后续可以单独微调 ========================================================= */ .palum-auto-parts .palum-auto-part-card-01 .palum-auto-part-image-widget img { object-position: center center !important; } .palum-auto-parts .palum-auto-part-card-02 .palum-auto-part-image-widget img { object-position: center center !important; } .palum-auto-parts .palum-auto-part-card-03 .palum-auto-part-image-widget img { object-position: center center !important; } .palum-auto-parts .palum-auto-part-card-04 .palum-auto-part-image-widget img { object-position: center center !important; } /* ========================================================= 22. BOTTOM NOTE ========================================================= */ .palum-auto-parts .palum-auto-parts-note { position: relative; width: 100% !important; margin: 32px 0 0 !important; padding: 20px 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-top: 1px solid rgba(17, 23, 34, 0.08) !important; text-align: center !important; } /* orange dot */ .palum-auto-parts .palum-auto-parts-note::before { content: ""; width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--palum-orange); } .palum-auto-parts .palum-auto-parts-note, .palum-auto-parts .palum-auto-parts-note p, .palum-auto-parts .palum-auto-parts-note span { margin: 0 !important; color: #7A838C !important; font-size: 11px !important; line-height: 1.55 !important; font-weight: 400 !important; } /* ========================================================= 23. ELEMENTOR CLEANUP ========================================================= */ .palum-auto-parts .elementor-widget, .palum-auto-parts .elementor-widget-container { margin-bottom: 0 !important; } .palum-auto-parts .palum-auto-parts-inner, .palum-auto-parts .palum-auto-parts-head-left, .palum-auto-parts .palum-auto-part-card, .palum-auto-parts .palum-auto-part-body, .palum-auto-parts .palum-auto-part-list { row-gap: 0 !important; } /* ========================================================= 24. LARGE DESKTOP ========================================================= */ @media (min-width: 1600px) { .palum-auto-parts { padding: 120px 52px 128px !important; } .palum-auto-parts .palum-auto-parts-inner { max-width: 1600px !important; } .palum-auto-parts .palum-auto-parts-head { margin-bottom: 66px !important; } .palum-auto-parts .palum-auto-parts-grid { gap: 28px !important; } .palum-auto-parts .palum-auto-part-image { height: 305px !important; min-height: 305px !important; } .palum-auto-parts .palum-auto-part-body { padding: 32px 34px 34px !important; } } /* ========================================================= 25. MEDIUM DESKTOP ========================================================= */ @media (min-width: 1181px) and (max-width: 1399px) { .palum-auto-parts { padding: 96px 28px 104px !important; } .palum-auto-parts .palum-auto-parts-head { gap: 56px !important; margin-bottom: 52px !important; } .palum-auto-parts .palum-auto-parts-title .elementor-heading-title { font-size: clamp(40px, 3.5vw, 50px) !important; } .palum-auto-parts .palum-auto-part-image { height: 260px !important; min-height: 260px !important; } .palum-auto-parts .palum-auto-part-body { padding: 26px !important; } .palum-auto-parts .palum-auto-part-heading .elementor-heading-title { font-size: 21px !important; } } /* ========================================================= 26. TABLET ========================================================= */ @media (max-width: 1180px) { .palum-auto-parts { padding: 90px 30px 98px !important; } .palum-auto-parts .palum-auto-parts-head { grid-template-columns: 1fr !important; gap: 23px !important; margin-bottom: 52px !important; } .palum-auto-parts .palum-auto-parts-intro { max-width: 760px !important; } .palum-auto-parts .palum-auto-parts-grid { gap: 20px !important; } .palum-auto-parts .palum-auto-part-image { height: 250px !important; min-height: 250px !important; } .palum-auto-parts .palum-auto-part-body { padding: 26px !important; } } /* ========================================================= 27. SMALL TABLET ========================================================= */ @media (max-width: 900px) { .palum-auto-parts .palum-auto-parts-grid { grid-template-columns: 1fr !important; gap: 18px !important; } .palum-auto-parts .palum-auto-part-image { height: 300px !important; min-height: 300px !important; } .palum-auto-parts .palum-auto-part-body { min-height: auto !important; } } /* ========================================================= 28. MOBILE ========================================================= */ @media (max-width: 767px) { .palum-auto-parts { padding: 68px 20px 74px !important; } .palum-auto-parts::after { display: none; } /* HEADER */ .palum-auto-parts .palum-auto-parts-head { gap: 18px !important; margin-bottom: 40px !important; } .palum-auto-parts .palum-auto-parts-eyebrow { margin-bottom: 15px !important; padding-left: 31px !important; } .palum-auto-parts .palum-auto-parts-eyebrow::before { width: 20px; } .palum-auto-parts .palum-auto-parts-eyebrow .elementor-heading-title { font-size: 11px !important; letter-spacing: 1.2px !important; } .palum-auto-parts .palum-auto-parts-title .elementor-heading-title { font-size: 35px !important; line-height: 1.08 !important; letter-spacing: -1px !important; } .palum-auto-parts .palum-auto-parts-intro, .palum-auto-parts .palum-auto-parts-intro p { font-size: 15.5px !important; line-height: 1.65 !important; } /* GRID */ .palum-auto-parts .palum-auto-parts-grid { grid-template-columns: 1fr !important; gap: 16px !important; } /* IMAGE */ .palum-auto-parts .palum-auto-part-image { height: 220px !important; min-height: 220px !important; } .palum-auto-parts .palum-auto-part-image-label { left: 15px !important; top: 15px !important; padding: 7px 9px !important; } .palum-auto-parts .palum-auto-part-image-label .elementor-heading-title { font-size: 8px !important; } /* BODY */ .palum-auto-parts .palum-auto-part-body { padding: 23px 20px 24px !important; } .palum-auto-parts .palum-auto-part-top { grid-template-columns: 32px minmax(0, 1fr) !important; gap: 14px !important; margin-bottom: 14px !important; } .palum-auto-parts .palum-auto-part-heading .elementor-heading-title { font-size: 20px !important; } .palum-auto-parts .palum-auto-part-description { margin-bottom: 18px !important; } .palum-auto-parts .palum-auto-part-description, .palum-auto-parts .palum-auto-part-description p { font-size: 12.5px !important; line-height: 1.62 !important; } /* TAGS */ .palum-auto-parts .palum-auto-part-list { gap: 6px !important; } .palum-auto-parts .palum-auto-part-tag { min-height: 28px !important; padding: 0 10px 0 22px !important; } .palum-auto-parts .palum-auto-part-tag::before { left: 9px; } .palum-auto-parts .palum-auto-part-tag .elementor-heading-title, .palum-auto-parts .palum-auto-part-tag p { font-size: 9.5px !important; } /* NOTE */ .palum-auto-parts .palum-auto-parts-note { margin-top: 24px !important; padding: 17px 8px !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; } } /* ========================================================= 29. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .palum-auto-parts { padding-left: 18px !important; padding-right: 18px !important; } .palum-auto-parts .palum-auto-parts-title .elementor-heading-title { font-size: 32px !important; } .palum-auto-parts .palum-auto-part-image { height: 205px !important; min-height: 205px !important; } .palum-auto-parts .palum-auto-part-heading .elementor-heading-title { font-size: 19px !important; } } /* ========================================================= 30. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .palum-auto-parts *, .palum-auto-parts *::before, .palum-auto-parts *::after { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-31c217b *//* ========================================================= PALUM AUTOMOTIVE PAGE SECTION 04 — MANUFACTURING SOLUTIONS Brand Color: #FE6800 ========================================================= */ /* ========================================================= 01. SECTION BASE ========================================================= */ .palum-auto-solutions { --palum-orange: #FE6800; --palum-orange-hover: #FF7918; --palum-heading: #111722; --palum-text: #66717E; --palum-light: #F7F8FA; --palum-border: #E5E9ED; --palum-dark: #0B1118; --palum-dark-2: #111922; --palum-dark-3: #17222D; position: relative; width: 100% !important; overflow: hidden; padding: 112px 42px 120px !important; background: #FFFFFF !important; isolation: isolate; } /* ========================================================= 02. DECORATIVE ELEMENTS ========================================================= */ .palum-auto-solutions::before { content: ""; position: absolute; width: 520px; height: 520px; left: -360px; top: -350px; border: 1px solid rgba(254, 104, 0, 0.08); border-radius: 50%; z-index: 0; pointer-events: none; } .palum-auto-solutions::after { content: ""; position: absolute; right: 6%; top: 82px; width: 110px; height: 110px; border-top: 1px solid rgba(17, 23, 34, 0.055); border-right: 1px solid rgba(17, 23, 34, 0.055); z-index: 0; pointer-events: none; } /* ========================================================= 03. INNER ========================================================= */ .palum-auto-solutions .palum-auto-solutions-inner { position: relative; z-index: 2; width: 100% !important; max-width: 1600px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* ========================================================= 04. HEADER ========================================================= */ .palum-auto-solutions .palum-auto-solutions-head { width: 100% !important; margin: 0 0 62px !important; display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important; gap: 80px !important; align-items: end !important; } /* ========================================================= 05. HEADER LEFT ========================================================= */ .palum-auto-solutions .palum-auto-solutions-head-left { width: 100% !important; max-width: 800px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= 06. EYEBROW ========================================================= */ .palum-auto-solutions .palum-auto-solutions-eyebrow { position: relative; width: auto !important; margin: 0 0 18px !important; padding-left: 36px !important; } .palum-auto-solutions .palum-auto-solutions-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 2px; background: var(--palum-orange); transform: translateY(-50%); } .palum-auto-solutions .palum-auto-solutions-eyebrow .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; } /* ========================================================= 07. H2 ========================================================= */ .palum-auto-solutions .palum-auto-solutions-title { width: 100% !important; max-width: 780px !important; margin: 0 !important; } .palum-auto-solutions .palum-auto-solutions-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: clamp(44px, 3.6vw, 60px) !important; line-height: 1.04 !important; font-weight: 700 !important; letter-spacing: -1.8px !important; } /* ========================================================= 08. INTRO ========================================================= */ .palum-auto-solutions .palum-auto-solutions-intro { width: 100% !important; max-width: 620px !important; margin: 0 !important; } .palum-auto-solutions .palum-auto-solutions-intro, .palum-auto-solutions .palum-auto-solutions-intro p, .palum-auto-solutions .palum-auto-solutions-intro span { color: var(--palum-text) !important; font-size: 16.5px !important; line-height: 1.72 !important; font-weight: 400 !important; } .palum-auto-solutions .palum-auto-solutions-intro p { margin: 0 !important; } /* ========================================================= 09. MAIN LAYOUT ========================================================= */ .palum-auto-solutions .palum-auto-solutions-main { width: 100% !important; display: grid !important; grid-template-columns: 385px minmax(0, 1fr) !important; gap: 28px !important; align-items: stretch !important; } /* ========================================================= 10. LEFT NAVIGATION WRAPPER ========================================================= */ .palum-auto-solutions .palum-auto-solutions-nav { width: 100% !important; min-height: 650px; display: flex !important; flex-direction: column !important; align-items: stretch !important; overflow: hidden !important; background: #F7F8FA !important; border: 1px solid var(--palum-border) !important; border-radius: 10px !important; } /* ========================================================= 11. NAV ITEM ========================================================= */ .palum-auto-solutions .palum-auto-solution-nav-item { position: relative; width: 100% !important; min-height: 0 !important; flex: 1 1 25% !important; padding: 27px 28px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--palum-border) !important; cursor: pointer; transition: background 0.25s ease, padding-left 0.25s ease, box-shadow 0.25s ease !important; } .palum-auto-solutions .palum-auto-solution-nav-item:last-child { border-bottom: 0 !important; } /* active orange line */ .palum-auto-solutions .palum-auto-solution-nav-item::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--palum-orange); transition: height 0.28s ease; } /* subtle arrow */ .palum-auto-solutions .palum-auto-solution-nav-item::after { content: "→"; position: absolute; right: 24px; top: 50%; color: rgba(17, 23, 34, 0.16); font-size: 17px; line-height: 1; transform: translateY(-50%) translateX(-3px); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease; } /* hover */ .palum-auto-solutions .palum-auto-solution-nav-item:hover { padding-left: 33px !important; background: #FFFFFF !important; } .palum-auto-solutions .palum-auto-solution-nav-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* active */ .palum-auto-solutions .palum-auto-solution-nav-item.is-active { padding-left: 33px !important; background: var(--palum-dark-2) !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; } .palum-auto-solutions .palum-auto-solution-nav-item.is-active::before { height: 100%; } .palum-auto-solutions .palum-auto-solution-nav-item.is-active::after { color: var(--palum-orange); opacity: 1; transform: translateY(-50%) translateX(0); } /* ========================================================= 12. NAV NUMBER ========================================================= */ .palum-auto-solutions .palum-auto-solution-nav-number { width: auto !important; margin: 0 0 12px !important; } .palum-auto-solutions .palum-auto-solution-nav-number .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1px !important; } /* ========================================================= 13. NAV TITLE ========================================================= */ .palum-auto-solutions .palum-auto-solution-nav-title { width: calc(100% - 28px) !important; margin: 0 0 8px !important; } .palum-auto-solutions .palum-auto-solution-nav-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: 18px !important; line-height: 1.25 !important; font-weight: 700 !important; transition: color 0.25s ease !important; } .palum-auto-solutions .palum-auto-solution-nav-item.is-active .palum-auto-solution-nav-title .elementor-heading-title { color: #FFFFFF !important; } /* ========================================================= 14. NAV META ========================================================= */ .palum-auto-solutions .palum-auto-solution-nav-meta { width: calc(100% - 28px) !important; margin: 0 !important; } .palum-auto-solutions .palum-auto-solution-nav-meta .elementor-heading-title, .palum-auto-solutions .palum-auto-solution-nav-meta p, .palum-auto-solutions .palum-auto-solution-nav-meta span { margin: 0 !important; color: #7A838C !important; font-size: 11px !important; line-height: 1.45 !important; font-weight: 600 !important; transition: color 0.25s ease !important; } .palum-auto-solutions .palum-auto-solution-nav-item.is-active .palum-auto-solution-nav-meta .elementor-heading-title, .palum-auto-solutions .palum-auto-solution-nav-item.is-active .palum-auto-solution-nav-meta p, .palum-auto-solutions .palum-auto-solution-nav-item.is-active .palum-auto-solution-nav-meta span { color: rgba(255, 255, 255, 0.46) !important; } /* ========================================================= 15. RIGHT STAGE ========================================================= */ .palum-auto-solutions .palum-auto-solutions-stage { position: relative !important; width: 100% !important; min-width: 0 !important; min-height: 650px !important; overflow: hidden !important; background: var(--palum-dark-3) !important; border-radius: 10px !important; box-shadow: 0 25px 65px rgba(17, 23, 34, 0.11); } /* ========================================================= 16. PANEL ========================================================= */ .palum-auto-solutions .palum-auto-solution-panel { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 650px !important; overflow: hidden !important; display: none !important; opacity: 0; } .palum-auto-solutions .palum-auto-solution-panel.is-active { display: block !important; opacity: 1; animation: palumAutoSolutionFade 0.42s ease; } @keyframes palumAutoSolutionFade { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: scale(1); } } /* ========================================================= 17. BACKGROUND IMAGE WRAPPER ========================================================= */ .palum-auto-solutions .palum-auto-solution-bg { position: absolute !important; inset: 0 !important; z-index: 1; width: 100% !important; height: 100% !important; overflow: hidden !important; background: #17222D !important; } /* ========================================================= 18. BACKGROUND IMAGE WIDGET ========================================================= */ .palum-auto-solutions .palum-auto-solution-bg-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; } .palum-auto-solutions .palum-auto-solution-bg-image .elementor-widget-container { width: 100% !important; height: 100% !important; overflow: hidden !important; } .palum-auto-solutions .palum-auto-solution-bg-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; filter: saturate(0.90) contrast(1.04) brightness(0.90); transform: scale(1.01); transition: transform 5s ease, filter 0.4s ease !important; } .palum-auto-solutions .palum-auto-solution-panel.is-active .palum-auto-solution-bg-image img { transform: scale(1.045); } /* ========================================================= 19. INDIVIDUAL IMAGE POSITION 后续可单独微调 ========================================================= */ .palum-auto-solutions .palum-auto-solution-panel-01 .palum-auto-solution-bg-image img { object-position: center center !important; } .palum-auto-solutions .palum-auto-solution-panel-02 .palum-auto-solution-bg-image img { object-position: center center !important; } .palum-auto-solutions .palum-auto-solution-panel-03 .palum-auto-solution-bg-image img { object-position: center center !important; } .palum-auto-solutions .palum-auto-solution-panel-04 .palum-auto-solution-bg-image img { object-position: center center !important; } /* ========================================================= 20. FULL IMAGE OVERLAY ========================================================= */ .palum-auto-solutions .palum-auto-solution-overlay { position: absolute !important; inset: 0 !important; z-index: 2; width: 100% !important; height: 100% !important; pointer-events: none; background: linear-gradient( 180deg, rgba(6, 10, 15, 0.04) 0%, rgba(6, 10, 15, 0.06) 22%, rgba(6, 10, 15, 0.16) 38%, rgba(6, 10, 15, 0.48) 55%, rgba(6, 10, 15, 0.86) 72%, rgba(6, 10, 15, 0.97) 100% ) !important; } /* subtle side vignette */ .palum-auto-solutions .palum-auto-solution-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(4, 8, 12, 0.16) 0%, rgba(4, 8, 12, 0) 34%, rgba(4, 8, 12, 0.04) 100% ); } /* ========================================================= 21. TOP LABEL ========================================================= */ .palum-auto-solutions .palum-auto-solution-label { position: absolute !important; left: 28px !important; top: 28px !important; z-index: 5; width: auto !important; padding: 8px 11px !important; background: rgba(8, 13, 19, 0.66) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 4px !important; backdrop-filter: blur(8px); } .palum-auto-solutions .palum-auto-solution-label .elementor-heading-title { margin: 0 !important; color: rgba(255, 255, 255, 0.76) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; } /* ========================================================= 22. LARGE NUMBER ========================================================= */ .palum-auto-solutions .palum-auto-solution-large-number { position: absolute !important; right: 30px !important; top: 25px !important; z-index: 5; width: auto !important; } .palum-auto-solutions .palum-auto-solution-large-number .elementor-heading-title { margin: 0 !important; color: rgba(255, 255, 255, 0.12) !important; font-size: 72px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: -4px !important; } /* ========================================================= 23. CONTENT OVER IMAGE ========================================================= */ .palum-auto-solutions .palum-auto-solution-content { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 5; width: 100% !important; padding: 48px 46px 42px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= 24. KICKER ========================================================= */ .palum-auto-solutions .palum-auto-solution-kicker { width: auto !important; margin: 0 0 11px !important; } .palum-auto-solutions .palum-auto-solution-kicker .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.35px !important; text-transform: uppercase !important; } /* ========================================================= 25. CONTENT TITLE ========================================================= */ .palum-auto-solutions .palum-auto-solution-content-title { width: 100% !important; max-width: 760px !important; margin: 0 0 15px !important; } .palum-auto-solutions .palum-auto-solution-content-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: 31px !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.7px !important; } /* ========================================================= 26. CONTENT TEXT ========================================================= */ .palum-auto-solutions .palum-auto-solution-content-text { width: 100% !important; max-width: 780px !important; margin: 0 0 27px !important; } .palum-auto-solutions .palum-auto-solution-content-text, .palum-auto-solutions .palum-auto-solution-content-text p, .palum-auto-solutions .palum-auto-solution-content-text span { color: rgba(255, 255, 255, 0.64) !important; font-size: 13.5px !important; line-height: 1.72 !important; font-weight: 400 !important; } .palum-auto-solutions .palum-auto-solution-content-text p { margin: 0 !important; } /* ========================================================= 27. FEATURES ========================================================= */ .palum-auto-solutions .palum-auto-solution-features { width: 100% !important; padding-top: 20px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; border-top: 1px solid rgba(255, 255, 255, 0.13) !important; } /* ========================================================= 28. FEATURE ITEM ========================================================= */ .palum-auto-solutions .palum-auto-solution-feature { position: relative; width: 100% !important; padding-left: 15px !important; } .palum-auto-solutions .palum-auto-solution-feature::before { content: ""; position: absolute; left: 0; top: 0.48em; width: 5px; height: 5px; border-radius: 50%; background: var(--palum-orange); box-shadow: 0 0 0 4px rgba(254, 104, 0, 0.08); } .palum-auto-solutions .palum-auto-solution-feature .elementor-heading-title, .palum-auto-solutions .palum-auto-solution-feature p, .palum-auto-solutions .palum-auto-solution-feature span { margin: 0 !important; color: rgba(255, 255, 255, 0.72) !important; font-size: 10.5px !important; line-height: 1.45 !important; font-weight: 600 !important; } /* ========================================================= 29. BOTTOM NOTE ========================================================= */ .palum-auto-solutions .palum-auto-solutions-bottom { width: 100% !important; margin: 30px 0 0 !important; padding: 20px 24px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; border-top: 1px solid rgba(17, 23, 34, 0.08) !important; } /* bottom text */ .palum-auto-solutions .palum-auto-solutions-bottom-text { width: auto !important; margin: 0 !important; } .palum-auto-solutions .palum-auto-solutions-bottom-text, .palum-auto-solutions .palum-auto-solutions-bottom-text p, .palum-auto-solutions .palum-auto-solutions-bottom-text span { margin: 0 !important; color: #7A838C !important; font-size: 11px !important; line-height: 1.55 !important; font-weight: 400 !important; } /* bottom code */ .palum-auto-solutions .palum-auto-solutions-bottom-code { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; } .palum-auto-solutions .palum-auto-solutions-bottom-code .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.25px !important; text-transform: uppercase !important; white-space: nowrap !important; } /* ========================================================= 30. ELEMENTOR CLEANUP ========================================================= */ .palum-auto-solutions .elementor-widget, .palum-auto-solutions .elementor-widget-container { margin-bottom: 0 !important; } .palum-auto-solutions .palum-auto-solutions-inner, .palum-auto-solutions .palum-auto-solutions-head-left, .palum-auto-solutions .palum-auto-solutions-nav, .palum-auto-solutions .palum-auto-solution-nav-item, .palum-auto-solutions .palum-auto-solution-content { row-gap: 0 !important; } /* ========================================================= 31. ELEMENTOR EDITOR MODE 编辑后台时让四个 Panel 都可以看到并编辑 ========================================================= */ body.elementor-editor-active .palum-auto-solutions .palum-auto-solutions-stage { height: auto !important; min-height: 0 !important; overflow: visible !important; } body.elementor-editor-active .palum-auto-solutions .palum-auto-solution-panel { position: relative !important; inset: auto !important; display: block !important; opacity: 1 !important; min-height: 650px !important; margin-bottom: 25px !important; border-radius: 10px !important; } body.elementor-editor-active .palum-auto-solutions .palum-auto-solution-panel:last-child { margin-bottom: 0 !important; } /* ========================================================= 32. LARGE DESKTOP ========================================================= */ @media (min-width: 1600px) { .palum-auto-solutions { padding: 120px 52px 128px !important; } .palum-auto-solutions .palum-auto-solutions-inner { max-width: 1600px !important; } .palum-auto-solutions .palum-auto-solutions-main { grid-template-columns: 400px minmax(0, 1fr) !important; gap: 30px !important; } .palum-auto-solutions .palum-auto-solutions-nav, .palum-auto-solutions .palum-auto-solutions-stage, .palum-auto-solutions .palum-auto-solution-panel { min-height: 680px !important; } .palum-auto-solutions .palum-auto-solution-content { padding: 52px 52px 46px !important; } .palum-auto-solutions .palum-auto-solution-content-title .elementor-heading-title { font-size: 34px !important; } } /* ========================================================= 33. MEDIUM DESKTOP ========================================================= */ @media (min-width: 1181px) and (max-width: 1399px) { .palum-auto-solutions { padding: 96px 28px 104px !important; } .palum-auto-solutions .palum-auto-solutions-head { gap: 56px !important; margin-bottom: 52px !important; } .palum-auto-solutions .palum-auto-solutions-title .elementor-heading-title { font-size: clamp(40px, 3.5vw, 50px) !important; } .palum-auto-solutions .palum-auto-solutions-main { grid-template-columns: 340px minmax(0, 1fr) !important; gap: 22px !important; } .palum-auto-solutions .palum-auto-solutions-nav, .palum-auto-solutions .palum-auto-solutions-stage, .palum-auto-solutions .palum-auto-solution-panel { min-height: 620px !important; } .palum-auto-solutions .palum-auto-solution-nav-item { padding: 24px !important; } .palum-auto-solutions .palum-auto-solution-nav-item:hover, .palum-auto-solutions .palum-auto-solution-nav-item.is-active { padding-left: 29px !important; } .palum-auto-solutions .palum-auto-solution-content { padding: 42px 38px 36px !important; } } /* ========================================================= 34. TABLET ========================================================= */ @media (max-width: 1180px) { .palum-auto-solutions { padding: 90px 30px 98px !important; } .palum-auto-solutions .palum-auto-solutions-head { grid-template-columns: 1fr !important; gap: 23px !important; margin-bottom: 52px !important; } .palum-auto-solutions .palum-auto-solutions-intro { max-width: 760px !important; } .palum-auto-solutions .palum-auto-solutions-main { grid-template-columns: 300px minmax(0, 1fr) !important; gap: 20px !important; } .palum-auto-solutions .palum-auto-solutions-nav, .palum-auto-solutions .palum-auto-solutions-stage, .palum-auto-solutions .palum-auto-solution-panel { min-height: 620px !important; } .palum-auto-solutions .palum-auto-solution-nav-item { padding: 22px !important; } .palum-auto-solutions .palum-auto-solution-nav-item:hover, .palum-auto-solutions .palum-auto-solution-nav-item.is-active { padding-left: 27px !important; } .palum-auto-solutions .palum-auto-solution-nav-title .elementor-heading-title { font-size: 16px !important; } .palum-auto-solutions .palum-auto-solution-features { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } } /* ========================================================= 35. SMALL TABLET ========================================================= */ @media (max-width: 850px) { .palum-auto-solutions .palum-auto-solutions-main { grid-template-columns: 1fr !important; } .palum-auto-solutions .palum-auto-solutions-nav { min-height: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .palum-auto-solutions .palum-auto-solution-nav-item { min-height: 118px !important; border-right: 1px solid var(--palum-border) !important; } .palum-auto-solutions .palum-auto-solution-nav-item:nth-child(2n) { border-right: 0 !important; } .palum-auto-solutions .palum-auto-solution-nav-item:nth-child(3) { border-bottom: 0 !important; } .palum-auto-solutions .palum-auto-solutions-stage, .palum-auto-solutions .palum-auto-solution-panel { min-height: 600px !important; } } /* ========================================================= 36. MOBILE ========================================================= */ @media (max-width: 767px) { .palum-auto-solutions { padding: 68px 20px 74px !important; } .palum-auto-solutions::after { display: none; } /* HEADER */ .palum-auto-solutions .palum-auto-solutions-head { gap: 18px !important; margin-bottom: 40px !important; } .palum-auto-solutions .palum-auto-solutions-eyebrow { margin-bottom: 15px !important; padding-left: 31px !important; } .palum-auto-solutions .palum-auto-solutions-eyebrow::before { width: 20px; } .palum-auto-solutions .palum-auto-solutions-eyebrow .elementor-heading-title { font-size: 11px !important; letter-spacing: 1.2px !important; } .palum-auto-solutions .palum-auto-solutions-title .elementor-heading-title { font-size: 35px !important; line-height: 1.08 !important; letter-spacing: -1px !important; } .palum-auto-solutions .palum-auto-solutions-intro, .palum-auto-solutions .palum-auto-solutions-intro p { font-size: 15.5px !important; line-height: 1.65 !important; } /* NAV */ .palum-auto-solutions .palum-auto-solutions-nav { display: flex !important; flex-direction: column !important; } .palum-auto-solutions .palum-auto-solution-nav-item { min-height: 0 !important; flex: none !important; padding: 19px 20px !important; border-right: 0 !important; border-bottom: 1px solid var(--palum-border) !important; } .palum-auto-solutions .palum-auto-solution-nav-item:nth-child(3) { border-bottom: 1px solid var(--palum-border) !important; } .palum-auto-solutions .palum-auto-solution-nav-item:last-child { border-bottom: 0 !important; } .palum-auto-solutions .palum-auto-solution-nav-item:hover, .palum-auto-solutions .palum-auto-solution-nav-item.is-active { padding-left: 25px !important; } .palum-auto-solutions .palum-auto-solution-nav-number { margin-bottom: 8px !important; } .palum-auto-solutions .palum-auto-solution-nav-title { margin-bottom: 5px !important; } /* STAGE */ .palum-auto-solutions .palum-auto-solutions-stage, .palum-auto-solutions .palum-auto-solution-panel { min-height: 570px !important; } /* LABEL */ .palum-auto-solutions .palum-auto-solution-label { left: 16px !important; top: 16px !important; padding: 7px 9px !important; } .palum-auto-solutions .palum-auto-solution-label .elementor-heading-title { font-size: 8px !important; } /* NUMBER */ .palum-auto-solutions .palum-auto-solution-large-number { right: 16px !important; top: 16px !important; } .palum-auto-solutions .palum-auto-solution-large-number .elementor-heading-title { font-size: 54px !important; } /* CONTENT */ .palum-auto-solutions .palum-auto-solution-content { padding: 32px 20px 24px !important; } .palum-auto-solutions .palum-auto-solution-content-title .elementor-heading-title { font-size: 23px !important; line-height: 1.20 !important; } .palum-auto-solutions .palum-auto-solution-content-text { margin-bottom: 21px !important; } .palum-auto-solutions .palum-auto-solution-content-text, .palum-auto-solutions .palum-auto-solution-content-text p { font-size: 12.5px !important; line-height: 1.65 !important; } .palum-auto-solutions .palum-auto-solution-features { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; padding-top: 17px !important; } .palum-auto-solutions .palum-auto-solution-feature .elementor-heading-title, .palum-auto-solutions .palum-auto-solution-feature p { font-size: 9.5px !important; } /* BOTTOM */ .palum-auto-solutions .palum-auto-solutions-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; margin-top: 24px !important; padding: 17px 0 !important; } } /* ========================================================= 37. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .palum-auto-solutions { padding-left: 18px !important; padding-right: 18px !important; } .palum-auto-solutions .palum-auto-solutions-title .elementor-heading-title { font-size: 32px !important; } .palum-auto-solutions .palum-auto-solutions-stage, .palum-auto-solutions .palum-auto-solution-panel { min-height: 590px !important; } .palum-auto-solutions .palum-auto-solution-content-title .elementor-heading-title { font-size: 21px !important; } } /* ========================================================= 38. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .palum-auto-solutions *, .palum-auto-solutions *::before, .palum-auto-solutions *::after { transition: none !important; animation: none !important; } } /* ========================================================= PALUM AUTOMOTIVE MANUFACTURING SOLUTIONS IMAGE VISIBILITY OPTIMIZATION 放在现有 CSS 最底部 ========================================================= */ /* ========================================================= 01. BACKGROUND IMAGE 提高图片本身亮度，避免原图再次被压暗 ========================================================= */ .palum-auto-solutions .palum-auto-solution-bg-image img { filter: saturate(0.94) contrast(1.02) brightness(0.98) !important; } /* ========================================================= 02. MAIN GRADIENT OVERLAY 重点修改： - 上半部分几乎不压暗 - 中部保持图片可见 - 下部保留文字所需暗度 - 最底部不再接近纯黑 ========================================================= */ .palum-auto-solutions .palum-auto-solution-overlay { background: linear-gradient( 180deg, rgba(6, 10, 15, 0.02) 0%, rgba(6, 10, 15, 0.035) 28%, rgba(6, 10, 15, 0.08) 44%, rgba(6, 10, 15, 0.20) 58%, rgba(6, 10, 15, 0.46) 76%, rgba(6, 10, 15, 0.76) 100% ) !important; } /* ========================================================= 03. SIDE VIGNETTE 减弱左右暗角 ========================================================= */ .palum-auto-solutions .palum-auto-solution-overlay::after { background: linear-gradient( 90deg, rgba(4, 8, 12, 0.10) 0%, rgba(4, 8, 12, 0) 34%, rgba(4, 8, 12, 0.025) 100% ) !important; } /* ========================================================= 04. TITLE READABILITY 遮罩变浅后，为白色标题增加轻微阴影 不需要再靠重黑背景保证可读性 ========================================================= */ .palum-auto-solutions .palum-auto-solution-content-title .elementor-heading-title { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34) !important; } /* ========================================================= 05. CONTENT TEXT 稍微提高正文亮度 ========================================================= */ .palum-auto-solutions .palum-auto-solution-content-text, .palum-auto-solutions .palum-auto-solution-content-text p, .palum-auto-solutions .palum-auto-solution-content-text span { color: rgba(255, 255, 255, 0.78) !important; } /* ========================================================= 06. FEATURE TEXT 底部四个 Feature 同步提高可读性 ========================================================= */ .palum-auto-solutions .palum-auto-solution-feature .elementor-heading-title, .palum-auto-solutions .palum-auto-solution-feature p, .palum-auto-solutions .palum-auto-solution-feature span { color: rgba(255, 255, 255, 0.82) !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ededf32 *//* ========================================================= PALUM AUTOMOTIVE PAGE SECTION 05 — ADVANCED AUTOMOTIVE MOLDING Brand Color: #FE6800 ========================================================= */ /* ========================================================= 01. SECTION BASE ========================================================= */ .palum-auto-advanced { --palum-orange: #FE6800; --palum-dark: #0A1017; --palum-dark-2: #0F1720; --palum-dark-3: #151F29; --palum-white: #FFFFFF; --palum-muted: rgba(255,255,255,.60); --palum-muted-2: rgba(255,255,255,.42); --palum-line: rgba(255,255,255,.10); position: relative; width: 100% !important; overflow: hidden; padding: 118px 42px 120px !important; background: radial-gradient( circle at 8% 22%, rgba(254,104,0,.12) 0%, rgba(254,104,0,.035) 22%, rgba(254,104,0,0) 42% ), linear-gradient( 135deg, #0A1017 0%, #0E161F 54%, #111B24 100% ) !important; isolation: isolate; } /* ========================================================= 02. TECHNICAL BACKGROUND ========================================================= */ .palum-auto-advanced::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(255,255,255,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.018) 1px, transparent 1px ); background-size: 76px 76px; pointer-events: none; } /* decorative circle */ .palum-auto-advanced::after { content: ""; position: absolute; width: 600px; height: 600px; right: -420px; top: -390px; z-index: 0; border: 1px solid rgba(254,104,0,.10); border-radius: 50%; pointer-events: none; } /* ========================================================= 03. INNER ========================================================= */ .palum-auto-advanced .palum-auto-advanced-inner { position: relative; z-index: 2; width: 100% !important; max-width: 1600px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* ========================================================= 04. HEADER ========================================================= */ .palum-auto-advanced .palum-auto-advanced-head { width: 100% !important; margin: 0 0 62px !important; display: grid !important; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr) !important; gap: 90px !important; align-items: end !important; } /* ========================================================= 05. HEADER LEFT ========================================================= */ .palum-auto-advanced .palum-auto-advanced-head-left { width: 100% !important; max-width: 680px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= 06. EYEBROW ========================================================= */ .palum-auto-advanced .palum-auto-advanced-eyebrow { position: relative; width: auto !important; margin: 0 0 18px !important; padding-left: 36px !important; } .palum-auto-advanced .palum-auto-advanced-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 2px; background: var(--palum-orange); transform: translateY(-50%); } .palum-auto-advanced .palum-auto-advanced-eyebrow .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; } /* ========================================================= 07. H2 ========================================================= */ .palum-auto-advanced .palum-auto-advanced-title { width: 100% !important; max-width: 760px !important; margin: 0 !important; } .palum-auto-advanced .palum-auto-advanced-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: clamp(44px,3.5vw,59px) !important; line-height: 1.04 !important; font-weight: 700 !important; letter-spacing: -1.8px !important; } /* ========================================================= 08. HEADER INTRO ========================================================= */ .palum-auto-advanced .palum-auto-advanced-intro { width: 100% !important; max-width: 700px !important; margin: 0 !important; } .palum-auto-advanced .palum-auto-advanced-intro, .palum-auto-advanced .palum-auto-advanced-intro p, .palum-auto-advanced .palum-auto-advanced-intro span { margin: 0 !important; color: var(--palum-muted) !important; font-size: 16.5px !important; line-height: 1.72 !important; font-weight: 400 !important; } /* ========================================================= 09. MAIN ========================================================= */ .palum-auto-advanced .palum-auto-advanced-main { width: 100% !important; display: grid !important; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr) !important; gap: 52px !important; align-items: stretch !important; } /* ========================================================= 10. LEFT VISUAL ========================================================= */ .palum-auto-advanced .palum-auto-advanced-visual { position: relative !important; width: 100% !important; min-height: 650px !important; overflow: hidden !important; background: #151F29 !important; border: 1px solid var(--palum-line) !important; border-radius: 10px !important; box-shadow: 0 28px 70px rgba(0,0,0,.22); } /* ========================================================= 11. IMAGE ========================================================= */ .palum-auto-advanced .palum-auto-advanced-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1; margin: 0 !important; } .palum-auto-advanced .palum-auto-advanced-image .elementor-widget-container { width: 100% !important; height: 100% !important; } .palum-auto-advanced .palum-auto-advanced-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; filter: saturate(.90) contrast(1.04) brightness(.84); transform: scale(1.01); transition: transform .7s ease, filter .35s ease !important; } .palum-auto-advanced .palum-auto-advanced-visual:hover .palum-auto-advanced-image img { transform: scale(1.035); filter: saturate(.95) contrast(1.04) brightness(.88); } /* ========================================================= 12. VISUAL OVERLAY ========================================================= */ .palum-auto-advanced .palum-auto-advanced-visual-overlay { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 2; pointer-events: none; background: linear-gradient( 180deg, rgba(4,8,12,.06) 0%, rgba(4,8,12,.03) 36%, rgba(4,8,12,.16) 60%, rgba(4,8,12,.58) 100% ) !important; } /* side vignette */ .palum-auto-advanced .palum-auto-advanced-visual-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(5,9,13,.28) 0%, rgba(5,9,13,0) 32%, rgba(5,9,13,.05) 100% ); } /* ========================================================= 13. VISUAL LABEL ========================================================= */ .palum-auto-advanced .palum-auto-advanced-visual-label { position: absolute !important; left: 24px !important; top: 24px !important; z-index: 6; width: auto !important; padding: 8px 11px !important; background: rgba(8,13,19,.68) !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 4px !important; backdrop-filter: blur(8px); } .palum-auto-advanced .palum-auto-advanced-visual-label .elementor-heading-title { margin: 0 !important; color: rgba(255,255,255,.76) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; } /* ========================================================= 14. MATERIAL A ========================================================= */ .palum-auto-advanced .palum-auto-material-a { position: absolute !important; left: 30px !important; top: 43% !important; z-index: 6; width: 210px !important; padding: 16px 18px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; background: rgba(9,14,20,.82) !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 6px !important; backdrop-filter: blur(10px); box-shadow: 0 14px 35px rgba(0,0,0,.16); } /* connector line */ .palum-auto-advanced .palum-auto-material-a::after { content: ""; position: absolute; left: 100%; top: 50%; width: 78px; height: 1px; background: linear-gradient( 90deg, var(--palum-orange), rgba(254,104,0,.12) ); } /* endpoint */ .palum-auto-advanced .palum-auto-material-a::before { content: ""; position: absolute; left: calc(100% + 76px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--palum-orange); box-shadow: 0 0 0 4px rgba(254,104,0,.10); } /* ========================================================= 15. MATERIAL B ========================================================= */ .palum-auto-advanced .palum-auto-material-b { position: absolute !important; right: 28px !important; bottom: 23% !important; z-index: 6; width: 220px !important; padding: 16px 18px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; background: rgba(9,14,20,.82) !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 6px !important; backdrop-filter: blur(10px); box-shadow: 0 14px 35px rgba(0,0,0,.16); } /* connector */ .palum-auto-advanced .palum-auto-material-b::before { content: ""; position: absolute; right: 100%; top: 50%; width: 76px; height: 1px; background: linear-gradient( 90deg, rgba(254,104,0,.12), var(--palum-orange) ); } /* endpoint */ .palum-auto-advanced .palum-auto-material-b::after { content: ""; position: absolute; right: calc(100% + 74px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--palum-orange); box-shadow: 0 0 0 4px rgba(254,104,0,.10); } /* ========================================================= 16. MATERIAL COMMON TEXT ========================================================= */ .palum-auto-advanced .palum-auto-material-label { width: auto !important; margin: 0 0 7px !important; } .palum-auto-advanced .palum-auto-material-label .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; } .palum-auto-advanced .palum-auto-material-title { width: 100% !important; margin: 0 0 5px !important; } .palum-auto-advanced .palum-auto-material-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 700 !important; } .palum-auto-advanced .palum-auto-material-text { width: 100% !important; margin: 0 !important; } .palum-auto-advanced .palum-auto-material-text, .palum-auto-advanced .palum-auto-material-text p, .palum-auto-advanced .palum-auto-material-text span { margin: 0 !important; color: rgba(255,255,255,.48) !important; font-size: 10.5px !important; line-height: 1.5 !important; font-weight: 400 !important; } /* ========================================================= 17. VISUAL FOOTER ========================================================= */ .palum-auto-advanced .palum-auto-advanced-visual-footer { position: absolute !important; left: 26px !important; right: 26px !important; bottom: 24px !important; z-index: 6; width: auto !important; padding-top: 18px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; border-top: 1px solid rgba(255,255,255,.11) !important; } .palum-auto-advanced .palum-auto-advanced-visual-footer-text { width: auto !important; margin: 0 !important; } .palum-auto-advanced .palum-auto-advanced-visual-footer-text, .palum-auto-advanced .palum-auto-advanced-visual-footer-text p, .palum-auto-advanced .palum-auto-advanced-visual-footer-text span { margin: 0 !important; color: rgba(255,255,255,.48) !important; font-size: 10.5px !important; line-height: 1.5 !important; } .palum-auto-advanced .palum-auto-advanced-visual-footer-code { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; } .palum-auto-advanced .palum-auto-advanced-visual-footer-code .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.2px !important; white-space: nowrap !important; text-transform: uppercase !important; } /* ========================================================= 18. RIGHT CONTENT ========================================================= */ .palum-auto-advanced .palum-auto-advanced-content { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; } /* ========================================================= 19. CONTENT KICKER ========================================================= */ .palum-auto-advanced .palum-auto-advanced-content-kicker { width: auto !important; margin: 0 0 12px !important; } .palum-auto-advanced .palum-auto-advanced-content-kicker .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.3px !important; text-transform: uppercase !important; } /* ========================================================= 20. CONTENT TITLE ========================================================= */ .palum-auto-advanced .palum-auto-advanced-content-title { width: 100% !important; max-width: 650px !important; margin: 0 0 20px !important; } .palum-auto-advanced .palum-auto-advanced-content-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: 33px !important; line-height: 1.17 !important; font-weight: 700 !important; letter-spacing: -.7px !important; } /* ========================================================= 21. CONTENT TEXT ========================================================= */ .palum-auto-advanced .palum-auto-advanced-content-text { width: 100% !important; max-width: 670px !important; margin: 0 0 34px !important; } .palum-auto-advanced .palum-auto-advanced-content-text, .palum-auto-advanced .palum-auto-advanced-content-text p, .palum-auto-advanced .palum-auto-advanced-content-text span { margin: 0 !important; color: var(--palum-muted) !important; font-size: 14px !important; line-height: 1.75 !important; font-weight: 400 !important; } /* ========================================================= 22. FUNCTIONS WRAPPER ========================================================= */ .palum-auto-advanced .palum-auto-advanced-functions { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; border-top: 1px solid var(--palum-line) !important; } /* ========================================================= 23. FUNCTION ITEM ========================================================= */ .palum-auto-advanced .palum-auto-advanced-function { width: 100% !important; padding: 25px 0 !important; display: grid !important; grid-template-columns: 54px minmax(0,1fr) !important; gap: 18px !important; align-items: start !important; border-bottom: 1px solid var(--palum-line) !important; transition: padding-left .25s ease, background .25s ease !important; } .palum-auto-advanced .palum-auto-advanced-function:hover { padding-left: 8px !important; background: linear-gradient( 90deg, rgba(255,255,255,.018), rgba(255,255,255,0) ) !important; } /* ========================================================= 24. FUNCTION NUMBER ========================================================= */ .palum-auto-advanced .palum-auto-function-number { width: auto !important; margin: 3px 0 0 !important; } .palum-auto-advanced .palum-auto-function-number .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1px !important; } /* ========================================================= 25. FUNCTION COPY ========================================================= */ .palum-auto-advanced .palum-auto-function-copy { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= 26. FUNCTION TITLE ========================================================= */ .palum-auto-advanced .palum-auto-function-title { width: 100% !important; margin: 0 0 7px !important; } .palum-auto-advanced .palum-auto-function-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 700 !important; } /* ========================================================= 27. FUNCTION TEXT ========================================================= */ .palum-auto-advanced .palum-auto-function-text { width: 100% !important; max-width: 560px !important; margin: 0 !important; } .palum-auto-advanced .palum-auto-function-text, .palum-auto-advanced .palum-auto-function-text p, .palum-auto-advanced .palum-auto-function-text span { margin: 0 !important; color: rgba(255,255,255,.52) !important; font-size: 12.5px !important; line-height: 1.65 !important; font-weight: 400 !important; } /* ========================================================= 28. DESIGN CONSIDERATIONS ========================================================= */ .palum-auto-advanced .palum-auto-advanced-design { width: 100% !important; margin: 58px 0 0 !important; padding-top: 28px !important; border-top: 1px solid rgba(255,255,255,.11) !important; } /* ========================================================= 29. DESIGN HEADER ========================================================= */ .palum-auto-advanced .palum-auto-advanced-design-head { width: 100% !important; margin: 0 0 22px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; } /* label */ .palum-auto-advanced .palum-auto-advanced-design-label { width: auto !important; margin: 0 !important; } .palum-auto-advanced .palum-auto-advanced-design-label .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.3px !important; text-transform: uppercase !important; } /* note */ .palum-auto-advanced .palum-auto-advanced-design-note { width: auto !important; margin: 0 !important; } .palum-auto-advanced .palum-auto-advanced-design-note, .palum-auto-advanced .palum-auto-advanced-design-note p, .palum-auto-advanced .palum-auto-advanced-design-note span { margin: 0 !important; color: rgba(255,255,255,.34) !important; font-size: 10px !important; line-height: 1.4 !important; letter-spacing: .2px !important; } /* ========================================================= 30. DESIGN GRID ========================================================= */ .palum-auto-advanced .palum-auto-advanced-design-grid { width: 100% !important; display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 0 !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 8px !important; } /* ========================================================= 31. DESIGN ITEM ========================================================= */ .palum-auto-advanced .palum-auto-design-item { position: relative; width: 100% !important; min-height: 132px !important; padding: 24px 24px 22px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; background: rgba(255,255,255,.025) !important; border-right: 1px solid rgba(255,255,255,.09) !important; transition: background .25s ease, transform .25s ease !important; } .palum-auto-advanced .palum-auto-design-item-04 { border-right: 0 !important; } .palum-auto-advanced .palum-auto-design-item:hover { background: rgba(255,255,255,.045) !important; } /* orange dot */ .palum-auto-advanced .palum-auto-design-item::before { content: ""; position: absolute; left: 24px; top: 23px; width: 5px; height: 5px; border-radius: 50%; background: var(--palum-orange); box-shadow: 0 0 0 4px rgba(254,104,0,.07); } /* ========================================================= 32. DESIGN TITLE ========================================================= */ .palum-auto-advanced .palum-auto-design-title { width: 100% !important; margin: 20px 0 8px !important; } .palum-auto-advanced .palum-auto-design-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 700 !important; } /* ========================================================= 33. DESIGN TEXT ========================================================= */ .palum-auto-advanced .palum-auto-design-text { width: 100% !important; margin: 0 !important; } .palum-auto-advanced .palum-auto-design-text, .palum-auto-advanced .palum-auto-design-text p, .palum-auto-advanced .palum-auto-design-text span { margin: 0 !important; color: rgba(255,255,255,.46) !important; font-size: 10.5px !important; line-height: 1.55 !important; font-weight: 400 !important; } /* ========================================================= 34. ELEMENTOR CLEANUP ========================================================= */ .palum-auto-advanced .elementor-widget, .palum-auto-advanced .elementor-widget-container { margin-bottom: 0 !important; } .palum-auto-advanced .palum-auto-advanced-inner, .palum-auto-advanced .palum-auto-advanced-head-left, .palum-auto-advanced .palum-auto-material-a, .palum-auto-advanced .palum-auto-material-b, .palum-auto-advanced .palum-auto-advanced-content, .palum-auto-advanced .palum-auto-function-copy, .palum-auto-advanced .palum-auto-design-item { row-gap: 0 !important; } /* ========================================================= 35. LARGE DESKTOP ========================================================= */ @media (min-width: 1600px) { .palum-auto-advanced { padding: 124px 52px 128px !important; } .palum-auto-advanced .palum-auto-advanced-inner { max-width: 1600px !important; } .palum-auto-advanced .palum-auto-advanced-main { gap: 58px !important; } .palum-auto-advanced .palum-auto-advanced-visual { min-height: 680px !important; } .palum-auto-advanced .palum-auto-advanced-content-title .elementor-heading-title { font-size: 35px !important; } } /* ========================================================= 36. MEDIUM DESKTOP ========================================================= */ @media (min-width: 1181px) and (max-width: 1399px) { .palum-auto-advanced { padding: 100px 28px 108px !important; } .palum-auto-advanced .palum-auto-advanced-head { gap: 60px !important; margin-bottom: 52px !important; } .palum-auto-advanced .palum-auto-advanced-title .elementor-heading-title { font-size: clamp(40px,3.4vw,50px) !important; } .palum-auto-advanced .palum-auto-advanced-main { gap: 38px !important; } .palum-auto-advanced .palum-auto-advanced-visual { min-height: 620px !important; } .palum-auto-advanced .palum-auto-material-a { width: 190px !important; left: 22px !important; } .palum-auto-advanced .palum-auto-material-b { width: 195px !important; right: 22px !important; } .palum-auto-advanced .palum-auto-material-a::after, .palum-auto-advanced .palum-auto-material-b::before { width: 52px; } .palum-auto-advanced .palum-auto-material-a::before { left: calc(100% + 50px); } .palum-auto-advanced .palum-auto-material-b::after { right: calc(100% + 50px); } } /* ========================================================= 37. TABLET ========================================================= */ @media (max-width: 1180px) { .palum-auto-advanced { padding: 94px 30px 100px !important; } .palum-auto-advanced .palum-auto-advanced-head { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 52px !important; } .palum-auto-advanced .palum-auto-advanced-intro { max-width: 780px !important; } .palum-auto-advanced .palum-auto-advanced-main { grid-template-columns: 1fr !important; gap: 48px !important; } .palum-auto-advanced .palum-auto-advanced-visual { min-height: 620px !important; } .palum-auto-advanced .palum-auto-advanced-content { max-width: 860px !important; } .palum-auto-advanced .palum-auto-advanced-design-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .palum-auto-advanced .palum-auto-design-item-02 { border-right: 0 !important; } .palum-auto-advanced .palum-auto-design-item-01, .palum-auto-advanced .palum-auto-design-item-02 { border-bottom: 1px solid rgba(255,255,255,.09) !important; } .palum-auto-advanced .palum-auto-design-item-03 { border-right: 1px solid rgba(255,255,255,.09) !important; } } /* ========================================================= 38. MOBILE ========================================================= */ @media (max-width: 767px) { .palum-auto-advanced { padding: 70px 20px 76px !important; } /* HEADER */ .palum-auto-advanced .palum-auto-advanced-head { gap: 19px !important; margin-bottom: 40px !important; } .palum-auto-advanced .palum-auto-advanced-eyebrow { margin-bottom: 15px !important; padding-left: 31px !important; } .palum-auto-advanced .palum-auto-advanced-eyebrow::before { width: 20px; } .palum-auto-advanced .palum-auto-advanced-eyebrow .elementor-heading-title { font-size: 11px !important; letter-spacing: 1.2px !important; } .palum-auto-advanced .palum-auto-advanced-title .elementor-heading-title { font-size: 35px !important; line-height: 1.08 !important; letter-spacing: -1px !important; } .palum-auto-advanced .palum-auto-advanced-intro, .palum-auto-advanced .palum-auto-advanced-intro p { font-size: 15.5px !important; line-height: 1.65 !important; } /* VISUAL */ .palum-auto-advanced .palum-auto-advanced-visual { min-height: 500px !important; } .palum-auto-advanced .palum-auto-advanced-visual-label { left: 15px !important; top: 15px !important; padding: 7px 9px !important; } .palum-auto-advanced .palum-auto-advanced-visual-label .elementor-heading-title { font-size: 8px !important; } /* MATERIAL A */ .palum-auto-advanced .palum-auto-material-a { left: 15px !important; top: 43% !important; width: 175px !important; padding: 13px 14px !important; } .palum-auto-advanced .palum-auto-material-a::after { width: 35px; } .palum-auto-advanced .palum-auto-material-a::before { left: calc(100% + 33px); } /* MATERIAL B */ .palum-auto-advanced .palum-auto-material-b { right: 15px !important; bottom: 23% !important; width: 180px !important; padding: 13px 14px !important; } .palum-auto-advanced .palum-auto-material-b::before { width: 35px; } .palum-auto-advanced .palum-auto-material-b::after { right: calc(100% + 33px); } .palum-auto-advanced .palum-auto-material-title .elementor-heading-title { font-size: 12px !important; } .palum-auto-advanced .palum-auto-material-text, .palum-auto-advanced .palum-auto-material-text p { font-size: 9.5px !important; } /* VISUAL FOOTER */ .palum-auto-advanced .palum-auto-advanced-visual-footer { left: 15px !important; right: 15px !important; bottom: 16px !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } /* RIGHT */ .palum-auto-advanced .palum-auto-advanced-content-title .elementor-heading-title { font-size: 25px !important; line-height: 1.20 !important; } .palum-auto-advanced .palum-auto-advanced-content-text { margin-bottom: 27px !important; } .palum-auto-advanced .palum-auto-advanced-content-text, .palum-auto-advanced .palum-auto-advanced-content-text p { font-size: 12.5px !important; line-height: 1.68 !important; } .palum-auto-advanced .palum-auto-advanced-function { grid-template-columns: 36px minmax(0,1fr) !important; gap: 12px !important; padding: 21px 0 !important; } .palum-auto-advanced .palum-auto-function-title .elementor-heading-title { font-size: 15.5px !important; } .palum-auto-advanced .palum-auto-function-text, .palum-auto-advanced .palum-auto-function-text p { font-size: 11.5px !important; } /* DESIGN */ .palum-auto-advanced .palum-auto-advanced-design { margin-top: 42px !important; } .palum-auto-advanced .palum-auto-advanced-design-head { flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; } .palum-auto-advanced .palum-auto-advanced-design-grid { grid-template-columns: 1fr !important; } .palum-auto-advanced .palum-auto-design-item { min-height: auto !important; padding: 21px 20px !important; border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.09) !important; } .palum-auto-advanced .palum-auto-design-item-04 { border-bottom: 0 !important; } .palum-auto-advanced .palum-auto-design-item::before { left: 20px; top: 21px; } } /* ========================================================= 39. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .palum-auto-advanced { padding-left: 18px !important; padding-right: 18px !important; } .palum-auto-advanced .palum-auto-advanced-title .elementor-heading-title { font-size: 32px !important; } .palum-auto-advanced .palum-auto-advanced-visual { min-height: 520px !important; } .palum-auto-advanced .palum-auto-material-a { width: 160px !important; } .palum-auto-advanced .palum-auto-material-b { width: 165px !important; } .palum-auto-advanced .palum-auto-advanced-content-title .elementor-heading-title { font-size: 23px !important; } } /* ========================================================= 40. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .palum-auto-advanced *, .palum-auto-advanced *::before, .palum-auto-advanced *::after { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-460836b *//* ========================================================= PALUM AUTOMOTIVE PAGE SECTION 06 — AUTOMOTIVE MATERIALS Brand: #FE6800 Max Width: 1480px ========================================================= */ /* ========================================================= 01. SECTION BASE ========================================================= */ .palum-auto-materials { --palum-orange: #FE6800; --palum-heading: #111722; --palum-text: #66717E; --palum-light: #F7F8FA; --palum-light-2: #F2F4F6; --palum-border: #E5E9ED; --palum-dark: #111922; --palum-dark-2: #151F29; position: relative; width: 100% !important; overflow: hidden; padding: 112px 42px 120px !important; background: radial-gradient( circle at 96% 10%, rgba(254,104,0,.05) 0%, rgba(254,104,0,0) 25% ), #FFFFFF !important; isolation: isolate; } /* decorative circle */ .palum-auto-materials::before { content: ""; position: absolute; width: 500px; height: 500px; left: -350px; bottom: -350px; z-index: 0; border: 1px solid rgba(254,104,0,.08); border-radius: 50%; pointer-events: none; } /* technical corner */ .palum-auto-materials::after { content: ""; position: absolute; right: 5%; top: 74px; width: 110px; height: 110px; z-index: 0; border-top: 1px solid rgba(17,23,34,.055); border-right: 1px solid rgba(17,23,34,.055); pointer-events: none; } /* ========================================================= 02. INNER ========================================================= */ .palum-auto-materials .palum-auto-materials-inner { position: relative; z-index: 2; width: 100% !important; max-width: 1480px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* ========================================================= 03. HEADER ========================================================= */ .palum-auto-materials .palum-auto-materials-head { width: 100% !important; margin: 0 0 58px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* ========================================================= 04. EYEBROW ========================================================= */ /* ========================================================= AUTOMOTIVE MATERIALS EYEBROW MATCH OTHER SECTIONS ========================================================= */ .palum-auto-materials .palum-auto-materials-eyebrow { position: relative; width: auto !important; margin: 0 0 18px !important; padding: 0 92px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* LEFT LINE */ .palum-auto-materials .palum-auto-materials-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 64px; height: 2px; background: #FE6800; transform: translateY(-50%); } /* RIGHT LINE */ .palum-auto-materials .palum-auto-materials-eyebrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 64px; height: 2px; background: #FE6800; transform: translateY(-50%); } .palum-auto-materials .palum-auto-materials-eyebrow .elementor-heading-title { margin: 0 !important; color: #FE6800 !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; white-space: nowrap !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .palum-auto-materials .palum-auto-materials-eyebrow { margin-bottom: 15px !important; padding: 0 58px !important; } .palum-auto-materials .palum-auto-materials-eyebrow::before, .palum-auto-materials .palum-auto-materials-eyebrow::after { width: 44px; height: 2px; } .palum-auto-materials .palum-auto-materials-eyebrow .elementor-heading-title { font-size: 10.5px !important; letter-spacing: 1.25px !important; } } /* SMALL MOBILE */ @media (max-width: 480px) { .palum-auto-materials .palum-auto-materials-eyebrow { padding: 0 48px !important; } .palum-auto-materials .palum-auto-materials-eyebrow::before, .palum-auto-materials .palum-auto-materials-eyebrow::after { width: 36px; } } /* ========================================================= 05. TITLE ========================================================= */ .palum-auto-materials .palum-auto-materials-title { width: 100% !important; max-width: 900px !important; margin: 0 0 22px !important; text-align: center !important; } .palum-auto-materials .palum-auto-materials-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: clamp(44px,3.55vw,58px) !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -1.7px !important; text-align: center !important; } /* ========================================================= 06. INTRO ========================================================= */ .palum-auto-materials .palum-auto-materials-intro { width: 100% !important; max-width: 860px !important; margin: 0 auto !important; text-align: center !important; } .palum-auto-materials .palum-auto-materials-intro, .palum-auto-materials .palum-auto-materials-intro p, .palum-auto-materials .palum-auto-materials-intro span { margin: 0 !important; color: var(--palum-text) !important; font-size: 16.5px !important; line-height: 1.72 !important; font-weight: 400 !important; text-align: center !important; } /* ========================================================= 07. MATRIX ========================================================= */ .palum-auto-materials .palum-auto-materials-matrix { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid var(--palum-border) !important; border-radius: 10px !important; box-shadow: 0 22px 60px rgba(17,23,34,.045); } /* ========================================================= 08. MATRIX HEADER ========================================================= */ .palum-auto-materials .palum-auto-materials-matrix-head { width: 100% !important; display: grid !important; grid-template-columns: 34% 66% !important; gap: 0 !important; background: var(--palum-dark) !important; } .palum-auto-materials .palum-auto-materials-matrix-head-left, .palum-auto-materials .palum-auto-materials-matrix-head-right { width: 100% !important; padding: 18px 28px !important; display: flex !important; align-items: center !important; } .palum-auto-materials .palum-auto-materials-matrix-head-left { border-right: 1px solid rgba(255,255,255,.08) !important; } .palum-auto-materials .palum-auto-materials-matrix-head-left .elementor-heading-title, .palum-auto-materials .palum-auto-materials-matrix-head-right .elementor-heading-title { margin: 0 !important; color: rgba(255,255,255,.55) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.3px !important; text-transform: uppercase !important; } /* ========================================================= 09. MATERIAL ROW ========================================================= */ .palum-auto-materials .palum-auto-material-row { width: 100% !important; min-height: 205px !important; display: grid !important; grid-template-columns: 34% 66% !important; gap: 0 !important; border-bottom: 1px solid var(--palum-border) !important; } .palum-auto-materials .palum-auto-material-row-04 { border-bottom: 0 !important; } /* ========================================================= 10. MATERIAL GROUP ========================================================= */ .palum-auto-materials .palum-auto-material-group { position: relative; width: 100% !important; padding: 30px 30px 28px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; background: var(--palum-light) !important; border-right: 1px solid var(--palum-border) !important; transition: background .25s ease !important; } /* orange hover marker */ .palum-auto-materials .palum-auto-material-group::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--palum-orange); transition: height .3s ease; } .palum-auto-materials .palum-auto-material-row:hover .palum-auto-material-group { background: var(--palum-light-2) !important; } .palum-auto-materials .palum-auto-material-row:hover .palum-auto-material-group::before { height: 100%; } /* ========================================================= 11. NUMBER ========================================================= */ .palum-auto-materials .palum-auto-material-number { width: auto !important; margin: 0 0 17px !important; } .palum-auto-materials .palum-auto-material-number .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.1px !important; } /* ========================================================= 12. GROUP TITLE ========================================================= */ .palum-auto-materials .palum-auto-material-group-title { width: 100% !important; max-width: 340px !important; margin: 0 0 12px !important; } .palum-auto-materials .palum-auto-material-group-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: 21px !important; line-height: 1.25 !important; font-weight: 700 !important; } /* ========================================================= 13. GROUP DESCRIPTION ========================================================= */ .palum-auto-materials .palum-auto-material-group-use { width: 100% !important; max-width: 330px !important; margin: 0 !important; } .palum-auto-materials .palum-auto-material-group-use, .palum-auto-materials .palum-auto-material-group-use p, .palum-auto-materials .palum-auto-material-group-use span { margin: 0 !important; color: #7A838C !important; font-size: 12.5px !important; line-height: 1.65 !important; font-weight: 400 !important; } /* ========================================================= 14. MATERIAL DETAILS ========================================================= */ .palum-auto-materials .palum-auto-material-details { width: 100% !important; padding: 30px 34px !important; display: grid !important; grid-template-columns: minmax(220px,.70fr) minmax(0,1.30fr) !important; gap: 48px !important; align-items: center !important; background: #FFFFFF !important; transition: background .25s ease !important; } .palum-auto-materials .palum-auto-material-row:hover .palum-auto-material-details { background: #FCFCFD !important; } /* ========================================================= 15. CODES WRAP ========================================================= */ .palum-auto-materials .palum-auto-material-codes-wrap { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= 16. CODES LABEL ========================================================= */ .palum-auto-materials .palum-auto-material-codes-label { width: auto !important; margin: 0 0 13px !important; } .palum-auto-materials .palum-auto-material-codes-label .elementor-heading-title { margin: 0 !important; color: #8A939C !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.1px !important; text-transform: uppercase !important; } /* ========================================================= 17. MATERIAL CODES ========================================================= */ .palum-auto-materials .palum-auto-material-codes { width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; } /* ========================================================= 18. MATERIAL CODE ========================================================= */ .palum-auto-materials .palum-auto-material-code { width: auto !important; min-width: 58px !important; min-height: 38px !important; margin: 0 !important; padding: 0 13px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; background: #F7F8FA !important; border: 1px solid #E4E8EB !important; border-radius: 5px !important; transition: border-color .2s ease, background .2s ease !important; } .palum-auto-materials .palum-auto-material-code .elementor-heading-title { margin: 0 !important; color: #303942 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: .2px !important; } .palum-auto-materials .palum-auto-material-row:hover .palum-auto-material-code { border-color: rgba(254,104,0,.24) !important; background: #FFFDFC !important; } /* ========================================================= 19. FOCUS ========================================================= */ .palum-auto-materials .palum-auto-material-focus { width: 100% !important; min-width: 0; padding-left: 30px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; border-left: 1px solid var(--palum-border) !important; } /* ========================================================= 20. FOCUS LABEL ========================================================= */ .palum-auto-materials .palum-auto-material-focus-label { width: auto !important; margin: 0 0 12px !important; } .palum-auto-materials .palum-auto-material-focus-label .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; } /* ========================================================= 21. FOCUS LIST ========================================================= */ .palum-auto-materials .palum-auto-material-focus-list { width: 100% !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px 24px !important; } /* ========================================================= 22. FOCUS ITEM ========================================================= */ .palum-auto-materials .palum-auto-material-focus-item { position: relative; width: 100% !important; margin: 0 !important; padding-left: 15px !important; } .palum-auto-materials .palum-auto-material-focus-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--palum-orange); transform: translateY(-50%); } .palum-auto-materials .palum-auto-material-focus-item .elementor-heading-title { margin: 0 !important; color: #5E6872 !important; font-size: 11.5px !important; line-height: 1.5 !important; font-weight: 600 !important; } /* ========================================================= 23. MATERIAL SELECTION BLOCK ========================================================= */ .palum-auto-materials .palum-auto-material-selection { position: relative; width: 100% !important; margin: 34px 0 0 !important; padding: 36px 38px !important; overflow: hidden !important; display: grid !important; grid-template-columns: minmax(0,1.12fr) minmax(420px,.88fr) !important; gap: 60px !important; align-items: center !important; background: linear-gradient( 135deg, #101821 0%, #151F29 100% ) !important; border-radius: 9px !important; box-shadow: 0 22px 60px rgba(17,23,34,.10); } /* top orange line */ .palum-auto-materials .palum-auto-material-selection::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, var(--palum-orange), rgba(254,104,0,.25) 42%, rgba(254,104,0,0) ); } /* ========================================================= 24. SELECTION COPY ========================================================= */ .palum-auto-materials .palum-auto-material-selection-copy { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= 25. SELECTION LABEL ========================================================= */ .palum-auto-materials .palum-auto-material-selection-label { width: auto !important; margin: 0 0 10px !important; } .palum-auto-materials .palum-auto-material-selection-label .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.25px !important; text-transform: uppercase !important; } /* ========================================================= 26. SELECTION TITLE ========================================================= */ .palum-auto-materials .palum-auto-material-selection-title { width: 100% !important; max-width: 680px !important; margin: 0 0 12px !important; } .palum-auto-materials .palum-auto-material-selection-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: 24px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -.4px !important; } /* ========================================================= 27. SELECTION TEXT ========================================================= */ .palum-auto-materials .palum-auto-material-selection-text { width: 100% !important; max-width: 720px !important; margin: 0 !important; } .palum-auto-materials .palum-auto-material-selection-text, .palum-auto-materials .palum-auto-material-selection-text p, .palum-auto-materials .palum-auto-material-selection-text span { margin: 0 !important; color: rgba(255,255,255,.53) !important; font-size: 12.5px !important; line-height: 1.68 !important; font-weight: 400 !important; } /* ========================================================= 28. SELECTION FACTORS ========================================================= */ .palum-auto-materials .palum-auto-material-selection-factors { width: 100% !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; } /* ========================================================= 29. SELECTION FACTOR ========================================================= */ .palum-auto-materials .palum-auto-material-selection-factor { position: relative; width: 100% !important; min-height: 44px !important; margin: 0 !important; padding: 0 14px 0 31px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 5px !important; transition: background .2s ease, border-color .2s ease !important; } .palum-auto-materials .palum-auto-material-selection-factor::before { content: ""; position: absolute; left: 15px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--palum-orange); box-shadow: 0 0 0 4px rgba(254,104,0,.06); transform: translateY(-50%); } .palum-auto-materials .palum-auto-material-selection-factor .elementor-heading-title { margin: 0 !important; color: rgba(255,255,255,.67) !important; font-size: 10.5px !important; line-height: 1.35 !important; font-weight: 600 !important; } .palum-auto-materials .palum-auto-material-selection-factor:last-child { grid-column: 1 / -1; } .palum-auto-materials .palum-auto-material-selection-factor:hover { background: rgba(255,255,255,.045) !important; border-color: rgba(254,104,0,.20) !important; } /* ========================================================= 30. ELEMENTOR CLEANUP ========================================================= */ .palum-auto-materials .elementor-widget, .palum-auto-materials .elementor-widget-container { margin-bottom: 0 !important; } .palum-auto-materials .palum-auto-materials-head, .palum-auto-materials .palum-auto-material-group, .palum-auto-materials .palum-auto-material-details, .palum-auto-materials .palum-auto-material-codes-wrap, .palum-auto-materials .palum-auto-material-focus, .palum-auto-materials .palum-auto-material-selection-copy { row-gap: 0 !important; } /* ========================================================= 31. MEDIUM DESKTOP ========================================================= */ @media (min-width: 1181px) and (max-width: 1399px) { .palum-auto-materials { padding: 100px 28px 108px !important; } .palum-auto-materials .palum-auto-materials-title .elementor-heading-title { font-size: clamp(42px,3.8vw,52px) !important; } .palum-auto-materials .palum-auto-material-details { gap: 36px !important; } .palum-auto-materials .palum-auto-material-focus { padding-left: 24px !important; } } /* ========================================================= 32. TABLET ========================================================= */ @media (max-width: 1180px) { .palum-auto-materials { padding: 90px 30px 98px !important; } .palum-auto-materials .palum-auto-materials-title { max-width: 820px !important; } .palum-auto-materials .palum-auto-materials-intro { max-width: 760px !important; } .palum-auto-materials .palum-auto-materials-matrix-head { grid-template-columns: 38% 62% !important; } .palum-auto-materials .palum-auto-material-row { grid-template-columns: 38% 62% !important; } .palum-auto-materials .palum-auto-material-details { grid-template-columns: 1fr !important; gap: 22px !important; } .palum-auto-materials .palum-auto-material-focus { padding-left: 0 !important; padding-top: 20px !important; border-left: 0 !important; border-top: 1px solid var(--palum-border) !important; } .palum-auto-materials .palum-auto-material-selection { grid-template-columns: 1fr !important; gap: 30px !important; } } /* ========================================================= 33. MOBILE ========================================================= */ @media (max-width: 767px) { .palum-auto-materials { padding: 68px 20px 74px !important; } .palum-auto-materials::after { display: none; } /* HEADER */ .palum-auto-materials .palum-auto-materials-head { margin-bottom: 40px !important; } .palum-auto-materials .palum-auto-materials-eyebrow { margin-bottom: 15px !important; padding: 0 43px !important; } .palum-auto-materials .palum-auto-materials-eyebrow::before, .palum-auto-materials .palum-auto-materials-eyebrow::after { width: 30px; } .palum-auto-materials .palum-auto-materials-eyebrow .elementor-heading-title { font-size: 10.5px !important; letter-spacing: 1.25px !important; } .palum-auto-materials .palum-auto-materials-title { max-width: 100% !important; margin-bottom: 18px !important; } .palum-auto-materials .palum-auto-materials-title .elementor-heading-title { font-size: 35px !important; line-height: 1.08 !important; letter-spacing: -1px !important; } .palum-auto-materials .palum-auto-materials-intro { max-width: 100% !important; } .palum-auto-materials .palum-auto-materials-intro, .palum-auto-materials .palum-auto-materials-intro p { font-size: 15.5px !important; line-height: 1.65 !important; } /* MATRIX HEADER */ .palum-auto-materials .palum-auto-materials-matrix-head { display: none !important; } /* ROW */ .palum-auto-materials .palum-auto-material-row { min-height: 0 !important; grid-template-columns: 1fr !important; } /* GROUP */ .palum-auto-materials .palum-auto-material-group { padding: 24px 20px !important; border-right: 0 !important; border-bottom: 1px solid var(--palum-border) !important; } .palum-auto-materials .palum-auto-material-group-title .elementor-heading-title { font-size: 19px !important; } /* DETAILS */ .palum-auto-materials .palum-auto-material-details { padding: 23px 20px !important; } .palum-auto-materials .palum-auto-material-focus-list { grid-template-columns: 1fr !important; gap: 9px !important; } /* SELECTION */ .palum-auto-materials .palum-auto-material-selection { margin-top: 24px !important; padding: 28px 20px !important; gap: 25px !important; } .palum-auto-materials .palum-auto-material-selection-title .elementor-heading-title { font-size: 21px !important; } .palum-auto-materials .palum-auto-material-selection-text, .palum-auto-materials .palum-auto-material-selection-text p { font-size: 11.5px !important; } .palum-auto-materials .palum-auto-material-selection-factors { grid-template-columns: 1fr !important; } .palum-auto-materials .palum-auto-material-selection-factor:last-child { grid-column: auto; } } /* ========================================================= 34. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .palum-auto-materials { padding-left: 18px !important; padding-right: 18px !important; } .palum-auto-materials .palum-auto-materials-title .elementor-heading-title { font-size: 32px !important; } .palum-auto-materials .palum-auto-materials-eyebrow { padding: 0 36px !important; } .palum-auto-materials .palum-auto-materials-eyebrow::before, .palum-auto-materials .palum-auto-materials-eyebrow::after { width: 24px; } .palum-auto-materials .palum-auto-material-code { min-width: 54px !important; } } /* ========================================================= 35. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .palum-auto-materials *, .palum-auto-materials *::before, .palum-auto-materials *::after { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-182c661 *//* ========================================================= PALUM AUTOMOTIVE PAGE SECTION 07 — QUALITY & PROCESS CONTROL Brand Color: #FE6800 Max Content Width: 1480px ========================================================= */ /* ========================================================= 01. SECTION BASE ========================================================= */ .palum-auto-quality { --palum-orange: #FE6800; --palum-heading: #111722; --palum-text: #66717E; --palum-bg: #F5F7F9; --palum-white: #FFFFFF; --palum-border: #E1E6EA; --palum-dark: #101821; --palum-dark-2: #151F29; position: relative; width: 100% !important; overflow: hidden; padding: 112px 42px 120px !important; background: radial-gradient( circle at 7% 18%, rgba(254,104,0,.055) 0%, rgba(254,104,0,0) 25% ), #F5F7F9 !important; isolation: isolate; } /* ========================================================= 02. TECHNICAL BACKGROUND ========================================================= */ .palum-auto-quality::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(17,23,34,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(17,23,34,.018) 1px, transparent 1px ); background-size: 82px 82px; pointer-events: none; } /* decorative circle */ .palum-auto-quality::after { content: ""; position: absolute; width: 520px; height: 520px; right: -370px; bottom: -370px; z-index: 0; border: 1px solid rgba(254,104,0,.08); border-radius: 50%; pointer-events: none; } /* ========================================================= 03. INNER ========================================================= */ .palum-auto-quality .palum-auto-quality-inner { position: relative; z-index: 2; width: 100% !important; max-width: 1480px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* ========================================================= 04. HEADER ========================================================= */ .palum-auto-quality .palum-auto-quality-head { width: 100% !important; margin: 0 0 58px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; text-align: center !important; } /* ========================================================= 05. EYEBROW 64PX DECORATIVE LINES ========================================================= */ .palum-auto-quality .palum-auto-quality-eyebrow { position: relative; width: auto !important; margin: 0 !important; padding: 0 84px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* LEFT LINE */ .palum-auto-quality .palum-auto-quality-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 64px; height: 2px; background: var(--palum-orange); transform: translateY(-50%); } /* RIGHT LINE */ .palum-auto-quality .palum-auto-quality-eyebrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 64px; height: 2px; background: var(--palum-orange); transform: translateY(-50%); } .palum-auto-quality .palum-auto-quality-eyebrow .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; white-space: nowrap !important; } /* ========================================================= 06. TITLE ========================================================= */ .palum-auto-quality .palum-auto-quality-title { width: 100% !important; max-width: 900px !important; margin: 0 !important; text-align: center !important; } .palum-auto-quality .palum-auto-quality-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: clamp(44px,3.5vw,58px) !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -1.7px !important; text-align: center !important; } /* ========================================================= 07. INTRO ========================================================= */ .palum-auto-quality .palum-auto-quality-intro { width: 100% !important; max-width: 880px !important; margin: 0 auto !important; text-align: center !important; } .palum-auto-quality .palum-auto-quality-intro, .palum-auto-quality .palum-auto-quality-intro p, .palum-auto-quality .palum-auto-quality-intro span { margin: 0 !important; color: var(--palum-text) !important; font-size: 16.5px !important; line-height: 1.72 !important; font-weight: 400 !important; text-align: center !important; } /* ========================================================= 08. MAIN PANEL ========================================================= */ .palum-auto-quality .palum-auto-quality-main { width: 100% !important; display: grid !important; grid-template-columns: minmax(0,1.28fr) minmax(390px,.72fr) !important; gap: 0 !important; align-items: stretch !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid var(--palum-border) !important; border-radius: 10px !important; box-shadow: 0 24px 70px rgba(17,23,34,.055); } /* ========================================================= 09. LEFT WORKFLOW ========================================================= */ .palum-auto-quality .palum-auto-quality-workflow { width: 100% !important; padding: 42px 44px 44px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; background: #FFFFFF !important; } /* ========================================================= 10. WORKFLOW HEADER ========================================================= */ .palum-auto-quality .palum-auto-quality-workflow-head { width: 100% !important; margin: 0 0 32px !important; padding: 0 0 22px !important; display: flex !important; flex-direction: row !important; align-items: flex-end !important; justify-content: space-between !important; gap: 30px !important; border-bottom: 1px solid var(--palum-border) !important; } /* ========================================================= 11. WORKFLOW LABEL ========================================================= */ .palum-auto-quality .palum-auto-quality-workflow-label { width: auto !important; margin: 0 !important; } .palum-auto-quality .palum-auto-quality-workflow-label .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.25px !important; text-transform: uppercase !important; } /* ========================================================= 12. WORKFLOW CODE ========================================================= */ .palum-auto-quality .palum-auto-quality-workflow-code { width: auto !important; margin: 0 !important; } .palum-auto-quality .palum-auto-quality-workflow-code .elementor-heading-title { margin: 0 !important; color: #A0A8AF !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.1px !important; text-transform: uppercase !important; } /* ========================================================= 13. WORKFLOW LIST ========================================================= */ .palum-auto-quality .palum-auto-quality-workflow-list { position: relative; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; } /* vertical line */ .palum-auto-quality .palum-auto-quality-workflow-list::before { content: ""; position: absolute; left: 27px; top: 34px; bottom: 34px; width: 1px; z-index: 0; background: linear-gradient( 180deg, rgba(254,104,0,.62), rgba(254,104,0,.12) ); } /* ========================================================= 14. WORKFLOW STEP ========================================================= */ .palum-auto-quality .palum-auto-quality-step { position: relative; z-index: 1; width: 100% !important; padding: 0 0 30px !important; display: grid !important; grid-template-columns: 56px minmax(0,1fr) !important; gap: 22px !important; align-items: start !important; } .palum-auto-quality .palum-auto-quality-step-04 { padding-bottom: 0 !important; } /* ========================================================= 15. STEP NUMBER ========================================================= */ .palum-auto-quality .palum-auto-quality-step-number { position: relative; z-index: 3; width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #FFFFFF !important; border: 1px solid rgba(254,104,0,.24) !important; border-radius: 50% !important; box-shadow: 0 0 0 7px #FFFFFF; } .palum-auto-quality .palum-auto-quality-step-number .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1px !important; } /* ========================================================= 16. STEP COPY ========================================================= */ .palum-auto-quality .palum-auto-quality-step-copy { width: 100% !important; padding-top: 7px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; transition: transform .25s ease !important; } .palum-auto-quality .palum-auto-quality-step:hover .palum-auto-quality-step-copy { transform: translateX(5px); } /* ========================================================= 17. STEP TITLE ========================================================= */ .palum-auto-quality .palum-auto-quality-step-title { width: 100% !important; margin: 0 !important; } .palum-auto-quality .palum-auto-quality-step-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: 19px !important; line-height: 1.3 !important; font-weight: 700 !important; } /* ========================================================= 18. STEP TEXT ========================================================= */ .palum-auto-quality .palum-auto-quality-step-text { width: 100% !important; max-width: 680px !important; margin: 0 !important; } .palum-auto-quality .palum-auto-quality-step-text, .palum-auto-quality .palum-auto-quality-step-text p, .palum-auto-quality .palum-auto-quality-step-text span { margin: 0 !important; color: #6A747E !important; font-size: 12.5px !important; line-height: 1.7 !important; font-weight: 400 !important; } /* ========================================================= 19. RIGHT QUALITY FOCUS ========================================================= */ .palum-auto-quality .palum-auto-quality-focus { position: relative; width: 100% !important; padding: 42px 38px 40px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; overflow: hidden !important; background: linear-gradient( 145deg, #101821 0%, #151F29 100% ) !important; } /* subtle orange glow */ .palum-auto-quality .palum-auto-quality-focus::before { content: ""; position: absolute; width: 270px; height: 270px; right: -130px; top: -130px; border-radius: 50%; background: radial-gradient( circle, rgba(254,104,0,.15), rgba(254,104,0,0) 68% ); pointer-events: none; } /* ========================================================= 20. FOCUS HEADER ========================================================= */ .palum-auto-quality .palum-auto-quality-focus-head { position: relative; z-index: 2; width: 100% !important; margin: 0 0 26px !important; padding: 0 0 22px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } /* ========================================================= 21. FOCUS LABEL ========================================================= */ .palum-auto-quality .palum-auto-quality-focus-label { width: auto !important; margin: 0 !important; } .palum-auto-quality .palum-auto-quality-focus-label .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.25px !important; text-transform: uppercase !important; } /* ========================================================= 22. FOCUS TITLE ========================================================= */ .palum-auto-quality .palum-auto-quality-focus-title { width: 100% !important; max-width: 340px !important; margin: 0 !important; } .palum-auto-quality .palum-auto-quality-focus-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: 24px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -.4px !important; } /* ========================================================= 23. FOCUS LIST ========================================================= */ .palum-auto-quality .palum-auto-quality-focus-list { position: relative; z-index: 2; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; } /* ========================================================= 24. FOCUS ITEM ========================================================= */ .palum-auto-quality .palum-auto-quality-focus-item { position: relative; width: 100% !important; padding: 22px 0 22px 27px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; border-bottom: 1px solid rgba(255,255,255,.09) !important; } .palum-auto-quality .palum-auto-quality-focus-item-04 { border-bottom: 0 !important; } /* orange point */ .palum-auto-quality .palum-auto-quality-focus-item::before { content: ""; position: absolute; left: 0; top: 29px; width: 7px; height: 7px; border-radius: 50%; background: var(--palum-orange); box-shadow: 0 0 0 5px rgba(254,104,0,.07); } /* ========================================================= 25. FOCUS ITEM TITLE ========================================================= */ .palum-auto-quality .palum-auto-quality-focus-item-title { width: 100% !important; margin: 0 !important; } .palum-auto-quality .palum-auto-quality-focus-item-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 700 !important; } /* ========================================================= 26. FOCUS ITEM TEXT ========================================================= */ .palum-auto-quality .palum-auto-quality-focus-item-text { width: 100% !important; margin: 0 !important; } .palum-auto-quality .palum-auto-quality-focus-item-text, .palum-auto-quality .palum-auto-quality-focus-item-text p, .palum-auto-quality .palum-auto-quality-focus-item-text span { margin: 0 !important; color: rgba(255,255,255,.51) !important; font-size: 11.5px !important; line-height: 1.65 !important; font-weight: 400 !important; } /* ========================================================= 27. BOTTOM QUALITY NOTE ========================================================= */ .palum-auto-quality .palum-auto-quality-note { position: relative; width: 100% !important; margin: 32px 0 0 !important; padding: 30px 34px !important; display: grid !important; grid-template-columns: 245px minmax(0,1fr) !important; gap: 36px !important; align-items: center !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid #DEE4E8 !important; border-radius: 8px !important; box-shadow: 0 12px 35px rgba(17,23,34,.025); } /* left orange line */ .palum-auto-quality .palum-auto-quality-note::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--palum-orange); } /* ========================================================= 28. NOTE LABEL ========================================================= */ .palum-auto-quality .palum-auto-quality-note-label { width: 100% !important; margin: 0 !important; padding-right: 30px !important; border-right: 1px solid var(--palum-border) !important; } .palum-auto-quality .palum-auto-quality-note-label .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1.5 !important; font-weight: 700 !important; letter-spacing: 1.25px !important; text-transform: uppercase !important; } /* ========================================================= 29. NOTE COPY ========================================================= */ .palum-auto-quality .palum-auto-quality-note-copy { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } /* ========================================================= 30. NOTE TITLE ========================================================= */ .palum-auto-quality .palum-auto-quality-note-title { width: 100% !important; margin: 0 !important; } .palum-auto-quality .palum-auto-quality-note-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: 20px !important; line-height: 1.3 !important; font-weight: 700 !important; } /* ========================================================= 31. NOTE TEXT ========================================================= */ .palum-auto-quality .palum-auto-quality-note-text { width: 100% !important; max-width: 930px !important; margin: 0 !important; } .palum-auto-quality .palum-auto-quality-note-text, .palum-auto-quality .palum-auto-quality-note-text p, .palum-auto-quality .palum-auto-quality-note-text span { margin: 0 !important; color: #707A84 !important; font-size: 12px !important; line-height: 1.7 !important; font-weight: 400 !important; } /* ========================================================= 32. ELEMENTOR CLEANUP ========================================================= */ .palum-auto-quality .elementor-widget, .palum-auto-quality .elementor-widget-container { margin-bottom: 0 !important; } .palum-auto-quality .palum-auto-quality-head, .palum-auto-quality .palum-auto-quality-workflow, .palum-auto-quality .palum-auto-quality-workflow-list, .palum-auto-quality .palum-auto-quality-step-copy, .palum-auto-quality .palum-auto-quality-focus, .palum-auto-quality .palum-auto-quality-focus-list, .palum-auto-quality .palum-auto-quality-focus-item, .palum-auto-quality .palum-auto-quality-note-copy { row-gap: 0 !important; } /* ========================================================= 33. MEDIUM DESKTOP ========================================================= */ @media (min-width: 1181px) and (max-width: 1399px) { .palum-auto-quality { padding: 100px 28px 108px !important; } .palum-auto-quality .palum-auto-quality-title .elementor-heading-title { font-size: clamp(42px,3.8vw,52px) !important; } .palum-auto-quality .palum-auto-quality-main { grid-template-columns: minmax(0,1.22fr) minmax(360px,.78fr) !important; } .palum-auto-quality .palum-auto-quality-workflow { padding: 38px 36px 40px !important; } .palum-auto-quality .palum-auto-quality-focus { padding: 38px 32px !important; } } /* ========================================================= 34. TABLET ========================================================= */ @media (max-width: 1180px) { .palum-auto-quality { padding: 90px 30px 98px !important; } .palum-auto-quality .palum-auto-quality-main { grid-template-columns: 1fr !important; } .palum-auto-quality .palum-auto-quality-workflow { padding: 38px 34px 40px !important; } .palum-auto-quality .palum-auto-quality-focus { padding: 38px 34px !important; } .palum-auto-quality .palum-auto-quality-focus-list { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; column-gap: 30px !important; } .palum-auto-quality .palum-auto-quality-focus-item-03 { border-bottom: 0 !important; } .palum-auto-quality .palum-auto-quality-note { grid-template-columns: 210px minmax(0,1fr) !important; } } /* ========================================================= 35. MOBILE ========================================================= */ @media (max-width: 767px) { .palum-auto-quality { padding: 68px 20px 74px !important; } /* HEADER */ .palum-auto-quality .palum-auto-quality-head { margin-bottom: 40px !important; gap: 10px !important; } .palum-auto-quality .palum-auto-quality-eyebrow { padding: 0 55px !important; } .palum-auto-quality .palum-auto-quality-eyebrow::before, .palum-auto-quality .palum-auto-quality-eyebrow::after { width: 42px; } .palum-auto-quality .palum-auto-quality-eyebrow .elementor-heading-title { font-size: 10.5px !important; letter-spacing: 1.25px !important; } .palum-auto-quality .palum-auto-quality-title { max-width: 100% !important; } .palum-auto-quality .palum-auto-quality-title .elementor-heading-title { font-size: 35px !important; line-height: 1.08 !important; letter-spacing: -1px !important; } .palum-auto-quality .palum-auto-quality-intro { max-width: 100% !important; } .palum-auto-quality .palum-auto-quality-intro, .palum-auto-quality .palum-auto-quality-intro p { font-size: 15.5px !important; line-height: 1.65 !important; } /* WORKFLOW */ .palum-auto-quality .palum-auto-quality-workflow { padding: 28px 20px 30px !important; } .palum-auto-quality .palum-auto-quality-workflow-head { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; margin-bottom: 26px !important; } .palum-auto-quality .palum-auto-quality-workflow-list::before { left: 21px; top: 28px; bottom: 28px; } .palum-auto-quality .palum-auto-quality-step { grid-template-columns: 44px minmax(0,1fr) !important; gap: 15px !important; padding-bottom: 26px !important; } .palum-auto-quality .palum-auto-quality-step-04 { padding-bottom: 0 !important; } .palum-auto-quality .palum-auto-quality-step-number { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; box-shadow: 0 0 0 5px #FFFFFF; } .palum-auto-quality .palum-auto-quality-step-copy { padding-top: 2px !important; } .palum-auto-quality .palum-auto-quality-step-title .elementor-heading-title { font-size: 16.5px !important; } .palum-auto-quality .palum-auto-quality-step-text, .palum-auto-quality .palum-auto-quality-step-text p { font-size: 11.5px !important; } /* FOCUS */ .palum-auto-quality .palum-auto-quality-focus { padding: 30px 20px !important; } .palum-auto-quality .palum-auto-quality-focus-title .elementor-heading-title { font-size: 21px !important; } .palum-auto-quality .palum-auto-quality-focus-list { display: flex !important; flex-direction: column !important; } .palum-auto-quality .palum-auto-quality-focus-item-03 { border-bottom: 1px solid rgba(255,255,255,.09) !important; } /* NOTE */ .palum-auto-quality .palum-auto-quality-note { margin-top: 24px !important; padding: 25px 20px !important; grid-template-columns: 1fr !important; gap: 18px !important; } .palum-auto-quality .palum-auto-quality-note-label { padding: 0 0 15px !important; border-right: 0 !important; border-bottom: 1px solid var(--palum-border) !important; } .palum-auto-quality .palum-auto-quality-note-title .elementor-heading-title { font-size: 18px !important; } } /* ========================================================= 36. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .palum-auto-quality { padding-left: 18px !important; padding-right: 18px !important; } .palum-auto-quality .palum-auto-quality-title .elementor-heading-title { font-size: 32px !important; } .palum-auto-quality .palum-auto-quality-eyebrow { padding: 0 45px !important; } .palum-auto-quality .palum-auto-quality-eyebrow::before, .palum-auto-quality .palum-auto-quality-eyebrow::after { width: 34px; } } /* ========================================================= 37. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .palum-auto-quality *, .palum-auto-quality *::before, .palum-auto-quality *::after { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-552bf0b *//* ========================================================= PALUM AUTOMOTIVE PAGE SECTION 09 — AUTOMOTIVE MANUFACTURING FAQ Brand: #FE6800 Inner Max Width: 1480px FAQ Max Width: 1160px Desktop FAQ Row: 46px Elementor New Accordion / Nested Accordion ========================================================= */ /* ========================================================= 01. SECTION ========================================================= */ .palum-auto-faq { --palum-orange: #FE6800; --palum-heading: #111722; --palum-text: #66717E; --palum-line: #E2E7EB; position: relative; width: 100% !important; overflow: hidden; isolation: isolate; padding: 112px 42px 120px !important; background: radial-gradient( circle at 8% 15%, rgba(254, 104, 0, .045) 0%, rgba(254, 104, 0, 0) 25% ), #F6F8FA !important; } /* technical grid */ .palum-auto-faq::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(17, 23, 34, .014) 1px, transparent 1px ), linear-gradient( 90deg, rgba(17, 23, 34, .014) 1px, transparent 1px ); background-size: 84px 84px; pointer-events: none; } /* decorative circle */ .palum-auto-faq::after { content: ""; position: absolute; right: -350px; bottom: -370px; width: 510px; height: 510px; z-index: 0; border: 1px solid rgba(254, 104, 0, .07); border-radius: 50%; pointer-events: none; } /* ========================================================= 02. INNER ========================================================= */ .palum-auto-faq .palum-auto-faq-inner { position: relative; z-index: 2; width: 100% !important; max-width: 1480px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* ========================================================= 03. HEADER ========================================================= */ .palum-auto-faq .palum-auto-faq-head { width: 100% !important; margin: 0 0 56px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; text-align: center !important; } /* ========================================================= 04. EYEBROW ========================================================= */ .palum-auto-faq .palum-auto-faq-eyebrow { position: relative; width: auto !important; margin: 0 !important; padding: 0 84px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .palum-auto-faq .palum-auto-faq-eyebrow::before, .palum-auto-faq .palum-auto-faq-eyebrow::after { content: ""; position: absolute; top: 50%; width: 64px; height: 2px; background: var(--palum-orange); transform: translateY(-50%); } .palum-auto-faq .palum-auto-faq-eyebrow::before { left: 0; } .palum-auto-faq .palum-auto-faq-eyebrow::after { right: 0; } .palum-auto-faq .palum-auto-faq-eyebrow .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; white-space: nowrap !important; } /* ========================================================= 05. TITLE ========================================================= */ .palum-auto-faq .palum-auto-faq-title { width: 100% !important; max-width: 980px !important; margin: 0 !important; text-align: center !important; } .palum-auto-faq .palum-auto-faq-title .elementor-heading-title { margin: 0 !important; color: var(--palum-heading) !important; font-size: clamp(44px, 3.5vw, 58px) !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -1.7px !important; text-align: center !important; } /* ========================================================= 06. INTRO ========================================================= */ .palum-auto-faq .palum-auto-faq-intro { width: 100% !important; max-width: 820px !important; margin: 0 auto !important; text-align: center !important; } .palum-auto-faq .palum-auto-faq-intro, .palum-auto-faq .palum-auto-faq-intro p, .palum-auto-faq .palum-auto-faq-intro span { margin: 0 !important; color: var(--palum-text) !important; font-size: 16.5px !important; line-height: 1.72 !important; font-weight: 400 !important; text-align: center !important; } /* ========================================================= 07. FAQ WRAPPER ========================================================= */ .palum-auto-faq .palum-auto-faq-list { width: 100% !important; max-width: 1160px !important; margin: 0 auto !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid var(--palum-line) !important; border-radius: 10px !important; box-shadow: 0 24px 70px rgba(17, 23, 34, .045); } /* ========================================================= 08. ACCORDION WIDGET ========================================================= */ .palum-auto-faq .palum-auto-faq-accordion, .palum-auto-faq .palum-auto-faq-accordion .elementor-widget-container { width: 100% !important; margin: 0 !important; } /* ========================================================= 09. NEW ELEMENTOR ACCORDION ========================================================= */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion { width: 100% !important; margin: 0 !important; gap: 0 !important; counter-reset: palum-faq-counter; } /* ========================================================= 10. FAQ ITEM ========================================================= */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item { position: relative; width: 100% !important; margin: 0 !important; padding: 0 !important; counter-increment: palum-faq-counter; background: #FFFFFF !important; border: 0 !important; border-bottom: 1px solid var(--palum-line) !important; } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item:last-child { border-bottom: 0 !important; } /* ========================================================= 11. QUESTION ROW 46PX MIN HEIGHT ========================================================= */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title { position: relative; width: 100% !important; height: auto !important; min-height: 46px !important; margin: 0 !important; padding: 6px 28px !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 34px !important; column-gap: 14px !important; align-items: center !important; list-style: none !important; background: #FFFFFF !important; border: 0 !important; cursor: pointer; transition: background .25s ease !important; } /* hide native details arrow */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title::-webkit-details-marker { display: none !important; } /* hover */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item:not([open]) .e-n-accordion-item-title:hover { background: #FBFCFD !important; } /* active */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title { background: #FCFDFE !important; } /* active orange line */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title::after { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--palum-orange); } /* ========================================================= 12. AUTO NUMBER 01–06 ========================================================= */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title::before { content: counter( palum-faq-counter, decimal-leading-zero ); grid-column: 1; grid-row: 1; align-self: center; height: 28px; display: flex; align-items: center; justify-content: flex-start; color: var(--palum-orange); font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: 1px; } /* ========================================================= 13. QUESTION TEXT ========================================================= */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-text { grid-column: 2; grid-row: 1; align-self: center; width: 100% !important; min-height: 28px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; color: var(--palum-heading) !important; font-size: 16.5px !important; line-height: 1.2 !important; font-weight: 700 !important; text-decoration: none !important; } /* ========================================================= 14. RIGHT ICON ========================================================= */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-icon { position: relative; grid-column: 3; grid-row: 1; justify-self: end; align-self: center; width: 28px !important; height: 28px !important; min-width: 28px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; background: #F7F8FA !important; border: 1px solid #E1E6EA !important; border-radius: 50% !important; transition: background .25s ease, border-color .25s ease !important; } /* hide Elementor native icon */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-icon svg, .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-icon i, .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-icon span { opacity: 0 !important; visibility: hidden !important; position: absolute !important; } /* custom plus / minus */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-icon::before, .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-icon::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; background: var(--palum-orange); transform: translate(-50%, -50%); } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-icon::before { width: 10px; height: 2px; } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-icon::after { width: 2px; height: 10px; } /* active circle */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon { background: var(--palum-orange) !important; border-color: var(--palum-orange) !important; } /* active horizontal minus */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon::before { background: #FFFFFF; } /* hide vertical line => minus */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon::after { opacity: 0; } /* inactive hover */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item:not([open]) .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon { background: #FFFDFC !important; border-color: rgba(254, 104, 0, .30) !important; } /* ========================================================= 15. ANSWER ========================================================= */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item > .e-con { margin: 0 !important; padding: 2px 76px 16px 90px !important; background: #FCFDFE !important; } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item > .e-con p, .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item > .e-con span { max-width: 860px; margin: 0 !important; color: #68737D !important; font-size: 13px !important; line-height: 1.7 !important; font-weight: 400 !important; } /* ========================================================= 16. BOTTOM NOTE ========================================================= */ .palum-auto-faq .palum-auto-faq-note { width: 100% !important; max-width: 1160px !important; margin: 20px auto 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; text-align: center !important; } .palum-auto-faq .palum-auto-faq-note::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--palum-orange); } .palum-auto-faq .palum-auto-faq-note, .palum-auto-faq .palum-auto-faq-note p, .palum-auto-faq .palum-auto-faq-note span { margin: 0 !important; color: #8B949D !important; font-size: 10px !important; line-height: 1.5 !important; font-weight: 400 !important; } /* ========================================================= 17. ELEMENTOR CLEANUP ========================================================= */ .palum-auto-faq .elementor-widget { margin-bottom: 0 !important; } /* ========================================================= 18. MEDIUM DESKTOP ========================================================= */ @media (min-width: 1181px) and (max-width: 1399px) { .palum-auto-faq { padding: 100px 28px 108px !important; } .palum-auto-faq .palum-auto-faq-title .elementor-heading-title { font-size: clamp( 42px, 3.8vw, 52px ) !important; } .palum-auto-faq .palum-auto-faq-list, .palum-auto-faq .palum-auto-faq-note { max-width: 1100px !important; } } /* ========================================================= 19. TABLET ========================================================= */ @media (max-width: 1180px) { .palum-auto-faq { padding: 90px 30px 98px !important; } .palum-auto-faq .palum-auto-faq-list, .palum-auto-faq .palum-auto-faq-note { max-width: 100% !important; } } /* ========================================================= 20. MOBILE ========================================================= */ @media (max-width: 767px) { .palum-auto-faq { padding: 68px 20px 74px !important; } /* HEADER */ .palum-auto-faq .palum-auto-faq-head { margin-bottom: 40px !important; } .palum-auto-faq .palum-auto-faq-eyebrow { padding: 0 55px !important; } .palum-auto-faq .palum-auto-faq-eyebrow::before, .palum-auto-faq .palum-auto-faq-eyebrow::after { width: 42px; } .palum-auto-faq .palum-auto-faq-eyebrow .elementor-heading-title { font-size: 10.5px !important; letter-spacing: 1.25px !important; } .palum-auto-faq .palum-auto-faq-title { max-width: 100% !important; } .palum-auto-faq .palum-auto-faq-title .elementor-heading-title { font-size: 35px !important; line-height: 1.08 !important; letter-spacing: -1px !important; } .palum-auto-faq .palum-auto-faq-intro { max-width: 100% !important; } .palum-auto-faq .palum-auto-faq-intro, .palum-auto-faq .palum-auto-faq-intro p { font-size: 15.5px !important; line-height: 1.65 !important; } /* FAQ */ .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title { min-height: 50px !important; padding: 7px 16px !important; grid-template-columns: 30px minmax(0, 1fr) 30px !important; column-gap: 8px !important; } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title::before { height: 26px; font-size: 8.5px; } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-text { min-height: 26px !important; font-size: 15px !important; line-height: 1.3 !important; } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item > .e-con { padding: 2px 16px 16px 54px !important; } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item > .e-con p, .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item > .e-con span { font-size: 12px !important; line-height: 1.7 !important; } .palum-auto-faq .palum-auto-faq-note { margin-top: 18px !important; padding: 0 10px !important; } } /* ========================================================= 21. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .palum-auto-faq { padding-left: 18px !important; padding-right: 18px !important; } .palum-auto-faq .palum-auto-faq-eyebrow { padding: 0 45px !important; } .palum-auto-faq .palum-auto-faq-eyebrow::before, .palum-auto-faq .palum-auto-faq-eyebrow::after { width: 34px; } .palum-auto-faq .palum-auto-faq-title .elementor-heading-title { font-size: 32px !important; } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title { min-height: 50px !important; padding: 7px 13px !important; grid-template-columns: 24px minmax(0, 1fr) 28px !important; column-gap: 7px !important; } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item-title-text { font-size: 14.5px !important; } .palum-auto-faq .palum-auto-faq-accordion .e-n-accordion-item > .e-con { padding: 2px 13px 15px 44px !important; } } /* ========================================================= 22. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .palum-auto-faq *, .palum-auto-faq *::before, .palum-auto-faq *::after { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-88cc3b9 *//* ========================================================= PALUM AUTOMOTIVE PAGE SECTION 10 — FINAL CTA Brand: #FE6800 Max Width: 1480px ========================================================= */ /* ========================================================= 01. SECTION BASE ========================================================= */ .palum-auto-final { --palum-orange: #FE6800; --palum-dark: #0D151D; --palum-dark-2: #111B24; --palum-dark-3: #151F29; position: relative; width: 100% !important; overflow: hidden; padding: 112px 42px !important; background: radial-gradient( circle at 86% 15%, rgba(254,104,0,.14) 0%, rgba(254,104,0,0) 26% ), linear-gradient( 135deg, #0D151D 0%, #111B24 48%, #151F29 100% ) !important; isolation: isolate; } /* ========================================================= 02. BACKGROUND TECHNICAL GRID ========================================================= */ .palum-auto-final::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(255,255,255,.024) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.024) 1px, transparent 1px ); background-size: 88px 88px; pointer-events: none; } /* ========================================================= 03. DECORATIVE CIRCLE ========================================================= */ .palum-auto-final::after { content: ""; position: absolute; width: 620px; height: 620px; right: -350px; bottom: -410px; z-index: 0; border: 1px solid rgba(254,104,0,.11); border-radius: 50%; pointer-events: none; } /* ========================================================= 04. INNER ========================================================= */ .palum-auto-final .palum-auto-final-inner { position: relative; z-index: 2; width: 100% !important; max-width: 1480px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: minmax(0,1.2fr) minmax(420px,.8fr) !important; gap: 90px !important; align-items: center !important; } /* ========================================================= 05. LEFT CONTENT ========================================================= */ .palum-auto-final .palum-auto-final-content { width: 100% !important; max-width: 770px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= 06. EYEBROW ========================================================= */ .palum-auto-final .palum-auto-final-eyebrow { position: relative; width: auto !important; margin: 0 0 22px !important; padding-left: 46px !important; display: inline-flex !important; align-items: center !important; } /* short orange line */ .palum-auto-final .palum-auto-final-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 34px; height: 2px; background: var(--palum-orange); transform: translateY(-50%); } .palum-auto-final .palum-auto-final-eyebrow .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 11px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; } /* ========================================================= 07. MAIN TITLE ========================================================= */ .palum-auto-final .palum-auto-final-title { width: 100% !important; max-width: 760px !important; margin: 0 0 24px !important; } .palum-auto-final .palum-auto-final-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: clamp(46px,4.25vw,68px) !important; line-height: 1.03 !important; font-weight: 700 !important; letter-spacing: -2px !important; } /* highlighted phrase */ .palum-auto-final .palum-auto-final-title .elementor-heading-title span { color: var(--palum-orange) !important; } /* ========================================================= 08. DESCRIPTION ========================================================= */ .palum-auto-final .palum-auto-final-text { width: 100% !important; max-width: 690px !important; margin: 0 0 34px !important; } .palum-auto-final .palum-auto-final-text, .palum-auto-final .palum-auto-final-text p, .palum-auto-final .palum-auto-final-text span { margin: 0 !important; color: rgba(255,255,255,.57) !important; font-size: 16px !important; line-height: 1.72 !important; font-weight: 400 !important; } /* ========================================================= 09. BUTTON AREA ========================================================= */ .palum-auto-final .palum-auto-final-actions { width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; } /* ========================================================= 10. BUTTON BASE ========================================================= */ .palum-auto-final .palum-auto-final-primary, .palum-auto-final .palum-auto-final-secondary { width: auto !important; margin: 0 !important; } .palum-auto-final .palum-auto-final-primary .elementor-button, .palum-auto-final .palum-auto-final-secondary .elementor-button { min-height: 50px !important; padding: 0 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-radius: 5px !important; font-size: 12px !important; line-height: 1 !important; font-weight: 700 !important; text-decoration: none !important; transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease !important; } /* ========================================================= 11. PRIMARY BUTTON ========================================================= */ .palum-auto-final .palum-auto-final-primary .elementor-button { color: #FFFFFF !important; background: var(--palum-orange) !important; border: 1px solid var(--palum-orange) !important; } .palum-auto-final .palum-auto-final-primary .elementor-button:hover { color: #FFFFFF !important; background: #F05F00 !important; border-color: #F05F00 !important; transform: translateY(-2px); } /* ========================================================= 12. SECONDARY BUTTON ========================================================= */ .palum-auto-final .palum-auto-final-secondary .elementor-button { color: rgba(255,255,255,.85) !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.17) !important; } .palum-auto-final .palum-auto-final-secondary .elementor-button:hover { color: #FFFFFF !important; background: rgba(255,255,255,.045) !important; border-color: rgba(254,104,0,.65) !important; transform: translateY(-2px); } /* ========================================================= 13. BUTTON ICON ========================================================= */ .palum-auto-final .palum-auto-final-actions .elementor-button-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; line-height: 1 !important; } .palum-auto-final .palum-auto-final-actions .elementor-button-icon svg { width: 14px !important; height: 14px !important; } /* ========================================================= 14. SUPPORT AREA ========================================================= */ .palum-auto-final .palum-auto-final-support { width: 100% !important; margin: 30px 0 0 !important; padding: 24px 0 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px 24px !important; border-top: 1px solid rgba(255,255,255,.09) !important; } /* ========================================================= 15. SUPPORT ITEM ========================================================= */ .palum-auto-final .palum-auto-final-support-item { position: relative; width: auto !important; margin: 0 !important; padding-left: 13px !important; flex: 0 0 auto !important; } /* orange dot */ .palum-auto-final .palum-auto-final-support-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--palum-orange); transform: translateY(-50%); } .palum-auto-final .palum-auto-final-support-item .elementor-heading-title { margin: 0 !important; color: rgba(255,255,255,.38) !important; font-size: 9.5px !important; line-height: 1.4 !important; font-weight: 600 !important; } /* ========================================================= 16. RIGHT PROJECT PANEL ========================================================= */ .palum-auto-final .palum-auto-final-panel { position: relative; width: 100% !important; overflow: hidden !important; padding: 40px 36px 34px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; background: linear-gradient( 145deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.025) 100% ) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 10px !important; box-shadow: 0 30px 90px rgba(0,0,0,.18); backdrop-filter: blur(8px); } /* ========================================================= 17. PANEL ORANGE CORNER ========================================================= */ .palum-auto-final .palum-auto-final-panel::before { content: ""; position: absolute; right: 0; top: 0; width: 74px; height: 74px; border-top: 2px solid var(--palum-orange); border-right: 2px solid var(--palum-orange); opacity: .6; pointer-events: none; } /* subtle inner glow */ .palum-auto-final .palum-auto-final-panel::after { content: ""; position: absolute; right: -100px; top: -100px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient( circle, rgba(254,104,0,.12), rgba(254,104,0,0) 68% ); pointer-events: none; } /* ========================================================= 18. PANEL HEADER ========================================================= */ .palum-auto-final .palum-auto-final-panel-head { position: relative; z-index: 2; width: 100% !important; padding: 0 0 25px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; border-bottom: 1px solid rgba(255,255,255,.09) !important; } /* ========================================================= 19. PANEL LABEL ========================================================= */ .palum-auto-final .palum-auto-final-panel-label { width: auto !important; margin: 0 !important; } .palum-auto-final .palum-auto-final-panel-label .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.25px !important; text-transform: uppercase !important; } /* ========================================================= 20. PANEL TITLE ========================================================= */ .palum-auto-final .palum-auto-final-panel-title { width: 100% !important; max-width: 350px !important; margin: 0 !important; } .palum-auto-final .palum-auto-final-panel-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: 26px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -.5px !important; } /* ========================================================= 21. INPUT LIST ========================================================= */ .palum-auto-final .palum-auto-final-inputs { position: relative; z-index: 2; width: 100% !important; margin: 6px 0 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; } /* ========================================================= 22. INPUT ITEM ========================================================= */ .palum-auto-final .palum-auto-final-input { width: 100% !important; padding: 20px 0 !important; display: grid !important; grid-template-columns: 42px minmax(0,1fr) !important; gap: 15px !important; align-items: start !important; border-bottom: 1px solid rgba(255,255,255,.075) !important; } .palum-auto-final .palum-auto-final-input-04 { border-bottom: 0 !important; } /* ========================================================= 23. INPUT NUMBER ========================================================= */ .palum-auto-final .palum-auto-final-input-number { width: auto !important; margin: 2px 0 0 !important; } .palum-auto-final .palum-auto-final-input-number .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1px !important; } /* ========================================================= 24. INPUT COPY ========================================================= */ .palum-auto-final .palum-auto-final-input-copy { width: 100% !important; min-width: 0; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; } /* ========================================================= 25. INPUT TITLE ========================================================= */ .palum-auto-final .palum-auto-final-input-title { width: 100% !important; margin: 0 !important; } .palum-auto-final .palum-auto-final-input-title .elementor-heading-title { margin: 0 !important; color: rgba(255,255,255,.88) !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 700 !important; } /* ========================================================= 26. INPUT TEXT ========================================================= */ .palum-auto-final .palum-auto-final-input-text { width: 100% !important; margin: 0 !important; } .palum-auto-final .palum-auto-final-input-text, .palum-auto-final .palum-auto-final-input-text p, .palum-auto-final .palum-auto-final-input-text span { margin: 0 !important; color: rgba(255,255,255,.40) !important; font-size: 10.5px !important; line-height: 1.55 !important; font-weight: 400 !important; } /* ========================================================= 27. PANEL FOOTER ========================================================= */ .palum-auto-final .palum-auto-final-panel-footer { position: relative; z-index: 2; width: 100% !important; margin: 8px 0 0 !important; padding: 21px 0 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; border-top: 1px solid rgba(255,255,255,.09) !important; } /* ========================================================= 28. PANEL FOOTER LABEL ========================================================= */ .palum-auto-final .palum-auto-final-panel-footer-label, .palum-auto-final .palum-auto-final-panel-footer-code { width: auto !important; margin: 0 !important; } .palum-auto-final .palum-auto-final-panel-footer-label .elementor-heading-title { margin: 0 !important; color: rgba(255,255,255,.27) !important; font-size: 8px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.1px !important; text-transform: uppercase !important; } /* ========================================================= 29. PANEL FOOTER CODE ========================================================= */ .palum-auto-final .palum-auto-final-panel-footer-code .elementor-heading-title { margin: 0 !important; color: rgba(255,255,255,.48) !important; font-size: 8px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; white-space: nowrap !important; } /* ========================================================= 30. ELEMENTOR CLEANUP ========================================================= */ .palum-auto-final .elementor-widget, .palum-auto-final .elementor-widget-container { margin-bottom: 0 !important; } .palum-auto-final .palum-auto-final-content, .palum-auto-final .palum-auto-final-panel, .palum-auto-final .palum-auto-final-panel-head, .palum-auto-final .palum-auto-final-inputs, .palum-auto-final .palum-auto-final-input-copy { row-gap: 0 !important; } /* ========================================================= 31. MEDIUM DESKTOP ========================================================= */ @media (min-width:1181px) and (max-width:1399px) { .palum-auto-final { padding: 100px 28px !important; } .palum-auto-final .palum-auto-final-inner { grid-template-columns: minmax(0,1.15fr) minmax(390px,.85fr) !important; gap: 60px !important; } .palum-auto-final .palum-auto-final-title .elementor-heading-title { font-size: clamp(44px,4.4vw,58px) !important; } .palum-auto-final .palum-auto-final-panel { padding: 36px 30px 30px !important; } } /* ========================================================= 32. TABLET ========================================================= */ @media (max-width:1180px) { .palum-auto-final { padding: 90px 30px !important; } .palum-auto-final .palum-auto-final-inner { grid-template-columns: 1fr !important; gap: 50px !important; } .palum-auto-final .palum-auto-final-content { max-width: 850px !important; } .palum-auto-final .palum-auto-final-panel { max-width: 760px !important; } } /* ========================================================= 33. MOBILE ========================================================= */ @media (max-width:767px) { .palum-auto-final { padding: 70px 20px !important; } .palum-auto-final .palum-auto-final-inner { gap: 38px !important; } /* EYEBROW */ .palum-auto-final .palum-auto-final-eyebrow { margin-bottom: 18px !important; padding-left: 38px !important; } .palum-auto-final .palum-auto-final-eyebrow::before { width: 26px; } .palum-auto-final .palum-auto-final-eyebrow .elementor-heading-title { font-size: 10px !important; letter-spacing: 1.3px !important; } /* TITLE */ .palum-auto-final .palum-auto-final-title { margin-bottom: 20px !important; } .palum-auto-final .palum-auto-final-title .elementor-heading-title { font-size: 38px !important; line-height: 1.05 !important; letter-spacing: -1.2px !important; } /* TEXT */ .palum-auto-final .palum-auto-final-text { margin-bottom: 28px !important; } .palum-auto-final .palum-auto-final-text, .palum-auto-final .palum-auto-final-text p { font-size: 15px !important; line-height: 1.65 !important; } /* BUTTONS */ .palum-auto-final .palum-auto-final-actions { flex-direction: column !important; align-items: stretch !important; } .palum-auto-final .palum-auto-final-primary, .palum-auto-final .palum-auto-final-secondary { width: 100% !important; } .palum-auto-final .palum-auto-final-primary .elementor-button, .palum-auto-final .palum-auto-final-secondary .elementor-button { width: 100% !important; } /* SUPPORT */ .palum-auto-final .palum-auto-final-support { margin-top: 25px !important; padding-top: 20px !important; flex-direction: column !important; align-items: flex-start !important; gap: 9px !important; } /* PANEL */ .palum-auto-final .palum-auto-final-panel { padding: 30px 20px 26px !important; } .palum-auto-final .palum-auto-final-panel-title .elementor-heading-title { font-size: 22px !important; } .palum-auto-final .palum-auto-final-input { grid-template-columns: 34px minmax(0,1fr) !important; gap: 10px !important; padding: 17px 0 !important; } .palum-auto-final .palum-auto-final-panel-footer { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } } /* ========================================================= 34. SMALL MOBILE ========================================================= */ @media (max-width:480px) { .palum-auto-final { padding-left: 18px !important; padding-right: 18px !important; } .palum-auto-final .palum-auto-final-title .elementor-heading-title { font-size: 34px !important; } .palum-auto-final .palum-auto-final-panel { padding: 26px 18px 24px !important; } } /* ========================================================= 35. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .palum-auto-final *, .palum-auto-final *::before, .palum-auto-final *::after { transition: none !important; } } /* ========================================================= SECTION 10 — PANEL CORNER POSITION FIX ========================================================= */ /* 强制整个右侧大面板成为定位基准 */ .palum-auto-final .palum-auto-final-panel { position: relative !important; } /* 橙色工程角固定到大面板右上角 */ .palum-auto-final .palum-auto-final-panel::before { content: "" !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important; width: 74px !important; height: 74px !important; border-top: 2px solid #FE6800 !important; border-right: 2px solid #FE6800 !important; border-bottom: 0 !important; border-left: 0 !important; opacity: .6 !important; pointer-events: none !important; z-index: 5 !important; }/* End custom CSS */