/* ============================================================
   Srieco.lk — Main Stylesheet
   Version: 2026-10-01
   ============================================================ */

/* ============================================================
   1. RESET & BASE
   ============================================================ */
.d-none { display: none; }
.move-left { margin-left: -220px; }
.shadow { box-shadow: .02rem .03rem .01rem .02rem rgba(0,0,0,.3); }
.shadow-2 { box-shadow: 0rem .2rem .4rem .3rem rgba(0,0,0,.3); }
.no-scroll { overflow: hidden; }
.border-radius { border-radius: .15rem; }

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.shake { animation: shake .8s; }

html, body, :root {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
}
@media screen and (min-width: 1450px) {
    html, body, :root { font-size: 16.5px; }
}
@media screen and (max-width: 350px) {
    html, body, :root { font-size: 15px; }
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
    font-weight: 500;
}
.set-add-size { margin: 8px 8px; }
.display-4 { font-size: 1.3rem; font-weight: 500; }
p { padding: .2rem; margin: 0; font-size: 1rem; word-break: break-word; }
a { text-decoration: none; color: #000; }
ul { list-style-type: none; padding: 0; }
input { outline: none; border: none; }

#main {
    margin-top: 3.5rem;
    overflow-x: hidden;
    min-height: 100vh;
}

#loading {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 97;
    height: 100vh;
    width: 100%;
    background-color: rgba(192,192,192,.5);
    background-repeat: no-repeat;
    background-position: center;
}

/* ============================================================
   2. PRIVACY / MODAL / MESSAGE
   ============================================================ */
#privacy-statement {
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 1.3rem;
    background-color: #181818;
    padding: .4rem;
    color: #fff;
    width: 100%;
    z-index: 99;
}
@media only screen and (max-width: 768px) {
    #privacy-statement { font-size: .7rem; padding: .2rem; }
}
#privacy-statement a { color: #fff; }
#privacy-statement button { padding: .3rem; border-radius: .2rem; }
@media only screen and (max-width: 768px) {
    #privacy-statement button { padding: .2rem; border-radius: .1rem; }
}

#report-job-btn {
    display: block;
    background: #000;
    padding: .6rem;
    border-radius: .2rem;
    margin-left: auto;
    color: #fff;
    border: none;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,.4);
}
.modal .modal-content {
    background-color: #fefefe;
    margin: 2% auto;
    padding: 1rem;
    border: 1px solid #888;
    width: 90%;
    max-width: 576px;
    background-color: #00A651;
}
.modal .modal-content label { font-size: .8rem; display: block; }
.modal .modal-content button {
    padding: .3rem;
    background-color: red;
    color: #fff;
    border: none;
}
.modal .modal-content div { margin: .3rem 0; }
.modal .modal-content div input {
    border-radius: .1rem;
    padding: .3rem;
    font-size: .9rem;
    width: 100%;
}
.modal .modal-content div span { display: block; font-size: .8rem; }
.modal .modal-content div textarea {
    width: 99%;
    border: .5px solid #000;
    border-radius: .1rem;
    font-size: .8rem;
}
.modal .close-modal {
    color: #020202;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.show-message {
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 1001;
    position: fixed;
    background-color: rgba(0,0,0,.8);
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
}
.show-message span#show-message {
    position: relative;
    z-index: 1000;
    text-align: center;
    background-color: #fff;
    padding: 1rem 1rem 1rem .4rem;
    margin-top: -30%;
}
.show-message span#show-message::before {
    content: "i";
    z-index: 1000;
    font-weight: bold;
    font-style: italic;
    padding: .2rem .6rem;
    border: .5px solid #444;
    color: #000;
    border-radius: 50%;
    background-color: #00A651;
    margin-right: .4rem;
}

/* ============================================================
   3. TOP NAVBAR
   ============================================================ */
nav.navbar-top {
    z-index: 99;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #f5f5f5;
}
nav.navbar-top div.left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    justify-content: start;
}
nav.navbar-top div.left div { display: inline-block; }
nav.navbar-top div.left div amp-img { display: block; margin: auto; cursor: pointer; }
nav.navbar-top div.left div.bars-svg {
    width: 2rem;
    margin-right: 1rem;
    margin-left: .2rem;
    border-radius: 100%;
}
nav.navbar-top div.left div.bars-svg svg {
    height: auto;
    border-radius: 50%;
    padding: .5rem;
    transition: background-color 1s ease;
    fill: #424242;
}
nav.navbar-top div.left div.bars-svg:hover {
    background-color: rgba(0,0,0,.3);
    border-radius: 50%;
}
nav.navbar-top div.left div.logo-img svg { width: 180px; }

