/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://example.com/
 Description:  Child theme for Hello Elementor
 Author:       Your Name
 Template:     hello-elementor
 Version:      1.0.0
*/

/* Custom CSS goes below */
/* Form wrapper styling */
.custom-contact-form-box {
    padding: 25px;
    background: #ffffff;
    border-left: 6px solid #ff0000;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    max-width: 600px;
}
.custom-contact-form-box label{
	display:block;
}
/* Label styling */
.custom-contact-form-box label {
    font-weight: bold;
    color: #000;
    font-size: 15px;
}

/* Input + Select fields */
.custom-contact-form-box input[type="text"],
.custom-contact-form-box input[type="email"],
.custom-contact-form-box input[type="tel"],
.custom-contact-form-box select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: 0.3s;
    font-size: 15px;
}

/* Focus effect */
.custom-contact-form-box input:focus,
.custom-contact-form-box select:focus {
    border-color: #ff0000;
    box-shadow: 0 0 5px rgba(255,0,0,0.3);
    outline: none;
}

/* Submit Button */
.custom-contact-form-box input[type="submit"] {
    background: #ff0000;
    color: #fff;
    border: none;
    padding: 14px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    transition: 0.3s;
    text-transform: uppercase;
}

/* Button hover */
.custom-contact-form-box input[type="submit"]:hover {
    background: #cc0000;
}

/* Spacing */
.custom-contact-form-box p {
    margin-bottom: 18px;
}

/* Placeholder styling */
.custom-contact-form-box input::placeholder {
    color: #888;
}

/* Response message */
.custom-contact-form-box .wpcf7-response-output {
    margin-top: 15px;
    border-radius: 4px;
    padding: 10px 15px;
}

.review-button {
  background: #000;
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}


.custom-post-card{
	flex: 1 1 30%; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease; border: 1px solid #eee;
}
   .custom-post-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            }
.register-button button.single_add_to_cart_button.button.alt {
    /* Base styles */
    background-color: black; /* Solid black background */
    color: white; /* White text for contrast */
    border: none; /* Remove default border */
    padding: 12px 25px; /* Adjust padding as needed */
    font-size: 16px; /* Adjust font size */
    font-weight: 600; /* Make text bold */
    cursor: pointer; /* Indicate it's clickable */
    border-radius: 5px; /* Slightly rounded corners */
    transition: all 0.3s ease; /* Smooth transition for hover effects */

  box-shadow:3px 3px 5px 3px #FF0000;
}

.register-button button.single_add_to_cart_button.button.alt:hover {
    /* Hover styles */
    background-color: #333; /* Slightly lighter black on hover for feedback */
    /* Red box shadow that slightly spreads */
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.7); /* More intense red shadow, more spread */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Optional: Focus state for accessibility */
.register-button button.single_add_to_cart_button.button.alt:focus {
    outline: 2px solid #ff0000; /* Red outline for keyboard focus */
    outline-offset: 2px;
}
/* Make checkboxes inline */
.hear-about-us-options .inline-checkbox {
    display: inline-block !important;
    margin-right: 20px;
}

.hear-about-us-options .form-row .optional {
    display:none;
}

#customer_details h2, #customer_details h3 {
  color: #000;
  border-bottom: 2px solid #d00; /* red line */
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.woocommerce-billing-fields__field-wrapper .form-row {
  margin-bottom: 15px;
}

.trusted-section {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  text-align: center;
}

.trusted-section img {
	   
    width: 20px;
    height: 20px;
}

.trusted-section h5
{    font-size: 16px;
	    text-align: start;
	margin:unset;
}


.driving-info-section {
  background: #f9f9f9;
  padding: 60px 30px;
  border-radius: 10px;
  line-height: 1.7;
}

.driving-info-section h2 {
  color: #c1272d;
  font-size: 28px;
  margin-bottom: 15px;
}

.driving-info-section h3 {
  color: #111;
  margin-top: 25px;
  font-size: 20px;
}

.driving-info-section p,
.driving-info-section ul {
  color: #333;
  font-size: 16px;
}

.driving-info-section ul {
  list-style: disc;
  padding-left: 25px;
}

.driving-info-section hr {
  margin: 40px 0;
  border: 0;
  border-top: 2px solid #eee;
}

