/*
Theme Name: Tips of Nursing
Theme URI: https://tipsofnursing.com/
Author: Tips of Nursing
Description: Custom WordPress theme for Tips of Nursing - nursing licensure exam preparation (NCLEX, CPNRE, RExPN, OSCE, IELTS, CELBAN).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tips-of-nursing
Tags: education, one-column, custom-menu, featured-images
*/

/* -------------------------------------------------------------
   IMPORTANT
   The template's big stylesheet is NOT this file. It lives at
   assets/css/template.css and is enqueued in functions.php.
   WordPress requires a style.css at the theme root for the header
   block above, so the template CSS had to be renamed.

   Everything below is our own overrides. It loads AFTER
   template.css and responsive.css, so no !important is needed.
   ------------------------------------------------------------- */


/* --- Logo sizing --------------------------------------------- */
.full-width-header .rs-header .menu-area .logo-area img,
.full-width-header .rs-header .logo-part img {
    width: 260px;
    height: auto;
    max-width: none;
    max-height: none;
}

.full-width-header .rs-header .menu-area.sticky .logo-area img,
.full-width-header .rs-header .menu-area.sticky .logo-part img {
    width: 190px;
    max-width: none;
    max-height: none;
}

@media (max-width: 991px) {
    .full-width-header .rs-header .menu-area .logo-area img,
    .full-width-header .rs-header .logo-part img {
        width: 180px;
    }
}


/* --- Header spacing: pull menu + search right ----------------- */
.full-width-header .rs-header .menu-area .rs-menu-area {
    justify-content: flex-end;
}

.full-width-header .rs-header .menu-area .expand-btn-inner {
    margin-right: 0;
}


/* --- Checklist used in About / content ------------------------ */
.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    line-height: 1.6;
}

.check-list li:before {
    content: "\f00c";              /* FontAwesome 4 check */
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 1px;
    color: #0c8b51;
}


/* --- Hero trust row ------------------------------------------ */
.banner-trust {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.banner-trust span {
    font-size: 14px;
    opacity: .85;
    position: relative;
    padding-left: 22px;
}

.banner-trust span:before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    color: #0c8b51;
}


/* --- Why Choose (exams) section height ------------------------ */
.why-choose-us.style3 {
    padding: 120px 0;
}

@media (max-width: 991px) {
    .why-choose-us.style3 {
        padding: 70px 0;
    }
}


/* --- WordPress core classes the template never had ------------ */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 14px; font-style: italic; margin-top: 8px; }
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #fff;
    clip: auto !important;
    clip-path: none;
    color: #0c8b51;
    display: block;
    font-size: 14px;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}
.sticky, .gallery-caption, .bypostauthor { /* required by WP theme check */ }
/* =============================================================
   BLOG STYLES - START
   -------------------------------------------------------------
   Paste at the very BOTTOM of tontheme/style.css.

   This REPLACES the earlier block that began with
   "BLOG PAGE (home.php, archive.php, search.php)". If you pasted
   that one, delete it first - everything it did is included here.
   ============================================================= */


/* ---- Banner fallback --------------------------------------
   Used only if assets/images/breadcrumbs/2.jpg is missing, so
   the page title never floats over the header. */
.rs-breadcrumbs.ton-bc-plain {
    background: #0c8b51;
    min-height: 320px;
}


/* ---- 4-column grid (template-blog.php) --------------------
   The long ".rs-blog.main-home.modify1.ton-blog-grid" prefix is
   deliberate: it has to outrank the homepage card rules in
   template.css, or these tweaks would be ignored. */

/* Every card in a row the same height */
.rs-blog.main-home.modify1.ton-blog-grid .blog-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Images cropped to the same shape, whatever size was uploaded */
.rs-blog.main-home.modify1.ton-blog-grid .blog-item .image-part a {
    display: block;
}

.rs-blog.main-home.modify1.ton-blog-grid .blog-item .image-part img {
    width: 100%;
    aspect-ratio: 570 / 400;
    object-fit: cover;
    display: block;
}

/* Placeholder for posts without a featured image */
.rs-blog.main-home.modify1.ton-blog-grid .blog-item .image-part.ton-no-thumb a {
    aspect-ratio: 570 / 400;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dff3ea;
    color: #0c8b51;
    font-size: 48px;
}

/* Slightly tighter card for 4 across */
.rs-blog.main-home.modify1.ton-blog-grid .blog-item .blog-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 25px 20px;
}

/* Let date and author wrap instead of squashing together */
.rs-blog.main-home.modify1.ton-blog-grid .blog-item .blog-content .blog-meta {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 14px;
}

.rs-blog.main-home.modify1.ton-blog-grid .blog-item .blog-content .title {
    font-size: 19px;
    line-height: 28px;
}

/* "Read More" always on the bottom line of the card */
.rs-blog.main-home.modify1.ton-blog-grid .blog-item .blog-content .btn-btm {
    margin-top: auto;
    flex-wrap: wrap;
    gap: 8px;
}

