@charset "utf-8";

.hero-card-left, .latest-card {
    min-height: 500px !important;
    display: flex !important
}

.button-box, .hero-card-left, .latest-card, .row.equal-height {
    display: flex !important
}

    .hero-card-left h2, .latest-card .button-box {
        margin-bottom: 25px
    }

#newprojects .containernewproject, #newtradiesholder .containernewproject {
    font-family: Arial,sans-serif !important
}

.latest-card, .search-section {
    contain: layout
}

:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --accent-gradient: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%);
    --navy-blue: #003366;
    --navy-blue-hover: #004080;
    --text-primary: #003366;
    --text-secondary: #003366;
    --border-color: #d3d3d3;
    --shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.3);
    --radius: 16px;
    --radius-lg: 20px;
    --radius-xl: 50px
}

body {
    min-height: 100vh;
    background: linear-gradient(135deg,#667eea 0,#764ba2 100%);
    color: #333;
    overflow-x: hidden;
    font-family: "Merriweather Sans",sans-serif
}

    body::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='grid' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 10 0 L 0 0 0 10' fill='none' stroke='rgba(205,255,255,0.1)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23grid)'/%3E%3C/svg%3E");
        opacity: .3;
        pointer-events: none;
        z-index: -1
    }

#tradiesearch-modal .modal-content, .modal-content {
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: var(--radius-lg) !important;
    border: 2px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important
}

#modal_information {
    background: linear-gradient(135deg,rgba(255,255,255,.95) 0,rgba(255,248,225,.9) 50%,rgba(255,245,200,.85) 80%,rgba(255,240,180,.8) 100%) !important;
    border-radius: var(--radius) !important;
    padding: 2rem !important;
    border: 2px solid rgba(255,215,0,.3) !important;
    margin-top: 1rem !important
}

.hero-mainheading {
    color: #fff;
    font-size: 3.5rem !important;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,.5)
}

.hero-card-left {
    padding: 40px 40px 60px !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.3) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    transition: .4s cubic-bezier(.25, .46, .45, .94) !important;
    cursor: pointer !important;
    flex-direction: column !important;
    background: rgba(0,0,0,.4)
}

@media (min-width:769px) {
    .hero-card-left {
        backdrop-filter: blur(10px)
    }
}

.hero-card-left h2 {
    color: rgba(255,255,255,.9);
    font-size: 1.4rem !important;
    font-weight: 400;
    line-height: 1.6
}

.btnsearchi, .button-box a[href], .button-box > a, div.button-box a {
    background: linear-gradient(135deg,gold 0,#ff8c00 100%);
    font-weight: 600 !important;
    transition: .4s cubic-bezier(.4, 0, .2, 1) !important;
    position: relative !important;
    box-shadow: 0 8px 25px rgba(255,204,25,.3) !important
}

.hero-card-left:hover, .latest-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,.3) !important;
    border-color: rgba(255,204,25,.6) !important
}

.col-lg-6.latestarea, .row.equal-height > .col-lg-6 {
    display: flex !important;
    flex-direction: column !important
}

.row.equal-height {
    align-items: stretch !important
}

.button-box a[href], .button-box > a, .quote-btn, div.button-box a {
    color: #151515 !important;
    font-family: Roboto !important;
    align-items: center !important;
    text-decoration: none !important
}

.button-box {
    gap: 15px !important;
    z-index: 0 !important
}

    .button-box a[href], .button-box > a, div.button-box a {
        border: 2px solid #ffcc19 !important;
        display: inline-flex !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 50px !important;
        cursor: pointer !important;
        overflow: hidden !important;
        min-width: fit-content !important;
        white-space: nowrap !important;
        line-height: normal !important;
        vertical-align: baseline !important;
        box-sizing: border-box !important;
        z-index: auto !important;
        padding: .8em 1.2em !important;
        font-size: 1rem !important
    }

.latest-card, .latest-card .containernewproject {
    overflow: hidden !important;
    flex-direction: column !important;
    cursor: pointer !important
}

