.elementor-widget-fluent-form-widget .fluentform-widget-description{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1078 .elementor-element.elementor-element-9ec986b{width:var( --container-widget-width, 60% );max-width:60%;--container-widget-width:60%;--container-widget-flex-grow:0;}.elementor-1078 .elementor-element.elementor-element-9ec986b .fluentform-widget-wrapper{width:100%;}.elementor-1078 .elementor-element.elementor-element-9ec986b .fluentform-widget-wrapper .ff-el-input--label label{color:#FFFFFF;}.elementor-1078 .elementor-element.elementor-element-9ec986b .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{background-color:#1a7efb !important;color:#ffffff !important;}.elementor-1078 .elementor-element.elementor-element-f9096f7{--display:flex;--justify-content:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1078 .elementor-element.elementor-element-8bcf18c img{width:70%;}.elementor-1078 .elementor-element.elementor-element-64efbc4{--display:flex;--justify-content:center;}.elementor-1078 .elementor-element.elementor-element-8534355 img{width:70%;}.elementor-1078 .elementor-element.elementor-element-3b5343b{--display:flex;--justify-content:center;}.elementor-1078 .elementor-element.elementor-element-0ff2ee4 img{width:100%;}.elementor-1078 .elementor-element.elementor-element-b07e19c{--display:flex;--justify-content:center;}.elementor-1078 .elementor-element.elementor-element-282adef img{width:33%;}.elementor-1078 .elementor-element.elementor-element-8e02ba5{--display:flex;--justify-content:center;}.elementor-1078 .elementor-element.elementor-element-9665f79 img{width:70%;}.elementor-1078 .elementor-element.elementor-element-7cd1e4e{--display:flex;--justify-content:center;}.elementor-1078 .elementor-element.elementor-element-750120e img{width:38%;}.elementor-1078 .elementor-element.elementor-element-3ebae37{--display:flex;--justify-content:center;}.elementor-1078 .elementor-element.elementor-element-664bcdc img{width:100%;}.elementor-1078 .elementor-element.elementor-element-0feadf3{--e-n-carousel-swiper-slides-to-display:5;--e-n-carousel-swiper-slides-gap:0px;margin:100px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;}body.elementor-page-1078:not(.elementor-motion-effects-element-type-background), body.elementor-page-1078 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://xio.studio/wp-content/uploads/2025/12/XIO-portfolio-Hero-bgk.jpg");background-position:top center;background-repeat:no-repeat;background-size:cover;}:root{--page-title-display:none;}@media(min-width:1367px){body.elementor-page-1078:not(.elementor-motion-effects-element-type-background), body.elementor-page-1078 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}@media(max-width:1024px){.elementor-1078 .elementor-element.elementor-element-0feadf3{--e-n-carousel-swiper-slides-to-display:4;}body.elementor-page-1078:not(.elementor-motion-effects-element-type-background), body.elementor-page-1078 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:auto;}}@media(max-width:880px){.elementor-1078 .elementor-element.elementor-element-0feadf3{--e-n-carousel-swiper-slides-to-display:3;}}@media(max-width:767px){.elementor-1078 .elementor-element.elementor-element-0feadf3{--e-n-carousel-swiper-slides-to-display:2;}}/* Start custom CSS *//* --- FLUENT FORMS CLEAN SELECTION FIX --- */ /* 1. Hide the native checkbox completely */ .fluentform .ff-el-group input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; pointer-events: none !important; } /* 2. Style the outer container (The Pill) */ /* We put the border here so it acts as the "Button" */ .fluentform .ff-el-form-check { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-right: 12px !important; margin-bottom: 12px !important; padding: 0 !important; /*border: 2px solid #6F7E85 !important; /* THE ONLY BORDER */ border-radius: 999px !important; cursor: pointer !important; background-color: #F0F0F0 !important; transition: all 0.5s ease-in-out !important; } /* 3. Style the Label inside the Pill */ /* We remove the border from the label to stop the "Double Border" */ .fluentform .ff-el-form-check label { display: block !important; width: 100% !important; padding: 15px 40px !important; margin: 0 !important; border: none !important; /* STOPS DOUBLE BORDER */ background: none !important; color: #000 !important; font-weight: 400 !important; cursor: pointer !important; user-select: none !important; -webkit-user-select: none; text-align: center !important; } /* 4. Hover State on the entire container */ .fluentform .ff-el-form-check:hover { /*background-color: rgba(111, 126, 133, 0.1) !important;*/ background-color:#6F7E85!important; transition: all 0.5s ease-in-out !important; } /* 4. Hover State on the entire container */ .fluentform .ff-el-form-check:hover span{ color:#ffffff!important; } /* 5. ✅ THE FULL SELECTION (Background Fill) */ /* When the input is checked, we fill the OUTER container */ .fluentform .ff-el-form-check:has(input[type="checkbox"]:checked), .fluentform .ff-el-form-check.ff-el-is-cahecked { background-color: #6F7E85 !important; border-color: #6F7E85 !important; } /* Ensure the text turns white when the container is selected */ .fluentform .ff-el-form-check:has(input[type="checkbox"]:checked) label, .fluentform .ff-el-form-check.ff-el-is-checked label, .fluentform .ff-el-form-check:has(input[type="checkbox"]:checked) span, .fluentform .ff-el-form-check.ff-el-is-checked span { color: #ffffff !important; } /* 6. Active Click Animation */ .fluentform .ff-el-form-check:active { transform: scale(0.96) !important; } /* Style all text fields */ .txtFld { font-family: "Outfit", Sans-serif; /* Change to your preferred font */ font-size: 16px; /* Adjust font size as needed */ margin-bottom:50px; } /* Style the submit button */ .btnFld{margin-top:100px;} .btnFld button{ font-family: "Outfit", Sans-serif ; /* Change to your preferred font */ font-size: 30px !important; /* Adjust font size */ font-weight: 500 !important; /* Make it bold */ padding:0 !important; padding-right: 50px; transition: all 0.5s ease-in-out !important; position: relative; display: inline-flex; /* Align text and pseudo nicely */ align-items: center; justify-content: center; cursor: pointer; background:transparent !important; color: #000 !important; } /* Add the right-side icon */ .btnFld button::after { content: ''; position: absolute; right: -50px; /* Distance from button’s right edge */ top: 25%; width: 34px; height: 34px; background-image: url('/wp-content/uploads/2025/12/icon-arrow-light.svg'); /* relative path */ background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth animation */ } /* Hover: move icon slightly top-right */ .btnFld button:hover::after { top: 24.8% !important; /* Move up */ right: -58px !important; /* Move slightly more right */ transform: translateY(-26%); /* Keep vertical centering */ } .btnFld button:hover{ } /* Target input and textarea inside your txtFld container */ .txtFld input, .txtFld textarea { background-color: transparent !important; /* Transparent background */ border: none !important; /* Remove all borders */ border-bottom: 2px solid #666666 !important; /* Only bottom border */ border-radius: 0 !important; /* No rounded corners */ font-size: 16px !important; /* Adjust font size */ padding: 8px 0 !important; /* Vertical padding */ width: 100% !important; /* Full width */ box-sizing: border-box !important; font-size: 24px !important; /* Label font size */ color:#9C9C9C; } /* Label styling */ .txtFld label { font-size: 24px !important; /* Label font size */ color: #fff !important; /* Black color */ display: block !important; /* Ensure it’s block */ margin-bottom: 20px !important; /* Space below label */ font-weight: normal !important; } /* Optional: focus effect for input */ .txtFld input:focus, .txtFld textarea:focus { outline: none !important; /* Remove default outline */ border-bottom-color: #0078d4 !important; /* Highlight bottom border on focus */ } .elementor-1078 .elementor-element.elementor-element-9ec986b .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{ background-color:transparent !important; color:inherit !important;} .elementor-1078 .elementor-element.elementor-element-9ec986b .fluentform-widget-wrapper .ff-el-group .ff-btn-submit:hover{ background-color:transparent !important; color:#B9CED6 !important;} /* Fluent Forms / theme error message */ .error.text-danger { font-size: 18px !important;; /* increase text size */ font-weight:500 !important;; margin-top: 10px; /* space from the field */ line-height: 1.4; } .ff-message-success{ border: none; box-shadow: none; margin-top: 0; padding: 0; position: relative; color: black; font-weight: 100 !important; }/* End custom CSS */