/*
 Theme Name:   Demo GbPro Main
 Theme URI:    https://generatepress.com
 Description:  GP Childtheme für die Multisite GBPro-Hauptseite
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


/* ================= INHALTSVERZEICHNIS =============================
 
  1. Global Styles: Inner Container Paddings / Buttons / Text-Stile aus Blueprint
  2. Utility Classes: ab 280
  3. Nützliches für Texte und Links
  4. Klickbare Container
  5. Stile für Kacheln
  6. Lightbox Photoswipe
  7. Wireframes
  8. Fluent Forms
  
 ================================================================== */







/* ==================================== 1. GLOBAL STYLES =========================================== */



/********** Inner Container Paddings **********/

.padding-page-heroes {
	padding: 8.125rem 2rem;
	margin: 0 auto;
	max-width: 1264px;
}
/* Smartphone */
@media (max-width: 768px) {
.padding-page-heroes { 
	padding: 6.25rem 1rem; }
}

.padding-l {
	padding: 11.25rem 2rem;
	margin: 0 auto;
	max-width: 1264px;
}
/* Smartphone */
@media (max-width: 768px) {
.padding-l { padding: 9rem 1rem; }
}

.padding-m-tablet-75 {
	padding: 8.75rem 2rem;
	margin: 0 auto;
	max-width: 1264px;
}
/* Tablet: Breite 75% */
@media (min-width: 769px) and (max-width: 1024px) {
.padding-m-tablet-75 { width: 75%; }
}
/* Smartphone 100%*/
@media (max-width: 768px) {
.padding-m-tablet-75 { padding: 6rem 1rem; width: 100%; }
}


.padding-m-tablet-100 {
	padding: 8.75rem 2rem;
	margin: 0 auto; 
	max-width: 1264px;
}
/* Smartphone */
@media (max-width: 768px) {
.padding-m-tablet-100 { padding: 6rem 1rem; }
}


.padding-s {
	padding: 2rem;
	margin: 0 auto;
	max-width: 1264px;
}
/* Smartphone */
@media (max-width: 768px) {
.padding-s { padding: 2rem 1rem; } 
}


.padding-sides-only {
	padding: 0 2rem;
	margin: 0 auto;
	max-width: 1264px;
}
/* Smartphone */
@media (max-width: 768px) {
.padding-sides-only { padding: 0 1rem; } 
}



/**** Sections ****/
.section-featured {
	border-radius:.25rem;
	margin: 0 auto;
    max-width: 1480px;
    width: calc(100vw - 64px);
}
@media(max-width:767px) {
    .section-featured {
        border-radius: 0;
        width:100%;
    }
}