.button-box a[href]::before, .button-box > a::before, div.button-box a::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.6) !important;
    transform: translate(-50%,-50%) !important;
    transition: width .6s,height .6s !important;
    pointer-events: none !important;
    z-index: 1 !important
}

.button-box a[href]:active::before, .button-box > a:active::before, div.button-box a:active::before {
    width: 300px !important;
    height: 300px !important
}

#tradiesearch-modal .primary-button:hover, .button-box a[href]:focus, .button-box a[href]:hover, .button-box > a:focus, .button-box > a:hover, div.button-box a:focus, div.button-box a:hover {
    background: linear-gradient(135deg,#036 0,#004080 100%) !important;
    border-color: #036 !important;
    color: #fff !important;
    transform: scale(1.05) translateY(-2px) !important;
    box-shadow: 0 12px 35px rgba(0,51,102,.4) !important;
    text-decoration: none !important
}

.button-box a.border[href], .button-box > a.border, div.button-box a.border {
    border-color: #036 !important;
    background: rgba(255,255,255,.9) !important;
    color: #036 !important;
    font-weight: 500 !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 25px rgba(0,51,102,.15) !important
}

    .button-box a.border[href]::before, .button-box > a.border::before, div.button-box a.border::before {
        background: rgba(0,51,102,.3) !important
    }

    .button-box a.border[href]:focus, .button-box a.border[href]:hover, .button-box > a.border:focus, .button-box > a.border:hover, div.button-box a.border:focus, div.button-box a.border:hover {
        background: #036 !important;
        color: #fff !important;
        transform: scale(1.05) translateY(-2px) !important;
        box-shadow: 0 12px 35px rgba(0,51,102,.4) !important;
        text-decoration: none !important
    }

.button-box a.btn-small {
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 25px !important;
    min-width: auto !important;
    max-width: auto !important;
    line-height: normal !important
}

.latest-card button, .latest-card button.btnlatest, .latest-card button.btnlatestselected {
    min-width: 160px !important;
    max-width: 160px !important
}

.btnsearchi {
    border: 2px solid #ffcc19 !important;
    color: #151515 !important;
    font-family: Roboto !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    font-size: 20px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
    min-width: 170px !important;
    opacity: 1 !important
}

.latest-card button, .quote-btn {
    font-weight: 600 !important;
    font-size: 14px !important
}