nav.navbar-top div.right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
}
nav.navbar-top div.right ul { margin: 0; }
nav.navbar-top div.right ul li {
    display: inline-block;
    padding: 0rem 1.5rem;
    font-size: .8rem;
    position: relative;
    font-weight: 500;
}
nav.navbar-top div.right ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
nav.navbar-top div.right ul li i svg { height: 1.4rem; }
nav.navbar-top div.right ul li i svg path { stroke-width: 22px; }
nav.navbar-top div.right ul li i svg polyline { stroke-width: 17px; }

nav.navbar-top div.right ul li ul {
    position: absolute;
    background: #00A651;
    color: #fff;
    font-weight: 600;
    top: 4rem;
    right: 1.3rem;
    width: 8rem;
    display: none;
    text-align: center;
    border-radius: 5px;
}
nav.navbar-top div.right ul li ul::before {
    content: "";
    position: absolute;
    background: #00A651;
    top: -0.45rem;
    right: .27rem;
    height: 1.3rem;
    width: 1.3rem;
    z-index: 99;
    transform: rotate(135deg);
}
nav.navbar-top div.right ul li ul li {
    display: block;
    font-size: .9rem;
    cursor: pointer;
    border-bottom: .05rem solid rgba(0,0,0,.3);
    padding: .5rem 0;
}
nav.navbar-top div.right ul li ul li:hover {
    background-color: rgba(0,0,0,.3);
    color: #fff;
}
nav.navbar-top div.right ul li:hover ul { display: block; }

/* ============================================================
   4. SIDE MENU (hamburger)
   ============================================================ */
nav.side-icons {
    position: fixed;
    z-index: 99;
}
nav.side-icons div.overlay {
    top: 3.5rem;
    position: fixed;
    width: 220px;
    background-color: #f5f5f5;
    height: 100%;
    transition: margin ease-in-out .3s;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}
nav.side-icons div ul li {
    padding: .6rem 1rem .6rem 2rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
nav.side-icons div ul li a {
    transition: all .3s ease;
    color: #181818;
    display: block;
}
nav.side-icons div ul li:hover {
    padding-left: 1rem;
    color: #007A3D;
}

/* ============================================================
   5. FOOTER
   ============================================================ */
footer {
    background-color: #f1f1f1;
    margin-bottom: 1rem;
}
footer .footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: .8rem;
    grid-gap: .8rem;
}
@media only screen and (max-width: 576px) {
    footer .footer-container { grid-template-columns: 1fr; }
}
footer .footer-container .item h2 { color: #000; margin-bottom: 1rem; }
footer .footer-container .item ul { margin-top: 0; }
footer .footer-container .item ul li { text-indent: .5rem; padding: .2rem 0; }
footer .footer-container .item ul li a {
    color: #000;
    font-size: 1rem;
    transition: color .3s ease-in;
}
footer .footer-container .item ul li a:hover { color: #007A3D; }
footer .footer-container .item.item-1 a img { height: 40px; padding: 8px; width: 81.5px; }
footer .footer-container .item.item-2 a img { height: 30px; width: 30px; padding: .5rem; }
footer .copyright {
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
}
footer .copyright span {
    font-size: .65rem;
    background-color: #fff;
    padding: .1rem .3rem;
    border-radius: .4rem;
}

/* ============================================================
   6. INDEX-TOP BANNER
   ============================================================ */
section#index-top {
    height: 4rem;
    background-color: rgba(0,0,0,.3);
}
@media screen and (max-width: 576px) {
    section#index-top { height: 3.5rem; }
}
section#index-top h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00A651;
    color: rgba(0,0,0,.8);
    padding: 1rem;
    transition: all ease-in-out .3s;
}
@media screen and (max-width: 576px) { section#index-top h1 { font-size: 1.3rem; } }
@media screen and (max-width: 350px) { section#index-top h1 { font-size: 1.1rem; } }
@media screen and (max-width: 250px) { section#index-top h1 { font-size: .95rem; } }

div.heading-title { padding: 1rem 0; }
div.heading-title h1 { font-size: 1.3rem; }
div.heading-title p { float: right; font-size: .7rem; }

/* ============================================================
   7. FORMS (Login / Signup / Post Job / etc.)
   ============================================================ */
section#login-bar,
section#signup-bar,
section#post-job,
section#reset-password,
section#new-password,
section#edit-post {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    flex-direction: column;
}
@media screen and (max-width: 576px) {
    section#login-bar,
    section#signup-bar,
    section#post-job,
    section#reset-password,
    section#new-password,
    section#edit-post {
        padding: 1.3rem;
    }
}
section#login-bar h1,
section#signup-bar h1,
section#post-job h1,
section#reset-password h1,
section#new-password h1,
section#edit-post h1 { font-size: 1.2rem; }

section#login-bar p a,
section#signup-bar p a,
section#post-job p a,
section#reset-password p a,
section#new-password p a,
section#edit-post p a { font-size: 1.3rem; color: #007A3D; }

section#login-bar form,
section#signup-bar form,
section#post-job form,
section#reset-password form,
section#new-password form,
section#edit-post form {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 1.6rem;
    width: 98%;
    max-width: 560px;
    background-color: #00A651;
    transition: all ease .3s;
}
section#login-bar form .mobile,
section#signup-bar form .mobile,
section#post-job form .mobile,
section#reset-password form .mobile,
section#new-password form .mobile,
section#edit-post form .mobile {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-column-gap: .2rem;
}
@media screen and (max-width: 576px) {
    section#login-bar form .mobile,
    section#signup-bar form .mobile,
    section#post-job form .mobile,
    section#reset-password form .mobile,
    section#new-password form .mobile,
    section#edit-post form .mobile {
        grid-template-columns: 1.2fr 3fr;
    }
}
@media screen and (max-width: 350px) {
    section#login-bar form .mobile,
    section#signup-bar form .mobile,
    section#post-job form .mobile,
    section#reset-password form .mobile,
    section#new-password form .mobile,
    section#edit-post form .mobile {
        grid-template-columns: 1fr 1fr;
    }
}
section#login-bar form .mobile select,
section#signup-bar form .mobile select,
section#post-job form .mobile select,
section#reset-password form .mobile select,
section#new-password form .mobile select,
section#edit-post form .mobile select { width: 100%; }

