/*
 * ask-query.css — Say Your Query (Ask The Expert) page styles
 *
 * Generated by Claude Code Phase 2B — Developer review required
 *
 * Converted from:
 *   frontend-nextjs/src/assets/scss/components/_form.scss  (full form rules)
 *   frontend-nextjs/src/assets/scss/_base.scss             (.row.gap-24)
 *
 * KEY DESIGN DIFFERENCE from advertise-with-us page:
 *   The React AskQueryForm.js imports only _form.scss, NOT _advertise-with-us.scss.
 *   _form.scss defines .advertise-form-wrap { padding-top: 5vw } with NO background.
 *   Therefore this page has a WHITE background, not the dark navy of advertise-with-us.
 *
 * Override strategy:
 *   advertise.css is loaded first (for .blog-cta-wrap, .quick-link-box, .form-wrap field styles).
 *   This file loads AFTER advertise.css and overrides the dark-background declarations
 *   using same-specificity selectors — cascade order wins, no !important needed.
 *
 * SCSS variable values:
 *   $primary     → #e78125
 *   $secondary   → #19263a
 *   $danger      → #f74641
 *   $color_raven → #7b7c7e
 *   $color_gray  → #838383
 *   $color_silver → #cdcdcd
 *   $white       → #ffffff
 */

/* =========================================================================
   1. FORM WRAP — WHITE BACKGROUND OVERRIDE
   Source: frontend-nextjs/src/assets/scss/components/_form.scss (bottom rule)
     .advertise-form-wrap { padding-top: 5vw; }   ← no background set here
   Override: advertise.css sets background:#19263a — revert to white for this page.
   ========================================================================= */

.advertise-form-wrap {
	background: #fff;
	padding: 92px 0;
}

@media (max-width: 991px) {
	.advertise-form-wrap {
		padding: 40px 0;
	}
}

/* ── Left column: form title + subtitle ── */

/* Override: advertise.css sets rgba(255,255,255,0.7) + padding-left:66px */
/* .advertise-form-wrap .form-title {
	color: #4d4d4d;
	font-size: 14px;
	line-height: 147%;
	padding-top: 23px;
    padding-left: 66px;
}
.advertise-form-wrap .gform_wrapper .gfield_label, .advertise-form-wrap .gform_wrapper.gravity-theme .gfield_label{
	color: white;
} */
@media (max-width: 1024px) {
	.advertise-form-wrap .form-title {
		padding-bottom: 30px;
	}
}

@media (max-width: 991px) {
	.advertise-form-wrap .form-title {
		padding-top: 0;
	}
}

/* Override: advertise.css sets color:#ffffff */
.advertise-form-wrap .form-title h1 {
    color: #232528;
	padding-bottom: 0;
}
.advertise-form-wrap .form-title{
	padding-left: 0;
	    padding-top: 0px;
}
/* Override: advertise.css sets rgba(255,255,255,0.7) + max-width:380px */
.advertise-form-wrap .form-content {
	color: #4d4d4d;
	font-size: 14px;
	line-height: 147%;
	max-width: none;
}

.advertise-form-wrap .form-content p {
	max-width: none;
	margin-bottom: 0.75em;
	font-size: 16px;
		/* color: #fff; */
}

/* ── Right column: form container (no card on this page) ── */

