/*
Theme Name: MOBILEIV
Theme URI: 
Author: 
Author URI: https://departmentgroup.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Tags: responsive-layout,one-column,two-columns,three-columns,four-columns,left-sidebar,right-sidebar,custom-background,custom-colors,featured-images,full-width-template,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready
Version: 1.01

*/


@font-face {
    font-family: 'Suisse Int'; 
    src: url('https://mobileivdrip.com.au/wp-content/themes/Divi-child/fonts/Suisse-Int.woff2') format('woff2'),
         url('https://mobileivdrip.com.au/wp-content/themes/Divi-child/fonts/Suisse-Int.woff') format('woff'),
         url('https://mobileivdrip.com.au/wp-content/themes/Divi-child/fonts/Suisse-Int.svg#Suisse-Int') format('svg'); 
    font-weight: 500; 
    font-style: normal; 
    font-display: swap;
}
@font-face {
  font-family: 'HK Grotesk';
  src: url('fonts/HKGrotesk-Regular.woff2') format('woff2'),
       url('fonts/HKGrotesk-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
    font-family: 'GentlemensScript';
    src: url('/wp-content/themes/Divi-child/fonts/GentlemensScript.woff2') format('woff2'),
        url('/wp-content/themes/Divi-child/fonts/GentlemensScript.woff') format('woff'),
        url('/wp-content/themes/Divi-child/fonts/GentlemensScript.svg#GentlemensScript') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



html {scroll-behavior: smooth; -webkit-font-smoothing: antialiased !important;}
body { margin:0; padding:0 }
::selection { background: var(--primary); color: var(--black) }

.container { position: relative; height: 100%; max-width: 100% !important; width: 100%;}
.row { height: 100%; position: relative;}
.row-width-70 { width: 70%;  margin: 0 auto;}
.row-width-80, .row-width { width: 80%;  margin: 0 auto;}
.row-width-90 { width: 90%; max-width: 90%; margin: 0 auto;}
.full-width { width: 100%;  margin: 0 auto;}

.page-template-page-newhome .full-width { width: 100% !important }
.page-template-page-newhome .container { max-width: 100% !important }

.col1{width: 8.33%;}
.col2{width: 16.66%;}
.col2-5{width: 20.00%}
.col3{ width: 25%;}
.col4{width: 33.33%;}
.col5{width: 41.33%;}
.col6{width: 50%; position: relative;}
.col7{width: 58.33%;}
.col8{width: 66.66%;}
.col9{width: 75%;}
.col10{width: 83.88%;}
.col11{width: 91.66%;}
.col12{width: 100%;}

.height-0 { height:0vh; box-sizing: border-box;}
.height-20 { height:20vh;box-sizing: border-box; }
.height-40 { height:40vh;box-sizing: border-box; }
.height-60 { height:60vh;box-sizing: border-box; }
.height-80 { height:80vh;box-sizing: border-box; }
.height-100 { height:100vh; box-sizing: border-box; }
.height-auto { height: auto; }

.flex-row {display: flex;flex-direction: row;}
.flex-column { display: flex; flex-direction: column;}
.justify-center { display: flex; align-items: center; justify-content: center; }
.justify-bottom { justify-content: flex-end;}

.flex-wrap {flex-wrap: wrap}
.align-center  {align-items: center; }
.justify-left {  justify-content: left }
.justify-right { justify-content: right }
.align-top { align-items: flex-start; }
.align-bottom { align-items: flex-end;}
.align-left {  align-items: flex-start }
.align-right {  align-items: flex-end;}
.justify-spaced { justify-content: space-between;}
.text-center { text-align:center;}
.text-right { text-align:right;}
.text-left { text-align:left;}

.overflow-hidden{overflow:hidden}

.padding-0 {padding:0 !important}
.padding-b-0 {padding-bottom: 0px}
.padding-t-0 {padding-top: 0px}
.padding-10 {padding:10px 0}
.padding-b-10 {padding-bottom: 10px}
.padding-t-10 {padding-top: 10px}
.padding-20 {padding:20px 0}
.padding-b-20 {padding-bottom: 20px}
.padding-t-20 {padding-top: 20px}
.padding-40 {padding:40px 0}
.padding-b-40 {padding-bottom: 40px}
.padding-t-40 {padding-top: 40px}
.padding-60 {padding:60px 0}
.padding-b-60 {padding-bottom: 60px}
.padding-t-60 {padding-top: 60px}
.padding-80 {padding:80px 0}
.padding-b-80 {padding-bottom: 80px}
.padding-t-80 {padding-top: 80px}
.padding-100 {padding:100px 0}
.padding-b-100 {padding-bottom: 100px}
.padding-t-100 {padding-top: 100px}
.padding-120 {padding:120px 0}
.padding-b-120 {padding-bottom: 120px}
.padding-t-120 {padding-top: 120px}
.padding-140 {padding:140px 0}
.padding-t-140 {padding-top:140px}
.padding-b-140 {padding-bottom:140px}
.mobile { display:none; }


.gap-0 {gap:0 !important}
.gap-1 {gap:8.33%}
.gap-5 {gap:5px}
.gap-10 {gap:10px}
.gap-20 {gap:20px}
.gap-40 {gap:40px}
.gap-60 {gap:60px}
.gap-80 {gap:80px}
.gap-100 {gap:100px}
.gap-120 {gap:120px}
.gap-140 {gap:140px}

.margin-auto { margin:0 auto; }
.margin-0 {margin:0 !important}
.margin-b-0 { margin-bottom: 0; }
.margin-t-0 { margin-top: 0; }
.margin-10 {margin:10px !important}
.margin-b-10 { margin-bottom: 10px; }
.margin-t-10 { margin-top: 10px; }
.margin-20 {margin:20px 0}
.margin-b-20 { margin-bottom: 20px; }
.margin-t-20 { margin-top: 20px; }
.margin-40 {margin:40px 0}
.margin-b-40 { margin-bottom: 40px; }
.margin-t-40 { margin-top: 40px; }
.margin-60 {margin:60px 0}
.margin-b-60 { margin-bottom: 60px; }
.margin-t-60 { margin-top: 60px; }
.margin-80 {margin:80px 0}
.margin-b-80 { margin-bottom: 80px; }
.margin-t-80 { margin-top: 80px; }
.margin-100 {margin:100px 0}
.margin-b-100{ margin-bottom: 100px; }
.margin-t-100 { margin-top: 100px; }
.margin-120 {margin:120px 0}
.margin-b-120  { margin-bottom: 120px; }
.margin-t-120  { margin-top: 120px; }

.sm-text {display: block; font-size: var(--xxsmall); line-height: 1.3; font-weight: normal;}
.med-text {display: block; font-size: var(--xxmedium); line-height: 1.4}
.lrg-text {display: block; font-size: var(--medium); line-height: 1.4}

.image-fill {object-fit: cover; object-position: center;}

a, button, .text-link { cursor: pointer;}
a:hover { text-decoration: none;}
a:visited {color:var(--black);}
footer a:visited {color:var(--quartiary);}

h1, h2, h3, h4, h5, h6 { z-index: 2; margin: 0; line-height: 1}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none; color: inherit; }
h1 {  font-size: var(--xxlarge); font-family: 'freightbigcmp-pro', serif; letter-spacing: -2px; font-weight: normal }
h2{ font-size: var(--large); font-family: 'freightbigcmp-pro', serif;  letter-spacing: -1px; font-weight: normal }
h3{ font-size: var(--medium); font-family: 'freightbigcmp-pro', serif;  letter-spacing: -1px; font-weight: normal; }
h4{ font-size: var(--xmedium); font-family: 'freightbigcmp-pro';  letter-spacing: 0px; font-weight: normal;}
h5{ font-size: var(--xxmedium); font-family: 'freightbigcmp-pro'; letter-spacing: 0px; font-weight: normal}
h6{ font-size: var(--xxsmall); font-family: 'Suisse Int'; font-weight: normal}
body,p{ font-size: var(--xxsmall); font-family: 'Suisse Int'; font-weight: 300}
span {line-height: 1; font-size: var(xx-small); font-family:'Suisse Int'; font-weight: 300}
iframe {border: 0;  display: block;}

img {width: 100%;}
li, ul {list-style: none; padding: 0;}

.hide { display:none; transition: opacity 0.7s ease-in; opacity: 0;}

/* Other styles */

.h4-style {
    font-size: var(--xmedium); 
    font-family: 'freightbigcmp-pro'; 
    letter-spacing: 0px; 
    font-weight: normal; 
    line-height: 1; 
}


/* Colours */
:root {
  --white: #ffffff; 
  --black: #1E1E1E;
  --primary: #F1F9FC;
  --secondary: #E7E7E7;
  --tertiary: #161616;
  --quartiary:#A19C9C; 
  --blue:#BFDCEA;
  --xxlarge: 95px; 
  --xlarge: 65px; 
  --large: 55px; 
  --medium: 42px; 
  --xmedium: 32px;
  --xxmedium: 26px; 
  --small: 16px; 
  --xsmall: 14px;
  --xxsmall: 12px; 
  --micro: 10px; 
}
.white, .white p { color: var(--white);}
.whitebg { background: var(--white);}
.black, .black p { color: var(--black);}
.blackbg { background: var(--black);}
.primary, .primary p { color: var(--primary);}
.primarybg { background: var(--primary);}
.secondary, .secondary p { color: var(--secondary);}
.secondarybg { background: var(--secondary);}
.tertiary, .tertiary p { color: var(--tertiary);}
.tertiarybg { background: var(--tertiary);}
.quartiary, .quartiary p { color: var(--quartiary);}
.quartiarybg { background: var(--quartiary);}
.blue, .blue p {color: #BFDCEA;}
.bluebg { background: #BFDCEA;}


/* Location Page Accordion */
.accordion {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border: none !important;
    border-radius: 5px;
    overflow: hidden;
}

.accordion-item {
    border: none !important; /* Remove borders */
    background: transparent !important; /* Make it blend */
    padding: 10px 0; /* Adjust spacing */
    text-align: center; /* Keep the natural flow */
}

.accordion-header {
    font-size: var(--large); /* Match other section titles */
    letter-spacing: 1px; /* Subtle spacing for elegance */
    font-weight: 400; /* Softer weight */
    background: transparent !important; /* Remove button-like background */
    border: none !important; /* Hide borders */
    padding: 20px 20px; /* More whitespace */
    text-align: center; /* Align it like a headline */
}
.accordion-header:hover {
    cursor: pointer;
}

.accordion-content {
    display: none; /* Hides content by default */
    font-size: var(--small); /* Keeps it subtle */
    color: var(--quartiary); /* Make it blend */
}

.accordion-header.active + .accordion-content {
    display: block;
}
.accordion-module {
    margin-bottom: -160px !important; /* Pull it up closer */
    padding-bottom: 0 !important; /* Remove extra padding */
}

.accordion {
    padding-bottom: 50px !important;
}

/* Input */

input.text, input.title, input[type=email], input[type=password],input[type=number], input[type=tel], input[type=text], select, textarea {background-color: var(--white); ;padding: 15px 20px !important; border-radius: 0; -webkit-appearance: none; box-sizing: border-box;  border:0; letter-spacing: 0px; font-size: 12px;  width: -webkit-fill-available;}
input:focus-visible, input:focus, input:active {outline: none; border: 1px solid var(--primary) important; border-style: none none solid;}



/* Buttons */
.button-wrapper {z-index: 9;position: relative;}

.primary-button { cursor: pointer; background: var(--black); text-decoration: none; color: var(--white) !important; padding: 11px 20px;  border-radius: 20px; box-sizing: border-box; transition: 0.3s ease all; }
.primary-button:hover { transition: 0.3s ease all; text-decoration: none; background: var(--primary); color: var(--black) !important; }
.primary-button a {}

.secondary-button { cursor: pointer; }
.secondary-button:hover {}
.secondary-button a {}

.tertiary-button { cursor: pointer; }
.tertiary-button:hover {}
.tertiary-button a {}


.book-trigger {background: white; border: 1px white !important; color: black !important; padding: 10px 20px; border-radius: 20px; transition: all 0.3s ease-in-out;position: relative;}
.book-trigger:hover {background: black; color:white !important}

.call-trigger {background: white; border: 1px white !important; color: black !important; padding: 10px 20px; border-radius: 20px; transition: all 0.3s ease-in-out;position: relative;}
.call-trigger:hover {background: black; color:white !important}

.vip-trigger { border: 1; border-color: lightblue !important; color: lightblue !important; padding:11px 50px;}
.vip-trigger:focus, 
.vip-trigger:hover {background-color: #abd6e420; color:lightblue !important;}
.vip-trigger:active {border: 1px lightblue !important ;box-shadow: none!important;outline: none !important; padding:11px 50px;}



/* Menu */
header {width: 100vw;margin: 0 auto;padding: 0;z-index: 100;position: fixed;top: 0;left: 0;right: 0;background: transparent;box-sizing: border-box;overflow: hidden; height: auto;}
header .row {padding: 15px 0 ; justify-content: space-between;}
header.scroll {top: -200px !important;transition: 0.3s ease all;}

.scroll .hamburger-inner, .scroll .hamburger-inner::before, .scroll .hamburger-inner::after {background: var(--primary) !important;}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background: var(--primary) !important;}
.hero {position: relative;}
.menu { display: flex;padding: 15px 0;margin: 0;justify-content: center; align-items: center;}
.menu-item {margin: 0 7px; position: relative;}
.menu-item:hover {text-decoration: underline;}
.current-menu-item a {text-decoration: underline;}
.menu-item a {color: var(--black);padding: 10px 0; text-decoration: none;font-size: var(--xxsmall);}
.menu-item .active:after {display:none;}
.menu-item-has-children {margin-right: 20px;} 
.menu-item-has-children::after {content: '';position: absolute;right: -12px;  width: 0; height: 0; top: 0;bottom: 0;border-right: transparent 4px solid; border-left: 4px solid transparent; border-top: 4px solid var(--darkblue); margin: auto;}
.menu-item-has-children:hover::after {border-top: 0px solid transparent; border-bottom: 4px solid var(--primary);}

.sub-menu {display: none;}
.sub-menu.active { position: absolute;top: 25px; display: block; z-index: 9999; background: var(--white); padding: 5px 0;}
.sub-menu .menu-item { width: max-content; padding: 10px;}
.sub-menu .menu-item:hover {text-decoration: underline;}

.logocontainer { width: 250px;  position: absolute; left: 0; right: 0; margin: auto; top: 60px; z-index: 99;}
.sitelogo {transition: opacity 0.7s ease-in;}
.sitelogo svg {width: auto; height: 60px;}

.secondary-menu {width: auto;align-items: center;}
.mobilemenu {position: relative; display: flex;flex-direction: row-reverse; padding: 10px;box-sizing: border-box;border-radius: 10px;right: 0 !important;}

.menuslide { display: none; align-items: baseline;justify-content: center;}
.menuslide.active {  background: #ffffffb3;backdrop-filter: blur(4px); padding: 0px 40px 100px; position: fixed;top: 0; right: 0; width: 25vw; height: 100vh;z-index: -1; display: flex;flex-direction: column;justify-content: flex-end;}
.menuslide .feature a { color: var(--black) !important;}
.menuslide .menu { display: flex; flex-direction: column;align-items: flex-start;}
.menuslide .menu-item { margin: 0;position: relative; border-top: 1px solid var(--black);border-radius: 0;  width: 100%; background: transparent !important; padding: 0 !important}
.menuslide .menu a {display: flex;font-family: 'freightbigcmp-pro';font-size: var(--large);color: var(--black) !important;box-sizing: border-box; line-height: 1;}

.menu-item a { font-size: var(--xxsmall);}

.menuslide .feature:nth-child(1) a { color: var(--black) !important }



.main-navigation { background: #ffffff8c; border-radius: 5px;padding: 0 20px; backdrop-filter: blur(2px);}

/* Password */
.protected header {display: none;}
.password {width: 500px;height: fit-content; position: absolute; left: 0; right: 0; top: 0;bottom: 0; margin: auto;}
.password .row {padding: 20px; border-radius: 4px;}
.post-password-form { margin:0 }
.post-password-form p { margin:0 }
.post-password-form p:first-of-type {display: none;}
.post-password-form label input { margin-top:10px; }
.post-password-form input[type="submit"] {  margin-bottom: 0px;padding: 10px 20px; width: 100%; border-radius: 20px; border: 0;}
.post-password-form input { margin-bottom: 10px; border-radius: 20px;height: 40px;}
.password h5 { margin-bottom:10px }
.password h6 { margin-bottom:20px }


/* Coming Soon */
.page-coming-soon header, .page-coming-soon footer { display: none;}
.landing-underlay img { min-height: 100vh; object-fit: cover;}
.landing-overlay { position: absolute; inset: 0;margin: auto; z-index: 1; height: fit-content; width: fit-content;}
.landing-overlay h2 {font-family: sans-serif; font-weight: bold;color: white;letter-spacing: -1px;}
.landing-overlay img {max-width: 380px; height: auto;}

/* Announcement */
.announcement-title a { color: var(--black); }


/* Home Page */
.hero-module { position: relative }
.hero-module:before {content: '';background: linear-gradient(0deg, var(--tertiary), transparent);width: 100%;height: 70%;position: absolute;bottom: 0px;left: 0;z-index: 1;}
.hero-module.no-fade:before {content: '';background: linear-gradient(0deg, var(--secondary), transparent);width: 100%;height: 70%;position: absolute;bottom: 0px;left: 0;z-index: 1;}

.page-container {position: relative;max-width: 100vw;overflow: hidden;}
.page-container:after {content: none;}
.hero-content-wrapper { position: relative; z-index: 9;}
.hero-content-wrapper h1 { text-shadow: 0px 0 27px #000; line-height: 0.9;}
.hero-underlay {position: absolute;width: 100%;height: 100%;padding: 20px;top: 0;left: 0;}

.intro-module {position: relative;}
.booking-module { position: relative; }
.booking-module .full-width { height: fit-content;display: flex;}
.sbi_item {border-radius: 10px; pointer-events: none}

/* Introduction */
.introduction-content .med-text {font-family: 'freightbigcmp-pro'; font-size: var(--xxmedium); line-height: 1;}


/* Booking Module */
.booking-module {min-height: auto !important}
.booking-toggles, .booking-form, .booking-actions-wrapper {width: 100%;}
.booking-actions-wrapper.hidden {display: none;}
.booking-actions-wrapper.active {display: flex;}
.booking-action-wrapper { display: none;}
.booking-action-wrapper.active {display: flex; width:100%}
.booking-module-container {background: #BFDCEAab; height: auto; min-height: auto !important; backdrop-filter: blur(4px); padding: 20px !important; border-radius: 10px;}
.booking-actions select {background: transparent;padding: 10px !important;}
.booking-actions select.active { display: block;}
.booking-actions select.hidden { display: none;} 
button.tab {padding: 10px 20px; width: 100%;color: var(--black); border: 1px solid var(--black);border-radius: 20px;letter-spacing: 0;transition: 0.3s ease all;}
button.tab.active {background: var(--black); color: var(--white); transition: 0.3s ease all }
button.tab:hover {background: var(--primary);color: var(--black); transition: 0.3s ease all;}
.booking-actions {position: relative;display: flex;flex: 1 0 0; max-width: 60%;}
.action-title {min-width: 100px;color: var(--black); text-align: left;}
.booking-form .primary-button {border: 0;padding: 10px 20px;}





/* Estimator */
.estimator-row-one {width: 100%; padding-bottom: 20px;border-bottom: 0px solid var(--quartiary);}
.estimator-row-two {width: 100%; padding-bottom: 20px;border-bottom: 0px solid var(--quartiary);flex-wrap: wrap;}
.estimator-row-three {width: 100%; padding-bottom: 20px;border-bottom: 0px solid var(--quartiary);flex-wrap: wrap;}
.estimator-row-four {flex-wrap: wrap;}
.estimator-content-description, .estimator-content-description * { font-size: 14px; line-height: 14px; color: #000000;}


.estimator-types {display: none;}
.estimator-types.active { display: flex;}
.choice {background: rgb(192, 192, 192);border: 1px solid var(--black); text-align: center; transition: 0.3s ease all; border-radius: 20px; color: var(--black);padding: 6px 10px !important; min-width: 140px;}
.choice.active {background-color: var(--black); color: var(--white); transition: 0.3s ease all;}
.choice:hover {background: var(--primary);color: var(--black); transition: 0.3s ease all;}
.choice.vitamin-c-toggle:hover {background: var(--primary);color: var(--black); transition: 0.3s ease all;}

.estimator-quote {background: #ffffffad; height: auto; min-height: auto !important; backdrop-filter: blur(4px); padding: 20px !important; border-radius: 10px; width:-webkit-fill-available;}
.estimator-label {  white-space: wrap; font-family: 'freightbigcmp-pro';font-size: var(--xxmedium); width: fit-content; color: var(--black); margin-top: 10px; margin-bottom:10px;}
.estimator-addons {}
.estimator-content .xsm-text {color: var(--quartiary);line-height: 1.5;width: 75%;}
.estimator-row-total {width: 100%;margin: 20px 0 0;border-top: 1px solid var(--black);padding: 20px 0 0;}
.totals-wrapper { flex: 1;}
.total-cost {font-size: var(--large); color: var(--black); font-family: 'freightbigcmp-pro';margin: -28px 0 0 0;background: transparent;}
.estimator-summary {width: 100%;}

/* Popup styling */
#booking-popup-overlay {display: none;position: fixed !important;top: 50%!important;left: 50%!important;transform: translate(-50%, -50%)!important;z-index: 9999 !important;background: white;border-radius: 8px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);width: 80%;max-width: 400px;padding: 5px;}
#booking-popup { position: relative;}
#booking-popup iframe {width: 100%;height: 600px; border: none;}
#booking-popup .close-popup {top: 10px;right: 10px;cursor: pointer;font-size: 20px; color: #333; background: none; border: none;}


/* Cursor */
.custom-cursor {position: fixed; width: 100px;height: 100px;border-radius: 50%; background-color: var(--primary); color: var(--black); text-transform: uppercase; display: flex;justify-content: center;align-items: center; font-size: var(--xsmall);pointer-events: none;  z-index: 9999; opacity: 0;  transition: transform 0.1s ease, opacity 0.2s ease;}
.carousel-item:hover ~ .custom-cursor,
.carousel-item:hover + .custom-cursor {opacity: 1; transform: scale(1) rotate(15deg) }
.carousel-item {cursor: none; }

/* Postcode Checker */
.pchecker-wrapper {background: #f9f9f9; padding: 40px; margin-top: 100px; border-radius: 20px; min-height: 600px;}
form#postcode-form {background: transparent; position: relative;flex-direction: column; display: flex; align-items: center;}
.suburb-checker { height: auto; min-height: 80vh; display: flex; align-items: center; justify-content: center;}
.suburb-checker .row {text-align: center; padding: 60px 0; display: flex;  flex-direction: column; gap: 20px; width: 80%; margin: 0 auto;}
.suburb-checker h2 { width: 100%; font-size: 32px; text-center: center;text-transform: uppercase; margin: 0 auto;}
.select2-selection__rendered {text-align: left;}
.ui-widget.ui-widget-content {max-height: 400px; overflow: scroll;}
.media-wrapper {background: white; min-height: 340px; border-radius: 10px;}
#booking-container:empty {height: 0 !important;min-height: 0;transition: 0.5s ease all;}
#booking-container {background: transparent; min-height: 600px; border-radius: 10px; transition: 0.5s ease all; }
.booking-container {display: none; opacity: 0; transition: 0.5s ease all; width: 100%; height: 40px; border-radius: 2px; color: var(--black); background: #eee; display: flex; align-items: center; justify-content: center;}

.iframe-results{  z-index: 4;}
#postcode-status {display: none;height: 30px;opacity: 0;transition: 0.5s ease all;right: 60px;top: 0;position: sticky; bottom: 0; margin: auto;}
#postcode-status.show-status {display: flex;height: fit-content;opacity: 0.4;transition: 0.5s ease all;right: 60px;top: 0;position: sticky; bottom: 0; margin: auto;}
#postcode-status.deny-status {display: flex;height: fit-content;background: #f17878 !important;color: darkred;opacity: 1;transition: 0.5s ease all;right: 60px;top: 0; position: sticky; bottom: 0;margin: auto;padding: 3px 10px; border-radius: 20px;}
input.postcode_check_input { flex: 1;  color: var(--tertiary); border: 0; border-radius: 30px; margin-bottom: 0 !important;width: 100%;   position: relative; background: var(--white); letter-spacing: 0;}
input.postcode_check_input::placeholder { color: var(--tertiary) !important }
.select2-selection--single {border: 0 !important; min-height: 36px; padding: 5px; height: auto !important;}
button#submit-postcode {background: lightgrey;color: grey; cursor: default; opacity: 0; padding: 0;border: 0;border-radius: 21px;right: 8px;top: 0;bottom: 0;display: flex;width: 35px;height: 35px;position: sticky;margin: auto;align-items: center;justify-content: center;padding: 8px;box-sizing: border-box;transition: 0.3s ease all}
button#submit-postcode:hover {background: var(--black); opacity: 0; transition: 0.3s ease all;}
button#submit-postcode svg path {stroke: var(--primary); opacity: 0; transition: 0.3s ease all;  stroke-width: 1.5px;}
button#submit-postcode:hover svg path  {stroke: lightblue; opacity: 0; transition: 0.3s ease all}

.submit { opacity:1; visibility: visible; transition:0.3s ease all;width: auto;height: auto;display: flex}
.submit svg {width: 100%;height: fit-content;}
.submit.hidden { opacity:0; visibility: hidden; transition:0.3s ease all;  width: 0;height: 0;}
.success { opacity:1; visibility: visible; transition:0.3s ease all;width: auto;height: auto;display: flex}
.success svg { width: auto; height: 100%;}
.success.hidden { opacity:0; visibility: hidden; transition:0.3s ease all; width: 0;height: 0;}



/* Image Banner */
.image-banner img {display: block;}

/* Menu Page */
.page-template-page-menu .page-container:after { display:none }

/* FAQ Page */
.page-template-page-faq .page-container:after { display:none }

/* Cities */
.page-template-page-cities .page-container:after { display:none }
.city-item {width: calc(25% - 10px); transition: 0.3s ease all; background: var(--white); border-radius: 10px; padding: 20px;}
.city-item:hover { box-shadow: 0 4px 8px #d0d0d0; transition: 0.3s ease all;}
.city-item a{cursor: pointer}
.city-item h2 a, .city-item h2 {cursor: pointer;font-size: 34px !important;line-height: 1;}
.city-title, .city-title a { font-family: 'freightbigcmp-pro', serif; letter-spacing: -1px;font-weight: normal; font-size: 34px !important;color: var(--black) !important;line-height: 1;padding-bottom: 10px;}
.city-item.coming-soon {pointer-events:none; opacity:0.3;order:2}

/* Modals */
.mfp-content { }
.mfp-close {background: white !important;color: var(--primary) !important; opacity: 1; box-sizing: border-box !important;  top: 20px; right: 20px; border-radius: 26px;}
.mfp-content .gform_wrapper input,
.mfp-content .gform_wrapper textarea,
.mfp-content .gform_wrapper select {
    padding: 12px 15px !important;
    border-radius: 5px !important;
    border: 1px solid #ccc !important;
}
.mfp-content form { }



@media (max-width: 1199px) {
form#postcode-form {flex-direction: column;}
.suburb-checker .row { width: 100%;}
}

/* Menu Module */
.menu-wrapper { width: 100%;}
.menu-line .sm-text {color: var(--quartiary);}

/* Afterpay Banner */
.afterpay-logo {height: 20px;}
.afterpay-logo svg {height: 20px;width: auto;}
.afterpay-logo img {max-width: 150px;max-height: 20px;height: 20px;}

/* FAQ */
.faq-module .container { position: relative; }
.faq-module .container:before {content: '';background: linear-gradient(0deg, var(--white), transparent);position: absolute;bottom: 0;left: 0;width: 100%;height: 300px; z-index: 1;}
.faq-row { position: relative; z-index:2; }
.faq-group {display: flex;flex-direction: row;flex-wrap: wrap; gap: 10px 60px; z-index: 9;}
.faq-line { margin-bottom: 20px; width: calc(50% - 30px); z-index:-1;display: flex;flex-direction: column; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--quartiary);}
.faq-line h4 {position: relative;font-size: var(--xxmedium);padding-right: 10%;}
.faq-line h4:after { content: '';background: url(https://mobileivdrip.com.au/wp-content/themes/Divi-child/images/next.svg);width: 26px; height: 14px; transform: rotate(0deg); transition: 0.3s ease all;background-size: contain; position: absolute; right: 0; top: 0; bottom: 0; margin: auto;}
.faq-line h4.active:after {content: '';transform: rotate(180deg); transition: 0.3s ease all;}

.faq-line .sm-text { height: 1px; transition: 0.3s ease all; color: transparent; visibility: hidden;}
.faq-line .sm-text.active { height: auto; transition: 1s ease all; color: black; visibility: visible; text-align: justify;}
.admin-line .sm-text { height: 1px; transition: 0.3s ease all; color: transparent; visibility: hidden;}
.admin-line .sm-text.active { height: auto; transition: 1s ease all; color: white; visibility: visible; text-align: justify;}

a[href^="http://maps.google.com/maps"]{display:none !important}
a[href^="https://maps.google.com/maps"]{display:none !important}
.gmnoprint a, .gmnoprint span, .gm-style-cc {display:none;}
.gmnoprint div { background:none !important;}


/* thankyou */
.thankyou-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers vertically */
    align-items: center; /* Centers horizontally */
    text-align: center;
    margin-top: 0; /* Prevents unwanted spacing at the top */
    padding-top: 200px !important;
}

/* Footer */
.contactus svg {width: fit-content;}
footer a {color: inherit; text-decoration: none;}
footer .menu {padding: 0;}
footer .menu-item a { text-transform: none;  color: var(--quartiary);letter-spacing: 0;}
footer .gform_fields { grid-column-gap: 0 !important; grid-row-gap: 0 !important;}
footer input, footer select, footer textarea {background: transparent !important; border-bottom: 1px solid var(--quartiary) !important;font-family: 'Suisse Int';font-size: 10px !important;}
footer .ginput_complex span { padding: 0 !important;}
footer .gform_button { background: transparent; border: 0 !important;font-family: 'Suisse Int' !important;font-size: 12px !important; color: var(--black) !important;}
.socials svg { height: 12px;width: 18px;}
.socials svg path {fill: var(--quartiary);}


@media (min-width: 728px) and (max-width: 1200px) {
    .page-container:after {
    height: 80vh;
    background-size: 100% 100% !important;
    background-position: center;
    width: 80vw;
    margin: 0 10vw;
}
}
@media (max-width: 1200px) {

:root {
    --xxlarge: 55px;
	--large: 50px;
	--medium: 32px;
	--xmedium: 22px;
	--xxmedium: 18px;
	--small: 15px;
	--xsmall: 10px;
	--xxsmall: 10px;
}

.mobile { display:block; }
.desktop { display:none; }


	
.main-navigation {display: none;}
.menuslide.active {left: 0; width: 100%;}

.hero-content-wrapper h1 {width: 87%;}
.hero-module .fullwidth {height: fit-content; padding-top: 100px;}
.booking-module {min-height: auto !important;width: 100%;}
.booking-toggles {gap: 5px !important;}
.booking-actions {width: 100%;max-width: 100%;gap: 5px !important;}
.booking-form .primary-button {width: 100%;}
#postcode-status.show-status {height: 23px;text-align: center;font-size: 9px;}
#booking-popup-overlay {width: 95%;top: 200px;position: fixed;}
.booking-module .flex-row {flex-direction: column; width: 100%; gap: 40px;}
.booking-module .half {background: var(--black); padding: 100px 0 0;}
.booking-header {width: 80% !important; margin: 0 auto !important;}
.booking-header .col9 { width: 100%;}
.iframe-results iframe { padding-top: 40px;}

/* Shared styles for both success and error messages */
#postcode-error-message {
    display: none;
    width: 100% !important; /* Ensure full width */
    text-align: center;
    padding: 12px 15px; /* Adjust for consistent size */
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Error Message (Red) */
#postcode-error-message.deny-status {
    background-color: #FFCCCC !important; /* Light red */
    color: #D8000C !important; /* Dark red */
    border: 1px solid #D8000C !important;
	margin-top: 10px;
}

/* Success Message (Grey - Neutral) */
#postcode-error-message.show-status {
    background-color: var(--primary) !important; /* Light grey */
    color: #333333 !important; /* Dark grey for readability */
    border: 1px solid #C0C0C0 !important;
	margin-top: 10px;
}



.hero-content {width: 90%;}
.hero-module, .intro-module {height: fit-content;}
.introduction-header {width: 100%;}
.introduction-row {padding: 0px 0;}
.intro-module .half { width: 100%;padding: 0;}
.col6.blank {display: none;}


.introduction-content {width: 90%;}
.estimator-module-row {width: 90%;}
.estimator-row-one, .estimator-row-two, .estimator-row-three, .estimator-row-four {flex-direction: column; gap:0px}
.estimator-parent {width: 100%;flex-wrap: wrap;flex-direction: row;justify-content: flex-start;}
.estimator-types {flex-direction: row;flex-wrap: wrap;justify-content: flex-start;width: 100%;}
.estimator-content .xsm-text {width: 100%;}
.estimator-content-description, .estimator-content-description * { width: 100%;text-align: justify !important;}
.estimator-addons {width: 100%;flex-wrap: wrap;flex-direction: row;}
.choice {min-width: calc(50% - 5px);}
.choice1 {min-width: calc(50% - 5px);}
.estimator-label{ text-align: left !important; padding-top: 10px; padding-bottom: 00px; margin:10px;}
.estimator-totals {flex-direction: column;gap: 33px;}
.totals-wrapper {flex-direction: column;gap: 10px;}

#postcode-status.show-status {  height: fit-content; text-align: center; font-size: 9px; position: sticky; top: -66px; background: var(--white); opacity: 1;padding: 10px; width: 100%; right: 0; border-radius: 11px;z-index: 9; margin: 0 !important;}
    #postcode-status.deny-status {height: fit-content;text-align: center;font-size: 9px; position: sticky; top: -45px; background: #f17878 !important;opacity: 1;padding: 10px; text-align: center;width: 100%; right: 0; border-radius: 6px;  z-index: 9;margin: 0 !important;  color: darkred; display: flex; justify-content: center;}
.location-title:before {font-size: var(--large);right: 0;}
.introduction-row h6 {width: 100%;text-align: center;font-size: var(--small);line-height: 1.2;}
.city-item {width: calc(100%); }

.afterpay-row {flex-direction: column;gap: 0px;}

.faq-line { width: 100%;}
.faq-module .sm-text.black {text-align: center;}
.faq-module h2 { text-align: center }
.membership {order: 1;}
.action {order: 2;}

footer .row-width.flex-row {flex-direction: column;}
footer .col6 { width: 100%;}
footer .col9 { width: 100%;}
.copyright * {font-size: 8px;margin: 3px 0;}
}

/* Ensure full height and centered alignment */
.portal {
    background: #252525 !important;
    color: white !important;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure form inputs fit inside */
.portal-form input,
.portal-form textarea {
    background: #222 !important;
    color: white !important;
    border: 1px solid #444 !important;
    padding: 10px !important;
    border-radius: 5px !important;
    width: 100% !important;
}

/* Fix submit button */
.portal-form input[type="submit"] {
    background: white !important;
    color: black !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
}

.portal-form input[type="submit"]:hover {
    background: gray !important;
    color: white !important;
}
.footer-meta {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    width: 100%;
}

.footer-meta h3 {
    font-size: 1.5rem; /* Adjust for size */
    text-align: center !important;
    margin-bottom: 10px;
}

.footer-meta .contact {
    text-align: center !important;
    justify-content: center !important;
    display: flex;
    flex-direction: column;
}

.footer-meta a {
    text-align: center!important;
    display: block;
}

.custom-404-container {
    background: var(--secondary) !important;
    border-radius: 15px !important;
    padding: 50px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05); 
    max-width: 250px; 
    text-align: center;
    margin: 0 auto;
}

body.error404 {
    background: var(--white) !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 0;
}

.custom-404-button {
    display: inline-block;
    padding: 12px 24px;
    background: var(--black);
    color: var(--white);
    text-decoration: none;
    border-radius: 25px;
    transition: 0.3s ease;
    font-size: var(--small);
    font-weight: bold;
    text-transform: uppercase;
}

.custom-404-button:hover {
    background: var(--primary);
    color: var(--black);
}

.custom-404-logo {
    display: block;
    margin: 30px auto 0;
    width: 250px;
    height: auto;
}

.error404 h2 {
    font-size: var(--large);
    font-family: 'freightbigcmp-pro', serif;
    font-weight: normal;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.error404 .sm-text {
    font-size: var(--small);
    color: var(--quartiary);
    line-height: 1.6;
}
.colour-text {
    color: lightblue !important;
    font-weight: normal !important;
    font-family: 'freightbigcmp-pro', serif !important;
    letter-spacing: inherit !important;
}
@media (max-width: 768px) {
    body {
        background-attachment: scroll !important;
    }
}
/* --- 📌 FORM CONTAINER (KEEPS IT CENTERED & STRUCTURED) --- */
#script-form .script-form-container {
    max-width: 1000px; /* Slightly wider for better desktop balance */
    margin: 50px auto;
    background: var(--secondary);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05); /* Keeping your shadow */
}

/* --- 📌 TABLE WRAPPER (PREVENT LAYOUT BREAKING) --- */
#script-form .script-form-table-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- 📌 TABLE STYLING (SIMPLE & MINIMAL) --- */
#script-form .ingredient-table {
	width: 100%;
    max-width: 1000px;
	margin: auto;
    border-collapse: collapse;
    margin-top: 10px;
    background: var(--white);
    border-radius: 10px;
}

#script-form .ingredient-table th {
    background: var(--white);
    padding: 2px;
    text-align: center;
    font-weight: 300;
    font-size: 9px;
    color: var(--black);
    border-bottom: 1px solid var(--quartiary);
}

#script-form .ingredient-table td {
    padding: 6px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #ddd;
}

/* --- 📌 INPUTS & SELECTS (SLIM & BEAUTIFUL) --- */
#script-form select,
#script-form input[type="number"] {
    width: 100%;
    max-width: 200px;
    padding: 6px 10px !important; /* SLIMMER PADDING */
    text-align: center;
    font-size: 9px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* --- 📌 DROPDOWNS (BUTTON-LIKE STYLING) --- */
#script-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: white;
    cursor: pointer;
}

/* --- 📌 REMOVE ROW BUTTON (SIMPLE X BUTTON) --- */
#script-form .remove-row {
    background: none;
    border: none;
    color: var(--black);
    font-size: 9px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#script-form .remove-row:hover {
    color: red;
}

/* --- 📌 ADD INGREDIENT BUTTON (MINIMAL & MODERN) --- */
#script-form .add-button {
    background-color: var(--black);
    color: white;
    padding: 4px 12px; /* SLIM PADDING */
    border: 1px solid var(--black);
    border-radius: 18px;
    font-size: 9px;
    cursor: pointer;
    display: block;
    margin: 10px auto;
    font-weight: 300;
    transition: all 0.2s ease;
    min-width: 120px;
}

#script-form .add-button:hover {
    background-color: var(--primary);
    color: var(--black);
}

/* --- 📌 SUBMIT BUTTON (SLIM DESIGN) --- */
#script-form .submit-button {
    background-color: var(--black);
    color: white;
    padding: 4px 12px; /* SLIM PADDING */
    border: 1px solid var(--black);
    border-radius: 18px;
    font-size: 9px;
    cursor: pointer;
    display: block;
    margin: 15px auto;
    font-weight: 300;
    transition: all 0.2s ease;
    min-width: 200px;
}

#script-form .submit-button:hover {
    background-color: var(--primary);
    color: var(--black);
}