section#login-bar form .form-group,
section#signup-bar form .form-group,
section#post-job form .form-group,
section#reset-password form .form-group,
section#new-password form .form-group,
section#edit-post form .form-group { position: relative; }

section#login-bar form .form-group span,
section#signup-bar form .form-group span,
section#post-job form .form-group span,
section#reset-password form .form-group span,
section#new-password form .form-group span,
section#edit-post form .form-group span { font-size: .8rem; }

section#login-bar form .form-group.signup_agreement a,
section#signup-bar form .form-group.signup_agreement a,
section#post-job form .form-group.signup_agreement a,
section#reset-password form .form-group.signup_agreement a,
section#new-password form .form-group.signup_agreement a,
section#edit-post form .form-group.signup_agreement a { color: blue; font-weight: bold; }

section#login-bar form .form-group select,
section#signup-bar form .form-group select,
section#post-job form .form-group select,
section#reset-password form .form-group select,
section#new-password form .form-group select,
section#edit-post form .form-group select {
    display: block;
    padding: .5rem;
    border: none;
    width: 100%;
}

section#login-bar form .form-group input,
section#signup-bar form .form-group input,
section#post-job form .form-group input,
section#reset-password form .form-group input,
section#new-password form .form-group input,
section#edit-post form .form-group input {
    width: 100%;
    padding: .5rem;
    background: #fff;
    font-size: 1rem;
}

section#login-bar form .form-group input:focus + label,
section#login-bar form .form-group input:not(:placeholder-shown) + label,
section#signup-bar form .form-group input:focus + label,
section#signup-bar form .form-group input:not(:placeholder-shown) + label,
section#post-job form .form-group input:focus + label,
section#post-job form .form-group input:not(:placeholder-shown) + label,
section#reset-password form .form-group input:focus + label,
section#reset-password form .form-group input:not(:placeholder-shown) + label,
section#new-password form .form-group input:focus + label,
section#new-password form .form-group input:not(:placeholder-shown) + label,
section#edit-post form .form-group input:focus + label,
section#edit-post form .form-group input:not(:placeholder-shown) + label {
    margin-top: -1rem;
    margin-left: -.56rem;
    font-size: .8rem;
    font-weight: 500;
}

section#login-bar form .form-group.submit input,
section#signup-bar form .form-group.submit input,
section#post-job form .form-group.submit input,
section#reset-password form .form-group.submit input,
section#new-password form .form-group.submit input,
section#edit-post form .form-group.submit input {
    width: 6rem;
    display: block;
    cursor: pointer;
}