.btnsearchi:hover {
    background: linear-gradient(135deg,#036 0,#004080 100%) !important;
    border-color: #036 !important;
    color: #fff !important;
    transform: scale(1.05) translateY(-2px) !important;
    box-shadow: 0 12px 35px rgba(0,51,102,.4) !important;
    opacity: 1 !important
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.latest-card {
    padding: 40px 40px 60px !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.3) !important;
    border: 1px solid transparent !important;
    transition: .4s cubic-bezier(.25, .46, .45, .94) !important;
    height: 500px !important;
    max-height: 500px !important;
    background: linear-gradient(135deg,rgba(255,255,255,.95) 0,rgba(255,248,225,.9) 50%,rgba(255,245,200,.85) 80%,rgba(255,240,180,.8) 100%) !important;
    backdrop-filter: blur(20px) !important
}

    .latest-card:hover {
        transform: translateY(-10px) scale(1.02) !important;
        box-shadow: 0 30px 60px rgba(0,0,0,.4) !important;
        border-color: rgba(255,204,25,.6) !important
    }

    .latest-card button {
        border: 2px solid rgba(0,51,102,.2) !important;
        border-radius: 50px !important;
        padding: 12px 16px !important;
        transition: .3s !important;
        backdrop-filter: blur(10px) !important;
        color: #036 !important;
        background: rgba(255,255,255,.8) !important;
        white-space: nowrap !important;
        text-align: center !important;
        margin-right: 10px !important;
        display: inline-block !important;
        overflow: hidden !important;
        height: 44px
    }

        .latest-card button:hover {
            background: rgba(255,255,255,.9) !important;
            color: #036 !important;
            transform: translateY(-2px) !important;
            border-color: rgba(255,204,25,.5) !important
        }

        .latest-card button.btnlatestselected {
            background: linear-gradient(135deg,gold 0,#ff8c00 100%) !important;
            color: #036 !important;
            border-color: #ffcc19 !important
        }

        .latest-card button.btn.btnlatest, .latest-card button.btn.btnlatestselected {
            font-weight: 600 !important;
            font-size: 14px !important;
            font-family: "Merriweather Sans",sans-serif
        }

    .latest-card .details {
        background: 0 0 !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        transform: none !important;
        white-space: normal !important;
        min-width: auto !important;
        max-width: none !important;
        font-size: 1rem !important;
        color: #036 !important;
        font-weight: 600 !important;
        text-align: left !important;
        width: 100% !important;
        text-decoration: none !important;
        margin: 0 !important;
        display: inline !important;
        outline: 0 !important;
        cursor: pointer !important;
        font-family: inherit !important;
        line-height: inherit !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important
    }

    #newtradiesholder .containernewproject, .latest-card .containernewproject {
        background: linear-gradient(135deg,rgba(225,240,255,.98) 0,rgba(210,235,255,.98) 30%,rgba(195,230,255,.98) 70%,rgba(180,225,255,.98) 100%) !important;
        height: 175px !important
    }

    #tradiesearch-modal .action-buttons, .latest-card .newdataheading, .quote-btn {
        text-align: center !important
    }

    .latest-card .newdataheading {
        color: #036 !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        margin-bottom: 20px !important;
        padding-top: 20px !important;
        min-height: 28px
    }

    .latest-card .containernewproject {
        border: 2px solid #a8c8e0 !important;
        border-radius: 16px !important;
        padding: 10px 12px 20px 5px !important;
        margin-bottom: 15px !important;
        transition: .3s !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
        min-height: 175px !important;
        max-height: 175px !important;
        display: flex !important
    }

        #newtradiesholder .containernewproject:hover, .latest-card .containernewproject:hover {
            background: linear-gradient(135deg,rgba(210,235,255,.98) 0,rgba(195,230,255,.98) 30%,rgba(180,225,255,.98) 70%,rgba(165,220,255,.98) 100%) !important;
            border-color: rgba(80,140,200,.5) !important;
            transform: translateX(4px) !important;
            box-shadow: 0 4px 20px rgba(80,140,200,.15) !important
        }

    .containersearchtradie .generaltextl, .latest-card .generaltextl, .latest-card .generaltextxsbl, .latest-card .newdata {
        color: #036 !important;
        font-weight: 600 !important
    }

    .latest-card .homeinfo2, .latest-card .homeinfodesc {
        color: #1a1a1a !important
    }

    .latest-card .homeinfo2 {
        font-size: .875rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important
    }

    .latest-card .homepageboxic, .latest-card .keyicon {
        color: #666 !important
    }

#tradiesearch-modal .close-modal:focus i, #tradiesearch-modal .close-modal:hover i, .quote-btn:hover {
    color: #fff !important
}

.latest-card #latesttraders, .latest-card #newprojects {
    max-height: 420px !important;
    min-height: 420px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 10px;
    margin-top: 20px;
    padding-bottom: 60px;
    contain: layout !important
}

#newtradiesholder .containernewproject, .containersearchtradie {
    padding: 10px 12px 10px 5px !important;
    margin-bottom: 15px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: .3s !important
}

.latest-card #latesttraders::-webkit-scrollbar, .latest-card #newprojects::-webkit-scrollbar {
    width: 6px
}

.latest-card #latesttraders::-webkit-scrollbar-track, .latest-card #newprojects::-webkit-scrollbar-track {
    background: rgba(0,0,0,.05);
    border-radius: 4px
}

.latest-card #latesttraders::-webkit-scrollbar-thumb, .latest-card #newprojects::-webkit-scrollbar-thumb {
    background: silver !important;
    border-radius: 4px;
    border: 1px solid silver !important;
    transition: .3s
}

    .latest-card #latesttraders::-webkit-scrollbar-thumb:hover, .latest-card #newprojects::-webkit-scrollbar-thumb:hover {
        background: #a0a0a0 !important;
        border-color: #a0a0a0 !important;
        box-shadow: 0 0 8px rgba(192,192,192,.4) !important
    }