#script-form input.text, input.title, input[type=email], input[type=date], input[type=password], input[type=number], input[type=tel], input[type=text], select, textarea {
background-color: var(--white);
padding: 12px 20px !important;
border-radius: 20px;
margin: 2px;
-webkit-appearance: none;
box-sizing: border-box;
border: 0;
letter-spacing: 0px;
font-size: 9px;
width: -webkit-fill-available;
}

/* --- 📌 RESPONSIVE FIXES --- */
@media (max-width: 1200px) {
    #script-form .script-form-container {
        max-width: 95%;
        padding: 30px;
    }

    #script-form .script-form-table-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    #script-form .script-form-container {
        width: 95%;
        padding: 20px;
    }

    #script-form .script-form-table-wrapper {
        max-width: 100%;
    }
}
/* --- 📌 FIX TABLE COLUMN WIDTH & KEEP ROWS ALIGNED --- */
#script-form .ingredient-table {
    width: 100%;
    max-width: 1000px;
    table-layout: fixed; /* Forces equal column width */
    border-collapse: collapse;
}

/* --- 📌 FORCE EACH COLUMN TO BE THE SAME SIZE --- */
#script-form .ingredient-table th,
#script-form .ingredient-table td {
    width: 20%; /* Ensures all 5 columns are equal */
    text-align: center;
    padding: 6px;
}