section#login-bar form .form-group label,
section#signup-bar form .form-group label,
section#post-job form .form-group label,
section#reset-password form .form-group label,
section#new-password form .form-group label,
section#edit-post form .form-group label {
    position: absolute;
    font-size: .75rem;
    transition: all ease .4s;
    margin-bottom: .3rem;
    margin-top: .6rem;
    left: .5rem;
    cursor: text;
}

section#reset-password .form-group button,
section#new-password .form-group button { padding: .5rem; border: none; }
section#reset-password .form-group.reset-password p,
section#new-password .form-group.reset-password p { font-size: .8rem; }

section#signup-bar form .date label { font-size: .8rem; }
section#signup-bar form .date select { outline: none; border: none; padding: .5rem; }
section#signup-bar form .date select option { margin-top: 10px; }
section#signup-bar form .duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1rem;
}
@media screen and (max-width: 576px) {
    section#signup-bar form .duo { grid-template-columns: 1fr; grid-row-gap: 1.6rem; }
}

section#post-job form .jExperience::after,
section#edit-post form .jExperience::after {
    content: "Years";
    position: absolute;
    top: .5rem;
    right: .5rem;
}
section#post-job form .jSalary::after,
section#edit-post form .jSalary::after {
    content: "LKR";
    position: absolute;
    top: .5rem;
    right: .5rem;
}
section#post-job form div.form-group textarea,
section#edit-post form div.form-group textarea { width: 99%; font-size: .9rem; }

section#post-job form .duo,
section#edit-post form .duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1rem;
}
@media screen and (max-width: 576px) {
    section#post-job form .duo,
    section#edit-post form .duo {
        grid-template-columns: 1fr;
        grid-row-gap: 1.6rem;
    }
}
section#post-job form div label span,
section#edit-post form div label span { color: #00A651; font-weight: bold; }

.insert-text {
    display: inline;
    margin-right: .4rem;
    border: 1px solid #000;
    padding: .3rem;
    border-radius: .3rem;
    line-height: 2.5rem;
    transition: .2s ease;
}
.insert-text:hover {
    background: #00A651;
    color: #000;
    padding: .35rem;
    border-radius: .2rem;
}
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%; left: 0; right: 0;
}
.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: .5px solid #d4d4d4;
}
.autocomplete-items div:hover { background-color: #e9e9e9; }
.autocomplete-active { background-color: #1e90ff; color: #fff; }

/* ============================================================
   8. JOB VIEW / RECENT JOBS / SEARCH JOBS
   ============================================================ */
section#view-job,
section#recent-jobs,
section#search-jobs {
    display: flex;
    flex-direction: column;
    padding: .6rem;
    max-width: 900px;
    margin: auto;
}
section#view-job .item-1 .img-fluid,
section#recent-jobs .item-1 .img-fluid,
section#search-jobs .item-1 .img-fluid {
    width: auto;
    max-height: 300px;
    margin-left: -.8rem;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
}
section#view-job .item-1 .img-fluid:hover,
section#recent-jobs .item-1 .img-fluid:hover,
section#search-jobs .item-1 .img-fluid:hover { opacity: .8; }

/* ---------- Search bar ---------- */
section#search-bar {
    background-color: #f5f5f5;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    min-height: 100px;
    padding: 1rem;
    max-width: 900px;
    margin: auto;
}
@media screen and (max-width: 576px) {
    section#search-bar { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media screen and (max-width: 350px) {
    section#search-bar { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
section#search-bar div.left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
section#search-bar div.left form h1 {
    font-size: 1.2rem;
    color: rgba(0,0,0,.8);
    margin-bottom: 1.3rem;
}
@media screen and (max-width: 576px) {
    section#search-bar div.left form h1 { font-size: .9rem; }
}
section#search-bar div.left form div {
    display: flex;
    flex-direction: row;
    background-color: #00A651;
    border-radius: .3rem;
}
section#search-bar div.left form div .form-group {
    flex-direction: column;
    position: relative;
    font-size: 1.2rem;
    width: 100%;
}
section#search-bar div.left form div .form-group input {
    position: relative;
    outline: none;
    border: none;
    background: none;
    padding: .7rem;
    width: 100%;
    color: rgba(0,0,0,.8);
}
section#search-bar div.left form div .form-group input:focus + label,
section#search-bar div.left form div .form-group input:valid + label,
section#search-bar div.left form div .form-group input:not(:placeholder-shown) + label {
    margin-top: -.9rem;
    margin-left: 0;
    font-size: .6rem;
    font-weight: 500;
}
section#search-bar div.left form div .form-group label {
    position: absolute;
    font-size: .75rem;
    margin-left: 1rem;
    margin-top: .8rem;
    transition: all ease .4s;
}
section#search-bar div.left form div button {
    align-self: flex-end;
    outline: none;
    border: none;
    background: none;
    width: 20%;
    cursor: pointer;
    margin-left: 1rem;
    position: relative;
}
section#search-bar div.left form div button:focus {
    outline: none;
    box-shadow: none;
    border: none;
}
section#search-bar div.left form div button svg {
    position: absolute;
    fill: #000;
    stroke: #000;
    height: 2rem;
    bottom: .1rem;
    right: .2rem;
}
section#search-bar div.left form div button svg:hover {
    fill: #007A3D;
    stroke: #007A3D;
    transition: all ease .4s;
}
section#search-bar div.right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
section#search-bar div.right div { margin: 0 .5rem; }
section#search-bar div.right div a i svg { display: block; margin: auto; height: 3rem; width: 3rem; }
section#search-bar div.right div a span { font-size: .7rem; font-weight: bold; }
@media screen and (max-width: 992px) {
    section#search-bar div.right div { margin-top: 1.5rem; }
}