.section-bg-gradient {
  background-blend-mode: normal;
  background-image: linear-gradient(135deg,rgb(51,31,153) 0%,rgb(18,45,179) 52%,rgb(0,102,255) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.section-bg-gradient-dark {
  background-blend-mode: hard-light;
  background-image: linear-gradient(135deg,rgb(51,31,153,0.3) 0%,rgb(18,45,179,0.3) 52%,rgb(0,102,255,0.3) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	/*-webkit-filter: blur(1px);
    filter: blur(1px);*/
}





/***************** Buttons ******************/

.button-primary {
  display: inline-flex;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  padding: 12px 24px;
  margin-top: 10px;
  border-radius: 2px;
  background-color: var(--accent-100);
  color: var(--base-100);
  transition: all 0.5s ease;
}

.button-primary:hover, .button-primary:active, .button-primary:focus {
  background-color: var(--accent-200);
  color: var(--base-100);
}

.button-secondary {
  display: inline-flex;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  padding: 12px 24px;
  margin-top: 10px;
  border-radius: 2px;
  background-color: var(--base-100);
  color: var(--accent-200);
  transition: all 0.5s ease;
}

.button-secondary:hover, .button-secondary:active, .button-secondary:focus {
  background-color: var(--accent-200);
  color: var(--base-100);
}

.button-tertiary {
  display: inline-flex;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  padding: 4px 14px;
  margin-top: 10px;
  border-radius: 2px;
  background-color: var(--accent-100);
  color: var(--base-100);
  transition: all 0.5s ease;
}

.button-tertiary:hover, .button-tertiary:active, .button-tertiary:focus {
  background-color: var(--accent-200);
  color: var(--base-100);
}

.button-text-icon {
  flex-direction: row-reverse;
  font-size: 1rem;
  font-weight: 700;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-top: 10px;
  border-bottom: 1px solid var(--accent-100);
  color: var(--accent-100);
  transition: all 0.5s ease;
}
.button-text-icon:hover {
  border-bottom: 1px solid var(--accent-200);
  color: var(--accent-200);
}

.button-text-icon .gb-icon {
  transition: all 0.3s ease-out;
}
/* Icon bewegt sich nach rechts bei hover */
.button-text-icon:hover .gb-icon {
  padding-left: .4em;
}

.button-navigation {
  display: inline-flex;
  justify-content: center;
  font-size: .8rem;
  letter-spacing: .1em;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 16px;
  border-radius: 2px;
  background-color: var(--accent-100);
  color: var(--base-100);
  transition: all 0.5s ease;
}


/************* Text-Stile aus Blueprint *************/

.pretitle {
  display: flex;
  align-items: center;
  font-size: .9rem;
  line-height: 1.1em;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 0 2px 16px;
  margin-bottom: 24px;
  border-left: 4px solid var(--accent-200);
  color: var(--base-100);
}

.list-text-with-icon {
  display: flex;
  align-items: flex-start;
  column-gap: 12px;
  font-size: 1.1rem;
  margin-left: 16px;
  margin-bottom: 12px; /* hebt den normalen Zeilenabstand von 1.5rem auf */ 
}
.list-text-with-icon .gb-icon {
  line-height: 0;
  color: var(--accent-300);
  padding-top: 1px;
}
.list-text-with-icon .gb-icon svg {
  width: 1.3em;
  height: 1.3em;
}

.pricing-table-text-with-icon {
  display: flex;
  align-items: flex-start;
  column-gap: 12px;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 12px; /* hebt den normalen Zeilenabstand von 1.5rem auf */ 
  color: var(--base-200);
}
.pricing-table-text-with-icon .gb-icon {
  line-height: 0;
  color: var(--accent-200);
  padding-top: 4px;
}
.pricing-table-text-with-icon .gb-icon svg {
  width: 1.2em;
  height: 1.2em;
}





/* ==================================== 2. UTILITY CLASSES =========================================== */

/********** Font Weight **********/
.text-500 {
    font-weight:500
}
.text-600 {
    font-weight:600
}
.text-700 {
    font-weight:700
}
.text-800 {
    font-weight:800
}



/********** Text Size **********/
.text-xxs {
    font-size: .75rem; /* 12px */
    line-height:1.6
}
.text-xs {
    font-size: .9375rem; /* 15px */
    line-height:1.6
}
.text-s {
    font-size: 1rem; /* 16px */
    line-height:1.5em
}
.text-m {
    font-size: 1.0625rem; /* 17px */
    line-height:1.5em
}
.text-l {
    font-size: 1.25rem; /* 20px */
    line-height:1.5em
}
@media (max-width:767px) {
    .text-l {
        font-size: 1.125rem;
        line-height:1.5
    }
}
.text-xl {
    font-size: 1.375rem; /* 22px */
    line-height:1.4em
}
@media (max-width:767px) {
    .text-xl {
        font-size: 1.2375rem;
        line-height:1.5
    }
}
.text-xxl {
    font-size: 1.5rem; /* 24px */
    line-height:1.4em
}
@media (max-width:767px) {
    .text-xxl {
        font-size: 1.35rem;
        line-height:1.5
    }
}



/********** Headline Size **********/
.h1-xxl {
    font-size: 4.5rem; /* 72px */
    line-height: 1.125em
}
@media (max-width:1024px) {
    .h1-xxl {
        font-size: 3.8rem
    }
}
@media (max-width:767px) {
    .h1-xxl {
        font-size: 3rem
    }
}

.h1-xl {
    font-size:4rem; /* 64px */
    line-height: 1.125em
}
@media (max-width:1024px) {
    .h1-xl {
        font-size: 3.4rem
    }
}
@media (max-width:767px) {
    .h1-xl {
        font-size:2.8rem
    }
}

.h1-l {
  font-size: 3.4rem; /* 55px */
  line-height: 1.2em;
}
@media (max-width: 1024px) {
    .h1-l {
        font-size:3rem;
    }
}
@media (max-width:767px) {
    .h1-l {
        font-size: 2.6rem;
    }
}

.h2-l {
    font-size: 3rem; /* 48px */
    line-height:1.2em
}
@media (max-width: 1024px) {
    .h2-l {
        font-size:2.6rem
    }
}
@media (max-width:767px) {
    .h2-l {
        font-size:2.2rem
    }
}

.h2-s {
    font-size: 1.75rem; /* 28px */
    line-height:1.35em
}
@media (max-width:767px) {
    .h2-s {
        font-size:1.4rem
    }
}

.h3-l {
    font-size: 1.75rem; /* 28px */
    line-height:1.4em
}
@media (max-width:1024px) {
    .h3-l {
        font-size:1.575rem
    }
}
@media (max-width:767px) {
    .h3-l {
        font-size:1.4rem;
        line-height:1.4
    }
}


/********** Zeilenhöhe **********/
.lh-15 {
	line-height: 1.5em;
}
.lh-16 {
	line-height: 1.6em;
}




/********** Aspect Ratio **********/
.ar-16-10 {
    aspect-ratio: 16/10;
	object-fit: cover;
}
.ar-16-9 {
    aspect-ratio: 16/9;
	object-fit: cover;
}
.ar-9-16 {
    aspect-ratio: 9/16;
	object-fit: cover;
}
.ar-4-3 {
    aspect-ratio: 4/3;
	object-fit: cover;
}
.ar-1-1 {
	aspect-ratio: 1/1;
	object-fit: cover;
}
.ar-3-2 {
    aspect-ratio: 3/2;
	object-fit: cover;
}

/********** Margin Bottom **********/
.margin-bot-none {
    margin-bottom:0
}
.margin-bot-sm {
    margin-bottom:.5rem
}
.margin-bot-md {
    margin-bottom:1rem
}
.margin-bot-lg {
    margin-bottom:3.5rem
}
.margin-bot-xl {
    margin-bottom:4.5rem
}

/********** Round Corners **********/
.round-corners {
	border-radius:.25rem;
}

/* ==================================== 3. NÜTZLICHES FÜR TEXTE UND LINKS =========================================== */

/* remove bottom margin on last paragraph or list in container */
.gb-container p:last-child:last-of-type,
.gb-container ul:last-child:last-of-type {
  margin-bottom: 0px;
}

/* page and post hyperlinks */
.content-area :is(p, li ) a {
  font-weight: 500;
  color: var(--accent-100);
  border: var(--accent-100);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: 0px;
}
.content-area :is(p, li ) a:hover {
  color: var(--accent-400);
  border: var(--accent-400);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

/* GB button line height override */
.gb-button {
	line-height: 1.5em;
}

/* sidebar categories list style */
.wp-block-categories {
  list-style: none;
  margin-left: unset;
}

/* drop sidebar below content on tablet */
@media (max-width: 1024px) {
  .site-content {
    flex-direction: column;
  }
	.site-content .content-area {
		width: 100%;
	}
	/** right-sidebar on tablet ist nur 50% breit und sitzt zentriert **/
	.site-content .is-right-sidebar {
       width: 50%;
	   margin-right: auto;
	   margin-left: auto;
  }
}
/** right-sidebar on mobile ist wieder 100% breit **/
@media (max-width:767px) {
	.site-content .is-right-sidebar {
    width: 100%;
  }
    
}

/* Headlines h2, h3, h4, die direkt auf ein p, ul oder ol folgen (siblings), 
 * bekommen einen hohen margin-bottom */
.single-post :is(p, ul, ol) + :is(h2, h3, h4) {
  margin-top: 2.5rem;
}

/* :is ist eine Kurzform für diese Schreibweise: */
/*.single-post p + h2, .single-post p + h3, .single-post p + h4,
.single-post ul + h2, .single-post ul + h3, .single-post ul + h4,
.single-post ol + h2, .single-post ol + h3, .single-post ol + h4 {
	margin-top: 2.5rem;
} */

/* wp search block style */
.wp-block-search__button.has-icon {
  background-color: var(--accent-100);
  border-radius: 2px;
	transition: all 0.5s ease 0s;
}
.wp-block-search__button.has-icon:hover {
  background-color: var(--accent-200);
}
.wp-block-search__button svg {
  min-height: 1.6em;
  min-width: 1.6em;
  vertical-align: text-bottom;
}

input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea {
  border: 2px solid var(--base-300);
  border-radius: 0;
  padding: 10px 15px;
  max-width: 100%;
}

/* footer navigation block link hover color */
.wp-block-navigation li:hover {
  color: var(--accent-200);
}

/* beseitigt den grauen Hintergrund 
 * hinter dem Hamburger-Icon */
.mobile-menu-control-wrapper .menu-toggle, 
.mobile-menu-control-wrapper .menu-toggle:hover, 
.mobile-menu-control-wrapper.toggled .menu-toggle {
    background-color: transparent !important;
}

/****** Header wird mit feiner Linie abgegrenzt *******/
/*body header.site-header {
	border-bottom: 1px solid #ededed;
}*/



/* ========================================= 4. KLICKBARE CONTAINER ================================================ */

/* Vorsicht! Es gibt ein echtes Problem, wenn man innerhalb
 * dieses clickable-Containers ein Element setzt, welches man mit z-index bearbeiten muss
 * Dann funktioniert plötzlich die ganze Klickbarkeit nicht mehr! Und es hilft auch nichts,
 * wenn man danach den z-index wieder entfernt. Der Klick-Effekt bleibt dauerhaft verloren.
 * 
 * Wenn man den overlay-Effekt verwenden will (Bild hat im Urzustand 0,5 Deckkraft, dann soll die
 * Deckkraft sich bei hover nochmal verringern, s.u.) dann müsste man aber den z-index der Headline ändern,
 * weil diese sonst transparent wirkt. Das bringt Probleme für die Gesamt-Klickbarkeit des Containers */

.gb-container.clickable {
    position: relative;
}
.gb-container.clickable a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*z-index: 999;*/
}

/* ========================================== 5. STILE FÜR KACHELN ================================================== */

/* Dark overlay für Projekte-Thumbnails: Filter brightness 
   wird auf das image angewendet, welches im Container image-container-brightness liegt */

.image-container-brightness img {
  filter: brightness(100%);
  transition: all 0.3s ease;
}
.image-container-brightness:hover img {
  filter: brightness(60%);
  transition: all 0.3s ease;
}
/* Ende Dark overlay */



/* ========================================= 6. LIGHTBOX PHOTOSWIPE ================================================= */



/* padding für die bottom-bar */
.pswp__caption, .pswp__caption__exif {
    padding-bottom: .7em;
    padding-top: .7em;
}
/* Text in der bottom-bar */
.pswp__caption__text {
	font-size: 1em;
	letter-spacing: .02em;
	color: #fff;
}
/* Icon in der bottom-bar */
.pswp__caption__text > .gb-icon {
	padding: 0 12px 0 0;
	color: #fff;
}
.pswp__caption__text > .gb-icon svg {
    fill: currentColor; /* holt sich die Farbe aus dem umliegenden Element (hier .gb-icon) und färbt damit das svg */
}
/* Overlay in der bottom-bar */
.pswp__dynamic-caption--overlay {
    position: absolute !important;
    bottom: 0;
    top: initial;
    text-align: center;
    background: rgba(45,45,45,1);
	padding-top:0;
}

/* Hintergrundfarbe der Box */
.pswp__bg {
   background: #404040 !important;
}

/* transparenter BG für top-bar */
/* .pswp__top-bar, .pswp__caption {
      background-color: rgba(64, 64, 64, 0.2) !important;
}*/


/* Ausblenden der BU auf der Seite selbst - nur sichtbar in der Lightbox. */
.image-container-brightness figcaption.gb-headline.caption {
	display: none;
}




/* ============================================= 7. WIREFRAMES ======================================================= */

/************ CONTAINER *************/
.gb-container-outer-dark {
  background-color: var(--base-800);
}
.gb-container-outer-light {
  
}
.gb-container-inner {
  max-width: 1264px;
  padding: 140px 32px;
  margin-right: auto;
  margin-left: auto;
}
.gb-container-inner-xl {
  max-width: 1264px;
  padding: 220px 32px;
  margin-right: auto;
  margin-left: auto;
}

/********** HEADLINES **************/
.gb-headline-preheadline {
  font-size: 14px;
  line-height: 1em;
  letter-spacing: .1em;
  font-weight: 700;
	margin-bottom: -3px;
  text-transform: uppercase;
  color: var(--base-400);
}
.gb-headline-preheadline-xl {
  font-size: 14px;
  line-height: 1em;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 30px;
  color: var(--base-400);
}
.gb-headline-bottom-margin {
  margin-bottom: 40px;
}
.gb-headline-small-bold {
  font-weight: 600;
	font-size: 17px;
}

/********** BUTTONS ***************/

/********** Button Primary ********/
a.gb-button-primary {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 3px solid var(--accent-100);
  background-color: var(--accent-100);
  color: var(--base-0);
}
a.gb-button-primary:hover, 
a.gb-button-primary:active, 
a.gb-button-primary:focus {
  border-color: var(--accent-100);
  background-color: transparent;
  color: var(--accent-100);
}
a.gb-button-primary .gb-icon {
  padding-left: .5em;
}
a.gb-button-primary {
  transition: all .5s ease;
}

/********** Primary Center ********/

a.gb-button-primary-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  font-size: 15px;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 18px;
  margin-right: auto;
  margin-left: auto;
  border: 3px solid var(--accent-100);
  background-color: var(--accent-100);
  color: var(--base-0);
}
a.gb-button-primary-center:hover, 
a.gb-button-primary-center:active, 
a.gb-button-primary-center:focus {
  border-color: var(--accent-100);
  background-color: transparent;
  color: var(--accent-100);
}
a.gb-button-primary-center .gb-icon {
  padding-left: .5em;
}
a.gb-button-primary-center {
  transition: all .5s ease;
}

/********** Button Secondary ********/

a.gb-button-secondary {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 3px solid var(--accent-100);
  color: var(--accent-100);
}
a.gb-button-secondary:hover, 
a.gb-button-secondary:active, 
a.gb-button-secondary:focus {
  border-color: var(--accent-100);
  background-color: var(--accent-100);
  color: var(--base-0);
}
a.gb-button-secondary .gb-icon {
  padding-left: .5em;
}
a.gb-button-secondary {
  transition: all .5s ease;
}

/********** Secondary Center ********/

a.gb-button-secondary-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  font-size: 15px;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 18px;
  margin-right: auto;
  margin-left: auto;
  border: 3px solid var(--accent-100);
  color: var(--accent-100);
}
a.gb-button-secondary-center:hover, 
a.gb-button-secondary-center:active, a.gb-button-secondary-center:focus {
  border-color: var(--accent-100);
  background-color: var(--accent-100);
  color: var(--base-0);
}
a.gb-button-secondary-center .gb-icon {
  padding-left: .5em;
}
a.gb-button-secondary-center {
  transition: all .5s ease;
}

/**** Button Small ********/

a.gb-button-small {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 3px solid var(--accent-100);
  background-color: transparent;
  color: var(--accent-100);
}
a.gb-button-small:hover, 
a.gb-button-small:active, 
a.gb-button-small:focus {
  border-color: var(--accent-100);
  background-color: var(--accent-100);
  color: var(--base-0);
}
a.gb-button-small {
  transition: all .5s ease;
}
/****** Button underline *******/

a.gb-button-underline {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  letter-spacing: .08em;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  color: var(--base-0);
}
a.gb-button-underline:hover, 
a.gb-button-underline:active, 
a.gb-button-underline:focus {
  border-bottom: 1px solid transparent;
}

/*a.gb-button-underline .gb-icon {
  padding-left: .5em;
}
.gb-button-underline {
  transition: all .5s ease;
}*/

.gb-button-underline .gb-icon {
	padding-left: .5em;
    transition: all .5s ease-out;
}
.gb-button-underline:hover .gb-icon {
    padding-left: .8em;
}

.button-animated-icon .gb-icon {
    transition: all 0.5s ease;
}
.button-animated-icon:hover .gb-icon {
    padding-left: .8em;
}

/* ========================================= 8. FLUENT FORMS STYLES ================================================== */

/* label style */
.fluentform .frm-fluent-form .ff-el-input--label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--base-800);
}

