.elementor-28 .elementor-element.elementor-element-a312365{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:30px;--margin-bottom:30px;--margin-left:0px;--margin-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-28 .elementor-element.elementor-element-3621fd5{text-align:center;}.elementor-28 .elementor-element.elementor-element-6770057d{--display:flex;--margin-top:30px;--margin-bottom:030px;--margin-left:0px;--margin-right:0px;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-28 .elementor-element.elementor-element-6770057d{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for shortcode, class: .elementor-element-599bd90a */.tutor-membership-pricing-item .tutor-feature-icon-active {
    color: #962626;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6770057d *//* 1. Center the row and make the columns wider */
.tutor-container .tutor-row {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important; /* Forces columns to be equal height */
    gap: 30px;
    padding-top: 20px; /* Adds space so the top badges don't get cut off */
}

.tutor-container .tutor-row .tutor-col-md-4 {
    display: flex !important; /* Allows the inner box to stretch */
    width: 100% !important;
    max-width: 650px !important;
    flex: 0 0 auto !important;
}

/* Tablet Layout */
@media (min-width: 768px) {
    .tutor-container .tutor-row .tutor-col-md-4 {
        width: 100% !important; /* Slightly wider on tablet to utilize space */
    }
}

/* Desktop Layout */
@media (min-width: 1024px) {
    .tutor-container .tutor-row .tutor-col-md-4 {
        width: 45% !important; /* Returns to original width on desktop */
    }
}

/* 2. Base styling for both boxes: White background and centered text */
.tutor-membership-pricing-item {
    width: 100%; /* Ensures the box fills the flex column */
    display: flex;
    flex-direction: column;
    background-color: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 25px 15px !important; /* Fix: Reduced padding for mobile and tablet */
    position: relative; /* Essential for placing the top badges */
    transition: box-shadow 0.3s ease;
}

/* Restores large padding only on desktop */
@media (min-width: 1024px) {
    .tutor-membership-pricing-item {
        padding: 40px 30px !important; 
    }
}

.tutor-membership-pricing-item-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pushes the content to fill the box height */
    text-align: center;
}

/* Pushes the button area to the bottom so buttons align perfectly */
.tutor-membership-pricing-item-inner .tutor-action {
    margin-top: auto !important; 
}

.tutor-pricing-price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

/* 3. Base Badge Styling (Applies to both boxes) */
.tutor-membership-pricing-item::before {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
}

/* 4. Box 1: "Monthly" Plan Styling (#B98A4C) */
.tutor-container .tutor-row .tutor-col-md-4:nth-child(1) .tutor-membership-pricing-item {
    border: 2px solid #B98A4C !important;
}

.tutor-container .tutor-row .tutor-col-md-4:nth-child(1) .tutor-membership-pricing-item::before {
    content: "Monthly";
    background-color: #B98A4C;
}

/* Match the Box 1 button outline to the Monthly color */
.tutor-container .tutor-row .tutor-col-md-4:nth-child(1) .tutor-btn {
    color: #B98A4C !important;
    border-color: #B98A4C !important;
}
.tutor-container .tutor-row .tutor-col-md-4:nth-child(1) .tutor-btn:hover {
    background-color: #B98A4C !important;
    color: #ffffff !important;
}

/* 5. Box 2: "Recommended" Lifetime Plan Styling (#962626) */
.tutor-container .tutor-row .tutor-col-md-4:nth-child(2) .tutor-membership-pricing-item {
    border: 2px solid #962626 !important; 
    box-shadow: 0 10px 30px rgba(150, 38, 38, 0.15); /* Keep the tinted shadow so it still stands out */
}

.tutor-container .tutor-row .tutor-col-md-4:nth-child(2) .tutor-membership-pricing-item::before {
    content: "Recommended";
    background-color: #962626;
}

/* Box 2 Solid Button */
.tutor-container .tutor-row .tutor-col-md-4:nth-child(2) .tutor-btn {
    background-color: #962626 !important; 
    color: #ffffff !important;
    border-color: #962626 !important; 
}

.tutor-container .tutor-row .tutor-col-md-4:nth-child(2) .tutor-btn:hover {
    background-color: #7a1f1f !important; 
    border-color: #7a1f1f !important;
}

/* Hide the original "/10 Year" text in the second box */
.tutor-container .tutor-row .tutor-col-md-4:nth-child(2) .tutor-pricing-price-duration {
    font-size: 0 !important; 
}

/* Insert "/Lifetime" in its place */
.tutor-container .tutor-row .tutor-col-md-4:nth-child(2) .tutor-pricing-price-duration::after {
    content: "/Lifetime";
    font-size: 16px; 
    color: #686f7a;
}

/* 6. Reverse order on Mobile and Tablet */
@media (max-width: 1023px) {
    .tutor-container .tutor-row .tutor-col-md-4:nth-child(1) {
        order: 2 !important; /* Moves Monthly to the bottom/right */
    }
    .tutor-container .tutor-row .tutor-col-md-4:nth-child(2) {
        order: 1 !important; /* Moves Lifetime to the top/left */
    }
}

/* Hide the original "Buy Now" text on both buttons */
.tutor-container .tutor-row .tutor-col-md-4 .tutor-btn {
    font-size: 0 !important; 
}

/* Insert "Join now" in its place */
.tutor-container .tutor-row .tutor-col-md-4 .tutor-btn::after {
    content: "Join now";
    font-size: 16px; /* Adjust this if your theme's default button text is larger/smaller */
    font-weight: 600; /* Keeps the button text nice and bold */
}/* End custom CSS */