/* ---------- View Job ---------- */
section#view-job { margin: auto; }
section#view-job .view-job {
    width: 96%;
    -webkit-user-select: none;
    user-select: none;
}
section#view-job .view-job .j-description { line-height: 1.5rem; }
section#view-job .view-job .j-description a { color: #007A3D; }
section#view-job .item { padding-left: .8rem; }
section#view-job h1,
section#view-job h2 {
    font-size: 1.5rem;
    margin: .5rem 0 .5rem -.8rem;
}
@media screen and (max-width: 576px) {
    section#view-job h1,
    section#view-job h2 { font-size: 1.4rem; }
}
section#view-job hr { display: block; margin-left: -.8rem; }
section#view-job p { font-size: 1rem; }
section#view-job p strong { color: #181818; }
section#view-job p.j-role {
    font-size: 1rem;
    line-height: 1;
    margin-bottom: 1rem;
    margin-left: -.8rem;
}
@media screen and (max-width: 768px) {
    section#view-job p.j-role { line-height: 1rem; }
}
section#view-job p.j-id {
    font-size: 1rem;
    text-align: right;
    line-height: 0;
    color: gray;
}

section#related-jobs { padding: 1rem; max-width: 900px; margin: auto; }
section#related-jobs .content { display: flex; flex-direction: column; }

/* ============================================================
   9. JOB CARD
   ============================================================ */
.job-card {
    border: 1px solid rgba(0,0,0,.3);
    border-radius: .6rem;
    transition: all .5s ease;
    box-shadow: 0 0 4px 1px rgba(0,0,0,.4);
    position: relative;
    margin: .5rem 0;
}
.job-card::after {
    content: "";
    position: absolute;
    border-bottom-left-radius: .7rem;
    border-bottom-right-radius: .7rem;
    width: 100%;
    height: 5px;
    background-color: #00A651;
    left: 0;
    bottom: 2.5px;
    box-shadow: 0 2px 1px 0 #00A651;
    opacity: 0;
    transition: all .3s ease-in;
}
.job-card:hover { box-shadow: 0 0 4px 2px rgba(0,0,0,.7); }
.job-card:hover::after { opacity: 1; }
.job-card h1,
.job-card h2 { padding: .5rem; font-size: 1.3rem; margin-bottom: .6rem; }
@media only screen and (max-width: 576px) {
    .job-card h1,
    .job-card h2 { font-size: 1rem; }
}
.job-card .border-circle {
    margin-bottom: .4rem;
    padding: .5rem .9rem;
    box-shadow: 0 0 6px 0 rgba(0,0,0,.3);
}
.job-card .border-circle .row {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    margin: .3rem 0;
}
.job-card .border-circle .row p { font-size: 1rem; }
.job-card .border-circle .row .link { color: #007A3D; font-size: .63rem; }
.job-card .btn {
    display: flex;
    justify-content: space-between;
    padding: .3rem .5rem;
    margin-bottom: .4rem;
}
.job-card .btn p {
    display: inline;
    font-size: .9rem;
    align-self: center;
    border-radius: .3rem;
    padding: .1rem .4rem;
}
.job-card .btn a {
    background-color: #00A651;
    color: #fff;
    border: none;
    border-radius: .25rem;
    padding: .2rem 1.5rem;
}
@media only screen and (max-width: 350px) {
    .job-card .btn a { padding: .2rem 1rem; }
}
.job-card .btn a:hover { background-color: #007A3D; }
section#recent-jobs .item-1 .job-card,
section#search-jobs .item-1 .job-card { margin: 1rem 0; }
section#recent-jobs .item-1 .add,
section#search-jobs .item-1 .add {
    border-radius: .6rem;
    box-shadow: 0 0 4px 1px rgba(0,0,0,.4);
}

/* Pagination */
section#recent-jobs .item-1 nav ul.pagination li,
section#search-jobs .item-1 nav ul.pagination li {
    display: inline;
    padding: .3rem .45rem;
    background-color: #007A3D;
    border-radius: .6rem;
    margin: 0rem .2rem;
    line-height: 2.5rem;
}
@media only screen and (max-width: 992px) {
    section#recent-jobs .item-1 nav ul.pagination li,
    section#search-jobs .item-1 nav ul.pagination li {
        padding: .3rem .45rem;
        font-size: .7rem;
        margin: 0rem .1rem;
    }
}
@media only screen and (max-width: 576px) {
    section#recent-jobs .item-1 nav ul.pagination li,
    section#search-jobs .item-1 nav ul.pagination li {
        padding: .3rem .4rem;
        font-size: .7rem;
        margin: 0rem .05rem;
    }
}
section#recent-jobs .item-1 nav ul.pagination li a,
section#search-jobs .item-1 nav ul.pagination li a {
    color: #fff;
    word-break: keep-all;
}