/* field style */
.fluentform .frm-fluent-form .ff-el-form-control {
  background-color: var(--base-0);
  color: var(--base-900);
  border: 1px solid var(--base-300);
  border-radius: 2px;
  font-size: 1rem;
  line-height: 1.7rem;
  padding: 0.69rem 1.5rem;
}

/* focus field style */
.fluentform .frm-fluent-form .ff-el-form-control:focus {
  border: 1px solid var(--accent-100);
  outline: none;
}

/* placeholder text style */
.fluentform .frm-fluent-form .ff-el-form-control::placeholder {
  color: var(--base-800);
  font-size: 1rem;
}

/* placeholder focus text style */
.fluentform .frm-fluent-form .ff-el-form-control:focus::placeholder {
  color: var(--base-800);
}

/* DSGVO Checkbox Label */
.fluentform .ff-el-form-check-label > span {
  font-size: .95rem;
}

/* button style */
.fluentform .frm-fluent-form .ff-btn-submit {
  background-color: var(--accent-100);
  border: 1px solid var(--accent-100);
  color: var(--base-0);
  opacity: 1;
  border-radius: 2px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.69rem;
  padding: 0.69rem 1.5rem;
  transition: all 0.5s ease 0s;
}

/* button hover style */
.fluentform .frm-fluent-form .ff-btn-submit:hover {
  background-color: var(--accent-200);
  border: 1px solid var(--accent-200);
  color: var(--base-0);
}

/* full width buttons */
/*form.fluent_form_3 .ff-btn-submit, form.fluent_form_4 .ff-btn-submit {
	width: 100%;
}*/

/* form error text style */
.fluentform .ff-el-is-error .text-danger {
  font-size: .9rem !important;
}

/* top align email form */
.frm-fluent-form .ff-t-cell .ff_submit_btn_wrapper_custom {
  margin-top: 0px !important;
}

/* success message style */
.fluentform .ff-message-success {
  position: relative;
  border: none;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: var(--base-900);
  padding: 0px;
  margin-top: 1.25rem;
}