.btn {
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
	a {
		-webkit-transition: color .3s;
		-o-transition: color .3s;
		transition: color .3s;
	}

    a:hover {
        color: var(--secondary-colour);
    }

    .btn {
        -webkit-transition: background-color .3s, color .3s, border-color .3s;
        -o-transition: background-color .3s, color .3s, border-color .3s;
        transition: background-color .3s, color .3s, border-color .3s;
    }

    .btn-bg-primary:hover {
        border-color: var(--primary-colour);
        background-color: transparent;
        color: var(--primary-colour);
    }

	.btn-bg-primary-light:hover {
		background-color: var(--secondary-colour);
		color: white;
	}

    .btn-bg-secondary:hover {
        border-color: var(--secondary-colour);
        color: var(--secondary-colour);
        background-color: white;
    }

	.btn-bg-tertiary:hover {
		border-color: var(--tetiary-colour);
		color: var(--tetiary-colour);
		background-color: white;
	}

	.btn-bg-accent:hover {
		border-color: var(--accent-colour);
		color: var(--accent-colour);
		background-color: white;
	}

    .btn-bg-white:hover {
        color: white;
        background-color: var(--primary-colour);
    }

    .btn i.move {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition-duration: .1s;
        -o-transition-duration: .1s;
        transition-duration: .1s;
        -webkit-transition-property: transform;
        -webkit-transition-property: -webkit-transform;
        transition-property: -webkit-transform;
        -o-transition-property: transform;
        transition-property: transform;
        transition-property: transform,-webkit-transform;
        -webkit-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .btn:hover i.move {
        -webkit-transform: translateX(4px);
        -ms-transform: translateX(4px);
        transform: translateX(4px);
    }

    .btn i.grow {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .btn:hover i.grow {
        -webkit-transform: scale(1.3) translateZ(0);
        transform: scale(1.3) translateZ(0);
    }

	#header .header-top .header-top-right .header-phone a:hover {
		color: var(--secondary-colour);
	}

    #header .header-bottom .nav .nav-item:hover > .sub-menu {
        display: block;
    }

    .filter-categories .nav-item .nav-link {
        -webkit-transition: background-color .3s, color .3s;
        -o-transition: background-color .3s, color .3s;
        transition: background-color .3s, color .3s;
    }

    .filter-categories .nav-item .nav-link:hover {
        background-color: var(--secondary-colour);
        color: white;
    }

    .truck-detail-image img {
        -webkit-transition: -webkit-transform .3s;
        -o-transition: transform .3s;
        transition: transform .3s;
    }

	.truck-detail-image img:hover {
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05);
	}

    .truck-image-swiper-button-next:hover,
    .truck-image-swiper-button-prev:hover {
        background: var(--secondary-colour);
        color: white;
    }
}
@media (pointer: coarse) {
    .btn-bg-primary:visited,
    .btn-bg-primary:focus,
    .btn-bg-primary:focus-visible,
    .btn-bg-primary:active {
        background-color: var(--primary-colour);
        color: white;
    }

    .btn-bg-secondary:visited,
    .btn-bg-secondary:focus,
    .btn-bg-secondary:focus-visible,
    .btn-bg-secondary:active {
        border-color: var(--secondary-colour);
        color: white;
    }

    .btn-bg-primary-light:visited,
    .btn-bg-primary-light:focus,
    .btn-bg-primary-light:focus-visible,
    .btn-bg-primary-light:active {
        background-color: var(--secondary-colour);
        color: white;
    }

    .btn-bg-tertiary:visited,
    .btn-bg-tertiary:focus,
    .btn-bg-tertiary:focus-visible,
    .btn-bg-tertiary:active {
        border-color: var(--tertiary-colour);
        color: var(--tertiary-colour);
        background-color: white;
    }

    .btn-bg-white:visited,
    .btn-bg-white:focus,
    .btn-bg-white:focus-visible,
    .btn-bg-white:active {
        color: var(--primary-colour);
        background-color: white;
    }
}