.elementor-1822 .elementor-element.elementor-element-946ca16{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--padding-top:3%;--padding-bottom:3%;--padding-left:5%;--padding-right:5%;}.elementor-1822 .elementor-element.elementor-element-946ca16:not(.elementor-motion-effects-element-type-background), .elementor-1822 .elementor-element.elementor-element-946ca16 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://giacademy.co.za/wp-content/uploads/2025/06/Rainbow-Smoke-3.png");background-position:center center;background-repeat:no-repeat;background-size:auto;}.elementor-1822 .elementor-element.elementor-element-946ca16::before, .elementor-1822 .elementor-element.elementor-element-946ca16 > .elementor-background-video-container::before, .elementor-1822 .elementor-element.elementor-element-946ca16 > .e-con-inner > .elementor-background-video-container::before, .elementor-1822 .elementor-element.elementor-element-946ca16 > .elementor-background-slideshow::before, .elementor-1822 .elementor-element.elementor-element-946ca16 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1822 .elementor-element.elementor-element-946ca16 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1822 .elementor-element.elementor-element-51c55aa{text-align:center;}.elementor-1822 .elementor-element.elementor-element-51c55aa .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1822 .elementor-element.elementor-element-fc9e278.elementor-element{--align-self:center;}.elementor-1822 .elementor-element.elementor-element-fc9e278{font-family:"Roboto", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-1822 .elementor-element.elementor-element-0c214b4{width:100%;max-width:100%;padding:2% 5% 2% 5%;}.elementor-1822 .elementor-element.elementor-element-0c214b4.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}body.elementor-page-1822:not(.elementor-motion-effects-element-type-background), body.elementor-page-1822 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}:root{--page-title-display:none;}body.elementor-page-1822{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for shortcode, class: .elementor-element-0c214b4 *//* === Gravity Form Dark Mode Styles === */
body .gform_wrapper {
  color: #f0f0f0;
}

body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="number"],
body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="password"],
body .gform_wrapper textarea,
body .gform_wrapper select {
  background-color: #1c1c1c;
  color: #fff;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 10px 12px;
  transition: all 0.3s ease;
}

body .gform_wrapper input:focus,
body .gform_wrapper textarea:focus,
body .gform_wrapper select:focus {
  border-color: #4cc9f0;
  box-shadow: 0 0 8px rgba(76, 201, 240, 0.4);
  outline: none;
}

body .gform_wrapper label,
body .gform_wrapper legend {
  color: #ddd;
  font-weight: 500;
}

body .gform_wrapper .gfield_required {
  color: #ff6b6b;
}

/* Buttons */
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_page_footer input[type="button"] {
  background-color: #4cc9f0;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

body .gform_wrapper .gform_footer input[type="submit"]:hover {
  background-color: #72efdd;
}

/* Error / validation messages */
body .gform_wrapper .validation_error,
body .gform_wrapper .gfield_validation_message {
  background: #ff6b6b;
  color: #fff;
  border-radius: 6px;
  padding: 10px;
}

/* Success message */
body .gform_confirmation_message {
  background-color: #2b9348;
  color: #fff;
  padding: 15px;
  border-radius: 6px;
}

/* === File Upload Field - Dark Mode Fix === */
body .gform_wrapper .gfield input[type="file"] {
  background-color: #1c1c1c;
  color: #fff;
  border: 1px solid #444;
  border-radius: 6px;
  width: 100%;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Make sure the upload box itself fits the container */
body .gform_wrapper .gfield.gfield--type-fileupload {
  width: 100%;
  display: block;
}

/* Make the file input label look clean */
body .gform_wrapper .gfield_label {
  color: #ddd;
  font-weight: 500;
  margin-bottom: 6px;
}

/* When you hover over the upload field */
body .gform_wrapper .gfield input[type="file"]:hover {
  border-color: #4cc9f0;
}

/* Uploaded file name text */
body .gform_wrapper .gform_fileupload_multifile .gform_drop_area,
body .gform_wrapper .gform_fileupload_multifile .gform_drop_instructions {
  color: #ccc;
}

/* Fix Gravity Forms “multi-file upload” drag-drop box (the HTML5 one) */
body .gform_wrapper .gform_drop_area {
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed #444;
  border-radius: 6px;
  padding: 30px;
  text-align: center;
  color: #ccc;
  transition: border-color 0.3s ease;
}

body .gform_wrapper .gform_drop_area:hover {
  border-color: #4cc9f0;
  color: #4cc9f0;
}

/* Make the “Browse Files” button stretch full width */
body .gform_wrapper .gform_drop_area input[type="file"] {
  width: 100%;
  opacity: 0; /* hide native file input */
  height: 100%;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
}

/* Add a fake full-width upload button look */
body .gform_wrapper .gform_drop_area::after {
  content: "Click or Drag to Upload File";
  display: block;
  background: #4cc9f0;
  color: #000;
  border-radius: 6px;
  padding: 12px;
  font-weight: 600;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}

body .gform_wrapper .gform_drop_area:hover::after {
  background: #72efdd;
}

/* === Gravity Form Spacing and Button Fix === */

/* Add space between each field */
body .gform_wrapper .gfield {
  margin-bottom: 25px !important;
}

/* Add more breathing room between form sections/pages */
body .gform_wrapper .gform_page {
  margin-bottom: 40px;
}

/* Stretch the submit/enrol button full width */
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_page_footer input[type="button"],
body .gform_wrapper .gform_page_footer input[type="submit"] {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #4cc9f0;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 14px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover effect for button */
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_page_footer input[type="submit"]:hover {
  background-color: #72efdd;
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
}

/* Center align the confirmation or validation messages */
body .gform_wrapper .gform_confirmation_message,
body .gform_wrapper .validation_error {
  text-align: center;
}/* End custom CSS */