/* Intro text typed into the Blog page */
.ton-blog-intro {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Shown when there are no posts */
.ton-blog-empty {
    text-align: center;
    padding: 40px 0;
}


/* ---- Pagination -------------------------------------------
   The template only colours "li.active a", but WordPress prints
   the current page as a <span>, so that is covered too. */
.pagination-area .pagination-part li a:hover,
.pagination-area .pagination-part li:hover a,
.pagination-area .pagination-part li.active a,
.pagination-area .pagination-part li.active span {
    color: #0c8b51;
}

.pagination-area .pagination-part li:before {
    background: rgba(12, 139, 81, .3);
}

/* The "Back" arrow sits before its word, so flip its spacing */
.pagination-area .pagination-part li i.ton-pg-back {
    margin-left: 0;
    margin-right: 10px;
}

/* Because "Back" starts with its tall arrow icon, it would sit
   5px above the page numbers. This lines it up with the rest. */
.pagination-area .pagination-part li a.prev {
    vertical-align: top;
}


/* ---- List layout (archive.php / search.php copies) --------
   Only matters if you uploaded copies of home.php. Turns the
   template's blue and orange accents green. */
.rs-inner-blog.green-color .blog-btn:hover,
.rs-inner-blog.green-color .blog-btn:hover::after,
.rs-inner-blog.green-color .blog-item .blog-content .blog-title a:hover,
.rs-inner-blog.green-color .blog-item .blog-content .blog-meta .btm-cate li .blog-date i,
.rs-inner-blog.green-color .blog-item .blog-content .blog-meta .btm-cate li .author i,
.rs-inner-blog.green-color .blog-item .blog-content .blog-meta .btm-cate li .tag-line i,
.rs-inner-blog.green-color .blog-item .blog-content .blog-meta .btm-cate li .tag-line a:hover,
.rs-inner-blog.green-color .widget-area .search-widget .search-wrap button:hover,
.rs-inner-blog.green-color .widget-area .recent-posts-widget .show-featured .post-desc a:hover,
.rs-inner-blog.green-color .widget-area .recent-posts-widget .show-featured .post-desc .date,
.rs-inner-blog.green-color .widget-area .recent-posts-widget .show-featured .post-desc .date i,
.rs-inner-blog.green-color .widget-area .widget-archives ul li a:hover,
.rs-inner-blog.green-color .widget-area .widget-archives ul li a:after {
    color: #0c8b51;
}

.rs-inner-blog.green-color .widget-area .widget-title:before {
    background: #0c8b51;
}

.rs-inner-blog .blog-item .blog-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================================
   BLOG STYLES - END
   ============================================================= */
   /* =============================================================
   SMALLER PAGE BANNER - START
   ============================================================= */

.rs-breadcrumbs .breadcrumbs-img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.rs-breadcrumbs.ton-bc-plain {
    min-height: 300px;
}

@media (max-width: 767px) {
    .rs-breadcrumbs .breadcrumbs-img img {
        height: 200px;
    }

    .rs-breadcrumbs.ton-bc-plain {
        min-height: 200px;
    }

    .rs-breadcrumbs .breadcrumbs-text .page-title {
        font-size: 30px;
    }
}

/* =============================================================
   SMALLER PAGE BANNER - END
   ============================================================= */
   * =============================================================
   ABOUT STYLES - START
   -------------------------------------------------------------
   Paste at the BOTTOM of tontheme/style.css.
   Replaces the previous ABOUT STYLES block - delete that one
   first (from its START comment to its END comment).
   ============================================================= */
 
/* ---- Section eyebrow: small green dash before the words ---- */
.sec-title .sub-title.ton-green {
    color: #0c8b51;
    font-weight: 600;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
 
.sec-title .sub-title.ton-green:before {
    content: "";
    width: 30px;
    height: 2px;
    background: #0c8b51;
    display: inline-block;
}
 
 
/* ---- Intro photo: dotted accent, offset frame, soft shadow -- */
.ton-about-figure {
    position: relative;
    display: block;
}
 
.ton-about-figure img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    box-shadow: 0 28px 60px rgba(12, 139, 81, .18);
}
 
/* Dotted square, top left */
.ton-about-figure:after {
    content: "";
    position: absolute;
    left: -24px;
    top: -24px;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(#0c8b51 1.6px, transparent 1.6px);
    background-size: 14px 14px;
    opacity: .22;
    z-index: 0;
}
 
/* Outline frame, bottom right */
.ton-about-figure:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 68%;
    height: 68%;
    border: 3px solid #0c8b51;
    border-radius: 14px;
    opacity: .35;
    z-index: 0;
}
 
.rs-about.ton-about .sec-title .desc,
.rs-about.ton-about .sec-title .bold-text {
    max-width: 560px;
}
 
 
/* ---- Values: numbered cards that lift on hover -------------- */
.ton-values-section {
    background: #F3FCF8;
}
 
.ton-values-section .row {
    align-items: stretch;
}
 
.ton-value-item {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(12, 139, 81, .08);
    border-radius: 14px;
    padding: 42px 28px 34px;
    height: 100%;
    transition: transform .35s ease, box-shadow .35s ease;
}
 
/* Short green bar that runs across the top on hover */
.ton-value-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 4px;
    background: #0c8b51;
    transition: width .35s ease;
}
 
.ton-value-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(12, 139, 81, .14);
}
 
.ton-value-item:hover:before {
    width: 100%;
}
 
.ton-value-num {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: 'Nunito', sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: #0c8b51;
    opacity: .10;
}
 
.ton-value-icon {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e2f5ec, #f7fdfa);
    box-shadow: inset 0 0 0 1px rgba(12, 139, 81, .12);
    color: #0c8b51;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: all .35s ease;
}
 
.ton-value-item:hover .ton-value-icon {
    background: #0c8b51;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(12, 139, 81, .3);
}
 
.ton-value-title {
    font-size: 19px;
    line-height: 28px;
    color: #111111;
    margin-bottom: 12px;
}
 
.ton-value-text {
    font-size: 15px;
    line-height: 1.75;
    color: #505050;
    margin-bottom: 0;
}
 
 
/* ---- Mission: promises raised on a white card --------------- */
.ton-promise-card {
    background: #ffffff;
    border-radius: 16px;
    border-left: 5px solid #0c8b51;
    padding: 45px 40px;
    box-shadow: 0 18px 50px rgba(17, 17, 17, .08);
}
 
.ton-promise-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.ton-promise-list li {
    position: relative;
    padding: 0 0 0 44px;
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 1.7;
    color: #505050;
}
 
.ton-promise-list li:last-child {
    margin-bottom: 0;
}
 
.ton-promise-list li:before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0c8b51;
    color: #ffffff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(12, 139, 81, .28);
}
 
 
/* ---- Team -------------------------------------------------- */
.ton-team-section .team-item img {
    width: 100%;
    height: auto;
    display: block;
}
 
 
/* ---- Closing call to action: gradient card ------------------ */
.ton-about-cta {
    padding-bottom: 100px;
}
 
.ton-cta-inner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(125deg, #0c8b51 0%, #0a7a47 55%, #086b3e 100%);
    border-radius: 18px;
    padding: 55px 60px;
    box-shadow: 0 25px 60px rgba(12, 139, 81, .28);
}
 
/* Two soft light circles for depth */
.ton-cta-inner:before {
    content: "";
    position: absolute;
    right: -80px;
    top: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}
 
