.elementor-797 .elementor-element.elementor-element-8d0526d{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .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-797 .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-797 .elementor-element.elementor-element-bc03e66 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-797 .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-797 .elementor-element.elementor-element-83783db{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-04386f9{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-d949193{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-c5f7583{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .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-797 .elementor-element.elementor-element-4182c54{--display:flex;}.elementor-797 .elementor-element.elementor-element-6e619b1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-797 .elementor-element.elementor-element-8988010{--display:flex;}.elementor-797 .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-797 .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-797 .elementor-element.elementor-element-f6e75a9{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-54fa0e4{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-554ba09{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-157c9ed{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-79aa1fd{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-34f1a20{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-4bf6a90{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-d87f587{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-797 .elementor-element.elementor-element-b3c664a{--display:flex;}.elementor-797 .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-797 .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-797 .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-797 .elementor-element.elementor-element-440aff7.elementor-element{--align-self:center;}.elementor-797 .elementor-element.elementor-element-f1d961b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-797 .elementor-element.elementor-element-885c098{--display:flex;}.elementor-797 .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-797 .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-797 .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-797 .elementor-element.elementor-element-e71b8f8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-797 .elementor-element.elementor-element-d0068cb{--display:flex;}.elementor-797 .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-797 .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-797 .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-797 .elementor-element.elementor-element-535b45a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-797 .elementor-element.elementor-element-fbdf3e3{--display:flex;}.elementor-797 .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-797 .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-797 .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-797 .elementor-element.elementor-element-a004549{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-443e9b6{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-2cfad4e{--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-797 .elementor-element.elementor-element-52a23ec{--display:flex;}.elementor-797 .elementor-element.elementor-element-13e51eb{--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-797 .elementor-element.elementor-element-c3a875d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-797 .elementor-element.elementor-element-ecf5bc0{--display:flex;}.elementor-797 .elementor-element.elementor-element-d33f220{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-f300f2a{--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-797 .elementor-element.elementor-element-1326019{--display:flex;}.elementor-797 .elementor-element.elementor-element-0346804 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:12px;font-weight:600;letter-spacing:0.6px;color:#C2C2C2;}.elementor-797 .elementor-element.elementor-element-e1ceba9{--display:flex;}.elementor-797 .elementor-element.elementor-element-e3de048 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:12px;font-weight:600;letter-spacing:0.6px;color:#C2C2C2;}.elementor-797 .elementor-element.elementor-element-11c9de2{--display:flex;}.elementor-797 .elementor-element.elementor-element-a91eedd .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:12px;font-weight:600;letter-spacing:0.6px;color:#C2C2C2;}.elementor-797 .elementor-element.elementor-element-b406280{--display:flex;}.elementor-797 .elementor-element.elementor-element-e026165{--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-797 .elementor-element.elementor-element-c1bdc03{--display:flex;}.elementor-797 .elementor-element.elementor-element-45ab80b{--display:flex;}.elementor-797 .elementor-element.elementor-element-d1bc835{--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-797 .elementor-element.elementor-element-2cafbb8{--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-797 .elementor-element.elementor-element-f1ff460{--display:flex;}.elementor-797 .elementor-element.elementor-element-44d0ecf{--display:flex;}.elementor-797 .elementor-element.elementor-element-576a182{--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-797 .elementor-element.elementor-element-460836b{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-90c49ea{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-910f1b6{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-797 .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-797 .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-797 .elementor-element.elementor-element-44d5ac3{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-6949244{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-9e7f589{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .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-797 .elementor-element.elementor-element-85bee06{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-7a3a436{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-83ac84a{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .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-797 .elementor-element.elementor-element-8847e6b{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-39811f6{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-3f5a061{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .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-797 .elementor-element.elementor-element-0cb91ff{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-675d42c{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-5be5a32{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .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-797 .elementor-element.elementor-element-d7e5ba0{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-182c661{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-3ac06ea{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .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-797 .elementor-element.elementor-element-e2e2218{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-797 .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-797 .elementor-element.elementor-element-4f2d273{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-797 .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-797 .elementor-element.elementor-element-53466c0{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-5d60928{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-2e463ec{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-13bbc29{--display:flex;}.elementor-797 .elementor-element.elementor-element-e49401c{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-e312c41{--display:flex;}.elementor-797 .elementor-element.elementor-element-3ad2e78{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-797 .elementor-element.elementor-element-db03ef8{--display:flex;}.elementor-797 .elementor-element.elementor-element-4e00eff{--display:flex;}.elementor-797 .elementor-element.elementor-element-b2c0322{--display:flex;}.elementor-797 .elementor-element.elementor-element-18566b3{--display:flex;}.elementor-797 .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-797 .elementor-element.elementor-element-197263f{--display:flex;}.elementor-797 .elementor-element.elementor-element-552bf0b{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-7e5214c{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-7b2701f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-797 .elementor-element.elementor-element-c626eba{--display:flex;}.elementor-797 .elementor-element.elementor-element-ec5ec6a{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-a1d0b16{--display:flex;}.elementor-797 .elementor-element.elementor-element-33a4ce7{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-336b7ed{--display:flex;}.elementor-797 .elementor-element.elementor-element-18d4690{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-3c6fc8a{--display:flex;}.elementor-797 .elementor-element.elementor-element-25244bc{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .elementor-element.elementor-element-073cd80{--display:flex;}.elementor-797 .elementor-element.elementor-element-93707fa{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .elementor-element.elementor-element-88cc3b9{--display:flex;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-797 .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-797 .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-797 .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-797 .elementor-element.elementor-element-defdac7 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-797 .elementor-element.elementor-element-0eb0d3b .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-797 .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;}:root{--page-title-display:none;}/* 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-a004549 *//* ========================================================= PALUM HOME APPLIANCES SELECTED HOME APPLIANCE PROJECTS Brand: #FE6800 Max Width: 1480px ========================================================= */ /* ========================================================= 01. SECTION BASE ========================================================= */ .palum-home-projects { --palum-orange: #FE6800; --palum-navy: #101F3F; --palum-text: #111722; --palum-muted: #68737D; --palum-line: rgba(16,31,63,.10); --palum-soft: #F8FAFB; --palum-card: #FFFFFF; position: relative; width: 100% !important; overflow: hidden; padding: 110px 36px 118px !important; background: radial-gradient( circle at 93% 8%, rgba(254,104,0,.055) 0%, rgba(254,104,0,0) 23% ), linear-gradient( rgba(16,31,63,.024) 1px, transparent 1px ), linear-gradient( 90deg, rgba(16,31,63,.024) 1px, transparent 1px ), #F8FAFB !important; background-size: auto, 84px 84px, 84px 84px, auto !important; isolation: isolate; } /* decorative circle */ .palum-home-projects::before { content: ""; position: absolute; width: 470px; height: 470px; left: -290px; top: -210px; z-index: 0; border: 1px solid rgba(254,104,0,.13); border-radius: 50%; pointer-events: none; } /* small orange decorative line */ .palum-home-projects::after { content: ""; position: absolute; right: 0; top: 165px; width: 74px; height: 2px; z-index: 0; background: rgba(254,104,0,.35); pointer-events: none; } /* ========================================================= 02. INNER ========================================================= */ .palum-home-projects .palum-home-projects-inner { position: relative; z-index: 2; width: 100% !important; max-width: 1480px !important; margin: 0 auto !important; padding: 0 !important; } /* ========================================================= 03. SECTION HEADER ========================================================= */ .palum-home-projects .palum-home-projects-head { width: 100% !important; margin: 0 0 58px !important; display: grid !important; grid-template-columns: minmax(0, .98fr) minmax(420px, .82fr) !important; gap: 90px !important; align-items: end !important; } /* ========================================================= 04. HEADER LEFT ========================================================= */ .palum-home-projects .palum-home-projects-head-left { width: 100% !important; min-width: 0; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= 05. EYEBROW ========================================================= */ .palum-home-projects .palum-home-projects-eyebrow { position: relative; width: auto !important; margin: 0 0 18px !important; padding-left: 46px !important; } .palum-home-projects .palum-home-projects-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 34px; height: 2px; background: var(--palum-orange); transform: translateY(-50%); } .palum-home-projects .palum-home-projects-eyebrow .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 11px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: 1.55px !important; text-transform: uppercase !important; } /* ========================================================= 06. MAIN TITLE ========================================================= */ .palum-home-projects .palum-home-projects-title { width: 100% !important; max-width: 780px !important; margin: 0 !important; } .palum-home-projects .palum-home-projects-title .elementor-heading-title { margin: 0 !important; color: var(--palum-text) !important; font-size: clamp(46px,4.25vw,68px) !important; line-height: 1.02 !important; font-weight: 700 !important; letter-spacing: -2px !important; } .palum-home-projects .palum-home-projects-title .elementor-heading-title span { color: var(--palum-orange) !important; } /* ========================================================= 07. HEADER INTRO ========================================================= */ .palum-home-projects .palum-home-projects-intro { width: 100% !important; max-width: 590px !important; margin: 0 0 5px !important; justify-self: end !important; } .palum-home-projects .palum-home-projects-intro, .palum-home-projects .palum-home-projects-intro p, .palum-home-projects .palum-home-projects-intro span { color: #66727D !important; font-size: 16px !important; line-height: 1.78 !important; font-weight: 400 !important; } .palum-home-projects .palum-home-projects-intro p { margin: 0 !important; } /* ========================================================= 08. PROJECT GRID ========================================================= */ .palum-home-projects .palum-home-projects-grid { width: 100% !important; display: grid !important; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr) !important; gap: 22px !important; align-items: stretch !important; } /* ========================================================= 09. FEATURED PROJECT CARD ========================================================= */ .palum-home-projects .palum-home-projects-featured { position: relative; width: 100% !important; min-width: 0; min-height: 640px; overflow: hidden !important; display: grid !important; grid-template-rows: minmax(430px,1fr) auto !important; background: var(--palum-card) !important; border: 1px solid var(--palum-line) !important; box-shadow: 0 20px 54px rgba(16,31,63,.075); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important; } .palum-home-projects .palum-home-projects-featured:hover { transform: translateY(-4px); border-color: rgba(254,104,0,.20) !important; box-shadow: 0 28px 70px rgba(16,31,63,.10); } /* ========================================================= 10. FEATURED IMAGE AREA ========================================================= */ .palum-home-projects .palum-home-projects-media { position: relative; width: 100% !important; min-height: 430px !important; overflow: hidden !important; background: #D9DFE3 !important; } /* image widget */ .palum-home-projects .palum-home-projects-media > .elementor-widget-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; } .palum-home-projects .palum-home-projects-media > .elementor-widget-image .elementor-widget-container { width: 100% !important; height: 100% !important; } .palum-home-projects .palum-home-projects-media > .elementor-widget-image img { display: block !important; width: 100% !important; height: 100% !important; min-height: 430px !important; object-fit: cover !important; object-position: center center !important; transition: transform .6s cubic-bezier(.2,.65,.3,1) !important; } .palum-home-projects .palum-home-projects-featured:hover .palum-home-projects-media > .elementor-widget-image img { transform: scale(1.025); } /* subtle image overlay */ .palum-home-projects .palum-home-projects-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(8,15,21,.04) 0%, rgba(8,15,21,0) 50%, rgba(8,15,21,.12) 100% ); pointer-events: none; } /* ========================================================= 11. IMAGE LABEL ========================================================= */ .palum-home-projects .palum-home-projects-media-label { position: absolute !important; left: 24px !important; top: 22px !important; z-index: 4; width: auto !important; margin: 0 !important; padding: 9px 12px !important; background: rgba(44,53,60,.92) !important; border-radius: 3px; } .palum-home-projects .palum-home-projects-media-label .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: .85px !important; text-transform: uppercase !important; } /* ========================================================= 12. PROJECT PROOF LABEL ========================================================= */ .palum-home-projects .palum-home-projects-proof { position: absolute !important; right: 24px !important; top: 24px !important; z-index: 4; width: auto !important; margin: 0 !important; } .palum-home-projects .palum-home-projects-proof .elementor-heading-title { margin: 0 !important; color: rgba(255,255,255,.92) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-shadow: 0 1px 4px rgba(0,0,0,.30); } /* ========================================================= 13. FEATURED BODY ========================================================= */ .palum-home-projects .palum-home-projects-body { width: 100% !important; padding: 30px 32px 32px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; background: #FFFFFF !important; } /* ========================================================= 14. PROJECT NUMBER ========================================================= */ .palum-home-projects .palum-home-projects-no { width: auto !important; margin: 0 0 10px !important; } .palum-home-projects .palum-home-projects-no .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 10px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; } /* ========================================================= 15. PROJECT TITLE ========================================================= */ .palum-home-projects .palum-home-projects-card-title { width: 100% !important; margin: 0 0 12px !important; } .palum-home-projects .palum-home-projects-card-title .elementor-heading-title { margin: 0 !important; color: #18202A !important; font-size: 28px !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -.7px !important; } /* ========================================================= 16. PROJECT TEXT ========================================================= */ .palum-home-projects .palum-home-projects-card-text { width: 100% !important; margin: 0 !important; } .palum-home-projects .palum-home-projects-card-text, .palum-home-projects .palum-home-projects-card-text p, .palum-home-projects .palum-home-projects-card-text span { color: #69757F !important; font-size: 13.5px !important; line-height: 1.68 !important; font-weight: 400 !important; } .palum-home-projects .palum-home-projects-card-text p { margin: 0 !important; } /* ========================================================= 17. FEATURED META GRID ========================================================= */ .palum-home-projects .palum-home-projects-meta { width: 100% !important; margin: 24px 0 0 !important; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 10px !important; } /* ========================================================= 18. FEATURED META ITEM ========================================================= */ .palum-home-projects .palum-home-projects-meta-item { width: 100% !important; min-width: 0; padding: 13px 14px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 6px !important; background: #FAFBFB !important; border: 1px solid #E1E6E9 !important; } /* first heading = label */ .palum-home-projects .palum-home-projects-meta-item > .elementor-widget-heading:first-child .elementor-heading-title { margin: 0 !important; color: #9AA3AA !important; font-size: 8px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: .9px !important; text-transform: uppercase !important; } /* last heading = value */ .palum-home-projects .palum-home-projects-meta-item > .elementor-widget-heading:last-child .elementor-heading-title { margin: 0 !important; color: #18202A !important; font-size: 11px !important; line-height: 1.38 !important; font-weight: 700 !important; } /* fallback in case Elementor adds wrappers */ .palum-home-projects .palum-home-projects-meta-item .elementor-widget-heading { margin: 0 !important; } /* ========================================================= 19. RIGHT SIDE ========================================================= */ .palum-home-projects .palum-home-projects-side { width: 100% !important; min-width: 0; display: grid !important; grid-template-rows: repeat(2,minmax(0,1fr)) !important; gap: 22px !important; } /* ========================================================= 20. SMALL PROJECT CARD ========================================================= */ .palum-home-projects .palum-home-projects-small { position: relative; width: 100% !important; min-width: 0; min-height: 309px; overflow: hidden !important; display: grid !important; grid-template-columns: 44% 56% !important; background: #FFFFFF !important; border: 1px solid var(--palum-line) !important; box-shadow: 0 20px 54px rgba(16,31,63,.07); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important; } .palum-home-projects .palum-home-projects-small:hover { transform: translateY(-3px); border-color: rgba(254,104,0,.20) !important; box-shadow: 0 26px 62px rgba(16,31,63,.095); } /* ========================================================= 21. SMALL CARD MEDIA ========================================================= */ .palum-home-projects .palum-home-projects-small-media { position: relative; width: 100% !important; min-width: 0; min-height: 100% !important; overflow: hidden !important; background: #D9DFE3 !important; } .palum-home-projects .palum-home-projects-small-media > .elementor-widget-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; } .palum-home-projects .palum-home-projects-small-media > .elementor-widget-image .elementor-widget-container { width: 100% !important; height: 100% !important; } .palum-home-projects .palum-home-projects-small-media > .elementor-widget-image img { display: block !important; width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center center !important; transition: transform .6s cubic-bezier(.2,.65,.3,1) !important; } .palum-home-projects .palum-home-projects-small:hover .palum-home-projects-small-media > .elementor-widget-image img { transform: scale(1.035); } .palum-home-projects .palum-home-projects-small-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(8,15,21,.04) 0%, rgba(8,15,21,0) 60%, rgba(8,15,21,.10) 100% ); pointer-events: none; } /* small card image label */ .palum-home-projects .palum-home-projects-small-media .palum-home-projects-media-label { left: 18px !important; top: 18px !important; padding: 8px 10px !important; } .palum-home-projects .palum-home-projects-small-media .palum-home-projects-media-label .elementor-heading-title { font-size: 8px !important; letter-spacing: .75px !important; } /* ========================================================= 22. SMALL CARD BODY ========================================================= */ .palum-home-projects .palum-home-projects-small-body { width: 100% !important; min-width: 0; padding: 28px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; } .palum-home-projects .palum-home-projects-small .palum-home-projects-card-title .elementor-heading-title { font-size: 22px !important; line-height: 1.15 !important; letter-spacing: -.45px !important; } /* ========================================================= 23. SMALL CARD FOOTER ========================================================= */ .palum-home-projects .palum-home-projects-small-footer { width: 100% !important; margin: 22px 0 0 !important; padding: 18px 0 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; border-top: 1px solid rgba(16,31,63,.10) !important; } /* ========================================================= 24. SMALL FOOTER LEFT ========================================================= */ .palum-home-projects .palum-home-projects-part-type { width: auto !important; margin: 0 !important; } .palum-home-projects .palum-home-projects-part-type .elementor-heading-title { margin: 0 !important; color: #7D8790 !important; font-size: 9.5px !important; line-height: 1.45 !important; font-weight: 500 !important; } /* ========================================================= 25. SMALL FOOTER RIGHT ========================================================= */ .palum-home-projects .palum-home-projects-process { width: auto !important; margin: 0 !important; } .palum-home-projects .palum-home-projects-process .elementor-heading-title { margin: 0 !important; color: var(--palum-orange) !important; font-size: 8.5px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: .75px !important; text-transform: uppercase !important; white-space: nowrap !important; } /* ========================================================= 26. ELEMENTOR WIDTH NORMALIZATION ========================================================= */ .palum-home-projects .palum-home-projects-grid, .palum-home-projects .palum-home-projects-featured, .palum-home-projects .palum-home-projects-side, .palum-home-projects .palum-home-projects-small, .palum-home-projects .palum-home-projects-media, .palum-home-projects .palum-home-projects-small-media, .palum-home-projects .palum-home-projects-body, .palum-home-projects .palum-home-projects-small-body, .palum-home-projects .palum-home-projects-meta, .palum-home-projects .palum-home-projects-small-footer { --width: 100% !important; } /* ========================================================= 27. LARGE / MEDIUM DESKTOP ========================================================= */ @media (min-width: 1181px) and (max-width: 1399px) { .palum-home-projects { padding: 100px 28px 108px !important; } .palum-home-projects .palum-home-projects-head { grid-template-columns: minmax(0,1fr) minmax(390px,.75fr) !important; gap: 60px !important; margin-bottom: 52px !important; } .palum-home-projects .palum-home-projects-title .elementor-heading-title { font-size: clamp(44px,4.5vw,58px) !important; } .palum-home-projects .palum-home-projects-grid { grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr) !important; } .palum-home-projects .palum-home-projects-small-body { padding: 24px !important; } .palum-home-projects .palum-home-projects-small .palum-home-projects-card-title .elementor-heading-title { font-size: 20px !important; } } /* ========================================================= 28. TABLET ========================================================= */ @media (max-width: 1180px) { .palum-home-projects { padding: 90px 30px 96px !important; } /* HEADER */ .palum-home-projects .palum-home-projects-head { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 48px !important; } .palum-home-projects .palum-home-projects-intro { max-width: 720px !important; justify-self: start !important; } .palum-home-projects .palum-home-projects-title { max-width: 800px !important; } .palum-home-projects .palum-home-projects-title .elementor-heading-title { font-size: 54px !important; } /* MAIN GRID */ .palum-home-projects .palum-home-projects-grid { grid-template-columns: 1fr !important; gap: 22px !important; } /* FEATURED */ .palum-home-projects .palum-home-projects-featured { min-height: auto; } .palum-home-projects .palum-home-projects-media { min-height: 470px !important; } .palum-home-projects .palum-home-projects-media > .elementor-widget-image img { min-height: 470px !important; } /* RIGHT SIDE becomes 2 columns */ .palum-home-projects .palum-home-projects-side { grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-template-rows: auto !important; } .palum-home-projects .palum-home-projects-small { min-height: 460px; grid-template-columns: 1fr !important; grid-template-rows: 245px auto !important; } .palum-home-projects .palum-home-projects-small-media { min-height: 245px !important; } .palum-home-projects .palum-home-projects-small-body { justify-content: flex-start !important; } } /* ========================================================= 29. MOBILE ========================================================= */ @media (max-width: 767px) { .palum-home-projects { padding: 74px 20px 80px !important; background-size: auto, 64px 64px, 64px 64px, auto !important; } .palum-home-projects::before { width: 330px; height: 330px; left: -230px; top: -150px; } .palum-home-projects::after { display: none; } /* HEADER */ .palum-home-projects .palum-home-projects-head { gap: 20px !important; margin-bottom: 38px !important; } .palum-home-projects .palum-home-projects-eyebrow { margin-bottom: 16px !important; padding-left: 38px !important; } .palum-home-projects .palum-home-projects-eyebrow::before { width: 26px; } .palum-home-projects .palum-home-projects-eyebrow .elementor-heading-title { font-size: 9px !important; letter-spacing: 1.25px !important; } .palum-home-projects .palum-home-projects-title .elementor-heading-title { font-size: 39px !important; line-height: 1.05 !important; letter-spacing: -1.25px !important; } .palum-home-projects .palum-home-projects-intro, .palum-home-projects .palum-home-projects-intro p { font-size: 15px !important; line-height: 1.7 !important; } /* FEATURED CARD */ .palum-home-projects .palum-home-projects-featured { display: flex !important; flex-direction: column !important; } .palum-home-projects .palum-home-projects-media { min-height: 320px !important; } .palum-home-projects .palum-home-projects-media > .elementor-widget-image img { min-height: 320px !important; } .palum-home-projects .palum-home-projects-media-label { left: 16px !important; top: 16px !important; padding: 8px 9px !important; } .palum-home-projects .palum-home-projects-media-label .elementor-heading-title { font-size: 7.5px !important; } .palum-home-projects .palum-home-projects-proof { right: 16px !important; top: 18px !important; } .palum-home-projects .palum-home-projects-proof .elementor-heading-title { font-size: 7.5px !important; } .palum-home-projects .palum-home-projects-body { padding: 25px 22px 26px !important; } .palum-home-projects .palum-home-projects-card-title .elementor-heading-title { font-size: 24px !important; line-height: 1.15 !important; } .palum-home-projects .palum-home-projects-card-text, .palum-home-projects .palum-home-projects-card-text p { font-size: 13px !important; } /* META */ .palum-home-projects .palum-home-projects-meta { grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 21px !important; } .palum-home-projects .palum-home-projects-meta-item { padding: 12px 13px !important; } /* RIGHT SIDE */ .palum-home-projects .palum-home-projects-side { grid-template-columns: 1fr !important; gap: 18px !important; } .palum-home-projects .palum-home-projects-small { min-height: 0; grid-template-columns: 1fr !important; grid-template-rows: auto !important; } .palum-home-projects .palum-home-projects-small-media { min-height: 270px !important; } .palum-home-projects .palum-home-projects-small-media > .elementor-widget-image { position: absolute !important; } .palum-home-projects .palum-home-projects-small-media > .elementor-widget-image img { min-height: 270px !important; } .palum-home-projects .palum-home-projects-small-body { padding: 24px 22px 25px !important; } .palum-home-projects .palum-home-projects-small .palum-home-projects-card-title .elementor-heading-title { font-size: 23px !important; } .palum-home-projects .palum-home-projects-small-footer { margin-top: 20px !important; padding-top: 16px !important; } } /* ========================================================= 30. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .palum-home-projects { padding-left: 18px !important; padding-right: 18px !important; } .palum-home-projects .palum-home-projects-title .elementor-heading-title { font-size: 34px !important; letter-spacing: -1px !important; } .palum-home-projects .palum-home-projects-media { min-height: 275px !important; } .palum-home-projects .palum-home-projects-media > .elementor-widget-image img { min-height: 275px !important; } .palum-home-projects .palum-home-projects-small-media { min-height: 235px !important; } .palum-home-projects .palum-home-projects-small-media > .elementor-widget-image img { min-height: 235px !important; } .palum-home-projects .palum-home-projects-small-footer { flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; } .palum-home-projects .palum-home-projects-process .elementor-heading-title { white-space: normal !important; } } /* ========================================================= 31. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .palum-home-projects .palum-home-projects-featured, .palum-home-projects .palum-home-projects-small, .palum-home-projects .palum-home-projects-media img, .palum-home-projects .palum-home-projects-small-media img { 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 HOME APPLIANCES PAGE FINAL CTA — CENTERED / STACKED VERSION Existing classes retained. 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; isolation: isolate; width: 100% !important; overflow: hidden; padding: 108px 42px 112px !important; background: radial-gradient( circle at 74% 2%, rgba(254,104,0,.11) 0%, rgba(254,104,0,0) 28% ), linear-gradient( 135deg, #0D151D 0%, #111B24 50%, #151F29 100% ) !important; } /* ========================================================= 02. TECHNICAL GRID ========================================================= */ .palum-auto-final::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(255,255,255,.022) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.022) 1px, transparent 1px ); background-size: 88px 88px; pointer-events: none; } /* ========================================================= 03. DECORATIVE CIRCLE ========================================================= */ .palum-auto-final::after { content: ""; position: absolute; right: -315px; bottom: -420px; width: 650px; height: 650px; z-index: 0; border: 1px solid rgba(254,104,0,.11); border-radius: 50%; pointer-events: none; } /* ========================================================= 04. INNER Converted from 2-column grid to centered stack ========================================================= */ .palum-auto-final .palum-auto-final-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: center !important; justify-content: center !important; } /* ========================================================= 05. MAIN CONTENT ========================================================= */ .palum-auto-final .palum-auto-final-content { position: relative; width: 100% !important; max-width: 980px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } /* ========================================================= 06. EYEBROW ========================================================= */ .palum-auto-final .palum-auto-final-eyebrow { position: relative; width: auto !important; margin: 0 0 22px !important; padding: 0 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* left 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%); } /* right line */ .palum-auto-final .palum-auto-final-eyebrow::after { content: ""; position: absolute; right: 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; text-align: center !important; } /* ========================================================= 07. MAIN TITLE ========================================================= */ .palum-auto-final .palum-auto-final-title { width: 100% !important; max-width: 930px !important; margin: 0 0 26px !important; text-align: center !important; } .palum-auto-final .palum-auto-final-title .elementor-heading-title { margin: 0 !important; color: #FFFFFF !important; font-size: clamp(48px, 4.15vw, 68px) !important; line-height: 1.04 !important; font-weight: 700 !important; letter-spacing: -2px !important; text-align: center !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: 760px !important; margin: 0 auto 38px !important; } .palum-auto-final .palum-auto-final-text, .palum-auto-final .palum-auto-final-text p, .palum-auto-final .palum-auto-final-text span { color: rgba(255,255,255,.60) !important; font-size: 16px !important; line-height: 1.75 !important; font-weight: 400 !important; text-align: center !important; } .palum-auto-final .palum-auto-final-text p { margin: 0 !important; } /* ========================================================= 09. BUTTON AREA ========================================================= */ .palum-auto-final .palum-auto-final-actions { position: relative; width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 14px !important; margin: 0 !important; } /* small divider above buttons */ .palum-auto-final .palum-auto-final-actions::before { content: ""; position: absolute; top: -20px; left: 50%; width: 46px; height: 1px; background: rgba(255,255,255,.13); transform: translateX(-50%); } /* ========================================================= 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: 52px !important; padding: 0 25px !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, box-shadow .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; box-shadow: 0 12px 30px rgba(254,104,0,.15); } .palum-auto-final .palum-auto-final-primary .elementor-button:hover { color: #FFFFFF !important; background: #F05F00 !important; border-color: #F05F00 !important; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(254,104,0,.22); } /* ========================================================= 12. SECONDARY BUTTON ========================================================= */ .palum-auto-final .palum-auto-final-secondary .elementor-button { color: rgba(255,255,255,.88) !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.18) !important; } .palum-auto-final .palum-auto-final-secondary .elementor-button:hover { color: #FFFFFF !important; background: rgba(255,255,255,.055) !important; border-color: rgba(254,104,0,.68) !important; transform: translateY(-2px); } /* ========================================================= 13. BUTTON ICONS ========================================================= */ .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. REMOVE OLD SUPPORT TAGS ========================================================= */ .palum-auto-final .palum-auto-final-support { display: none !important; } /* ========================================================= 15. REMOVE OLD RIGHT PROJECT PANEL ========================================================= */ .palum-auto-final .palum-auto-final-panel { display: none !important; } /* ========================================================= 16. OPTIONAL CTA NOTE If later you add one Text Editor / Heading with class: palum-auto-final-note this style is ready. ========================================================= */ .palum-auto-final .palum-auto-final-note { position: relative; width: 100% !important; max-width: 720px !important; margin: 32px auto 0 !important; padding-top: 22px !important; border-top: 1px solid rgba(255,255,255,.08); text-align: center !important; } .palum-auto-final .palum-auto-final-note, .palum-auto-final .palum-auto-final-note p, .palum-auto-final .palum-auto-final-note .elementor-heading-title { color: rgba(255,255,255,.31) !important; font-size: 10px !important; line-height: 1.6 !important; font-weight: 500 !important; text-align: center !important; } .palum-auto-final .palum-auto-final-note p { margin: 0 !important; } /* ========================================================= 17. MEDIUM DESKTOP ========================================================= */ @media (min-width: 1181px) and (max-width: 1399px) { .palum-auto-final { padding: 100px 30px 104px !important; } .palum-auto-final .palum-auto-final-content { max-width: 900px !important; } .palum-auto-final .palum-auto-final-title .elementor-heading-title { font-size: clamp(46px,4.5vw,60px) !important; } } /* ========================================================= 18. TABLET ========================================================= */ @media (max-width: 1180px) { .palum-auto-final { padding: 88px 30px 92px !important; } .palum-auto-final .palum-auto-final-content { max-width: 850px !important; } .palum-auto-final .palum-auto-final-title { max-width: 800px !important; } .palum-auto-final .palum-auto-final-title .elementor-heading-title { font-size: 52px !important; } .palum-auto-final .palum-auto-final-text { max-width: 700px !important; } } /* ========================================================= 19. MOBILE ========================================================= */ @media (max-width: 767px) { .palum-auto-final { padding: 72px 20px 76px !important; } /* EYEBROW */ .palum-auto-final .palum-auto-final-eyebrow { margin-bottom: 18px !important; padding: 0 38px !important; } .palum-auto-final .palum-auto-final-eyebrow::before, .palum-auto-final .palum-auto-final-eyebrow::after { width: 26px; } .palum-auto-final .palum-auto-final-eyebrow .elementor-heading-title { font-size: 9px !important; line-height: 1.3 !important; letter-spacing: 1.2px !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.06 !important; letter-spacing: -1.25px !important; } /* TEXT */ .palum-auto-final .palum-auto-final-text { margin-bottom: 34px !important; } .palum-auto-final .palum-auto-final-text, .palum-auto-final .palum-auto-final-text p { font-size: 15px !important; line-height: 1.68 !important; } /* BUTTONS */ .palum-auto-final .palum-auto-final-actions { flex-direction: column !important; align-items: stretch !important; gap: 11px !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; min-height: 52px !important; } /* NOTE */ .palum-auto-final .palum-auto-final-note { margin-top: 26px !important; } } /* ========================================================= 20. 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-eyebrow { padding: 0 31px !important; } .palum-auto-final .palum-auto-final-eyebrow::before, .palum-auto-final .palum-auto-final-eyebrow::after { width: 21px; } } /* ========================================================= 21. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .palum-auto-final .palum-auto-final-primary .elementor-button, .palum-auto-final .palum-auto-final-secondary .elementor-button { transition: none !important; } }/* End custom CSS */