.elementor-19 .elementor-element.elementor-element-4bac61d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--z-index:9;}.elementor-19 .elementor-element.elementor-element-4bac61d::before, .elementor-19 .elementor-element.elementor-element-4bac61d > .elementor-background-video-container::before, .elementor-19 .elementor-element.elementor-element-4bac61d > .e-con-inner > .elementor-background-video-container::before, .elementor-19 .elementor-element.elementor-element-4bac61d > .elementor-background-slideshow::before, .elementor-19 .elementor-element.elementor-element-4bac61d > .e-con-inner > .elementor-background-slideshow::before, .elementor-19 .elementor-element.elementor-element-4bac61d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF 64%, #CACACA 100%);}.elementor-19 .elementor-element.elementor-element-4bac61d > .elementor-shape-bottom svg, .elementor-19 .elementor-element.elementor-element-4bac61d > .e-con-inner > .elementor-shape-bottom svg{width:calc(128% + 1.3px);height:87px;}.elementor-19 .elementor-element.elementor-element-4bac61d > .elementor-shape-bottom, .elementor-19 .elementor-element.elementor-element-4bac61d > .e-con-inner > .elementor-shape-bottom{z-index:2;pointer-events:none;}.elementor-19 .elementor-element.elementor-element-4bac61d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-19 .elementor-element.elementor-element-dbfa062{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--z-index:9;}.elementor-19 .elementor-element.elementor-element-dbfa062.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-19 .elementor-element.elementor-element-1a93903{--display:flex;}.elementor-19 .elementor-element.elementor-element-1a93903.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-19 .elementor-element.elementor-element-5cfb207 .elementor-heading-title{font-size:44px;font-weight:700;color:#FF3900;}.elementor-19 .elementor-element.elementor-element-e2b45c6 .elementor-heading-title{font-size:30px;}.elementor-19 .elementor-element.elementor-element-4664c20{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 10px;--row-gap:0px;--column-gap:10px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-19 .elementor-element.elementor-element-9c08cc5{--display:flex;}.elementor-19 .elementor-element.elementor-element-5973706 .elementor-icon-box-wrapper{text-align:start;}.elementor-19 .elementor-element.elementor-element-5973706 .elementor-icon-box-title{margin-block-end:0px;}.elementor-19 .elementor-element.elementor-element-5973706 .elementor-icon-box-title, .elementor-19 .elementor-element.elementor-element-5973706 .elementor-icon-box-title a{font-size:14px;}.elementor-19 .elementor-element.elementor-element-e4fae33{--display:flex;}.elementor-19 .elementor-element.elementor-element-db99ead .elementor-icon-box-wrapper{text-align:start;}.elementor-19 .elementor-element.elementor-element-db99ead .elementor-icon-box-title{margin-block-end:0px;}.elementor-19 .elementor-element.elementor-element-db99ead .elementor-icon-box-title, .elementor-19 .elementor-element.elementor-element-db99ead .elementor-icon-box-title a{font-size:14px;}.elementor-19 .elementor-element.elementor-element-d471d44{--display:flex;}.elementor-19 .elementor-element.elementor-element-b586445 .elementor-icon-box-wrapper{text-align:start;}.elementor-19 .elementor-element.elementor-element-b586445 .elementor-icon-box-title{margin-block-end:0px;}.elementor-19 .elementor-element.elementor-element-b586445 .elementor-icon-box-title, .elementor-19 .elementor-element.elementor-element-b586445 .elementor-icon-box-title a{font-size:14px;}.elementor-19 .elementor-element.elementor-element-7fcafea{--display:flex;}.elementor-19 .elementor-element.elementor-element-9b4ba25 .elementor-icon-box-wrapper{text-align:start;}.elementor-19 .elementor-element.elementor-element-9b4ba25 .elementor-icon-box-title{margin-block-end:0px;}.elementor-19 .elementor-element.elementor-element-9b4ba25 .elementor-icon-box-title, .elementor-19 .elementor-element.elementor-element-9b4ba25 .elementor-icon-box-title a{font-size:14px;}.elementor-19 .elementor-element.elementor-element-9012469{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:-10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-19 .elementor-element.elementor-element-9012469.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-19 .elementor-element.elementor-element-cbd273e{--display:flex;}.elementor-19 .elementor-element.elementor-element-cbd273e.e-con{--align-self:center;}.elementor-19 .elementor-element.elementor-element-868f411 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-19 .elementor-element.elementor-element-868f411 .elementor-button{font-size:13px;font-weight:600;fill:#292929;color:#292929;background-color:#FFFFFF;box-shadow:0px 0px 5px 4px rgba(182.17624740600587, 182.17624740600587, 182.17624740600587, 0.62);border-style:solid;border-radius:15px 15px 15px 15px;padding:15px 15px 15px 15px;}.elementor-19 .elementor-element.elementor-element-868f411 .elementor-button:hover, .elementor-19 .elementor-element.elementor-element-868f411 .elementor-button:focus{color:#0A0A0A;background-color:#DFDFDF;}.elementor-19 .elementor-element.elementor-element-868f411 .elementor-button:hover svg, .elementor-19 .elementor-element.elementor-element-868f411 .elementor-button:focus svg{fill:#0A0A0A;}.elementor-19 .elementor-element.elementor-element-eb70bbc{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-19 .elementor-element.elementor-element-f5f7856 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-19 .elementor-element.elementor-element-f5f7856 .elementor-button{font-size:13px;font-weight:600;fill:#292929;color:#292929;background-color:#FFFFFF;box-shadow:0px 0px 5px 4px rgba(182.17624740600587, 182.17624740600587, 182.17624740600587, 0.62);border-style:solid;border-radius:15px 15px 15px 15px;padding:12px 30px 12px 30px;}.elementor-19 .elementor-element.elementor-element-f5f7856 .elementor-button:hover, .elementor-19 .elementor-element.elementor-element-f5f7856 .elementor-button:focus{color:#0A0A0A;background-color:#DFDFDF;}.elementor-19 .elementor-element.elementor-element-f5f7856 .elementor-button:hover svg, .elementor-19 .elementor-element.elementor-element-f5f7856 .elementor-button:focus svg{fill:#0A0A0A;}.elementor-19 .elementor-element.elementor-element-e9fdf57{--display:flex;}.elementor-19 .elementor-element.elementor-element-c3d3624 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-19 .elementor-element.elementor-element-c3d3624 .elementor-button{font-size:13px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;background-color:#FA6116;box-shadow:0px 0px 5px 4px rgba(253.93749999999997, 121.40936687736294, 28.98199728260868, 0.47);border-style:solid;border-radius:15px 15px 15px 15px;}.elementor-19 .elementor-element.elementor-element-c3d3624 .elementor-button:hover, .elementor-19 .elementor-element.elementor-element-c3d3624 .elementor-button:focus{color:#FFFFFF;background-color:#FF8925;}.elementor-19 .elementor-element.elementor-element-c3d3624 .elementor-button:hover svg, .elementor-19 .elementor-element.elementor-element-c3d3624 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-979ef41{--display:flex;--min-height:0px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:20px;--margin-bottom:20px;--margin-left:20px;--margin-right:20px;}.elementor-19 .elementor-element.elementor-element-979ef41.e-con{--align-self:center;}.elementor-19 .elementor-element.elementor-element-ff0be68{text-align:center;margin:19px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-19 .elementor-element.elementor-element-e9cd029{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-19 .elementor-element.elementor-element-e9cd029.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-19 .elementor-element.elementor-element-c319686{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;border-style:none;--border-style:none;}.elementor-19 .elementor-element.elementor-element-c319686::before, .elementor-19 .elementor-element.elementor-element-c319686 > .elementor-background-video-container::before, .elementor-19 .elementor-element.elementor-element-c319686 > .e-con-inner > .elementor-background-video-container::before, .elementor-19 .elementor-element.elementor-element-c319686 > .elementor-background-slideshow::before, .elementor-19 .elementor-element.elementor-element-c319686 > .e-con-inner > .elementor-background-slideshow::before, .elementor-19 .elementor-element.elementor-element-c319686 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-19 .elementor-element.elementor-element-1b033d1{--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:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:0px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-19 .elementor-element.elementor-element-20353df{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--border-radius:18px 18px 18px 18px;box-shadow:0px 0px 2px 3px rgba(239.9975311279297, 239.9975311279297, 239.9975311279297, 0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-19 .elementor-element.elementor-element-20353df:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-20353df > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-7810c73 .elementor-icon-wrapper{text-align:center;}.elementor-19 .elementor-element.elementor-element-7810c73.elementor-view-stacked .elementor-icon{background-color:#FF3900;}.elementor-19 .elementor-element.elementor-element-7810c73.elementor-view-framed .elementor-icon, .elementor-19 .elementor-element.elementor-element-7810c73.elementor-view-default .elementor-icon{color:#FF3900;border-color:#FF3900;}.elementor-19 .elementor-element.elementor-element-7810c73.elementor-view-framed .elementor-icon, .elementor-19 .elementor-element.elementor-element-7810c73.elementor-view-default .elementor-icon svg{fill:#FF3900;}.elementor-19 .elementor-element.elementor-element-7810c73 .elementor-icon{font-size:38px;}.elementor-19 .elementor-element.elementor-element-7810c73 .elementor-icon svg{height:38px;}.elementor-19 .elementor-element.elementor-element-6d65a73 .elementor-heading-title{font-size:16px;font-weight:600;}.elementor-19 .elementor-element.elementor-element-77ad8fb .elementor-button{font-size:13px;font-weight:700;fill:#FF5300;color:#FF5300;background-color:#FFFFFF00;}.elementor-19 .elementor-element.elementor-element-ad525a9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--border-radius:18px 18px 18px 18px;box-shadow:0px 0px 2px 3px rgba(239.9975311279297, 239.9975311279297, 239.9975311279297, 0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-19 .elementor-element.elementor-element-ad525a9:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-ad525a9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-fc6dbe8 .elementor-icon-wrapper{text-align:center;}.elementor-19 .elementor-element.elementor-element-fc6dbe8.elementor-view-stacked .elementor-icon{background-color:#FF3900;}.elementor-19 .elementor-element.elementor-element-fc6dbe8.elementor-view-framed .elementor-icon, .elementor-19 .elementor-element.elementor-element-fc6dbe8.elementor-view-default .elementor-icon{color:#FF3900;border-color:#FF3900;}.elementor-19 .elementor-element.elementor-element-fc6dbe8.elementor-view-framed .elementor-icon, .elementor-19 .elementor-element.elementor-element-fc6dbe8.elementor-view-default .elementor-icon svg{fill:#FF3900;}.elementor-19 .elementor-element.elementor-element-fc6dbe8 .elementor-icon{font-size:38px;}.elementor-19 .elementor-element.elementor-element-fc6dbe8 .elementor-icon svg{height:38px;}.elementor-19 .elementor-element.elementor-element-09facf3 .elementor-heading-title{font-size:16px;font-weight:600;}.elementor-19 .elementor-element.elementor-element-a7fc23b .elementor-button{font-size:13px;font-weight:700;fill:#FF5300;color:#FF5300;background-color:#FFFFFF00;}.elementor-19 .elementor-element.elementor-element-d194711{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--border-radius:18px 18px 18px 18px;box-shadow:0px 0px 2px 3px rgba(239.9975311279297, 239.9975311279297, 239.9975311279297, 0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-19 .elementor-element.elementor-element-d194711:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-d194711 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-04df7c9 .elementor-icon-wrapper{text-align:center;}.elementor-19 .elementor-element.elementor-element-04df7c9.elementor-view-stacked .elementor-icon{background-color:#FF3900;}.elementor-19 .elementor-element.elementor-element-04df7c9.elementor-view-framed .elementor-icon, .elementor-19 .elementor-element.elementor-element-04df7c9.elementor-view-default .elementor-icon{color:#FF3900;border-color:#FF3900;}.elementor-19 .elementor-element.elementor-element-04df7c9.elementor-view-framed .elementor-icon, .elementor-19 .elementor-element.elementor-element-04df7c9.elementor-view-default .elementor-icon svg{fill:#FF3900;}.elementor-19 .elementor-element.elementor-element-04df7c9 .elementor-icon{font-size:38px;}.elementor-19 .elementor-element.elementor-element-04df7c9 .elementor-icon svg{height:38px;}.elementor-19 .elementor-element.elementor-element-a33a6b5 .elementor-heading-title{font-size:16px;font-weight:600;}.elementor-19 .elementor-element.elementor-element-6193900 .elementor-button{font-size:13px;font-weight:700;fill:#FF5300;color:#FF5300;background-color:#FFFFFF00;}.elementor-19 .elementor-element.elementor-element-b1023d5{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--border-radius:18px 18px 18px 18px;box-shadow:0px 0px 2px 3px rgba(239.9975311279297, 239.9975311279297, 239.9975311279297, 0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-19 .elementor-element.elementor-element-b1023d5:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-b1023d5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-6c2ab4d .elementor-icon-wrapper{text-align:center;}.elementor-19 .elementor-element.elementor-element-6c2ab4d.elementor-view-stacked .elementor-icon{background-color:#FF3900;}.elementor-19 .elementor-element.elementor-element-6c2ab4d.elementor-view-framed .elementor-icon, .elementor-19 .elementor-element.elementor-element-6c2ab4d.elementor-view-default .elementor-icon{color:#FF3900;border-color:#FF3900;}.elementor-19 .elementor-element.elementor-element-6c2ab4d.elementor-view-framed .elementor-icon, .elementor-19 .elementor-element.elementor-element-6c2ab4d.elementor-view-default .elementor-icon svg{fill:#FF3900;}.elementor-19 .elementor-element.elementor-element-6c2ab4d .elementor-icon{font-size:38px;}.elementor-19 .elementor-element.elementor-element-6c2ab4d .elementor-icon svg{height:38px;}.elementor-19 .elementor-element.elementor-element-0bdc63b .elementor-heading-title{font-size:16px;font-weight:600;}.elementor-19 .elementor-element.elementor-element-0e927ca .elementor-button{font-size:13px;font-weight:700;fill:#FF5300;color:#FF5300;background-color:#FFFFFF00;}.elementor-19 .elementor-element.elementor-element-b4ac9f9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--border-radius:18px 18px 18px 18px;box-shadow:0px 0px 2px 3px rgba(239.9975311279297, 239.9975311279297, 239.9975311279297, 0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-19 .elementor-element.elementor-element-b4ac9f9:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-b4ac9f9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-f61a463 .elementor-icon-wrapper{text-align:center;}.elementor-19 .elementor-element.elementor-element-f61a463.elementor-view-stacked .elementor-icon{background-color:#FF3900;}.elementor-19 .elementor-element.elementor-element-f61a463.elementor-view-framed .elementor-icon, .elementor-19 .elementor-element.elementor-element-f61a463.elementor-view-default .elementor-icon{color:#FF3900;border-color:#FF3900;}.elementor-19 .elementor-element.elementor-element-f61a463.elementor-view-framed .elementor-icon, .elementor-19 .elementor-element.elementor-element-f61a463.elementor-view-default .elementor-icon svg{fill:#FF3900;}.elementor-19 .elementor-element.elementor-element-f61a463 .elementor-icon{font-size:38px;}.elementor-19 .elementor-element.elementor-element-f61a463 .elementor-icon svg{height:38px;}.elementor-19 .elementor-element.elementor-element-8bffdfa .elementor-heading-title{font-size:16px;font-weight:600;}.elementor-19 .elementor-element.elementor-element-0d3829f .elementor-button{font-size:13px;font-weight:700;fill:#FF5300;color:#FF5300;background-color:#FFFFFF00;}.elementor-19 .elementor-element.elementor-element-93982f7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-19 .elementor-element.elementor-element-bebc2f5{width:var( --container-widget-width, 101.531% );max-width:101.531%;--container-widget-width:101.531%;--container-widget-flex-grow:0;}.elementor-19 .elementor-element.elementor-element-bebc2f5.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-19 .elementor-element.elementor-element-7403cab{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;}.elementor-19 .elementor-element.elementor-element-d2e0070{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:5px 5px 5px 5px;box-shadow:0px 0px 19px 0px rgba(132.87717391304346, 136.4650897920605, 144.5, 0.15);--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-19 .elementor-element.elementor-element-cfb3d8d .elementor-icon-box-wrapper{align-items:center;text-align:start;gap:28px;}.elementor-19 .elementor-element.elementor-element-cfb3d8d .elementor-icon-box-title{margin-block-end:6px;}.elementor-19 .elementor-element.elementor-element-cfb3d8d .elementor-icon-box-title, .elementor-19 .elementor-element.elementor-element-cfb3d8d .elementor-icon-box-title a{font-size:20px;}.elementor-19 .elementor-element.elementor-element-3d4f264{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:5px 5px 5px 5px;box-shadow:0px 0px 19px 0px rgba(132.87717391304346, 136.4650897920605, 144.5, 0.15);--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-19 .elementor-element.elementor-element-86a8aae .elementor-icon-box-wrapper{align-items:center;text-align:start;gap:28px;}.elementor-19 .elementor-element.elementor-element-86a8aae .elementor-icon-box-title{margin-block-end:6px;}.elementor-19 .elementor-element.elementor-element-86a8aae .elementor-icon-box-title, .elementor-19 .elementor-element.elementor-element-86a8aae .elementor-icon-box-title a{font-size:20px;}.elementor-19 .elementor-element.elementor-element-f425409{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:5px 5px 5px 5px;box-shadow:0px 0px 19px 0px rgba(132.87717391304346, 136.4650897920605, 144.5, 0.15);--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-19 .elementor-element.elementor-element-139d04c .elementor-icon-box-wrapper{align-items:center;text-align:start;gap:28px;}.elementor-19 .elementor-element.elementor-element-139d04c .elementor-icon-box-title{margin-block-end:6px;}.elementor-19 .elementor-element.elementor-element-139d04c .elementor-icon-box-title, .elementor-19 .elementor-element.elementor-element-139d04c .elementor-icon-box-title a{font-size:20px;}.elementor-19 .elementor-element.elementor-element-d7eaf06{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:5px 5px 5px 5px;box-shadow:0px 0px 19px 0px rgba(132.87717391304346, 136.4650897920605, 144.5, 0.15);--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-19 .elementor-element.elementor-element-1716b3a .elementor-icon-box-wrapper{align-items:center;text-align:start;gap:28px;}.elementor-19 .elementor-element.elementor-element-1716b3a .elementor-icon-box-title{margin-block-end:6px;}.elementor-19 .elementor-element.elementor-element-1716b3a .elementor-icon-box-title, .elementor-19 .elementor-element.elementor-element-1716b3a .elementor-icon-box-title a{font-size:20px;}.elementor-19 .elementor-element.elementor-element-1b6d993{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;}.elementor-19 .elementor-element.elementor-element-cbe8e61{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#797979;--border-color:#797979;--border-radius:15px 15px 15px 15px;box-shadow:0px 0px 2px 3px rgba(182.17626037597654, 182.17626037597654, 182.17626037597654, 0.39);}.elementor-19 .elementor-element.elementor-element-5ed75c8 .wd-button-wrapper a{background-color:#FF6E00;border-color:#FF6E00;color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-22ba5e1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-19 .elementor-element.elementor-element-e432b91{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-19 .elementor-element.elementor-element-4a254af .wd-button-wrapper a{background-color:#FF6E00;border-color:#FF6E00;color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-1dc5835{--grid-column-gap:30px;--grid-row-gap:35px;}.elementor-19 .elementor-element.elementor-element-1dc5835 .elementor-post__text{margin-top:20px;margin-bottom:8px;}.elementor-19 .elementor-element.elementor-element-1dc5835 .elementor-post__title, .elementor-19 .elementor-element.elementor-element-1dc5835 .elementor-post__title a{font-size:14px;font-weight:700;}.elementor-19 .elementor-element.elementor-element-1dc5835 .elementor-post__read-more{color:#FF5300;margin-bottom:8px;}.elementor-19 .elementor-element.elementor-element-220b200{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-19 .elementor-element.elementor-element-ce66481 .wd-button-wrapper a{background-color:#FF6E00;border-color:#FF6E00;color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-43301cb.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-19 .elementor-element.elementor-element-932f4ac{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-19 .elementor-element.elementor-element-4bac61d{--width:1600px;}.elementor-19 .elementor-element.elementor-element-dbfa062{--content-width:1600px;}.elementor-19 .elementor-element.elementor-element-1a93903{--width:44.008%;}.elementor-19 .elementor-element.elementor-element-4664c20{--width:450px;}.elementor-19 .elementor-element.elementor-element-9c08cc5{--width:48%;}.elementor-19 .elementor-element.elementor-element-e4fae33{--width:48%;}.elementor-19 .elementor-element.elementor-element-d471d44{--width:48%;}.elementor-19 .elementor-element.elementor-element-7fcafea{--width:48%;}.elementor-19 .elementor-element.elementor-element-9012469{--width:511px;}.elementor-19 .elementor-element.elementor-element-979ef41{--content-width:1009px;}.elementor-19 .elementor-element.elementor-element-e9cd029{--width:71.174%;}.elementor-19 .elementor-element.elementor-element-c319686{--content-width:1208px;}.elementor-19 .elementor-element.elementor-element-20353df{--width:20%;}.elementor-19 .elementor-element.elementor-element-ad525a9{--width:20%;}.elementor-19 .elementor-element.elementor-element-d194711{--width:20%;}.elementor-19 .elementor-element.elementor-element-b1023d5{--width:20%;}.elementor-19 .elementor-element.elementor-element-b4ac9f9{--width:20%;}.elementor-19 .elementor-element.elementor-element-93982f7{--content-width:1600px;}.elementor-19 .elementor-element.elementor-element-7403cab{--content-width:1600px;}.elementor-19 .elementor-element.elementor-element-1b6d993{--content-width:1600px;}}@media(max-width:1024px) and (min-width:768px){.elementor-19 .elementor-element.elementor-element-20353df{--width:33.33%;}.elementor-19 .elementor-element.elementor-element-ad525a9{--width:33.33%;}.elementor-19 .elementor-element.elementor-element-d194711{--width:33.33%;}.elementor-19 .elementor-element.elementor-element-b1023d5{--width:33.33%;}.elementor-19 .elementor-element.elementor-element-b4ac9f9{--width:33.33%;}}@media(max-width:1024px){.elementor-19 .elementor-element.elementor-element-1b033d1{--flex-wrap:wrap;}}@media(max-width:767px){.elementor-19 .elementor-element.elementor-element-1b033d1{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--padding-top:0px;--padding-bottom:28px;--padding-left:0px;--padding-right:0px;}.elementor-19 .elementor-element.elementor-element-20353df{--width:100%;}.elementor-19 .elementor-element.elementor-element-ad525a9{--width:100%;}.elementor-19 .elementor-element.elementor-element-d194711{--width:100%;}.elementor-19 .elementor-element.elementor-element-b1023d5{--width:100%;}.elementor-19 .elementor-element.elementor-element-b4ac9f9{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-bebc2f5 *//* ========================================================= HORIZONTAL ROADMAP ========================================================= */ .afm-roadmap-horizontal { --orange: #ff7b00; --orange-light: #f2f2f2; --black: #151515; --text: #242424; --muted: #777; width: 100%; padding: 55px 20px; background: #ffffff; box-sizing: border-box; overflow: hidden; } /* ========================================================= WRAPPER ========================================================= */ .afm-rh-wrap { max-width: 1250px; margin: 0 auto; } /* ========================================================= HEADER ========================================================= */ .afm-rh-head { max-width: 700px; margin: 0 auto 48px; text-align: center; } .afm-rh-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; margin-bottom: 13px; color: var(--orange); background: #f3f3f3; border: 1px solid #e3e3e3; border-radius: 50px; font-size: 12px; font-weight: 700; } .afm-rh-eyebrow span { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,123,0,.08); } .afm-rh-head h2 { margin: 0; color: var(--black); font-size: clamp(30px, 3.5vw, 46px); line-height: 1.3; font-weight: 850; letter-spacing: -.8px; } .afm-rh-head h2 strong { color: var(--orange); } .afm-rh-head p { max-width: 620px; margin: 12px auto 0; color: var(--muted); font-size: 14px; line-height: 1.9; } /* ========================================================= SCROLL CONTAINER ========================================================= */ .afm-rh-scroll { position: relative; width: 100%; overflow-x: auto; overflow-y: visible; padding: 5px 5px 18px; scrollbar-width: thin; scrollbar-color: rgba(255,123,0,.35) transparent; } /* Chrome scrollbar */ .afm-rh-scroll::-webkit-scrollbar { height: 5px; } .afm-rh-scroll::-webkit-scrollbar-track { background: #f4f4f4; border-radius: 20px; } .afm-rh-scroll::-webkit-scrollbar-thumb { background: rgba(255,123,0,.35); border-radius: 20px; } /* ========================================================= ITEMS ========================================================= */ .afm-rh-items { position: relative; display: flex; flex-direction: row-reverse; min-width: 1180px; gap: 14px; } /* ========================================================= LINE ========================================================= */ .afm-rh-line { position: absolute; z-index: 1; top: 27px; right: 4px; left: 4px; height: 2px; background: #ffb36f; border-radius: 20px; } /* ========================================================= ITEM ========================================================= */ .afm-rh-item { position: relative; z-index: 2; display: flex !important; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 135px; width: 100%; padding-top: 0; box-sizing: border-box; text-decoration: none !important; color: inherit !important; cursor: pointer; } /* ========================================================= NUMBER ========================================================= */ .afm-rh-number { position: relative; z-index: 5; width: 52px; height: 52px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: var(--orange); border: 5px solid #ffffff; border-radius: 50%; box-shadow: 0 7px 20px rgba(255,123,0,.22); font-size: 11px; font-weight: 800; } /* ========================================================= CARD ========================================================= */ .afm-rh-card { text-align: center; min-height: 150px; padding: 17px; background: #ffffff; border: 1px solid #eeeeee; border-radius: 16px; box-shadow: 0 7px 25px rgba(0,0,0,.035); box-sizing: border-box; text-align: center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } /* Hover */ .afm-rh-card:hover { transform: translateY(-5px); border-color: rgba(255,123,0,.25); box-shadow: 0 15px 35px rgba(0,0,0,.07); } /* ========================================================= BADGE ========================================================= */ .afm-rh-badge { display: inline-flex; padding: 5px 9px; margin-bottom: 10px; color: var(--orange); background: #f1f1f1; border-radius: 7px; font-size: 10px; font-weight: 800; } /* ========================================================= TITLE ========================================================= */ .afm-rh-card h3 { margin: 0 0 7px; color: var(--text); font-size: 14px; line-height: 1.65; font-weight: 800; } /* ========================================================= TEXT ========================================================= */ .afm-rh-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.85; } /* ========================================================= FINAL STEP ========================================================= */ .afm-rh-final .afm-rh-number { box-shadow: 0 8px 25px rgba(255,123,0,.35); } .afm-rh-final .afm-rh-card { border-color: rgba(255,123,0,.22); background: linear-gradient( 145deg, #ffffff, #fffaf5 ); } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1200px) { .afm-rh-items { min-width: 0; gap: 12px; } .afm-rh-card { min-height: 155px; padding: 16px; } .afm-rh-card h3 { font-size: 14px; } } /* ========================================================= TABLET ========================================================= */ /* ========================================================= PROFESSIONAL RESPONSIVE SYSTEM Desktop: 8 cards in one horizontal row Tablet: 4 x 2 compact grid Mobile: 2 x 4 compact grid ========================================================= */ /* ---------- Large screens ---------- */ @media (min-width: 1200px) { .afm-rh-items { min-width: 0 !important; width: 100%; display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; overflow: visible; } .afm-rh-item { min-width: 0 !important; width: auto !important; display: flex; flex-direction: column; align-items: center; height: 100%; } .afm-rh-card { min-height: 0 !important; height: 166px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; box-sizing: border-box; } } /* ---------- Desktop polish: equal cards + clean timeline ---------- */ @media (min-width: 1200px) { .afm-rh-items { align-items: stretch; padding-top: 0; } .afm-rh-item { align-self: stretch; } .afm-rh-card { flex: 0 0 166px; overflow: hidden; } .afm-rh-card h3 { min-height: 43px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } .afm-rh-card p { max-width: 145px; margin-left: auto; margin-right: auto; } } /* ---------- Laptop / 14-inch / small desktop ---------- */ @media (min-width: 768px) and (max-width: 1199px) { .afm-roadmap-horizontal { padding: 42px 18px 38px; overflow: hidden; } .afm-rh-head { max-width: 680px; margin-bottom: 32px; } .afm-rh-head h2 { font-size: clamp(27px, 4vw, 38px); } .afm-rh-scroll { overflow: visible !important; padding: 0; } .afm-rh-items { min-width: 0 !important; width: 100%; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 10px; overflow: visible; padding-top: 0; } .afm-rh-item { min-width: 0 !important; width: auto !important; flex: none !important; display: flex !important; flex-direction: column; align-items: center; } /* Timeline becomes two clean rows */ .afm-rh-line { display: none; } .afm-rh-number { width: 42px; height: 42px; margin-bottom: 10px; border-width: 3px; font-size: 9px; } .afm-rh-card { min-height: 142px; height: 142px; padding: 14px 10px; border-radius: 12px; } .afm-rh-card h3 { font-size: 12px; line-height: 1.6; } .afm-rh-card p { font-size: 9.5px; line-height: 1.75; } .afm-rh-badge { font-size: 8px; padding: 4px 8px; margin-bottom: 7px; } } /* ---------- Tablet portrait ---------- */ @media (min-width: 600px) and (max-width: 767px) { .afm-roadmap-horizontal { padding: 36px 14px 32px; overflow: hidden; } .afm-rh-head { max-width: 620px; margin-bottom: 28px; } .afm-rh-head h2 { font-size: 28px; letter-spacing: -.4px; } .afm-rh-head p { font-size: 11px; } .afm-rh-scroll { overflow: visible !important; padding: 0; } .afm-rh-items { min-width: 0 !important; width: 100%; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 8px; padding: 0; } .afm-rh-item { min-width: 0 !important; width: auto !important; flex: none !important; display: flex !important; flex-direction: column; align-items: center; } .afm-rh-line { display: none; } .afm-rh-number { width: 38px; height: 38px; margin-bottom: 8px; border-width: 3px; font-size: 8px; } .afm-rh-card { min-height: 135px; height: 135px; padding: 12px 8px; border-radius: 10px; } .afm-rh-card h3 { font-size: 10.5px; line-height: 1.6; } .afm-rh-card p { font-size: 8.5px; line-height: 1.75; } .afm-rh-badge { font-size: 7.5px; padding: 4px 6px; margin-bottom: 6px; } } /* ---------- Mobile ---------- */ @media (max-width: 599px) { .afm-roadmap-horizontal { padding: 30px 10px 28px; overflow: hidden; } .afm-rh-head { max-width: 100%; margin-bottom: 24px; } .afm-rh-eyebrow { font-size: 9px; padding: 6px 12px; margin-bottom: 9px; } .afm-rh-head h2 { font-size: clamp(22px, 7vw, 27px); line-height: 1.45; letter-spacing: -.3px; } .afm-rh-head p { margin-top: 7px; font-size: 9.5px; line-height: 1.85; } .afm-rh-scroll { width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .afm-rh-items { min-width: 0 !important; width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 8px; padding: 0; } .afm-rh-item { min-width: 0 !important; width: auto !important; flex: none !important; display: flex !important; flex-direction: column; align-items: center; } .afm-rh-line { display: none; } .afm-rh-number { width: 36px; height: 36px; margin-bottom: 7px; border-width: 3px; font-size: 8px; box-shadow: 0 3px 10px rgba(255,123,0,.15), 0 0 0 1px #dedede; } .afm-rh-card { min-height: 132px; height: 132px; padding: 11px 8px; border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,.035); } .afm-rh-card::before { right: 20%; left: 20%; } .afm-rh-badge { font-size: 7px; padding: 4px 6px; margin-bottom: 6px; max-width: 90%; } .afm-rh-card h3 { font-size: 10px; line-height: 1.65; margin-bottom: 5px; } .afm-rh-card p { font-size: 8px; line-height: 1.75; } } /* ---------- Very small phones ---------- */ @media (max-width: 380px) { .afm-roadmap-horizontal { padding-left: 8px; padding-right: 8px; } .afm-rh-head { margin-bottom: 20px; } .afm-rh-head h2 { font-size: 21px; } .afm-rh-head p { font-size: 8.5px; } .afm-rh-items { gap: 17px 6px; } .afm-rh-number { width: 33px; height: 33px; font-size: 7px; margin-bottom: 6px; } .afm-rh-card { min-height: 125px; height: 125px; padding: 10px 6px; } .afm-rh-card h3 { font-size: 9px; } .afm-rh-card p { font-size: 7.5px; } .afm-rh-badge { font-size: 6.5px; padding: 3px 5px; } } /* ========================================================= PREMIUM GLASSMORPHISM — BUTTONS & CARDS ========================================================= */ /* ---------- Roadmap eyebrow / glass button ---------- */ .afm-rh-eyebrow { position: relative; overflow: hidden; color: #5d6268 !important; background: linear-gradient( 135deg, rgba(255,255,255,.90), rgba(231,233,236,.72) ) !important; border: 1px solid rgba(210,213,217,.72) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.035), 0 8px 22px rgba(0,0,0,.055); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .afm-rh-eyebrow::before { content: ""; position: absolute; top: -70%; left: -30%; width: 65%; height: 180%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.85), transparent ); transform: rotate(20deg); pointer-events: none; } .afm-rh-eyebrow:hover { transform: translateY(-2px); border-color: rgba(255,123,0,.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 10px 28px rgba(0,0,0,.07), 0 0 0 4px rgba(255,123,0,.035); } /* ---------- Step badges / glass pills ---------- */ .afm-rh-badge { position: relative; overflow: hidden; color: #666b71 !important; background: linear-gradient( 135deg, rgba(255,255,255,.92), rgba(226,229,232,.76) ) !important; border: 1px solid rgba(255,255,255,.95) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(0,0,0,.045), 0 4px 12px rgba(0,0,0,.045); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: color .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; } .afm-rh-badge::after { content: ""; position: absolute; top: 0; left: 18%; width: 30%; height: 1px; background: rgba(255,255,255,.95); border-radius: 50%; } .afm-rh-card:hover .afm-rh-badge { color: var(--orange) !important; background: linear-gradient( 135deg, rgba(255,255,255,.96), rgba(255,244,233,.76) ) !important; border-color: rgba(255,123,0,.28) !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 6px 16px rgba(255,123,0,.09); } /* ---------- Main cards: glass surface ---------- */ .afm-rh-card { position: relative; overflow: hidden; background: linear-gradient( 145deg, rgba(255,255,255,.88), rgba(232,234,237,.72) ) !important; border: 1px solid rgba(210,213,217,.72) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(0,0,0,.045), 0 8px 24px rgba(0,0,0,.075), 0 1px 3px rgba(0,0,0,.035) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease; } /* subtle glass shine */ .afm-rh-card::after { content: ""; position: absolute; top: -80%; left: -25%; width: 55%; height: 210%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.34), transparent ); transform: rotate(18deg); opacity: .55; pointer-events: none; transition: left .5s ease, opacity .35s ease; } /* stronger hover */ .afm-rh-card:hover { transform: translateY(-7px) !important; background: linear-gradient( 145deg, rgba(255,255,255,.96), rgba(238,240,243,.84) ) !important; border-color: rgba(255,123,0,.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 16px 35px rgba(0,0,0,.075), 0 5px 18px rgba(255,123,0,.055) !important; } .afm-rh-card:hover::after { left: 115%; opacity: .9; } /* ---------- Final card gets a very subtle warm glass ---------- */ .afm-rh-final .afm-rh-card { background: linear-gradient( 145deg, rgba(255,255,255,.96), rgba(255,248,240,.78) ) !important; border-color: rgba(255,123,0,.20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 9px 26px rgba(255,123,0,.065) !important; } .afm-rh-final .afm-rh-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 17px 38px rgba(0,0,0,.075), 0 7px 22px rgba(255,123,0,.10) !important; } /* ---------- Keep text above glass shine ---------- */ .afm-rh-card > * { position: relative; z-index: 2; } /* ---------- Mobile: lighter glass for performance ---------- */ @media (max-width: 767px) { .afm-rh-card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .afm-rh-card:hover { transform: translateY(-4px) !important; } .afm-rh-eyebrow { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } } /* White-background glass refinement */ .afm-rh-card { isolation: isolate; } .afm-rh-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,.72); background: linear-gradient( 135deg, rgba(255,255,255,.30), transparent 42%, rgba(255,123,0,.025) ); pointer-events: none; z-index: 1; } .afm-rh-number { box-shadow: 0 4px 14px rgba(0,0,0,.08), 0 0 0 4px rgba(255,255,255,.82), 0 0 0 5px rgba(221,224,228,.55); } /* ========================================================= CLICKABLE ROADMAP ITEMS ========================================================= */ .afm-rh-item { text-decoration: none !important; color: inherit !important; cursor: pointer; } .afm-rh-item:visited, .afm-rh-item:hover, .afm-rh-item:focus, .afm-rh-item:active { text-decoration: none !important; color: inherit !important; } .afm-rh-item:focus-visible { outline: 2px solid rgba(255,123,0,.45); outline-offset: 5px; border-radius: 14px; } /* ========================================================= CLICKABLE ITEMS — LAYOUT SAFE ========================================================= */ .afm-rh-items > .afm-rh-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; text-decoration: none !important; color: inherit !important; } .afm-rh-items > .afm-rh-item .afm-rh-card { width: 100%; box-sizing: border-box; } .afm-rh-items > .afm-rh-item:hover, .afm-rh-items > .afm-rh-item:focus, .afm-rh-items > .afm-rh-item:active, .afm-rh-items > .afm-rh-item:visited { text-decoration: none !important; color: inherit !important; } @media (min-width: 1200px) { .afm-rh-items > .afm-rh-item { min-width: 0 !important; width: auto !important; flex: 1 1 0 !important; } } @media (max-width: 1199px) { .afm-rh-scroll { overflow-x: hidden !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7403cab */.elementor-element.elementor-element-7403cab.elementor-hidden-desktop.elementor-hidden-tablet.elementor-hidden-mobile.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded { display: none; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-6a5a2fa */.hk-live-section { background-image: linear-gradient(180deg, #ffffff 0%, #c7bbb8 100%) !important; border-radius: 29px; box-shadow: 0 0 5px 2px #cccccc; } .hk-live-section { --hk-orange: #FF7B00; --hk-orange-dark: #E96F00; --hk-dark: #111827; --hk-text: #4B5563; --hk-muted: #8B929C; --hk-border: rgba(17, 24, 39, 0.10); --hk-orange-soft: rgba(255, 123, 0, 0.06); width: 100%; max-width: 1180px; margin: 0 auto; padding: 20px 20px 50px; box-sizing: border-box; font-family: inherit; direction: rtl; } .hk-live-section *, .hk-live-section *::before, .hk-live-section *::after { box-sizing: border-box; } /* ========================================= HERO ========================================= */ .hk-live-hero { width: 100%; text-align: center; margin: 0 auto 45px; } .hk-live-badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 123, 0, 0.20); border-radius: 999px; color: var(--hk-orange); font-size: 13px; font-weight: 700; box-shadow: 0 5px 20px rgba(17, 24, 39, 0.06); margin-bottom: 20px; } .hk-live-badge-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--hk-orange); box-shadow: 0 0 0 4px rgba(255, 123, 0, 0.10); } .hk-live-title { max-width: 850px; margin: 0 auto 18px; color: var(--hk-dark); font-size: clamp(30px, 4vw, 52px); line-height: 1.4; font-weight: 900; letter-spacing: -1px; } .hk-live-title-highlight { color: var(--hk-orange); } .hk-live-description { max-width: 820px; margin: 0 auto; color: var(--hk-muted); font-size: 15px; line-height: 2.2; font-weight: 400; } .hk-live-divider { position: relative; width: 120px; height: 1px; margin: 28px auto 0; background: linear-gradient( 90deg, transparent, rgba(255, 123, 0, 0.45), transparent ); } .hk-live-divider::after { content: ""; position: absolute; width: 6px; height: 6px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--hk-orange); } /* ========================================= FEATURE CARDS ========================================= */ .hk-live-features { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 auto 20px; } .hk-live-feature { position: relative; display: flex; align-items: center; gap: 18px; min-width: 0; padding: 25px 26px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.97), rgba(248, 249, 250, 0.85) ); border: 1px solid var(--hk-border); border-radius: 18px; box-shadow: 0 8px 30px rgba(17, 24, 39, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .hk-live-feature::before { content: ""; position: absolute; width: 100px; height: 100px; right: -55px; top: -55px; border-radius: 50%; background: rgba(255, 123, 0, 0.035); pointer-events: none; } .hk-live-feature:hover { transform: translateY(-4px); border-color: rgba(255, 123, 0, 0.25); box-shadow: 0 15px 38px rgba(17, 24, 39, 0.08), 0 4px 15px rgba(255, 123, 0, 0.05); } .hk-live-feature-icon { width: 52px; height: 52px; min-width: 52px; display: flex; align-items: center; justify-content: center; border-radius: 15px; border: 1px solid rgba(255, 123, 0, 0.18); background: rgba(255, 123, 0, 0.055); color: var(--hk-orange); font-size: 23px; transition: background 0.3s ease, transform 0.3s ease; } .hk-live-feature:hover .hk-live-feature-icon { background: rgba(255, 123, 0, 0.10); transform: scale(1.05); } .hk-live-feature-content { min-width: 0; flex: 1; } .hk-live-feature-title { margin: 0 0 7px; color: var(--hk-dark); font-size: 17px; line-height: 1.6; font-weight: 800; } .hk-live-feature-text { margin: 0; color: var(--hk-muted); font-size: 13px; line-height: 1.9; } /* ========================================= EXPERIENCE BOX ========================================= */ .hk-live-experience { position: relative; width: 100%; margin: 18px auto 28px; padding: 22px 28px; border: 1px solid rgba(255, 123, 0, 0.25); background: linear-gradient( 135deg, rgba(255, 123, 0, 0.045), rgba(255, 255, 255, 0.92) ); border-radius: 17px; text-align: center; overflow: hidden; } .hk-live-experience::before { content: ""; position: absolute; width: 180px; height: 180px; top: -110px; right: -70px; border-radius: 50%; background: rgba(255, 123, 0, 0.045); pointer-events: none; } .hk-live-experience-title { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 8px; color: var(--hk-dark); font-size: 16px; line-height: 1.7; font-weight: 800; } .hk-live-experience-title::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--hk-orange); } .hk-live-experience-text { position: relative; margin: 0; color: var(--hk-muted); font-size: 13px; line-height: 2; } /* ========================================= CTA BUTTONS ========================================= */ .hk-live-actions { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 38px; flex-wrap: wrap; } .hk-live-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 22px; border-radius: 11px; text-decoration: none !important; font-size: 13px; font-weight: 800; line-height: 1.4; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .hk-live-btn-primary { color: #ffffff !important; background: var(--hk-orange); border: 1px solid var(--hk-orange); box-shadow: 0 8px 22px rgba(255, 123, 0, 0.18); } .hk-live-btn-primary:hover { color: #ffffff !important; background: var(--hk-orange-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 123, 0, 0.25); } .hk-live-btn-secondary { color: var(--hk-dark) !important; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(17, 24, 39, 0.18); box-shadow: 0 5px 16px rgba(17, 24, 39, 0.04); } .hk-live-btn-secondary:hover { color: var(--hk-orange) !important; border-color: rgba(255, 123, 0, 0.3); transform: translateY(-2px); box-shadow: 0 9px 22px rgba(17, 24, 39, 0.07); } .hk-live-btn-arrow { font-size: 16px; line-height: 1; } /* ========================================= BOTTOM INFO ========================================= */ .hk-live-info { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--hk-border); background: rgba(255, 255, 255, 0.82); border-radius: 16px; overflow: hidden; box-shadow: 0 7px 25px rgba(17, 24, 39, 0.045); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hk-live-info-item { min-width: 0; padding: 19px 14px; text-align: center; position: relative; } .hk-live-info-item + .hk-live-info-item { border-right: 1px solid rgba(17, 24, 39, 0.08); } .hk-live-info-title { margin: 0 0 5px; color: var(--hk-dark); font-size: 13px; line-height: 1.6; font-weight: 800; } .hk-live-info-text { margin: 0; color: var(--hk-muted); font-size: 11px; line-height: 1.7; } /* ========================================= TABLET ========================================= */ @media (max-width: 900px) { .hk-live-section { padding-left: 16px; padding-right: 16px; } .hk-live-title { font-size: clamp(28px, 5vw, 42px); } .hk-live-features { gap: 12px; } .hk-live-feature { padding: 21px; } .hk-live-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hk-live-info-item:nth-child(3), .hk-live-info-item:nth-child(4) { border-top: 1px solid rgba(17, 24, 39, 0.08); } .hk-live-info-item:nth-child(3) { border-right: 0; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 640px) { .hk-live-section { padding: 12px 14px 35px; } .hk-live-hero { margin-bottom: 32px; } .hk-live-badge { font-size: 11px; padding: 7px 13px; margin-bottom: 15px; } .hk-live-title { font-size: 28px; line-height: 1.5; letter-spacing: -0.5px; } .hk-live-description { font-size: 12px; line-height: 2; } .hk-live-divider { margin-top: 22px; } /* FEATURE CARDS */ .hk-live-features { grid-template-columns: 1fr; gap: 11px; } .hk-live-feature { padding: 18px; gap: 14px; border-radius: 15px; } .hk-live-feature-icon { width: 46px; height: 46px; min-width: 46px; border-radius: 13px; font-size: 20px; } .hk-live-feature-title { font-size: 15px; } .hk-live-feature-text { font-size: 11.5px; line-height: 1.8; } /* EXPERIENCE */ .hk-live-experience { padding: 19px 17px; margin-top: 14px; margin-bottom: 23px; } .hk-live-experience-title { font-size: 14px; } .hk-live-experience-text { font-size: 11.5px; } /* CTA */ .hk-live-actions { flex-direction: column; gap: 9px; margin-bottom: 28px; } .hk-live-btn { width: 100%; min-height: 47px; font-size: 12px; } /* INFO */ .hk-live-info { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; } .hk-live-info-item { padding: 16px 9px; } .hk-live-info-item:nth-child(2) { border-right: 1px solid rgba(17, 24, 39, 0.08); } .hk-live-info-item:nth-child(3) { border-right: 0; border-top: 1px solid rgba(17, 24, 39, 0.08); } .hk-live-info-item:nth-child(4) { border-right: 1px solid rgba(17, 24, 39, 0.08); border-top: 1px solid rgba(17, 24, 39, 0.08); } .hk-live-info-title { font-size: 11.5px; } .hk-live-info-text { font-size: 10px; } } /* ========================================= SMALL MOBILE - 360px ========================================= */ @media (max-width: 380px) { .hk-live-section { padding-left: 11px; padding-right: 11px; } .hk-live-title { font-size: 25px; } .hk-live-feature { padding: 16px; } .hk-live-feature-icon { width: 42px; height: 42px; min-width: 42px; } .hk-live-feature-title { font-size: 14px; } .hk-live-feature-text { font-size: 10.5px; } .hk-live-info-title { font-size: 10.5px; } .hk-live-info-text { font-size: 9px; } } /* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-d46d6c7 *//* ===================================================== TRADER PSYCHOLOGY SECTION ===================================================== */ .trader-psychology { --tp-orange: #FF7B00; --tp-orange-light: #FFF3E6; --tp-dark: #182238; --tp-dark-2: #273246; --tp-gray: #737C8E; --tp-green: #20B95B; --tp-bg: #F7F9FC; width: 100%; padding: 70px 20px; background: linear-gradient( 180deg, #FFFFFF 0%, #F7F9FC 100% ); font-family: IRANSans, IRANSansX, Vazirmatn, Tahoma, sans-serif; } .trader-psychology *, .trader-psychology *::before, .trader-psychology *::after { box-sizing: border-box; } /* ===================================================== CONTAINER ===================================================== */ .psychology-container { max-width: 1200px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; } /* ===================================================== CONTENT ===================================================== */ .psychology-content { order: 2; } .psychology-label { display: inline-flex; align-items: center; padding: 7px 13px; margin-bottom: 15px; color: var(--tp-orange); background: var(--tp-orange-light); border-radius: 8px; font-size: 12px; font-weight: 800; } .psychology-content h2 { margin: 0; color: var(--tp-dark); font-size: clamp( 34px, 4vw, 48px ); line-height: 1.5; font-weight: 900; letter-spacing: -1px; } .psychology-content h2 span { display: block; color: var(--tp-orange); } .psychology-description { max-width: 570px; margin: 20px 0 0; color: var(--tp-gray); font-size: 14px; line-height: 2.1; } .psychology-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 25px; } .psychology-benefit { display: flex; align-items: center; gap: 9px; } .psychology-benefit > span { display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; flex: 0 0 23px; color: var(--tp-green); background: #EAF9F0; border-radius: 50%; font-size: 11px; font-weight: 900; } .psychology-benefit p { margin: 0; color: var(--tp-dark-2); font-size: 11px; font-weight: 700; } /* ===================================================== CTA ===================================================== */ .psychology-action { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 30px; } .psychology-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; color: #fff !important; background: var(--tp-orange); border-radius: 13px; text-decoration: none; font-size: 13px; font-weight: 900; box-shadow: 0 12px 28px rgba(255,123,0,.22); transition: all .25s ease; } .psychology-btn:hover { color: #fff !important; background: #E86F00; transform: translateY(-3px); box-shadow: 0 17px 35px rgba(255,123,0,.28); } .free-test { color: var(--tp-gray); font-size: 11px; font-weight: 700; } /* ===================================================== VISUAL ===================================================== */ .psychology-visual { position: relative; order: 1; min-height: 500px; display: flex; align-items: center; justify-content: center; } .psychology-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient( circle, rgba(255,123,0,.16), rgba(255,123,0,.03), transparent 70% ); filter: blur(10px); } /* ===================================================== DASHBOARD ===================================================== */ .psychology-dashboard { position: relative; z-index: 2; width: 430px; padding: 25px; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.8); border-radius: 25px; box-shadow: 0 25px 70px rgba(24,34,56,.13); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); transform: rotate(-2deg); transition: transform .4s ease; } .psychology-dashboard:hover { transform: rotate(0) translateY(-5px); } /* HEADER */ .dashboard-header { display: flex; align-items: center; justify-content: space-between; } .dashboard-header span { display: block; color: var(--tp-orange); font-size: 8px; letter-spacing: 1.5px; font-weight: 900; } .dashboard-header strong { display: block; margin-top: 4px; color: var(--tp-dark); font-size: 14px; } .brain-icon { display: flex; align-items: center; justify-content: center; width: 47px; height: 47px; background: var(--tp-orange-light); border-radius: 14px; font-size: 23px; } /* ===================================================== SCORE ===================================================== */ .psychology-score { display: flex; align-items: center; gap: 20px; margin-top: 28px; padding: 20px; background: linear-gradient( 135deg, #FFF8F1, #FFFFFF ); border-radius: 18px; } .score-circle { width: 105px; height: 105px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: conic-gradient( var(--tp-orange) 0 82%, #EDEFF3 82% 100% ); position: relative; } .score-circle::before { content: ""; position: absolute; inset: 8px; background: #fff; border-radius: 50%; } .score-circle div { position: relative; z-index: 2; } .score-circle strong { color: var(--tp-dark); font-size: 30px; font-weight: 900; } .score-circle span { color: var(--tp-orange); font-size: 13px; font-weight: 900; } .score-text strong { display: block; color: var(--tp-dark); font-size: 15px; } .score-text span { display: block; margin-top: 4px; color: var(--tp-green); font-size: 10px; font-weight: 800; } /* ===================================================== METRICS ===================================================== */ .psychology-metrics { margin-top: 20px; } .metric { margin-bottom: 15px; } .metric-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .metric-info span { color: var(--tp-dark-2); font-size: 10px; font-weight: 700; } .metric-info strong { color: var(--tp-dark); font-size: 10px; direction: ltr; } .metric-bar { width: 100%; height: 6px; overflow: hidden; background: #EDF0F4; border-radius: 20px; } .metric-bar span { display: block; height: 100%; background: linear-gradient( 90deg, var(--tp-orange), #FFAA55 ); border-radius: 20px; } /* ===================================================== FOOTER ===================================================== */ .dashboard-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 15px; border-top: 1px solid #EDF0F4; } .dashboard-footer span:first-child { color: var(--tp-gray); font-size: 9px; } .online-status { color: var(--tp-green); font-size: 9px; font-weight: 800; } /* ===================================================== FLOATING ===================================================== */ .psychology-floating { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 13px 15px; background: rgba(255,255,255,.97); border: 1px solid #E8ECF2; border-radius: 15px; box-shadow: 0 15px 40px rgba(24,34,56,.12); } .psychology-floating-top { top: 55px; right: 0; } .psychology-floating-top > span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #FFF3E6; border-radius: 11px; font-size: 18px; } .psychology-floating strong { display: block; color: var(--tp-dark); font-size: 10px; } .psychology-floating small { display: block; margin-top: 3px; color: var(--tp-gray); font-size: 8px; } .psychology-floating-bottom { bottom: 50px; left: 5px; flex-direction: column; align-items: flex-start; gap: 0; } .psychology-floating-bottom strong { color: var(--tp-orange); font-size: 24px; } .psychology-floating-bottom span { color: var(--tp-gray); font-size: 9px; } /* ===================================================== TABLET ===================================================== */ @media (max-width: 1024px) { .psychology-container { gap: 40px; } .psychology-dashboard { width: 390px; } .psychology-content h2 { font-size: 37px; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 767px) { .trader-psychology { padding: 50px 15px; } .psychology-container { display: flex; flex-direction: column; gap: 40px; } .psychology-content { order: 1; width: 100%; } .psychology-visual { order: 2; width: 100%; min-height: 430px; } .psychology-content h2 { font-size: 30px; line-height: 1.6; } .psychology-description { font-size: 13px; } .psychology-benefits { grid-template-columns: 1fr; } .psychology-action { flex-direction: column; align-items: stretch; } .psychology-btn { width: 100%; } .free-test { text-align: center; } .psychology-dashboard { width: min( 100%, 390px ); padding: 20px; } .psychology-floating-top { top: 20px; right: -5px; } .psychology-floating-bottom { bottom: 20px; left: -5px; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 420px) { .psychology-dashboard { width: 100%; transform: none; } .psychology-dashboard:hover { transform: none; } .psychology-floating-top { right: -8px; transform: scale(.85); transform-origin: right top; } .psychology-floating-bottom { left: -8px; transform: scale(.85); transform-origin: left bottom; } .score-circle { width: 85px; height: 85px; } .score-circle strong { font-size: 25px; } }/* End custom CSS */ /* Start custom CSS for blog-carousel, class: .elementor-element-43301cb */:is(h1,h2,h3,h4,h5,h6,.title) a { text-align: center !important;; font-size: 15px; color: inherit; text-decoration: none; } .blog-loop-inner.grid-2 { padding: 2%; margin: 3%; box-shadow: 0 0 2px 2px #dcdcdc; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-5536aa5 *//* ===================================================== HAMED KAMRANI - FAQ LIGHT UI DESIGN SYSTEM ===================================================== */ .hk-faq-section { --faq-orange: #FF7B00; --faq-orange-dark: #E86F00; --faq-orange-light: #FFF3E6; --faq-dark: #182238; --faq-dark-soft: #273246; --faq-gray: #737C8E; --faq-green: #20B95B; --faq-bg: #F7F9FC; --faq-border: #E8ECF2; width: 100%; padding: 75px 20px; background: linear-gradient( 180deg, #FFFFFF 0%, #F7F9FC 100% ); font-family: IRANSans, IRANSansX, Vazirmatn, Tahoma, sans-serif; } .hk-faq-section *, .hk-faq-section *::before, .hk-faq-section *::after { box-sizing: border-box; } /* ===================================================== CONTAINER ===================================================== */ .hk-faq-container { width: 100%; max-width: 1200px; margin: 0 auto; } /* ===================================================== HEADER ===================================================== */ .hk-faq-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 35px; } .hk-faq-heading { max-width: 600px; } /* ===================================================== BADGE ===================================================== */ .hk-faq-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; color: var(--faq-orange); background: var(--faq-orange-light); border: 1px solid rgba(255,123,0,.10); border-radius: 8px; font-size: 10px; font-weight: 900; } .hk-faq-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--faq-orange); box-shadow: 0 0 0 4px rgba(255,123,0,.10); } /* ===================================================== TITLE ===================================================== */ .hk-faq-heading h2 { margin: 15px 0 0; color: var(--faq-dark); font-size: clamp(32px, 4vw, 46px); line-height: 1.5; font-weight: 900; letter-spacing: -1px; } .hk-faq-heading h2 strong { color: var(--faq-orange); font-weight: 900; } .hk-faq-heading p { max-width: 550px; margin: 12px 0 0; color: var(--faq-gray); font-size: 13px; line-height: 2; } /* ===================================================== SUPPORT CARD ===================================================== */ .hk-faq-support { display: flex; align-items: center; gap: 12px; min-width: 370px; padding: 14px; background: rgba(255,255,255,.85); border: 1px solid var(--faq-border); border-radius: 17px; box-shadow: 0 12px 30px rgba(24,34,56,.05); backdrop-filter: blur(10px); } .hk-support-icon { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; flex: 0 0 45px; background: var(--faq-orange-light); border-radius: 13px; font-size: 20px; } .hk-support-content { flex: 1; } .hk-support-content span { display: block; color: var(--faq-gray); font-size: 9px; } .hk-support-content strong { display: block; margin-top: 3px; color: var(--faq-dark); font-size: 11px; font-weight: 900; } .hk-support-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; color: var(--faq-orange) !important; background: var(--faq-orange-light); border-radius: 10px; text-decoration: none !important; font-size: 9px; font-weight: 900; white-space: nowrap; transition: all .25s ease; } .hk-support-btn:hover { color: #fff !important; background: var(--faq-orange); } /* ===================================================== MAIN LAYOUT ===================================================== */ .hk-faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; } /* ===================================================== FAQ LIST ===================================================== */ .hk-faq-list { display: flex; flex-direction: column; gap: 10px; } /* ===================================================== FAQ ITEM ===================================================== */ .hk-faq-item { position: relative; background: #fff; border: 1px solid var(--faq-border); border-radius: 15px; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .hk-faq-item:hover { border-color: rgba(255,123,0,.22); box-shadow: 0 10px 30px rgba(24,34,56,.055); } .hk-faq-item[open] { border-color: rgba(255,123,0,.30); box-shadow: 0 14px 35px rgba(24,34,56,.07); } /* ORANGE SIDE LINE */ .hk-faq-item::before { content: ""; position: absolute; right: 0; top: 0; width: 3px; height: 0; background: var(--faq-orange); transition: height .3s ease; } .hk-faq-item[open]::before { height: 100%; } /* ===================================================== SUMMARY ===================================================== */ .hk-faq-item summary { display: grid; grid-template-columns: 38px 1fr 35px; align-items: center; gap: 12px; min-height: 70px; padding: 10px 18px; cursor: pointer; list-style: none; } .hk-faq-item summary::-webkit-details-marker { display: none; } /* ===================================================== NUMBER ===================================================== */ .hk-question-number { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--faq-orange); background: var(--faq-orange-light); border-radius: 9px; font-size: 9px; font-weight: 900; direction: ltr; } /* ===================================================== QUESTION ===================================================== */ .hk-question { color: var(--faq-dark); font-size: 12px; line-height: 1.8; font-weight: 800; } .hk-faq-item[open] .hk-question { color: var(--faq-orange); } /* ===================================================== PLUS ===================================================== */ .hk-faq-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--faq-dark); background: #F5F7FA; border-radius: 9px; font-size: 18px; font-weight: 400; transition: all .3s ease; } .hk-faq-item[open] .hk-faq-icon { color: #fff; background: var(--faq-orange); transform: rotate(45deg); } /* ===================================================== ANSWER ===================================================== */ .hk-faq-answer { padding: 0 70px 20px 55px; } .hk-faq-answer p { margin: 0; padding: 16px 18px; color: var(--faq-gray); background: #FAFBFC; border-radius: 11px; font-size: 11px; line-height: 2; } /* ===================================================== SIDE CARD ===================================================== */ .hk-faq-side { position: relative; min-height: 390px; padding: 27px; overflow: hidden; background: linear-gradient( 145deg, #FFFFFF, #FFF8F1 ); border: 1px solid rgba(255,123,0,.15); border-radius: 20px; box-shadow: 0 15px 40px rgba(24,34,56,.06); } .hk-faq-side-pattern { position: absolute; width: 220px; height: 220px; top: -100px; left: -90px; border-radius: 50%; background: radial-gradient( circle, rgba(255,123,0,.14), transparent 70% ); } .hk-side-icon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; margin-bottom: 25px; color: #fff; background: linear-gradient( 135deg, #FF8A18, #FF7100 ); border-radius: 16px; font-size: 25px; font-weight: 900; box-shadow: 0 12px 25px rgba(255,123,0,.20); } .hk-faq-side > span { position: relative; z-index: 2; color: var(--faq-orange); font-size: 8px; letter-spacing: 1.5px; font-weight: 900; } .hk-faq-side h3 { position: relative; z-index: 2; margin: 10px 0 0; color: var(--faq-dark); font-size: 23px; line-height: 1.7; font-weight: 900; } .hk-faq-side h3 strong { display: block; color: var(--faq-orange); } .hk-faq-side p { position: relative; z-index: 2; margin: 13px 0 25px; color: var(--faq-gray); font-size: 10px; line-height: 2; } .hk-faq-side > a { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; color: #fff !important; background: var(--faq-orange); border-radius: 11px; text-decoration: none !important; font-size: 10px; font-weight: 900; transition: all .25s ease; } .hk-faq-side > a:hover { background: var(--faq-orange-dark); transform: translateY(-2px); } /* ===================================================== TABLET ===================================================== */ @media (max-width: 1024px) { .hk-faq-header { align-items: flex-start; flex-direction: column; } .hk-faq-support { width: 100%; min-width: 0; } .hk-faq-layout { grid-template-columns: 1fr; } .hk-faq-side { min-height: auto; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 767px) { .hk-faq-section { padding: 50px 12px; } .hk-faq-heading h2 { font-size: 31px; } .hk-faq-heading p { font-size: 12px; } .hk-faq-support { flex-wrap: wrap; } .hk-support-content { min-width: 120px; } .hk-support-btn { width: 100%; justify-content: center; } .hk-faq-item summary { grid-template-columns: 32px 1fr 30px; gap: 9px; padding: 9px 12px; } .hk-question-number { width: 28px; height: 28px; font-size: 8px; } .hk-question { font-size: 11px; } .hk-faq-icon { width: 28px; height: 28px; } .hk-faq-answer { padding: 0 12px 15px 42px; } .hk-faq-answer p { padding: 13px; font-size: 10px; } .hk-faq-side { padding: 23px; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 420px) { .hk-faq-heading h2 { font-size: 28px; } .hk-faq-support { padding: 12px; } .hk-question { font-size: 10px; } }/* End custom CSS */