/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*Remove body margin*/
body{
	margin: 0px !important;
}
/*Stop x overflow*/
html, body {
	overflow-x: hidden;
}

/*-----GRAVITY FORMS-----*/
.gform_required_legend {
    display: none!important;
}
/*All input areas text color*/
.gform_wrapper.gravity-theme input[type=color], .gform_wrapper.gravity-theme input[type=date], .gform_wrapper.gravity-theme input[type=datetime-local], .gform_wrapper.gravity-theme input[type=datetime], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=month], .gform_wrapper.gravity-theme input[type=number], .gform_wrapper.gravity-theme input[type=password], .gform_wrapper.gravity-theme input[type=search], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=time], .gform_wrapper.gravity-theme input[type=url], .gform_wrapper.gravity-theme input[type=week], .gform_wrapper.gravity-theme select, .gform_wrapper.gravity-theme textarea {
  color: var( --e-global-color-secondary );
}
body .gform_wrapper ::placeholder,
body .gform_wrapper ::-webkit-input-placeholder,
body .gform_wrapper input[placeholder] {
  color: var( --e-global-color-secondary )!important;
}
#gform_confirmation_message_2 {
  color: var( --e-global-color-secondary )!important;
}
/*Text fields*/
.gform_wrapper
  input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]) {
  border-radius: 5px !important;
  padding: 10px 10px 10px 10px !important;
  border-color: var( --e-global-color-22c65ab1 ) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
/*Paragraph fields*/
.gform_wrapper textarea {
  padding: 10px 10px 10px 10px !important;
  margin-top: 12px !important;
  border-width: 1px !important;
  border-color: var( --e-global-color-22c65ab1 ) !important;
  border-style: solid !important;
  border-radius: 5px !important;
}
/*Select fields*/
.gform_wrapper select {
	border-radius: 5px !important;
	border: solid 1px var( --e-global-color-22c65ab1 )!important;
	padding: 8px!important;
}
/*Field lables*/
.gform_wrapper label.gfield_label,
.gform_wrapper legend.gfield_label {
  font-weight: 500 !important;
  color: var( --e-global-color-primary );
  margin-bottom: 10px !important;
  margin-top: 10px !important;
}
/*Radio button and checkbox alignment*/
.gform_wrapper.gf_browser_chrome .gfield_checkbox li input,
.gform_wrapper.gf_browser_chrome .gfield_checkbox li input[type="checkbox"],
.gform_wrapper.gf_browser_chrome .gfield_radio li input[type="radio"] {
  margin-top: 0px !important;
}
body .gform_wrapper ul li.gfield {
  margin-top: 0px !important;
}
/*Submit button alignment*/
.gform_wrapper {
  margin: 0 0 0 0 !important;
  border:0px;
}
.gform_legacy_markup_wrapper .gform_footer {
    padding: 0px !important;
}

select#input_5_15 {
    padding: 10px 10px 10px 10px !important;
    margin-top: 12px !important;
    border-width: 1px !important;
    border-color: var(--e-global-color-22c65ab1) !important;
    border-style: solid !important;
    border-radius: 5px !important;
}

/* Footer Quick Contact Form */
/* Force the specific form container into a 3-column grid */
#gform_fields_1.gform_fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto; /* Name(1 part), Email(1 part), Button(fit content) */
    gap: 15px;
    align-items: end; /* Aligns button with the bottom of the input boxes */
}

/* Remove default Gravity Forms margins that cause "stepping" */
#gform_fields_1 .gfield {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 0 !important;
    grid-column: span 1; /* Ensures they don't try to span the whole row */
}

/* Ensure the button doesn't stretch weirdly */
#field_submit {
    width: auto !important;
}

/* Mobile check: Stack them if the screen is too narrow for 3 columns */
@media (max-width: 768px) {
    #gform_fields_1.gform_fields {
        grid-template-columns: 1fr;
    }
}

/*-----GUTENBERG BLOCKS-----*/
/*Padding for tables*/
.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th {
    padding: 10px;
}
/*Margin for divider*/
.wp-block-separator.is-style-wide {
    border-bottom-width: 1px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Button slide in colour change animation */
.button-slide .elementor-button {
    background-color: #EA5B12; 
		border-radius: 5px !important;
	  border-style: solid !important;
		border-width: 1px !important;
		border-color: #EA5B12;
    color: #FFFFFF;
    z-index: 1;
    position: relative; 
    overflow: hidden;
    transition: color 0.3s ease-in-out;
}

.button-slide .elementor-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
	border-radius: 5px !important;
	  border-style: solid !important;
		border-width: 1px !important;
		border-color: #EA5B12;
    height: 100%;
    width: 100%;
    background-color: #ffffff; 
    z-index: -1;
    transform: translateX(-100%); 
    transition: transform 0.3s ease-in-out; 
}