/* --- 📌 MAKE THE 'ACTION' COLUMN SMALLER FOR BUTTONS --- */
#script-form .ingredient-table th:last-child,
#script-form .ingredient-table td:last-child {
    width: 10%; /* Keep delete button in its place */
}

/* --- 📌 FIX 'ADD INGREDIENT' BUTTON PLACEMENT --- */
#script-form .add-button {
    display: block;
    margin: 10px auto;
    width: fit-content;
}
/* Force the 'Add Ingredient' button to align left */
#add-row.add-button {
    display: inline-block; /* Prevents full-width centering */
    margin-left: 0; /* Aligns the button to the left */
    text-align: center; /* Keeps text centered inside the button */
}

/* Ensure parent container allows left alignment */
#script-form .add-button {
    align-self: flex-start; /* Forces left alignment in flexbox */
    justify-content: flex-start;
}
#script-form .ingredient-table {
	width: 100%;
    max-width: 1000px;
	margin: auto;
    border-collapse: collapse;
    margin-top: 10px;
    background: var(--white);
    border-radius: 0px;
}

#script-form .ingredient-table th {
    background: var(--white);
    padding: 2px;
    text-align: center;
    font-weight: 300;
    font-size: 9px;
    color: var(--black);
    border-bottom: 1px solid var(--quartiary);
}

