:root {
    --navy: #061a30;
    --blue: #073bd9;
    --sky: #62b7f5;
    --orange: #ff6b00;
    --soft: #f5f7fa;
    --ink: #07192d
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif
}

.topbar {
    height: 34px;
    background: var(--navy);
    color: #ffffffbf;
    text-align: center;
    padding: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase
}

.topbar span {
    color: #ff7a1a
}

.navbar {
    top: 34px;
    z-index: 20;
    border-bottom: 1px solid #ffffff26;
    min-height: 80px
}

.navbar-brand img {
    height: 42px;
    width: auto
}

.nav-link {
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase
}

.nav-link:hover {
    color: var(--orange) !important
}

.al-logo {
    width: 180px;
    filter: brightness(0) invert(1)
}

.btn {
    font-weight: 700
}

.btn-orange {
    border-radius: 0;
    background: var(--orange);
    color: #fff;
    padding: 13px 24px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.btn-orange:hover {
    background: #fff;
    color: var(--ink)
}

.hero {
    position: relative;
    min-height: 760px;
    background-image: linear-gradient(90deg, #031121 0%, rgba(3, 17, 33, .84) 38%, rgba(3, 17, 33, .1) 78%), linear-gradient(0deg, #061a30 0%, transparent 28%), url('../images/hero-truck.png');
    background-position: center;
    background-size: cover;
    color: #fff
}

.hero-inner {
    display: flex;
    align-items: center;
    min-height: 760px;
    padding-top: 100px
}

.hero-copy {
    max-width: 680px
}

.eyebrow {
    color: #0873bd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase
}

.eyebrow.light {
    color: var(--sky)
}

.eyebrow i {
    display: inline-block;
    width: 38px;
    height: 2px;
    margin-right: 10px;
    background: var(--orange);
    vertical-align: middle
}

.hero h1 {
    font-size: clamp(54px, 7vw, 112px);
    font-weight: 900;
    letter-spacing: -.065em;
    line-height: .84;
    text-transform: uppercase
}

.hero h1 span {
    color: transparent;
    -webkit-text-stroke: 1.5px #ffffffc4
}

.hero .lead {
    max-width: 540px;
    margin-top: 32px;
    color: #ffffffad;
    font-size: 17px;
    line-height: 1.7
}

.hero-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 42px;
    padding-top: 25px;
    border-top: 1px solid #ffffff26;
    color: #ffffffbd
}

.section-pad {
    padding: 120px 0
}

.bg-soft {
    background: var(--soft)
}

.section-title {
    margin-top: 16px;
    font-size: clamp(44px, 5vw, 78px);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .95;
    text-transform: uppercase
}

.section-lead {
    color: #5b6878;
    font-size: 18px;
    line-height: 1.8
}

.category {
    height: 100%;
    padding: 38px;
    background: #fff;
    border: 1px solid #d7dee6;
    transition: .25s
}

.category>b {
    float: right;
    color: #98a4b1;
    font: 12px monospace
}

.category .icon {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    background: #eaf4fb;
    color: #0873bd;
    font-size: 26px
}

.category h3 {
    margin-top: 42px;
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase
}

.category p {
    color: #657180;
    line-height: 1.7
}

.category:hover {
    transform: translateY(-5px);
    background: #071f39;
    color: #fff
}

.category:hover p {
    color: #ffffffa6
}

.products {
    background: #fff
}

.product-heading {
    margin: 12px 0 0;
    font-size: clamp(42px, 5vw, 66px);
    font-weight: 900;
    letter-spacing: -.045em
}

.product-tabs {
    gap: 45px;
    border-bottom: 1px solid #dde2e8;
    overflow-x: auto;
    flex-wrap: nowrap
}

.product-tabs .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #6b7280 !important;
    padding: 0 8px 18px;
    font-size: 16px;
    text-transform: none
}

