/*
 Theme Name: TLM Medical - Dr. Jones
 Description: Divi Child Theme
 Author: CoBuild
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */
h1.hero {    font-size: 50px;
    font-weight: 500;
    margin: 20px 0;
    line-height: 1.4;
    padding: 10px 0;
    background-image: -webkit-gradient(linear,0% 0%,25% 100%,from(#07c0f2),to(#226f8c));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
    
    
root: {
	
--clr-primary-a0: #ffffff;
--clr-primary-a10: #def2fd;
--clr-primary-a20: #bbe5fa;
--clr-primary-a30: #94d9f8;
--clr-primary-a40: #67ccf5;
--clr-primary-a50: #07bff2;
--clr-primary-a60: #1d96bc;
--clr-primary-a70: #216e8a;
--clr-primary-a80: #1e495a;
--clr-primary-a90: #15272e;
--clr-primary-a100: #000000;

 /** Examples */ 
.bg-primary {
 color: var(--clr-primary-a50); 
 background-color: var(--clr-primary-a10); 
}

}


/* Contact Form Ninja Forms */
/* Contact Form Styling with CSS Variables */

:root {
  /* Colors */
  --form-bg-color: #e6f2f9;
  --primary-color: #4d7a9c;
  --primary-color-dark: #3c6585;
  --text-color: #333;
  --input-text-color: #555;
  --input-bg-color: rgba(255, 255, 255, 0.8);
  --error-color: #e74c3c;
  
  /* Spacing */
  --form-padding: 50px;
  --input-padding: 18px 20px;
  --field-margin: 20px;
  
  /* Sizes */
  --form-max-width: 800px;
  --border-radius-large: 20px;
  --border-radius-button: 30px;
  --border-radius-input: 25px;
  --button-min-width: 200px;
  --textarea-min-height: 200px;
  
  /* Font sizes */
  --heading-font-size: 36px;
  --input-font-size: 16px;
  --button-font-size: 18px;
  --label-font-size: 18px;
  --error-font-size: 14px;
  
  /* Shadows */
  --form-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  --button-shadow: 0 3px 10px rgba(77, 122, 156, 0.3);
  --input-focus-shadow: 0 0 8px rgba(77, 122, 156, 0.3);
}

/* Form container */
.nf-form-wrap {
  max-width: var(--form-max-width);
  margin: 0 auto;
}

/* Hide the "Fields marked with * are required" text */
.nf-form-fields-required {
  display: none;
}

/* Form fields general styling */
.nf-field-element input,
.nf-field-element textarea {
  width: 100%;
  padding: var(--input-padding);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius-input);
  background-color: var(--input-bg-color);
  font-size: var(--input-font-size);
  color: var(--input-text-color);
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Textarea specific height */
.nf-field-element textarea {
  min-height: var(--textarea-min-height);
  resize: vertical;
  padding-top: 20px;
}

/* Focus states */
.nf-field-element input:focus,
.nf-field-element textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: var(--input-focus-shadow);
  background-color: #fff;
}

/* Labels */
.nf-field-label label {
  font-size: var(--label-font-size);
  color: var(--primary-color);
  margin-bottom: 10px;
  display: none;  /* Hide labels as they appear as placeholders */
}

/* Placeholder styling */
.nf-field-element input::placeholder,
.nf-field-element textarea::placeholder {
  color: var(--primary-color);
  opacity: 0.7;
}

/* Hide asterisk for required fields */
.ninja-forms-req-symbol {
  display: none;
}

/* Submit button */
.submit-wrap input {
  background-color: var(--primary-color);
  color: white;
  padding: 15px 40px;
  border: none;
  border-radius: var(--border-radius-button);
  font-size: var(--button-font-size);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  float: right;
  min-width: var(--button-min-width);
  text-align: center;
  box-shadow: var(--button-shadow);
}

.submit-wrap input:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(77, 122, 156, 0.4);
}

/* Field spacing */
.nf-field-container {
  margin-bottom: var(--field-margin);
}

/* Field container */
.nf-form-content {
  padding: 10px 0;
}

/* Field wrapper */
.field-wrap {
  position: relative;
}

/* Error messages */
.nf-error-msg {
  color: var(--error-color);
  font-size: var(--error-font-size);
  margin-top: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  :root {
    --form-padding: 25px;
  }
  
  #nf-field-4_1 {
    width: 100%;
    float: none;
  }
}

/* Hide honeypot field */
.nf-form-hp {
  display: none;
}

/* Error field highlighting */
.nf-error .nf-field-element input, 
.nf-error .nf-field-element textarea {
  border-color: var(--error-color);
}

/* Custom placeholder for Name field */
#nf-field-1_1::placeholder {
  content: "Name";
}

/* Custom placeholder for Email field */
#nf-field-2_1::placeholder {
  content: "Email Address";
}

/* Custom placeholder for Message field */
#nf-field-3_1::placeholder {
  content: "Message";
}

.nf-response-msg {background:#efefefba; padding:1.25rem;margin-bottom: 1em;border-radius: 2rem;color:#333}
.nf-response-msg p:first-child {font-weight: 600}

@media only screen and (max-width: 980px) {
    .et_pb_menu_0_tb_header, .et_pb_menu_0_tb_header .sub-menu {
        box-shadow: 0px !important;
    }
}