#script-form .ingredient-table td {
    padding: 2px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid var(--quartiary);
}

#script-form select,
#script-form input[type="number"] {
    width: 100%;
    max-width: 400px;
    padding: 6px 10px !important;
    text-align: center;
    font-size: 9px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

#script-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: white;
    cursor: pointer;
}

#script-form .remove-row {
    background: none;
    border: none;
    color: var(--black);
    font-size: 9px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#script-form .remove-row:hover {
    color: red;
}

#script-form .add-button {
    background-color: var(--black);
    color: white;
    padding: 4px 12px; 
    border: 1px solid var(--black);
    border-radius: 18px;
    font-size: 9px;
    cursor: pointer;
    display: block;
    margin: 10px auto;
    font-weight: 300;
    transition: all 0.2s ease;
    min-width: 120px;
}

#script-form .add-button:hover {
    background-color: var(--primary);
    color: var(--black);
}

#script-form .submit-button {
    background-color: var(--black);
    color: white;
    padding: 4px 12px; 
    border: 1px solid var(--black);
    border-radius: 18px;
    font-size: 9px;
    cursor: pointer;
    display: block;
    margin: 15px auto;
    font-weight: 300;
    transition: all 0.2s ease;
    min-width: 200px;
}

#script-form .submit-button:hover {
    background-color: var(--primary);
    color: var(--black);
}