.latest-card .row.mt-2 {
    margin-top: 0 !important
}

#newprojects .containernewproject .row.ms-1.mt-2:first-child {
    margin-bottom: 5px !important
}

#newtradiesholder .containernewproject {
    border: 2px solid #a8c8e0 !important;
    border-radius: 16px !important;
    min-height: 175px !important;
    max-height: 175px !important;
    display: flex !important;
    flex-direction: column !important
}

    #newtradiesholder .containernewproject[data-tooltip]::after, .containernewproject[data-tooltip]::after {
        content: attr(data-tooltip);
        position: fixed;
        color: #151515;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        z-index: 9999;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s
    }

    #newtradiesholder .containernewproject .generaltextl {
        font-size: 1rem !important;
        margin-bottom: 10px !important
    }

    #newtradiesholder .containernewproject .newprojinfo2 {
        line-height: 1.2 !important;
        text-align: left !important;
        font-size: .875rem !important
    }

.containernewproject, .containernewproject[data-tooltip] {
    position: relative
}

    .containernewproject[data-tooltip]::after {
        background: linear-gradient(135deg,rgba(255,255,255,.95) 0,rgba(225,240,255,.9) 50%,rgba(200,225,250,.85) 100%)
    }

    #newtradiesholder .containernewproject[data-tooltip]:hover::after, .containernewproject[data-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
        left: 50%;
        top: 20%;
        transform: translateX(-50%)
    }

#newtradiesholder .containernewproject[data-tooltip]::after {
    background: linear-gradient(135deg,rgba(255,255,255,.95) 0,rgba(255,235,180,.9) 50%,rgba(255,220,130,.85) 100%)
}

.search-section, .search-section .search-box {
    min-height: 0
}

    .search-section .search-box h3 {
        background: rgba(255,255,255,.15) !important;
        color: #fff !important;
        padding: 12px 20px !important;
        border-radius: 25px !important;
        font-size: 1.6rem !important;
        font-weight: 700 !important;
        margin-bottom: 20px !important;
        display: inline-block !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255,255,255,.2) !important;
        text-shadow: none !important;
        min-height: 48px
    }

    .search-section .search-form {
        min-height: 70px;
        display: flex;
        align-items: center
    }

.search_style_home {
    height: 50px !important;
    box-sizing: border-box !important
}

div.search-section div.container div.search-box div.search-form div.loc {
    width: 22% !important;
    max-width: 22% !important;
    flex: none !important
}

#ntsstatus {
    min-height: 60px
}

#loading_results {
    min-height: 30px
}

#projectsearchresults {
    min-height: 100px;
    max-height: 600px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 10px !important
}

    #projectsearchresults::-webkit-scrollbar {
        width: 8px !important
    }

    #projectsearchresults::-webkit-scrollbar-track {
        background: rgba(0,0,0,.05) !important;
        border-radius: 4px !important
    }

    #projectsearchresults::-webkit-scrollbar-thumb {
        background: silver !important;
        border-radius: 4px !important;
        border: 1px solid silver !important;
        transition: .3s !important
    }

        #projectsearchresults::-webkit-scrollbar-thumb:hover {
            background: #a0a0a0 !important;
            border-color: #a0a0a0 !important;
            box-shadow: 0 0 8px rgba(192,192,192,.4) !important
        }

.containersearchtradie {
    background: linear-gradient(135deg,rgba(255,255,255,.95) 0,rgba(248,252,255,.95) 30%,rgba(240,248,255,.95) 70%,rgba(235,245,255,.95) 100%) !important;
    border: 2px solid #d3d3d3 !important;
    border-radius: 16px !important;
    position: relative !important
}