.ton-cta-inner:after {
    content: "";
    position: absolute;
    left: -70px;
    bottom: -150px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
}
 
.ton-cta-inner .row {
    position: relative;
    z-index: 1;
}
 
.ton-about-cta .ton-cta-title {
    color: #ffffff;
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 12px;
}
 
.ton-about-cta .ton-cta-text {
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 560px;
}
 
.ton-about-cta .ton-cta-btn {
    display: inline-block;
    background: #ffffff;
    color: #0c8b51;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 38px;
    border-radius: 50px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    transition: all .3s ease;
}
 
.ton-about-cta .ton-cta-btn:hover {
    background: #111111;
    color: #ffffff;
    transform: translateY(-3px);
}
 
 
/* ---- Phones ------------------------------------------------- */
@media (max-width: 991px) {
    .ton-about-figure:before,
    .ton-about-figure:after {
        display: none;
    }
 
    .ton-promise-card {
        padding: 35px 25px;
    }
 
    .ton-cta-inner {
        padding: 45px 28px;
        text-align: center;
    }
 
    .ton-about-cta .ton-cta-title {
        font-size: 25px;
        line-height: 34px;
    }
 
    .ton-about-cta .ton-cta-text {
        margin-left: auto;
        margin-right: auto;
    }
 
    .ton-about-cta {
        padding-bottom: 70px;
    }
}
 
/* =============================================================
   ABOUT STYLES - END
   ============================================================= */
 /* =============================================================
   CONTACT STYLES - START
   -------------------------------------------------------------
   Paste at the BOTTOM of tontheme/style.css.
   Replaces the previous CONTACT STYLES block - delete that one
   first (from its START comment to its END comment).
   ============================================================= */

/* Intro text typed into the Contact page */
.ton-contact-intro {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Small green dash above a heading */
.ton-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #0c8b51;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ton-eyebrow:before {
    content: "";
    width: 30px;
    height: 2px;
    background: #0c8b51;
}


/* ---- Contact details: green gradient card ------------------- */
.contact-page-section .rs-contact-wrap.ton-contact-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    background: linear-gradient(150deg, #0c8b51 0%, #0a7a47 60%, #086b3e 100%);
    border-radius: 18px;
    padding: 45px 35px;
    box-shadow: 0 25px 55px rgba(12, 139, 81, .28);
}