.button-slide .elementor-button:hover:before {
    transform: translateX(0%); 
}

.button-slide .elementor-button:hover {
    color: #EA5B12;
	border-radius: 5px !important;
	  border-style: solid !important;
		border-width: 1px !important;
		border-color: #EA5B12;
}

/* Base State */
.hover-arrow-btn .elementor-button-text {
    transition: all 0.3s ease;
}

.hover-arrow-btn .elementor-align-icon-right {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

/* Hover State */
.hover-arrow-btn:hover .elementor-align-icon-right {
    opacity: 1;
    transform: translateX(0);
}

.hover-arrow-btn:hover .elementor-button-text {
    margin-right: 10px; /* Adjusts the text to make room for the arrow */
}

/*--HEADER SCROLL EFFECTS--*/
.elementor-sticky--effects #sticky-logo img {
	width: 100px!important;
}
#sticky-logo img {
	transition: .5s all ease-in-out;
}
@media screen and (max-width: 767px) {
    .elementor-sticky--effects #sticky-logo img {
	width: 70px!important;
}
}

/* Base State */
.cq-header {
    background-color: rgba(255, 255, 255, 1) !important;
    transition: all 0.5s ease-in-out !important;
}

/* Scrolled State */
.elementor-sticky--effects .cq-header {
    background-color: rgba(255, 255, 255, 0.85) !important; 
	backdrop-filter: blur(10px);
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    min-height: 70px;
}


/*--GRADIENT BACKGROUND EFFECT--*/
.gradient-bg {background: radial-gradient(100% 100% at var(--13-x-position) var(--13-y-position), #3eaacf -17%, transparent),radial-gradient(100% 100% at var(--14-x-position) var(--14-y-position), #ffffff -47%, transparent),#3eaacf;animation-name: main; animation-iteration-count: infinite; animation-duration: 4s; transition-timing-function: ease-in-out;}@property --13-x-position {
      syntax: '<percentage>';
        inherits: false;
        initial-value: 72.734375%;
      }@property --13-y-position {
        syntax: '<percentage>';
          inherits: false;
          initial-value: 58.71093750000001%;
        }@property --14-x-position {
      syntax: '<percentage>';
        inherits: false;
        initial-value: 27.656250000000004%;
      }@property --14-y-position {
        syntax: '<percentage>';
          inherits: false;
          initial-value: 23.90625%;
        }:root {--7-x-position: 15.898437500000002%;--7-y-position: 81.3671875%;--8-x-position: 83.90625%;--8-y-position: 20.1953125%;--9-x-position: 15.898437500000002%;--9-y-position: 81.3671875%;--10-x-position: 27.656250000000004%;--10-y-position: 23.90625%;--11-x-position: 84.84375%;--11-y-position: 86.8359375%;--12-x-position: 27.656250000000004%;--12-y-position: 23.90625%;--13-x-position: 72.734375%;--13-y-position: 58.71093750000001%;--14-x-position: 27.656250000000004%;--14-y-position: 23.90625%;}
    @keyframes main {
      25% {--13-x-position: 15%;--13-y-position: 15%;--14-x-position: 85%;--14-y-position: 80%;}50% {--13-x-position: 80%;--13-y-position: 15%;--14-x-position: 15%;--14-y-position: 85%;}
    }
    
.gradient-bg-orange {background: radial-gradient(100% 100% at var(--13-x-position) var(--13-y-position), #ea5b11 -17%, transparent),radial-gradient(100% 100% at var(--14-x-position) var(--14-y-position), #ea5b11 -47%, transparent),#F88D54;animation-name: main; animation-iteration-count: infinite; animation-duration: 4s; transition-timing-function: ease-in-out;}@property --13-x-position {
      syntax: '<percentage>';
        inherits: false;
        initial-value: 72.734375%;
      }@property --13-y-position {
        syntax: '<percentage>';
          inherits: false;
          initial-value: 58.71093750000001%;
        }@property --14-x-position {
      syntax: '<percentage>';
        inherits: false;
        initial-value: 27.656250000000004%;
      }@property --14-y-position {
        syntax: '<percentage>';
          inherits: false;
          initial-value: 23.90625%;
        }:root {--7-x-position: 15.898437500000002%;--7-y-position: 81.3671875%;--8-x-position: 83.90625%;--8-y-position: 20.1953125%;--9-x-position: 15.898437500000002%;--9-y-position: 81.3671875%;--10-x-position: 27.656250000000004%;--10-y-position: 23.90625%;--11-x-position: 84.84375%;--11-y-position: 86.8359375%;--12-x-position: 27.656250000000004%;--12-y-position: 23.90625%;--13-x-position: 72.734375%;--13-y-position: 58.71093750000001%;--14-x-position: 27.656250000000004%;--14-y-position: 23.90625%;}
    @keyframes main {
      25% {--13-x-position: 15%;--13-y-position: 15%;--14-x-position: 85%;--14-y-position: 80%;}50% {--13-x-position: 80%;--13-y-position: 15%;--14-x-position: 15%;--14-y-position: 85%;}
    }



/*-----logo carousel-----*/
/* speed */
.auto-scroll-swiper .swiper-wrapper{
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}

/* edge fade */
.auto-scroll-swiper{
  --fade: 60px;
  -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      black var(--fade),
      black calc(100% - var(--fade)),
      transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0,
      black var(--fade),
      black calc(100% - var(--fade)),
      transparent 100%);
  overflow: hidden;
}


/*--OFFSET CAROUSEL--*/
.offset-carousel .swiper {
overflow: visible;
}

.offset-carousel .swiper {
clip-path: inset(0 -200% 0 -200%);
}

/*--CALCULATOR STYLING--*/
/* --- Outer Container Adjustments --- */
section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    max-width: 1400px;
    margin: 40px auto;
}