/* Ensure all course cards are equal height */
.d-course {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Make inner container stretch evenly */
.d-course > .e-flex {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Make text area expand to fill remaining space */
.d-course .elementor-widget-text-editor {
  flex-grow: 1;
}

/* Ensure image scales properly */
.d-course img {
  width: 100%;
  height: 220px; /* Adjust as needed */
  object-fit: cover;

}

/* Optional — make button stick to bottom nicely */
.d-course .elementor-widget-button {
  margin-top: auto;
}

.CTA {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  height: 100%; /* Ensure parent has defined height */
}

.CTA > .e-child:first-child {
  height: 75px; /* First child fixed height */
  flex: 0 0 75px;
}

.CTA > .e-child:last-child {
  flex: 1; /* Second child takes remaining height */
}

/* --- General Styling for the Contact Form Container --- */
.location-contact {
    background-color: #1a1a1a; /* Very dark charcoal background */
    padding: 40px;
    border-radius: 8px; /* Slightly rounded corners for the container */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    color: #f0f0f0; /* Light text color for readability */
   
}

/* --- Form Field Labels --- */
.location-contact label {
    display: block; /* Make labels take full width */
}

/* --- Input Fields (Text, Email, Subject) --- */
.location-contact .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    padding: 12px 15px;
   
    border: 1px solid #444; /* Darker border */
    background-color: #2c2c2c; /* Slightly lighter than background for contrast */
    color: #f0f0f0; /* Light text in input fields */
    border-radius: 5px; /* Slightly rounded input fields */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */
}

/* --- Textarea Field --- */
.location-contact textarea.wpcf7-textarea {
    min-height: 120px; /* A decent height for messages */
    resize: vertical; /* Allow vertical resizing only */
}

/* --- Input Field Focus State --- */
.location-contact .wpcf7-form-control:not(.wpcf7-submit):focus {
    border-color: #e74c3c; /* Red border on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.3); /* Soft red glow on focus */
}

/* --- Submit Button --- */
.location-contact input[type="submit"] {
    display: block; /* Make button take full width */
    width: 100%; /* Or adjust to `auto` if you prefer it not to be full width */
    padding: 15px 25px;
    background-color: #e74c3c; /* Striking red background for the button */
    color: #ffffff; /* White text on the button */
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    margin-top: 30px; /* Space above the button */
}

/* --- Submit Button Hover State --- */
.location-contact input[type="submit"]:hover {
    background-color: #c0392b; /* Darker red on hover */
    transform: translateY(-2px); /* Slight lift effect on hover */
}

/* --- Placeholder Text Styling (optional) --- */
.location-contact .wpcf7-form-control::placeholder {
    color: #888; /* Lighter grey for placeholders */
    opacity: 1; /* Ensure full opacity */
}

/* --- Hidden Fields (No styling needed, just for completeness) --- */
.location-contact fieldset.hidden-fields-container {
    display: none; /* Keep hidden fields truly hidden */
}

/* --- Screen Reader Response & Response Output (for accessibility/messages) --- */
.location-contact .screen-reader-response,
.location-contact .wpcf7-response-output {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    font-size: 0.9em;
    text-align: center;
}

.location-contact .wpcf7-response-output.wpcf7-mail-sent-ok {
    background-color: #27ae60; /* Green for success */
    color: #ffffff;
}

.location-contact .wpcf7-response-output.wpcf7-mail-sent-ng,
.location-contact .wpcf7-response-output.wpcf7-validation-errors {
    background-color: #e74c3c; /* Red for errors */
    color: #ffffff;
}

/* --- WPCF7 Spinner (for submission loading) --- */
.location-contact .wpcf7-spinner {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #e74c3c; /* Red spinner */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
}

.location-contact .wpcf7-submit.has-spinner .wpcf7-spinner {
    opacity: 1; /* Visible when spinner is active */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.custom-blog .hfe-post-card {
    background-color: #fff;
    border-radius: 8px; /* Subtle rounding for the card itself */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Light, lifted shadow */
    overflow: hidden; /* Ensures image corners are contained */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Makes the card's children align nicely */
    flex-direction: column;
}

.custom-blog .hfe-post-card:hover {
    transform: translateY(-4px); /* Slight lift on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* 3. Image Styling */
.custom-blog .hfe-post-image a,
.custom-blog .hfe-post-image img {
    display: block;
    width: 100%;
    height: auto;
}

.hfe-post-image img {
    /* Only round the top corners of the image */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    object-fit: cover;
    aspect-ratio: 16 / 9; /* Maintain a consistent landscape aspect ratio */
}

/* 4. Content Area Styling */
.custom-blog .hfe-post-content {
    padding: 20px;
    flex-grow: 1; /* Allows content area to fill vertical space */
    display: flex;
    flex-direction: column;
}

/* 5. Title Styling */
.custom-blog .hfe-post-title {
    font-size: 1.25rem; /* Larger, readable title */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.custom-blog .hfe-post-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.custom-blog .hfe-post-title a:hover {
    color: #e50031; /* Hover color for the title */
}

/* 6. Meta Data Styling (Author & Date) */
.custom-blog .hfe-post-meta {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.custom-blog .hfe-post-author,
.custom-blog .hfe-post-date {
    display: inline-flex;
    align-items: center;
}

.custom-blog .hfe-meta-separator {
    color: #ccc;
    margin: 0 8px;
}

/* Adding subtle icons using pseudo-elements (using simple unicode/symbols) */
.custom-blog .hfe-post-author::before {
    content: "👤"; /* Simple User Icon */
    margin-right: 5px;
    color: #e50031; /* Red color for the icon */
    font-size: 0.85rem;
}

.custom-blog .hfe-post-date::before {
    content: "🗓️"; /* Simple Calendar Icon */
    margin-right: 5px;
    color: #e50031; /* Red color for the icon */
    font-size: 0.85rem;
}

/* 7. Excerpt Styling */
.custom-blog .hfe-post-excerpt {
    font-size: 1rem;
    color: #555;
    margin-bottom: 20px;
    flex-grow: 1; /* Pushes the Read More link to the bottom */
}

/* 8. Read More Button Styling */
.custom-blog .hfe-read-more {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: #e50031; /* Bright red background */
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px; /* Subtle rounding for the button */
    transition: background-color 0.2s ease, opacity 0.2s ease;
    margin-top: auto; /* Ensures it sticks to the bottom of the content area */
}

.custom-blog .hfe-read-more:hover {
    background-color: #c00028; /* Slightly darker red on hover */
}
.team-box {
    border: 3px solid transparent; 
    position: relative; 
    transition: border-color 0.3s ease-in-out;
    cursor: pointer;
}

.team-box:hover {
    border-color: #f7a600;
}

.team-box .elementor-element-6f43205 { 
    position: relative;
    overflow: hidden;
}

.team-box .img-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 2;
}

.team-box:hover .img-overlay::before {
    opacity: 1;
}

.team-box .social-links {
    position: absolute;
    top: -113%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.team-box .social-links .elementor-icon-list-items {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 15px;
}

.team-box:hover .social-links {
    opacity: 1;
}

.team-box .social-links .elementor-icon-list-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid #f7a600;
    border-radius: 5px;
    color: #f7a600;
    transition: background-color 0.2s, color 0.2s;
}

.team-box .social-links .elementor-icon-list-icon i {
    font-size: 16px;
    line-height: 1;
}

.team-box .social-links .elementor-icon-list-item:hover .elementor-icon-list-icon {
    background-color: #f7a600;
    color: #ffffff;
}

.custom-boxes {
    display: flex; /* Makes the container a flex container */
	flex-wrap: wrap; }



/* Optional: Refinements for the icon box content itself, based on screenshot */
.custom-boxes .elementor-icon-box-wrapper {
    /* Padding, background, border, shadow for individual boxes */
    padding: 20px; /* Adjust padding as needed */
    background-color: #fff; /* Example background */
    border: 1px solid #eee; /* Example border */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.custom-boxes .elementor-icon-box-icon {
    margin-bottom: 10px; /* Space between icon and text */
}

.custom-boxes .elementor-icon-box-icon .elementor-icon {
    /* Style for the yellow checkmark icon */
    background-color: #ffc107; /* Example yellow background */
    color: #fff; /* White checkmark */
    border-radius: 50%; /* Make it round */
    padding: 8px; /* Size of the yellow circle */
    font-size: 1.2em; /* Size of the checkmark icon */
    display: inline-flex; /* For centering the icon within its background */
    align-items: center;
    justify-content: center;
}

.custom-boxes .elementor-icon-box-title {
    font-size: 1.2em; /* Adjust title font size */
    font-weight: bold;
    color: #333; /* Darker title color */
    margin-top: 0;
    margin-bottom: 5px; /* Space below title */
}

.custom-boxes .elementor-icon-box-description {
    font-size: 0.9em; /* Adjust description font size */
    color: #666; /* Lighter description color */
    line-height: 1.5;
}

/* Optional: Media query for responsiveness on smaller screens */
@media (max-width: 768px) {
    .custom-boxes > .elementor-element {
        flex: 1 1 calc(100% - 20px); /* Stack items vertically on small screens */
    }
}
/* --- 1. Overall Card Container Styling --- */
.pricing-card {
    /* Base for the whole card */
    background-color: #ffffff; /* White background for the main body */
    border: 1px solid #eeeeee; /* Very light border to define the edge */
    border-radius: 5px; /* Subtle rounded corners for the whole card */
    width: 280px; /* Example fixed width - adjust as needed */
    margin: 20px; /* Spacing if used in a grid */
    overflow: hidden; /* Ensures the dark header stays within the rounded corners */
    text-align: center; /* Center aligns the content within the card */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Optional: subtle shadow */
}

/* --- 2. Header Section (Dark Blue/Black) --- */
.pricing-card .card-header {
    /* Matches the dark navy/black color in the image */
    background-color: #1a233e; /* A very dark navy, close to black */
    color: #ffffff; /* White text */
    padding: 20px 10px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 3. Price Tag Section (Red Highlight) --- */
.pricing-card .price-tag-container {
    /* Container for the red price tag, positioning it below the header */
    position: relative;
    /* This padding creates space between the header and the feature list */
    padding-top: 25px; 
    margin-bottom: 35px;
}

.pricing-card .price-tag {
    /* The main red price bubble */
    position: absolute;
    top: -15px; /* Moves the tag up to overlap the header */
    left: 50%;
    transform: translateX(-50%); /* Centers the tag horizontally */
    
    background-color: #ffffff; /* White background for the bubble */
    border: 2px solid #ed1c24; /* Red border */
    border-radius: 5px;
    
    padding: 10px 15px;
    min-width: 90px; /* Ensures the tag is wide enough */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.pricing-card .price-tag h2 {
      color: #ed1c24;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1;
}

.pricing-card .price-tag p {
    /* The smaller text (ONE TIME) */
    color: #ed1c24; /* Bright red color */
    font-size: 10px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    line-height: 1;
}


/* --- 4. Feature List Styling --- */
.pricing-card .feature-list {
    list-style: none; /* Remove default bullet points */
    padding: 0 30px 20px 30px; /* Internal padding */
    margin: 0;
    text-align: left; /* Align feature text to the left */
}

.pricing-card .feature-list li {
    /* Individual list items */
    color: #333333; /* Dark gray text color */
    font-size: 15px;
    padding: 8px 0;
    border-bottom: 1px dashed #e0e0e0; /* Light dashed separator */
}

/* Styling for the checkmark icon */
.pricing-card .feature-list li i {
    color: #ed1c24; /* Bright red checkmark color */
    margin-right: 10px; /* Space between icon and text */
    font-size: 14px;
}

/* Remove border from the last item */
.pricing-card .feature-list li:last-child {
    border-bottom: none;
}

/* --- 5. Call-to-Action (CTA) Button --- */
.pricing-card .cta-button {
    /* Container for the button */
    padding: 10px 30px 30px 30px; /* Bottom padding to separate from card edge */
}

.pricing-card .cta-button a {
    /* The button itself */
    display: block;
    background-color: #ed1c24; /* Bright red button color */
    color: #ffffff;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    /* Optional: Remove the trailing arrow for simplicity, or add it via a pseudo-element if needed */
}

.pricing-card .cta-button a:hover {
    background-color: #b9171f; /* Slightly darker red on hover */
}
/* --- 1. Overall Card Container Styling --- */
.course {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    padding: 30px 20px;
    text-align: center;
    width: 300px; /* Adjust as needed */
    margin: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

/* --- 2. Icon Styling (The red circle with the computer) --- */
.course .elementor-icon-box-icon {
    margin-bottom: 20px;
}

.course .elementor-icon {
    background-color: #d83d47; /* Primary red */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
}

.course .elementor-icon i {
    color: #ffffff;
    font-size: 40px;
    /* CHANGE THIS if you're using a different icon set for the main icon. */
    /* For the computer icon, use 'fas fa-desktop' or 'fas fa-laptop' */
}

/* --- 3. Text and Feature List Styling --- */
.course .elementor-icon-box-title span {
    color: #333333;
    font-weight: 700;
    font-size: 20px;
    display: block;
    margin-bottom: 5px;
}

.course .elementor-icon-box-description {
    color: #666666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    /* No longer need side padding here, as list items will handle it */
    padding: 0; 
}

/* Styling for the checklist items (Flexible Schedule, MTO Certification) */
/* We'll use specific classes for these new list items */
.course .feature-list {
    list-style: none; /* Remove default bullet points */
    padding: 0; /* Remove default list padding */
    margin: 0 0 20px 0; /* Adjust bottom margin as needed */
    text-align: left; /* Align text to the left within the card */
    padding: 0 20px; /* Add some padding from the card edges */
}

.course .feature-list li {
    position: relative; /* For absolute positioning of the icon if desired, or just space */
    margin-bottom: 8px; /* Space between list items */
    font-size: 15px;
    color: #555555;
}

.course .feature-list li i {
    color: #d83d47; /* Red color for the checkmark icon */
    margin-right: 8px; /* Space between icon and text */
    font-size: 16px;
    vertical-align: middle; /* Align icon vertically with text */
}


/* --- 4. Price and CTA Button Styling --- */
.course h4 {
    color: #333333;
    font-size: 32px;
    font-weight: 700;
    margin: 10px 0 25px 0;
}

.course a {
    display: block;
    background-color: #d83d47;
    color: #ffffff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
}

.course a:hover {
    background-color: #b9333a;
}

/* Elementor container specific adjustment */
.course .elementor-widget-container {
    padding: 0;
}
#customer_address_details span.select2-selection {
    	border: 1px solid #666;
	border-radius:3px;

}
.custom-contact-form {
    max-width: 600px;
   
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

.custom-contact-form .wpcf7-form {
    margin: 0;
}

.custom-contact-form .wpcf7-form p label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #333333;
    font-weight: 600;
}

.custom-contact-form .wpcf7-form input[type="text"],
.custom-contact-form .wpcf7-form input[type="email"],
.custom-contact-form .wpcf7-form textarea {
    display: block;
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    font-size: 16px;
}

.custom-contact-form .wpcf7-form input[type="text"]:focus,
.custom-contact-form .wpcf7-form input[type="email"]:focus,
.custom-contact-form .wpcf7-form textarea:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.custom-contact-form .wpcf7-form textarea {
    min-height: 120px;
    resize: vertical;
}

.custom-contact-form .wpcf7-form input[type="submit"] {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background-color: #ff0000; /* Red background */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* Black shadow */
}

.custom-contact-form .wpcf7-form input[type="submit"]:hover {
    background-color: #cc0000; /* Darker red on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* Expanded black shadow */
    transform: translateY(-2px); /* Slight lift effect */
}


.custom-contact-form .wpcf7-form p {
    margin-bottom: 15px;
}

/* Hide arrows (spinners) on quantity inputs */
.cart-addon-qty::-webkit-outer-spin-button,
.cart-addon-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-addon-qty[type=number] {
  -moz-appearance: textfield; /* Firefox */
}

@media (min-width: 1025px) {
    /* Show submenu on hover */
    .elementor-nav-menu li.menu-item-has-children:hover > .sub-menu {
        display: block;
    }

    /* Remove fixed width from dropdown menus */
    .elementor-nav-menu .sub-menu,
    .elementor-nav-menu--main .elementor-nav-menu .sub-menu {
        width: auto !important; /* use auto instead of unset */
        min-width: 200px; /* optional: prevent collapsing */
    }
}

.ui-widget-content {
    border: 1px solid #aaa;
    background: #fff;
    color: black;
}

.ui-widget {
    font-family: 'Montserrat';
	font-size: 16px;}


.ui-datepicker {
    width: 19em;
	padding: 0 0 0 0;}


.ui-widget-header {
    border: 1px solid #FF0000;
    background: #FF0000;
    color: #222;
	font-weight: bold;}


.ui-datepicker table {
    border-spacing: 0;
	border-width: 0 0 0 0 !important;}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid transparent;
    background: white;
    font-weight: normal;
    color: black;
	   text-align: center;

}


#cclw_order_details_table .cclw_order_review_table table thead {
    background: white;

}


.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 45%;
    display: inline-flex;
    margin: 5px;
}


.ui-datepicker table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th{
    background-color: white;
}


table tbody tr:hover>td, table tbody tr:hover>th {
    background-color: white;
}

.ui-state-default:hover{
	background:black;
	color:white;
}


.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    border: 1px solid black;
    background: transparent;
	color:black;
 
}

#heading_2_field h3{
	margin-top:210px;
}

.woocommerce-customer-details{
	display:none;
}

            @media(max-width: 992px) {
                .custom-post-card { flex: 1 1 45%; }
            }
            @media(max-width: 600px) {
                .custom-post-card { flex: 1 1 100%; }
				.course-item{
					flex-direction:column;
				}
            }