#script-form input.text, input.title, input[type=email], input[type=date], input[type=password], input[type=number], input[type=tel], input[type=text], select, textarea {
background-color: var(--white);
padding: 12px 20px !important;
border-radius: 20px;
margin: 2px;
-webkit-appearance: none;
box-sizing: border-box;
border: 0;
letter-spacing: 0px;
font-size: 9px;
width: -webkit-fill-available;
}

/* --- 📌 RESPONSIVE FIXES --- */
@media (max-width: 1200px) {
    #script-form .script-form-container {
        max-width: 95%;
        padding: 30px;
    }

    #script-form .script-form-table-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    #script-form .script-form-container {
        width: 95%;
        padding: 20px;
    }

    #script-form .script-form-table-wrapper {
        max-width: 100%;
    }
}
/* --- 📌 FIX TABLE COLUMN WIDTH & KEEP ROWS ALIGNED --- */
#script-form .ingredient-table {
    width: 100%;
    max-width: 1000px;
    table-layout: fixed; /* Forces equal column width */
    border-collapse: collapse;
}

/* --- 📌 FORCE EACH COLUMN TO BE THE SAME SIZE --- */
#script-form .ingredient-table th,
#script-form .ingredient-table td {
    width: 20%; /* Ensures all 5 columns are equal */
    text-align: center;
    padding: 2px;
}