/* Soft light circles for depth */
.contact-page-section .rs-contact-wrap.ton-contact-card:before {
    content: "";
    position: absolute;
    right: -70px;
    top: -90px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.contact-page-section .rs-contact-wrap.ton-contact-card:after {
    content: "";
    position: absolute;
    left: -60px;
    bottom: -110px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
}

.contact-page-section .rs-contact-wrap.ton-contact-card .address-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.contact-page-section .rs-contact-wrap.ton-contact-card .address-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.contact-page-section .rs-contact-wrap.ton-contact-card .address-item .address-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

.contact-page-section .rs-contact-wrap.ton-contact-card .address-item:hover .address-icon {
    background: #ffffff;
}

.contact-page-section .rs-contact-wrap.ton-contact-card .address-item .address-icon i {
    color: #ffffff;
    font-size: 20px;
    transition: color .3s ease;
}

.contact-page-section .rs-contact-wrap.ton-contact-card .address-item:hover .address-icon i {
    color: #0c8b51;
}

.contact-page-section .rs-contact-wrap.ton-contact-card .address-item .address-text .label {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-page-section .rs-contact-wrap.ton-contact-card .address-item .address-text .des,
.contact-page-section .rs-contact-wrap.ton-contact-card .address-item .address-text .des a {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}

.contact-page-section .rs-contact-wrap.ton-contact-card .address-item .address-text .des a:hover {
    color: #c9f2dd;
}


/* ---- Form: raised white card -------------------------------- */
.contact-page-section .contact-comment-box.ton-form-card {
    background: #ffffff;
    border: 1px solid rgba(12, 139, 81, .08);
    border-radius: 18px;
    padding: 45px 45px 40px;
    box-shadow: 0 18px 50px rgba(17, 17, 17, .07);
}

.contact-page-section .ton-form-card .inner-part .title {
    margin-bottom: 10px;
}

.contact-page-section .ton-form-card .from-control {
    height: 52px;
    padding: 0 18px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    background: #fbfdfc;
    font-size: 15px;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.contact-page-section .ton-form-card textarea.from-control {
    height: 150px;
    padding: 16px 18px;
}

.contact-page-section .ton-form-card .from-control:focus {
    border-color: #0c8b51;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(12, 139, 81, .10);
    outline: none;
}

/* The template has no <select> styling, so it is added here */
.contact-page-section .ton-form-card select.from-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 42px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c8b51' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
}

.contact-page-section .ton-form-card .form-group .btn-send {
    width: auto;
    min-width: 210px;
    border: none;
    border-radius: 50px;
    padding: 16px 42px;
    background: linear-gradient(120deg, #0c8b51, #0a7a47);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(12, 139, 81, .30);
    transition: transform .3s ease, box-shadow .3s ease;
}

.contact-page-section .ton-form-card .form-group .btn-send:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(12, 139, 81, .38);
}


/* ---- Honeypot: hidden from people, still visible to bots ----- */
.ton-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ---- Messages ----------------------------------------------- */
.ton-alert {
    padding: 16px 22px;
    border-radius: 10px;
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 1.6;
}

.ton-alert-ok {
    background: #e2f5ec;
    border-left: 4px solid #0c8b51;
    color: #0b5c38;
}

.ton-alert-error {
    background: #fdeaea;
    border-left: 4px solid #d63638;
    color: #8a1f21;
}

.ton-alert-error span {
    display: block;
}


/* ---- Map ---------------------------------------------------- */
.contact-page-section .contact-map3 iframe {
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(17, 17, 17, .08);
}


/* ---- Phones -------------------------------------------------- */
@media (max-width: 991px) {
    .contact-page-section .rs-contact-wrap.ton-contact-card {
        padding: 35px 25px;
    }

    .contact-page-section .contact-comment-box.ton-form-card {
        padding: 32px 22px 28px;
    }

    .contact-page-section .ton-form-card .form-group .btn-send {
        width: 100%;
    }

    .contact-page-section .contact-map3 iframe {
        height: 320px;
    }
}

/* =============================================================
   CONTACT STYLES - END
   ============================================================= */
   /* ---- Contact Form 7 ---- */
.contact-page-section .ton-form-card .wpcf7-form-control-wrap {
    display: block;
}

.contact-page-section .ton-form-card .wpcf7-not-valid {
    border-color: #d63638;
}

.contact-page-section .ton-form-card .wpcf7-not-valid-tip {
    color: #d63638;
    font-size: 13px;
    margin-top: 6px;
}

.contact-page-section .ton-form-card .wpcf7-response-output {
    margin: 25px 0 0;
    padding: 16px 22px;
    border: none;
    border-left: 4px solid #0c8b51;
    border-radius: 10px;
    background: #e2f5ec;
    color: #0b5c38;
    font-size: 15px;
}

.contact-page-section .ton-form-card .wpcf7 form.invalid .wpcf7-response-output,
.contact-page-section .ton-form-card .wpcf7 form.unaccepted .wpcf7-response-output {
    border-left-color: #d63638;
    background: #fdeaea;
    color: #8a1f21;
}

.contact-page-section .ton-form-card .wpcf7-spinner {
    margin-left: 14px;
}
/* =============================================================
   SEARCH STYLES - START
   -------------------------------------------------------------
   Paste at the BOTTOM of tontheme/style.css, below the
   BLOG STYLES block (it reuses the grid card styles from there).
   ============================================================= */

/* ---- Heading and search box --------------------------------- */
.ton-search-top {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.ton-search-heading {
    font-size: 30px;
    line-height: 42px;
    color: #111111;
    margin-bottom: 28px;
}

.ton-search-big {
    position: relative;
    display: flex;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 50px;
    padding: 6px 6px 6px 8px;
    box-shadow: 0 14px 40px rgba(17, 17, 17, .07);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.ton-search-big:focus-within {
    border-color: #0c8b51;
    box-shadow: 0 14px 40px rgba(12, 139, 81, .16);
}

.ton-search-big input[type="search"] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    height: 52px;
    padding: 0 18px;
    font-size: 16px;
    color: #111111;
}

.ton-search-big button {
    flex-shrink: 0;
    border: none;
    border-radius: 50px;
    padding: 0 32px;
    height: 52px;
    background: linear-gradient(120deg, #0c8b51, #0a7a47);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow .3s ease;
}

.ton-search-big button:hover {
    box-shadow: 0 10px 24px rgba(12, 139, 81, .32);
}


/* ---- Result cards ------------------------------------------- */
/* Short summary inside the card */
.rs-blog.main-home.modify1.ton-blog-grid .blog-item .blog-content .ton-card-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #505050;
    margin: 0 0 18px;
}

/* "Post" or "Page" tag, where the category normally sits */
.ton-type-label {
    display: inline-block;
    background: #e2f5ec;
    color: #0c8b51;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 30px;
}


/* ---- Nothing found ------------------------------------------ */
.ton-no-results {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: #F3FCF8;
    border-radius: 16px;
    padding: 55px 40px;
}

.ton-no-results-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: #ffffff;
    color: #0c8b51;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(12, 139, 81, .14);
}

.ton-no-results-text {
    font-size: 16px;
    line-height: 1.75;
    color: #505050;
    margin-bottom: 26px;
}

.ton-no-results-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 35px;
}

.ton-chip {
    display: inline-block;
    background: #ffffff;
    color: #0c8b51;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 30px;
    box-shadow: 0 6px 16px rgba(17, 17, 17, .06);
    transition: all .3s ease;
}

.ton-chip:hover {
    background: #0c8b51;
    color: #ffffff;
}

.ton-no-results-sub {
    font-size: 18px;
    color: #111111;
    margin-bottom: 14px;
}

.ton-recent-simple {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ton-recent-simple li {
    margin-bottom: 10px;
}

.ton-recent-simple li a {
    color: #505050;
    font-size: 15px;
}

.ton-recent-simple li a:hover {
    color: #0c8b51;
}


/* ---- Phones -------------------------------------------------- */
@media (max-width: 767px) {
    .ton-search-heading {
        font-size: 23px;
        line-height: 33px;
    }

    .ton-search-big {
        flex-direction: column;
        border-radius: 14px;
        padding: 8px;
    }

    .ton-search-big input[type="search"] {
        text-align: center;
    }

    .ton-search-big button {
        width: 100%;
        border-radius: 10px;
    }

    .ton-no-results {
        padding: 40px 22px;
    }
}

/* =============================================================
   SEARCH STYLES - END
   ============================================================= */
   /* =============================================================
   NCLEX STYLES - START
   -------------------------------------------------------------
   Paste this whole block at the VERY BOTTOM of
   tontheme/style.css, then Update File.

   If you already pasted the older "EXAM PAGE STYLES" block,
   delete it first (from its START comment to its END comment).
   This one replaces it.

   This block is self-contained: it does NOT need the ABOUT
   STYLES block to be there. Some rules are repeated from it on
   purpose, with the same values, so nothing changes on the
   About page if both blocks are present.
   ============================================================= */

/* The theme looks for this class to confirm the block is here.
   Do not rename or delete it. */
.ton-nclex-css-marker {
    display: none;
}

/* Hides the admin-only "old copy" warning once this file loads. */
.ton-css-probe {
    display: none !important;
}


/* ---- Section eyebrow: small green dash before the words ----- */
.sec-title .sub-title.ton-green {
    color: #0c8b51;
    font-weight: 600;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.sec-title .sub-title.ton-green:before {
    content: "";
    width: 30px;
    height: 2px;
    background: #0c8b51;
    display: inline-block;
}

/* Centred sections need the dash centred too */
.sec-title.text-center .sub-title.ton-green {
    justify-content: center;
}


/* ---- Plain banner, used when the breadcrumb photo is missing */
.rs-breadcrumbs.ton-bc-plain {
    background: linear-gradient(125deg, #0c8b51 0%, #0a7a47 60%, #086b3e 100%);
    padding: 90px 0;
}


/* ---- Intro photo: dotted accent, offset frame, soft shadow -- */
.ton-about-figure {
    position: relative;
    display: block;
}

.ton-about-figure img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    box-shadow: 0 28px 60px rgba(12, 139, 81, .18);
}

/* Dotted square, top left */
.ton-about-figure:after {
    content: "";
    position: absolute;
    left: -24px;
    top: -24px;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(#0c8b51 1.6px, transparent 1.6px);
    background-size: 14px 14px;
    opacity: .22;
    z-index: 0;
}

/* Outline frame, bottom right */
.ton-about-figure:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 68%;
    height: 68%;
    border: 3px solid #0c8b51;
    border-radius: 14px;
    opacity: .35;
    z-index: 0;
}

.rs-about.ton-about .sec-title .desc,
.rs-about.ton-about .sec-title .bold-text {
    max-width: 560px;
}

/* Photo removed: the text centres, so the width cap has to go */
.rs-about.ton-about .sec-title.text-center .desc,
.rs-about.ton-about .text-center .sec-title .desc,
.rs-about.ton-about .text-center .sec-title .bold-text {
    max-width: none;
}


/* ---- Buttons under the intro -------------------------------- */
.ton-intro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
}

.text-center .ton-intro-actions {
    justify-content: center;
}

.ton-intro-actions .ton-cta-btn {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 38px;
    border-radius: 50px;
    transition: all .3s ease;
}

.ton-cta-btn.ton-btn-green {
    background: linear-gradient(120deg, #0c8b51, #0a7a47);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(12, 139, 81, .28);
}

.ton-cta-btn.ton-btn-green:hover {
    background: #111111;
    color: #ffffff;
    transform: translateY(-3px);
}

.ton-or-call {
    font-size: 16px;
    color: #505050;
}

.ton-or-call a {
    color: #0c8b51;
    font-weight: 700;
}


/* ---- Words typed into the page editor ----------------------- */
/* The template strips bullets and underlines site-wide, so they
   are put back inside this one box. */
.ton-post-content {
    font-size: 16px;
    line-height: 1.8;
    color: #505050;
}

.ton-post-content ul,
.ton-post-content ol {
    margin: 0 0 25px;
    padding-left: 0;
    list-style: none;
}

.ton-post-content ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
}

.ton-post-content ul li:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0c8b51;
}

.ton-post-content ol {
    counter-reset: ton-ol;
}

.ton-post-content ol li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    counter-increment: ton-ol;
}