.calculaterOuter {
    background: transparent;
    padding: 20px 40px 20px 0;
    flex: 1.2;
    min-width: 320px;
}

/* --- Typography --- */
.calculaterOuter h2 {
    color: #54a4c6;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
}

/* --- Results Section (The Rounded Rectangle) --- */
.calculator_info_outer {
    flex: 1;
    min-width: 320px;
    padding: 20px; /* Creates breathing room around the inner box */
}

.calculator_info {
    /* Background left default so .gradient-bg can be applied via HTML */
    border-radius: 20px;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Soft shadow to match the UI feel */
}

.calculator_info h3 {
    color: #FFFFFF;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 20px;
}

/* +/- Button Controls */
.row {
    position: relative;
}

.calc_buttons {
    position: absolute;
    bottom: 5px;
    width: 35px;
    height: 35px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
    font-weight: bold;
    transition: background 0.2s;
}

.calc_buttons:hover {
    background: #e0e0e0;
}

.inc { right: 5px; } /* + button */
.dec { right: 45px; } /* - button */

/* Result Typography */
.amount {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.rand_text, .annum, .hours_text {
    font-size: 1rem;
    font-weight: 400;
    margin: 0 5px;
}

.hours_text {
    font-weight: 600;
}

/* Styling for the Currency Selector */
#country {
    border-radius: 10px;
    text-align: center;
    text-align-last: center;
    border: 1px solid #666 !important;
    width: 100%;
    color: #444;
    
    /* These lines help center the text by removing the default OS arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Custom arrow ONLY for currency select */
#savings-calculator select#country {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml;utf8,<svg fill='%23444' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;

    padding-right: 40px; /* space for arrow */
    cursor: pointer;
}

/* Ensure the numbers in the calculator are also centered */
.costInputItem {
    text-align: center;
}

/* Hide the default number input spinners */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* CTA Button */
/* Using the class selector to match your orange brand color */
.get_demo_button {
    background-color: #EA5B12 !important;
    color: #FFFFFF !important;
    border-radius: 5px !important;
    border: 1px solid #EA5B12 !important;
    
    /* Standard button padding and font weight */
    padding: 12px 24px;
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* Simple hover effect: turns white with orange text/border */
.get_demo_button:hover {
    background-color: #FFFFFF !important;
    color: #EA5B12 !important;
}

/* Post content styling */
#post-content h2 {
    font-size: 40px;
}

#post-content h3 {
    font-size: 30px;
}

#post-content h4 {
    font-size: 25px;
}

#post-content h5 {
    font-size: 22px;
}

#post-content h6 {
    font-size: 20px;
}

@media (max-width: 768px) {
    #post-content h2 {
        font-size: 32px !important;
        line-height: 1.2;
    }

#post-content h3 {
        font-size: 28px !important;
        line-height: 1.2;
    }
}

/* Privacy policy content styling */
#popia-policy h2 {
    font-size: 40px;
}

#popia-policy h3 {
    font-size: 30px;
}

#popia-policy h4 {
    font-size: 25px;
}

#popia-policy h5 {
    font-size: 22px;
}

#popia-policy h6 {
    font-size: 20px;
}

@media (max-width: 768px) {
    #popia-policy h2 {
        font-size: 32px !important;
        line-height: 1.2;
    }

#popia-policy h3 {
        font-size: 28px !important;
        line-height: 1.2;
    }
}