/* --- 📌 MAKE THE 'ACTION' COLUMN SMALLER FOR BUTTONS --- */
#script-form .ingredient-table th:last-child,
#script-form .ingredient-table td:last-child {
    width: 10%; /* Keep delete button in its place */
}

/* --- 📌 FIX 'ADD INGREDIENT' BUTTON PLACEMENT --- */
#script-form .add-button {
    display: block;
    margin: 10px auto;
    width: fit-content;
}
#add-row.add-button {
    display: inline-block; 
    margin-left: 0; 
    text-align: center; 
}

#script-form .add-button {
    align-self: flex-start; 
    justify-content: flex-start;
}
#script-form .contraindication-table {
    width: 100%;
    max-width: 900px;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 10px !important; 
    padding: 10px; 
	
}

#script-form .contraindication-table th,
#script-form .contraindication-table td {
    width: 50%; 
    background: var(--white);
    padding: 2px;
    text-align: center;
    font-weight: 300;
    font-size: 9px;
    color: var(--black);
    border-bottom: 1px solid var(--quartiary) !important;
}

#script-form .contraindication-table tr {
    background: var(--white);
	border-bottom: 1px solid var(--quartiary) !important;

}

#script-form .contraindication-table-wrapper {
    background: var(--white);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05); 
}
#script-form .contraindication-table th:first-child, 
#script-form .contraindication-table td:first-child {
    width: 25%; 
}