.ton-post-content ol li:before {
    content: counter(ton-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: #0c8b51;
    font-weight: 700;
}

.ton-post-content a {
    color: #0c8b51;
    text-decoration: underline !important;
}


/* ---- What you get: numbered cards that lift on hover -------- */
.ton-values-section {
    background: #F3FCF8;
}

.ton-values-section .row {
    align-items: stretch;
}

.ton-value-item {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(12, 139, 81, .08);
    border-radius: 14px;
    padding: 42px 28px 34px;
    height: 100%;
    transition: transform .35s ease, box-shadow .35s ease;
}

/* Short green bar that runs across the top on hover */
.ton-value-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 4px;
    background: #0c8b51;
    transition: width .35s ease;
}

.ton-value-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(12, 139, 81, .14);
}

.ton-value-item:hover:before {
    width: 100%;
}

.ton-value-num {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: 'Nunito', sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: #0c8b51;
    opacity: .10;
}

.ton-value-icon {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e2f5ec, #f7fdfa);
    box-shadow: inset 0 0 0 1px rgba(12, 139, 81, .12);
    color: #0c8b51;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: all .35s ease;
}

.ton-value-item:hover .ton-value-icon {
    background: #0c8b51;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(12, 139, 81, .3);
}

.ton-value-title {
    font-size: 19px;
    line-height: 28px;
    color: #111111;
    margin-bottom: 12px;
}

.ton-value-text {
    font-size: 15px;
    line-height: 1.75;
    color: #505050;
    margin-bottom: 0;
}


/* ---- How it works: numbered steps --------------------------- */
.ton-steps-row {
    position: relative;
}

/* Dotted line joining the circles, desktop only */
.ton-steps-row:before {
    content: "";
    position: absolute;
    top: 35px;
    left: 14%;
    right: 14%;
    height: 2px;
    background-image: linear-gradient(90deg, #cbe8da 50%, transparent 50%);
    background-size: 14px 2px;
    z-index: 0;
}

.ton-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 10px;
}

.ton-step-num {
    width: 70px;
    height: 70px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #0c8b51;
    color: #0c8b51;
    font-family: 'Nunito', sans-serif;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

.ton-step:hover .ton-step-num {
    background: #0c8b51;
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(12, 139, 81, .3);
}

.ton-step-title {
    font-size: 19px;
    line-height: 28px;
    color: #111111;
    margin-bottom: 10px;
}

.ton-step-text {
    font-size: 15px;
    line-height: 1.75;
    color: #505050;
    margin-bottom: 0;
}


/* ---- What the exam covers: ticks on a white card ------------ */
.ton-promise-card {
    background: #ffffff;
    border-radius: 16px;
    border-left: 5px solid #0c8b51;
    padding: 45px 40px;
    box-shadow: 0 18px 50px rgba(17, 17, 17, .08);
}

.ton-promise-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ton-promise-list li {
    position: relative;
    padding: 0 0 0 44px;
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 1.7;
    color: #505050;
}

.ton-promise-list li:last-child {
    margin-bottom: 0;
}

.ton-promise-list li:before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0c8b51;
    color: #ffffff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(12, 139, 81, .28);
}


/* ---- FAQ on an exam page ------------------------------------ */
.rs-faq-part.ton-exam-faq .main-part.new-style {
    max-width: 900px;
    margin: 0 auto;
}

.rs-faq-part.ton-exam-faq .faq-disclaimer {
    margin: 28px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #6b6b6b;
    font-style: italic;
}


/* ---- Closing call to action: gradient card ------------------ */
.ton-about-cta {
    padding-bottom: 100px;
}

.ton-cta-inner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(125deg, #0c8b51 0%, #0a7a47 55%, #086b3e 100%);
    border-radius: 18px;
    padding: 55px 60px;
    box-shadow: 0 25px 60px rgba(12, 139, 81, .28);
}