.quote-btn, .start-section .button-box a {
    background: linear-gradient(135deg,gold 0,#ff8c00 100%)
}

.containersearchtradie > div[style*="width:100%"] {
    padding-right: 140px !important
}

.containersearchtradie:focus, .containersearchtradie:hover {
    background: linear-gradient(135deg,rgba(240,248,255,.98) 0,rgba(230,243,255,.98) 30%,rgba(220,238,255,.98) 70%,rgba(210,233,255,.98) 100%) !important;
    border-color: rgba(80,140,200,.4) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 20px rgba(80,140,200,.15) !important
}

.quote-btn {
    border: 2px solid #ffcc19 !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: .4s cubic-bezier(.4, 0, .2, 1) !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 6px 15px rgba(255,204,25,.3) !important;
    min-width: 120px !important;
    display: inline-flex !important;
    justify-content: center !important;
    overflow: hidden !important
}

    .quote-btn:hover {
        background: linear-gradient(135deg,#036 0,#004080 100%) !important;
        border-color: #036 !important;
        transform: translateY(-52%) scale(1.05) !important;
        box-shadow: 0 10px 25px rgba(0,51,102,.4) !important
    }

.howit-box > p {
    margin-bottom: 170px !important
}

.howit-box h2, .howit-box h3 {
    margin-bottom: 20px;
    color: #fff
}

.howit-item.yellow.desk-how .img-box {
    width: 100% !important;
    overflow: visible !important
}

    .howit-item.yellow.desk-how .img-box img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        margin-top: -10px !important;
        max-width: 700px !important
    }

.howit-item .img-box {
    width: 100%;
    max-width: 684px;
    margin: 0 auto;
    aspect-ratio: 684/456
}

    .howit-item .img-box img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain
    }

.howit-box h2 {
    font-size: 46px;
    font-weight: 800
}

.howit-box h3 {
    font-size: 28px;
    font-weight: 400
}

.howit-box p {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    line-height: 34px;
    margin-bottom: 30px
}

.start-section h2 {
    color: #fff;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 15px
}

.start-section h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 25px
}

.start-section .button-box a {
    border: 2px solid #ffcc19;
    color: #151515;
    font-size: 1.1rem !important;
    font-weight: 600;
    padding: 15px 30px;
    border-radius: 50px
}

    .start-section .button-box a:hover {
        background: linear-gradient(135deg,#036 0,#004080 100%);
        border-color: #036;
        color: #fff
    }

#tradiesearch-modal .modal-header {
    padding: 20px 25px !important;
    border-bottom: 2px solid rgba(0,51,102,.1) !important;
    position: relative !important
}

#tradiesearch-modal .modal-title {
    color: var(--navy-blue) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    padding-right: 40px !important
}

#tradiesearch-modal .close-modal {
    background: #fff !important;
    border: 2px solid #036 !important;
    color: #036 !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    padding: 0 !important;
    border-radius: 50% !important;
    transition: .3s !important;
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0,0,0,.2) !important;
    outline: 0 !important
}

    #tradiesearch-modal .close-modal:focus, #tradiesearch-modal .close-modal:hover {
        background: #036 !important;
        border-color: #036 !important;
        transform: rotate(90deg) scale(1.15) !important;
        box-shadow: 0 6px 25px rgba(0,51,102,.4) !important;
        outline: 0 !important
    }

#tradiesearch-modal .modal-body {
    padding: 30px 25px !important
}

#tradiesearch-modal .modal-information {
    background: linear-gradient(135deg,rgba(255,255,255,.95) 0,rgba(255,248,225,.9) 50%,rgba(255,245,200,.85) 80%,rgba(255,240,180,.8) 100%) !important;
    border-radius: var(--radius) !important;
    padding: 2rem !important;
    border: 2px solid rgba(255,215,0,.3) !important;
    margin-top: 0 !important
}

#tradiesearch-modal .main-message {
    text-align: center !important;
    margin-bottom: 30px !important
}

    #tradiesearch-modal .main-message h3 {
        font-size: 1.4rem !important;
        color: var(--navy-blue) !important;
        font-weight: 700 !important;
        margin-bottom: 10px !important
    }

    #tradiesearch-modal .main-message p {
        font-size: 1.1rem !important;
        color: #333 !important;
        font-weight: 500 !important
    }

#tradiesearch-modal .steps {
    margin-bottom: 30px !important
}

#tradiesearch-modal .step-item {
    display: flex !important;
    align-items: start !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    padding: 15px !important;
    background: rgba(255,255,255,.6) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,51,102,.1) !important;
    transition: .3s !important
}