#script-form .contraindication-table th:nth-child(2), 
#script-form .contraindication-table td:nth-child(2) {
    width: 65%; 
}
#script-form .contraindication-table th:last-child, 
#script-form .contraindication-table td:last-child {
    width: 10%; 
}
#add-contraindication.add-button {
    display: inline-block; 
    margin: 10px 0; 
    text-align: center; 
}

/* --- 📌 Ensure Parent Container Allows Left Alignment --- */
#script-form .add-button {
    align-self: flex-start; /* Forces left alignment if inside flexbox */
    justify-content: flex-start;
}

.response-message-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 400px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    padding: 0px;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    z-index: 9999;
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 0px;
    border-radius: 0px;
    text-align: center;
    font-weight: 300;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 0px;
    border-radius: 0px;
    text-align: center;
    font-weight: 300;
}
@media (max-width: 768px) {
  .introduction-content .description {
    padding-bottom: 40px;
  }
}


/* Light grey (#E7E7E7) fade from bottom up */
.hero-container-pen::after {
  content: "";
  position: absolute;
  bottom: 0px !important;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(231,231,231,1) 0%,
    rgba(231,231,231,1) 10%,
    rgba(231,231,231,0.8) 30%,
    rgba(231,231,231,0) 100%
  );
}
.hero-module.why-sc .hero-container-pen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
	bottom: 0px !important;
  background: linear-gradient(
    to bottom,
    rgba(231,231,231,1) 0%,     /* solid at top */
    rgba(231,231,231,0.99) 30%,    /* hold solid */
	rgba(231,231,231,0.5) 50%,  /* start fade */
    rgba(231,231,231,0.1) 70%,  /* start fade */
    rgba(231,231,231,0) 100%    /* transparent at bottom */
  );
}
/* Desktop refinements: anchor focal point lower, reduce fade strength */
@media (min-width: 1200px) {
.hero-module.why-sc .hero-container-pen {background-position: center 50%;}
.hero-module.why-sc .hero-container-pen::after {
    background: linear-gradient(
      to bottom,
    rgba(231,231,231,1) 0%,     /* solid at top */
    rgba(231,231,231,0.8) 30%,    /* hold solid */
	rgba(231,231,231,0.5) 50%,  /* start fade */
    rgba(231,231,231,0.1) 60%,  /* start fade */
    rgba(231,231,231,0) 100%    /* transparent at bottom */
    );
  }
}