/* Two soft light circles for depth */
.ton-cta-inner:before {
    content: "";
    position: absolute;
    right: -80px;
    top: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.ton-cta-inner:after {
    content: "";
    position: absolute;
    left: -70px;
    bottom: -150px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
}

.ton-cta-inner .row {
    position: relative;
    z-index: 1;
}

.ton-about-cta .ton-cta-title {
    color: #ffffff;
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 12px;
}

.ton-about-cta .ton-cta-text {
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 560px;
}

.ton-about-cta .ton-cta-btn {
    display: inline-block;
    background: #ffffff;
    color: #0c8b51;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 38px;
    border-radius: 50px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    transition: all .3s ease;
}

.ton-about-cta .ton-cta-btn:hover {
    background: #111111;
    color: #ffffff;
    transform: translateY(-3px);
}


/* ---- Keeps the stripes alternating when a section is removed -
   Without this, switching off "What you get" would leave two
   white sections touching. */
.rs-about.ton-about + .ton-steps-section,
.rs-about.ton-about + .ton-mission-section,
.ton-about-content + .ton-steps-section,
.ton-about-content + .ton-mission-section {
    background: #F3FCF8;
}


/* ---- Phones -------------------------------------------------- */
@media (max-width: 991px) {
    .ton-about-figure:before,
    .ton-about-figure:after {
        display: none;
    }

    .ton-steps-row:before {
        display: none;
    }

    .ton-promise-card {
        padding: 35px 25px;
    }

    .ton-cta-inner {
        padding: 45px 28px;
        text-align: center;
    }

    .ton-about-cta .ton-cta-title {
        font-size: 25px;
        line-height: 34px;
    }

    .ton-about-cta .ton-cta-text {
        margin-left: auto;
        margin-right: auto;
    }

    .ton-about-cta {
        padding-bottom: 70px;
    }
}

/* =============================================================
   NCLEX STYLES - END
   ============================================================= */
   /* =============================================================
   BLOG POST STYLES - START
   -------------------------------------------------------------
   Paste at the VERY BOTTOM of tontheme/style.css
   (Appearance > Theme File Editor > style.css), then Update File.

   These are the pieces you drop into a post: callout boxes,
   numbered steps, comparison cards, the FAQ accordion and the
   closing call to action.

   Everything is scoped inside .ton-post-content, so none of it
   can affect the rest of the site.

   The FAQ uses the browser's own <details> element. No JavaScript,
   nothing to break, and the answers are still readable to Google
   while they are closed.
   ============================================================= */

/* The theme looks for this class to confirm the block is here. */
.ton-blog-css-marker {
    display: none;
}


/* ---- Contents list ------------------------------------------ */
.ton-post-content .ton-toc {
    background: #F3FCF8;
    border: 1px solid rgba(12, 139, 81, .14);
    border-radius: 14px;
    padding: 28px 32px;
    margin: 0 0 40px;
}

.ton-post-content .ton-toc-title {
    display: block;
    margin-bottom: 14px;
    color: #0c8b51;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.ton-post-content .ton-toc ol {
    counter-reset: ton-toc;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ton-post-content .ton-toc ol li {
    counter-increment: ton-toc;
    position: relative;
    padding: 0 0 0 30px;
    margin: 0 0 9px;
    font-size: 15px;
    line-height: 1.6;
}

.ton-post-content .ton-toc ol li:last-child {
    margin-bottom: 0;
}

.ton-post-content .ton-toc ol li:before {
    content: counter(ton-toc);
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(12, 139, 81, .12);
    color: #0c8b51;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.ton-post-content .ton-toc a {
    color: #333333;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: all .25s ease;
}

.ton-post-content .ton-toc a:hover {
    color: #0c8b51;
    border-bottom-color: #0c8b51;
}


/* ---- Opening paragraph -------------------------------------- */
.ton-post-content .ton-lede {
    font-size: 20px;
    line-height: 1.65;
    color: #333333;
    font-weight: 500;
    margin-bottom: 26px;
}


/* ---- Callout boxes ------------------------------------------ */
.ton-post-content .ton-note {
    position: relative;
    border-radius: 14px;
    padding: 26px 30px 26px 66px;
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.75;
}

.ton-post-content .ton-note p {
    margin-bottom: 12px;
}

.ton-post-content .ton-note p:last-child {
    margin-bottom: 0;
}

.ton-post-content .ton-note:before {
    position: absolute;
    left: 24px;
    top: 27px;
    font-family: FontAwesome;
    font-size: 22px;
    line-height: 1;
}

/* Key point - green */
.ton-post-content .ton-note-key {
    background: #F3FCF8;
    border-left: 5px solid #0c8b51;
    color: #2c4a3b;
}

.ton-post-content .ton-note-key:before {
    content: "\f00c";
    color: #0c8b51;
}

/* Watch out - amber */
.ton-post-content .ton-note-warn {
    background: #fff8e8;
    border-left: 5px solid #d99b16;
    color: #5a4413;
}

.ton-post-content .ton-note-warn:before {
    content: "\f071";
    color: #d99b16;
}

/* Good to know - neutral */
.ton-post-content .ton-note-info {
    background: #f4f7fa;
    border-left: 5px solid #5c7d9a;
    color: #33475a;
}

.ton-post-content .ton-note-info:before {
    content: "\f05a";
    color: #5c7d9a;
}

.ton-post-content .ton-note strong {
    color: inherit;
}


/* ---- Numbered steps ----------------------------------------- */
.ton-post-content .ton-steps {
    counter-reset: ton-step;
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
}

.ton-post-content .ton-steps > li {
    counter-increment: ton-step;
    position: relative;
    list-style: none;
    background: #ffffff;
    border: 1px solid rgba(12, 139, 81, .12);
    border-radius: 14px;
    padding: 24px 28px 24px 84px;
    margin: 0 0 16px;
    transition: box-shadow .3s ease, transform .3s ease;
}

.ton-post-content .ton-steps > li:hover {
    transform: translateX(4px);
    box-shadow: 0 14px 34px rgba(12, 139, 81, .10);
}

/* Cancels the green dot the base blog styles put on every li */
.ton-post-content .ton-steps > li:before {
    content: counter(ton-step);
    position: absolute;
    left: 26px;
    top: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0c8b51, #0a7a47);
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 40px;
    text-align: center;
}

.ton-post-content .ton-steps .ton-step-h {
    display: block;
    margin-bottom: 6px;
    color: #111111;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.ton-post-content .ton-steps > li p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.75;
}

.ton-post-content .ton-steps > li p + p {
    margin-top: 10px;
}


/* ---- Two cards side by side --------------------------------- */
.ton-post-content .ton-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin: 0 0 36px;
}

.ton-post-content .ton-card {
    background: #ffffff;
    border: 1px solid rgba(12, 139, 81, .14);
    border-top: 4px solid #0c8b51;
    border-radius: 14px;
    padding: 30px 28px;
}

.ton-post-content .ton-card h4,
.ton-post-content .ton-card .ton-card-h {
    display: block;
    margin: 0 0 6px;
    color: #111111;
    font-family: 'Nunito', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}

.ton-post-content .ton-card .ton-card-sub {
    display: block;
    margin-bottom: 16px;
    color: #0c8b51;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.ton-post-content .ton-card p {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 12px;
}

.ton-post-content .ton-card p:last-child {
    margin-bottom: 0;
}

.ton-post-content .ton-card ul {
    margin: 0;
}

.ton-post-content .ton-card ul li {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 8px;
}


/* ---- Things to avoid ---------------------------------------- */
.ton-post-content .ton-pitfalls {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
}

.ton-post-content .ton-pitfalls > li {
    position: relative;
    list-style: none;
    background: #fdf6f6;
    border-left: 4px solid #c0392b;
    border-radius: 10px;
    padding: 18px 24px 18px 56px;
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.75;
}

.ton-post-content .ton-pitfalls > li:before {
    content: "\f00d";
    font-family: FontAwesome;
    position: absolute;
    left: 22px;
    top: 19px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #c0392b;
    color: #ffffff;
    font-size: 11px;
    line-height: 22px;
    text-align: center;
}

.ton-post-content .ton-pitfalls strong {
    color: #111111;
}


/* ---- FAQ accordion: same look as the homepage --------------- */
/* Matches .rs-faq-part.style1 .main-part.new-style from the
   template - mint panel, 65px bars, arrow on the left, white when
   closed and green when open - but built on <details>, so it needs
   no JavaScript and the editor cannot break it. */

.ton-post-content .ton-faq {
    background: #f3fcf8;
    padding: 49px 50px 70px;
    margin: 0 0 36px;
}

.ton-post-content .ton-faq h2 {
    margin: 0 0 25px;
    color: #111111;
    font-weight: 700;
}

.ton-post-content .ton-faq details {
    margin-bottom: 25px;
    border: none;
    background: none;
}

.ton-post-content .ton-faq details:last-of-type {
    margin-bottom: 0;
}

/* The question bar */
.ton-post-content .ton-faq summary {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 65px;
    padding: 12px 60px;
    background: #ffffff;
    box-shadow: 0 0 49px 0 rgba(0, 0, 0, .08);
    color: #111111;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
}

/* Hides the browser's default triangle */
.ton-post-content .ton-faq summary::-webkit-details-marker {
    display: none;
}

.ton-post-content .ton-faq summary::marker {
    content: "";
}

/* Open: green bar, white text */
.ton-post-content .ton-faq details[open] summary {
    background: #0c8b51;
    color: #ffffff;
}

/* The arrow sits on the LEFT, same as the homepage */
.ton-post-content .ton-faq summary:after {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-family: FontAwesome;
    content: "\f105";
    font-weight: 400;
    text-align: center;
}

.ton-post-content .ton-faq details[open] summary:after {
    content: "\f107";
    font-weight: 900;
}

/* The answer */
.ton-post-content .ton-faq .ton-faq-a {
    background: #ffffff;
    padding: 20px 14px 35px;
    color: #505050;
    font-size: 15px;
    line-height: 25px;
}

.ton-post-content .ton-faq .ton-faq-a p {
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 14px;
}

.ton-post-content .ton-faq .ton-faq-a p:last-child {
    margin-bottom: 0;
}


/* ---- Closing call to action --------------------------------- */
.ton-post-content .ton-cta-box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(125deg, #0c8b51 0%, #0a7a47 60%, #086b3e 100%);
    border-radius: 16px;
    padding: 42px 44px;
    margin: 0 0 36px;
    box-shadow: 0 22px 50px rgba(12, 139, 81, .26);
}

.ton-post-content .ton-cta-box:before {
    content: "";
    position: absolute;
    right: -70px;
    top: -100px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.ton-post-content .ton-cta-box > * {
    position: relative;
    z-index: 1;
}

.ton-post-content .ton-cta-box .ton-cta-h {
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
}

.ton-post-content .ton-cta-box p {
    color: rgba(255, 255, 255, .90);
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 22px;
    max-width: 560px;
}

.ton-post-content .ton-cta-box .ton-btn {
    display: inline-block;
    background: #ffffff;
    color: #0c8b51 !important;
    font-size: 16px;
    font-weight: 700;
    padding: 15px 36px;
    border-radius: 50px;
    text-decoration: none !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .16);
    transition: all .3s ease;
}

.ton-post-content .ton-cta-box .ton-btn:hover {
    background: #111111;
    color: #ffffff !important;
    transform: translateY(-3px);
}


/* ---- Last checked + sources --------------------------------- */
.ton-post-content .ton-checked {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f4f7fa;
    border-radius: 12px;
    padding: 18px 24px;
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.7;
    color: #4a5a68;
}

.ton-post-content .ton-checked:before {
    content: "\f017";
    font-family: FontAwesome;
    color: #5c7d9a;
    font-size: 16px;
    line-height: 1.5;
}

.ton-post-content .ton-sources {
    border: 1px solid #e6ebef;
    border-radius: 12px;
    padding: 0;
    margin: 0 0 20px;
    overflow: hidden;
}

.ton-post-content .ton-sources summary {
    display: block;
    cursor: pointer;
    padding: 16px 24px;
    background: #fafbfc;
    color: #111111;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 700;
    list-style: none;
}

.ton-post-content .ton-sources summary::-webkit-details-marker {
    display: none;
}

.ton-post-content .ton-sources summary::marker {
    content: "";
}

.ton-post-content .ton-sources summary:after {
    content: "\f107";
    font-family: FontAwesome;
    float: right;
    color: #7a8896;
    font-weight: 400;
}

.ton-post-content .ton-sources[open] summary:after {
    content: "\f106";
}

.ton-post-content .ton-sources ul {
    margin: 0;
    padding: 18px 24px 20px;
}

.ton-post-content .ton-sources ul li {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 9px;
}


/* ---- Tablets and phones -------------------------------------- */
@media (max-width: 767px) {
    .ton-post-content .ton-compare {
        grid-template-columns: 1fr;
    }

    .ton-post-content .ton-lede {
        font-size: 18px;
    }

    .ton-post-content .ton-toc {
        padding: 22px 20px;
    }

    .ton-post-content .ton-note {
        padding: 22px 22px 22px 56px;
        font-size: 15px;
    }

    .ton-post-content .ton-note:before {
        left: 20px;
        top: 23px;
        font-size: 18px;
    }

    .ton-post-content .ton-steps > li {
        padding: 22px 22px 22px 22px;
    }

    .ton-post-content .ton-steps > li:before {
        position: static;
        display: block;
        margin-bottom: 14px;
    }

    .ton-post-content .ton-steps > li:hover {
        transform: none;
    }

    .ton-post-content .ton-faq {
        padding: 30px 20px 40px;
    }

    .ton-post-content .ton-faq summary {
        min-height: 56px;
        padding: 14px 20px 14px 46px;
        font-size: 15px;
    }

    .ton-post-content .ton-faq summary:after {
        left: 18px;
    }

    .ton-post-content .ton-faq details {
        margin-bottom: 18px;
    }

    .ton-post-content .ton-faq .ton-faq-a {
        padding: 18px 16px 26px;
    }

    .ton-post-content .ton-cta-box {
        padding: 32px 24px;
        text-align: center;
    }

    .ton-post-content .ton-cta-box .ton-cta-h {
        font-size: 22px;
    }

    .ton-post-content .ton-cta-box .ton-btn {
        display: block;
        text-align: center;
    }

    .ton-post-content .ton-pitfalls > li {
        padding: 16px 20px 16px 50px;
    }
}

/* =============================================================
   BLOG POST STYLES - END
   ============================================================= */
   /* =============================================================
   PRACTICE QUESTION STYLES - START
   -------------------------------------------------------------
   Paste at the VERY BOTTOM of tontheme/style.css, below the
   BLOG POST STYLES block, then Update File.

   Adds a "Test yourself" block for exam-style questions with a
   hidden answer and rationale.

   IMPORTANT: this block uses the class ton-quiz, NOT ton-faq.
   That is deliberate. inc/blog-schema.php reads every <details>
   inside a .ton-faq block into FAQPage structured data, and
   practice questions must never go in there - they are a quiz,
   not a list of answers to real questions people ask, and
   passing them off as one is exactly the sort of thing search
   engines penalise.
   ============================================================= */

.ton-post-content .ton-quiz {
    margin: 0 0 36px;
}

.ton-post-content .ton-q {
    background: #ffffff;
    border: 1px solid #e6ebef;
    border-left: 5px solid #0c8b51;
    border-radius: 14px;
    padding: 28px 30px 24px;
    margin-bottom: 20px;
}

.ton-post-content .ton-q:last-child {
    margin-bottom: 0;
}

.ton-post-content .ton-q-num {
    display: inline-block;
    margin-bottom: 12px;
    color: #0c8b51;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.ton-post-content .ton-q-stem {
    margin-bottom: 18px;
    color: #111111;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
}


/* ---- Lettered options --------------------------------------- */
.ton-post-content .ton-q-opts {
    counter-reset: ton-opt;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.ton-post-content .ton-q-opts li {
    counter-increment: ton-opt;
    position: relative;
    list-style: none;
    padding: 0 0 0 38px;
    margin-bottom: 11px;
    font-size: 15px;
    line-height: 1.65;
    color: #505050;
}

.ton-post-content .ton-q-opts li:last-child {
    margin-bottom: 0;
}

/* Overrides the green dot the base blog styles add to list items */
.ton-post-content .ton-q-opts li:before {
    content: counter(ton-opt, upper-alpha);
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #f0f4f7;
    color: #44555f;
    font-size: 12px;
    font-weight: 700;
    line-height: 25px;
    text-align: center;
}


/* ---- The reveal --------------------------------------------- */
.ton-post-content .ton-q details {
    border: none;
    background: none;
}

.ton-post-content .ton-q summary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    padding: 10px 24px;
    border: 1px solid #0c8b51;
    border-radius: 50px;
    background: #ffffff;
    color: #0c8b51;
    font-size: 14px;
    font-weight: 700;
    list-style: none;
    transition: background .25s ease, color .25s ease;
}

.ton-post-content .ton-q summary::-webkit-details-marker {
    display: none;
}

.ton-post-content .ton-q summary::marker {
    content: "";
}

.ton-post-content .ton-q summary:before {
    content: "\f06e";
    font-family: FontAwesome;
    font-size: 13px;
    font-weight: 400;
}

.ton-post-content .ton-q summary:hover {
    background: #0c8b51;
    color: #ffffff;
}

.ton-post-content .ton-q details[open] summary {
    background: #0c8b51;
    color: #ffffff;
    margin-bottom: 18px;
}

.ton-post-content .ton-q details[open] summary:before {
    content: "\f070";
}

.ton-post-content .ton-q-a {
    background: #F3FCF8;
    border-radius: 10px;
    padding: 22px 24px;
}

.ton-post-content .ton-q-a p {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 12px;
    color: #505050;
}

.ton-post-content .ton-q-a p:last-child {
    margin-bottom: 0;
}

.ton-post-content .ton-q-a .ton-q-correct {
    display: block;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(12, 139, 81, .16);
    color: #0b5c38;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 700;
}


/* ---- Phones -------------------------------------------------- */
@media (max-width: 767px) {
    .ton-post-content .ton-q {
        padding: 22px 20px 20px;
    }

    .ton-post-content .ton-q-stem {
        font-size: 15px;
    }

    .ton-post-content .ton-q summary {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .ton-post-content .ton-q-a {
        padding: 18px 18px;
    }
}

/* =============================================================
   PRACTICE QUESTION STYLES - END
   ============================================================= */