/* Override: advertise.css sets white card with shadow + padding:36px 45px 45px */
.advertise-form-wrap .form-box {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* =========================================================================
   2. FORM FIELD ELEMENTS (inside .form-wrap)
   Source: frontend-nextjs/src/assets/scss/components/_form.scss
   These are the same as advertise.css but re-declared here so they work
   even if advertise.css is ever removed from this page's dependencies.
   ========================================================================= */

.form-wrap .form-group {
	padding-bottom: 18px;
}

.form-wrap .form-label {
	display: block;
	font-size: 12px;
	line-height: 1.2;
	color: #4d4d4d;
	margin-bottom: 8px;
}

.form-wrap .form-control {
	display: block;
	width: 100%;
	height: 45px;
	padding: 6px 12px;
	font-size: 15px;
	line-height: 1.3;
	color: #19263a;
	background-color: #ffffff;
	border: 1px solid #cdcdcd;
	border-radius: 5px;
	transition: border-color 0.15s ease-in-out;
	appearance: none;
	-webkit-appearance: none;
}

.form-wrap .form-control:focus {
	border-color: #e78125;
	box-shadow: none;
	outline: 0;
}

.form-wrap textarea.form-control {
	height: 123px;
	padding-top: 12px;
	resize: vertical;
}

.form-wrap textarea.form-control.textarea-small {
	height: 80px;
}

.form-wrap .form-footer {
	padding-top: 18px;
}

.form-wrap .form-error {
	font-size: 12px;
	font-weight: 500;
	color: #f74641;
	padding-top: 6px;
}

/* Submit button — centred, max-width 234px */
.advertise-form-wrap .form-box .form-footer .cta {
	max-width: 234px;
	margin: 0 auto;
}

.advertise-form-wrap .form-box .form-footer .cta .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* =========================================================================
   3. FILE UPLOAD DROPZONE
   Source: React FilePond component labelIdle HTML:
     <div class="dropzone-placeholder">
       <div class="txt">Drag and drop your file here<br/>or</div>
       <span class="btn btn-sm btn-outline-primary">Select File</span>
       <div class="txt pt-3 pb-0">Upload PNG, JPG, JPEG, PDF File</div>
     </div>
   Converted from: frontend-nextjs/src/assets/scss/components/_form.scss
     .file-upload--light, .filepond--panel, .dropzone-placeholder
   ========================================================================= */

/* (filepond classes removed — dropzone is injected via ask-query.js into GF field) */

/* ── GF native file upload — styled as FilePond dropzone via JS injection ── */
/* ask-query.js inserts .dropzone-placeholder into .ginput_container_fileupload
   and hides the native file input inline.                                       */

.advertise-form-wrap .gform_wrapper.gform_id_4 .ginput_container_fileupload,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .ginput_container_fileupload {
	display: block;
	background: #ffffff;
	border: 1px dashed #838383;
	border-radius: 5px;
	padding: 0;
	text-align: center;
	position: relative;
	transition: border-color 0.2s ease-in-out;
}

/* Drag-over highlight */
.advertise-form-wrap .gform_wrapper.gform_id_4 .ginput_container_fileupload.drag-over,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .ginput_container_fileupload.drag-over {
	border-color: #e78125;
	background: #fff8f2;
}

/* Dropzone placeholder injected by ask-query.js */
.advertise-form-wrap .gform_wrapper.gform_id_4 .ginput_container_fileupload .dropzone-placeholder,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .ginput_container_fileupload .dropzone-placeholder {
	padding: 30px 15px;
	text-align: center;
}

.advertise-form-wrap .gform_wrapper.gform_id_4 .ginput_container_fileupload .dropzone-placeholder .txt,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .ginput_container_fileupload .dropzone-placeholder .txt {
	font-size: 14px;
	line-height: 24px;
	color: #7b7c7e;
	padding-bottom: 8px;
}

/* "Select File" outlined orange pill button — matches .btn { border-radius: 48px } from _buttons.scss */
.advertise-form-wrap .gform_wrapper.gform_id_4 .ginput_container_fileupload .btn-outline-primary,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .ginput_container_fileupload .btn-outline-primary {
	display: inline-block;
	padding: 8px 22px;
	font-size: 14px;
	font-weight: 500;
	line-height: 16px;
	color: #e78125;
	background: transparent;
	border: 1px solid #e78125;
	border-radius: 48px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	margin-bottom: 2px;
}

.advertise-form-wrap .gform_wrapper.gform_id_4 .ginput_container_fileupload .btn-outline-primary:hover,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .ginput_container_fileupload .btn-outline-primary:hover {
	color: #ffffff;
	background-color: #e78125;
}

/* Selected file name shown after picking */
.advertise-form-wrap .gform_wrapper.gform_id_4 .ginput_container_fileupload .file-selected-name,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .ginput_container_fileupload .file-selected-name {
	font-size: 12px;
	color: #19263a;
	padding-top: 8px;
	word-break: break-all;
}

/* GF file size/type hint line (hidden by JS; keep here as fallback) */
.advertise-form-wrap .gform_wrapper.gform_id_4 .gfield_description.gform_fileupload_rules,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gfield_description.gform_fileupload_rules {
	font-size: 12px;
	color: #7b7c7e;
	padding-top: 8px;
	text-align: center;
}

/* =========================================================================
   4. GRAVITY FORMS — ASK QUERY FORM (ID 4) OVERRIDES
   Scoped to gform_id_4 so advertise form (ID 3) is unaffected.
   Source: _form.scss textarea-small variant (height: 80px)
   advertise.css sets textarea height to 195px; override to 80px for this form.
   ========================================================================= */

.advertise-form-wrap .gform_wrapper.gform_id_4 textarea,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 textarea {
	height: 80px;
}

/* Override: advertise.css scopes GF button under .advertise-form-wrap (no gform_id_4).
   Re-declare to ensure correct button styling on white background. */
.advertise-form-wrap .gform_wrapper.gform_id_4 .gform_footer,
.advertise-form-wrap .gform_wrapper.gform_id_4 .gform_page_footer,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gform_footer {
	padding-top: 18px;
	display: flex;
	justify-content: center;
}

.advertise-form-wrap .gform_wrapper.gform_id_4 .gform_button,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gform_button {
	max-width: 150px;
	width: 100%;
	background: #e78125;
	color: #ffffff;
	border: 0;
	border-radius: 48px;
	padding: 21px 30px;
	font-size: 18px;
	font-weight: 500;
	line-height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.advertise-form-wrap .gform_wrapper.gform_id_4 .gform_button:hover,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gform_button:hover {
	background: #c9731f;
}

/* =========================================================================
   5. ROW GAP-24 UTILITY
   Source: frontend-nextjs/src/assets/scss/_base.scss — .row.gap-24
   Used by: template-parts/blog/trending-blogs.php → <ul class="row gap-24">
   blog.css has this commented out; homepage.css has it — defined here so
   this page does not need homepage.css loaded.
   ========================================================================= */

.row.gap-24 {
	--bs-gutter-x: 24px;
	--bs-gutter-y: 24px;
}

.row.gap-24 [class*="col-"] {
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
	margin-top: var(--bs-gutter-y);
}

/* =========================================================================
   6. TRENDING BLOGS — VIEW ALL BUTTON + SECTION TITLE
   Source: React TrendingBlogs: bottom CTA inside wrap + className="h1 section-title text-md-center"
   The View All button is emitted inside trending-blogs.php when show_bottom_cta=true,
   so it sits inside .home-recent-blog-wrap > .container and uses the wrap's bottom padding.
   ========================================================================= */

/* "View All" CTA row inside .home-recent-blog-wrap .container */
.home-recent-blog-wrap .cta.text-center {
	padding-top: 40px;
}

@media (max-width: 767px) {
	.home-recent-blog-wrap .cta.text-center {
		padding-top: 24px;
	}
}

/* btn-right-icon chevron SVG spacing */
.home-recent-blog-wrap .btn-right-icon svg {
	margin-left: 6px;
	vertical-align: middle;
}

/* Section title centred on tablet+ (React: text-md-center) */
@media (min-width: 768px) {
	.home-recent-blog-wrap .section-title {
		text-align: center;
	}
}

/* =========================================================================
   7. "I NEED HELP TO" SLIDER LAYOUT
   Source: frontend-nextjs/src/views/pages/home/NeedHelp/_need_help.scss
   Root problem: blog.css has .need-help-wrap .need-help-slider commented out,
   so the slider container has no position:relative, no padding for the arrows,
   and no width to leave room for the "I need help to" label column.
   Copied verbatim from homepage.css (same SCSS source, deployed values).
   ========================================================================= */

/* Slider track: leaves 173px for label, pads 50px right + 58px left for arrows */
.need-help-wrap .need-help-slider {
	padding: 0 50px 0 58px;
	position: relative;
	width: calc(100% - 173px);
}

.need-help-wrap .need-help-slider .slider-box {
	width: 100%;
}

@media (max-width: 1024px) {
	.need-help-wrap .need-help-slider {
		width: 100%;
		padding: 0;
	}
}

.need-help-wrap .need-help-slider .swiper-slide {
	width: auto;
	padding: 15px 0;
}

.need-help-wrap .need-help-slider .swiper-slide .help-tag__item {
	white-space: nowrap;
}

/* Navigation arrows — absolute inside the relative .need-help-slider */
.need-help-wrap .need-help-slider .help-slider-arrow {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 50%;
	margin-top: -20px;
	font-size: 24px;
	background: transparent;
	color: #dfc9b9;
	border: 2px solid #dfc9b9;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	border-radius: 100%;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.need-help-wrap .need-help-slider .help-slider-arrow:hover {
	background: #dfc9b9;
	color: #232528;
}

.need-help-wrap .need-help-slider .help-slider-arrow--left,
.need-help-wrap .need-help-slider .help-slider-arrow--left2 {
	left: 10px;
}

@media (max-width: 1280px) {
	.need-help-wrap .need-help-slider .help-slider-arrow--left,
	.need-help-wrap .need-help-slider .help-slider-arrow--left2 {
		left: -15px;
	}
}

.need-help-wrap .need-help-slider .help-slider-arrow--right,
.need-help-wrap .need-help-slider .help-slider-arrow--right2 {
	right: 0;
}

.need-help-wrap .need-help-slider .help-slider-arrow.swiper-button-disabled {
	opacity: 0;
	visibility: hidden;
}

@media (max-width: 1024px) {
	.need-help-wrap .need-help-slider .help-slider-arrow {
		display: none;
	}
}

/* =========================================================================
   8a. GRAVITY FORMS NAME FIELD (fieldset/legend)
   GF "Name" field renders as <fieldset> + <legend> (not div + label).
   Reset fieldset border and legend sizing so it matches the other fields.
   ========================================================================= */

.advertise-form-wrap .gform_wrapper.gform_id_4 fieldset.gfield,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 fieldset.gfield {
	border: 0;
	padding: 0;
	margin: 0;
}

.advertise-form-wrap .gform_wrapper.gform_id_4 fieldset.gfield legend.gfield_label,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 fieldset.gfield legend.gfield_label {
	display: block;
	float: left;
	width: 100%;
	font-size: 12px;
	line-height: 1.2;
	color: #4d4d4d;
	margin-bottom: 8px;
	font-weight: 400;
	padding: 0;
}

/* gform-grid-row inside name field — reset GF grid to full-width single input */
.advertise-form-wrap .gform_wrapper.gform_id_4 .ginput_container--name.gform-grid-row,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .ginput_container--name.gform-grid-row {
	display: block;
}

.advertise-form-wrap .gform_wrapper.gform_id_4 .ginput_container--name .gform-grid-col,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .ginput_container--name .gform-grid-col {
	display: block;
	width: 100%;
	padding: 0;
}

/* =========================================================================
   8. GRAVITY FORMS FIELD LIST RESET
   GF renders fields as <ul class="gform_fields"><li class="gfield">...</li></ul>.
   Browsers add list-style bullets + left padding by default; remove them so
   the fields render as a clean stacked list matching the React form design.
   Scoped to gform_id_4 to avoid affecting other GF forms on the site.
   ========================================================================= */

.advertise-form-wrap .gform_wrapper.gform_id_4 .gform_fields,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gform_fields {
	list-style: none;
	padding: 0;
	margin: 0;
}

.advertise-form-wrap .gform_wrapper.gform_id_4 .gfield,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gfield {
	padding-bottom: 18px;
	margin-bottom: 0;
}

/* Input type=text and type=email — must also cover input[type="subject"] fallback */
.advertise-form-wrap .gform_wrapper.gform_id_4 input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 input:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
	display: block;
	width: 100%;
	height: 45px;
	padding: 6px 12px;
	font-size: 15px;
	line-height: 1.3;
	color: #19263a;
	background-color: #ffffff;
	border: 1px solid #cdcdcd;
	border-radius: 5px;
	box-shadow: none;
	transition: border-color 0.15s ease-in-out;
	appearance: none;
	-webkit-appearance: none;
}

.advertise-form-wrap .gform_wrapper.gform_id_4 input:not([type="submit"]):not([type="file"]):focus,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 input:not([type="submit"]):not([type="file"]):focus {
	border-color: #e78125;
	box-shadow: none;
	outline: 0;
}

/* Label */
.advertise-form-wrap .gform_wrapper.gform_id_4 .gfield_label,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gfield_label {
	display: block;
	font-size: 12px;
	line-height: 1.2;
	color: #4d4d4d;
	margin-bottom: 8px;
	font-weight: 400;
}

/* Hide required asterisk — React form had no asterisks */
.advertise-form-wrap .gform_wrapper.gform_id_4 .gfield_required,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gfield_required {
	display: none;
}

/* Validation error text — reset GF gravity-theme box styling to plain inline red text */
.advertise-form-wrap .gform_wrapper.gform_id_4 .validation_message,
.advertise-form-wrap .gform_wrapper.gform_id_4 .gfield_validation_message,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .validation_message,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gfield_validation_message {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #f74641 !important;
	padding: 6px 0 0 0 !important;
	margin: 0 !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: block !important;
}

/* Error inputs/textarea — keep normal gray border (no red border, matches screenshot) */
.advertise-form-wrap .gform_wrapper.gform_id_4 .gfield_error input:not([type="submit"]):not([type="file"]),
.advertise-form-wrap .gform_wrapper.gform_id_4 .gfield_error textarea,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gfield_error input:not([type="submit"]):not([type="file"]),
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gfield_error textarea {
	border-color: #cdcdcd !important;
	background-color: #ffffff !important;
	color: #19263a !important;
}

/* File upload dropzone error state — keep normal dashed gray border */
.advertise-form-wrap .gform_wrapper.gform_id_4 .gfield_error .ginput_container_fileupload,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gfield_error .ginput_container_fileupload {
	border-color: #838383 !important;
}

/* Remove GF gravity-theme error background/box from the field row itself */
.advertise-form-wrap .gform_wrapper.gform_id_4 .gfield_error,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gfield_error {
	background: none !important;
	border: none !important;
	padding-bottom: 18px !important;
}

/* Hide the top-level "There was a problem..." validation error banner */
.advertise-form-wrap .gform_wrapper.gform_id_4 .gform_validation_errors,
.advertise-form-wrap .gform_wrapper.gravity-theme.gform_id_4 .gform_validation_errors {
	display: none !important;
}
.page-id-197220 .header-wrap header{
    background: #19263a;
    box-shadow: 0 6px 26px rgba(0, 0, 0, .25);
    -webkit-box-shadow: 0 6px 26px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 6px 26px rgba(0,0,0,.25);
}
.page-id-197220 .header-wrap header .logo a svg{
    filter: brightness(0) invert(1);
}
.page-id-197220 .menu-wrap > ul > li > a{
	color: hsla(0, 0%, 100%, .6);
}
.page-id-197220 .header-wrap header .header-right .header-search .search-block .form-control{
	background: rgba(0, 0, 0, 0);
    color: #fff;
    border-color: hsla(0, 0%, 100%, .5);
}
.page-id-197220 .header-wrap header .header-right .header-cta .login-btn{
	color: #fff;
}
.page-id-197220 .header-wrap .menu-toggle svg path{
stroke: #fff;
}

/* =========================================================================
   SUCCESS POPUP MODAL (#gp-ask-query-success-modal)
   Source: contact.css (.custom-modal.success-modal) + my-board.css (.custom-modal)
   Copied here because contact.css / my-board.css are not loaded on this page.
   ========================================================================= */

.custom-modal .modal-dialog {
	max-width: 670px;
	width: 96%;
	margin: 20px auto;
}

.custom-modal .modal-content {
	border: 0;
	border-radius: 8px;
	box-shadow: 4px 6px 32px rgba(39, 39, 39, 0.08);
}

.custom-modal .modal-body {
	padding: 32px;
	position: relative;
}

@media (max-width: 1024px) {
	.custom-modal .modal-body {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 767px) {
	.custom-modal .modal-body {
		padding-top: 34px;
	}
}

.custom-modal.success-modal .modal-dialog {
	max-width: 453px;
}

.custom-modal.success-modal .success-modal-content {
	text-align: center;
	padding: 26px 0;
}

.custom-modal.success-modal .success-modal-content .img {
	max-width: 148px;
	margin: 0 auto;
	padding-bottom: 14px;
}

.custom-modal.success-modal .success-modal-content .img img {
	width: 100%;
	height: auto;
	display: block;
}

.custom-modal.success-modal .success-modal-content .txt p {
	font-size: 22px;
	line-height: 116%;
	color: #19263a;
	font-weight: 500;
	margin-bottom: 6px;
}

.custom-modal.success-modal .success-modal-content .txt h3 {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 400;
	font-family: "DM Serif Display", -apple-system, BlinkMacSystemFont, sans-serif;
	color: #19263a;
	padding-bottom: 32px;
	margin-bottom: 0;
}

.custom-modal.success-modal .success-modal-content .cta .btn {
	border-radius: 48px;
	padding: 12px 40px;
	font-size: 16px;
	font-weight: 500;
}
#field_4_6 .ginput_container_fileupload {
    position: relative;
    border: 1px dashed #bdbdbd;
    border-radius: 6px;
    /* background: #f7f7f7; */
    padding: 50px 20px 40px;
    text-align: center;
    height: 220px;
    overflow: hidden;
}
/* Hide default input text */
#field_4_6 input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}
/* Drag text */
/* #field_4_6 .ginput_container_fileupload::before {
    content: "Drag and drop your file here";
    display: block;
    font-size: 14px;
    line-height: 24px;
    color: #7b7c7e;
    padding-bottom: 8px;
} */

/* OR text */
/* #field_4_6 .ginput_container_fileupload::after {
    content: "or";
    display: block;
    font-size: 14px;
   color: #7b7c7e;
   position: absolute;
top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
} */

/* Button */
#field_4_6 .gform_fileupload_rules {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
    font-size: 0;
}

/* #field_4_6 .gform_fileupload_rules::before {
    content: "Select File";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border: 1px solid #f58220;
    border-radius: 40px;
    color: #f58220;
    font-size: 16px;
    font-weight: 500;
    background: #fff;
    transition: all 0.3s ease;
    margin-bottom: 28px;
} */

/* Bottom text */
/* #field_4_6 .gform_fileupload_rules::after {
    content: "Upload PNG, JPG, JPEG, PDF File";
    font-size: 14px;
    color: #777;
    display: block;
} */

/* Hover */
/* #field_4_6 .ginput_container_fileupload:hover .gform_fileupload_rules::before {
    background: #f58220;
    color: #fff;
} */

/* Hide original label */
/* #field_4_6 .gfield_label {
    display: none;
} */
.advertise-form-wrap .gform_wrapper .gform_footer, .advertise-form-wrap .gform_wrapper .gform_page_footer, .advertise-form-wrap .gform_wrapper.gravity-theme .gform_footer{
	margin-top: 40px;
}
.ginput_container_fileupload .dropzone-placeholder .txt{
    font-size: 14px;
    line-height: 24px;
    color: #19263a;
    padding-bottom: 8px;
	    color: #7b7c7e;
}