#tradiesearch-modal .primary-button, #tradiesearch-modal .step-number {
    background: linear-gradient(135deg,gold 0,#ff8c00 100%) !important;
    color: #151515 !important
}

#tradiesearch-modal .step-item:hover {
    background: rgba(255,255,255,.8) !important;
    border-color: rgba(255,215,0,.3) !important;
    transform: translateX(5px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,.1) !important
}

#tradiesearch-modal .step-item:last-child {
    margin-bottom: 0 !important
}

#tradiesearch-modal .step-number {
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(255,204,25,.3) !important
}

#tradiesearch-modal .step-content h4 {
    color: var(--navy-blue) !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    font-size: 1rem !important
}

#tradiesearch-modal .step-content p {
    color: #333 !important;
    font-size: .95rem !important;
    line-height: 1.5 !important;
    margin: 0 !important
}

#tradiesearch-modal .primary-button {
    border: 2px solid #ffcc19 !important;
    font-weight: 600 !important;
    padding: 15px 40px !important;
    border-radius: 50px !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: .4s cubic-bezier(.4, 0, .2, 1) !important;
    box-shadow: 0 8px 25px rgba(255,204,25,.3) !important
}

@media (min-width:768px) {
    html {
        font-size: 16px
    }
}

@media (min-width:1400px) {
    .howit-item.yellow.desk-how .img-box img {
        margin-top: -70px !important
    }
}

@media (max-width:1370px) {
    #newtradiesholder .containernewproject .generaltextl, .latest-card .details {
        font-size: 15px !important
    }

    #newtradiesholder .containernewproject .newprojinfo2, .latest-card .generaltextxsbl, .latest-card .homeinfo2, .latest-card .homeinfodesc {
        font-size: 11px !important
    }

    .hero-mainheading {
        font-size: 3rem
    }
}

@media (max-width:1024px) {
    .search-section .search-box .search-form {
        flex-wrap: wrap !important;
        gap: 10px !important
    }

    div.search-section div.container div.search-box div.search-form div.loc {
        width: 100% !important;
        max-width: 100% !important
    }

    .search-section .search-box .search-form .sub, .search-section .search-box .search-form .trade {
        width: 100% !important
    }

    .btnsearchi {
        width: auto !important
    }

    .hero-card-left .button-box {
        flex-wrap: wrap !important
    }

        .hero-card-left .button-box a {
            max-width: 100% !important;
            box-sizing: border-box !important
        }
}

@media (min-width:992px) and (max-width:1200px) {
    .containernewproject[data-tooltip]::after {
        content: attr(data-tooltip);
        white-space: normal;
        word-wrap: break-word
    }

    .button-box a[href] {
        font-size: 14px !important
    }
}

@media (min-width:990px) and (max-width:1199px) {
    .howit-item.yellow.desk-how .img-box img {
        margin-top: 55px !important
    }
}

