.elementor-27595 .elementor-element.elementor-element-3a05426{--display:flex;--position:fixed;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-27595 .elementor-element.elementor-element-3a05426{left:0px;}body.rtl .elementor-27595 .elementor-element.elementor-element-3a05426{right:0px;}.elementor-27595 .elementor-element.elementor-element-ed97289{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-27595 .elementor-element.elementor-element-da910e7{--display:flex;--min-height:0px;--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;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:-0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-27595 .elementor-element.elementor-element-da910e7.e-con{--order:1;--flex-grow:0;--flex-shrink:0;}.elementor-27595 .elementor-element.elementor-element-ae20bb7{--display:flex;}.elementor-27595 .elementor-element.elementor-element-fffd74c > .elementor-widget-container{margin:0px 0px 0px -10px;padding:0px 0px 0px 0px;}.elementor-27595 .elementor-element.elementor-element-fffd74c.elementor-element{--align-self:flex-start;--order:-99999 /* order start hack */;}.elementor-27595 .elementor-element.elementor-element-fffd74c .eael-breadcrumbs{justify-content:center;}.elementor-27595 .elementor-element.elementor-element-fffd74c .eael-breadcrumbs .eael-breadcrumbs__content{border-style:none;color:var( --e-global-color-accent );font-family:"Roboto", Arial, Helvetica, sans-serif;}.elementor-27595 .elementor-element.elementor-element-fffd74c .eael-breadcrumbs .eael-breadcrumbs__content a{color:#FFFFFF;}.elementor-27595 .elementor-element.elementor-element-fffd74c .eael-breadcrumbs .eael-breadcrumb-separator svg path{fill:#A5A4B0;}.elementor-27595 .elementor-element.elementor-element-fffd74c .eael-breadcrumbs .eael-breadcrumb-separator{color:#A5A4B0;margin:0 10px;}.elementor-27595 .elementor-element.elementor-element-e417eb7.elementor-element{--order:-99999 /* order start hack */;}.elementor-27595 .elementor-element.elementor-element-3a4fc10{--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-27595 .elementor-element.elementor-element-c33d46c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-27595 .elementor-element.elementor-element-eec493a{--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-27595 .elementor-element.elementor-element-47d05cc{--divider-border-style:solid;--divider-color:var( --e-global-color-b487476 );--divider-border-width:1px;}.elementor-27595 .elementor-element.elementor-element-47d05cc .elementor-divider-separator{width:100%;}.elementor-27595 .elementor-element.elementor-element-47d05cc .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-27595 .elementor-element.elementor-element-b5b0990{--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-27595 .elementor-element.elementor-element-e571400{--display:flex;border-style:solid;--border-style:solid;border-width:1px 0px 0px 1px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:1px;border-color:#FFFFFF24;--border-color:#FFFFFF24;--border-radius:15px 15px 15px 15px;box-shadow:5px 5px 10px 0px rgba(0,0,0,0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-27595 .elementor-element.elementor-element-e571400:not(.elementor-motion-effects-element-type-background), .elementor-27595 .elementor-element.elementor-element-e571400 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-27595 .elementor-element.elementor-element-4cecf6a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 5px;border-style:solid;border-width:0px 0px 0px 5px;border-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;}.elementor-27595 .elementor-element.elementor-element-4cecf6a .elementor-heading-title{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-4566f11{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-3ac7c4d{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-f79cb9b{--divider-border-style:solid;--divider-color:var( --e-global-color-b487476 );--divider-border-width:1px;}.elementor-27595 .elementor-element.elementor-element-f79cb9b .elementor-divider-separator{width:100%;}.elementor-27595 .elementor-element.elementor-element-f79cb9b .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-27595 .elementor-element.elementor-element-2271456{--display:flex;border-style:solid;--border-style:solid;border-width:1px 0px 0px 1px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:1px;border-color:#FFFFFF24;--border-color:#FFFFFF24;--border-radius:15px 15px 15px 15px;box-shadow:5px 5px 10px 0px rgba(0,0,0,0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-27595 .elementor-element.elementor-element-2271456:not(.elementor-motion-effects-element-type-background), .elementor-27595 .elementor-element.elementor-element-2271456 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-27595 .elementor-element.elementor-element-14329e8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 5px;border-style:solid;border-width:0px 0px 0px 5px;border-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;}.elementor-27595 .elementor-element.elementor-element-14329e8 .elementor-heading-title{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-a23ca9e{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-8dd2705{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-e703875{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-dc178ab{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-4a4bf72{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-576acd0{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-e134937{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-90e7b37{font-family:"Roboto", Arial, Helvetica, sans-serif;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-7137d82{--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;--overflow:hidden;}.elementor-27595 .elementor-element.elementor-element-103552b{--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;--justify-content:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-27595 .elementor-element.elementor-element-2dce6b9{--divider-border-style:solid;--divider-color:var( --e-global-color-b487476 );--divider-border-width:1px;}.elementor-27595 .elementor-element.elementor-element-2dce6b9 .elementor-divider-separator{width:100%;}.elementor-27595 .elementor-element.elementor-element-2dce6b9 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-27595 .elementor-element.elementor-element-b8a4fdd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 5px;border-style:solid;border-width:0px 0px 0px 5px;border-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;}.elementor-27595 .elementor-element.elementor-element-b8a4fdd .elementor-heading-title{font-family:"Roboto", Arial, Helvetica, sans-serif;color:#FFFFFF;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header,
.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-wrapper .eael-accordion_media-list{background-color:var( --e-global-color-primary );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover,
.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-wrapper .eael-accordion_media-lists .eael-accordion_media-list:not(.active):hover{background-color:var( --e-global-color-primary );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active,
.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-wrapper .eael-accordion_media-list.active{background-color:var( --e-global-color-primary );}.elementor-27595 .elementor-element.elementor-element-35032d4{width:100%;max-width:100%;}.elementor-27595 .elementor-element.elementor-element-35032d4.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion, .elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-wrapper{border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion{border-radius:5px 5px 5px 5px;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-wrapper{border-radius:5px 5px 5px 5px;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-accordion-icon{font-size:16px;color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header svg.fa-accordion-icon{height:16px;width:16px;line-height:16px;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-list .eael-accordion_media-icon i{font-size:16px;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-list .eael-accordion_media-icon svg{height:16px;width:16px;line-height:16px;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-accordion-icon,
.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-wrapper .eael-accordion_media-lists .eael-accordion_media-list{gap:10px;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .eael-accordion-tab-title{color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-content .eael-accordion_media-title{color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-accordion-icon-svg svg{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header svg{fill:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-list .eael-accordion_media-icon{color:var( --e-global-color-secondary );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover .eael-accordion-tab-title,
.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-list:not(.active):hover .eael-accordion_media-title{color:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover .fa-accordion-icon{color:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover .fa-accordion-icon svg{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header:hover svg.fa-accordion-icon{fill:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-list:hover .eael-accordion_media-icon i{color:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-list:hover .eael-accordion_media-icon svg{fill:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active{color:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .eael-accordion-tab-title{color:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .fa-accordion-icon{color:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .fa-accordion-icon svg{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active svg.fa-accordion-icon{fill:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-list.active .eael-accordion_media-icon i{color:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-list.active .eael-accordion_media-icon svg{fill:var( --e-global-color-accent );}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-content{color:#FFFFFF;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-accordion_media-list .eael-accordion_media-content .eael-accordion_media-description{color:#FFFFFF;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-toggle, .elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header > .fa-toggle-svg{font-size:16px;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header svg.fa-toggle{height:16px;width:16px;line-height:16px;fill:#444;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-toggle{color:#444;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-toggle svg{color:#444;fill:#444;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .fa-toggle{color:#fff;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .fa-toggle svg{color:#fff;fill:#fff;}.elementor-27595 .elementor-element.elementor-element-35032d4 .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active svg.fa-toggle{fill:#fff;}.elementor-27595 .elementor-element.elementor-element-b352dce{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-27595 .elementor-element.elementor-element-41fa3fb{--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;--justify-content:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-27595 .elementor-element.elementor-element-1de4334{--display:flex;}.elementor-27595 .elementor-element.elementor-element-bc9862c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 5px;border-style:solid;border-width:0px 0px 0px 5px;border-color:var( --e-global-color-accent );border-radius:0px 0px 0px 0px;text-align:start;}.elementor-27595 .elementor-element.elementor-element-bc9862c .elementor-heading-title{font-family:"Roboto", Arial, Helvetica, sans-serif;color:#FFFFFF;}.elementor-27595 .elementor-element.elementor-element-ffd2756{--grid-row-gap:10px;--grid-column-gap:10px;}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.65 * 100% );}.elementor-27595 .elementor-element.elementor-element-ffd2756:after{content:"0.65";}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__thumbnail__link{width:100%;margin-bottom:calc(46px / 2);}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__meta-data span + span:before{content:"•";}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__card{background-color:#EFEFEF;border-color:#000000;}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__card .elementor-post__meta-data{border-top-color:#000000;}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__text{margin-top:20px;}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__badge{right:0;}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__card .elementor-post__badge{background-color:#CBC5C5;color:#000000;margin:20px;}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__avatar{top:calc(-46px / 2);}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__avatar img{width:46px;height:46px;}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__title, .elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__title a{color:#000000;}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__meta-data{color:#000000;}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__meta-data span:before{color:#000000;}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__read-more{color:#0D0D0D;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-27595 .elementor-element.elementor-element-3a05426{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-27595 .elementor-element.elementor-element-da910e7{--min-height:200px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:90px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-27595 .elementor-element.elementor-element-41fa3fb{--flex-wrap:wrap;--align-content:flex-start;}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-27595 .elementor-element.elementor-element-ffd2756:after{content:"0.5";}.elementor-27595 .elementor-element.elementor-element-ffd2756 .elementor-post__thumbnail__link{width:100%;}}@media(min-width:768px){.elementor-27595 .elementor-element.elementor-element-da910e7{--width:99.902%;}.elementor-27595 .elementor-element.elementor-element-103552b{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-27595 .elementor-element.elementor-element-103552b{--width:100%;}.elementor-27595 .elementor-element.elementor-element-41fa3fb{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-e417eb7 */.dual-heading {
font-size: 2.5rem;
font-weight: 700;
color: #000; /* Default text color */
}
.dual-heading .highlight {
color: #fcc419; /* Change this to any color you want */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-da910e7 *//* ================================================
DARK PROFESSIONAL BACKGROUND FOR ELEMENTOR SECTIONS
Add this CSS to your Elementor container/section
Custom CSS field using ".elementor-27595 .elementor-element.elementor-element-da910e7" as the prefix
================================================ */
/* Main container background and layout */
.elementor-27595 .elementor-element.elementor-element-da910e7 {
position: relative;
background: linear-gradient(135deg,
rgba(30, 30, 35, 0.7) 0%,
rgba(26, 26, 31, 0.8) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
isolation: isolate;
}
/* Subtle noise texture overlay */
.elementor-27595 .elementor-element.elementor-element-da910e7::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.02;
background-image:
repeating-linear-gradient(45deg,
transparent,
transparent 35px,
rgba(255,255,255,.005) 35px,
rgba(255,255,255,.005) 70px);
pointer-events: none;
z-index: 1;
}
/* Animation for top accent line */
@keyframes sectionShimmer {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
/* ================================================
OPTIONAL: ENHANCED VERSION WITH AMBIENT EFFECTS
Uncomment the sections below for additional effects
================================================ */
/* Optional: Ambient light effect - top left */
/*
.elementor-27595 .elementor-element.elementor-element-da910e7 .ambient-glow-1 {
position: absolute;
top: -20%;
left: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.03),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* Optional: Ambient light effect - bottom right */
/*
.elementor-27595 .elementor-element.elementor-element-da910e7 .ambient-glow-2 {
position: absolute;
bottom: -20%;
right: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.02),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* To use ambient glows, add these divs inside your section:
*/
/* ================================================
COLOR VARIABLES FOR EASY CUSTOMIZATION
================================================ */
.elementor-27595 .elementor-element.elementor-element-da910e7 {
--section-accent: #FCC419;
--section-accent-bright: #FFD43B;
--section-surface: rgba(30, 30, 35, 0.7);
--section-surface-dark: rgba(26, 26, 31, 0.8);
}
/* ================================================
RESPONSIVE ADJUSTMENTS
================================================ */
@media (max-width: 768px) {
.elementor-27595 .elementor-element.elementor-element-da910e7 {
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
}
/* ================================================
ACCESSIBILITY - REDUCED MOTION
================================================ */
@media (prefers-reduced-motion: reduce) {
.elementor-27595 .elementor-element.elementor-element-da910e7::before {
animation: none;
}
}
/* ================================================
USAGE INSTRUCTIONS:
1. In Elementor, select your container/section
2. Go to Advanced > Custom CSS
3. Paste this entire CSS code
4. The ".elementor-27595 .elementor-element.elementor-element-da910e7" keyword will automatically target your element
Optional: For full-width sections, also set:
- Layout > Width: Full Width
- Advanced > Margin: 0
- Advanced > Padding: Adjust as needed (e.g., 3rem 2rem)
For the accent color (#FCC419), you can change it by
modifying the color values throughout the CSS
================================================ *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c33d46c *//* ========================================
Platform Finder Tool - Complete Neomorphic Design with Mobile Optimization
Fully Scoped to .pft-wrapper
Version: Complete with Mobile Tooltip Fix
======================================== */
/* Scoped CSS Variables */
.pft-wrapper {
/* Modern Color Palette */
--pft-primary: #6366F1; /* Indigo - main brand color */
--pft-primary-dark: #4F46E5; /* Darker indigo */
--pft-primary-light: #818CF8; /* Lighter indigo */
--pft-accent: #F59E0B; /* Amber - for highlights */
--pft-accent-dark: #D97706; /* Darker amber */
--pft-accent-light: #FCD34D; /* Lighter amber */
--pft-success: #10B981; /* Emerald green */
--pft-success-dark: #059669; /* Darker emerald */
--pft-success-light: #34D399; /* Lighter emerald */
/* Neutral Colors - Softer grays */
--pft-bg-main: #F1F5F9; /* Light slate background */
--pft-bg-secondary: #F1F5F9; /* Matching background */
--pft-bg-tertiary: #E2E8F0; /* Slightly darker slate */
--pft-bg-white: #FFFFFF; /* Pure white for cards */
/* Text Colors - Better contrast */
--pft-text-primary: #1E293B; /* Dark slate */
--pft-text-secondary: #475569; /* Medium slate */
--pft-text-tertiary: #64748B; /* Light slate */
--pft-text-muted: #94A3B8; /* Muted slate */
/* Border Colors */
--pft-border: #CBD5E1; /* Slate border */
--pft-border-light: #E2E8F0; /* Light slate border */
/* Dark Background Optimized Shadows */
--pft-shadow-neo-small: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
--pft-shadow-neo-medium: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.06);
--pft-shadow-neo-large: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.05);
--pft-shadow-neo-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);
--pft-shadow-neo-hover: 0 8px 10px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.05);
/* REFINED Colored Shadows - REDUCED opacity for clarity */
--pft-shadow-primary: 0 2px 8px rgba(99, 102, 241, 0.08);
--pft-shadow-accent: 0 2px 8px rgba(245, 158, 11, 0.08);
--pft-shadow-success: 0 2px 8px rgba(16, 185, 129, 0.08);
/* REFINED Glow effects - MUCH SUBTLER */
--pft-glow-primary: 0 0 12px rgba(99, 102, 241, 0.1);
--pft-glow-accent: 0 0 12px rgba(245, 158, 11, 0.12);
--pft-glow-success: 0 0 12px rgba(16, 185, 129, 0.1);
/* Spacing - Moderately reduced for compact layout */
--pft-space-xs: 0.25rem;
--pft-space-sm: 0.5rem;
--pft-space-md: 0.875rem;
--pft-space-lg: 1.25rem;
--pft-space-xl: 1.75rem;
--pft-space-2xl: 2.5rem;
/* Radius */
--pft-radius-sm: 8px;
--pft-radius-md: 12px;
--pft-radius-lg: 16px;
--pft-radius-xl: 24px;
--pft-radius-round: 50px;
/* Original Shadows (kept for specific uses) */
--pft-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--pft-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
--pft-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
}
/* Reset scoped to .pft-wrapper */
.pft-wrapper * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ========================================
Wrapper & Container - CLEAN WHITE BACKGROUND
======================================== */
.pft-wrapper {
min-height: 100vh;
padding: var(--pft-space-xl);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
color: var(--pft-text-primary);
line-height: 1.5;
position: relative;
overflow: visible;
}
/* UPDATED: Clean container without purple tints */
.pft-wrapper .pft-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr; /* Adjusted ratio for better balance */
gap: var(--pft-space-2xl); /* Increased gap for visual separation */
align-items: start;
position: relative;
z-index: 1;
border: 1px solid rgba(226, 232, 240, 0.09); /* Subtle border */
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); /* Softer shadow */
border-radius: 24px;
padding: var(--pft-space-xl);
}
/* ========================================
Questions Panel - Now on the LEFT
======================================== */
.pft-wrapper .pft-questions-panel {
background: #ffffff; /* Pure white background */
border-radius: var(--pft-radius-xl);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Softer shadow */
padding: var(--pft-space-2xl);
position: relative;
overflow: hidden;
min-height: 600px;
border: 1px solid rgba(226, 232, 240, 0.8); /* Light gray border */
will-change: transform;
order: 1; /* ADDED: Forces questions panel to the left */
}
/* ========================================
Enhanced Progress Bar - Neomorphic
======================================== */
.pft-wrapper .pft-progress {
margin-bottom: var(--pft-space-2xl);
position: relative;
z-index: 1;
}
.pft-wrapper .pft-progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--pft-space-md);
}
.pft-wrapper .pft-progress-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--pft-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pft-wrapper .pft-progress-count {
font-size: 0.875rem;
color: var(--pft-text-primary);
font-weight: 600;
background: var(--pft-bg-white);
padding: var(--pft-space-xs) var(--pft-space-sm);
border-radius: var(--pft-radius-round);
box-shadow: var(--pft-shadow-neo-small);
}
.pft-wrapper .pft-progress-count #currentStep {
color: var(--pft-primary);
font-size: 1rem;
}
.pft-wrapper .pft-progress-bar {
height: 12px;
background: var(--pft-bg-main);
border-radius: var(--pft-radius-round);
overflow: visible;
margin-bottom: var(--pft-space-md);
box-shadow: var(--pft-shadow-neo-inset);
position: relative;
}
.pft-wrapper .pft-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--pft-primary), var(--pft-primary-dark));
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border-radius: var(--pft-radius-round);
box-shadow: var(--pft-shadow-primary);
}
.pft-wrapper .pft-progress-indicator {
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: var(--pft-bg-white);
border: 3px solid var(--pft-primary);
border-radius: 50%;
box-shadow: var(--pft-shadow-neo-small);
}
.pft-wrapper .pft-progress-dots {
display: flex;
justify-content: space-between;
padding: 0 var(--pft-space-sm);
}
.pft-wrapper .pft-dot {
width: 10px;
height: 10px;
background: var(--pft-bg-tertiary);
border-radius: 50%;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: var(--pft-shadow-neo-small);
}
.pft-wrapper .pft-dot.active {
background: var(--pft-primary);
transform: scale(1.3);
box-shadow: var(--pft-shadow-primary);
}
.pft-wrapper .pft-dot.completed {
background: var(--pft-success);
box-shadow: var(--pft-shadow-success);
}
/* ========================================
Questions Container
======================================== */
.pft-wrapper .pft-questions-container {
animation: fadeIn 0.3s ease;
}
.pft-wrapper .pft-step-container {
min-height: 350px;
position: relative;
z-index: 1;
}
.pft-wrapper .pft-step {
display: none;
animation: slideInRight 0.3s ease;
}
.pft-wrapper .pft-step.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Step Header with Tooltip - Neomorphic */
.pft-wrapper .pft-step-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--pft-space-lg);
padding-bottom: var(--pft-space-md);
border-bottom: 2px solid var(--pft-border-light);
}
.pft-wrapper .pft-step-number {
font-size: 0.75rem;
font-weight: 700;
color: var(--pft-primary);
text-transform: uppercase;
letter-spacing: 1px;
padding: var(--pft-space-xs) var(--pft-space-sm);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(129, 140, 248, 0.05));
border-radius: var(--pft-radius-round);
box-shadow: var(--pft-shadow-neo-small);
}
.pft-wrapper .pft-why-matters {
position: relative;
display: flex;
align-items: center;
gap: var(--pft-space-xs);
background: var(--pft-bg-white);
border: none;
color: var(--pft-primary);
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
padding: var(--pft-space-xs) var(--pft-space-sm);
border-radius: var(--pft-radius-round);
box-shadow: var(--pft-shadow-neo-small);
}
.pft-wrapper .pft-why-matters:hover {
box-shadow: var(--pft-shadow-neo-hover);
transform: translateY(-1px);
}
.pft-wrapper .pft-why-matters:active {
box-shadow: var(--pft-shadow-neo-inset);
transform: translateY(0);
}
.pft-wrapper .pft-why-matters svg {
fill: currentColor;
}
.pft-wrapper .pft-tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 0;
background: var(--pft-bg-white);
color: var(--pft-text-primary);
padding: var(--pft-space-sm) var(--pft-space-md);
border-radius: var(--pft-radius-lg);
font-size: 0.875rem;
white-space: normal;
width: 250px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 10;
box-shadow: var(--pft-shadow-neo-medium);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.pft-wrapper .pft-tooltip::after {
content: '';
position: absolute;
top: 100%;
right: 20px;
border: 6px solid transparent;
border-top-color: var(--pft-bg-white);
}
.pft-wrapper .pft-why-matters:hover .pft-tooltip {
opacity: 1;
visibility: visible;
}
/* Question Title */
.pft-wrapper .pft-question-title {
font-size: 1.5rem !important;
font-weight: 600;
color: var(--pft-text-primary) !important;
margin-bottom: var(--pft-space-xl);
line-height: 1.3;
}
/* Radio & Checkbox Styles - Neomorphic with performance optimization */
.pft-wrapper .pft-radio-group {
display: flex;
flex-direction: column;
gap: var(--pft-space-md);
}
.pft-wrapper .pft-checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--pft-space-sm);
}
.pft-wrapper .pft-radio-option,
.pft-wrapper .pft-checkbox-option {
display: flex;
align-items: center;
cursor: pointer;
position: relative;
padding: var(--pft-space-md);
background: var(--pft-bg-main);
border-radius: var(--pft-radius-lg);
transition: all 0.2s;
border: 2px solid transparent;
box-shadow: var(--pft-shadow-neo-small);
will-change: transform, box-shadow;
}
/* Only apply hover effects on desktop */
@media (hover: hover) and (pointer: fine) {
.pft-wrapper .pft-radio-option:hover,
.pft-wrapper .pft-checkbox-option:hover {
box-shadow: var(--pft-shadow-neo-hover);
transform: translateY(-2px);
}
}
.pft-wrapper .pft-radio-option input[type="radio"]:checked ~ *,
.pft-wrapper .pft-checkbox-option input[type="checkbox"]:checked ~ * {
color: var(--pft-primary);
}
.pft-wrapper .pft-radio-option input[type="radio"],
.pft-wrapper .pft-checkbox-option input[type="checkbox"] {
position: absolute;
opacity: 0;
}
.pft-wrapper .pft-radio-box,
.pft-wrapper .pft-checkbox-box {
width: 20px;
height: 20px;
background: var(--pft-bg-main);
border: 2px solid var(--pft-border);
margin-right: var(--pft-space-md);
position: relative;
transition: all 0.2s;
flex-shrink: 0;
box-shadow: var(--pft-shadow-neo-inset);
}
.pft-wrapper .pft-radio-box {
border-radius: 50%;
}
.pft-wrapper .pft-checkbox-box {
border-radius: var(--pft-radius-sm);
}
.pft-wrapper .pft-radio-option input:checked ~ .pft-radio-box,
.pft-wrapper .pft-checkbox-option input:checked ~ .pft-checkbox-box {
border-color: var(--pft-primary);
background: var(--pft-primary);
box-shadow: 0 0 8px rgba(0, 82, 255, 0.3);
}
.pft-wrapper .pft-radio-option input:checked ~ .pft-radio-box::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
}
.pft-wrapper .pft-checkbox-option input:checked ~ .pft-checkbox-box::after {
content: '✔';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
font-weight: bold;
}
.pft-wrapper .pft-radio-label,
.pft-wrapper .pft-checkbox-label {
font-size: 1rem;
color: var(--pft-text-primary);
transition: all 0.2s;
}
.pft-wrapper .pft-radio-option input:checked ~ .pft-radio-label,
.pft-wrapper .pft-checkbox-option input:checked ~ .pft-checkbox-label {
color: var(--pft-primary);
font-weight: 600;
}
/* Navigation - Neomorphic Buttons */
.pft-wrapper .pft-navigation {
display: flex;
justify-content: space-between;
margin-top: var(--pft-space-2xl);
padding-top: var(--pft-space-xl);
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.pft-wrapper .pft-nav-btn {
padding: var(--pft-space-md) var(--pft-space-xl);
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: var(--pft-radius-round);
cursor: pointer;
transition: all 0.2s;
box-shadow: var(--pft-shadow-neo-medium);
display: flex;
align-items: center;
}
.pft-wrapper .pft-back {
background: var(--pft-bg-main);
color: var(--pft-text-secondary);
}
.pft-wrapper .pft-back:hover:not(:disabled) {
box-shadow: var(--pft-shadow-neo-hover);
transform: translateX(-2px);
}
.pft-wrapper .pft-back:active:not(:disabled) {
box-shadow: var(--pft-shadow-neo-inset);
transform: translateX(0);
}
.pft-wrapper .pft-next {
background: linear-gradient(135deg, var(--pft-primary), var(--pft-primary-dark));
color: white;
box-shadow: var(--pft-shadow-neo-medium), 0 4px 12px rgba(0, 82, 255, 0.3);
}
.pft-wrapper .pft-next:hover:not(:disabled) {
transform: translateX(2px);
box-shadow: var(--pft-shadow-neo-hover), 0 6px 16px rgba(0, 82, 255, 0.4);
}
.pft-wrapper .pft-next:active:not(:disabled) {
transform: translateX(0);
box-shadow: var(--pft-shadow-neo-inset);
}
.pft-wrapper .pft-nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
}
/* ========================================
Final Result View - Neomorphic
======================================== */
.pft-wrapper .pft-final-result {
animation: fadeIn 0.5s ease;
text-align: center;
padding: var(--pft-space-md) 0;
}
.pft-wrapper .pft-final-header {
margin-bottom: var(--pft-space-lg);
}
.pft-wrapper .pft-success-icon {
width: 48px;
height: 48px;
fill: var(--pft-success);
margin-bottom: 0;
margin-top: 0;
animation: scaleIn 0.5s ease;
filter: drop-shadow(0 4px 8px rgba(0, 212, 170, 0.3));
}
@keyframes scaleIn {
from { transform: scale(0); }
to { transform: scale(1); }
}
.pft-wrapper .pft-final-title {
font-size: 1.75rem !important;
font-weight: 700;
color: var(--pft-text-primary) !important;
margin-bottom: var(--pft-space-xs);
margin-top: var(--pft-space-sm);
}
.pft-wrapper .pft-final-subtitle {
font-size: 1rem;
color: var(--pft-text-secondary);
margin-bottom: var(--pft-space-lg);
}
/* Best Match Card Container - Properly centered */
.pft-wrapper .pft-best-match-card {
margin: var(--pft-space-lg) auto;
text-align: left;
display: flex;
justify-content: center;
}
/* FIXED: Ensure best match card has no blur/filter effects */
.pft-wrapper .pft-best-match-card .pft-platform-card {
border: 2px solid var(--pft-primary);
box-shadow: var(--pft-shadow-neo-large), 0 8px 24px rgba(0, 82, 255, 0.15);
transform: scale(1.02);
text-align: left;
max-width: 600px;
width: 100%;
/* Remove any backdrop-filter or filter properties */
backdrop-filter: none !important;
filter: none !important;
-webkit-backdrop-filter: none !important;
}
.pft-wrapper .pft-final-actions {
display: flex;
gap: var(--pft-space-md);
justify-content: center;
margin-top: var(--pft-space-lg);
}
.pft-wrapper .pft-btn-primary,
.pft-wrapper .pft-btn-secondary {
padding: var(--pft-space-md) var(--pft-space-xl);
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: var(--pft-radius-round);
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: var(--pft-space-sm);
}
.pft-wrapper .pft-btn-primary {
background: linear-gradient(135deg, var(--pft-primary), var(--pft-primary-dark));
color: white;
box-shadow: var(--pft-shadow-neo-medium), 0 4px 12px rgba(0, 82, 255, 0.3);
}
.pft-wrapper .pft-btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--pft-shadow-neo-hover), 0 6px 16px rgba(0, 82, 255, 0.4);
}
.pft-wrapper .pft-btn-primary:active {
transform: translateY(0);
box-shadow: var(--pft-shadow-neo-inset);
}
.pft-wrapper .pft-btn-primary svg {
fill: currentColor;
}
.pft-wrapper .pft-btn-secondary {
background: var(--pft-bg-main);
color: var(--pft-text-primary);
box-shadow: var(--pft-shadow-neo-medium);
}
.pft-wrapper .pft-btn-secondary:hover {
box-shadow: var(--pft-shadow-neo-hover);
transform: translateY(-1px);
}
.pft-wrapper .pft-btn-secondary:active {
box-shadow: var(--pft-shadow-neo-inset);
transform: translateY(0);
}
/* ========================================
Results Panel - Now on the RIGHT
======================================== */
/* FIXED: Allow tooltip overflow while maintaining scroll for content */
.pft-wrapper .pft-results-panel {
background: #ffffff; /* Clean white background */
border-radius: var(--pft-radius-xl);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Softer shadow */
padding: var(--pft-space-lg);
position: sticky;
top: var(--pft-space-xl);
max-height: calc(100vh - 4rem);
overflow-y: auto;
overflow-x: visible; /* CHANGED: Allow horizontal overflow for tooltips */
border: 1px solid rgba(226, 232, 240, 0.8); /* Light gray border */
order: 2; /* ADDED: Forces results panel to the right */
z-index: 1;
}
/* Custom Scrollbar - Minimal, thin, grey design with padding */
.pft-wrapper .pft-results-panel {
/* Firefox scrollbar styling */
scrollbar-width: thin;
scrollbar-color: #94A3B8 #F1F5F9;
}
/* Webkit browsers (Chrome, Safari, Edge) */
.pft-wrapper .pft-results-panel::-webkit-scrollbar {
width: 6px; /* Thin scrollbar */
height: 6px;
}
.pft-wrapper .pft-results-panel::-webkit-scrollbar-track {
background: #F1F5F9; /* Light grey track */
border-radius: 3px;
/* ADD TOP AND BOTTOM MARGIN TO KEEP SCROLLBAR WITHIN CONTAINER */
margin-top: 20px; /* Padding at top */
margin-bottom: 20px; /* Padding at bottom */
}
.pft-wrapper .pft-results-panel::-webkit-scrollbar-thumb {
background: #CBD5E1; /* Grey thumb */
border-radius: 3px;
transition: background 0.2s ease;
}
.pft-wrapper .pft-results-panel::-webkit-scrollbar-thumb:hover {
background: #94A3B8; /* Slightly darker on hover */
}
/* Make scrollbar less prominent */
.pft-wrapper .pft-results-panel::-webkit-scrollbar-thumb:not(:hover) {
background: rgba(148, 163, 184, 0.5); /* Semi-transparent when not hovering */
}
/* Hide scrollbar arrows (for a cleaner look) */
.pft-wrapper .pft-results-panel::-webkit-scrollbar-button {
display: none;
}
/* FIXED: Results List - allow tooltip overflow */
.pft-wrapper .pft-results-list {
display: flex;
flex-direction: column;
gap: var(--pft-space-sm);
margin-bottom: var(--pft-space-lg);
/* Ensure content doesn't overlap with scrollbar */
padding-right: 2px;
/* Firefox fix - contain the content */
position: relative;
min-height: 0;
overflow: visible; /* ADDED: Allow tooltip overflow */
}
/* ========================================
SIMPLIFIED Platform Card Styles
======================================== */
.pft-wrapper .pft-platform-card {
background: var(--pft-bg-white);
border: 1px solid rgba(226, 232, 240, 0.5);
border-radius: var(--pft-radius-lg);
transition: all 0.3s ease;
position: relative;
overflow: visible;
display: flex;
flex-direction: column;
box-shadow: var(--pft-shadow-neo-medium);
}
.pft-wrapper .pft-platform-card.expanded {
box-shadow: var(--pft-shadow-neo-hover);
}
/* FIXED: Top platform card (first) - removed blur effects and fixed tooltip */
.pft-wrapper .pft-platform-card:first-child {
transform: scale(1.03);
margin-bottom: var(--pft-space-md);
margin-top: calc(var(--pft-space-lg) + 16px);
border: 2px solid var(--pft-accent);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.12),
0 1px 3px rgba(245, 158, 11, 0.15);
/* Remove any backdrop-filter or filter properties */
backdrop-filter: none !important;
filter: none !important;
-webkit-backdrop-filter: none !important;
/* Ensure higher z-index for tooltip */
z-index: 10;
overflow: visible;
}
/* FIXED: Position tooltip below badge for first card to avoid clipping */
.pft-wrapper .pft-platform-card:first-child .pft-offer-tooltip {
bottom: auto;
top: calc(100% + 12px);
right: 0;
z-index: 1002;
}
/* FIXED: Adjust arrow to point upward for below positioning */
.pft-wrapper .pft-platform-card:first-child .pft-offer-tooltip::after {
top: auto;
bottom: 100%;
border-top: none;
border-bottom: 8px solid rgba(15, 15, 15, 0.75);
right: 30px;
}
/* TOP MATCH Badge */
.pft-wrapper .pft-top-match-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--pft-accent), var(--pft-accent-dark));
color: white;
padding: 4px 16px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
z-index: 10;
text-transform: uppercase;
}
/* Card Main Content Area */
.pft-wrapper .pft-card-main {
padding: 14px;
}
/* Simplified Card Header */
.pft-wrapper .pft-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.pft-wrapper .pft-rank-circle {
width: 28px;
height: 28px;
background: linear-gradient(135deg, var(--pft-accent), var(--pft-accent-dark));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 12px;
flex-shrink: 0;
}
.pft-wrapper .pft-platform-logo {
width: 56px !important;
height: 56px !important;
display: flex;
align-items: center;
justify-content: center;
background: var(--pft-bg-main);
border-radius: var(--pft-radius-sm);
padding: 4px;
flex-shrink: 0;
}
.pft-wrapper .pft-platform-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.pft-wrapper .pft-platform-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.pft-wrapper .pft-platform-name {
font-size: 16px;
font-weight: 700;
color: var(--pft-text-primary);
}
.pft-wrapper .pft-platform-snippet {
font-size: 12px;
color: var(--pft-text-tertiary);
line-height: 1.3;
}
/* Updated Key Info Strip with Match Score */
.pft-wrapper .pft-key-info {
display: flex;
align-items: center;
padding: 10px 0 !important;
border-top: 1px solid var(--pft-border-light);
border-bottom: 1px solid var(--pft-border-light);
margin: 10px 0;
gap: 0;
}
.pft-wrapper .pft-info-item {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
align-items: center;
position: relative;
padding: 0 12px;
}
/* Visual separators between items */
.pft-wrapper .pft-info-item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 1px;
background: var(--pft-border-light);
}
.pft-wrapper .pft-info-label {
font-size: 9px;
color: var(--pft-text-muted);
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 500;
}
.pft-wrapper .pft-info-value {
font-size: 14px;
font-weight: 700;
color: var(--pft-text-primary);
}
.pft-wrapper .pft-info-value.success {
color: var(--pft-success);
}
/* Match Score Specific Styling */
.pft-wrapper .pft-info-item.match-score .pft-info-value {
color: var(--pft-primary);
font-size: 16px;
}
/* Add subtle background to match score on high matches */
.pft-wrapper .pft-info-item.match-score.high-match {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(99, 102, 241, 0.02));
border-radius: 8px;
margin: -2px 4px;
}
/* Star Rating adjusted for better balance */
.pft-wrapper .pft-star-rating {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 0 12px;
}
.pft-wrapper .pft-stars {
display: flex;
gap: 1px;
}
.pft-wrapper .pft-star {
color: #FCD34D;
font-size: 13px;
}
.pft-wrapper .pft-star.empty {
color: var(--pft-border);
}
.pft-wrapper .pft-star.half {
position: relative;
color: var(--pft-border);
}
.pft-wrapper .pft-star.half::before {
content: "★";
position: absolute;
left: 0;
top: 0;
width: 50%;
overflow: hidden;
color: #FCD34D;
}
.pft-wrapper .pft-rating-text {
font-size: 12px;
font-weight: 600;
color: var(--pft-text-secondary);
margin-left: 4px;
}
/* View Details Button - UPDATED to prevent white text on white background */
.pft-wrapper .pft-view-details-btn {
background: transparent !important;
border: none;
color: var(--pft-primary) !important;
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 4px 0 !important;
display: flex;
align-items: center;
gap: 4px;
transition: opacity 0.2s;
width: 100%;
justify-content: center;
margin: 4px 0 !important;
}
.pft-wrapper .pft-view-details-btn:hover {
opacity: 0.8;
color: var(--pft-primary) !important;
background: transparent !important;
}
.pft-wrapper .pft-view-details-btn:focus {
outline: none;
color: var(--pft-primary) !important;
background: transparent !important;
}
.pft-wrapper .pft-view-details-btn:active {
color: var(--pft-primary) !important;
background: transparent !important;
}
.pft-wrapper .pft-view-details-btn svg {
width: 14px;
height: 14px;
transition: transform 0.3s;
stroke: currentColor;
}
.pft-wrapper .pft-platform-card.expanded .pft-view-details-btn svg {
transform: rotate(180deg);
}
/* Expandable Details Section */
.pft-wrapper .pft-card-details {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
border-top: 1px solid var(--pft-border-light);
}
.pft-wrapper .pft-platform-card.expanded .pft-card-details {
max-height: 400px;
overflow-y: auto;
}
.pft-wrapper .pft-details-content {
padding: 14px;
}
.pft-wrapper .pft-details-row {
display: flex;
justify-content: space-between;
padding: 5px 0;
font-size: 11px;
gap: 10px;
}
.pft-wrapper .pft-details-label {
color: var(--pft-text-tertiary);
flex-shrink: 0;
min-width: 80px;
}
.pft-wrapper .pft-details-value {
color: var(--pft-text-primary);
font-weight: 500;
text-align: right;
flex: 1;
}
/* Specific styling for the note row */
.pft-wrapper .pft-note-row .pft-details-value,
.pft-wrapper .pft-note-text {
font-size: 10px !important;
line-height: 1.4;
font-weight: 400;
text-align: left;
}
/* CTA Button */
.pft-wrapper .pft-cta-button {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 16px;
margin: 0 14px 14px 14px;
background: linear-gradient(135deg, var(--pft-primary), var(--pft-primary-dark));
color: white;
border: none;
border-radius: var(--pft-radius-round);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
box-shadow: var(--pft-shadow-neo-medium), 0 4px 12px rgba(0, 82, 255, 0.3);
text-decoration: none;
text-align: center;
}
.pft-wrapper .pft-cta-button:hover {
background: linear-gradient(135deg, var(--pft-primary-dark), var(--pft-primary));
box-shadow: var(--pft-shadow-neo-hover), 0 6px 16px rgba(0, 82, 255, 0.4);
color: white;
transform: translateY(-1px);
}
.pft-wrapper .pft-cta-button:active {
box-shadow: var(--pft-shadow-neo-inset);
transform: translateY(0);
}
.pft-wrapper .pft-cta-button svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* Risk Disclaimer - Hover to Reveal */
.pft-wrapper .pft-risk-disclaimer {
padding: 0;
margin: 0;
background: rgba(239, 68, 68, 0.05);
border-top: 1px solid rgba(239, 68, 68, 0.1);
text-align: center;
font-size: 10px;
color: var(--pft-text-tertiary);
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
border-bottom-left-radius: var(--pft-radius-lg);
border-bottom-right-radius: var(--pft-radius-lg);
}
.pft-wrapper .pft-platform-card:hover .pft-risk-disclaimer {
opacity: 1;
max-height: 36px;
padding: 10px 14px;
}
/* Glassmorphic Special Offer Badge - UPDATED WITH FIREFOX FIX */
.pft-wrapper .pft-offer-container {
position: absolute;
top: 10px;
right: 10px;
z-index: 20;
}
.pft-wrapper .pft-offer-wrapper {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
}
/* FIXED: Removed backdrop-filter to prevent Firefox blur issues */
.pft-wrapper .pft-offer-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: rgba(21, 128, 61, 0.9);
border: 1px solid rgba(21, 128, 61, 0.35);
border-radius: 30px;
color: rgba(255, 255, 255, 0.95);
transition: all 0.3s ease;
box-shadow: 0 4px 15px 0 rgba(21, 128, 61, 0.25);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
cursor: pointer;
user-select: none;
position: relative;
}
.pft-wrapper .pft-offer-badge:hover {
background: rgba(21, 128, 61, 0.95);
border-color: rgba(21, 128, 61, 0.4);
box-shadow: 0 6px 20px 0 rgba(21, 128, 61, 0.3);
}
/* Firefox-specific fix */
@-moz-document url-prefix() {
.pft-wrapper .pft-offer-badge {
background: rgba(21, 128, 61, 0.9) !important;
}
}
/* Offer indicator */
.pft-wrapper .pft-offer-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin-left: 6px;
font-size: 10px;
font-weight: bold;
font-style: normal;
}
/* Dark Glassmorphic Offer Tooltip - FIXED FOR FIREFOX */
.pft-wrapper .pft-offer-tooltip {
position: absolute;
bottom: calc(100% + 12px);
right: 0;
width: 280px;
padding: 18px;
background: rgba(15, 15, 15, 0.95);
border: 1px solid rgba(251, 191, 36, 0.2);
border-radius: 16px;
box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.4),
0 2px 8px 0 rgba(251, 191, 36, 0.1),
inset 0 1px 0 0 rgba(251, 191, 36, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 1001;
}
.pft-wrapper .pft-offer-tooltip::after {
content: '';
position: absolute;
top: 100%;
right: 30px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(15, 15, 15, 0.75);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.pft-wrapper .pft-tooltip-header {
font-size: 14px;
font-weight: 600;
color: rgba(251, 191, 36, 0.95);
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(251, 191, 36, 0.15);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.pft-wrapper .pft-tooltip-content {
font-size: 12px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 12px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Tooltip Features List */
.pft-wrapper .pft-tooltip-features {
list-style: none;
padding: 0;
margin: 12px 0;
}
.pft-wrapper .pft-tooltip-features li {
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
padding: 5px 0;
padding-left: 20px;
position: relative;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.pft-wrapper .pft-tooltip-features li::before {
content: '✓';
position: absolute;
left: 0;
color: rgba(251, 191, 36, 0.9);
font-weight: bold;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Tooltip Disclaimer */
.pft-wrapper .pft-tooltip-disclaimer {
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(251, 191, 36, 0.1);
font-style: italic;
}
.pft-wrapper .pft-offer-wrapper.active .pft-offer-tooltip,
.pft-wrapper .pft-offer-wrapper:hover .pft-offer-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* Labels and Features */
.pft-wrapper .pft-platform-labels {
display: flex;
gap: 6px;
margin-bottom: 8px;
}
.pft-wrapper .pft-label {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: var(--pft-radius-round);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
box-shadow: var(--pft-shadow-neo-small);
}
.pft-wrapper .pft-label-match {
background: var(--pft-bg-main);
color: var(--pft-primary);
border: 1px solid var(--pft-primary);
}
.pft-wrapper .pft-label-popular {
background: var(--pft-bg-main);
color: var(--pft-accent-dark);
border: 1px solid var(--pft-accent);
}
.pft-wrapper .pft-platform-features {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.pft-wrapper .pft-feature-tag {
display: inline-flex;
align-items: center;
padding: 3px 8px;
background: var(--pft-bg-main);
border-radius: var(--pft-radius-round);
font-size: 10px;
color: var(--pft-text-secondary);
box-shadow: var(--pft-shadow-neo-small);
}
.pft-wrapper .pft-feature-tag svg {
width: 10px;
height: 10px;
margin-right: 2px;
fill: var(--pft-success);
}
/* Show All Platforms Section */
.pft-wrapper .pft-show-all-section {
padding-top: var(--pft-space-lg);
border-top: 1px solid rgba(255, 255, 255, 0.3);
margin-top: var(--pft-space-lg);
opacity: 0;
transition: opacity 0.3s ease;
}
.pft-wrapper .pft-show-all-section.show {
display: block;
animation: fadeIn 0.3s ease forwards;
}
.pft-wrapper .pft-show-all-btn {
width: 100%;
padding: var(--pft-space-md) var(--pft-space-xl);
background: linear-gradient(135deg, var(--pft-primary), var(--pft-primary-dark));
color: white;
border: none;
border-radius: var(--pft-radius-round);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: var(--pft-space-sm);
box-shadow: var(--pft-shadow-neo-medium), 0 4px 12px rgba(99, 102, 241, 0.3);
}
.pft-wrapper .pft-show-all-btn:hover {
transform: translateY(-2px);
box-shadow: var(--pft-shadow-neo-hover), 0 6px 16px rgba(99, 102, 241, 0.4);
}
.pft-wrapper .pft-show-all-btn:active {
transform: translateY(0);
box-shadow: var(--pft-shadow-neo-inset);
}
.pft-wrapper .pft-show-all-btn svg {
fill: currentColor;
transition: transform 0.3s ease;
}
.pft-wrapper .pft-show-all-btn.expanded svg {
transform: rotate(180deg);
}
/* Loading State */
.pft-wrapper .pft-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
color: var(--pft-text-tertiary);
}
.pft-wrapper .pft-loading-spinner {
width: 40px;
height: 40px;
border: 4px solid var(--pft-border);
border-top-color: var(--pft-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 16px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Error Message Styling */
.pft-wrapper .pft-error-message {
padding: 20px;
text-align: center;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
}
.pft-wrapper .pft-error-message p {
margin-bottom: 10px;
}
.pft-wrapper .pft-error-message button {
padding: 10px 20px;
background: var(--pft-primary);
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
}
/* ========================================
Mobile Responsive Design - COMPREHENSIVE
======================================== */
/* Tablet View (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
.pft-wrapper {
padding: var(--pft-space-lg);
}
.pft-wrapper .pft-container {
grid-template-columns: 1fr;
gap: var(--pft-space-lg);
}
.pft-wrapper .pft-questions-panel {
order: 1;
}
.pft-wrapper .pft-results-panel {
order: 2;
position: relative;
top: 0;
max-height: none;
}
}
/* Mobile View (768px and below) - WITH FIXED TOOLTIP */
@media (max-width: 768px) {
.pft-wrapper {
padding: var(--pft-space-md);
min-height: auto;
}
.pft-wrapper .pft-container {
grid-template-columns: 1fr;
gap: var(--pft-space-lg);
padding: var(--pft-space-lg);
background: rgba(241, 245, 249, 0.95);
border-radius: 16px;
}
.pft-wrapper .pft-questions-panel {
order: 1;
min-height: auto;
}
.pft-wrapper .pft-results-panel {
order: 2;
position: relative;
top: 0;
max-height: none;
}
.pft-wrapper .pft-questions-panel,
.pft-wrapper .pft-results-panel {
padding: var(--pft-space-lg);
box-shadow: var(--pft-shadow-neo-medium);
}
/* Mobile Progress Bar */
.pft-wrapper .pft-progress-label {
font-size: 0.75rem;
}
.pft-wrapper .pft-progress-count {
font-size: 0.75rem;
padding: 2px 6px;
}
.pft-wrapper .pft-progress-bar {
height: 10px;
}
.pft-wrapper .pft-progress-indicator {
width: 20px;
height: 20px;
right: -6px;
}
/* Mobile Questions */
.pft-wrapper .pft-step-container {
min-height: 300px;
}
.pft-wrapper .pft-question-title {
font-size: 1.25rem !important;
}
.pft-wrapper .pft-checkbox-group {
grid-template-columns: 1fr;
}
.pft-wrapper .pft-radio-option,
.pft-wrapper .pft-checkbox-option {
padding: 12px;
}
.pft-wrapper .pft-radio-label,
.pft-wrapper .pft-checkbox-label {
font-size: 0.95rem;
}
/* Mobile Navigation */
.pft-wrapper .pft-navigation {
gap: var(--pft-space-sm);
margin-top: var(--pft-space-xl);
padding-top: var(--pft-space-lg);
}
.pft-wrapper .pft-nav-btn {
padding: var(--pft-space-sm) var(--pft-space-md);
font-size: 0.9rem;
}
/* Mobile Final Actions */
.pft-wrapper .pft-final-actions {
flex-direction: column;
}
.pft-wrapper .pft-btn-primary,
.pft-wrapper .pft-btn-secondary {
width: 100%;
justify-content: center;
}
/* Simplified card styles for mobile */
.pft-wrapper .pft-card-main {
padding: 12px;
}
.pft-wrapper .pft-card-header {
gap: 8px;
}
.pft-wrapper .pft-platform-logo {
width: 48px !important;
height: 48px !important;
}
.pft-wrapper .pft-platform-name {
font-size: 14px;
}
.pft-wrapper .pft-platform-snippet {
font-size: 11px;
}
.pft-wrapper .pft-key-info {
gap: 0;
}
.pft-wrapper .pft-info-item {
padding: 0 8px;
}
.pft-wrapper .pft-info-label {
font-size: 8px;
}
.pft-wrapper .pft-info-value {
font-size: 11px;
}
.pft-wrapper .pft-info-item.match-score .pft-info-value {
font-size: 13px;
}
.pft-wrapper .pft-star {
font-size: 11px;
}
.pft-wrapper .pft-rating-text {
font-size: 10px;
}
/* Mobile Offer Badge */
.pft-wrapper .pft-offer-badge {
padding: 3px 8px;
font-size: 11px;
}
.pft-wrapper .pft-offer-indicator {
width: 12px;
height: 12px;
font-size: 9px;
margin-left: 4px;
}
/* FIXED MOBILE TOOLTIP - Left-aligned to prevent clipping */
.pft-wrapper .pft-offer-tooltip {
width: 240px;
max-width: calc(100vw - 60px);
padding: 14px;
font-size: 11px;
position: absolute;
left: 10px;
right: auto;
transform: translateY(-5px);
z-index: 10000;
}
/* Ensure container doesn't clip tooltip */
.pft-wrapper .pft-offer-container {
position: static;
}
.pft-wrapper .pft-offer-wrapper {
position: relative;
}
/* Active state for mobile tooltip */
.pft-wrapper .pft-offer-wrapper.active .pft-offer-tooltip,
.pft-wrapper .pft-offer-wrapper:hover .pft-offer-tooltip {
transform: translateY(0);
}
/* Adjust arrow position for left-aligned tooltip */
.pft-wrapper .pft-offer-tooltip::after {
left: auto;
right: 20px;
}
/* For first card, position below on mobile */
.pft-wrapper .pft-platform-card:first-child .pft-offer-tooltip {
bottom: auto;
top: calc(100% + 8px);
left: 10px;
right: auto;
}
.pft-wrapper .pft-platform-card:first-child .pft-offer-tooltip::after {
top: auto;
bottom: 100%;
border-top: none;
border-bottom: 8px solid rgba(15, 15, 15, 0.75);
right: 20px;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3a4fc10 *//* ================================================
DARK PROFESSIONAL BACKGROUND FOR ELEMENTOR SECTIONS
Add this CSS to your Elementor container/section
Custom CSS field using ".elementor-27595 .elementor-element.elementor-element-3a4fc10" as the prefix
================================================ */
/* Main container background and layout */
.elementor-27595 .elementor-element.elementor-element-3a4fc10 {
position: relative;
background: linear-gradient(135deg,
rgba(30, 30, 35, 0.7) 0%,
rgba(26, 26, 31, 0.8) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
isolation: isolate;
}
/* Top accent line animation */
.elementor-27595 .elementor-element.elementor-element-3a4fc10::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
#FCC419 20%,
#FFD43B 50%,
#FCC419 80%,
transparent 100%);
animation: sectionShimmer 6s linear infinite;
z-index: 10;
}
/* Subtle noise texture overlay */
.elementor-27595 .elementor-element.elementor-element-3a4fc10::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.02;
background-image:
repeating-linear-gradient(45deg,
transparent,
transparent 35px,
rgba(255,255,255,.005) 35px,
rgba(255,255,255,.005) 70px);
pointer-events: none;
z-index: 1;
}
/* Animation for top accent line */
@keyframes sectionShimmer {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
/* ================================================
OPTIONAL: ENHANCED VERSION WITH AMBIENT EFFECTS
Uncomment the sections below for additional effects
================================================ */
/* Optional: Ambient light effect - top left */
/*
.elementor-27595 .elementor-element.elementor-element-3a4fc10 .ambient-glow-1 {
position: absolute;
top: -20%;
left: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.03),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* Optional: Ambient light effect - bottom right */
/*
.elementor-27595 .elementor-element.elementor-element-3a4fc10 .ambient-glow-2 {
position: absolute;
bottom: -20%;
right: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.02),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* To use ambient glows, add these divs inside your section:
*/
/* ================================================
COLOR VARIABLES FOR EASY CUSTOMIZATION
================================================ */
.elementor-27595 .elementor-element.elementor-element-3a4fc10 {
--section-accent: #FCC419;
--section-accent-bright: #FFD43B;
--section-surface: rgba(30, 30, 35, 0.7);
--section-surface-dark: rgba(26, 26, 31, 0.8);
}
/* ================================================
RESPONSIVE ADJUSTMENTS
================================================ */
@media (max-width: 768px) {
.elementor-27595 .elementor-element.elementor-element-3a4fc10 {
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
}
/* ================================================
ACCESSIBILITY - REDUCED MOTION
================================================ */
@media (prefers-reduced-motion: reduce) {
.elementor-27595 .elementor-element.elementor-element-3a4fc10::before {
animation: none;
}
}
/* ================================================
USAGE INSTRUCTIONS:
1. In Elementor, select your container/section
2. Go to Advanced > Custom CSS
3. Paste this entire CSS code
4. The ".elementor-27595 .elementor-element.elementor-element-3a4fc10" keyword will automatically target your element
Optional: For full-width sections, also set:
- Layout > Width: Full Width
- Advanced > Margin: 0
- Advanced > Padding: Adjust as needed (e.g., 3rem 2rem)
For the accent color (#FCC419), you can change it by
modifying the color values throughout the CSS
================================================ *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-eec493a *//* ================================================
DARK PROFESSIONAL BACKGROUND FOR ELEMENTOR SECTIONS
Add this CSS to your Elementor container/section
Custom CSS field using ".elementor-27595 .elementor-element.elementor-element-eec493a" as the prefix
================================================ */
/* Main container background and layout */
.elementor-27595 .elementor-element.elementor-element-eec493a {
position: relative;
background: linear-gradient(135deg,
rgba(30, 30, 35, 0.7) 0%,
rgba(26, 26, 31, 0.8) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
isolation: isolate;
}
/* Subtle noise texture overlay */
.elementor-27595 .elementor-element.elementor-element-eec493a::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.02;
background-image:
repeating-linear-gradient(45deg,
transparent,
transparent 35px,
rgba(255,255,255,.005) 35px,
rgba(255,255,255,.005) 70px);
pointer-events: none;
z-index: 1;
}
/* Animation for top accent line */
@keyframes sectionShimmer {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
/* ================================================
OPTIONAL: ENHANCED VERSION WITH AMBIENT EFFECTS
Uncomment the sections below for additional effects
================================================ */
/* Optional: Ambient light effect - top left */
/*
.elementor-27595 .elementor-element.elementor-element-eec493a .ambient-glow-1 {
position: absolute;
top: -20%;
left: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.03),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* Optional: Ambient light effect - bottom right */
/*
.elementor-27595 .elementor-element.elementor-element-eec493a .ambient-glow-2 {
position: absolute;
bottom: -20%;
right: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.02),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* To use ambient glows, add these divs inside your section:
*/
/* ================================================
COLOR VARIABLES FOR EASY CUSTOMIZATION
================================================ */
.elementor-27595 .elementor-element.elementor-element-eec493a {
--section-accent: #FCC419;
--section-accent-bright: #FFD43B;
--section-surface: rgba(30, 30, 35, 0.7);
--section-surface-dark: rgba(26, 26, 31, 0.8);
}
/* ================================================
RESPONSIVE ADJUSTMENTS
================================================ */
@media (max-width: 768px) {
.elementor-27595 .elementor-element.elementor-element-eec493a {
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
}
/* ================================================
ACCESSIBILITY - REDUCED MOTION
================================================ */
@media (prefers-reduced-motion: reduce) {
.elementor-27595 .elementor-element.elementor-element-eec493a::before {
animation: none;
}
}
/* ================================================
USAGE INSTRUCTIONS:
1. In Elementor, select your container/section
2. Go to Advanced > Custom CSS
3. Paste this entire CSS code
4. The ".elementor-27595 .elementor-element.elementor-element-eec493a" keyword will automatically target your element
Optional: For full-width sections, also set:
- Layout > Width: Full Width
- Advanced > Margin: 0
- Advanced > Padding: Adjust as needed (e.g., 3rem 2rem)
For the accent color (#FCC419), you can change it by
modifying the color values throughout the CSS
================================================ *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5b0990 *//* ================================================
DARK PROFESSIONAL BACKGROUND FOR ELEMENTOR SECTIONS
Add this CSS to your Elementor container/section
Custom CSS field using ".elementor-27595 .elementor-element.elementor-element-b5b0990" as the prefix
================================================ */
/* Main container background and layout */
.elementor-27595 .elementor-element.elementor-element-b5b0990 {
position: relative;
background: linear-gradient(135deg,
rgba(30, 30, 35, 0.7) 0%,
rgba(26, 26, 31, 0.8) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
isolation: isolate;
}
/* Subtle noise texture overlay */
.elementor-27595 .elementor-element.elementor-element-b5b0990::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.02;
background-image:
repeating-linear-gradient(45deg,
transparent,
transparent 35px,
rgba(255,255,255,.005) 35px,
rgba(255,255,255,.005) 70px);
pointer-events: none;
z-index: 1;
}
/* Animation for top accent line */
@keyframes sectionShimmer {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
/* ================================================
OPTIONAL: ENHANCED VERSION WITH AMBIENT EFFECTS
Uncomment the sections below for additional effects
================================================ */
/* Optional: Ambient light effect - top left */
/*
.elementor-27595 .elementor-element.elementor-element-b5b0990 .ambient-glow-1 {
position: absolute;
top: -20%;
left: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.03),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* Optional: Ambient light effect - bottom right */
/*
.elementor-27595 .elementor-element.elementor-element-b5b0990 .ambient-glow-2 {
position: absolute;
bottom: -20%;
right: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.02),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* To use ambient glows, add these divs inside your section:
*/
/* ================================================
COLOR VARIABLES FOR EASY CUSTOMIZATION
================================================ */
.elementor-27595 .elementor-element.elementor-element-b5b0990 {
--section-accent: #FCC419;
--section-accent-bright: #FFD43B;
--section-surface: rgba(30, 30, 35, 0.7);
--section-surface-dark: rgba(26, 26, 31, 0.8);
}
/* ================================================
RESPONSIVE ADJUSTMENTS
================================================ */
@media (max-width: 768px) {
.elementor-27595 .elementor-element.elementor-element-b5b0990 {
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
}
/* ================================================
ACCESSIBILITY - REDUCED MOTION
================================================ */
@media (prefers-reduced-motion: reduce) {
.elementor-27595 .elementor-element.elementor-element-b5b0990::before {
animation: none;
}
}
/* ================================================
USAGE INSTRUCTIONS:
1. In Elementor, select your container/section
2. Go to Advanced > Custom CSS
3. Paste this entire CSS code
4. The ".elementor-27595 .elementor-element.elementor-element-b5b0990" keyword will automatically target your element
Optional: For full-width sections, also set:
- Layout > Width: Full Width
- Advanced > Margin: 0
- Advanced > Padding: Adjust as needed (e.g., 3rem 2rem)
For the accent color (#FCC419), you can change it by
modifying the color values throughout the CSS
================================================ *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7137d82 *//* ================================================
DARK PROFESSIONAL BACKGROUND FOR ELEMENTOR SECTIONS
Add this CSS to your Elementor container/section
Custom CSS field using ".elementor-27595 .elementor-element.elementor-element-7137d82" as the prefix
================================================ */
/* Main container background and layout */
.elementor-27595 .elementor-element.elementor-element-7137d82 {
position: relative;
background: linear-gradient(135deg,
rgba(30, 30, 35, 0.7) 0%,
rgba(26, 26, 31, 0.8) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
isolation: isolate;
}
/* Subtle noise texture overlay */
.elementor-27595 .elementor-element.elementor-element-7137d82::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.02;
background-image:
repeating-linear-gradient(45deg,
transparent,
transparent 35px,
rgba(255,255,255,.005) 35px,
rgba(255,255,255,.005) 70px);
pointer-events: none;
z-index: 1;
}
/* Animation for top accent line */
@keyframes sectionShimmer {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
/* ================================================
OPTIONAL: ENHANCED VERSION WITH AMBIENT EFFECTS
Uncomment the sections below for additional effects
================================================ */
/* Optional: Ambient light effect - top left */
/*
.elementor-27595 .elementor-element.elementor-element-7137d82 .ambient-glow-1 {
position: absolute;
top: -20%;
left: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.03),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* Optional: Ambient light effect - bottom right */
/*
.elementor-27595 .elementor-element.elementor-element-7137d82 .ambient-glow-2 {
position: absolute;
bottom: -20%;
right: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.02),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* To use ambient glows, add these divs inside your section:
*/
/* ================================================
COLOR VARIABLES FOR EASY CUSTOMIZATION
================================================ */
.elementor-27595 .elementor-element.elementor-element-7137d82 {
--section-accent: #FCC419;
--section-accent-bright: #FFD43B;
--section-surface: rgba(30, 30, 35, 0.7);
--section-surface-dark: rgba(26, 26, 31, 0.8);
}
/* ================================================
RESPONSIVE ADJUSTMENTS
================================================ */
@media (max-width: 768px) {
.elementor-27595 .elementor-element.elementor-element-7137d82 {
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
}
/* ================================================
ACCESSIBILITY - REDUCED MOTION
================================================ */
@media (prefers-reduced-motion: reduce) {
.elementor-27595 .elementor-element.elementor-element-7137d82::before {
animation: none;
}
}
/* ================================================
USAGE INSTRUCTIONS:
1. In Elementor, select your container/section
2. Go to Advanced > Custom CSS
3. Paste this entire CSS code
4. The ".elementor-27595 .elementor-element.elementor-element-7137d82" keyword will automatically target your element
Optional: For full-width sections, also set:
- Layout > Width: Full Width
- Advanced > Margin: 0
- Advanced > Padding: Adjust as needed (e.g., 3rem 2rem)
For the accent color (#FCC419), you can change it by
modifying the color values throughout the CSS
================================================ *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b352dce *//* ================================================
DARK PROFESSIONAL BACKGROUND FOR ELEMENTOR SECTIONS
Add this CSS to your Elementor container/section
Custom CSS field using ".elementor-27595 .elementor-element.elementor-element-b352dce" as the prefix
================================================ */
/* Main container background and layout */
.elementor-27595 .elementor-element.elementor-element-b352dce {
position: relative;
background: linear-gradient(135deg,
rgba(30, 30, 35, 0.7) 0%,
rgba(26, 26, 31, 0.8) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
isolation: isolate;
}
/* Subtle noise texture overlay */
.elementor-27595 .elementor-element.elementor-element-b352dce::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.02;
background-image:
repeating-linear-gradient(45deg,
transparent,
transparent 35px,
rgba(255,255,255,.005) 35px,
rgba(255,255,255,.005) 70px);
pointer-events: none;
z-index: 1;
}
/* Animation for top accent line */
@keyframes sectionShimmer {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
/* ================================================
OPTIONAL: ENHANCED VERSION WITH AMBIENT EFFECTS
Uncomment the sections below for additional effects
================================================ */
/* Optional: Ambient light effect - top left */
/*
.elementor-27595 .elementor-element.elementor-element-b352dce .ambient-glow-1 {
position: absolute;
top: -20%;
left: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.03),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* Optional: Ambient light effect - bottom right */
/*
.elementor-27595 .elementor-element.elementor-element-b352dce .ambient-glow-2 {
position: absolute;
bottom: -20%;
right: -10%;
width: 40%;
height: 40%;
background: radial-gradient(
circle,
rgba(252, 196, 25, 0.02),
transparent 70%
);
pointer-events: none;
z-index: 0;
}
*/
/* To use ambient glows, add these divs inside your section:
*/
/* ================================================
COLOR VARIABLES FOR EASY CUSTOMIZATION
================================================ */
.elementor-27595 .elementor-element.elementor-element-b352dce {
--section-accent: #FCC419;
--section-accent-bright: #FFD43B;
--section-surface: rgba(30, 30, 35, 0.7);
--section-surface-dark: rgba(26, 26, 31, 0.8);
}
/* ================================================
RESPONSIVE ADJUSTMENTS
================================================ */
@media (max-width: 768px) {
.elementor-27595 .elementor-element.elementor-element-b352dce {
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
}
/* ================================================
ACCESSIBILITY - REDUCED MOTION
================================================ */
@media (prefers-reduced-motion: reduce) {
.elementor-27595 .elementor-element.elementor-element-b352dce::before {
animation: none;
}
}
/* ================================================
USAGE INSTRUCTIONS:
1. In Elementor, select your container/section
2. Go to Advanced > Custom CSS
3. Paste this entire CSS code
4. The ".elementor-27595 .elementor-element.elementor-element-b352dce" keyword will automatically target your element
Optional: For full-width sections, also set:
- Layout > Width: Full Width
- Advanced > Margin: 0
- Advanced > Padding: Adjust as needed (e.g., 3rem 2rem)
For the accent color (#FCC419), you can change it by
modifying the color values throughout the CSS
================================================ *//* End custom CSS */