@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* =========================================================================
   Fursan public site — responsive layer.

   style.css is a fixed desktop stylesheet (1300px container, two-column
   `width:50%` sections, 40–72px headings, buttons with 60–160px horizontal
   padding and several `calc(100%/N - Xpx)` widths that go NEGATIVE below
   ~900px). It contains no media queries at all, so everything below is the
   entire mobile/tablet story for the public site.

   Rules:
   • Everything here lives inside a media query — the desktop rendering is
     untouched at >1199px.
   • This file is loaded after style.css on every page (Blade views and the
     remaining raw static HTML alike), so equal-specificity rules win without
     !important. !important appears only where style.css itself used it.
   • Breakpoints: 1199 (small laptop/landscape tablet) · 991 (tablet, the
     breakpoint the header drawer already used) · 767 (phone) · 479 (small
     phone).
   ========================================================================= */


/* =========================================================================
   1. Global guards
   ========================================================================= */

@media (max-width: 1199px) {

    /* The fixed-width sections below overflow before they are stacked; without
       this the whole document scrolls sideways and pushes the header off. */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* style.css sets `.container { max-width:1300px; margin:auto }` with no
       horizontal padding, so text runs into the screen edge. Pad the SECTION
       rather than the container: sections with a background colour keep their
       full-bleed background while the content is inset. */
    .sec_width {
        padding-left: 20px;
        padding-right: 20px;
    }

    .sec_width .container {
        max-width: 100%;
    }

    img,
    svg,
    video,
    iframe {
        max-width: 100%;
    }

    /* Long unbroken strings (URLs, tracking ids) must not widen the page. */
    p,
    h1, h2, h3, h4, h5, h6,
    li, a, span, td {
        overflow-wrap: break-word;
    }
}

