/* 
 Theme Name:     TDN Fluid Child for Divi
 Author:         The Digital Navigator
 Author URI:     https://thedigitalnavigator.com 
 Template:       Divi
 Version:        1.0.14
*/ 
/*
* 
* TABLE OF CONTENT
* 
* 1.0 Html and Body
* 2.0 UI kit 
* 3.0 GravityForms
* 5.0 Footer
* 4.0 WP Simple Pay
* 5.0 WPML
* 
*/

/*
* 
* Section 1.0 Html and Body
* 
*/

/* Global CSS Variables */




/*  Typography Define Css Start  */
@font-face {
   font-family: 'Artifex Hand CF';
   src: url('./fonts/ArtifexHandCF-Regular.woff2') format('woff2'),
       url('./fonts/ArtifexHandCF-Regular.woff') format('woff'),;
   font-weight: 400;
   font-style: normal;
   font-display: optional;
}

@font-face {
   font-family: 'Artifex Hand CF';
   src: url('./fonts/ArtifexHandCF-regularitalic.woff2') format('woff2'),
       url('./fonts/ArtifexHandCF-regularitalic.woff') format('woff'),;
   font-weight: 400;
   font-style: italic;
   font-display: optional;
} 

@font-face {
   font-family: 'Artifex Hand CF';
   src: url('./fonts/ArtifexHandCF-bold.woff2') format('woff2'),
       url('./fonts/ArtifexHandCF-bold.woff') format('woff'),;
   font-weight: 700;
   font-style: normal;
   font-display: optional;
} 

@font-face {
   font-family: 'Artifex Hand CF';
   src: url('./fonts/ArtifexHandCF-bolditalic.woff2') format('woff2'),
       url('./fonts/ArtifexHandCF-bolditalic.woff') format('woff'),;
   font-weight: 700;
   font-style: normal;
   font-display: optional;
} 

@font-face {
   font-family: 'Artifex Hand CF';
   src: url('./fonts/ArtifexHandCF-Heavy.woff2') format('woff2'),
       url('./fonts/ArtifexHandCF-Heavy.woff') format('woff'),;
   font-weight: 900;
   font-style: normal;
   font-display: optional;
} 


/*---------- [Html and Body style start] ----------*/
html, body {
    max-width: 100%;
	font-family: 'Artifex Hand CF';
    overflow-x: hidden;
}

.et_pb_row_25{
	background:none !important;
}

.custom-vertical-gap {
    display: flex;
    flex-direction: column;
    gap: var(--gvid-6kfjizrteq)
}



/*---------- [Html and Body style end] ----------*/



/* FLOW ENGINE — one-time global rule
   Uses --flow-space which will be set via Divi presets (Default vs Hero). */

.flow :where(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,figure) {
  margin: 0;
  padding:0!important;
}

.flow :where(ul,ol) {
  padding-left: 1.2em;
}

.flow :where(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,figure)
  + :where(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,figure) {
  margin-top: var(--flow-space);
}





/*
* 
* Section 2.0 UI kit
* 
*/
/*---------- [UI KIT style Start] ----------*/


/* Typography CSS Start  */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Artifex Hand CF' !important;
}

/* We can use the divi presets manager and take its variables.

Here's the var values to use:

Step-4 = '--gvid-087ro228vk'
Step-5 = '--gvid-oarl13s7wo'
Step-3 = '--gvid-76jzv24181'
Step-2 = '--gvid-ere24dm206'
Step-1 = '--gvid-axb6bg5fs0'
Step-0 = '--gvid-pppc7i6h5i'
Step--1 = '--gvid-35qlfguegp'
Step--2 = '--gvid-g37kl75jsd'

Now to make it easier to use. I will create a new variable that is readable
*/

:root {
	/* Font sizes */
	--step-4: var(--gvid-087ro228vk);
	--step-5: var(--gvid-oarl13s7wo);
	--step-3: var(--gvid-76jzv24181);
	--step-2: var(--gvid-ere24dm206);
	--step-1: var(--gvid-axb6bg5fs0);
	--step-0: var(--gvid-pppc7i6h5i);
	--step--1: var(--gvid-35qlfguegp);
	--step--2: var(--gvid-g37kl75jsd);
}

:root {
  /* space values */
  --space-3xs: var(--gvid-3z4d0wgkw5);
  --space-2xs: var(--gvid-qy3h58ajn3);
  --space-xs: var(--gvid-rjbpuywnae);
  --space-s: var(--gvid-c4sj47ae6e);
  --space-m: var(--gvid-6kfjizrteq);
  --space-l: var(--gvid-fi35ligy29);
  --space-xl: var(--gvid-fkxeviqr4m);
  --space-2xl: var(--gvid-lmirbw4nx9);
  --space-3xl: var(--gvid-55eei79m73);
}