/* Ensure content sits above overlay */
.hero-container-pen .introduction-content { position: relative; z-index: 2; }

/* Desktop refinements: anchor focal point lower, reduce fade strength */
@media (min-width: 1200px) {
  .hero-container-pen {background-position: center 50%;}
  .hero-container-pen::after {
    background: linear-gradient(
      to top,
      rgba(231,231,231,1) 0%,
      rgba(231,231,231,1) 10%,
      rgba(231,231,231,0.65) 30%,
      rgba(231,231,231,0) 100%
    );
  }
}
/* Core visual style for portal buttons */
.portal-button {
  background-color: #191919;    /* your new brand colour */
  color: #fff;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.portal-button:hover {
  background-color: #000000;    
}
.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;

  --px: 50vw;
  --py: 50vh;
  --r: 0px;

  /* Layer 1: solid white disc that grows */
  /* Layer 2: subtle outer shadow for depth (the "rim") */
  background:
    radial-gradient(circle at var(--px) var(--py),
      rgba(255,255,255,1) 0,
      rgba(255,255,255,0.30) var(--r),
      rgba(255,255,255,1) calc(var(--r) + 1px)
    ),
    radial-gradient(circle at var(--px) var(--py),
      rgba(214, 214, 214, 0.7) calc(var(--r) - 10px),
      rgba(0,0,0,0)    calc(var(--r) + 28px)
    );

  opacity: 0; 
  transition: opacity 400ms linear;
}

.portal-zooming { transform: none !important; filter: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay { transition: none !important; }
}
.inject-logo {
  width: 300px;   /* default = mobile size */
  height: auto;
}

/* On larger screens, increase size */
@media (min-width: 768px) {
  .inject-logo {
    width: 400px;  /* adjust as you like */
  }
}

@media (min-width: 1200px) {
  .inject-logo {
    width: 450px;
	  padding-bottom:100px;/* full desktop size */
  }
}

/* Center by default (mobile/tablet) */
.logo-wrapper {
  text-align: center;
}

/* Right align logo only on desktop */
@media (min-width: 992px) {
  .logo-wrapper {
margin-left: auto;  /* push right */
    margin-right: 0;
	}
}
/* Desktop only */
@media (min-width: 992px) {
  /* push the column to the right edge */
  .hero-module.why-sc .introduction-row {
    display: flex;                 /* ensure flex context */
    justify-content: flex-end;     /* content hugs right */
  }

  /* make the column narrower on desktop */
  .hero-module.why-sc .introduction-content.col11 {
    flex: 0 1 60% !important;      /* shrink column */
    max-width: 60% !important;     /* belt-and-braces */
    width: 60% !important;
    margin-right: 0;
    margin-left: auto;             /* align to right */
  }
}