/* ============================================================
   10. STATIC PAGES (About / Privacy / FAQ)
   ============================================================ */
#about-us, #privacy-policy, #faq, #user-agreements { padding: 1.5rem; }
#about-us h1, #privacy-policy h1, #faq h1, #user-agreements h1 {
    background-color: #00A651;
    border-radius: .3rem;
}
#about-us h1, #about-us h2,
#privacy-policy h1, #privacy-policy h2,
#faq h1, #faq h2,
#user-agreements h1, #user-agreements h2 {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-family: cursive;
    padding: .3rem;
}
#about-us p, #privacy-policy p, #faq p, #user-agreements p { margin-left: 1rem; }
#about-us img, #privacy-policy img, #faq img, #user-agreements img {
    float: right;
    max-height: 200px;
}
@media only screen and (max-width: 768px) {
    #about-us img, #privacy-policy img, #faq img, #user-agreements img {
        width: 100%;
        height: auto;
        max-height: none;
    }
}
#privacy-policy ul li,
#faq ul li,
#user-agreements ul li {
    line-height: 1.6rem;
    margin-left: 2rem;
    list-style-type: square;
}
#faq h2 { font-size: 1rem; cursor: pointer; }

/* ============================================================
   11. USER JOBS VIEW
   ============================================================ */
#view-user-jobs h1 { font-weight: bold; }
#view-user-jobs .container {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}
@media only screen and (max-width: 768px) {
    #view-user-jobs .container { grid-template-columns: 1fr; }
}
#view-user-jobs .container .job-card .user-tab {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: .8rem;
    background-color: #00A651;
}
#view-user-jobs .container .job-card .user-tab p { display: inline; }
#view-user-jobs .container .job-card .user-tab p,
#view-user-jobs .container .job-card .user-tab a {
    padding: .6rem;
    background-color: #fff;
    border-radius: .4rem;
}

/* ============================================================
   12. JOB ROLES / RELATED SEARCH / SEE ALSO
   ============================================================ */