.product-tabs .nav-link.active {
    border-bottom-color: var(--blue);
    color: var(--blue) !important;
    background: transparent
}

.product-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(285px, calc((100% - 60px)/4));
    gap: 20px;
    overflow-x: auto;
    padding: 5px 0 20px;
    scroll-snap-type: x mandatory
}

.product-card {
    overflow: hidden;
    border: 1px solid #d9dee5;
    border-radius: 16px;
    background: #fff;
    scroll-snap-align: start;
    transition: .25s
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px #07192d1f
}

.product-shot {
    display: grid;
    height: 245px;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, #f9fbfd, #eef3f8);
    border-bottom: 1px solid #eef1f5
}

.product-shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    transition: .35s
}

.product-card:hover img {
    transform: scale(1.035)
}

.product-body {
    display: flex;
    min-height: 215px;
    flex-direction: column;
    padding: 26px
}

.product-body span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase
}

.product-body h3 {
    margin: 12px 0 24px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35
}

.product-body .btn {
    margin-top: auto;
    padding: 14px
}

.advantage {
    display: flex;
    min-height: 500px;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    background: #dfe9f2
}

.advantage>p:last-child {
    max-width: 380px;
    border-left: 4px solid var(--orange);
    padding-left: 22px;
    color: #5b6878;
    font-size: 18px;
    line-height: 1.7
}

.benefit {
    height: 100%;
    min-height: 245px;
    padding: 38px;
    background: #fff;
    border: 1px solid #e3e7eb
}

.benefit b {
    font-size: 21px
}

.benefit p {
    margin-top: 15px;
    color: #657180;
    line-height: 1.7
}

.service {
    background: #0b6dad
}

.service-copy {
    padding: 90px 35px
}

.service-copy h2 {
    font-size: clamp(44px, 5vw, 65px);
    font-weight: 900;
    line-height: .95;
    text-transform: uppercase
}

.service-copy>p:last-child {
    max-width: 520px;
    margin-top: 26px;
    color: #ffffffc2;
    font-size: 18px;
    line-height: 1.7
}

.service-grid>div {
    min-height: 190px;
    padding: 36px;
    background: #075788;
    border: 1px solid #ffffff26;
    color: #ffb277
}

.service-grid b {
    display: block;
    margin-top: 45px;
    color: #fff
}

.contact-card {
    padding: 38px;
    background: #fff;
    box-shadow: 0 25px 70px #07192d14
}

.contact-card p:before {
    content: '✓';
    margin-right: 12px;
    color: #0873bd;
    font-weight: 900
}

.enquiry-modal {
    border: 0;
    border-top: 5px solid var(--orange);
    border-radius: 0;
    padding: 14px
}

.form-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.form-control {
    border-radius: 0;
    padding: 14px
}

footer {
    padding: 35px 0;
    background: #051526;
    color: #ffffff73;
    font-size: 12px
}

footer img {
    width: 125px;
    padding: 5px
}

footer a {
    color: #ffffffbd;
    text-decoration: none
}

.toast {
    display: block
}

.modal-backdrop.show {
    opacity: .8
}

@media(max-width:991px) {
    .navbar-collapse {
        margin-top: 10px;
        padding: 20px;
        background: var(--navy)
    }

    .hero {
        background-position: 62% center
    }

    .hero:before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, #061a30 8%, rgba(6, 26, 48, .88) 58%, rgba(6, 26, 48, .22))
    }

    .hero-inner {
        position: relative;
        align-items: flex-end;
        padding-bottom: 70px
    }

    .section-pad {
        padding: 80px 0
    }

    .product-row {
        grid-auto-columns: minmax(280px, 82vw)
    }
}

@media(max-width:575px) {
    .topbar {
        font-size: 9px
    }

    .hero h1 {
        font-size: 55px
    }

    .hero-notes {
        gap: 14px
    }

    .section-title {
        font-size: 42px
    }

    .advantage {
        min-height: 420px;
        padding: 30px
    }

    .service-copy {
        padding: 70px 20px
    }
}