:root {
  /* Color values */
	--primary-900: #A119F9;
	--secondary-900: #EBD3FB;
	--Nautral-100: #F8F9FA;
	--Red-900: #EE304F;
	--Accent-900: #FFCF41;
	--Black:#0A0A0A;
	--White:#F2F3F4;
	--Gray-White:#F9F9FB;
}

:root {
	  /* Used for row max width instead of 40% */
	--size-fluid-350-650: var(--gvid-yp5c7iy5j1);
	/* Used for row max width instead of 70% */
	--size-fluid-350-950: var(--gvid-2gh1ae1c2b);
	  /* Used for image max-height */
	--size-fluid-350-650: var(--gvid-yp5c7iy5j1);
}


/*-----Image Size with Token-----*/
/*---
:root{
	--img-max-inline: clamp(15rem, 50vw, 100vh);
}
---*/
/*---
.et_pb_image img {
  width: 100%;
  height: auto;
  max-inline-size: var(--img-max-inline, 34rem);
  display: block;
  margin-inline: auto;
}
---*/


#main-content .et_pb_section .et_pb_text ul li::before {
  content: none !important;
}

#main-content .et_pb_section .et_pb_text ul li::before {
    content: circle !important;
}



/* ------- Button - Styling START ----- */
input[type=submit] {
   white-space: normal;
}
input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
   border: 1px solid rgba(39,112,236,.4) !important;
   border-radius: 5px !important;
   background: transparent !important;
}

/* =========================================
   Global Button Overrides  >>> You will remove this after you create the button presets.
   ========================================= */
.menu-button {
    background: #FF5733 !important;
    color: #fff !important;
}

.menu-button:hover {
    box-shadow: 0px 5px 30px 5px rgba(215, 20, 57, 0.3) !important;
    border: 2px solid #D71439 !important;
}



/*---------- [UI KIT style End] ----------*/


/* ------- Homepage - Styling START ----- */

.podcast-btn {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;        /* allows wrapping on mobile */
  gap: 15px;              /* space between buttons */

}

.podcast-btn .et_pb_button {
  flex: 0 0 auto;  /* keep natural button size */
}

/*
* 
* Section 3.0 GravityForm Edits
* We should not have list of CSS for "Home" and "contact us" like we have below, instead we should give them proper names and in the comment we can always mention the page we are using it. Currently the Gform style names below don't make it clear because we use gform1, gform2, etc. which is a specific form. But in GravityForm we can put a CSS Class name which is better, then we can style that class and assign it to the forms.
* 
* 
*/

/* Global Variables for Gravity Forms Will move this above when done */
:root {
	--form-field-bg-color: #FFFFFF;
	--form-field-outline-color: #CED4DA;
	--form-field-gap-y: 23px;
	--form-field-padding: 32px;
}


/* Global Styles for Gravity Forms */
body .gform_wrapper .gform-footer {
	justify-content: center;
	gap: 15px;
}

.gform_wrapper .gform-footer .gf-turnstile-container {
    justify-content: left;
    display: flex;
    flex-direction: row;
}

body .gform_wrapper .gform_body .gform_fields {
	row-gap: var(--form-field-gap-y);
}

body .gform_wrapper .gform_body .gform_fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body .gform_wrapper .gform_body .gform_fields select,
body .gform_wrapper .gform_body .gform_fields textarea{
	background: var(--form-field-bg-color) !important; /* We need to set this to important as gravity native styling needs to be overriden */
	outline-color: var(--form-field-outline-color);
	width: 100%;
	padding: 29px 20px;
}

body .gform_wrapper.newsletter-form_wrapper .gform_body .gform_fields input[type="email"] {
	padding: var(--form-field-padding);
	font-size: var(--step-0);
	font-family: var(--et_global_body_font);
	padding: 29px 20px;
}

body .et_pb_section .et_pb_row .gform_wrapper .gform_body .gform_fields {
	row-gap: var(--gvid-6kfjizrteq);
}

body .et_pb_section .et_pb_row .gform_wrapper .gform_body .gform_fields select:invalid {
	color: var(--gcid-body-color);
}


body .gform-theme--framework .gform-field-label {
	font-size: var(--step--2);
}

body .gform-theme--foundation #field_submit {
	row-gap: var(--form-field-gap-y);
}


