/* SCREENS UP TO 1440PX WIDE -------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1440px) {
    HERE
}



/* SCREENS 992 TO 1200PX WIDE -------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {
    CONTENT HERE
}




/* SCREENS 768 TO 992PX WIDE -------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 992px) {
    CONTENT HERE
}



/*---SCREENS 577 TO 768PX WIDE -------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
    .container {
        padding-left: 0;
        padding-right: 0;
    }

    .top-bar {
        display: none;
    }

    .hamburger {
        display: block;
        margin-right: 30px;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .nav.navbar {
        display: flex;
        position: fixed;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 80px;
        gap: 0;
        flex-direction: column;
        background-color: #1c4152;
        color: #fff;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        z-index: 3;
    }

    .nav-item {
        margin: 10px 0;
    }

    .nav-item a {
        color: #fff;
    }

    .nav-menu.active {
        left: 0;
    }

    /**---HERO CONTENT-----------------------------------------------------------------**/


    .intro-content {
        width: 80%;
        display: block;
        position: relative;
        margin: 40px 60px 40px 60px;
    }

    img.hero-logo {
        height: 80px;
        float: left;
        display: none;
        position: relative;
    }

    .intro-content h1 {
        width: 100%;
        float: left;
        display: block;
        position: relative;
        margin-top: 24px;
        color: #1c4152;
    }

    .hero-buttons {
        width: 100%;
        display: block;
        position: relative;
        float: left;
        margin-top: 20px;
    }

    a.hero-blue-button {
        width: 100%;
        padding: 12px 16px;
        color: #fff;
        background: rgb(91, 203, 232);
        background: linear-gradient(180deg, #5bcbe8 0%, #45acc6 100%);
        -webkit-box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        border-radius: 8px;
        margin-right: 8px;
    }

    a.hero-blue-button:hover {
        color: #fff;
        background: rgb(80, 184, 210);
        background: linear-gradient(180deg, rgba(80, 184, 210, 1) 0%, rgba(57, 151, 175, 1) 100%);
        cursor: pointer;
    }

    a.hero-white-button:hover {
        color: #1c4152;
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 100%);
        cursor: pointer;
    }

    .hero-white-button {
        padding: 12px 16px;
        color: #1c4152;
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
        -webkit-box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        border-radius: 8px;
    }

    a.blurb-button:hover {
        color: #1c4152;
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 100%);
        cursor: pointer;
    }

    .hero-blue-button,
    .hero-white-button,
    .blurb-button {
        text-decoration: none;
    }

    .hero-image {
        display: block;
        position: relative;
        float: right;
        clear: both;
        margin-right: 0px;
        margin-top: 80px;
    }

    /**---BLURB CONTENT-----------------------------------------------------------------**/

    .hero-blurb {
        clear: both;
    }

    .hero-blurb-bg {
        float: left;
        display: block;
        width: 100%;
        margin-top: 0px;
    }

    .hero-blurb-bg img {
        display: block;
        position: absolute;
        width: 100%;
        z-index: -2;
    }

    .hero-blurb-content {
        display: block;
        float: left;
        position: relative;
        width: 400px;
        margin: 20px 20px 20px 60px;
        color: white;
    }

    .blurb-button-container {
        margin-top: 20px;
    }

    .blurb-button {
        padding: 12px 16px;
        color: #fff;
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
        -webkit-box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        border-radius: 8px;
        color: #1c4152;
        z-index: 2;
    }


    /**---MANU VS IMPORT-----------------------------------------------------------------**/

    #manu-vs-import {
        display: block;
        position: relative;
        float: left;
        clear: both;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    #manu-vs-import h2 {
        margin-bottom: 40px;
    }

    .product-title {
        margin-bottom: 20px;
        text-align: center;
    }

    .manu-product {
        padding: 30px;
        text-align: center;
    }

    .import-product {
        padding: 30px;
        text-align: center;
    }

    .product-box {
        padding-right: 0;
        text-align: center;
    }

    .manu-details {
        margin-top: 20px;
    }


    /**---PMC LATEST-----------------------------------------------------------------**/

    #pmc-news {
        clear: both;
        background-color: #1c4152;
        padding: 60px 0 80px 0;
    }

    h2.white {
        color: #fff;
        margin-bottom: 30px;
    }

    .news-card {
        padding: 20px;
        background-color: #fff;
    }

    .news-card img {
        width: 100%;
    }

    .news-card h4 {
        margin: 12px 0 4px 0;
    }

    /**---FOOTER-----------------------------------------------------------------**/

    footer {
        display: block;
        position: relative;
        background-color: #fff;
        padding: 30px 30px 0 30px;
    }

    .company-attributes,
    .footer-links {
        padding: 20px 20px 20px 10px;
        text-align: center;
    }

    .company-attributes .footer-logo {
        width: 100px;
        margin-bottom: 20px;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .footer-social {
        text-align: center;
    }

    .footer-social img.footer {
        display: inline-block;
        width: 28px;
        margin-right: 6px;
        margin-top: 20px;
    }

    ul.footer {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    ul.footer li a {
        text-decoration: none;
        color: #303030;
    }

    .location p a {
        color: #303030;
    }

    /**---PRODUCT RANGE PAGE-----------------------------------------------------------------**/


    body.bg {
        background-image: url(../assets/images/body-bg.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .range-title {
        margin-top: 60px;
    }

    .range {
        width: 1080px;
        margin: 0 auto;
        margin-bottom: 60px;
    }

    .range-row {
        margin-top: 30px;
    }

    .range-type-title {
        margin-top: 10px;
    }

    /**---RANGE TYPE PAGES--------------------------------------------------------------------------------------------  **/


    .product-card-padding {
        padding: 0px 0 30px;
    }

    .product-card {
        background-color: #fff;
        padding: 20px;
        -webkit-box-shadow: 0px 0px 15px 0px #eeeeee;
        box-shadow: 0px 0px 15px 0px #eeeeee;
        border-radius: 6px;
    }

    .range-type-info {
        float: left;
        position: relative;
        display: block;
        padding: 0;
        width: 100%;
        margin-top: 20px;
        text-align: center;
    }

    .name-litre-container,
    .chsa-logo-container {
        width: 50%;
    }

    .name-litre-container img {
        margin-left: 16px;
    }

    .chsa-logo-container img {
        float: right;
    }

    .product-image {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 6px;
        -webkit-box-shadow: 0px 0px 15px 0px #eeeeee;
        box-shadow: 0px 0px 15px 0px #eeeeee;
    }

    .black-bg {
        background-color: #303030;
    }

    .product-image .product-pic {
        width: 220px;
        padding: 40px;
        display: block;
        margin: 0 auto;
    }

    .product-image .swatch {
        float: left;
        position: relative;
        top: 0;
        left: 0;
    }

    .stock-ref h6 {
        float: right;
        margin-right: 6px;
        margin-top: 4px;
    }

    #range-products {
        width: 85%;
        margin: 0 auto;
        margin-bottom: 60px;
    }

    .page-title {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .product {
        background-color: #fff;
    }

    .outer-card {
        padding: 0px;
    }

    .inner-card {
        padding: 30px;
        background-color: #fff;
        border-radius: 8px;
        -webkit-box-shadow: 0px 0px 15px 0px #eeeeee;
        box-shadow: 0px 0px 15px 0px #eeeeee;
    }

    .img-container {
        float: left;
        position: relative;
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 12px 0px #EEEEEE;
        box-shadow: 0px 0px 12px 0px #EEEEEE;
        border-radius: 8px;
        height: auto;
    }

    .inner-card h3 {
        float: left;
        vertical-align: middle;
        margin: auto;
    }

    .inner-card .weight {
        display: block;
        float: left;
        position: relative;
        margin-left: 10px;
        margin-top: 4px;
    }

    img.chsa {
        display: block;
        margin-left: 20px;
    }

    .img-container h6 {
        float: right;
        position: relative;
        top: 4px;
        margin-right: 6px;
    }

    .img-container img.bag {
        padding: 20px;
        width: 200px;
    }

    .divider {
        display: block;
        position: relative;
        background-color: #5bcbe8;
        height: 2px;
        width: 100%;
        margin: 0 auto;
        margin-top: 16px;
        margin-bottom: 16px;
    }

    /**---CONTACT PAGE-----------------------------------------------------------------**/

    #contact-section {
        margin-top: 60px;
    }

    .form-container {
        width: auto;
        margin: 0 auto;
    }

    form {
        color: white;
        width: 900px;
        margin: 0 auto;
        margin-top: 30px;
    }

    textarea {
        resize: none;
        height: 150px;
    }

    button {
        float: right;
        margin-top: 20px;
        margin-bottom: 40px;
        padding: 12px 16px;
        border: none;
        border-radius: 8px;
        color: white;
        background-color: #5bcbe8;

    }

    .block-input {
        margin-top: 20px;
    }

    label {
        margin-bottom: 2px;
        color: #1c4152;
    }

    input[type=text]::placeholder,
    input[type=email]::placeholder {
        color: #ccc;
    }

    .field {
        margin: 0 15px;
    }

    /**---ABOUT PAGE-----------------------------------------------------------------**/

    .about-bg {
        background-color: #fff;
        width: 100%;
    }

    .about-content {
        width: 900px;
        margin: 0 auto;
        background-color: #fff;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .about-text {
        float: left;
        display: block;
        position: relative;
        margin-right: 80px;
    }

    .about-image-2 {
        float: left;
        position: relative;
        display: block;
        margin: 100px 0 60px 80px;
    }

    .know-more {
        height: 436px;
        position: relative;
        display: block;
    }

    .know-content {
        display: block;
        position: relative;
        margin-top: -300px;
        width: 400px;
        margin-left: 60px;
        color: #fff;
    }

    .know-content p {
        margin-bottom: 20px;
    }

    .about-image-1 {
        margin-top: 30px;
    }

    .about-image-1 img {
        margin-right: 30px;
    }

    /**---FMEET THE TEAM-----------------------------------------------------------------**/

    .team {
        width: 1320px;
        margin: 0 auto;
        margin-bottom: 60px;
    }

    .team-member {
        padding: 10px;
    }

    .team-content {
        padding: 20px;
        background-color: #fff;
    }

    .team-member img {
        width: 100%;
        height: 320px;
        object-fit: cover;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .team-member h5 {
        margin-bottom: 20px;
    }

    .team-member button {
        float: left;
        width: 100%;
        margin: 0 0 16px 0;
    }

    /**---ACCREDITATIONS-----------------------------------------------------------------**/

    .accred {
        width: 1200px;
        margin-bottom: 40px;
    }

    .page-title .sub-links a {
        color: #aaa;
    }

    .page-title .sub-links a:hover {
        color: #1c4152;
    }

    .accred img {
        height: 24px;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .outer-box {
        padding: 20px;
    }

    .accred-content {
        padding: 20px;
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.5);
        box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.5);
    }

    /**---WHAT WE DO-----------------------------------------------------------------**/


    .wwd-title {
        margin-top: 60px;
        margin-bottom: 40px;
    }

    .wwd {
        background-color: #fff;
        width: 100%;
        margin-bottom: 60px;
        padding: 60px 0 60px 0;
    }

    .wwd-img-container {
        height: 200px;
        margin-bottom: 30px;
    }

    .wwd-subjects {
        padding: 0 40px 0 40px;
    }

    /**---WHERE DO WE DELIVER-----------------------------------------------------------------**/


    .delivery-title {
        margin-top: 60px;
    }

    .delivery-bg {
        background-color: #fff;
        width: 100%;
        margin: 60px 0 60px 0;
    }

    .delivery-content {
        width: 1200px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .main-road-sign-p {
        padding: 20px;
        background-color: #fff;
    }

    .main-road-sign {
        background-color: #0057C3;
        border: 4px solid #99BDE1;
        border-radius: 16px;
        padding: 30px 0 0 0;
    }

    .main-road-sign h4 {
        text-align: center;
        color: #fff;
    }

    .sign-icons {
        margin-left: 10px;
    }

    .arrow-signs-container {
        margin-bottom: 60px;
    }

    .arrow-signs-container img {
        display: block;
        width: 64px;
        margin: 0 auto;
    }

    .delivery-info img {
        display: block;
        width: 60px;
        margin: 0 auto;
        margin-top: 40px;
    }

    .delivery-map {
        width: 100%;
        margin-bottom: 100px;
    }

    .delivery-map img {
        display: block;
        margin: 0 auto;
        width: 40%;
    }

}




/* SCREENS 0 TO 576PX WIDE ---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 576px) {
    .container {
        padding-left: 0;
        padding-right: 0;
    }

    .top-bar {
        display: none;
    }

    .hamburger {
        display: block;
        margin-right: 30px;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .nav.navbar {
        display: flex;
        position: fixed;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 80px;
        gap: 0;
        flex-direction: column;
        background-color: #1c4152;
        color: #fff;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        z-index: 3;
    }

    .nav-item {
        margin: 10px 0;
    }

    .nav-item a {
        color: #fff;
    }

    .nav-menu.active {
        left: 0;
    }

    /**---HERO CONTENT--------------------------------------------------------------------------------------------  **/


    .intro-content {
        width: 80%;
        display: block;
        position: relative;
        margin: 40px 60px 40px 60px;
    }

    img.hero-logo {
        height: 80px;
        float: left;
        display: none;
        position: relative;
    }

    .intro-content h1 {
        width: 100%;
        float: left;
        display: block;
        position: relative;
        margin-top: 24px;
        color: #1c4152;
    }

    .hero-buttons {
        width: 100%;
        display: block;
        position: relative;
        float: left;
        margin-top: 20px;
    }

    a.hero-blue-button {
        width: 100%;
        padding: 12px 16px;
        color: #fff;
        background: rgb(91, 203, 232);
        background: linear-gradient(180deg, #5bcbe8 0%, #45acc6 100%);
        -webkit-box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        border-radius: 8px;
        margin-right: 8px;
    }

    a.hero-blue-button:hover {
        color: #fff;
        background: rgb(80, 184, 210);
        background: linear-gradient(180deg, rgba(80, 184, 210, 1) 0%, rgba(57, 151, 175, 1) 100%);
        cursor: pointer;
    }

    a.hero-white-button:hover {
        color: #1c4152;
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 100%);
        cursor: pointer;
    }

    .hero-white-button {
        padding: 12px 16px;
        color: #1c4152;
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
        -webkit-box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        border-radius: 8px;
    }

    a.blurb-button:hover {
        color: #1c4152;
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 100%);
        cursor: pointer;
    }

    .hero-blue-button,
    .hero-white-button,
    .blurb-button {
        text-decoration: none;
    }

    .hero-image {
        display: block;
        position: relative;
        float: right;
        clear: both;
        margin-right: 0px;
        margin-top: 80px;
    }

    /**--BLURB CONTENT---------------------------------------------------------------------------------------------  **/

    .hero-blurb {
        clear: both;
    }

    .hero-blurb-bg {
        float: left;
        display: block;
        width: 100%;
        margin-top: 0px;
    }

    .hero-blurb-bg img {
        display: block;
        position: absolute;
        width: 100%;
        z-index: -2;
    }

    .hero-blurb-content {
        display: block;
        float: left;
        position: relative;
        width: 400px;
        margin: 20px 20px 20px 60px;
        color: white;
    }

    .blurb-button-container {
        margin-top: 20px;
    }

    .blurb-button {
        padding: 12px 16px;
        color: #fff;
        background: rgb(255, 255, 255);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 100%);
        -webkit-box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        box-shadow: 0px 2px 6px 0px rgba(144, 144, 144, 0.5);
        border-radius: 8px;
        color: #1c4152;
        z-index: 2;
    }

    /**---MANU VS IMPORT--------------------------------------------------------------------------------------------  **/

    #manu-vs-import {
        display: block;
        position: relative;
        float: left;
        clear: both;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    #manu-vs-import h2 {
        margin-bottom: 40px;
    }

    .product-title {
        margin-bottom: 20px;
        text-align: center;
    }

    .manu-product {
        padding: 30px;
        text-align: center;
    }

    .import-product {
        padding: 30px;
        text-align: center;
    }

    .product-box {
        padding-right: 0;
        text-align: center;
    }

    .manu-details {
        margin-top: 20px;
    }

    /**--PMC LATEST---------------------------------------------------------------------------------------------  **/

    #pmc-news {
        clear: both;
        background-color: #1c4152;
        padding: 60px 0 15px 0;
    }

    h2.white {
        color: #fff;
        margin-bottom: 30px;
    }

    .news-card {
        padding: 20px;
        background-color: #fff;
    }

    .news-card img {
        width: 100%;
    }

    .news-card h4 {
        margin: 12px 0 4px 0;
    }

    /**---FOOTER--------------------------------------------------------------------------------------------  **/

    footer {
        display: block;
        position: relative;
        background-color: #fff;
        padding: 30px 30px 0 30px;
    }

    .company-attributes,
    .footer-links {
        padding: 20px 20px 20px 10px;
        text-align: center;
    }

    .company-attributes .footer-logo {
        width: 100px;
        margin-bottom: 20px;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .footer-social {
        text-align: center;
    }

    .footer-social img.footer {
        display: inline-block;
        width: 28px;
        margin-right: 6px;
        margin-top: 20px;
    }

    ul.footer {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    ul.footer li a {
        text-decoration: none;
        color: #303030;
    }

    .location p a {
        color: #303030;
    }

    /**---PRODUCT RANGE PAGE--------------------------------------------------------------------------------------------  **/


    body.bg {
        background-image: url(../assets/images/body-bg.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .range-title {
        margin-top: 60px;
    }

    .range {
        width: 1080px;
        margin: 0 auto;
        margin-bottom: 60px;
    }

    .range-row {
        margin-top: 30px;
    }

    .range-type-title {
        margin-top: 10px;
    }

    /**---RANGE TYPE PAGES--------------------------------------------------------------------------------------------  **/


    .product-card-padding {
        padding: 0px 0 30px;
    }

    .product-card {
        background-color: #fff;
        padding: 20px;
        -webkit-box-shadow: 0px 0px 15px 0px #eeeeee;
        box-shadow: 0px 0px 15px 0px #eeeeee;
        border-radius: 6px;
    }

    .range-type-info {
        float: left;
        position: relative;
        display: block;
        padding: 0;
        width: 100%;
        margin-top: 20px;
        text-align: center;
    }

    .name-litre-container,
    .chsa-logo-container {
        width: 50%;
    }

    .name-litre-container img {
        margin-left: 16px;
    }

    .chsa-logo-container img {
        float: right;
    }

    .product-image {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 6px;
        -webkit-box-shadow: 0px 0px 15px 0px #eeeeee;
        box-shadow: 0px 0px 15px 0px #eeeeee;
    }

    .black-bg {
        background-color: #303030;
    }

    .product-image .product-pic {
        width: 220px;
        padding: 40px;
        display: block;
        margin: 0 auto;
    }

    .product-image .swatch {
        float: left;
        position: relative;
        top: 0;
        left: 0;
    }

    .stock-ref h6 {
        float: right;
        margin-right: 6px;
        margin-top: 4px;
    }

    #range-products {
        width: 85%;
        margin: 0 auto;
        margin-bottom: 60px;
    }

    .page-title {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .product {
        background-color: #fff;
    }

    .outer-card {
        padding: 0px;
    }

    .inner-card {
        padding: 30px;
        background-color: #fff;
        border-radius: 8px;
        -webkit-box-shadow: 0px 0px 15px 0px #eeeeee;
        box-shadow: 0px 0px 15px 0px #eeeeee;
    }

    .img-container {
        float: left;
        position: relative;
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 12px 0px #EEEEEE;
        box-shadow: 0px 0px 12px 0px #EEEEEE;
        border-radius: 8px;
        height: auto;
    }

    .inner-card h3 {
        float: left;
        vertical-align: middle;
        margin: auto;
    }

    .inner-card .weight {
        display: block;
        float: left;
        position: relative;
        margin-left: 10px;
        margin-top: 4px;
    }

    img.chsa {
        display: block;
        margin-left: 20px;
    }

    .img-container h6 {
        float: right;
        position: relative;
        top: 4px;
        margin-right: 6px;
    }

    .img-container img.bag {
        padding: 20px;
        width: 200px;
    }

    .divider {
        display: block;
        position: relative;
        background-color: #5bcbe8;
        height: 2px;
        width: 100%;
        margin: 0 auto;
        margin-top: 16px;
        margin-bottom: 16px;
    }

    /**---CONTACT PAGE--------------------------------------------------------------------------------------------  **/

    #contact-section {
        margin-top: 60px;
    }

    .form-container {
        width: auto;
        margin: 0 auto;
    }

    form {
        color: white;
        width: 900px;
        margin: 0 auto;
        margin-top: 30px;
    }

    textarea {
        resize: none;
        height: 150px;
    }

    button {
        float: right;
        margin-top: 20px;
        margin-bottom: 40px;
        padding: 12px 16px;
        border: none;
        border-radius: 8px;
        color: white;
        background-color: #5bcbe8;

    }

    .block-input {
        margin-top: 20px;
    }

    label {
        margin-bottom: 2px;
        color: #1c4152;
    }

    input[type=text]::placeholder,
    input[type=email]::placeholder {
        color: #ccc;
    }

    .field {
        margin: 0 15px;
    }

    /**--ABOUT PAGE---------------------------------------------------------------------------------------------  **/

    .about-bg {
        background-color: #fff;
        width: 100%;
    }

    .about-content {
        width: 900px;
        margin: 0 auto;
        background-color: #fff;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .about-text {
        float: left;
        display: block;
        position: relative;
        margin-right: 80px;
    }

    .about-image-2 {
        float: left;
        position: relative;
        display: block;
        margin: 100px 0 60px 80px;
    }

    .know-more {
        height: 436px;
        position: relative;
        display: block;
    }

    .know-content {
        display: block;
        position: relative;
        margin-top: -300px;
        width: 400px;
        margin-left: 60px;
        color: #fff;
    }

    .know-content p {
        margin-bottom: 20px;
    }

    .about-image-1 {
        margin-top: 30px;
    }

    .about-image-1 img {
        margin-right: 30px;
    }

    /**--MEET THE TEAM---------------------------------------------------------------------------------------------  **/

    .team {
        width: 1320px;
        margin: 0 auto;
        margin-bottom: 60px;
    }

    .team-member {
        padding: 10px;
    }

    .team-content {
        padding: 20px;
        background-color: #fff;
    }

    .team-member img {
        width: 100%;
        height: 320px;
        object-fit: cover;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .team-member h5 {
        margin-bottom: 20px;
    }

    .team-member button {
        float: left;
        width: 100%;
        margin: 0 0 16px 0;
    }

    /**---- ACCREDITATIONS ------------------------------------------------------------------------------------------- **/

    .accred {
        width: 100%;
        margin-bottom: 40px;
    }

    .page-title .sub-links a {
        color: #aaa;
    }

    .page-title .sub-links a:hover {
        color: #1c4152;
    }

    .accred img {
        height: 24px;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .outer-box {
        padding: 20px;
    }

    .accred-content {
        padding: 20px;
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.5);
        box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.5);
    }

    /**---WHAT WE DO--------------------------------------------------------------------------------------------  **/


    .wwd-title {
        margin-top: 60px;
        margin-bottom: 40px;
    }

    .wwd {
        background-color: #fff;
        width: 100%;
        margin-bottom: 60px;
        padding: 60px 0 60px 0;
    }

    .wwd-img-container {
        height: 200px;
        margin-bottom: 30px;
    }

    .wwd-subjects {
        padding: 0 40px 0 40px;
    }

    /**----WHERE DO WE DELIVER?-------------------------------------------------------------------------------------------  **/


    .delivery-title {
        margin-top: 60px;
    }

    .delivery-bg {
        background-color: #fff;
        width: 100%;
        margin: 60px 0 60px 0;
    }

    .delivery-content {
        width: 1200px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .main-road-sign-p {
        padding: 20px;
        background-color: #fff;
    }

    .main-road-sign {
        background-color: #0057C3;
        border: 4px solid #99BDE1;
        border-radius: 16px;
        padding: 30px 0 0 0;
    }

    .main-road-sign h4 {
        text-align: center;
        color: #fff;
    }

    .sign-icons {
        margin-left: 10px;
    }

    .arrow-signs-container {
        margin-bottom: 60px;
    }

    .arrow-signs-container img {
        display: block;
        width: 64px;
        margin: 0 auto;
    }

    .delivery-info img {
        display: block;
        width: 60px;
        margin: 0 auto;
        margin-top: 40px;
    }

    .delivery-map {
        width: 100%;
        margin-bottom: 100px;
    }

    .delivery-map img {
        display: block;
        margin: 0 auto;
        width: 40%;
    }

}