.job-roles-list li { font-weight: bold; padding: .3rem 0; }
.job-roles-list li a { color: #007A3D !important; }
.job-roles-list li span { font-weight: 300; color: #181818; font-size: .7rem; }

.related-search-jobs { padding: .6rem 0; }
.related-search-jobs span { display: inline-block; }
.related-search-jobs span a {
    color: #fff;
    padding: .3rem;
    margin-right: .3rem;
    border-radius: .2rem;
    font-size: .9rem;
    line-height: 2.3rem;
    background: #00A651;
    transition: ease-in .3s;
}
.related-search-jobs span a:hover { color: #181818; }

.see-also { padding: 1rem 0; }
.see-also h2 { margin-bottom: .6rem; }
.see-also a {
    font-size: 1.2rem;
    background-color: #00A651;
    color: #fff;
    padding: .6rem .3rem;
    border-radius: .3rem;
    transition: ease background-color .3s;
}
.see-also a:hover { background-color: #007A3D; }

/* Ad slots */
.responsive-view-job-ad,
.index-page-ad,
.index-page-bottom-ad,
.job-card-ads {
    width: auto;
    height: 250px;
    margin: .5rem auto;
}

/* ============================================================
   13. UTILITIES — Mobile line breaks
   ============================================================ */
.mobile-break { display: none; }
.desktop-only { display: inline; }

/* ============================================================
   14. MOBILE OVERRIDES (max-width: 640px)
   ============================================================ */
@media (max-width: 640px) {

    /* Prevent horizontal scroll everywhere */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    body { overflow-x: hidden !important; }

    .mobile-break {
        display: block;
        content: "";
        height: 0;
    }
    .desktop-only { display: none !important; }

    * {
        -webkit-tap-highlight-color: transparent;
    }
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    table { font-size: .82rem !important; }
    section, main, .container, #main {
        padding-left: .8rem !important;
        padding-right: .8rem !important;
    }

    /* ---------- HEADER ---------- */
    nav.navbar-top {
        padding: .4rem .5rem !important;
        min-height: auto !important;
    }
    nav.navbar-top div.left div.logo-img a,
    nav.navbar-top div.left div.logo-img img {
        max-height: 32px !important;
        max-width: 130px !important;
        height: auto !important;
    }
    nav.navbar-top div.left div.bars-svg {
        width: 1.6rem !important;
        margin-right: .5rem !important;
    }
    nav.navbar-top div.left div.bars-svg svg {
        padding: .3rem !important;
    }
    nav.navbar-top div.right ul {
        display: flex !important;
        gap: .05rem !important;
        margin: 0 !important;
    }
    nav.navbar-top div.right ul li {
        padding: 0 .3rem !important;
        font-size: .62rem !important;
    }
    nav.navbar-top div.right ul li i svg {
        height: 1.1rem !important;
        width: 1.1rem !important;
    }
    nav.navbar-top div.right ul li span {
        font-size: .58rem !important;
        margin-top: .1rem !important;
        line-height: 1 !important;
    }
    nav.navbar-top div.right ul li span span[data-bookmark-count] {
        top: -.35rem !important;
        right: -.65rem !important;
        font-size: .5rem !important;
        padding: 0 4px !important;
        min-width: 14px !important;
    }

    /* ---------- JOB DETAIL ---------- */
    #view-job { padding: .8rem 1rem 4rem !important; }
    #view-job h1 {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
        margin-bottom: .5rem !important;
        padding-right: 3rem !important;
    }

    .j-role {
        font-size: .88rem !important;
        line-height: 1.65 !important;
        display: block !important;
        margin-bottom: 1rem !important;
    }
    .j-role strong { color: #333 !important; }

    .j-id {
        display: block !important;
        font-size: .8rem !important;
        color: #666 !important;
        padding: .6rem 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        margin-bottom: 1rem !important;
        line-height: 1.6 !important;
        text-align: left !important;
    }

    /* Job meta line — stack on mobile */
    .job-meta-line {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .35rem !important;
    }
    .job-meta-line > span {
        display: block !important;
        width: 100% !important;
    }

    #view-job > div > div[style*="border-left:4px solid"] {
        padding: .8rem 1rem !important;
        margin: .8rem 0 1.2rem !important;
        font-size: .82rem !important;
        border-radius: 8px !important;
    }

    #view-job div[style*="grid-template-columns:repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
        gap: .7rem !important;
    }
    #view-job div[style*="grid-template-columns:repeat(auto-fit"] > div {
        padding: .85rem 1rem !important;
        font-size: .9rem !important;
    }

    .j-description h2 {
        font-size: 1.1rem !important;
        margin: 1.5rem 0 .8rem !important;
        padding-bottom: .5rem !important;
        border-bottom: 1px solid #f0f0f0;
    }
    .j-description p {
        font-size: .93rem !important;
        line-height: 1.75 !important;
        color: #444 !important;
    }

    #view-job button[data-bookmark] {
        padding: .6rem 1.2rem !important;
        font-size: .88rem !important;
    }

    #view-job div[style*="linear-gradient(135deg,#007A3D,#00A651)"] {
        padding: 1.2rem !important;
        margin-top: 1.2rem !important;
    }
    #view-job div[style*="linear-gradient(135deg,#007A3D,#00A651)"] a {
        padding: .8rem 1.6rem !important;
        font-size: .95rem !important;
    }

    #view-job div[style*="background:#f5f9f7"] { padding: 1rem !important; }
    #view-job div[style*="background:#f5f9f7"] a,
    #view-job div[style*="background:#f5f9f7"] button {
        padding: .5rem 1rem !important;
        font-size: .82rem !important;
    }

    #view-job div[style*="grid-template-columns:repeat(auto-fill,minmax(240px"] {
        grid-template-columns: 1fr !important;
        gap: .7rem !important;
    }

    /* WhatsApp float — smaller + repositioned */
    a[href*="wa.me"][style*="position:fixed"] {
        width: 46px !important;
        height: 46px !important;
        bottom: 14px !important;
        right: 14px !important;
        box-shadow: 0 3px 10px rgba(37,211,102,.45) !important;
    }
    a[href*="wa.me"][style*="position:fixed"] svg {
        width: 22px !important;
        height: 22px !important;
    }

    #view-job p a { font-size: .88rem !important; }

    /* ---------- JOB CARDS ---------- */
    .job-card {
        padding: 1rem !important;
        margin-bottom: .8rem !important;
    }
    .job-card h2, .job-card h3 {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    .job-card p { font-size: .85rem !important; }
    .job-card .btn {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .6rem !important;
    }
    .job-card .btn > div {
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* ---------- FOOTER ---------- */
    .footer-cat-tiles {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: .5rem !important;
    }
    .footer-cat-tile {
        min-height: 90px !important;
        padding: .7rem .3rem !important;
    }
    .footer-cat-tile .cat-icon { font-size: 1.2rem !important; }
    .footer-cat-tile .cat-name { font-size: .68rem !important; }
    .footer-cat-tile .cat-count { font-size: .6rem !important; }

    /* ---------- LOGIN / SIGNUP ---------- */
    #login-bar, #signup-bar {
        padding: 1.2rem .9rem 5rem !important;
        margin: 1.2rem auto 2rem !important;
    }
    #login-bar form, #signup-bar form {
        padding: 1.4rem 1.2rem !important;
        border-radius: 10px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
    }
    #login-bar h1, #signup-bar h1 {
        font-size: 1.2rem !important;
        margin-bottom: .4rem !important;
        text-align: center !important;
    }
    #login-bar > p, #signup-bar > p {
        font-size: .85rem !important;
        text-align: center !important;
        margin-bottom: 1.2rem !important;
    }
    #login-bar .form-group, #signup-bar .form-group { margin-bottom: 1rem !important; }
    #login-bar .form-group label,
    #signup-bar .form-group label {
        font-size: .82rem !important;
        margin-bottom: .35rem !important;
    }
    #login-bar .form-group input,
    #signup-bar .form-group input,
    #login-bar .form-group select,
    #signup-bar .form-group select {
        padding: .7rem .9rem !important;
        font-size: .92rem !important;
        border-radius: 6px !important;
    }
    #login-bar .form-group.submit input,
    #signup-bar .form-group.submit input,
    #login-bar button[type="submit"],
    #signup-bar button[type="submit"] {
        width: 100% !important;
        padding: .85rem !important;
        font-size: .95rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        background: #00A651 !important;
        color: #fff !important;
        border: none !important;
        cursor: pointer !important;
    }
    #login-bar > div[style*="—"],
    #login-bar > div:not([class]),
    #signup-bar > div:not([class]) {
        margin: 1.2rem auto !important;
        text-align: center !important;
        display: block !important;
    }
    #login-bar a[href*="google"],
    #signup-bar a[href*="google"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .6rem !important;
        width: auto !important;
        max-width: 100% !important;
        padding: .8rem 1.5rem !important;
        font-size: .92rem !important;
        border-radius: 8px !important;
    }
    #login-bar a[href*="google"] img,
    #signup-bar a[href*="google"] img {
        width: 18px !important;
        height: 18px !important;
    }
    #login-bar > p:last-of-type,
    #signup-bar > p:last-of-type {
        font-size: .88rem !important;
        padding: 0 .5rem !important;
        line-height: 1.5 !important;
        margin-bottom: .8rem !important;
    }

    /* Hide WhatsApp on login/signup */
    body.login-page a[href*="wa.me"][style*="position:fixed"],
    body.signup-page a[href*="wa.me"][style*="position:fixed"] {
        display: none !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    nav.navbar-top div.right ul li > a > span:not([data-bookmark-count]) {
        font-size: .55rem !important;
    }
}
@media (max-width: 380px) {
    #login-bar form, #signup-bar form { padding: 1.2rem .9rem !important; }
    #login-bar h1, #signup-bar h1 { font-size: 1.1rem !important; }
}