body .gform_wrapper .gform_footer  input[type="submit"],
body .gform_wrapper .gform_body .gfield--type-submit  input[type="submit"]{
	background-color: var(--gcid-3dwelf2q9t) !important; /* We need to set this to important as gravity native styling needs to be overriden */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: var(--step-0) !important;
    letter-spacing: 0px !important;
    line-height: 2.63em !important; !important;
    border-top-left-radius: var(--gvid-rmww0b0xcy) !important;
    border-top-right-radius: var(--gvid-rmww0b0xcy) !important;
    border-bottom-left-radius: var(--gvid-rmww0b0xcy) !important;
    border-bottom-right-radius: var(--gvid-rmww0b0xcy) !important;
    border-width: 0px;
    border-color: #333;
    border-style: solid;
    transition-property: background-color, border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius, border-width;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
}

body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_body .gfield--type-submit input[type="submit"]:hover{
	background-color: var(--gcid-0vim1bx9i3);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-width: 0px;
    border-color: #333;
    border-style: solid;
}


/* Newsletter form CSS */

.newsletter-form .gform_fields #field_submit {
	grid-column: 1 / 6;
}

.newsletter-form .gform_fields .gfield--type-consent {
	 grid-column: span 12;
}

body .gform_wrapper .newsletter-form .gform-footer.top_label{
	display: flex;
    justify-content: flex-start;
}
	



/*
* 
* Section 3.0 GravityForm Edits END
*
* 
* 
*/


/*
* 
* 
* Section 4. Footer Start
*
* 
* 
*/

.footer-link{
	color:#000000;
	font-size:15px;
}
.footer-link a{
	color:#000000;
}
.footer-link a:hover{
	color:#a119f9;
}