@media (max-width: 767px) {
    .sec_width {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* =========================================================================
   2. Header / mobile drawer
   ========================================================================= */

@media (max-width: 991px) {

    .header .container {
        padding: 15px 20px;
        gap: 14px;
    }

    .header .logo img {
        max-width: 132px;
    }

    /* Every selector here is scoped to .header on purpose: the home page's
       slider arrows are <button class="nav prev/next">, so a bare `.nav` rule
       (as the original file had) dragged them off-canvas with the drawer. */
    .header .nav {
        position: fixed;
        left: -100%;
        top: 0;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 90px 25px;
        transition: .4s;
        box-shadow: 0 0 20px rgba(0, 0, 0, .1);
        overflow-y: auto;
        box-sizing: border-box;
    }

    .header .nav.active {
        left: 0;
        z-index: 999;
        align-items: start;
    }

    /* header.js toggles this on <body> when the drawer opens. */
    body.menu-open {
        overflow: hidden;
    }

    .header .menu {
        flex-direction: column;
        width: 100%;
        padding-left: 0;
        gap: 0 !important;
    }

    .header .menu li {
        width: 100%;
    }

    .header .menu li a {
        justify-content: space-between;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    /* Kept visible (style.css hid it) — dropping the only Log In / Dashboard
       entry point on phones is worse than a slightly tighter header bar. */
    .header .login-btn {
        display: inline-block;
        padding: 9px 18px;
        font-size: 14px;
        white-space: nowrap;
    }

    .header .hamburger {
        display: block !important;
    }

    .header .hamburger img {
        position: relative;
        z-index: 99;
        width: 30px;
        display: block;
    }

    .header .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        display: none;
        box-shadow: none;
        width: 100%;
        margin-left: 15px;
    }

    .header .dropdown.active .submenu {
        display: block;
        z-index: 999;
        margin-left: 0;
    }
}

@media (max-width: 479px) {
    .header .logo img {
        max-width: 112px;
    }

    .header .login-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}


/* =========================================================================
   3. Decorative artwork
   Every hero paints a `::before` illustration at `width:50%` pinned to the
   right. Once the columns stack it sits ON TOP of the text, so it goes.
   ========================================================================= */

@media (max-width: 991px) {

    .hero_sec::before,
    .hero_sec_products::before,
    .faq_hero::before,
    .terms_hero::before,
    .privacy_hero::before,
    .resources_hero_sec::before,
    .login_hero::before,
    .pricing_hero::before,
    .about_mission_sec::before,
    .preview_sec .container:before,
    .testimonial_sec .container .testimonial_slider::before,
    .browse_job_3 .container::before,
    .job_recruiting .container::before,
    .job_recruiting .container::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .resources_categories .categories_sec div::before {
        display: none;
    }
}


/* =========================================================================
   4. Home
   ========================================================================= */

@media (max-width: 991px) {

    /* 10em of top padding was clearing a header that is now much shorter. */
    .hero_sec {
        padding-top: 7em; padding-bottom: 3em;
    }

    .hero_sec .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .hero_sec .container .hero_content,
    .hero_sec .container .hero_img {
        width: 100%;
    }

    /* make_sec / recruit / data_driven all share this image + 2x2 grid shape */
    .make_sec .container {
        flex-direction: column;
    }

    .make_sec .make_img,
    .make_sec .make_content {
        width: 100%;
    }

    .make_sec .make_content {
        padding-left: 0;
        margin-top: 30px;
    }

    .recruit .make_content {
        padding-right: 0;
        text-align: left;
    }

    .make_sec .make_content p {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* Open Positions preview */
    .preview_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 30px;
        padding-top: 3em;
    }

    .preview_sec .preview_content {
        flex-direction: column;
        gap: 20px;
    }

    .preview_sec .preview_content .preview_slider {
        width: 100%;
    }

    /* Side illustration next to the slider — pure decoration, and a full-width
       version of it would push the actual job cards a screen further down. */
    .preview_sec .preview_content .preview_img {
        display: none;
    }

    /* prev/next sit at left:45%/right:45% and collide once the track narrows */
    .preview_sec .prev {
        left: calc(50% - 55px);
    }

    .preview_sec .next {
        right: calc(50% - 55px);
    }

    /* Testimonials */
    .testimonial_sec .container {
        flex-direction: column;
    }

    .testimonial_sec .container .testimonial_slider {
        width: 100%;
        padding-top: 3em; padding-bottom: 3em;
    }

    .testimonial_sec .container .testimonial_img {
        display: none;
    }

    .slider-wrapper_testimonial .card_testimonial {
        min-width: calc((100% - 30px) / 2);
    }

    /* CTA / newsletter band */
    .cta_sec .cta_content {
        padding: 40px 24px;
    }

    .cta_sec .cta_content div:first-child,
    .cta_sec .cta_content div:last-child {
        width: 100%;
    }

    .cta_sec .cta_content div:last-child {
        margin-top: 25px;
    }
}

@media (max-width: 767px) {

    .hero_sec {
        padding-top: 6em; padding-bottom: 2em;
    }

    .hero_sec .container .hero_content h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .hero_sec .container .hero_content p {
        font-size: 18px;
    }

    .hero_sec a {
        width: 100%;
        box-sizing: border-box;
        padding: 16px 20px;
        margin-top: 28px;
    }

    /* 2 columns of ~150px wrapped every heading onto three lines */
    .make_sec .make_content div,
    .data_driven .make_content div {
        width: 100%;
    }

    .make_sec .make_content h4,
    .data_driven .make_content h4 {
        font-size: 22px;
        line-height: 1.35;
    }

    .preview_sec h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .preview_sec .preview_header a {
        font-size: 17px;
        line-height: 1.4;
    }

    .preview_sec .card h3 {
        font-size: 21px;
        line-height: 1.4;
    }

    .preview_sec .card p {
        font-size: 17px;
        line-height: 1.4;
    }

    .preview_sec .card button,
    .preview_sec .card a.fh_card_btn {
        font-size: 17px;
        line-height: 40px;
    }

    .slider-wrapper_testimonial .card_testimonial {
        min-width: 100%;
    }

    .slider-wrapper_testimonial .card_testimonial > div:first-child {
        padding: 22px;
        border-radius: 30px 30px 30px 0;
        margin-bottom: 20px;
    }

    .slider-wrapper_testimonial .stars {
        font-size: 32px;
    }

    .slider-wrapper_testimonial .user .name {
        font-size: 20px;
    }

    /* The heading sits on a decorative background image sized by its padding */
    .faq_container h2 {
        font-size: 20px;
        line-height: 1.3;
        padding: 78px 24px 52px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .faq_container {
        padding-top: 2em; padding-bottom: 2em;
    }

    .faq-question {
        font-size: 17px;
        line-height: 1.4;
        gap: 14px;
        text-align: left;
    }

    .faq-item {
        padding-top: 20px; padding-bottom: 20px;
    }

    .faq-answer p {
        font-size: 16px;
        line-height: 1.5;
    }

    .cta_sec h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .cta_sec p {
        font-size: 17px;
    }

    /* Inline pill form -> stacked field + button */
    .cta_sec form {
        border: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .cta_sec input[type="email"] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #fff;
        border-radius: 10px;
        padding: 15px;
    }

    .cta_sec input[type="submit"] {
        width: 100%;
        padding: 17px 20px;
        background-position: right 22px center;
    }
}


/* =========================================================================
   5. Our Services
   ========================================================================= */

@media (max-width: 991px) {

    .hero_sec_services {
        padding-top: 8em; padding-bottom: 3em;
    }

    .AI-powered_sec .ai_content div {
        width: 100%;
    }

    .AI-powered_sec .ai_content div:last-child {
        text-align: center;
        margin-top: 25px;
    }

    .global_boxes {
        flex-wrap: wrap;
        margin-top: 40px;
    }

    .global_boxes > div {
        width: 100%;
        box-sizing: border-box;
    }

    .data_driven {
        padding-top: 3em; padding-bottom: 3em;
    }

    .data_driven .container {
        flex-direction: column;
    }

    .data_driven .container > div:first-child,
    .data_driven .container > div:last-child {
        width: 100%;
    }

    .data_driven .container > div:first-child {
        margin-top: 0;
    }

    .data_driven .container > div:last-child {
        padding-left: 0;
        margin-top: 30px;
    }

    .data_driven .make_content {
        margin-top: 35px;
    }

    .career_btns {
        flex-direction: column;
        margin-top: 45px;
    }

    .career_btns > div {
        width: 100%;
    }

    /* ::before check marks hang 25px to the left of the list box */
    .career_sec ul {
        width: auto;
        padding-left: 28px;
        margin: 30px 0 40px;
    }
}

@media (max-width: 767px) {

    .hero_sec_services h2,
    .job_hero h2,
    .resources_hero_sec h2,
    .hero_sec_products h2 {
        font-size: 28px;
        line-height: 1.25;
    }

    .hero_sec_services p,
    .job_hero p,
    .resources_hero_sec p,
    .hero_sec_products p {
        font-size: 18px;
    }

    .AI-powered_sec h3,
    .global_hiring h3,
    .data_driven .container > div:last-child h3,
    .about_hero_sec h2,
    .about_mission_sec h3,
    .tools_sec h2,
    .how_work h3,
    .resources_download h3 {
        font-size: 24px;
        line-height: 1.3;
    }

    .AI-powered_sec p,
    .global_hiring p,
    .data_driven .container > div:last-child > p,
    .AI-powered_sec ul li {
        font-size: 17px;
        line-height: 1.5;
    }

    .AI-powered_sec ul {
        padding-left: 30px;
        margin: 22px 0;
    }

    .AI-powered_sec ul li {
        margin-bottom: 20px;
    }

    .AI-powered_sec a,
    .global_boxes a,
    .tools_sec .tools_boxes a,
    .resources_categories a,
    .resources_download a,
    .resources_cta a,
    .product_cta a,
    .contact_cta a,
    .career_btns div:first-child a,
    .career_btns div:last-child a,
    .benefits_btn a,
    .about_cta .about_btn a,
    .pricing_list .list_one a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 17px 20px;
        text-align: center;
    }

    .global_boxes ul li,
    .tools_sec .tools_boxes li {
        font-size: 17px;
        margin-bottom: 18px;
    }

    .global_boxes > div {
        padding: 24px 20px;
        border-radius: 24px;
    }

    .career_sec h3 {
        font-size: 26px;
    }

    .career_sec p,
    .career_sec ul li {
        font-size: 17px;
    }
}


/* =========================================================================
   6. Products
   ========================================================================= */

@media (max-width: 991px) {

    /* 19em top padding on a phone is two blank screens */
    .hero_sec_products {
        padding-top: 8em; padding-bottom: 3em;
    }

    .tools_sec .tools_boxes {
        flex-wrap: wrap;
        margin-top: 40px;
    }

    .tools_sec .tools_boxes > div {
        width: 100%;
        box-sizing: border-box;
        padding: 40px 22px;
    }

    /* Equal-height helpers that only make sense side by side */
    .tools_sec .tools_boxes ul,
    .hiring_sec .tools_boxes h3 {
        min-height: auto;
    }

    .product_cta .container {
        padding: 40px 24px;
    }
}

@media (max-width: 767px) {

    .tools_sec .tools_boxes h3 {
        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 20px;
    }

    .tools_sec .tools_boxes h4 {
        font-size: 20px;
        line-height: 1.35;
        margin: 22px 0 30px;
    }

    .product_cta h2 {
        font-size: 24px;
        margin-bottom: 22px;
    }

    .product_cta p {
        font-size: 17px;
        line-height: 1.4;
        margin-bottom: 28px;
    }
}


/* =========================================================================
   7. Jobs (how it works / benefits)
   ========================================================================= */

@media (max-width: 991px) {

    .how_work {
        padding-top: 8em; padding-bottom: 3em;
    }

    .how_work .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .how_work .container > div:first-child,
    .how_work .container > div:last-child {
        width: 100%;
    }

    .benefits_sec ul {
        flex-direction: column;
        gap: 18px;
        padding-left: 0;
        align-items: flex-start;
    }

    /* width:calc(100%/3 - 145px) is negative below ~440px */
    .benefits_btn {
        flex-direction: column;
        gap: 18px;
        margin-top: 45px;
    }

    .benefits_btn a {
        width: 100%;
        box-sizing: border-box;
        padding: 17px 20px;
    }

    .benefits_sec {
        padding-bottom: 3em;
    }
}

@media (max-width: 767px) {

    .how_work h4,
    .how_work h5,
    .benefits_sec h2 {
        font-size: 26px;
        line-height: 1.25;
    }

    .how_work ul li,
    .benefits_sec li {
        font-size: 17px;
        line-height: 1.5;
    }

    .how_work p.location {
        font-size: 18px;
    }

    .how_work .categories li {
        font-size: 15px;
        padding: 8px 12px;
    }
}


/* =========================================================================
   8. Login / Register / Forgot password
   ========================================================================= */

@media (max-width: 991px) {

    .login_hero {
        padding-top: 7em; padding-bottom: 3em;
    }

    .login_hero .container {
        flex-direction: column;
        margin-top: 0;
    }

    .login_hero .container div {
        width: 100%;
    }

    /* The card is the first child, the illustration the second — form first is
       the right order on a phone, so no reversal is needed. */
    .login_hero .container div:first-child {
        margin-left: 0;
        max-width: 100%;
        box-sizing: border-box;
        padding: 35px 22px;
        border-radius: 26px;
    }

    /* Decorative offset rectangle anchored at top:-120px; left:-50px */
    .login_hero .container div:first-child::before {
        display: none;
    }

    .login_hero .container div:last-child {
        text-align: center;
        margin-top: 30px;
    }

    .login_hero input {
        width: 100%;
        box-sizing: border-box;
    }

    .forget_form .container div:first-child {
        height: auto;
    }
}

@media (max-width: 767px) {

    .login_hero .container div:first-child h3 {
        font-size: 26px;
        line-height: 1.3;
    }

    .login_hero .container div:first-child a,
    .login_hero .container div:first-child p {
        font-size: 16px;
    }
}


/* =========================================================================
   9. Browse Job (search + master/detail)
   ========================================================================= */

@media (max-width: 991px) {

    .search_job {
        padding-top: 8em; padding-bottom: 2em;
    }

    /* The 808px search pill becomes a stacked card */
    .search_job .container {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        border-radius: 20px;
        padding: 14px 16px;
        box-sizing: border-box;
    }

    .search_job input {
        width: 100%;
        box-sizing: border-box;
        font-size: 17px;
    }

    .search_job input:first-child {
        border-right: none;
        border-bottom: 1px solid #B8BDBB;
    }

    .search_job input:nth-child(2) {
        margin-left: 0;
    }

    .search_job button {
        align-self: flex-end;
    }

    .job_filter {
        padding-bottom: 3em;
    }

    .job_filter ul {
        flex-wrap: wrap;
        gap: 10px;
        padding-left: 0;
    }

    .job_filter a {
        text-align: left;
    }

    /* .job_side_bar precedes .job_content in the markup, so stacking puts the
       job list above the detail panel, which is the order you want. */
    .job_container .container {
        flex-direction: column;
    }

    .job_container .job_content {
        width: 100%;
        box-sizing: border-box;
        padding: 24px 18px;
    }

    .job_side_bar {
        width: 100%;
    }

    .job_container {
        padding-bottom: 3em;
    }

    .job_header {
        flex-direction: column;
        gap: 16px;
    }

    .job_header div:last-child {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .job_header div:last-child .icons {
        justify-content: flex-start;
    }

    /* Tab strip scrolls instead of wrapping into a broken underline */
    .job_details ul {
        gap: 22px;
        margin-top: 30px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .job_details ul::-webkit-scrollbar {
        display: none;
    }

    .job_details ul li {
        white-space: nowrap;
    }

    .overview_table {
        flex-direction: column;
    }

    .overview_table > div {
        width: 100%;
    }

    .overview_img {
        flex-direction: column;
    }

    .overview_img > div {
        width: 100%;
    }

    .overview_img img {
        height: 220px;
    }

    .job_desc {
        margin-top: 32px;
    }

    .job_tab {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}

@media (max-width: 767px) {

    .job_header h2 {
        font-size: 21px;
    }

    .job_header a {
        display: inline-block;
        text-align: center;
    }

    .job_side_bar .side_bar_item {
        padding: 16px 12px;
    }

    .job_side_bar .side_bar_item div.side_bar_btn {
        flex-wrap: wrap;
        gap: 10px;
    }
}


/* =========================================================================
   10. FAQ · Terms · Privacy
   ========================================================================= */

@media (max-width: 991px) {

    .faq_hero .container,
    .terms_hero .container,
    .privacy_hero .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .faq_hero .container div,
    .terms_hero .container div,
    .privacy_hero .container div {
        width: 100%;
    }

    .privacy_hero div:last-child {
        justify-content: center;
        margin-top: 25px;
    }

    .faq_hero {
        padding-top: 6em; padding-bottom: 2em;
    }

    .terms_hero {
        padding-top: 7em; padding-bottom: 3em;
    }

    .privacy_hero {
        padding-top: 7em; padding-bottom: 3em;
    }

    .question_sec .question {
        padding-top: 2em; padding-bottom: 2em;
    }

    .privacy_content,
    .terms_sec {
        padding-bottom: 3em;
    }
}

@media (max-width: 767px) {

    .faq_hero h2,
    .terms_hero h2,
    .privacy_hero h2 {
        font-size: 30px;
        line-height: 1.25;
        max-width: none;
    }

    .faq_hero p,
    .terms_hero p,
    .privacy_hero p {
        font-size: 18px;
        line-height: 1.45;
        max-width: none;
    }

    .question_sec h3 {
        font-size: 23px;
        line-height: 1.3;
    }

    .question_sec p,
    .question_sec .question h4 {
        font-size: 17px;
        line-height: 1.5;
    }

    .question_sec .question p {
        padding-top: 12px; padding-bottom: 26px;
    }

    /* 24px body copy is oversized on a 390px screen */
    .privacy_content h3,
    .privacy_content h4 {
        font-size: 20px;
        line-height: 1.35;
        margin-top: 28px;
    }

    .privacy_content p,
    .privacy_content ul li {
        font-size: 17px;
        line-height: 1.55;
    }

    .privacy_content ul {
        padding-left: 22px;
    }

    .terms_sec h4 {
        font-size: 18px;
        line-height: 1.4;
    }

    .terms_sec .container div {
        font-size: 16px;
        line-height: 1.6;
        padding-top: 12px; padding-bottom: 26px;
    }
}


/* =========================================================================
   11. Contact
   ========================================================================= */

@media (max-width: 991px) {

    .contact_con {
        padding-top: 7em; padding-bottom: 3em;
    }

    .contact_con input.search_field {
        width: 100%;
        box-sizing: border-box;
        padding: 18px 18px 18px 46px;
    }

    .contact_form .container {
        max-width: 100%;
    }

    .form-card .input-row {
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }

    .form-card input[type=submit] {
        width: 100%;
        box-sizing: border-box;
        padding: 18px 20px;
        margin: 40px auto 0;
    }

    .contact_cta .cta_content {
        gap: 22px;
    }
}

@media (max-width: 767px) {

    .contact_con h2 {
        font-size: 27px;
        line-height: 1.25;
    }

    .contact_form h3 {
        font-size: 24px;
    }

    .form-card textarea {
        height: 130px;
    }
}


/* =========================================================================
   12. Resources
   ========================================================================= */

@media (max-width: 991px) {

    .resources_hero_sec {
        padding-top: 7em; padding-bottom: 3em;
    }

    .resources_hero_sec .container {
        flex-direction: column;
    }

    .resources_hero_sec .container div {
        width: 100%;
    }

    .resources_hero_sec .container div:last-child {
        margin-top: 28px;
    }

    .resources_categories {
        padding-top: 3em; padding-bottom: 3em;
    }

    /* gap:90px / row-gap:130px was spacing four 24% cards apart */
    .resources_categories .categories_sec {
        gap: 22px;
        row-gap: 22px;
        margin-top: 30px;
    }

    .resources_categories .categories_sec div {
        width: 100%;
        box-sizing: border-box;
        padding: 28px 22px;
        border-radius: 26px;
    }

    .resources_categories .categories_sec div p {
        min-height: 0;
    }

    .resources_download {
        padding-top: 3em; padding-bottom: 4em;
    }
}

@media (max-width: 767px) {

    .resources_categories h3,
    .resources_categories h2 {
        font-size: 26px;
        line-height: 1.25;
        margin: 30px 0 24px;
    }

    .resources_categories .categories_sec div h4 {
        font-size: 19px;
        line-height: 1.4;
    }
}


/* =========================================================================
   13. About
   ========================================================================= */

@media (max-width: 991px) {

    .about_hero_sec {
        padding-top: 7em; padding-bottom: 3em;
    }

    .about_hero_sec .container {
        flex-direction: column;
    }

    .about_hero_sec .container div {
        width: 100%;
    }

    .about_mission_sec {
        padding-top: 3em; padding-bottom: 3em;
    }

    .about_mission_sec .mission_content,
    .about_mission_sec .mission_img {
        width: 100%;
    }

    /* 17em of top margin lined the illustration up with a desktop-tall column */
    .about_mission_sec .mission_img img {
        margin-top: 2em;
    }

    .about_mission_sec .mission_box {
        padding: 22px 20px;
        border-radius: 22px;
        margin-bottom: 30px;
        box-shadow: 6px 6px 26px 2px #00000026;
    }

    /* width:calc(100%/3 - 163px) is negative below ~490px */
    .about_cta .about_btn {
        flex-direction: column;
        gap: 16px;
    }

    .about_cta .about_btn a {
        width: 100%;
        box-sizing: border-box;
        padding: 17px 20px;
    }

    .about_cta {
        padding-top: 2em; padding-bottom: 3em;
    }
}

@media (max-width: 767px) {

    .about_hero_sec p,
    .about_mission_sec .mission_box p {
        font-size: 17px;
        line-height: 1.55;
    }

    .about_mission_sec .mission_box p {
        text-align: left;
    }
}


/* =========================================================================
   14. Pricing
   ========================================================================= */

@media (max-width: 991px) {

    .pricing_hero {
        padding-top: 8em; padding-bottom: 3em;
    }

    .pricing_hero .container div {
        width: 100%;
    }

    .pricing_hero .container div:last-child {
        justify-content: center;
        margin-top: 28px;
    }

    .pricing_list {
        padding-top: 3em; padding-bottom: 3em;
    }

    .pricing_list .container > div:first-child,
    .pricing_list .container > div:last-child {
        width: 100%;
    }

    .pricing_list .list_one > div {
        max-width: 100%;
        box-sizing: border-box;
    }

    .pricing_list .list_two div {
        padding: 0 20px 15px;
    }

    .pricing_list .list_two ul {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 26px;
    }

    .pricing_list .list_two ul li {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Live DB-backed cards from fursan-pricing/index.blade.php */
    .fursan_plans_grid {
        gap: 22px;
    }

    .fursan_plan_card {
        max-width: 100%;
    }
}

@media (max-width: 767px) {

    .pricing_hero h2 {
        font-size: 28px;
        line-height: 1.25;
        margin-bottom: 20px;
    }

    .pricing_hero p {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 30px;
    }

    .pricing_list h3 {
        font-size: 28px;
        line-height: 1.25;
        margin-bottom: 22px;
    }

    .pricing_list .list_two div p {
        font-size: 18px;
        line-height: 1.6;
    }

    .pricing_list .list_two div span,
    .pricing_list .list_two ul li,
    .pricing_list .list_one div > p,
    .pricing_list .list_one div span {
        font-size: 16px;
        line-height: 1.5;
    }
}


/* =========================================================================
   15. Browse Job 2 / 3 (raw static template pages)
   ========================================================================= */

@media (max-width: 991px) {

    .browse_job_3 {
        padding-top: 7em; padding-bottom: 3em;
    }

    .browse_job_3 .container > div {
        width: 100%;
    }

    .browse_job_3 .form_con {
        max-width: 100%;
    }

    .browse_job_3 input:not([type="submit"]) {
        width: 100%;
        box-sizing: border-box;
    }

    .browse_job_3 .form_con input:first-child {
        border-right: none;
    }

    .form_bottom {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* width:calc(100%/4 - 81px) is negative below ~430px */
    .jobs_boxes .box {
        width: 100%;
        box-sizing: border-box;
        padding: 24px 20px;
    }

    .job_categories > div {
        width: 100%;
        box-sizing: border-box;
    }

    .job_featured .Featured_title,
    .job_post .job_post_header {
        flex-wrap: wrap;
        gap: 14px;
    }

    .slide_card {
        min-width: 300px;
        padding: 22px;
    }

    .job_recruiting {
        padding-top: 3em; padding-bottom: 3em;
    }
}

@media (max-width: 767px) {

    .browse_job_3 h2 {
        font-size: 34px;
        line-height: 1.2;
    }

    .job_categories_sec h3,
    .job_recruiting h2,
    .job_featured h3,
    .job_post .job_post_header h3 {
        font-size: 28px;
        line-height: 1.25;
    }

    .slide_card {
        min-width: 268px;
    }

    .slide_card .card_bottom {
        flex-wrap: wrap;
        gap: 10px;
    }
}


/* =========================================================================
   16. Footer
   ========================================================================= */

@media (max-width: 991px) {

    .newsletter-wrapper {
        flex-direction: column;
        text-align: center;
    }

    /* style.css marks .footer-about / .footer_lang !important, so the override
       has to be !important too. */
    .footer-main .container > div {
        width: 33.3% !important;
        box-sizing: border-box;
    }

    .newsletter-form {
        width: 100%;
    }

    .footer-grid {
        gap: 20px;
    }

    .bottom-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .bottom-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-main {
        padding: 50px 24px;
        margin-top: 4em;
    }

    .footer-bottom {
        padding: 30px 24px;
    }
}

@media (max-width: 767px) {

    .footer-main .container > div {
        width: 47% !important;
    }

    .footer-about {
        width: 100% !important;
    }

    .footer-links a {
        margin-bottom: 14px;
    }
}

@media (max-width: 575px) {

    .footer-main .container > div {
        width: 100% !important;
    }

    .footer-main {
        padding: 45px 18px;
    }

    .footer-bottom {
        padding: 20px 18px;
    }

    .footer_lang select {
        width: 100%;
        max-width: 220px;
        box-sizing: border-box;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 12px;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
        border-radius: 8px;
    }

    .socials {
        justify-content: center;
    }
}