@media (max-width:768px) {
    .hero-card-left, .latest-card, .latest-card .containernewproject {
        backdrop-filter: none !important;
        transition: none !important
    }

    .howit-box h2, .howit-box h3 {
        margin-bottom: 10px !important
    }

    .hero-card-left, .latest-card {
        box-shadow: 0 10px 20px rgba(0,0,0,.2) !important;
        padding: 40px 40px 60px !important;
        margin-bottom: 20px !important;
        min-height: auto !important
    }

    body::after {
        display: none !important
    }

    .hero-mainheading {
        font-size: 2.5rem
    }

    .hero-card-left h2 {
        font-size: 1.1rem
    }

    .button-box {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important
    }

        .button-box a[href], .button-box > a, div.button-box a {
            min-width: 200px !important;
            max-width: 100% !important;
            padding: 12px 24px !important;
            font-size: 15px !important;
            box-shadow: none !important;
            transition: none !important
        }

    .latest-card {
        padding: 20px 20px 40px !important;
        min-height: 400px !important;
        max-height: 672px !important
    }

        .latest-card button {
            padding: 12px 24px !important;
            min-width: 120px !important;
            max-width: 120px !important
        }

    .search-section {
        min-height: 350px
    }

        .search-section .search-box h3 {
            font-size: 18px !important;
            min-height: 40px
        }

    .btnsearchi {
        font-size: 16px !important;
        padding: 10px 16px !important;
        min-width: 140px !important
    }

    .howit-box h2 {
        font-size: 28px !important;
        font-weight: 700 !important
    }

    .howit-box h3 {
        font-size: 18px !important
    }

    .howit-box p {
        font-size: 16px !important;
        line-height: 24px !important;
        margin-bottom: 15px !important
    }

    .start-section h2 {
        font-size: 26px !important;
        font-weight: 700 !important;
        margin-bottom: 10px !important
    }

    .start-section h3 {
        font-size: 18px !important;
        margin-bottom: 15px !important
    }

    .howit-item.yellow.desk-how .img-box {
        width: 100% !important;
        overflow: visible !important
    }

        .howit-item.yellow.desk-how .img-box img {
            width: 100% !important;
            height: auto !important;
            object-fit: contain !important;
            margin-top: -15px !important;
            max-width: 300px !important
        }

    div.search-section div.container div.search-box div.search-form div.loc {
        width: 100% !important;
        max-width: 100% !important
    }

    .containersearchtradie {
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 60px !important;
        position: relative !important
    }

        .containersearchtradie > div[style*="width:100%"] {
            padding-right: 12px !important;
            width: 100% !important
        }

    .quote-btn {
        position: absolute !important;
        bottom: 10px !important;
        top: auto !important;
        transform: none !important;
        width: calc(100% - 20px) !important;
        margin: 0 10px !important;
        right: auto !important
    }

    #tradiesearch-modal .modal-title {
        font-size: 1.1rem !important
    }

    #tradiesearch-modal .main-message h3 {
        font-size: 1.2rem !important
    }

    #tradiesearch-modal .main-message p {
        font-size: 1rem !important
    }

    #tradiesearch-modal .step-item {
        padding: 12px !important
    }

    #tradiesearch-modal .step-number {
        min-width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important
    }

    #tradiesearch-modal .step-content h4 {
        font-size: .95rem !important
    }

    #tradiesearch-modal .step-content p {
        font-size: .875rem !important
    }

    #tradiesearch-modal .primary-button {
        padding: 14px 30px !important;
        font-size: 1rem !important;
        width: 100% !important;
        justify-content: center !important
    }

    #tradiesearch-modal .modal-information {
        padding: 1.5rem !important
    }
}

@media (max-width:480px) {
    #tradiesearch-modal .modal-body {
        padding: 20px 15px !important
    }

    #tradiesearch-modal .modal-information {
        padding: 1.25rem !important
    }

    #tradiesearch-modal .steps {
        margin-bottom: 20px !important
    }

    #tradiesearch-modal .step-item {
        gap: 12px !important;
        margin-bottom: 15px !important
    }
}

@media (max-width:991px) {
    .howit-section .container {
        display: flex;
        flex-direction: column
    }

    .howit-box {
        display: contents
    }

        .howit-box > h2, .howit-box > h3, .howit-box > p {
            order: 0
        }

        .howit-box.right-box .howit-item:first-of-type {
            order: 1
        }

        .howit-box:not(.right-box) .howit-item {
            order: 2
        }

        .howit-box.right-box .howit-item:last-of-type {
            order: 3
        }

        .howit-box > p {
            margin-bottom: 20px !important
        }

    #tradiesearch-modal .modal-content, .containernewproject, .containersearchtradie, .hero-card-left, .latest-card, .modal-content, .search-section .search-box {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important
    }

    .hero-card-left {
        background: linear-gradient(160deg, rgba(74, 56, 150, 0.98) 0%, rgba(118, 94, 230, 0.98) 45%, rgba(52, 39, 107, 0.98) 100%) !important
    }

    #tradiesearch-modal .modal-content, .latest-card, .modal-content {
        background: rgba(255,255,255,.98) !important
    }

    .containernewproject, .containersearchtradie {
        background: rgba(225,240,255,.98) !important
    }
}