/*
* 
*-----Header Styling------*
* 
* 
*/
.navmain-menu-custom.et_pb_module {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.navmain-menu-custom .et-menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important; /* prevent items from wrapping */
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.navmain-menu-custom .et-menu li {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap; /* keep text on one line */
    flex-shrink: 1 !important;
}

.navmain-menu-custom .et-menu li a {
    display: flex !important;
    align-items: center !important;
}

/* Desktop & tablet last menu item button */
.navmain-menu-custom .et-menu li:last-child a {
    background: #A119F9 !important;
    color: #F2F3F4 !important;
    padding: 20px 35px !important;
    margin-left: 15px !important; /* space from previous menu item */
    font-family: 'Artifex Hand CF', sans-serif !important;
    font-size: 20px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border-radius: 10px !important;
    border: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: max-content !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important; /* button stays full size */
}

@media (min-width: 981px) and (max-width: 1660px) {
    .navmain-menu-custom .et-menu {
        flex-wrap: nowrap !important; /* keep one row */
        justify-content: flex-start !important;
        min-width: 0 !important;
    }

    .navmain-menu-custom .et-menu li {
        flex-shrink: 1 !important; /* allow shrinking for non-button items */
    }

    .navmain-menu-custom .et-menu li:last-child a {
        padding: 15px 25px !important; /* slightly smaller button */
        flex-shrink: 0 !important;     /* button does not shrink */
    }
}

/* Hide hamburger on desktop */
.navmain-menu-custom .et_mobile_nav_menu {
    display: none !important;
}

/* Mobile hamburger alignment and fixed-width dropdown */
@media (max-width: 980px) {
    .navmain-menu-custom.et_pb_module {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        position: relative !important;
    }

    .navmain-menu-custom .et_mobile_nav_menu {
        display: flex !important;
        justify-content: flex-end !important;
        width: auto !important;
    }

    .navmain-menu-custom .mobile_nav {
        display: flex !important;
        justify-content: flex-end !important;
        width: auto !important;
    }

    .navmain-menu-custom .mobile_menu_bar {
        margin-right: 0 !important;
    }

    /* Fixed-width mobile dropdown aligned under hamburger */
    .navmain-menu-custom .et_mobile_menu {
        width: 250px !important;
        max-width: 250px !important;
        min-width: 250px !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        z-index: 9999 !important;
    }

    .navmain-menu-custom .et_mobile_menu li a {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Mobile last menu item button styling */
    .navmain-menu-custom .et_mobile_menu li:last-child a {
        background: #A119F9 !important;
        color: #F2F3F4 !important;
        padding: 15px 20px !important;
        margin: 10px !important; /* space from previous dropdown item */
        font-family: 'Artifex Hand CF', sans-serif !important;
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        border-radius: 10px !important;
        border: 0 !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 90% !important;
        cursor: pointer !important;
        transition: all 0.25s ease-in-out !important;
        white-space: nowrap !important;
    }
}

/* Small mobile adjustments for 480px */
@media (max-width: 480px) {
    .navmain-menu-custom .et-menu {
        flex-wrap: nowrap !important;
        overflow-x: hidden; /* prevent scroll */
    }

    .navmain-menu-custom .et-menu li {
        flex-shrink: 1 !important;
    }

    .navmain-menu-custom .et-menu li a {
        padding: 10px 15px !important;
        font-size: 16px !important;
        line-height: 20px !important;
    }

    .navmain-menu-custom .et-menu li:last-child a {
        padding: 12px 18px !important;
        font-size: 16px !important;
        line-height: 20px !important;
    }

    /* Fixed-width mobile dropdown aligned under hamburger */
    .navmain-menu-custom .et_mobile_menu {
        width: 250px !important;
        max-width: 250px !important;
        min-width: 250px !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        z-index: 9999 !important;
    }

    .navmain-menu-custom .et_mobile_menu li a {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .navmain-menu-custom .et_mobile_menu li:last-child a {
        padding: 12px 18px !important;
        font-size: 16px !important;
    }
}



/*---------- Accordion Style Start ---------*/
.accordion {
  max-width: 800px;
  margin: auto;
  font-family: serif;
}

.accordion-item {
  border-bottom: 1px solid #d47bff;
}

.accordion-header {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0 10px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--et_global_heading_font);
  font-variant: small-caps;
  font-size: var(--gvid-axb6bg5fs0)!important;
  letter-spacing: var(--gvid-6o52hvsi2x);
  line-height: var(--gvid-mn61oln405);
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}

.accordion-header .icon {
  font-size: 60px !important;
  line-height: 70%!important;
  font-weight: 400 !important;
  color: #EE304F;
  width: 28px;
}

.accordion-content {
  display: none;
  padding: 0 0 20px 40px;
  font-family: 'Artifex Hand CF', sans-serif !important;
  font-size: 18px !important;
  line-height: 140%;
  color: #212529;
}

.accordion-item.active .accordion-content {
  display: block;
}

/*---------- Accordion Style End ---------*/




/*---------------  Button Old Style


.et_pb_button.button-cta-figma,
.et_pb_button.button-primary-figma,
.et_pb_button.button-secondary-figma,
.et_pb_button.button-tertiary-figma {
    padding: 20px 35px !important;
    font-family: 'Artifex Hand CF', sans-serif !important;
    font-size: 20px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border-radius: 10px !important;
	border: 0px;
	width: max-content;
}


.et_pb_button.button-primary-figma {
    background: #A119F9 !important;
    color:#F2F3F4 !important;
}



.et_pb_button.button-secondary-figma {
    background: #121212 !important;
    color: #F2F3F4 !important;
}


.et_pb_button.button-tertiary-figma {
    background: #F2F3F4 !important;
    color: #A119F9 !important;
}

a.et_pb_button.et_pb_button_0_tb_header.button-cta-figma.small {
   padding: .1em 1.25em !important;
   width: auto;
   border-radius: 5px !important;
}

-------*/

.custom-icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/*-------List Icon Color----------- */

/* Primary 900 */
.Primary900 .fa-li i {
  color: var(--primary-900)!important;
}
.Nautral-100 .fa-li i {
  color: var(--Nautral-100)!important;
}
.Red-900 .fa-li i {
  color: var(--Red-900)!important;
}

/*-------List Icon Color End----------- */

.gf-turnstile-container {
	overflow: unset;
}
/*
* 
* Section 5.0 WP Simple Pay Start
*
* 
* 
*/


.simpay-embedded-form-wrap .simpay-field-wrap input[type]:not([type=radio]):not([type=checkbox]) {
	height: var(--space-l); 
	font-size: var(--step-0); 
	width: 90%; 
	background-color: var(--gcid-8cj2uc6lue) !important; 
	color: var(--gcid-14ce8enzep) !important;
}

.simpay-embedded-form-wrap .simpay-field-wrap input[type="checkbox"] {
	height: var(--space-l); 
	width: var(--space-l);
	margin-right: var(--space-s);
}

.simpay-btn.simpay-checkout-btn {
    padding: var(--space-xs) var(--space-2xl);
    background-color: var(--primary-900);
    border: none !important;
    color: #f9f9fb !important;
    border-radius: var(--gvid-rmww0b0xcy);
    font-size: var(--step-0);
    
}

}
/*
* 
* Section 6.0 WPML
*
* 
* 
*/

/* WMPL Fix Downward Carrot Placement and Remove Border */
#menu-main-menu li.wpml-ls-item a {
	border: 0 !important;
}

#menu-main-menu li.wpml-ls-item a:after {
	left: 60px !important;
}

body #field_8_3 {
	order: unset;
}

.chosen-container .chosen-search {
	display: none !important;
}



.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li
{
	width: 100% !important;
	margin-top: 4px !important;
}

.step-2, .step-3 {
  display: none;
}