.locations-section {
padding: 120px 0;
background: #ffffff;
}

.location-map-wrap {
position: relative;
height: 100%;
min-height: 650px;
overflow: hidden;
background: #e9eef3;
}

.location-map {
position: absolute;
inset: 0;
}

.location-map iframe {
width: 100%;
height: 100%;
display: block;
filter: grayscale(20%);
}

.map-label {
position: absolute;
left: 25px;
top: 25px;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
background: #061a30;
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}

.map-label span {
width: 8px;
height: 8px;
display: inline-block;
background: var(--orange);
border-radius: 50%;
}

.locations-content {
height: 100%;
}

.location-title {
margin: 16px 0 18px;
font-size: clamp(44px, 5vw, 70px);
font-weight: 900;
line-height: .92;
letter-spacing: -.055em;
text-transform: uppercase;
}

.location-title span {
color: transparent;
-webkit-text-stroke: 1.5px var(--ink);
}

.location-intro {
max-width: 500px;
margin-bottom: 30px;
color: #657180;
font-size: 16px;
line-height: 1.7;
}

.location-card {
display: flex;
gap: 22px;
margin-top: 14px;
padding: 25px;
background: #f5f7fa;
border: 1px solid #dce2e8;
transition: .25s ease;
}

.location-card:hover {
transform: translateY(-3px);
background: #071f39;
border-color: #071f39;
color: #fff;
box-shadow: 0 20px 50px #07192d1c;
}

.location-number {
flex: 0 0 35px;
color: var(--orange);
font-family: monospace;
font-size: 12px;
font-weight: 700;
}

.location-card-content {
width: 100%;
}

.location-card-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}

.location-card h3 {
margin: 0;
font-size: 25px;
font-weight: 900;
text-transform: uppercase;
}

.location-tag {
padding: 5px 9px;
background: #e4edf5;
color: #0873bd;
font-size: 9px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}

.location-card:hover .location-tag {
background: #ffffff1c;
color: #fff;
}

.location-address {
margin: 16px 0;
color: #657180;
font-size: 14px;
line-height: 1.7;
}

.location-card:hover .location-address {
color: #ffffffb8;
}

.location-meta {
display: flex;
flex-direction: column;
gap: 6px;
color: #687687;
font-size: 12px;
}

.location-card:hover .location-meta {
color: #ffffffa8;
}

.location-actions {
display: flex;
align-items: center;
gap: 20px;
margin-top: 20px;
padding-top: 17px;
border-top: 1px solid #d9e0e7;
}

.location-card:hover .location-actions {
border-top-color: #ffffff26;
}

.location-link {
color: var(--blue);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-decoration: none;
text-transform: uppercase;
}

.location-link:hover {
color: var(--orange);
}

.location-enquiry {
padding: 0;
border: 0;
background: transparent;
color: var(--orange);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}

@media(max-width:991px) {


.locations-section {
    padding: 80px 0;
}

.location-map-wrap {
    min-height: 450px;
}

}

@media(max-width:575px) {


.location-map-wrap {
    min-height: 350px;
}

.location-card {
    padding: 20px;
    gap: 12px;
}

.location-card-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.location-card h3 {
    font-size: 22px;
}

.location-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
}

}
footer a{
    color:inherit;
    text-decoration:none;
}

footer a:hover{
    color:#f58220;
}

/* Floating Call Button */
.floating-call {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 58px;
    height: 58px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 23px;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
    transition: all 0.3s ease;
}

.floating-call:hover {
    background: #ff6b00;
    color: #fff;
    transform: scale(1.08);
}

.floating-call i {
    transform: rotate(-15deg);
}

@media (max-width: 768px) {
    .floating-call {
        width: 54px;
        height: 54px;
        right: 15px;
        bottom: 15px;
        font-size: 21px;
    }
}